@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Account/Pages/LoginWith2fa.razor.rz.scp.css */
.form-floating>.form-control.two-factor-container[b-fwc5hwj8l2]{
    height: calc(4.5rem + 2px);
    min-height: calc(4.5rem + 2px);
    display: flex;
}

.form-floating>.form-control.two-factor-container:focus-within[b-fwc5hwj8l2]{
    outline: 0;
    box-shadow: 0 0 0 0.2rem #000061;
}

.two-factor-container-outer[b-fwc5hwj8l2] {
    width: 315px;
    overflow: hidden;
    margin: auto;
    position: relative;
}

.two-factor-container-inner[b-fwc5hwj8l2]{
    position: sticky;
    left: 0;
}

#two-factor-code[b-fwc5hwj8l2] {
    padding-left: 15px;
    outline: none;
    border: none;
    letter-spacing: 46px;
    height: 100%;
    font-size: 1.25rem;
    width: 365px;
    min-width: 365px;

    background-image: linear-gradient(to left, rgba(33,37,41, .65) 60%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 56px 1px;
    background-repeat: repeat-x;
    background-position-x: 30px;
}
/* /Components/Account/Pages/Manage/ApiSettings.razor.rz.scp.css */
.custom-claims-table[b-qrejg81ue6] {
    width: 100%;
}
@media (min-width: 1000px) {
    .custom-claims-table[b-qrejg81ue6] {
        min-width: 35%;
        max-width: 50%;
    }
}
.select-btn.add:hover[b-qrejg81ue6] {
    background-color: #8CD47E;
    font-weight: normal;
}
.select-btn.edit:hover[b-qrejg81ue6] {
    background-color: #F7A506;
    font-weight: normal;
}
.select-btn.remove:hover[b-qrejg81ue6] {
    background-color: #FF6961;
    font-weight: normal;
}
/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
/* ── App shell ──────────────────────────────────────── */

.shop-front-container[b-0xr755ktfz] {
    display: grid;
    grid-template-columns: 1fr 340px;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(ellipse 120% 80% at 20% 10%, rgba(26, 111, 196, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 100% 60% at 80% 90%, rgba(30, 58, 138, 0.10) 0%, transparent 50%),
        linear-gradient(145deg, #dce7f5 0%, #e8f0fb 30%, #f0f4fa 60%, #e4ecf7 100%);
}

/* ── Dashboard (left panel) ─────────────────────────── */

.shop-front-dashboard[b-0xr755ktfz] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ssy-navbar-container[b-0xr755ktfz]{
    /*background: linear-gradient(to right, #003F9A, #1544A3,#0092D1,#0092D1);*/
    background: #000061;
    color: white;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
}

/* ssy-navbar-title */
.ssy-navbar-title[b-0xr755ktfz] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}
.ssy-navbar-title .ssy-nav-Logo[b-0xr755ktfz] {
    background-image: url('./assets/Logo/SSYLogo_1Line_White_M.png');
    background-repeat: no-repeat;
    width: 80px;
    height: 30px;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: white;
    /*check aspect ratio*/
}
.ssy-navbar-title .ssy-nav-Logo:not(.no-wave-animation):hover[b-0xr755ktfz] {
    animation: nav-ssyLogo-colorWave 6s ease-in-out infinite alternate;
}

.ssy-navbar-title .navigator-text[b-0xr755ktfz]{
    font-size: 2.3rem;
    font-family: 'Soehne Breit', cursive;
    /*  wider spacing*/
    letter-spacing: 0.15em;
    color: white;
    font-weight: 400;
    text-decoration: none;
    margin-bottom: 0;
    margin-left: 5px;
    position: relative;
}

.ssy-navbar-title .navigator-text:hover[b-0xr755ktfz] {
    animation: nav-ssyLogo-colorWave 6s ease-in-out infinite alternate;
}

.ssy-navbar-title .navigator-text .navigator-text-half[b-0xr755ktfz]{
    display: none;
}
.ssy-navbar-title .navigator-text .navigator-text-full[b-0xr755ktfz]{
    display: block;
}

@media only screen and (max-width: 1570px) {
    .ssy-navbar-title .navigator-text[b-0xr755ktfz] {
        font-size: 1.3rem;
        margin-left: -10px;
        margin-top: 5px;
        display: block;
    }
    .ssy-navbar-title .navigator-text .navigator-text-half[b-0xr755ktfz]{
        display: block;
    }
    .ssy-navbar-title .navigator-text .navigator-text-full[b-0xr755ktfz]{
        display: none;
    }
}

.ssy-navbar-container .ssy-navbar-links[b-0xr755ktfz] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.ssy-navbar-container .ssy-navbar-links ul[b-0xr755ktfz] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.ssy-navbar-container .ssy-navbar-links ul li.podcast-links[b-0xr755ktfz]{
    display: flex;
    flex-direction: row;
}

.ssy-navbar-container .ssy-navbar-links ul li a img[b-0xr755ktfz] {
    height: 30px;
}

.ssy-navbar-container .ssy-navbar-links .ssy-btn-theme[b-0xr755ktfz],
.ssy-navbar-container .ssy-navbar-links .ssy-btn-ssyglobal[b-0xr755ktfz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: white;
    border-radius: 5px;
    padding: 5px 5px;
    color: #000061;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: box-shadow 0.3s ease;
}

.ssy-navbar-container .ssy-navbar-links ul li a.ssy-btn-ssyglobal img[b-0xr755ktfz] {
    height: 20px;
}

.ssy-navbar-container .ssy-navbar-links ul li a:hover[b-0xr755ktfz] {
    box-shadow: 0 0 12px rgb(255, 255, 255, 0.8);
}

/* ── Login panel (right panel) ──────────────────────── */

.acc-login-panel[b-0xr755ktfz] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: rgba(181, 203, 214, 0.88);
    box-shadow: -4px 0 30px rgba(10, 22, 40, 0.1);
    overflow: hidden;
}

.acc-login-panel[b-0xr755ktfz]::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(15, 36, 81, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

/* Back link */
.ssy-btn-back-to-login[b-0xr755ktfz] {
    position: absolute;
    top: 18px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.acc-ssy-link[b-0xr755ktfz] {
    position: absolute;
    top: 18px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: #4a6080;
    text-decoration: none;
    transition: color 0.2s;
    animation: accFadeDown-b-0xr755ktfz 0.8s ease both;
    z-index: 1;
}

.acc-ssy-link:hover[b-0xr755ktfz] { color: #0f2451; }

.acc-ssy-link svg[b-0xr755ktfz] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Logo block */
.acc-login-logo[b-0xr755ktfz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
    animation: accFadeDown-b-0xr755ktfz 0.8s ease both;
    position: relative;
    z-index: 1;
}

.acc-compass[b-0xr755ktfz] {
    width: 68px;
    height: 68px;
    margin-bottom: 16px;
}

.acc-compass svg[b-0xr755ktfz] { width: 100%; height: 100%; }

.acc-needle[b-0xr755ktfz] {
    transform-origin: center;
    animation: accCompassSpin-b-0xr755ktfz 3s ease-in-out forwards;
}

.acc-login-logo h2[b-0xr755ktfz] {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #0f2451;
    margin: 0;
}

.acc-login-logo p[b-0xr755ktfz] {
    font-size: 11px;
    color: #4a6080;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 6px;
}

/* @Body slot */
.acc-body-slot[b-0xr755ktfz] {
    width: 100%;
    max-width: 280px;
    animation: accFadeUp-b-0xr755ktfz 0.8s ease 0.2s both;
    position: relative;
    z-index: 1;
}

[b-0xr755ktfz] .acc-body-slot h1,
[b-0xr755ktfz] .acc-body-slot .h1 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f2451;
    margin: 0 0 16px 0;
}

[b-0xr755ktfz] .acc-body-slot .form-control {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 7px;
    color: #0f2451;
    font-size: 14px;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

[b-0xr755ktfz] .acc-body-slot .form-control:focus {
    border-color: #1a6fc4;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.15);
}

[b-0xr755ktfz] .acc-body-slot .form-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #4a6080;
    font-weight: 600;
}

[b-0xr755ktfz] .acc-body-slot .btn-primary {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 7px;
    background: linear-gradient(135deg, #2a7fd4, #1a6fc4);
    color: white;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(26, 111, 196, 0.4);
    transition: box-shadow 0.3s, transform 0.2s;
}

[b-0xr755ktfz] .acc-body-slot .btn-primary:hover {
    box-shadow: 0 6px 24px rgba(26, 111, 196, 0.5);
    transform: translateY(-1px);
    background: linear-gradient(135deg, #2a7fd4, #1a6fc4);
}

[b-0xr755ktfz] .acc-body-slot a {
    color: #1a6fc4;
    font-size: 11.5px;
}

[b-0xr755ktfz] .acc-body-slot a:hover { color: #0f2451; }

/* Footer */
.acc-login-footer[b-0xr755ktfz] {
    margin-top: 28px;
    text-align: center;
    font-size: 10.5px;
    color: #8898b0;
    animation: accFadeUp-b-0xr755ktfz 0.8s ease 0.4s both;
    position: relative;
    z-index: 1;
}

.acc-login-footer p[b-0xr755ktfz] { margin: 0; }
.acc-login-footer p + p[b-0xr755ktfz] { margin-top: 4px; }

/* ── Animations ─────────────────────────────────────── */

@keyframes accFadeDown-b-0xr755ktfz {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes accFadeUp-b-0xr755ktfz {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes accCompassSpin-b-0xr755ktfz {
    0%   { transform: rotate(-90deg); }
    60%  { transform: rotate(10deg);  }
    80%  { transform: rotate(-5deg);  }
    100% { transform: rotate(0deg);   }
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 1280px) {
    .shop-front-container[b-0xr755ktfz] { grid-template-columns: 1fr 320px; }
}

@media (max-width: 1050px) {
    .shop-front-container[b-0xr755ktfz] { grid-template-columns: 1fr 300px; }
}

@media (max-width: 800px) {
    .shop-front-container[b-0xr755ktfz] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
        min-height: 100vh;
    }

    .acc-login-panel[b-0xr755ktfz] {
        order: -1;
        padding: 20px 28px;
        flex-direction: row;
        align-items: center;
        gap: 28px;
        justify-content: flex-start;
    }

    .acc-login-logo[b-0xr755ktfz] {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .acc-compass[b-0xr755ktfz] { width: 48px; height: 48px; margin-bottom: 8px; }
    .acc-login-logo h2[b-0xr755ktfz] { font-size: 20px; }
    .acc-login-footer[b-0xr755ktfz] { display: none; }
    .acc-ssy-link[b-0xr755ktfz] { top: 10px; right: 14px; left: auto; }
    .acc-body-slot[b-0xr755ktfz] { max-width: 280px; }

    .shop-front-dashboard[b-0xr755ktfz] { overflow-y: auto; }
}

@media (max-width: 560px) {
    .acc-login-panel[b-0xr755ktfz] { flex-direction: column; padding: 16px 20px; }
    .acc-compass[b-0xr755ktfz] { width: 40px; height: 40px; }
    .acc-login-logo h2[b-0xr755ktfz] { font-size: 18px; }
    .acc-login-logo p[b-0xr755ktfz] { font-size: 9px; letter-spacing: 2px; }
}
/* /Components/Account/Shared/MarketTileGrid.razor.rz.scp.css */
/* ── Layout ─────────────────────────────────────────── */

.mtg-body[b-ofptghjwxg] {
    flex: 1;
    display: flex;
    gap: 12px;
    padding: 14px 18px 14px 22px;
    min-height: 0;
    background:
        radial-gradient(ellipse 140% 60% at 50% 0%, rgba(26, 111, 196, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(10, 22, 40, 0.3) 0%, transparent 60%),
        linear-gradient(175deg, #122c5e 0%, #0f2451 40%, #0a1a3d 100%);
}

.mtg-left-col[b-ofptghjwxg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    min-width: 0;
}

.mtg-right-col[b-ofptghjwxg] {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    min-width: 0;
}

.mtg-curves-grid[b-ofptghjwxg] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    min-height: 0;
}

.mtg-chart-card[b-ofptghjwxg] {
    flex: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mtg-news-card[b-ofptghjwxg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Cards ──────────────────────────────────────────── */

.mtg-card[b-ofptghjwxg] {
    background: #ffffff;
    border: 1px solid #cdd8e8;
    border-radius: 11px;
    padding: 10px 12px;
    box-shadow: 0 1px 4px rgba(15, 36, 81, 0.08), 0 4px 16px rgba(15, 36, 81, 0.06);
    animation: mtgCardIn-b-ofptghjwxg 0.5s ease both;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.mtg-card:hover[b-ofptghjwxg] {
    border-color: #4a7ab5;
    box-shadow: 0 4px 20px rgba(15, 36, 81, 0.14), 0 1px 4px rgba(15, 36, 81, 0.08);
}

@keyframes mtgCardIn-b-ofptghjwxg {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mtg-card-title[b-ofptghjwxg] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #1e3a8a;
    margin-bottom: 8px;
    flex-shrink: 0;
    font-family: 'DM Sans', sans-serif;
}

.mtg-card-title[b-ofptghjwxg]::before {
    content: '';
    width: 3px;
    height: 11px;
    background: #1a6fc4;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Subtitle card ──────────────────────────────────── */

.mtg-subtitle-card[b-ofptghjwxg] {
    flex-shrink: 0;
    padding: 10px 14px;
    background: #1e3a8a;
    border-color: #1e3a8a;
}

.mtg-subtitle-card .mtg-card-title[b-ofptghjwxg] {
    color: rgba(255, 255, 255, 0.6);
}

.mtg-subtitle-card .mtg-card-title[b-ofptghjwxg]::before {
    background: rgba(255, 255, 255, 0.4);
}

.mtg-subtitle-card p[b-ofptghjwxg] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    font-family: 'DM Sans', sans-serif;
}

.mtg-subtitle-card strong[b-ofptghjwxg] {
    font-weight: 600;
    color: #ffffff;
}

/* ── Tables ─────────────────────────────────────────── */

.mtg-table[b-ofptghjwxg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: 'DM Sans', sans-serif;
}

.mtg-table thead tr[b-ofptghjwxg] {
    background: #1e3a8a;
}

.mtg-table thead th[b-ofptghjwxg] {
    padding: 4px 8px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: left;
}

.mtg-table thead th:not(:first-child)[b-ofptghjwxg] {
    text-align: right;
}

.mtg-table tbody td[b-ofptghjwxg] {
    padding: 4px 8px;
    border-bottom: 1px solid #e2eaf4;
    color: #4a6080;
    white-space: nowrap;
}

.mtg-table tbody tr:nth-child(even) td[b-ofptghjwxg] {
    background: #f4f8fc;
}

.mtg-table tbody tr:hover td[b-ofptghjwxg] {
    background: #e8f0fb;
    color: #0f2451;
}

.mtg-table tbody tr:last-child td[b-ofptghjwxg] {
    border-bottom: none;
}

.mtg-mid[b-ofptghjwxg] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    color: #0f2451 !important;
    font-weight: 600;
}

.mtg-chg[b-ofptghjwxg] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.mtg-chg.mtg-up[b-ofptghjwxg]   { color: #16a34a !important; }
.mtg-chg.mtg-down[b-ofptghjwxg] { color: #dc2626 !important; }
.mtg-chg.mtg-flat[b-ofptghjwxg] { color: #8898b0 !important; }

.mtg-spot td[b-ofptghjwxg] {
    background: #fffbeb !important;
    color: #92400e !important;
    font-weight: 600;
    border-bottom: 1px solid #fde68a !important;
}

.mtg-spot .mtg-mid[b-ofptghjwxg] {
    color: #b45309 !important;
}

/* ── Chart ──────────────────────────────────────────── */

.mtg-chart-card .mtg-card-title[b-ofptghjwxg] {
    margin-bottom: 6px;
}

.mtg-chart-wrap[b-ofptghjwxg] {
    position: relative;
    flex: 1;
    min-height: 0;
}

.mtg-chart-wrap > div[b-ofptghjwxg] {
    width: 100%;
    height: 100%;
}

/* ── News ───────────────────────────────────────────── */

.mtg-news-list[b-ofptghjwxg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.mtg-news-item[b-ofptghjwxg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 7px;
    background: #f4f8fc;
    border: 1px solid #e2eaf4;
    transition: background 0.2s, border-color 0.2s;
    flex: 1;
}

.mtg-news-item:hover[b-ofptghjwxg] {
    background: #dbeafe;
    border-color: rgba(30, 58, 138, 0.2);
}

.mtg-news-date[b-ofptghjwxg] {
    flex-shrink: 0;
    width: 42px;
    text-align: center;
    font-size: 10px;
    color: #8898b0;
    line-height: 1.4;
    font-family: 'DM Sans', sans-serif;
}

.mtg-news-date strong[b-ofptghjwxg] {
    display: block;
    font-size: 15px;
    color: #1e3a8a;
    font-weight: 700;
    line-height: 1.1;
}

.mtg-news-body[b-ofptghjwxg] { flex: 1; }

.mtg-news-body h4[b-ofptghjwxg] {
    font-size: 11.5px;
    font-weight: 600;
    color: #0f2451;
    margin-bottom: 2px;
    line-height: 1.3;
    font-family: 'DM Sans', sans-serif;
}

.mtg-news-body p[b-ofptghjwxg] {
    font-size: 10.5px;
    color: #4a6080;
    line-height: 1.4;
    font-family: 'DM Sans', sans-serif;
}

.mtg-news-author[b-ofptghjwxg] {
    font-size: 10px;
    color: #1a6fc4;
    margin-top: 2px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 1500px) {
    .mtg-body[b-ofptghjwxg] { padding: 12px 16px 12px 18px; gap: 10px; }
}

@media (max-width: 1050px) {
    .mtg-body[b-ofptghjwxg] { flex-direction: column; overflow-y: auto; }
    .mtg-left-col[b-ofptghjwxg], .mtg-right-col[b-ofptghjwxg] { flex: none; }
    .mtg-curves-grid[b-ofptghjwxg] { grid-template-rows: repeat(3, auto); }
    .mtg-chart-card[b-ofptghjwxg] { min-height: 200px; }
    .mtg-news-card[b-ofptghjwxg]  { min-height: 220px; }
}
/* /Components/Account/Shared/OldAccountLayout.razor.rz.scp.css */
.login-main[b-adcvj360dr]{
    background-image: url("../assets/Background_Images/tankerDoingShippingThings_alt.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;

}

@media only screen and (max-width: 1400px) {
    .login-main[b-adcvj360dr] {
        background-image: url("../assets/Background_Images/LNGDockedComp.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 100vh;
        width: 100vw;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (max-width: 1000px) {
    .login-main[b-adcvj360dr] {
        background-image: url("../assets/Background_Images/Mobile/DarkPortraitMobile.jpeg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 100vh;
        width: 100vw;
        justify-content: center;
        align-items: center;
    }
}

.login-form[b-adcvj360dr] {
    background-color: rgb(181, 203, 214, 0.88);
    border-radius: 1rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

[b-adcvj360dr] .form-control:focus {
    background-color: #fff;
}

[b-adcvj360dr] h1, [b-adcvj360dr] .h1 {
    margin: 1rem 0 1rem 0;
    font-size: 2.75rem;
    /*white-space: nowrap;*/
}

[b-adcvj360dr] p {
    font-family: "Soehne",cursive;
    font-size: 1.1rem;
}

[b-adcvj360dr] .btn {
    font-size: 1.25rem;
}

.marquee[b-adcvj360dr] {
    height: 1.5rem;
    background-color: rgba(64, 88, 100, 0.8);
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 1000; /* Ensure it's on top of other elements */
}

.marquee ul[b-adcvj360dr] {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    width: auto;
    left: 0;
    animation: marqueeAnim-b-adcvj360dr 90s linear infinite; /* Increased from 60s to 90s to make it slower */
}

.marquee li[b-adcvj360dr] {
    display: inline-block;
    color: white;
    font-size: 1.1rem;
    margin-right: 150px; /* Add a margin to prevent overlapping */
}

.marquee li a[b-adcvj360dr] {
    color: white;
    text-decoration: none;
}

.marquee:hover ul[b-adcvj360dr] {
    animation-play-state: paused;
}

.marquee li:hover[b-adcvj360dr] {
    animation-play-state: paused;
}

.marquee li a:hover[b-adcvj360dr] {
    text-decoration: underline;
}

@keyframes marqueeAnim-b-adcvj360dr {
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media screen and (max-width: 1400px) {
    .marquee[b-adcvj360dr] {
        display: none;
    }
}
/* /Components/Account/Shared/ShopFrontDashboard.razor.rz.scp.css */
/* /Components/Common/ChartBuilder/HighchartBase.razor.rz.scp.css */
.HighChart-Base[b-t5qgcncj1o],
.highcharts-basic-theme[b-t5qgcncj1o],
.highcharts-myssy-light[b-t5qgcncj1o],
.highcharts-myssy-dark[b-t5qgcncj1o] {
    height: 100%;
}

.HighChart-Base.highcharts-basic-theme[b-t5qgcncj1o]  > .highcharts-container image,
.HighChart-Base.highcharts-myssy-light[b-t5qgcncj1o]  > .highcharts-container image {
    opacity: 5%;
}

.HighChart-Base.highcharts-myssy-dark[b-t5qgcncj1o]  > .highcharts-container image {
    opacity: 30%;
}
/* /Components/Common/ChartBuilder/PeriodCode_Selector.razor.rz.scp.css */
.periodcode-component form[b-6di5g6b8v5] {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 5px;
}

    .periodcode-component form .ssy-select-long[b-6di5g6b8v5] {
        width: auto;
    }

    .periodcode-component form .periodcode-title-container[b-6di5g6b8v5] {
        margin: auto;
        display: inline-block;
    }

    .periodcode-component form .periodcode-checkbox-parent-container[b-6di5g6b8v5] {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .periodcode-component form .periodcode-checkbox-container[b-6di5g6b8v5] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

        .periodcode-component form .periodcode-checkbox-container label[b-6di5g6b8v5] {
            padding: 0.25rem;
        }

            .periodcode-component form .periodcode-checkbox-container label > input[b-6di5g6b8v5] {
                vertical-align: middle;
            }

.periodcode-component .periodcode-selected-container[b-6di5g6b8v5] {
    /*    display: flex;
flex-direction: column;*/
    width: 100%;
}

    .periodcode-component .periodcode-selected-container > table[b-6di5g6b8v5] {
        width: 100%;
    }

        .periodcode-component .periodcode-selected-container > table > caption[b-6di5g6b8v5] {
            caption-side: top;
            color: #000000;
            font-weight: 400;
            margin-bottom: 0;
        }

        .periodcode-component .periodcode-selected-container > table > thead > tr[b-6di5g6b8v5] {
            background-color: #009DC9;
            color: white;
            border-color: #009DC9;
        }

        .periodcode-component .periodcode-selected-container > table > tbody > td[b-6di5g6b8v5] {
            display: flex;
            flex-direction: row;
            align-items: center;
        }


.selected-year[b-6di5g6b8v5] {
    background-color: #B5CBD6;
    width: 3rem;
}
/* /Components/Common/ChartBuilder/PeriodOffset_Selector.razor.rz.scp.css */

/*
    .periodoffset-component form .ssy-select-long {
        width: auto;
    }

    .periodcode-component form .periodcode-title-container {
        margin: auto;
        display: inline-block;
    }

    .periodcode-component form .periodcode-checkbox-parent-container {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .periodcode-component form .periodcode-checkbox-container {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

        .periodcode-component form .periodcode-checkbox-container label {
            padding: 0.25rem;
        }

            .periodcode-component form .periodcode-checkbox-container label > input {
                vertical-align: middle;
            }
*/
/* /Components/Common/ChartBuilder/Route_Selector.razor.rz.scp.css */
.dataselector-component form[b-hogceo55vz] {
    padding-left: 2rem;
    display: flex;
    gap: 2rem;
    justify-content: flex-start;
    margin-bottom: 5px;
}

.dataselector-component form .ssy-select-long[b-hogceo55vz] {
    width: auto;
}

.ssy-select-long[b-hogceo55vz] {
    border: 1px solid #767676;
}

.dataselector-component .dataselector-selected-container[b-hogceo55vz] {
    /*    display: flex;
flex-direction: column;*/
    width: 100%;
}

.dataselector-component .dataselector-selected-container > table[b-hogceo55vz] {
    width: 100%;
}

.dataselector-component .dataselector-selected-container > table > caption[b-hogceo55vz] {
    caption-side: top;
    color: #000000;
    font-weight: 400;
    margin-bottom: 0;
}

.dataselector-component .dataselector-selected-container > table > thead > tr[b-hogceo55vz] {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

    .dataselector-component .dataselector-selected-container > table > tbody[b-hogceo55vz] {
        font-size: 0.8rem;
    }

.selected-key[b-hogceo55vz] {
    background-color: #B5CBD6;
    width: 6rem;
}


.selected-sublist[b-hogceo55vz] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1rem;
    border-bottom: 1px solid #B5CBD6;
}

.route-selected:checked + .route-selected-label[b-hogceo55vz] {
    background-color: #000061;
    color: white;
}

.route-selected-label[b-hogceo55vz] {
    width:100%;
}


.route-selected-label:hover[b-hogceo55vz] {
    background-color: #E9EFF9;
}
/* /Components/Common/ContangoLevels/ContangoLevels.razor.rz.scp.css */
table.enterPrices[b-4nyjqy7tk9] {
    caption-side: top;
}

table.enterPrices > thead > tr[b-4nyjqy7tk9], table.enterPrices tr.tableHeader[b-4nyjqy7tk9] {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

table.enterPrices > tbody > tr[b-4nyjqy7tk9] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: min-content !important;
}

.routeName[b-4nyjqy7tk9] {
    font-weight: bold;
    background-color: #000061;
    color: white;
    font-size: 120%;
    padding: 0 0 0 5px;
    align-content: center;
    height: 1.9em;
}

.fcdesc[b-4nyjqy7tk9] {
    text-align: left;
    padding-left: 5px;
    width: 12em;
}

.fcprice[b-4nyjqy7tk9] {
    text-align: right;
    width: 8em;
}

.fcjointprice[b-4nyjqy7tk9] {
    text-align: right;
    width: 10em;
}

.negNum[b-4nyjqy7tk9] {
    color: red;
}

.posNum[b-4nyjqy7tk9] {
    color: darkgreen;
}

.percMove1[b-4nyjqy7tk9] {
    background-color: lemonChiffon;
}

.percMove2[b-4nyjqy7tk9] {
    background-color: gold;
}

.percMove3[b-4nyjqy7tk9] {
    background-color: orange;
}

.percMove4[b-4nyjqy7tk9] {
    background-color: red;
    color: white;
}

[b-4nyjqy7tk9] .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    width: 95%;
    /*min-width: 5rem;*/
    /*max-width: 8rem;*/
}

[b-4nyjqy7tk9] .staleprice {
    background-color: LightYellow;
}

table .remove:hover[b-4nyjqy7tk9] {
    background-color: #FF6961;
    cursor: pointer;
}

.small-icon[b-4nyjqy7tk9] {
    height: 20px;
}
/* /Components/Common/DashboardComponents_HA/DashAlertChipRow.razor.rz.scp.css */
.dash-alert-chip-row[b-o622cyf58g] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.dash-alert-chip-row[b-o622cyf58g]  .dash-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    border-radius: 4px;
    background: var(--ssy-dash-row-active-bg, #EAF1F5);
    color: var(--ssy-dash-text-dim, #536A75);
    font-size: var(--ssy-fs-base);
    font-weight: 600;
    line-height: 1.2;
    padding: 5px 8px;
}

.dash-alert-chip-row[b-o622cyf58g]  .dash-alert-chip strong {
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
    font-weight: 800;
}
/* /Components/Common/DashboardComponents_HA/DashboardDiagPanel.razor.rz.scp.css */
.ssy-diag-panel[b-s0ssxrna4b] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    justify-content: flex-end;
    color: var(--ssy-dash-text, #1a1a1a);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.ssy-diag-panel .ssy-diag-panel__scrim[b-s0ssxrna4b] {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgb(0 0 0 / 28%);
    cursor: pointer;
}

.ssy-diag-panel .ssy-diag-panel__drawer[b-s0ssxrna4b] {
    position: relative;
    width: min(980px, 94vw);
    height: 100%;
    overflow: auto;
    background: var(--ssy-dash-surface, #fff);
    border-left: 1px solid var(--ssy-dash-border, #E1E8ED);
    box-shadow: -12px 0 30px rgb(0 0 0 / 18%);
    padding: 12px;
}

.ssy-diag-panel .ssy-diag-panel__head[b-s0ssxrna4b] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--ssy-dash-border, #E1E8ED);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.ssy-diag-panel h2[b-s0ssxrna4b],
.ssy-diag-panel h3[b-s0ssxrna4b],
.ssy-diag-panel p[b-s0ssxrna4b] {
    margin: 0;
}

.ssy-diag-panel h2[b-s0ssxrna4b] {
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue));
    font-size: var(--ssy-fs-lg);
    font-weight: 800;
    text-transform: uppercase;
}

.ssy-diag-panel h3[b-s0ssxrna4b] {
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue));
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    margin-top: 10px;
    text-transform: uppercase;
}

.ssy-diag-panel p[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__age[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__no-error[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__empty[b-s0ssxrna4b] {
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-small);
}

.ssy-diag-panel .ssy-diag-panel__actions[b-s0ssxrna4b] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.ssy-diag-panel button[b-s0ssxrna4b] {
    font-family: inherit;
}

.ssy-diag-panel .ssy-diag-panel__tabs[b-s0ssxrna4b] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ssy-diag-panel .ssy-diag-panel__tab[b-s0ssxrna4b] {
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    background: var(--ssy-dash-surface, #fff);
    color: var(--ssy-dash-text-muted, #798E98);
    cursor: pointer;
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    padding: 6px 10px;
    text-transform: uppercase;
}

.ssy-diag-panel .ssy-diag-panel__tab:hover[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__tab--active[b-s0ssxrna4b] {
    border-color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue));
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue));
}

.ssy-diag-panel .ssy-diag-panel__reload-all[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__row-btn[b-s0ssxrna4b] {
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    background: var(--ssy-dash-surface, #fff);
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue));
    cursor: pointer;
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    padding: 5px 8px;
    text-transform: uppercase;
}

.ssy-diag-panel .ssy-diag-panel__reload-all:hover[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__row-btn:hover[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__close:hover[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__expand:hover[b-s0ssxrna4b] {
    border-color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue));
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue));
}

.ssy-diag-panel .ssy-diag-panel__close[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__expand[b-s0ssxrna4b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    border-radius: 999px;
    background: var(--ssy-dash-surface, #fff);
    color: var(--ssy-dash-text-muted, #798E98);
    cursor: pointer;
    font-size: var(--ssy-fs-base);
    font-weight: 900;
    line-height: 1;
}

.ssy-diag-panel .ssy-diag-panel__table-wrap[b-s0ssxrna4b] {
    overflow-x: auto;
}

.ssy-diag-panel .ssy-diag-panel__table[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__history[b-s0ssxrna4b] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ssy-fs-small);
}

.ssy-diag-panel th[b-s0ssxrna4b] {
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
    padding: 7px 8px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.ssy-diag-panel td[b-s0ssxrna4b] {
    border-top: 1px solid var(--ssy-dash-row-line, #F2F5F8);
    padding: 7px 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.ssy-diag-panel .ssy-diag-panel__label[b-s0ssxrna4b] {
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue));
    font-weight: 800;
}

.ssy-diag-panel .ssy-diag-panel__age[b-s0ssxrna4b] {
    display: block;
    margin-top: 1px;
}

.ssy-diag-panel .ssy-diag-panel__muted[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__note[b-s0ssxrna4b] {
    color: var(--ssy-dash-text-muted, #798E98);
}

.ssy-diag-panel .ssy-diag-panel__badge[b-s0ssxrna4b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    border-radius: 999px;
    color: var(--ssy-colour-main-pure-white);
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
    line-height: 1;
    padding: 4px 7px;
    text-transform: uppercase;
}

.ssy-diag-panel .ssy-diag-panel__badge--ok[b-s0ssxrna4b] {
    background: var(--ssy-dash-up, var(--ssy-colour-palette-teal-green));
}

.ssy-diag-panel .ssy-diag-panel__badge--empty[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__badge--timeout[b-s0ssxrna4b] {
    background: var(--ssy-colour-palette-golden-yellow);
}

.ssy-diag-panel .ssy-diag-panel__badge--cancelled[b-s0ssxrna4b] {
    background: var(--ssy-colour-palette-slate-gray);
}

.ssy-diag-panel .ssy-diag-panel__badge--error[b-s0ssxrna4b] {
    background: var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red));
}

.ssy-diag-panel .ssy-diag-panel__detail-row td[b-s0ssxrna4b] {
    background: var(--ssy-dash-row-active, #EAF1F5);
    white-space: normal;
}

.ssy-diag-panel .ssy-diag-panel__detail[b-s0ssxrna4b] {
    display: grid;
    gap: 8px;
}

.ssy-diag-panel .ssy-diag-panel__section[b-s0ssxrna4b] {
    display: grid;
    gap: 10px;
}

.ssy-diag-panel .ssy-diag-panel__history th[b-s0ssxrna4b],
.ssy-diag-panel .ssy-diag-panel__history td[b-s0ssxrna4b] {
    background: var(--ssy-dash-surface, #fff);
}

.ssy-diag-panel .ssy-diag-panel__error-table td[b-s0ssxrna4b] {
    vertical-align: top;
}

.ssy-diag-panel .ssy-diag-panel__error-cell[b-s0ssxrna4b] {
    min-width: 320px;
    white-space: normal;
}

.ssy-diag-panel .ssy-diag-panel__error[b-s0ssxrna4b] {
    max-height: 180px;
    overflow: auto;
    user-select: text;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    background: var(--ssy-dash-surface, #fff);
    color: var(--ssy-dash-text, #1a1a1a);
    font-size: var(--ssy-fs-small);
    margin: 0;
    padding: 8px;
}

.ssy-diag-panel .ssy-diag-panel__empty[b-s0ssxrna4b] {
    border: 1px solid var(--ssy-dash-border, #E1E8ED);
    background: var(--ssy-dash-row-active, #EAF1F5);
    padding: 12px;
}

@media (max-width: 720px) {
    .ssy-diag-panel .ssy-diag-panel__drawer[b-s0ssxrna4b] {
        width: 100vw;
    }

    .ssy-diag-panel .ssy-diag-panel__head[b-s0ssxrna4b] {
        flex-direction: column;
    }
}
/* /Components/Common/DashboardComponents_HA/DashContextLine.razor.rz.scp.css */
.dash-context-line[b-4sqxe6gmmg] {
    display: flex;
    gap: 11px;
    padding: 2px 4px 0 4px;
    font-size: var(--ssy-fs-small);
    color: var(--ssy-dash-text-dim, #536A75);
    letter-spacing: 0.25px;
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--ssy-dash-row-line, #F2F5F8);
    margin-top: 2px;
    flex-wrap: wrap;
}

.dash-context-line-wide[b-4sqxe6gmmg] {
    justify-content: space-between;
}

.dash-context-line[b-4sqxe6gmmg]  .dash-ctx-label {
    text-transform: uppercase;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-micro);
    letter-spacing: 0.55px;
    margin-right: 3px;
}
/* /Components/Common/DashboardComponents_HA/DashEyebrow.razor.rz.scp.css */
.dash-eyebrow[b-an5eq2ng0y] {
    margin: 0;
    text-transform: uppercase;
}

.dash-eyebrow-muted[b-an5eq2ng0y] {
    color: var(--ssy-dash-text-dim, #536A75);
    font-weight: 600;
    letter-spacing: 1.4px;
}

.dash-eyebrow-brand[b-an5eq2ng0y] {
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
    font-weight: 800;
    letter-spacing: 0.7px;
}

.dash-eyebrow-tiny[b-an5eq2ng0y] {
    font-size: var(--ssy-fs-tiny);
}

.dash-eyebrow-small[b-an5eq2ng0y] {
    font-size: var(--ssy-fs-small);
}

.dash-eyebrow-base[b-an5eq2ng0y] {
    font-size: var(--ssy-fs-base);
}
/* /Components/Common/DashboardComponents_HA/DashFreshnessPill.razor.rz.scp.css */
.dash-freshness[b-796h2s1p4i] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dash-freshness-bare[b-796h2s1p4i] {
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-small);
    font-weight: 600;
}

.dash-freshness-pill[b-796h2s1p4i] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    border-radius: 4px;
    background: var(--ssy-dash-row-active-bg, #EAF1F5);
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-base);
    font-weight: 600;
    line-height: 1.2;
    padding: 5px 8px;
}

/* Non-live quality marker. Only rendered when the data is not live, so it can
   afford to be visually distinct without adding noise to normal panels. */
.dash-freshness-quality[b-796h2s1p4i] {
    margin-left: 5px;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--ssy-dash-tint-warn, #FBE9EA);
    color: var(--ssy-dash-warn, #DB303A);
    font-size: var(--ssy-fs-micro);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* /Components/Common/DashboardComponents_HA/DashHeatCell.razor.rz.scp.css */
.ssy-heat-cell[b-y7m6rknjcd] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0 2px;
    background: var(--ssy-dash-heat-bg, transparent);
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
/* /Components/Common/DashboardComponents_HA/DashLegendRow.razor.rz.scp.css */
.dash-legend-row[b-uhhjyv37zx] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    color: var(--ssy-dash-text-dim, #536A75);
    font-size: var(--ssy-fs-small);
    font-weight: 700;
}

.dash-legend-item[b-uhhjyv37zx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dash-legend-label[b-uhhjyv37zx] {
    color: inherit;
}

.dash-legend-note[b-uhhjyv37zx] {
    color: var(--ssy-dash-text-muted, #798E98);
    font-weight: 600;
    font-style: italic;
}
/* /Components/Common/DashboardComponents_HA/DashTabHeader.razor.rz.scp.css */
.dash-tabheader[b-hnay2vzdes] {
    display: grid;
    gap: 6px;
}

.dash-tabheader-head[b-hnay2vzdes] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 0 2px;
}

.dash-tabheader-title[b-hnay2vzdes] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.dash-tabheader-title[b-hnay2vzdes]  .dash-tabheader-title-text {
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
    font-size: var(--ssy-fs-lg);
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.dash-tabheader-tabs[b-hnay2vzdes],
.dash-tabheader-actions[b-hnay2vzdes],
.dash-tabheader-meta[b-hnay2vzdes] {
    min-width: 0;
}

.dash-tabheader-actions[b-hnay2vzdes] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.dash-tabheader-meta[b-hnay2vzdes] {
    margin-left: auto;
}

.dash-tabheader-toolbar[b-hnay2vzdes] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 4px;
}
/* /Components/Common/DashboardComponents_HA/SsyAccordionTable.razor.rz.scp.css */
/* ============================================================
   SsyAccordionTable structural styles. Covers the shell plus the
   group/row/section rows rendered by its children (reached with ::deep).
   Cell-kit visuals (band bar, sparkline, delta, status dot, detail panel)
   live in their own component CSS. Themed via the host's --ssy-dash-* vars
   with neutral fallbacks; calm/caution/alert/hot/cool fall back to the
   ssy-colour palette so the module works before a host maps them.
   ============================================================ */

/* Host passes available height through to the table wrap so the accordion can
   be an internal scroll pane inside a fit-col card (ssy-fit grammar); in a
   normal block flow these are no-ops and the table sizes to content. */
.ssya-host[b-yc3x8mukj8] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ssya-host[b-yc3x8mukj8]  .ssy-dash-tablewrap {
    flex: 1 1 auto;
    min-height: 0;
}

/* Fixed layout so column widths come from <colgroup>, never from row content —
   expanding a region can't make the columns jump. */
.ssya-table[b-yc3x8mukj8] {
    table-layout: fixed;
}

/* --- column alignment helpers (header + body) --- */
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  th.ssya-l,
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  td.ssya-l { text-align: left; }
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  th.ssya-c,
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  td.ssya-c { text-align: center; }
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  th.ssya-r,
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  td.ssya-r { text-align: right; }

/* --- caret + label cell --- */
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  td.ssya-labelcell {
    text-align: left;
    white-space: nowrap;
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-caret {
    display: inline-block;
    width: 16px;
    color: var(--ssy-dash-brand, #000061);
    font-size: var(--ssy-fs-md);
    text-align: center;
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-indent {
    display: inline-block;
    width: 20px;
}

/* --- section header row (Load / Discharge style) --- */
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-section td {
    padding: 7px 8px 3px 8px;
    background: var(--ssy-dash-surface, #fff);
    border-bottom: 1px solid var(--ssy-dash-border, #E1E8ED);
    text-align: left;
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-section-label {
    margin-left: 7px;
    color: var(--ssy-dash-brand, #000061);
    font-size: var(--ssy-fs-base);
    font-weight: 900;
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-section-meta {
    margin-left: 7px;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
}

/* --- region/group header row --- */
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-group { cursor: pointer; }

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-group td {
    background: var(--ssy-dash-row-active, #EAF1F5);
    border-top: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    border-bottom: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    font-weight: 800;
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-group:hover td,
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-group.ssya-open td {
    background: color-mix(in srgb, var(--ssy-dash-brand, #000061) 7%, var(--ssy-dash-row-active, #EAF1F5));
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-region-name {
    color: var(--ssy-dash-brand, #000061);
    font-size: var(--ssy-fs-base);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-region-meta {
    margin-left: 6px;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-small);
    font-weight: 700;
}

/* --- leaf rows --- */
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-row { cursor: pointer; }

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-row:hover td {
    background: color-mix(in srgb, var(--ssy-dash-brand, #000061) 4%, var(--ssy-dash-surface, #fff));
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-row.ssya-open td {
    background: color-mix(in srgb, var(--ssy-dash-brand, #000061) 3%, var(--ssy-dash-surface, #fff));
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-row.ssya-selected td {
    background: var(--ssy-dash-row-active, #EAF1F5);
    box-shadow: inset 3px 0 0 var(--ssy-dash-brand, #000061);
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-port-name {
    color: var(--ssy-dash-text, #1a1a1a);
    font-weight: 900;
    white-space: nowrap;
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-port-sub {
    display: block;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-small);
    font-weight: 700;
}

/* --- trailing expand affordance + inline detail row --- */
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  td.ssya-xcol {
    width: 24px;
    text-align: center;
    color: var(--ssy-dash-text-muted, #798E98);
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-detailrow td {
    padding: 0 5px 6px 32px;
    background: color-mix(in srgb, var(--ssy-dash-brand, #000061) 2%, var(--ssy-dash-surface, #fff));
    border-bottom: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
}

/* --- state rows: skeleton (first load) + error/empty panels --- */
/* Host wraps SsyDataTable so the in-place refresh overlay can fill the table. */
.ssya-host[b-yc3x8mukj8] { position: relative; }

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-skelrow td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
}

/* Error/empty rows hand spacing to SsyErrorPanel / SsyEmptyState. */
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-msgrow td {
    padding: 0;
}

/* --- inline label tags (region role, status counts) --- */
.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-tag-alert {
    background: var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red, #DB303A));
    color: #fff;
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-tag-caution {
    background: var(--ssy-dash-caution, var(--ssy-colour-main-crystal-blue, #009DC9));
    color: #fff;
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-tag-calm {
    background: var(--ssy-dash-row-active, #EAF1F5);
    color: var(--ssy-dash-up, var(--ssy-colour-palette-teal-green, #01A39E));
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-tag-load {
    background: var(--ssy-dash-row-active, #EAF1F5);
    color: var(--ssy-dash-brand, #000061);
}

.ssya-table.ssy-dash-table[b-yc3x8mukj8]  .ssya-tag-discharge {
    background: #fff6f2;
    color: var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red, #DB303A));
}
/* /Components/Common/DashboardComponents_HA/SsyBandBar.razor.rz.scp.css */
.ssy-bandbar[b-qq5klj5gyq] {
    width: 100%;
    min-width: 0;
}

.ssy-bandtrack[b-qq5klj5gyq] {
    position: relative;
    height: 12px;
    background: #F1F5F8;
    border: 1px solid var(--ssy-dash-border, #E1E8ED);
    border-radius: 2px;
}

.ssy-bandrange[b-qq5klj5gyq] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #9FB7C4;
    opacity: 0.32;
}

.ssy-bandmark[b-qq5klj5gyq] {
    position: absolute;
}

/* dashed vertical line — e.g. the 60d mean */
.ssy-bandmark-baseline[b-qq5klj5gyq] {
    top: -1px;
    bottom: -1px;
    border-left: 1px dashed var(--ssy-dash-text-muted, #798E98);
}

/* filled "now" dot, coloured by trend */
.ssy-bandmark-primary[b-qq5klj5gyq] {
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ssy-dash-brand, #000061);
    border: 1.5px solid var(--ssy-dash-surface, #fff);
    box-shadow: 0 0 0 1px var(--ssy-dash-brand, #000061);
    transform: translate(-50%, -50%);
}

.ssy-bandmark-primary.ssy-hot[b-qq5klj5gyq] {
    background: var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red, #DB303A));
    box-shadow: 0 0 0 1px var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red, #DB303A));
}

.ssy-bandmark-primary.ssy-cool[b-qq5klj5gyq] {
    background: var(--ssy-dash-up, var(--ssy-colour-palette-teal-green, #01A39E));
    box-shadow: 0 0 0 1px var(--ssy-dash-up, var(--ssy-colour-palette-teal-green, #01A39E));
}

/* hollow dot — e.g. 48h average */
.ssy-bandmark-secondary[b-qq5klj5gyq] {
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ssy-dash-surface, #fff);
    border: 1.5px solid var(--ssy-dash-text-dim, #536A75);
    transform: translate(-50%, -50%);
}

/* small dot — e.g. week average */
.ssy-bandmark-tertiary[b-qq5klj5gyq] {
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ssy-dash-text-muted, #798E98);
    transform: translate(-50%, -50%);
}
/* /Components/Common/DashboardComponents_HA/SsyCard.razor.rz.scp.css */
/* ============================================================
   SsyCard - shared dashboard panel styles.

   Theme vars (set on the host dashboard wrapper):
     --ssy-dash-surface      panel/table background
     --ssy-dash-border       panel/header border
     --ssy-dash-border-soft  subtle control border
     --ssy-dash-text         main text colour
     --ssy-dash-text-muted   descriptive text colour
     --ssy-dash-brand        title / key label colour
     --ssy-dash-row-line     table row divider
     --ssy-dash-row-active   hover/selected row background
     --ssy-dash-up           positive/low-cost colour
     --ssy-dash-down         negative/high-cost colour

   Defaults match the dashboard chrome when no host theme is supplied.
   ============================================================ */

.ssy-card[b-vtg03l7wax] {
    background: var(--ssy-dash-surface, #fff);
    border: 1px solid var(--ssy-dash-border, #E1E8ED);
    border-radius: 4px;
    padding:
        var(--ssy-card-pad-top, 5px)
        var(--ssy-card-pad-x, 6px)
        var(--ssy-card-pad-bottom, 6px);
    min-width: 0;
}

/* Clickable variant (OnClick set) — same panel look, just a button affordance. */
.ssy-card-clickable[b-vtg03l7wax] {
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.ssy-card-clickable:hover[b-vtg03l7wax] {
    border-color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
    background: var(--ssy-dash-row-active, #EAF1F5);
}

.ssy-card-head[b-vtg03l7wax] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 2px 0;
    gap: 10px;
}

.ssy-card-title[b-vtg03l7wax] {
    margin: 0;
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
}

.ssy-card-desc[b-vtg03l7wax] {
    margin-left: 6px;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-base);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
}

.ssy-card-period[b-vtg03l7wax] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    border-radius: 999px;
    background: var(--ssy-dash-row-active, #EAF1F5);
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;
    padding: 3px 6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.ssy-card-head-supplement[b-vtg03l7wax] {
    margin: -1px 0 2px;
}
/* /Components/Common/DashboardComponents_HA/SsyChart.razor.rz.scp.css */
/* ============================================================
   SsyChart — host box. Fills the height the card slot gives it and anchors the
   in-place refresh overlay (SsyStateOverlay is position:absolute).
   ============================================================ */

.ssy-chart-host[b-f13j2a1ibn] {
    position: relative;
    height: 100%;
    width: 100%;
}
/* /Components/Common/DashboardComponents_HA/SsyChartCard.razor.rz.scp.css */
/* ============================================================
   SsyChartCard — shared expand affordance. One source of truth for the
   chart-card expand icon across every dashboard (LPG, Dry Bulk, future).
   Previously each page restyled `{prefix}-chart-expand` via ::deep, so the
   icon drifted between tabs; this keeps it identical everywhere.
   ============================================================ */

/* Every slot defaults to its authored design height, so an unconstrained
   context behaves like a fixed card - without a definite height Highcharts
   measures ~0 on the first SignalR paint and falls back to its own 400px
   default, and page-scroll layouts balloon.

   The floor is a VAR, not an inline min-height. That is deliberate: the fit
   grammar sets --ssy-chart-slot-min-h to 0 in height-constrained bands, so a
   chart in a band shorter than its authored height shrinks instead of
   overflowing its card. Pages can set the var too; nothing needs !important.

   aspect-ratio only resolves a dimension nothing else determines, and a definite
   `height` wins outright - so the component publishes EITHER --ssy-chart-slot-h
   OR --ssy-chart-slot-ar, never both. Passing AspectRatio drops the height var
   and lets width drive height; the authored Height stays the floor. In a locked
   band neither matters: the grammar flexes the slot and releases the floor.

   NO `contain` here. It used to carry `contain: layout paint` as a rendering hint.
   Both keywords were actively harmful:

   - `layout` makes this element the containing block for position:FIXED descendants.
     Every annotation and indicator popup Highcharts opens is a descendant, so a popup
     asking to be positioned against the viewport was silently positioned against this
     card instead - computed top:325px, actual y:610px, measured 2026-09-09 on the FFA
     TECH tab.
   - `paint` then clipped whatever landed outside the card, so the half of the popup
     that overflowed simply was not drawn.

   Together they made a small style form open cut in half and off its anchor, with no
   way for the JS that positions it to know. The perf these bought is a hint on a couple
   of dozen cards; the bug they caused was in the user's face on every drawing. Removed
   2026-09-09. Do not reinstate either keyword to "isolate" the card - if a slot ever
   needs to bound its own reflow, use `content-visibility` or a size-only technique that
   does not create a containing block. (`contain: size` was already ruled out for a
   different reason: it would freeze the box at 0 and the ResizeObserver in
   HighchartBase.razor.js would never see real geometry.) */
.ssy-chart-card-slot[b-ohc15nfvxr] {
    position: relative;
    min-width: 0;
    width: 100%;
    aspect-ratio: var(--ssy-chart-slot-ar, auto);
    height: var(--ssy-chart-slot-h, auto);
    min-height: var(--ssy-chart-slot-min-h, 0px);
}

.ssy-chart-card-overlay[b-ohc15nfvxr] {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.ssy-chart-expand[b-ohc15nfvxr] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: 11px;
    opacity: 0.42;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.ssy-chart-expand:focus-visible[b-ohc15nfvxr] {
    opacity: 1;
}

@media (pointer: coarse) {
    .ssy-chart-expand[b-ohc15nfvxr] {
        width: 20px !important;
        height: 20px !important;
    }
}

.ssy-chart-expand:hover[b-ohc15nfvxr] {
    opacity: 1;
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
}

/* Phone: cap a tall authored height so one chart does not own the whole
   screen. No !important any more - the floor is a var, so this is an ordinary
   cascade win rather than the component fighting its own inline style. */
@media (max-width: 767px) {
    .ssy-chart-card-slot[b-ohc15nfvxr] {
        min-width: 0;
        --ssy-chart-slot-min-h: min(var(--ssy-chart-slot-h, 220px), 260px);
        height: min(var(--ssy-chart-slot-h, 220px), 260px);
        contain: layout;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyChartExpandModal.razor.rz.scp.css */
/* ============================================================
   SsyChartExpandModal — shared chart-expand overlay. Neutral chrome that
   reads from the host dashboard's --ssy-dash-* vars (with brand fallbacks).
   ============================================================ */

.ssy-chart-expand-overlay[b-wxr7bw7uxs] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 3vw;
    background: rgba(20, 32, 46, 0.4);
}

.ssy-chart-expand-card[b-wxr7bw7uxs] {
    width: 92vw;
    height: 84vh;
    display: flex;
    flex-direction: column;
    background: var(--ssy-dash-surface, #fff);
    border: 1px solid var(--ssy-dash-border, #E1E8ED);
    border-radius: 6px;
    box-shadow: 0 12px 48px rgba(0, 32, 91, 0.26);
    padding: 10px 14px 14px;
}

.ssy-chart-expand-head[b-wxr7bw7uxs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex: 0 0 auto;
}

.ssy-chart-expand-actions[b-wxr7bw7uxs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ssy-chart-expand-dl[b-wxr7bw7uxs] {
    font-family: inherit;
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #00205B));
    background: transparent;
    border: 1px solid var(--ssy-dash-border, #CEDCE4);
    border-radius: 4px;
    padding: 3px 9px;
    cursor: pointer;
}

.ssy-chart-expand-dl:hover[b-wxr7bw7uxs] {
    color: #fff;
    background: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #00205B));
    border-color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #00205B));
}

.ssy-chart-expand-close[b-wxr7bw7uxs] {
    border: 0;
    background: transparent;
    font-size: var(--ssy-fs-display-xl);
    line-height: 1;
    color: var(--ssy-dash-text-muted, #798E98);
    cursor: pointer;
    padding: 0 2px;
}

.ssy-chart-expand-head h3[b-wxr7bw7uxs] {
    margin: 0;
    font-size: var(--ssy-fs-lg);
    font-weight: 800;
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
}

.ssy-chart-expand-chart[b-wxr7bw7uxs] {
    flex: 1 1 auto;
    min-height: 0;
}
/* /Components/Common/DashboardComponents_HA/SsyChoiceRail.razor.rz.scp.css */
.ssy-choice-rail[b-dqwtosz6uw] {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ssy-choice-rail__item[b-dqwtosz6uw] {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 3px 9px;
    border: 1px solid var(--ssy-dash-border, #d7e1e7);
    background: var(--ssy-dash-surface, #fff);
    color: var(--ssy-dash-text-muted, #617984);
    font: inherit;
    font-size: var(--ssy-fs-small, .72rem);
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.is-compact .ssy-choice-rail__item[b-dqwtosz6uw] {
    min-height: 24px;
    padding: 2px 7px;
    font-size: var(--ssy-fs-micro, .64rem);
}

.ssy-choice-rail__item.is-active[b-dqwtosz6uw] {
    border-color: var(--ssy-dash-brand, #000061);
    background: var(--ssy-dash-brand, #000061);
    color: #fff;
}

.ssy-choice-rail__item:focus-visible[b-dqwtosz6uw] {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--ssy-dash-focus, #1688c9);
    outline-offset: -2px;
}

@media (pointer: coarse) {
    .ssy-choice-rail__item[b-dqwtosz6uw],
    .is-compact .ssy-choice-rail__item[b-dqwtosz6uw] {
        min-height: 44px;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyCommandBar.razor.rz.scp.css */
/* ============================================================
   SsyCommandBar - the terminal command-bar look, one source of truth
   (previously duplicated class-for-class in the FFA and Transits tab CSS).
   Fragment content is styled via ::deep from the bar's own root, so consumer
   markup carries only the stable ssy-cmdbar-* classes. Colours theme from the
   dashboard wrapper's --ssy-dash-* vars.
   ============================================================ */

.ssy-cmdbar[b-2ek6hsoety] {
    position: sticky;
    top: 0;
    z-index: 6;
    /* 26px, not 32px. This is the single sub-navigation component for both
       dashboards, so its height is paid on nearly every tab. Its controls are
       22px, so 26px keeps 2px of breathing room above and below without the bar
       driving anything. */
    min-height: 26px;
    flex: 0 0 auto;
    /* Without this the bar sizes to its content as a flex/grid item, so the 1fr
       sections column never sees a constrained width and cannot shrink - the rails
       then overflow and get clipped by the overflow:hidden below. */
    min-width: 0;
    display: grid;
    /* Rails size to their content but may shrink; the sections strip takes what
       is left and scrolls. An `auto` centre column sized to the full strip, which
       starved both rails to 0 on every tab with views - their buttons then painted
       over the sections because the rail is only 24px tall, not clipped to width. */
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    overflow: hidden;
    background: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
    color: var(--ssy-dash-surface, #fff);
    border-bottom: 2px solid var(--ssy-dash-accent, var(--ssy-dash-caution, #ffb81c));
    box-shadow: 0 1px 3px rgba(0, 32, 91, .22);
}

.ssy-cmdbar.has-left[b-2ek6hsoety] { grid-template-columns: auto minmax(0, 1fr); }
.ssy-cmdbar.has-right[b-2ek6hsoety] { grid-template-columns: minmax(0, 1fr) auto; }
.ssy-cmdbar.has-left.has-right[b-2ek6hsoety] { grid-template-columns: auto minmax(0, 1fr) auto; }

.ssy-cmdbar-left[b-2ek6hsoety] {
    display: flex;
    align-items: stretch;
    /* max-content, not 0. `min-width: 0` (plus overflow:hidden) zeroed this rail's
       contribution to its auto grid track, so the track resolved to 0px and the
       view buttons painted over the sections strip instead of reserving space. */
    min-width: max-content;
    /* Keep in step with .ssy-cmdbar-section's min-height - left, center and the
       sections all contribute to the bar's rendered height. */
    height: 24px;
}

.ssy-cmdbar-center[b-2ek6hsoety] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    /* Grid items floor at min-content by default. The sections are nowrap, so
       without this the middle track could never shrink below the full strip and
       pushed the right rail out of the bar. */
    min-width: 0;
    height: 24px;
}

.ssy-cmdbar-sections[b-2ek6hsoety] {
    display: flex;
    align-self: stretch;
    min-width: 0;
    /* Sections are nowrap and flex:0 0 auto, so a tab with many of them overflows
       its column. Scroll the strip rather than let it push the rails out. */
    overflow-x: auto;
    scrollbar-width: none;
}

.ssy-cmdbar-sections[b-2ek6hsoety]::-webkit-scrollbar { display: none; }

/* 24px, not 30px. The section tabs - not the bar's own min-height - are what set
   the bar's rendered height, so this is the number that matters. 24px + the bar's
   2px of internal rhythm lands the bar at 26px. */
.ssy-cmdbar-section[b-2ek6hsoety] {
    position: relative;
    flex: 0 0 auto;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .62);
    font: inherit;
    font-size: var(--ssy-fs-small, .72rem);
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.ssy-cmdbar-section:hover[b-2ek6hsoety],
.ssy-cmdbar-section:focus-visible[b-2ek6hsoety] {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    outline: none;
}

.ssy-cmdbar-section.is-active[b-2ek6hsoety] {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 -2px 0 var(--ssy-dash-accent, var(--ssy-dash-caution, #ffb81c));
}

.ssy-cmdbar-section:disabled[b-2ek6hsoety] {
    opacity: .45;
    cursor: not-allowed;
}

.ssy-cmdbar-section small[b-2ek6hsoety] {
    font-size: .55rem;
    font-weight: 650;
}

.ssy-cmdbar-right[b-2ek6hsoety] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
}

/* ---- ticker slots (left rail) ---- */

.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-slot { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 0; background: transparent; color: rgba(255, 255, 255, .82); font: inherit; font-size: var(--ssy-fs-micro); cursor: pointer; white-space: nowrap; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-slot strong { font-weight: 750; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-slot:hover, .ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-slot:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; outline: none; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-slot.ssy-cmdbar-on { color: #fff; background: rgba(255, 255, 255, .08); }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-slot.ssy-cmdbar-on::after { content: ""; position: absolute; right: 4px; bottom: 0; left: 4px; height: 2px; background: var(--ssy-dash-accent, var(--ssy-dash-caution, #ffb81c)); }

.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-note { align-self: center; padding-left: 7px; border-left: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .68); font-size: var(--ssy-fs-micro); white-space: nowrap; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-note strong { color: #fff; }

/* ---- right-rail pieces ---- */

.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls { display: inline-flex; align-items: center; align-self: center; gap: 1px; min-width: 0; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls button { height: 20px; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: rgba(255, 255, 255, .68); font: inherit; font-size: var(--ssy-fs-micro); cursor: pointer; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls button.on { background: rgba(255, 255, 255, .16); color: #fff; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls button:disabled { opacity: .38; cursor: not-allowed; }

/* A SELECT inside a controls group matches its buttons exactly. Some filters have too many
   options to spend a button each on - seven vessel classes took most of the bar's width - and
   a select collapses them to one control. Same height, border and type as the buttons, so it
   reads as part of the group rather than a browser default dropped into the strip. */
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls select { height: 20px; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: rgba(255, 255, 255, .68); font: inherit; font-size: var(--ssy-fs-micro); cursor: pointer; padding: 0 2px; outline: none; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls select:hover { color: #fff; border-color: rgba(255, 255, 255, .38); }
/* A select that HOLDS the group's selection reads like a pressed button, so an overflow
   dropdown beside buttons does not look inert while it carries the active choice. */
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls select.on { background: rgba(255, 255, 255, .16); color: #fff; }
/* The popup list is drawn by the OS against a light surface, so its options need dark text -
   inheriting the strip's white would render them invisible. */
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls select option { color: var(--ssy-dash-text, #333); background: var(--ssy-dash-surface, #fff); }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls select:disabled { opacity: .38; cursor: not-allowed; }

.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-guide { align-self: center; width: 20px; height: 20px; border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: #fff; cursor: pointer; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-guide.pulse { animation: ssy-cmdbar-pulse-b-2ek6hsoety 1.4s ease-in-out 3; }

@keyframes ssy-cmdbar-pulse-b-2ek6hsoety {
    50% { background: var(--ssy-dash-accent, var(--ssy-dash-caution, #ffb81c)); box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
}

/* Contract picker. Same chrome as the date control beside it, because they are the same kind of
   thing - both say WHICH slice of the market the whole tab is showing. Wider, because it carries
   a real contract name plus its cleared lots ("Oct 26 - 5.8kL") rather than a date. */
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-contract { display: inline-flex; align-items: center; align-self: center; height: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .28); border-radius: 3px; background: rgba(255, 255, 255, .08); }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-contract select { width: 132px; height: 20px; padding: 0 3px; border: 0; outline: none; background: transparent; color: #fff; font: inherit; font-size: var(--ssy-fs-micro); font-weight: 700; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-contract select option { color: var(--ssy-dash-text, #333); background: var(--ssy-dash-surface, #fff); font-weight: 600; }
/* Group headings carry the Months / Quarters / Calendars split, so they must not read as options. */
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-contract select optgroup { color: var(--ssy-dash-text-muted, #798E98); background: var(--ssy-dash-surface, #fff); font-size: var(--ssy-fs-micro); font-weight: 750; text-transform: uppercase; letter-spacing: .3px; }

.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-date { display: inline-flex; align-items: center; align-self: center; height: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .28); border-radius: 3px; background: rgba(255, 255, 255, .08); }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-date button, .ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-date select { height: 20px; border: 0; background: transparent; color: #fff; font: inherit; font-size: var(--ssy-fs-micro); font-weight: 700; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-date button { width: 20px; padding: 0; cursor: pointer; font-size: 15px; line-height: 18px; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-date select { width: 126px; padding: 0 3px; outline: none; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-date select option { color: var(--ssy-dash-text, #333); background: var(--ssy-dash-surface, #fff); }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-date button:disabled, .ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-date select:disabled { opacity: .38; cursor: not-allowed; }

.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-readout { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; padding-right: 4px; white-space: nowrap; }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-readout strong { color: #fff; font-size: var(--ssy-fs-small); }
.ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-readout span { color: rgba(255, 255, 255, .62); font-size: var(--ssy-fs-micro); letter-spacing: .25px; }

/* ---- SsySubTabs on the dark strip ----
   Doubled .ssy-cmdbar so these out-rank SsySubTabs' own scoped rules
   regardless of bundle order (its sub-pill hover rule ties otherwise). */

.ssy-cmdbar.ssy-cmdbar[b-2ek6hsoety]  .ssy-subtabs { align-self: stretch; gap: 0; padding: 0 3px; background: transparent; border: 0; }
.ssy-cmdbar.ssy-cmdbar[b-2ek6hsoety]  .ssy-subtabs .ssy-subtab { position: relative; min-height: 24px; display: inline-flex; align-items: center; padding: 2px 8px 0; border: 0; border-radius: 0; background: transparent; color: rgba(255, 255, 255, .62); line-height: 1; }
.ssy-cmdbar.ssy-cmdbar[b-2ek6hsoety]  .ssy-subtabs .ssy-subtab:hover, .ssy-cmdbar.ssy-cmdbar[b-2ek6hsoety]  .ssy-subtabs .ssy-subtab:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); outline: none; }
.ssy-cmdbar.ssy-cmdbar[b-2ek6hsoety]  .ssy-subtabs .ssy-subtab-active { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 -2px 0 var(--ssy-dash-accent, var(--ssy-dash-caution, #ffb81c)); }

/* Medium: preserve the terminal rail and let it scroll instead of inventing
   a tall second toolbar. */
@media (min-width: 768px) and (max-width: 1100px) {
    .ssy-cmdbar.has-left.has-right[b-2ek6hsoety] {
        grid-template-columns: auto auto minmax(360px, 1fr);
        overflow-x: auto;
        overflow-y: hidden;
        position: sticky;
        scrollbar-width: thin;
    }


    .ssy-cmdbar.has-left[b-2ek6hsoety] { grid-template-columns: auto minmax(360px, 1fr); }
    .ssy-cmdbar.has-right[b-2ek6hsoety] { grid-template-columns: minmax(360px, 1fr) auto; }

    .ssy-cmdbar-left[b-2ek6hsoety],
    .ssy-cmdbar-center[b-2ek6hsoety],
    .ssy-cmdbar-right[b-2ek6hsoety] {
        overflow: visible;
    }
}

/* Mobile: three compact, independently scrollable rails. */
@media (max-width: 767px) {
    .ssy-cmdbar[b-2ek6hsoety] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        padding: 0;
        overflow: visible;
        position: static;
    }

    .ssy-cmdbar-left[b-2ek6hsoety],
    .ssy-cmdbar-center[b-2ek6hsoety],
    .ssy-cmdbar-right[b-2ek6hsoety] {
        flex: 0 0 30px;
        width: 100%;
        height: 30px;
        min-height: 30px;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .ssy-cmdbar-left[b-2ek6hsoety]::-webkit-scrollbar,
    .ssy-cmdbar-center[b-2ek6hsoety]::-webkit-scrollbar,
    .ssy-cmdbar-right[b-2ek6hsoety]::-webkit-scrollbar {
        display: none;
    }

    .ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls,
    .ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-note,
    .ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-readout {
        flex: 0 0 auto;
    }

    .ssy-cmdbar-sections[b-2ek6hsoety] {
        overflow: visible;
    }

    .ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls button,
    .ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-controls select {
        white-space: nowrap;
    }

    .ssy-cmdbar[b-2ek6hsoety]  .ssy-cmdbar-readout {
        margin-left: auto;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyCycloneMap.razor.rz.scp.css */
.ssy-cyclone-map-shell[b-1p3xj6lzkg] { position: relative; display: grid; min-width: 0; border: 1px solid var(--ssy-dash-card-border,#d9dee8); background: #e9eef3; overflow: hidden; }
.ssy-cyclone-map[b-1p3xj6lzkg] { width: 100%; height: clamp(540px, calc(100vh - 205px), 790px); }
.ssy-cyclone-impact[b-1p3xj6lzkg]{display:flex;align-items:center;gap:10px;min-height:30px;padding:4px 8px;background:#fff;border-bottom:1px solid #d9dee8;color:#536a75;font-size:10px;white-space:nowrap;overflow:auto}.ssy-cyclone-impact strong[b-1p3xj6lzkg]{color:#000061;font-size:12px}.ssy-cyclone-impact .ports[b-1p3xj6lzkg]{flex:1;color:#26344c}.ssy-cyclone-impact a[b-1p3xj6lzkg]{color:#000061;font-weight:800;text-decoration:none}
/* Positioning only. The shared state components (SsySkeleton, SsyErrorPanel, SsyEmptyState)
   own their own appearance, so no colours, borders or spinner live here any more. */
.ssy-cyclone-state[b-1p3xj6lzkg] { position:absolute; inset:0 0 25px; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:#eef3f7d9; color:#000061; backdrop-filter:blur(1px); }
.ssy-cyclone-state small[b-1p3xj6lzkg] { color:#536a75; }
.ssy-cyclone-state.empty[b-1p3xj6lzkg] { inset:auto 50% 48px auto; transform:translateX(50%); width:max-content; height:auto; background:none; backdrop-filter:none; }
.ssy-cyclone-map-shell footer[b-1p3xj6lzkg] { display: flex; align-items: center; gap: 14px; min-height: 25px; padding: 3px 8px; background: #fff; color: #536a75; font-size: 10px; }
.ssy-cyclone-map-shell footer span[b-1p3xj6lzkg] { display: inline-flex; align-items: center; gap: 4px; }
.ssy-cyclone-map-shell footer .source[b-1p3xj6lzkg] { margin-left: auto; }
.ssy-cyclone-map-shell footer .sources[b-1p3xj6lzkg]{display:flex;gap:8px;margin-left:auto}.ssy-cyclone-map-shell footer .sources a[b-1p3xj6lzkg]{color:#000061;font-weight:750;text-decoration:none}.ssy-cyclone-map-shell footer .sources a:hover[b-1p3xj6lzkg]{text-decoration:underline}
.ssy-cyclone-map-shell footer i[b-1p3xj6lzkg] { display: inline-block; width: 18px; height: 0; border-top: 2px solid #000061; }
.ssy-cyclone-map-shell footer i.forecast[b-1p3xj6lzkg] { border-top: 2px dashed #e75113; }
.ssy-cyclone-map-shell footer i.wind34[b-1p3xj6lzkg],.ssy-cyclone-map-shell footer i.wind50[b-1p3xj6lzkg] { width:10px; height:10px; border:1px solid #e75113; border-radius:50%; background:#e7511320; }
.ssy-cyclone-map-shell footer i.wind50[b-1p3xj6lzkg] { border-color:#db303a; background:#db303a30; }
.ssy-cyclone-map-shell footer i.port[b-1p3xj6lzkg] { width: 7px; height: 7px; border: 1px solid #fff; border-radius: 50%; background: #0087cb; }
.ssy-cyclone-map-shell footer .status[b-1p3xj6lzkg] { margin-left:auto; padding:1px 6px; border-radius:2px; font-weight:800; text-transform:uppercase; }
.ssy-cyclone-map-shell footer .status.refreshing[b-1p3xj6lzkg] { color:#006ba6; background:#e7f5fc; }
.ssy-cyclone-map-shell footer .status.stale[b-1p3xj6lzkg] { color:#9a4b00; background:#fff1d6; }
.ssy-cyclone-popup[b-1p3xj6lzkg] { position: absolute; z-index: 5; display: grid; gap: 3px; min-width: 190px; max-width: 280px; padding: 9px 11px; border: 1px solid #aeb9c5; border-radius: 3px; background: #fff; box-shadow: 0 3px 14px #00143a33; color: #26344c; font-size: 11px; }
.ssy-cyclone-popup[hidden][b-1p3xj6lzkg] { display: none; }
.ssy-cyclone-popup button[b-1p3xj6lzkg] { position: absolute; top: 2px; right: 4px; border: 0; background: transparent; color: #61708a; cursor: pointer; font-size: 16px; }
.ssy-cyclone-popup strong[b-1p3xj6lzkg] { color: #000061; font-size: 13px; padding-right: 16px; }
.ssy-cyclone-popup a[b-1p3xj6lzkg] { color: #000061; font-weight: 750; }
@media(max-width:900px){.ssy-cyclone-map-shell footer[b-1p3xj6lzkg]{overflow-x:auto}.ssy-cyclone-map-shell footer .sources[b-1p3xj6lzkg]{margin-left:0}.ssy-cyclone-map-shell footer .source[b-1p3xj6lzkg]{display:none}}
@media(max-width:680px){.ssy-cyclone-map[b-1p3xj6lzkg]{height:calc(100vh - 190px);min-height:480px}.ssy-cyclone-map-shell footer[b-1p3xj6lzkg]{gap:6px 12px}.ssy-cyclone-map-shell footer .sources[b-1p3xj6lzkg]{display:none}}
/* /Components/Common/DashboardComponents_HA/SsyDashboardPanel.razor.rz.scp.css */
.ssy-dashboard-panel[b-jfesssjo00] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    /* No `overflow: hidden` here. The panel clips and scrolls internally only
       where the shell is pinning, and the fit grammar owns that condition (see
       the <style> block in SsyDashboardShell.razor). This used to clip
       unconditionally with a hand-written `(max-width: 767px), (max-height: 768px)`
       reset - a complement of the lock that had drifted to the wrong width, so
       between 768px and 1439px the panel clipped with no scrollbar. */
    border: 1px solid var(--ssy-dash-border, #e1e8ed);
    border-radius: var(--ssy-dashboard-panel-radius, 4px);
    background: var(--ssy-dash-surface, #fff);
}

.ssy-dashboard-panel__header[b-jfesssjo00] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 5px 8px;
    gap: 8px;
    border-bottom: 1px solid var(--ssy-dash-divider, #dce5eb);
}

.ssy-dashboard-panel__header h2[b-jfesssjo00],
.ssy-dashboard-panel__header p[b-jfesssjo00] {
    margin: 0;
}

.ssy-dashboard-panel__freshness[b-jfesssjo00] {
    display: inline-flex;
    gap: 5px;
    color: var(--ssy-dash-text-muted, #798e98);
    font-size: var(--ssy-fs-micro, .62rem);
}

.ssy-dashboard-panel__freshness strong[b-jfesssjo00] {
    color: var(--ssy-dash-warn, #a96900);
    font-size: .56rem;
}

.ssy-dashboard-panel__header h2[b-jfesssjo00] {
    color: var(--ssy-dash-text, #1a1a1a);
    font-size: var(--ssy-fs-small, .75rem);
    font-weight: 850;
}

.ssy-dashboard-panel__header p[b-jfesssjo00] {
    color: var(--ssy-dash-text-muted, #798e98);
    font-size: var(--ssy-fs-micro, .64rem);
}

.ssy-dashboard-panel__body[b-jfesssjo00] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.is-compact .ssy-dashboard-panel__body[b-jfesssjo00] { padding: 4px; }
.scroll-y .ssy-dashboard-panel__body[b-jfesssjo00] { overflow-y: auto; scrollbar-gutter: stable; }
.scroll-x .ssy-dashboard-panel__body[b-jfesssjo00] { overflow-x: auto; }
.is-stale[b-jfesssjo00] { border-color: var(--ssy-dash-warn, #c88400); }
.is-partial[b-jfesssjo00] { border-left: 3px solid var(--ssy-dash-warn, #c88400); }
/* /Components/Common/DashboardComponents_HA/SsyDashboardShell.razor.rz.scp.css */
.ssy-dashboard-shell[b-m412cr6cy8] {
    /* Row gap between the header and the tab content. Was clamp(4px,.45vw,8px),
       which resolved to the full 8px on a 1920 monitor purely as dead space under
       the tab rail. 2-4px still separates the bands visually and gives every tab
       in both dashboards back ~6px of usable height. */
    --ssy-dashboard-gap: clamp(2px, .2vw, 4px);
    --ssy-dashboard-panel-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    gap: var(--ssy-dashboard-gap);
    padding: 0 max(4px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    container: ssy-dashboard / inline-size;
}

.ssy-dashboard-shell__header[b-m412cr6cy8] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    min-width: 0;
    min-height: 38px;
    gap: 8px;
    border-bottom: 1px solid var(--ssy-dash-divider, #dce5eb);
}

.ssy-dashboard-shell__identity[b-m412cr6cy8] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}

.ssy-dashboard-shell__eyebrow[b-m412cr6cy8] {
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--ssy-dash-brand, #000061);
    color: #fff;
    font-size: var(--ssy-fs-micro, .66rem);
    font-weight: 900;
    letter-spacing: .06em;
}

.ssy-dashboard-shell__title[b-m412cr6cy8] {
    margin: 0;
    color: var(--ssy-dash-text, #1a1a1a);
    font-size: var(--ssy-fs-small, .78rem);
    font-weight: 800;
}

.ssy-dashboard-shell__tabs[b-m412cr6cy8] {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
}

.ssy-dashboard-shell__tab[b-m412cr6cy8] {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 3px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ssy-dash-text-muted, #667d88);
    font: inherit;
    font-size: var(--ssy-fs-small, .72rem);
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
}

.ssy-dashboard-shell__tab:hover[b-m412cr6cy8] {
    color: var(--ssy-dash-brand, #000061);
    background: color-mix(in srgb, var(--ssy-dash-brand, #000061) 5%, transparent);
}

.ssy-dashboard-shell__tab.is-active[b-m412cr6cy8] {
    border-bottom-color: var(--ssy-dash-brand, #000061);
    color: var(--ssy-dash-brand, #000061);
}

.ssy-dashboard-shell__tab:focus-visible[b-m412cr6cy8],
.ssy-dashboard-shell__mobile-tab select:focus-visible[b-m412cr6cy8] {
    outline: 2px solid var(--ssy-dash-focus, #1688c9);
    outline-offset: -2px;
}

.ssy-dashboard-shell__tab-status[b-m412cr6cy8] {
    margin-left: 4px;
    color: var(--ssy-dash-text-muted, #798e98);
    font-size: .58rem;
}

.ssy-dashboard-shell__actions[b-m412cr6cy8],
.ssy-dashboard-shell__selector[b-m412cr6cy8],
.ssy-dashboard-shell__scope[b-m412cr6cy8],
.ssy-dashboard-shell__status[b-m412cr6cy8] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
}

.ssy-dashboard-shell__toolbar[b-m412cr6cy8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 8px;
}

.ssy-dashboard-shell__status[b-m412cr6cy8] {
    color: var(--ssy-dash-text-muted, #798e98);
    font-size: var(--ssy-fs-micro, .65rem);
    white-space: nowrap;
}

.ssy-dashboard-shell__content[b-m412cr6cy8] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.ssy-dashboard-shell__mobile-tab[b-m412cr6cy8] {
    display: none;
}

/* The viewport lock for .is-adaptive (height + overflow: clip) is NOT here.
   It lives in the <style> block at the top of SsyDashboardShell.razor,
   together with the flex/scroll half of the grammar it depends on. Splitting
   the two across a scoped file and a global file is what broke live: only the
   scoped half shipped, so tabs clipped their content with no scrollbar. Keep
   them in one place. */

@container ssy-dashboard (max-width: 760px) {
    .ssy-dashboard-shell__header[b-m412cr6cy8] {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-block: 3px;
    }

    .ssy-dashboard-shell__tabs[b-m412cr6cy8] {
        display: none;
    }

    .ssy-dashboard-shell__mobile-tab[b-m412cr6cy8] {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ssy-dashboard-shell__mobile-tab select[b-m412cr6cy8] {
        width: 100%;
        min-height: 44px;
        padding-inline: 10px;
        border: 1px solid var(--ssy-dash-border, #dce5eb);
        border-radius: 4px;
        background: var(--ssy-dash-surface, #fff);
        color: var(--ssy-dash-text, #1a1a1a);
        font: inherit;
        font-weight: 750;
    }

    .ssy-dashboard-shell__selector[b-m412cr6cy8] {
        grid-column: 1 / -1;
        grid-row: 3;
        min-width: 0;
        overflow-x: auto;
    }

    .ssy-dashboard-shell__status[b-m412cr6cy8] {
        grid-column: 1 / -1;
        white-space: normal;
    }
}

/* `height` and `overflow` for the shell are owned solely by the <style> block in
   SsyDashboardShell.razor - they used to be restated here as an un-lock, which
   is a second copy of a boundary the grammar says lives in one place. The
   grammar now leaves both unset unless it is pinning, so there is nothing to
   undo. Only the genuine small-screen chrome remains below. */
/* Genuine phone chrome only. The `(max-height: 768px)` term this used to carry
   was a leftover from when this block also un-locked the shell's height and
   overflow; a stacked toolbar has nothing to do with how tall the screen is. */
@media (max-width: 767px) {
    .ssy-dashboard-shell__toolbar[b-m412cr6cy8] {
        align-items: stretch;
        flex-direction: column;
    }

    .ssy-dashboard-shell__status[b-m412cr6cy8] {
        white-space: normal;
    }
}

@media (forced-colors: active) {
    .ssy-dashboard-shell__tab.is-active[b-m412cr6cy8] {
        border-bottom-color: Highlight;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyDataTable.razor.rz.scp.css */
/* ============================================================
   SsyDataTable - shared dashboard table styles.

   Theme vars are the same --ssy-dash-* vars used by SsyCard.
   ============================================================ */

.ssy-dash-tablewrap[b-9zlpxnbmjb] {
    /* Position context so the in-place refresh overlay (SsyStateOverlay) fills
       the wrap. Mirrors .ssya-host on SsyAccordionTable. */
    position: relative;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.ssy-dash-tablewrap:focus-visible[b-9zlpxnbmjb] {
    outline: 2px solid var(--ssy-dash-focus, #1688c9);
    outline-offset: -2px;
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  table.ssy-dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ssy-fs-small);
    font-variant-numeric: tabular-nums;
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  table.ssy-dash-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 3px;
    border-bottom: 1px solid var(--ssy-dash-border, #E1E8ED);
    background: var(--ssy-dash-surface, #fff);
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-micro);
    font-weight: 950;
    letter-spacing: 0.42px;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  table.ssy-dash-table td {
    height: 18px;
    padding: 1px 3px;
    border-bottom: 1px solid var(--ssy-dash-row-line, #F2F5F8);
    color: var(--ssy-dash-text, #1a1a1a);
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  table.ssy-dash-table tbody tr:last-child td {
    border-bottom: 0;
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  table.ssy-dash-table tbody tr:hover td {
    background: var(--ssy-dash-row-active, #EAF1F5);
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  .col-key {
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061)) !important;
    font-weight: 950;
    text-align: left !important;
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  .num {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  .col-label {
    max-width: 22rem;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .ssy-dash-tablewrap[b-9zlpxnbmjb]  table.ssy-dash-table {
        min-width: max-content;
    }

    .ssy-dash-tablewrap[b-9zlpxnbmjb]  .priority-low {
        display: none;
    }

    .ssy-dash-tablewrap[b-9zlpxnbmjb]  .col-label {
        max-width: 13rem;
    }
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  .muted,
.ssy-dash-tablewrap[b-9zlpxnbmjb]  tr.muted td {
    color: var(--ssy-dash-text-muted, #798E98);
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  .empty {
    color: var(--ssy-dash-text-muted, #798E98);
    font-style: italic;
    text-align: center !important;
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  .heat-high {
    background: color-mix(in srgb, var(--ssy-dash-down, #EB3871) 12%, transparent);
    color: var(--ssy-dash-down, #EB3871);
}

.ssy-dash-tablewrap[b-9zlpxnbmjb]  .heat-low {
    background: color-mix(in srgb, var(--ssy-dash-up, #01A39E) 12%, transparent);
    color: var(--ssy-dash-up, #01A39E);
}
/* /Components/Common/DashboardComponents_HA/SsyDeltaNumber.razor.rz.scp.css */
.ssy-delta[b-6w1x7ayx61] {
    display: grid;
    gap: 0;
    justify-items: end;
    min-width: 42px;
    font-variant-numeric: tabular-nums;
}

.ssy-delta strong[b-6w1x7ayx61] {
    display: block;
    color: var(--ssy-dash-text, #1a1a1a);
    font-size: var(--ssy-fs-base);
    line-height: 1.05;
}

.ssy-delta span[b-6w1x7ayx61] {
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
    line-height: 1.05;
}

.ssy-delta-inline[b-6w1x7ayx61] {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
}

.ssy-delta-inline strong[b-6w1x7ayx61],
.ssy-delta-inline span[b-6w1x7ayx61] {
    display: inline;
    line-height: 1;
}

.ssy-delta .ssy-hot[b-6w1x7ayx61],
.ssy-delta strong.ssy-hot[b-6w1x7ayx61] {
    color: var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red, #DB303A));
}

.ssy-delta .ssy-cool[b-6w1x7ayx61],
.ssy-delta strong.ssy-cool[b-6w1x7ayx61] {
    color: var(--ssy-dash-up, var(--ssy-colour-palette-teal-green, #01A39E));
}

.ssy-delta-nodata[b-6w1x7ayx61] {
    color: var(--ssy-dash-text-muted, #798E98);
}
/* /Components/Common/DashboardComponents_HA/SsyDetailPanel.razor.rz.scp.css */
/* ::deep reaches the consumer-composed panel markup inside the grid. */

.ssy-detail-grid[b-otvdsl90h6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-panel {
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    background: var(--ssy-dash-surface, #fff);
    padding: 5px 7px 4px 7px;
}

.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-head,
.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-head strong {
    color: var(--ssy-dash-brand, #000061);
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    text-transform: uppercase;
}

.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-head span,
.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-foot span {
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
}

.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-foot strong {
    font-size: var(--ssy-fs-small);
    font-variant-numeric: tabular-nums;
}

.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-foot strong.ssy-hot {
    color: var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red, #DB303A));
}

.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-foot strong.ssy-cool {
    color: var(--ssy-dash-up, var(--ssy-colour-palette-teal-green, #01A39E));
}

.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-chart {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px;
    margin: 2px 0;
}

.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 62px;
    text-align: right;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-micro);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ssy-detail-grid[b-otvdsl90h6]  .ssy-detail-xaxis {
    display: flex;
    justify-content: space-between;
    margin-top: 1px;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-micro);
    font-weight: 800;
}

@media (max-width: 760px) {
    .ssy-detail-grid[b-otvdsl90h6] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyEmptyState.razor.rz.scp.css */
/* ============================================================
   SsyEmptyState — quiet, centred "no data" card. Muted, never alarming.
   ============================================================ */

.ssy-empty[b-cu3e17n66w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    text-align: center;
    color: var(--ssy-dash-text-muted, #798E98);
}

.ssy-empty-icon[b-cu3e17n66w] {
    font-size: var(--ssy-fs-display-xl);
    line-height: 1;
    opacity: 0.45;
}

.ssy-empty-msg[b-cu3e17n66w] {
    font-size: var(--ssy-fs-md);
    font-weight: 700;
}

.ssy-empty-hint[b-cu3e17n66w] {
    font-size: var(--ssy-fs-base);
    font-weight: 600;
    opacity: 0.8;
}
/* /Components/Common/DashboardComponents_HA/SsyErrorPanel.razor.rz.scp.css */
/* ============================================================
   SsyErrorPanel — failure card. Tinted with the host warn colour; the message
   stays monospace so a raw error reads as diagnostic, not body copy.
   ============================================================ */

.ssy-errp[b-zlckto3yec] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px;
    padding: 12px 14px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ssy-dash-warn, #DB303A) 6%, var(--ssy-dash-surface, #ffffff));
    border: 1px solid color-mix(in srgb, var(--ssy-dash-warn, #DB303A) 26%, transparent);
}

.ssy-errp-icon[b-zlckto3yec] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ssy-dash-warn, #DB303A);
    color: #fff;
    font-size: var(--ssy-fs-md);
    font-weight: 900;
    line-height: 1;
}

.ssy-errp-body[b-zlckto3yec] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ssy-errp-title[b-zlckto3yec] {
    font-size: var(--ssy-fs-md);
    font-weight: 900;
    color: var(--ssy-dash-warn, #DB303A);
}

.ssy-errp-msg[b-zlckto3yec] {
    font-size: var(--ssy-fs-base);
    color: var(--ssy-dash-text, #1a1a1a);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.ssy-errp-retry[b-zlckto3yec] {
    flex: 0 0 auto;
    align-self: center;
    border: 1px solid var(--ssy-dash-warn, #DB303A);
    background: transparent;
    color: var(--ssy-dash-warn, #DB303A);
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ssy-errp-retry:hover[b-zlckto3yec] {
    background: var(--ssy-dash-warn, #DB303A);
    color: #fff;
}
/* /Components/Common/DashboardComponents_HA/SsyExceptionLedger.razor.rz.scp.css */
.ssy-exception-ledger__content[b-redm5qmalh] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.ssy-exception-ledger__content[b-redm5qmalh]  .ssy-card {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.ssy-exception-ledger__detail[b-redm5qmalh] {
    min-width: 0;
    border-top: 1px solid var(--ssy-dash-divider, #dce5eb);
}

@media (min-width: 1024px) {
    .ssy-exception-ledger__detail[b-redm5qmalh] {
        position: sticky;
        bottom: 0;
        background: var(--ssy-dash-surface, #fff);
    }
}
/* /Components/Common/DashboardComponents_HA/SsyFilterChips.razor.rz.scp.css */
.ssy-chips[b-488ayqj2a2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ssy-chip[b-488ayqj2a2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    border-radius: 4px;
    background: var(--ssy-dash-surface, #fff);
    color: var(--ssy-dash-text-dim, #536A75);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    line-height: 1;
    padding: 5px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ssy-chip:hover[b-488ayqj2a2] {
    color: var(--ssy-dash-brand, #000061);
    background: var(--ssy-dash-row-active, #EAF1F5);
}

.ssy-chip-count[b-488ayqj2a2] { font-size: var(--ssy-fs-base); }

/* plain (segment) active = brand fill */
.ssy-chip-active[b-488ayqj2a2] {
    background: var(--ssy-dash-brand, #000061);
    border-color: var(--ssy-dash-brand, #000061);
    color: #fff;
}

.ssy-chip-active:hover[b-488ayqj2a2] {
    background: var(--ssy-dash-brand, #000061);
    color: #fff;
}

/* level-filled chips (Weather status) */
.ssy-chip-alert[b-488ayqj2a2] {
    background: var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red, #DB303A));
    border-color: transparent;
    color: #fff;
}

.ssy-chip-caution[b-488ayqj2a2] {
    background: var(--ssy-dash-caution, var(--ssy-colour-main-crystal-blue, #009DC9));
    border-color: transparent;
    color: #fff;
}

.ssy-chip-calm[b-488ayqj2a2] {
    background: var(--ssy-dash-row-active, #EAF1F5);
    color: var(--ssy-dash-up, var(--ssy-colour-palette-teal-green, #01A39E));
}

.ssy-chip-alert:hover[b-488ayqj2a2] { background: var(--ssy-dash-warn, #DB303A); color: #fff; }
.ssy-chip-caution:hover[b-488ayqj2a2] { background: var(--ssy-dash-caution, #009DC9); color: #fff; }

/* active ring keeps the level fill instead of switching to brand */
.ssy-chip-alert.ssy-chip-active[b-488ayqj2a2],
.ssy-chip-caution.ssy-chip-active[b-488ayqj2a2],
.ssy-chip-calm.ssy-chip-active[b-488ayqj2a2] {
    outline: 2px solid var(--ssy-dash-brand, #000061);
    outline-offset: 1px;
}

.ssy-chip-alert.ssy-chip-active[b-488ayqj2a2] { background: var(--ssy-dash-warn, #DB303A); color: #fff; }
.ssy-chip-caution.ssy-chip-active[b-488ayqj2a2] { background: var(--ssy-dash-caution, #009DC9); color: #fff; }
.ssy-chip-calm.ssy-chip-active[b-488ayqj2a2] { background: var(--ssy-dash-row-active, #EAF1F5); color: var(--ssy-dash-up, #01A39E); }
/* /Components/Common/DashboardComponents_HA/SsyGrid.razor.rz.scp.css */
.ssy-grid[b-ebcgdmbcoc] {
    display: grid;
    gap: var(--ssy-grid-gap, 5px);
    align-items: var(--ssy-grid-align, stretch);
    grid-template-columns: var(--ssy-grid-cols, 1fr);
    min-width: 0;
}

/* MinCol grids wrap intrinsically - replaces the old hardcoded 1600/1100px
   viewport collapses. Track minimum = min(max(MinCol, even-MaxCols share), 100%):
   wide, the even share wins so the grid shows exactly its design column count
   (auto-fit collapses unused tracks); narrower, MinCol wins and columns wrap;
   narrower than MinCol, 100% wins so a single column never overflows.

   The gap term reads --ssy-grid-gap (the Gap parameter) rather than a literal,
   because the arithmetic has to subtract the SAME gap the grid actually uses.
   It was hardcoded to 5px while three consumers overrode gap to 6px in their own
   CSS, which shifted the wrap threshold without anyone being able to see it from
   the call site. Set Gap, not `gap`.

   While pinned, ssy-fit-band out-ranks this and restores the design columns. */
.ssy-grid-autofit[b-ebcgdmbcoc] {
    grid-template-columns: repeat(auto-fit, minmax(min(max(var(--ssy-grid-min, 240px), calc((100% - (var(--ssy-grid-maxcols, 12) - 1) * var(--ssy-grid-gap, 5px)) / var(--ssy-grid-maxcols, 12))), 100%), 1fr));
}
/* /Components/Common/DashboardComponents_HA/SsyIconButton.razor.rz.scp.css */
.ssy-icon-button[b-bvt3xsnf5q] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--ssy-dash-border, #dce5eb);
    border-radius: 4px;
    background: var(--ssy-dash-surface, #fff);
    color: var(--ssy-dash-brand, #000061);
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.ssy-icon-button.is-compact[b-bvt3xsnf5q] {
    width: 20px;
    height: 20px;
    border-color: transparent;
    font-size: 11px;
}

.ssy-icon-button:hover:not(:disabled)[b-bvt3xsnf5q] {
    background: color-mix(in srgb, var(--ssy-dash-brand, #000061) 7%, #fff);
}

.ssy-icon-button:focus-visible[b-bvt3xsnf5q] {
    outline: 2px solid var(--ssy-dash-focus, #1688c9);
    outline-offset: 2px;
}

.ssy-icon-button:disabled[b-bvt3xsnf5q] {
    opacity: .45;
    cursor: not-allowed;
}

.ssy-icon-button__spinner[b-bvt3xsnf5q] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ssy-icon-spin-b-bvt3xsnf5q .8s linear infinite;
}

@keyframes ssy-icon-spin-b-bvt3xsnf5q { to { transform: rotate(1turn); } }

@media (pointer: coarse) {
    .ssy-icon-button[b-bvt3xsnf5q] {
        width: 44px;
        height: 44px;
    }

    .ssy-icon-button.is-compact[b-bvt3xsnf5q] {
        width: 20px;
        height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssy-icon-button__spinner[b-bvt3xsnf5q] { animation-duration: 1.8s; }
}
/* /Components/Common/DashboardComponents_HA/SsyKpiStrip.razor.rz.scp.css */
/* ============================================================
   SsyKpiStrip — shared KPI tile strip styles.

   Theme vars (set on the host dashboard wrapper):
     --ssy-kpi-brand     label / name text colour
     --ssy-kpi-surface   tile background
     --ssy-kpi-border    outer border / divider
     --ssy-kpi-text      main value text colour
     --ssy-kpi-muted     unit / delta-label muted text
     --ssy-kpi-up        positive delta colour
     --ssy-kpi-dn        negative delta colour

   Defaults (fallback when no dashboard sets the vars):
     ssy-colour-main-simpson-blue / white / standard neutrals
   ============================================================ */

/* ---------- layout ---------- */
/* One column per tile by default (--ssy-kpi-cols is published by the component
   from its tile count). It lives here rather than inline so the narrow-screen
   rules below, a host dashboard, or a future @container collapse can all just
   set the var - no !important anywhere. */
.ssy-kpi-strip[b-ie8g8pv9ex] {
    display: grid;
    grid-template-columns: repeat(var(--ssy-kpi-cols, 1), minmax(0, 1fr));
    position: relative;
}

/* Strip variant: one shared card, tiles divided by inner borders */
.ssy-kpi-strip.ssy-kpi-strip .ssy-kpi-tile[b-ie8g8pv9ex] {
    border-right: 1px solid var(--ssy-kpi-border, #E1E8ED);
}
.ssy-kpi-strip.ssy-kpi-strip .ssy-kpi-tile:last-child[b-ie8g8pv9ex] {
    border-right: 0;
}

.ssy-kpi-strip.ssy-kpi-strip[b-ie8g8pv9ex] {
    background: var(--ssy-kpi-surface, #fff);
    border: 1px solid var(--ssy-kpi-border, #E1E8ED);
    border-radius: 4px;
}

/* Cards variant: each tile is its own bordered card */
.ssy-kpi-strip.ssy-kpi-cards[b-ie8g8pv9ex] {
    gap: 4px;
}
.ssy-kpi-strip.ssy-kpi-cards .ssy-kpi-tile[b-ie8g8pv9ex] {
    background: var(--ssy-kpi-surface, #fff);
    border: 1px solid var(--ssy-kpi-border, #E1E8ED);
    border-radius: 4px;
}

/* ---------- tile ---------- */
.ssy-kpi-tile[b-ie8g8pv9ex] {
    padding: 5px 12px 3px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- name + unit row ---------- */
.ssy-kpi-top[b-ie8g8pv9ex] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ssy-kpi-name[b-ie8g8pv9ex] {
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    color: var(--ssy-kpi-brand, var(--ssy-colour-main-simpson-blue, #000061));
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ssy-kpi-unit[b-ie8g8pv9ex] {
    font-size: var(--ssy-fs-small);
    color: var(--ssy-kpi-muted, #798E98);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- big value ---------- */
.ssy-kpi-mid[b-ie8g8pv9ex] {
    display: flex;
    align-items: baseline;
}

.ssy-kpi-val[b-ie8g8pv9ex] {
    font-size: var(--ssy-fs-display-xl);
    font-weight: 700;
    color: var(--ssy-kpi-text, #1a1a1a);
    letter-spacing: -0.4px;
    line-height: 1.08;
    font-variant-numeric: tabular-nums;
}

/* ---------- delta row ---------- */
.ssy-kpi-deltas[b-ie8g8pv9ex] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-top: 20px;
    font-size: var(--ssy-fs-small);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}

.ssy-kpi-deltas > span[b-ie8g8pv9ex] {
    display: inline-flex;
    gap: 2px;
    min-width: 0;
}

.ssy-kpi-dlabel[b-ie8g8pv9ex] {
    color: var(--ssy-kpi-text, #1a1a1a);
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: -0.25px;
}

.ssy-kpi-deltas .ssy-kpi-up[b-ie8g8pv9ex],
.ssy-kpi-deltas .ssy-kpi-dn[b-ie8g8pv9ex] {
    font-size: var(--ssy-fs-small);
    font-weight: 1000;
    letter-spacing: -0.5px;
}

.ssy-kpi-deltas .ssy-kpi-up[b-ie8g8pv9ex]  { color: var(--ssy-kpi-up, #01A39E); }
.ssy-kpi-deltas .ssy-kpi-dn[b-ie8g8pv9ex]  { color: var(--ssy-kpi-dn, #EB3871); }
.ssy-kpi-deltas .ssy-kpi-flat[b-ie8g8pv9ex] { color: var(--ssy-kpi-muted, #798E98); font-weight: 700; }

/* ---------- period tag (fallback when no deltas) ---------- */
.ssy-kpi-tag[b-ie8g8pv9ex] {
    font-size: var(--ssy-fs-tiny);
    color: var(--ssy-kpi-muted, #798E98);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-top: 2px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- skeleton tile (first load) ---------- */
.ssy-kpi-tile.ssy-kpi-skel[b-ie8g8pv9ex] {
    gap: 9px;
    justify-content: center;
    min-height: 84px;
}

/* ---------- whole-strip error / empty state ---------- */
.ssy-kpi-panel-state[b-ie8g8pv9ex] {
    grid-column: 1 / -1;
}

/* ---------- sparkline ---------- */
.ssy-kpi-spark[b-ie8g8pv9ex] {
    height: 65px;
    margin: -50px -4px 0 -4px;
    --ssy-kpi-spark-fade-start: 0%;
    --ssy-kpi-spark-fade-full: 80%;
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--ssy-kpi-spark-fade-start)) 0%,
        #000 var(--ssy-kpi-spark-fade-full)
    );
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--ssy-kpi-spark-fade-start)) 0%,
        #000 var(--ssy-kpi-spark-fade-full)
    );
}

/* ---------- sparkline state ---------- */
.ssy-kpi-state[b-ie8g8pv9ex] {
    align-self: flex-start;
    margin-top: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--ssy-kpi-border, #E1E8ED);
    color: var(--ssy-kpi-muted, #798E98);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.ssy-kpi-state-error[b-ie8g8pv9ex] {
    border-color: color-mix(in srgb, var(--ssy-kpi-dn, #EB3871) 45%, var(--ssy-kpi-border, #E1E8ED));
    color: var(--ssy-kpi-dn, #EB3871);
}

@media (max-width: 767px) {
    .ssy-kpi-strip[b-ie8g8pv9ex] {
        --ssy-kpi-cols: 2;
    }

    .ssy-kpi-strip.ssy-kpi-strip .ssy-kpi-tile[b-ie8g8pv9ex] {
        position: relative;
        min-height: 88px;
        padding: 6px 8px;
        border-right: 1px solid var(--ssy-kpi-border, #E1E8ED);
        border-bottom: 1px solid var(--ssy-kpi-border, #E1E8ED);
    }

    .ssy-kpi-strip.ssy-kpi-strip .ssy-kpi-tile:nth-child(2n)[b-ie8g8pv9ex] {
        border-right: 0;
    }

    .ssy-kpi-name[b-ie8g8pv9ex],
    .ssy-kpi-unit[b-ie8g8pv9ex] {
        white-space: normal;
    }

    .ssy-kpi-deltas[b-ie8g8pv9ex] {
        display: flex;
        justify-content: space-between;
        gap: 5px;
        margin-top: 20px;
        overflow: visible;
        white-space: normal;
    }

    .ssy-kpi-deltas > span[b-ie8g8pv9ex] {
        display: inline-flex;
        gap: 2px;
    }

    /* Smaller hero value; keep the desktop sparkline overlay (spark behind the
       value + deltas) so mobile reads like the widescreen tile. */
    .ssy-kpi-val[b-ie8g8pv9ex] {
        font-size: var(--ssy-fs-display-lg);
    }

    .ssy-kpi-spark[b-ie8g8pv9ex] {
        display: block;
    }
}

@media (max-width: 340px) {
    .ssy-kpi-strip[b-ie8g8pv9ex] {
        --ssy-kpi-cols: 1;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyMetricCell.razor.rz.scp.css */
.ssy-metric[b-emto3me9i7] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Components/Common/DashboardComponents_HA/SsyOverlayDialog.razor.rz.scp.css */
/* Fills the nearest positioned ancestor, so the reader keeps the board behind it. Replaces the
   two near-identical copies the Coal Arb and Coking Arb pages each carried in their own scoped CSS. */
.ssy-overlay-dialog[b-a8gzbv0geb] {
    position: absolute;
    inset: 0;
    z-index: 20;
    padding: 16px;
    background: rgb(255 255 255 / 92%);
}

.ssy-overlay-dialog-card[b-a8gzbv0geb] {
    position: relative;
    max-height: 100%;
    overflow: auto;
}

/* Sticky so it stays reachable while the reader scrolls a long assumptions table. */
.ssy-overlay-dialog-close[b-a8gzbv0geb] {
    position: sticky;
    top: 0;
    float: right;
}

/* The panel is reference material read at a glance, not body copy. */
.ssy-overlay-dialog-card p[b-a8gzbv0geb] {
    font-size: 11px;
}
/* /Components/Common/DashboardComponents_HA/SsyPortRiskMap.razor.rz.scp.css */
.ssy-port-risk-map-shell[b-4vfc1gjpa8]{position:relative;display:grid;grid-template-rows:auto minmax(420px,1fr) auto;min-width:0;height:535px;border:1px solid var(--ssy-dash-card-border,#d9dee8);background:#fff}.ssy-port-risk-map-shell header[b-4vfc1gjpa8]{display:flex;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid #e7ebf0;color:#536a75;font-size:9px}.ssy-port-risk-map-shell header strong[b-4vfc1gjpa8]{color:#000061;font-size:11px;text-transform:uppercase}.ssy-port-risk-map-shell header button[b-4vfc1gjpa8]{margin-left:auto;border:1px solid #b9c5d0;background:#fff;color:#000061;font-size:8px;font-weight:800;cursor:pointer}.ssy-port-risk-map[b-4vfc1gjpa8]{min-height:0}.ssy-port-risk-map-shell footer[b-4vfc1gjpa8]{display:flex;gap:12px;align-items:center;padding:5px 8px;color:#536a75;font-size:8px;white-space:nowrap;overflow:auto}.ssy-port-risk-map-shell footer i[b-4vfc1gjpa8]{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:3px}.ssy-port-risk-map-shell footer .risk-calm[b-4vfc1gjpa8]{background:#01a39e}.ssy-port-risk-map-shell footer .risk-caution[b-4vfc1gjpa8]{background:#009dc9}.ssy-port-risk-map-shell footer .risk-alert[b-4vfc1gjpa8]{background:#db303a}.ssy-port-risk-map-shell footer .risk-track[b-4vfc1gjpa8]{width:12px;height:0;border-radius:0;border-top:2px dashed #e75113}.storm-state[b-4vfc1gjpa8]{position:absolute;top:38px;right:8px;display:flex;align-items:center;gap:5px;padding:4px 7px;background:#fff;border:1px solid #d9dee8;color:#536a75;font-size:8px}/* Full-panel failure overlay. Positioning only - SsyErrorPanel owns its appearance. */.ssy-port-risk-state[b-4vfc1gjpa8]{position:absolute;inset:38px 0 auto;z-index:4;display:flex;align-items:flex-start;justify-content:center;padding:10px}.ssy-port-risk-popup[b-4vfc1gjpa8]{display:grid;gap:3px;max-width:340px;padding:8px 22px 8px 9px;border:1px solid #b9c5d0;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.16);color:#26344c;font-size:9px}.ssy-port-risk-popup strong[b-4vfc1gjpa8]{color:#000061}.ssy-port-risk-popup button[b-4vfc1gjpa8]{position:absolute;top:2px;right:4px;border:0;background:transparent;cursor:pointer}
/* /Components/Common/DashboardComponents_HA/SsyPortRiskMatrix.razor.rz.scp.css */
.ssy-risk-matrix[b-4sagr2f3pa]{display:grid;min-width:0;border:1px solid var(--ssy-dash-card-border,#d9dee8);border-radius:3px;background:#fff;overflow:hidden}.ssy-risk-matrix-search[b-4sagr2f3pa]{display:flex;align-items:center;gap:8px;padding:5px 7px;border-bottom:1px solid #edf0f5;color:#536a75;font-size:9px;font-weight:800;text-transform:uppercase}.ssy-risk-matrix-search input[b-4sagr2f3pa]{min-width:0;flex:1;border:1px solid #cbd4df;border-radius:2px;padding:4px 6px;font:inherit;text-transform:none}.ssy-risk-matrix-search .regions-toggle[b-4sagr2f3pa]{border:0;background:transparent;color:#000061;font:inherit;cursor:pointer;text-transform:uppercase}.ssy-risk-matrix-scroll[b-4sagr2f3pa]{max-height:535px;overflow:auto}.ssy-risk-matrix table[b-4sagr2f3pa]{width:100%;table-layout:fixed;border-collapse:collapse;color:#26344c;font-size:10px;font-variant-numeric:tabular-nums}.ssy-risk-matrix .status-col[b-4sagr2f3pa]{width:24px}.ssy-risk-matrix .port-col[b-4sagr2f3pa]{width:27%}.ssy-risk-matrix .metric-col[b-4sagr2f3pa]{width:17%}.ssy-risk-matrix .thunder-col[b-4sagr2f3pa]{width:28px}.ssy-risk-matrix th[b-4sagr2f3pa]{position:sticky;top:0;z-index:2;padding:6px 5px;border-bottom:2px solid #d9dee8;background:#fff;color:#000061;font-weight:800;text-align:center;text-transform:uppercase;white-space:nowrap}.ssy-risk-matrix th span[b-4sagr2f3pa]{color:#61708a;font-size:8px}.ssy-risk-matrix th.port[b-4sagr2f3pa]{text-align:left}.ssy-risk-matrix td[b-4sagr2f3pa]{padding:3px 5px;border-bottom:1px solid #edf0f5;line-height:1.15;white-space:nowrap}.ssy-risk-matrix td.status[b-4sagr2f3pa]{text-align:center}.ssy-risk-matrix td.port[b-4sagr2f3pa]{overflow:hidden;text-overflow:ellipsis}.ssy-risk-matrix td.port button[b-4sagr2f3pa]{width:100%;overflow:hidden;padding:0;border:0;background:transparent;color:#000061;font:inherit;font-weight:750;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.ssy-risk-matrix td.metric[b-4sagr2f3pa]{border-left:1px solid #f1f3f6}.ssy-risk-matrix .metric-values[b-4sagr2f3pa]{display:flex;align-items:baseline;justify-content:space-between;gap:4px;margin-bottom:2px}.ssy-risk-matrix .metric-values strong[b-4sagr2f3pa]{color:#26344c;font-size:10px}.ssy-risk-matrix .metric-values span[b-4sagr2f3pa]{overflow:hidden;color:#61708a;font-size:7px;text-overflow:ellipsis}.ssy-risk-matrix td.metric[b-4sagr2f3pa]  .ssy-bandtrack{height:7px}.ssy-risk-matrix td.metric[b-4sagr2f3pa]  .ssy-bandmark-primary{width:7px;height:7px}.ssy-risk-matrix td.metric[b-4sagr2f3pa]  .ssy-bandmark-secondary{width:6px;height:6px}.ssy-risk-matrix tbody tr:not(.region)[b-4sagr2f3pa]{cursor:pointer}.ssy-risk-matrix tbody tr:not(.region):hover[b-4sagr2f3pa],.ssy-risk-matrix tbody tr.selected[b-4sagr2f3pa]{background:#eef7fb}.ssy-risk-matrix tbody tr.selected[b-4sagr2f3pa]{box-shadow:inset 3px 0 #00a7d8}.ssy-risk-matrix .region td[b-4sagr2f3pa]{padding:0;background:#f5f7fa}.ssy-risk-matrix .region button[b-4sagr2f3pa]{display:flex;width:100%;align-items:center;gap:5px;padding:4px 6px;border:0;background:transparent;color:#536a75;font-size:8px;font-weight:800;letter-spacing:.5px;text-align:left;text-transform:uppercase;cursor:pointer}.ssy-risk-matrix .region .chevron[b-4sagr2f3pa]{width:8px;color:#000061;font-size:10px}.ssy-risk-matrix .region .count[b-4sagr2f3pa]{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none}.ssy-risk-matrix .cause-active[b-4sagr2f3pa]{background:#eaf6fc}.ssy-risk-matrix th.cause-active[b-4sagr2f3pa]{color:#006da5;box-shadow:inset 0 -2px #00a7d8}.ssy-risk-matrix td.thunder[b-4sagr2f3pa]{text-align:center}
.ssy-risk-matrix .region button[b-4sagr2f3pa]{gap:7px;padding:5px 6px;font-weight:700;letter-spacing:0;text-transform:none}.ssy-risk-matrix .region strong[b-4sagr2f3pa]{color:#000061;letter-spacing:.5px;text-transform:uppercase}.ssy-risk-matrix .region-status[b-4sagr2f3pa]{color:#a61b2b;font-weight:800;white-space:nowrap}.ssy-risk-matrix .region-metrics[b-4sagr2f3pa]{min-width:0;overflow:hidden;color:#3e5260;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}.ssy-risk-matrix .region .count[b-4sagr2f3pa]{white-space:nowrap}
/* /Components/Common/DashboardComponents_HA/SsyPortRiskSummary.razor.rz.scp.css */
.ssy-risk-summary[b-t822qht79q]{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin-bottom:6px;background:#d9dee8;border:1px solid #d9dee8}.ssy-risk-summary div[b-t822qht79q]{display:grid;gap:2px;min-width:0;padding:6px 8px;background:#fff}.ssy-risk-summary span[b-t822qht79q]{color:#61708a;font-size:8px;font-weight:800;text-transform:uppercase}.ssy-risk-summary strong[b-t822qht79q]{overflow:hidden;color:#000061;font-size:10px;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}@media(max-width:900px){.ssy-risk-summary[b-t822qht79q]{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:680px){.ssy-risk-summary[b-t822qht79q]{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* /Components/Common/DashboardComponents_HA/SsyQuerySummary.razor.rz.scp.css */
/* ============================================================
   SsyQuerySummary - one dense line. Terms wrap rather than truncate so the
   scope stays readable at 390px, where the feed it describes is the whole view.
   ============================================================ */

.ssy-query-summary[b-rcj0qx92d6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
}

.ssy-query-summary-terms[b-rcj0qx92d6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    min-width: 0;
}

/* Middot separators come from the layout, not from characters in the data, so a
   term containing a dot cannot be mistaken for a boundary. */
.ssy-query-summary-term + .ssy-query-summary-term[b-rcj0qx92d6]::before,
.ssy-query-summary-term + .ssy-query-summary-count[b-rcj0qx92d6]::before {
    content: "\00b7";
    padding-right: 6px;
    opacity: 0.55;
}

.ssy-query-summary-window[b-rcj0qx92d6] {
    font-weight: 800;
}

.ssy-query-summary-count[b-rcj0qx92d6] {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.ssy-query-summary-reset[b-rcj0qx92d6] {
    height: 20px;
    padding: 0 6px;
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ssy-query-summary-reset:hover[b-rcj0qx92d6] {
    border-color: var(--ssy-dash-brand, #000061);
}

.ssy-query-summary-reset:focus-visible[b-rcj0qx92d6] {
    outline: 2px solid var(--ssy-dash-focus, #1688c9);
    outline-offset: 1px;
}
/* /Components/Common/DashboardComponents_HA/SsySeasonalWeatherOutlook.razor.rz.scp.css */
.ssy-seasonal[b-ge0ilufeg9] {
    display: grid;
    gap: 8px;
}

.ssy-seasonal-head[b-ge0ilufeg9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.ssy-seasonal-head > div:first-child[b-ge0ilufeg9] { display: flex; align-items: baseline; gap: 8px; }

.ssy-seasonal-head h2[b-ge0ilufeg9] {
    margin: 0;
    color: var(--ssy-dash-brand, #000061);
    font-size: var(--ssy-fs-display-lg);
    font-weight: 800;
}

.ssy-seasonal-grid[b-ge0ilufeg9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.ssy-seasonal-figure[b-ge0ilufeg9] {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--ssy-dash-card-border, #d9dee8);
    border-radius: 4px;
    background: var(--ssy-dash-surface, #fff);
}

.ssy-seasonal-figure header[b-ge0ilufeg9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--ssy-dash-text-muted, #61708a);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    text-transform: uppercase;
}

.ssy-seasonal-figure a[b-ge0ilufeg9] {
    color: var(--ssy-dash-brand, #000061);
    text-transform: none;
    text-decoration: none;
}

.ssy-seasonal-figure a:hover[b-ge0ilufeg9] { text-decoration: underline; }

.ssy-seasonal-image[b-ge0ilufeg9] { position:relative; display:grid; place-items:center; min-height:150px; overflow:hidden; border:1px solid var(--ssy-dash-card-border-soft,#edf0f5); background:#fff; }
.ssy-seasonal-image > span[b-ge0ilufeg9] { color:#61708a;font-size:10px;font-weight:750; }
.ssy-seasonal-image > span.failed[b-ge0ilufeg9] { color:#a52a18; }
.ssy-seasonal-figure img[b-ge0ilufeg9] {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 270px;
    object-fit: contain;
    object-position: top center;
    opacity:0;
}
.ssy-seasonal-figure img.loaded[b-ge0ilufeg9] { opacity:1; }

@media (max-width: 900px) {
    .ssy-seasonal-grid[b-ge0ilufeg9] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .ssy-seasonal-head[b-ge0ilufeg9] {
        align-items: flex-start;
        flex-direction: column;
    }

    .ssy-seasonal-grid[b-ge0ilufeg9] { grid-template-columns: 1fr; }
    .ssy-seasonal-figure img[b-ge0ilufeg9] { max-height: none; }
}
/* /Components/Common/DashboardComponents_HA/SsySkeleton.razor.rz.scp.css */
/* ============================================================
   SsySkeleton — shimmer loading placeholder. Neutral grey by default; the
   sweep animation is the only "this is loading" signal. Honours
   prefers-reduced-motion. Keyframe name is global on purpose (ssy-shimmer)
   so every skeleton on the page sweeps in sync.
   ============================================================ */

.ssy-skel[b-uxsdr9aq9s] {
    display: block;
    box-sizing: border-box;
}

.ssy-skel-lines[b-uxsdr9aq9s] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
}

.ssy-skel-bar[b-uxsdr9aq9s] {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--ssy-skel-base, #e7ecee) 25%,
        var(--ssy-skel-hi, #f5f8f9) 37%,
        var(--ssy-skel-base, #e7ecee) 63%);
    background-size: 400% 100%;
    animation: ssy-shimmer-b-uxsdr9aq9s 1.4s ease infinite;
}

.ssy-skel-fill[b-uxsdr9aq9s] {
    height: 100%;
    border-radius: 6px;
}

/* chart silhouette: columns rising from a baseline */
.ssy-skel-chart[b-uxsdr9aq9s] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ssy-skel-cols[b-uxsdr9aq9s] {
    display: flex;
    align-items: flex-end;
    gap: 5%;
    height: 100%;
    padding: 12% 4% 6%;
    box-sizing: border-box;
}

.ssy-skel-col[b-uxsdr9aq9s] {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(
        90deg,
        var(--ssy-skel-base, #e7ecee) 25%,
        var(--ssy-skel-hi, #f5f8f9) 37%,
        var(--ssy-skel-base, #e7ecee) 63%);
    background-size: 400% 100%;
    animation: ssy-shimmer-b-uxsdr9aq9s 1.4s ease infinite;
}

.ssy-skel-axis[b-uxsdr9aq9s] {
    display: block;
    height: 2px;
    margin: 0 4%;
    border-radius: 2px;
    background: var(--ssy-skel-base, #e7ecee);
}

@keyframes ssy-shimmer-b-uxsdr9aq9s {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ssy-skel-bar[b-uxsdr9aq9s],
    .ssy-skel-col[b-uxsdr9aq9s] { animation: none; }
}
/* /Components/Common/DashboardComponents_HA/SsySparkline.razor.rz.scp.css */
.ssy-spark[b-ot08xb6zw4] {
    display: block;
    width: 92px;
    height: 22px;
}

.ssy-spark-tall[b-ot08xb6zw4] {
    width: 100%;
    height: 62px;
}

.ssy-spark-baseline[b-ot08xb6zw4] {
    background: linear-gradient(to bottom, transparent 49%, var(--ssy-dash-row-line, #F2F5F8) 50%, transparent 51%);
}

.ssy-spark polyline[b-ot08xb6zw4] {
    fill: none;
    stroke: var(--ssy-dash-brand, #000061);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    /* viewBox stretches to the box (preserveAspectRatio=none); keep a constant
       device stroke width so the line stays crisp, not blurred. */
    vector-effect: non-scaling-stroke;
}

.ssy-spark.ssy-hot polyline[b-ot08xb6zw4] {
    stroke: var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red, #DB303A));
}

.ssy-spark.ssy-cool polyline[b-ot08xb6zw4] {
    stroke: var(--ssy-dash-up, var(--ssy-colour-palette-teal-green, #01A39E));
}
/* /Components/Common/DashboardComponents_HA/SsyStateOverlay.razor.rz.scp.css */
/* ============================================================
   SsyStateOverlay — translucent dim + centred spinner for in-place refresh.
   The dim uses the host surface colour so it reads as "this panel is busy"
   rather than a modal scrim. Spinner uses the dashboard brand colour.
   ============================================================ */

.ssy-overlay[b-froygurhj7] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ssy-dash-surface, #ffffff) 58%, transparent);
    border-radius: inherit;
    cursor: progress;
    /* block clicks on the stale content underneath while it refreshes */
    pointer-events: all;
}

.ssy-overlay-inner[b-froygurhj7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ssy-spinner[b-froygurhj7] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--ssy-dash-brand, #000061) 16%, transparent);
    border-top-color: var(--ssy-dash-brand, #000061);
    animation: ssy-spin-b-froygurhj7 0.7s linear infinite;
}

.ssy-overlay-label[b-froygurhj7] {
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--ssy-dash-text-muted, #798E98);
}

@keyframes ssy-spin-b-froygurhj7 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ssy-spinner[b-froygurhj7] { animation-duration: 1.6s; }
}
/* /Components/Common/DashboardComponents_HA/SsyStatusDot.razor.rz.scp.css */
.ssy-statusdot[b-kclhas9rlb] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ssy-dash-text-muted, #798E98);
}

.ssy-statusdot-calm[b-kclhas9rlb] {
    background: var(--ssy-dash-up, var(--ssy-colour-palette-teal-green, #01A39E));
}

.ssy-statusdot-caution[b-kclhas9rlb] {
    background: var(--ssy-dash-caution, var(--ssy-colour-main-crystal-blue, #009DC9));
}

.ssy-statusdot-alert[b-kclhas9rlb] {
    background: var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red, #DB303A));
}
/* /Components/Common/DashboardComponents_HA/SsySubTabs.razor.rz.scp.css */
/* ============================================================
   SsySubTabs — neutral, themeable in-page tab strip. Reads the host
   dashboard's --ssy-dash-* vars with brand fallbacks, so it matches whichever
   dashboard renders it without per-dashboard CSS.
   ============================================================ */

.ssy-subtabs[b-hiqfts1ng2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ssy-subtab[b-hiqfts1ng2] {
    font-family: inherit;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ssy-dash-text-muted, #798E98);
    white-space: nowrap;
}

/* hover affordance only on inactive tabs - the active tab is a non-clickable
   span, and its hover surface (white) would swallow its white active text */
.ssy-subtab:hover:not(.ssy-subtab-active)[b-hiqfts1ng2] {
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #00205B));
}

.ssy-subtab-active[b-hiqfts1ng2] {
    cursor: default;
}

/* ---- primary (commodity-level) tabs: bolder, underline-active ---- */
.ssy-subtabs-primary[b-hiqfts1ng2] {
    gap: 2px;
    border-bottom: 1px solid var(--ssy-dash-divider, #E1E8ED);
}

.ssy-subtabs-primary .ssy-subtab[b-hiqfts1ng2] {
    font-size: var(--ssy-fs-md);
    font-weight: 800;
    letter-spacing: 0.2px;
    padding: 5px 12px 6px;
    border-radius: 5px 5px 0 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
}

.ssy-subtabs-primary .ssy-subtab-active[b-hiqfts1ng2] {
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #00205B));
    border-bottom-color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #00205B));
}

/* ---- secondary (pill) sub-tabs ---- */
.ssy-subtabs-sub .ssy-subtab[b-hiqfts1ng2] {
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 9px;
    border-radius: 999px;
}

.ssy-subtabs-sub .ssy-subtab:hover:not(.ssy-subtab-active)[b-hiqfts1ng2] {
    border-color: var(--ssy-dash-border, #E1E8ED);
    background: var(--ssy-dash-surface, #fff);
}

.ssy-subtabs-sub .ssy-subtab-active[b-hiqfts1ng2] {
    color: #fff;
    background: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #00205B));
    border-color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #00205B));
}

/* ---- planned / reserved tab ---- */
.ssy-subtab-planned[b-hiqfts1ng2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ssy-dash-text-muted, #9FB2BD);
    opacity: 0.7;
    cursor: default;
}

.ssy-subtabs-primary .ssy-subtab-planned[b-hiqfts1ng2] {
    font-size: var(--ssy-fs-md);
    font-weight: 800;
    padding: 5px 12px 6px;
}

.ssy-subtab-tag[b-hiqfts1ng2] {
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--ssy-dash-chip-bg, rgba(120, 142, 152, 0.14));
    color: var(--ssy-dash-text-muted, #798E98);
}
/* /Components/Common/DropZone.razor.rz.scp.css */
.file-drop-zone[b-o2z4wa7pti] {
    position: relative;
    border: dashed 2px transparent;
    border-radius: 6px;
    transition: border linear 0.2s;
    min-height: 100px;
}

.file-drop-zone.hover[b-o2z4wa7pti] {
    border: dashed 2px #007bff;
}

.file-drop-zone[b-o2z4wa7pti]::after {
    border: dashed 2px #007bff;
    content: "Drop here";
    font-size: 24px;
    position: absolute;  /* Changed from relative to absolute */
    top: 0;
    left: 0;
    height: 100%;  /* Ensure it covers the full height */
    width: 100%;  /* Ensure it covers the full width */
    background-color: rgba(0, 123, 255, 0.15);  /* Changed color to match border */
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity ease 0.2s;
    pointer-events: none;
    z-index: 1000;
}

.file-drop-zone.hover[b-o2z4wa7pti]::after {
    opacity: 1;  /* Changed from 0.8 to 1 for better visibility */
}

.drop-zone-info[b-o2z4wa7pti] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    color: #6c757d;
    font-size: 14px;
    cursor: help;
}

.drop-zone-info i:hover[b-o2z4wa7pti] {
    color: #007bff;
}
/* /Components/Common/GaugeInput/GaugeInput.razor.rz.scp.css */
/* Existing styles */
.comp-gauge-input[b-2bvzjtnybj]  .enterPrices table {
    width: 100%;
}

.comp-gauge-input[b-2bvzjtnybj]  .tableHeader {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

.comp-gauge-input[b-2bvzjtnybj]  .enterPrices table > tbody > tr {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: min-content !important;
}

.comp-gauge-input[b-2bvzjtnybj]  .routeName {
    font-weight: bold;
    background-color: #000061;
    color: white;
    font-size: 120%;
    padding: 0 0 0 5px;
    align-content: center;
    height: 1.9em;
}

.comp-gauge-input[b-2bvzjtnybj]  .fcdesc {
    text-align: left;
    padding-left: 5px;
    width: 12em;
}

.comp-gauge-input[b-2bvzjtnybj]  .fcjointprice {
    text-align: left;
    padding-left: 5px;
    width: 10em;
}

.comp-gauge-input[b-2bvzjtnybj]  .fcprice {
    text-align: right;
    width: 8em;
}

.comp-gauge-input[b-2bvzjtnybj]  .stalePrice {
    background-color: LightYellow;
}
/* /Components/Common/Intraday/IntradayCalculator.razor.rz.scp.css */
.calc-table[b-1kra7qm7u3] {
    width: 100%; 
    border: 1px solid #d2cdc3;
    font-family: Verdana, sans-serif; 
    font-size: 10.5pt;
    text-align: right;
    table-layout: fixed;
}
.align-left[b-1kra7qm7u3] {
    text-align: left;
}
.align-right[b-1kra7qm7u3] {
    text-align: right;
}
.header-selected[b-1kra7qm7u3] {
    background-color: #163E9F;
}

.ssy-h4[b-1kra7qm7u3] {
    font-size: 1.25rem;
    color: #000061;
}

.saved-input-row[b-1kra7qm7u3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.saved-input-row .form-control[b-1kra7qm7u3] {
    flex: 1;
    height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.saved-calc-list[b-1kra7qm7u3] {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #d2cdc3;
    border-radius: 4px;
}

.saved-calc-item[b-1kra7qm7u3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #eee;
}

.saved-calc-item:last-child[b-1kra7qm7u3] {
    border-bottom: none;
}

.saved-calc-item:hover[b-1kra7qm7u3] {
    background-color: #f0f5f8;
}

.saved-calc-load[b-1kra7qm7u3] {
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    color: #163E9F;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-calc-load:hover[b-1kra7qm7u3] {
    text-decoration: underline;
}

.saved-calc-meta[b-1kra7qm7u3] {
    font-size: 0.72rem;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}

.saved-calc-delete[b-1kra7qm7u3] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.1rem;
    color: #aaa;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.saved-calc-delete:hover[b-1kra7qm7u3] {
    color: #d9534f;
}
/* /Components/Common/Intraday/IntradayCurveTable.razor.rz.scp.css */
.intraday-curve-table-container[b-mfbug5rrxc] {
    /* image to work with html to canvas */
    background: conic-gradient(#243447 0deg, #243447 90deg, #1A2432 90deg, #1A2432 270deg, #243447 270deg);
    border-radius: 0.75em;
    border: 1px solid  transparent;
    padding: 0.5em 0 0.5em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.intraday-curve-table-container.light-theme[b-mfbug5rrxc] {
    background: conic-gradient(#0087CB 0deg, #0087CB 90deg, #F4F7F9 90deg, #F4F7F9 270deg, #0087CB 270deg);
    border: 1px solid #0087CB;
}

.intraday-interaction-icons[b-mfbug5rrxc] {
    display: flex;
    align-items: end;
    column-gap: 0.9em;
}

/* Copy Styling */
/* ============ */
.intraday-copy-as-image-logo[b-mfbug5rrxc] {
    display: none;
    background-image: url(/assets/lines/SSYShippingLines_01_stretchable.svg);
    background-size: 100% 200%;
    /*background-color: #FFFFFF;*/
}
.intraday-copy-as-image-logo img[b-mfbug5rrxc] {
    width: 20rem;
    padding-bottom: 10px;
    align-content: center;
    text-align: center;
}
/* Table styling */
/* ============= */
.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw {
    caption-side: top;
    width: 100%;
    font-family: Verdana, sans-serif;
    /*font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;*/
    font-size: 10.5pt;
}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw caption {
    padding: 0 0.25em 0.25em 0.25em;
    color: #fff;
    background-color: #243447;
    font-family: inherit;
    font-size: 1em;
    display: table-caption;
}

.intraday-curve-table-container.light-theme[b-mfbug5rrxc]  table.myssy-table-lw caption {
    background-color: #0087CB;
}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw caption > span {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw td,
.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw th {
    line-height: 1.5em;
    text-align: right;
}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw thead tr.intraday-th-price-row th {
    font-weight: normal;
    background-color: #1A2432;
    color: #FFFFFF;   
}

.intraday-curve-table-container.light-theme[b-mfbug5rrxc]  table.myssy-table-lw thead tr.intraday-th-price-row th {
    background-color: #F4F7F9;
    color: #000000;  
}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw thead tr.intraday-th-title-row th {
    background-color: #243447;
    color: #FFFFFF;
}

.intraday-curve-table-container.light-theme[b-mfbug5rrxc]  table.myssy-table-lw thead tr.intraday-th-title-row th {
    background-color: #0087CB;
}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw tbody tr td {
    /*border-bottom: 1px solid #0087CB;*/
    border-top: 1px solid #243447;
    background-color: #1A2432;
    color: #FFFFFF;
}

.intraday-curve-table-container.light-theme[b-mfbug5rrxc]  table.myssy-table-lw tbody tr td {
    background-color: #F4F7F9;
    border-bottom: 1px solid #0087CB;
    color: #000000;  
}


.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw tbody tr.intraday-bom td {
    font-style: italic;
}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw tbody tr.intraday-period-separator td {
    border-top: 3px solid #243447;
}

.intraday-curve-table-container.light-theme[b-mfbug5rrxc]  table.myssy-table-lw tbody tr.intraday-period-separator td {
    border-top: 3px solid #0087CB;
}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw tbody tr:first-child td {
    border-top: none;

}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw thead tr th:first-child,
.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw tbody tr td:first-child {
    padding-left: 0.25em;
    text-align: left;
}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw thead tr th:last-child,
.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw tbody tr td:last-child {
    padding-right: 0.25em;
}

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw tbody tr td.intraday-graph-click button {
    visibility: hidden;
} 

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw tbody tr:hover td.intraday-graph-click button {
    visibility: visible;
} 

.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw tbody tr.intraday-history-tooltip-row,
.intraday-curve-table-container[b-mfbug5rrxc]  table.myssy-table-lw tbody tr.intraday-history-tooltip-row td.intraday-history-tooltip {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* Tooltip styling */
/* ===================== */
.intraday-curve-table-container .intraday-history-tooltip-hover:hover[b-mfbug5rrxc]{
    animation-name: copyFadeInOut-b-mfbug5rrxc;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}


.intraday-curve-table-container .intraday-history-tooltip[b-mfbug5rrxc] {
    position: relative;
}

.intraday-curve-table-container .intraday-history-tooltip .intraday-history-tooltip-content[b-mfbug5rrxc] {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    background-color: #243447;
    color: #ffffff;
    padding: 0.1em 0 0.25em 0;
    border: 1px solid #243447;
}

.intraday-curve-table-container.light-theme .intraday-history-tooltip .intraday-history-tooltip-content[b-mfbug5rrxc] {
    background-color: #0087CB;
    color: #000000;
    border: 1px solid #0087CB;
}

.intraday-curve-table-container .intraday-history-tooltip .intraday-history-tooltip-content b[b-mfbug5rrxc] {
    font-size: 120%;
    margin-left: 0.25em;
    color: #ffffff;
}

.intraday-curve-table-container .intraday-history-tooltip .intraday-history-tooltip-content table[b-mfbug5rrxc] {
    width: calc(100% - 0.5em);
    margin: 0 0.25em;
}

.intraday-curve-table-container .intraday-history-tooltip-content.intraday-history-tooltip-content-show[b-mfbug5rrxc] {
    visibility: visible;
}

/* Copy styling   */
/* ============== */
.intraday-curve-table-container[b-mfbug5rrxc]  .copy-fade-in-fade-out {
    animation-name: copyFadeInOut-b-mfbug5rrxc;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@keyframes copyFadeInOut-b-mfbug5rrxc {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Upgrade button styling */
/* ===================== */
.intraday-curve-table-container .myssy-upgrade-button[b-mfbug5rrxc] {
    padding: 0.25em 0.5em;
    font-size: 1em;
    font-weight: 600;
    border-radius: 0.5em;
    background: #152234;
    color: #E5E7EB;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.08);
    transition: all .15s ease;
    text-decoration: none;
}

.intraday-curve-table-container.light-theme .myssy-upgrade-button[b-mfbug5rrxc] {
    background: #0087CB;
    color: #FFFFFF;
}

.intraday-curve-table-container .myssy-upgrade-button:hover[b-mfbug5rrxc] {
    background: #1e3a5f;
}

.intraday-curve-table-container.light-theme .myssy-upgrade-button:hover[b-mfbug5rrxc] {
    background: #0076b0;
}

.intraday-curve-table-container .myssy-upgrade-button:disabled[b-mfbug5rrxc] {
    background: #E5E7EB;
    color: #000000;
    cursor: not-allowed;
    border-color: transparent;
}

/* Colour styling */
/* ============== */
.intraday-curve-table-container table.myssy-table-lw tbody tr td.settlement-up[b-mfbug5rrxc] {
    color: #22C55E;
}

.intraday-curve-table-container.light-theme table.myssy-table-lw tbody tr td.settlement-up[b-mfbug5rrxc] {
    color: #13A846;
}

.intraday-curve-table-container table.myssy-table-lw tbody tr td.settlement-down[b-mfbug5rrxc] {
    color: #F87171;
}

.intraday-curve-table-container.light-theme table.myssy-table-lw tbody tr td.settlement-down[b-mfbug5rrxc] {
    color: #FF0000;
}

.intraday-curve-table-container table.myssy-table-lw tbody tr td.intraday-up[b-mfbug5rrxc] {
    color: #A3E635;
}

.intraday-curve-table-container.light-theme table.myssy-table-lw tbody tr td.intraday-up[b-mfbug5rrxc] {
    color: #91A527;
}

.intraday-curve-table-container table.myssy-table-lw tbody tr td.intraday-up-pulse[b-mfbug5rrxc] {
    animation-name: pulse-intraday-up-b-mfbug5rrxc;
    animation-duration: 700ms;
    animation-iteration-count: 40;
    animation-timing-function: linear;
}

.intraday-curve-table-container.light-theme table.myssy-table-lw tbody tr td.intraday-up-pulse[b-mfbug5rrxc] {
    animation-name: pulse-intraday-up-light-b-mfbug5rrxc;    
}

.intraday-curve-table-container table.myssy-table-lw tbody tr td.intraday-down[b-mfbug5rrxc] {
    color: #FF7070;
}

.intraday-curve-table-container.light-theme table.myssy-table-lw tbody tr td.intraday-down[b-mfbug5rrxc] {
    color: #DB303A;
}

.intraday-curve-table-container table.myssy-table-lw tbody tr td.intraday-down-pulse[b-mfbug5rrxc] {
    animation-name: pulse-intraday-down-b-mfbug5rrxc;
    animation-duration: 700ms;
    animation-iteration-count: 40;
    animation-timing-function: linear;
}

.intraday-curve-table-container.light-theme table.myssy-table-lw tbody tr td.intraday-down-pulse[b-mfbug5rrxc] {
    animation-name: pulse-intraday-down-light-b-mfbug5rrxc;    
}

@keyframes pulse-intraday-up-b-mfbug5rrxc {
    0% {
        text-shadow: 0 0 0  rgba(163, 230, 53, 0.0);
    }

    30% {
        text-shadow: 
            0 0 6px  rgba(163, 230, 53, 0.85), 
            0 0 14px rgba(163, 230, 53, 0.6), 
            0 0 24px rgba(163, 230, 53, 0.4);
    }

    100% {
        text-shadow: 0 0 0 rgba(163, 230, 53, 0.0);
    }
}

@keyframes pulse-intraday-up-light-b-mfbug5rrxc {
    0% {
        text-shadow: 0 0 0  rgba(145, 165, 39, 0.0);
    }

    30% {
        text-shadow:
             0 0 6px  rgba(145, 165, 39, 0.85),
             0 0 14px rgba(145, 165, 39, 0.6),
             0 0 24px rgba(145, 165, 39, 0.4);
    }

    100% {
        text-shadow: 0 0 0  rgba(145, 165, 39, 0.0);
    }
}

@keyframes pulse-intraday-down-b-mfbug5rrxc {
    0% {
        text-shadow: 0 0 0 rgba(255, 112, 112, 0.0);
    }

    30% {
        text-shadow: 
            0 0 6px  rgba(255, 112, 112, 0.85), 
            0 0 14px rgba(255, 112, 112, 0.6), 
            0 0 24px rgba(255, 112, 112, 0.4);
    }

    100% {
        text-shadow: 0 0 0 rgba(255, 112, 112, 0.0);
    }
}

@keyframes pulse-intraday-down-light-b-mfbug5rrxc {
    0% {
        text-shadow: 0 0 0 rgba(219, 48, 58, 0.0);
    }

    30% {
        text-shadow:
                0 0 6px  rgba(219, 48, 58, 0.85),
                0 0 14px rgba(219, 48, 58, 0.6),
                0 0 24px rgba(219, 48, 58, 0.4);
    }

    100% {
        text-shadow: 0 0 0 rgba(219, 48, 58, 0.0);
    }
}
/* /Components/Common/Intraday/IntradayDynamicChart.razor.rz.scp.css */
.intraday-chart-container[b-3g0yd0kjre] {
    background: conic-gradient(#243447 0deg, #243447 90deg, #1A2432 90deg, #1A2432 270deg, #243447 270deg);
    border-radius: 0.75em;
    border: 1px solid transparent;
    padding: 0.5em 0 0.5em 0;
}

.intraday-chart-container.light-theme[b-3g0yd0kjre] {
    background: conic-gradient(#0087CB 0deg, #0087CB 90deg, #F4F7F9 90deg, #F4F7F9 270deg, #0087CB 270deg);
    border: 1px solid #0087CB;
}

.intraday-chart-header[b-3g0yd0kjre] {
    display: flex;
    padding: 0 0.25em 0.25em 0.25em;
    justify-content: space-between;
}

.intraday-chart-container .intraday-chart-header[b-3g0yd0kjre] {
    color: #fff;
}

.intraday-chart-container .intraday-chart-header h3[b-3g0yd0kjre] {
    color: inherit;
}

.intraday-chart-header h3[b-3g0yd0kjre] {
    font-size: 1.25em;
}

/*.myssy-select-box-container {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 0.5em;*/
/*}*/

/*.myssy-select-box {*/
/*    min-width: 150px;*/
/*    appearance: none;*/
/*    -webkit-appearance: none;*/
/*    -moz-appearance: none;*/
/*    background-color: light-dark(#009DC9,#152234);*/
/*    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 20 20' fill='none'><path d='M5 7l5 5 5-5' stroke='%23CBD5E1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");*/
/*    background-repeat: no-repeat;*/
/*    background-position: right 0.5em center;*/
/*    border: 1px solid rgba(255,255,255,.10);*/
/*    color: light-dark(#FFFFFF,#E5E7EB);*/
/*    padding: 0 .25em 0 0.5em;*/
/*    border-radius: 0.5em;*/
/*    font-size: 1em;*/
/*    font-weight: 600;*/
/*    outline: none;*/
/*    transition: border-color .15s ease, box-shadow .15s ease;*/
/*    !*box-shadow: 0 0.75em 1.25em rgba(0,0,0,.25);*!*/
/*}*/

/*.myssy-select-box:hover {*/
/*    border-color: rgba(255,255,255,.14);*/
/*}*/

/*.myssy-select-box:focus {*/
/*    border-color: rgba(103,212,255,.55);*/
/*    !*box-shadow: 0 0 0 3px rgba(103,212,255,.18), 0 10px 22px rgba(0,0,0,.30);*!*/
/*}*/

/*.myssy-select-box:disabled {*/
/*    opacity: .55;*/
/*    cursor: not-allowed;*/
/*}*/
/* /Components/Common/Intraday/IntradayInfo.razor.rz.scp.css */
.intraday-info-container[b-sbquo6uky7]{
    border-radius: 0.75em;
    border: 1px solid transparent;
    padding: 0.5em 0 0.5em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: light-dark(#F4F7F9,#1A2432);
    animation: CardIn-b-sbquo6uky7 0.3s ease-in-out;
}

.intraday-info-container:hover[b-sbquo6uky7] {
    border-color: #4a7ab5;
    box-shadow: 0 4px 20px rgba(15, 36, 81, 0.14), 0 1px 4px rgba(15, 36, 81, 0.08);
}

.intraday-info-container h3[b-sbquo6uky7] {
    font-size: 14px;
    color: light-dark(#000000, #FFFFFF);
    font-weight: 600;
    margin-bottom: 0.25em;
}

.intraday-info-container p[b-sbquo6uky7] {
    font-size: 12px;
    color: light-dark(#666666, #CCCCCC);
    line-height: 1.5;
}

@keyframes CardIn-b-sbquo6uky7 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/Common/Intraday/IntradayNewsFeed.razor.rz.scp.css */
.intraday-news-feed-container[b-349ff6rs2v] {
    background: conic-gradient(#243447 0deg, #243447 90deg, #1A2432 90deg, #1A2432 270deg, #243447 270deg);
    border-radius: 0.75em;
    border: 1px solid transparent;
    padding: 0.5em 0 0.5em 0;
}

.intraday-news-feed-container.light-theme[b-349ff6rs2v] {
    background: conic-gradient(#0087CB 0deg, #0087CB 90deg, #F4F7F9 90deg, #F4F7F9 270deg, #0087CB 270deg);
    border: 1px solid #0087CB;
}

.intraday-news-feed-container .intraday-news-feed-header[b-349ff6rs2v] {
    display: flex;
    padding: 0 0.25em 0.25em 0.25em;
    color: #fff;
    justify-content: space-between;
    font-size: 10.5pt;
    font-family: Verdana, sans-serif;
}

.intraday-news-feed-container .intraday-news-feed-header h3[b-349ff6rs2v] {
    font-family: inherit;
    font-size: 1.25em;
    color: #fff;
}

.intraday-news-feed-container .intraday-news-feed-sub-header[b-349ff6rs2v] {
    padding: 0 0.25em 0.25em 0.25em;
}


.intraday-news-feed-container .myssy-radio-main[b-349ff6rs2v] {
    display: flex;
    gap: 0.5em;
}

.intraday-news-feed-container .myssy-radio-main input[b-349ff6rs2v] {
    display: none;
}

.intraday-news-feed-container .myssy-radio-main label[b-349ff6rs2v] {
    padding: 0.25em 0.5em;
    font-size: 1em;
    font-weight: 600;
    border-radius: 0.5em;
    background: #152234;
    color: #E5E7EB;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.08);
    transition: all .15s ease;
}

.intraday-news-feed-container.light-theme .myssy-radio-main label[b-349ff6rs2v] {
    background: #0087CB;
    color: #FFFFFF;
}


.intraday-news-feed-container .myssy-radio-main label:hover[b-349ff6rs2v] {
    background: #1e3a5f;
}

.intraday-news-feed-container.light-theme .myssy-radio-main label:hover[b-349ff6rs2v] {
    background: #0076b0;
}

.intraday-news-feed-container .myssy-radio-main input:checked + label[b-349ff6rs2v] {
    background: #22C55E;
    color: #0f172a;
    border-color: transparent;
}

.intraday-news-feed-container.light-theme .myssy-radio-main input:checked + label[b-349ff6rs2v] {
    background: #000061;
    color: #FFFFFF;
}

.intraday-news-feed-container .myssy-radio-main input:disabled + label[b-349ff6rs2v] {
    background: #E5E7EB;
    color: #000000;
    cursor: not-allowed;
    border-color: transparent;
}

.intraday-news-feed-container .intraday-news-feed-items-container[b-349ff6rs2v] {
    list-style-type: none;
    padding: 0;
    margin: 0;
    min-height: 250px;
    max-height: 350px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable both-edges;
    scrollbar-color: #152234 transparent;
    background: #1A2432;
}

.intraday-news-feed-container.light-theme .intraday-news-feed-items-container[b-349ff6rs2v] {
    scrollbar-color: #000061 transparent;
    background: #F4F7F9;
}

.intraday-news-feed-container .news-feed-short-container .intraday-news-feed-items-container[b-349ff6rs2v] {
    max-height: 320px;
}

.intraday-news-feed-container .intraday-news-feed-item[b-349ff6rs2v] {
    background: #1A2432;
    color: #e5e7eb;
    font-size: 10.5pt;
    font-family: Verdana, sans-serif;
    padding: 0.25em 0.25em 0.25em 0.25em;
    cursor: pointer;
}

.intraday-news-feed-container.light-theme .intraday-news-feed-item[b-349ff6rs2v] {
    background: #F4F7F9;
    color: #1e293b;
}

.intraday-news-feed-container .intraday-news-feed-item:nth-child(2n)[b-349ff6rs2v] {
    background: #243447;
}

.intraday-news-feed-container.light-theme .intraday-news-feed-item:nth-child(2n)[b-349ff6rs2v] {
    background: #dbeafe;
}

.intraday-news-feed-container .intraday-news-feed-item > div[b-349ff6rs2v] {
    display: flex;
    justify-content: space-between;
    font-style: italic;
    padding-bottom: 0.1em;
    color: #9ca3af;
}

.intraday-news-feed-container.light-theme .intraday-news-feed-item > div[b-349ff6rs2v] {
    color: #475569;
}

.intraday-news-feed-container .intraday-news-feed-item b[b-349ff6rs2v] {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
}

.intraday-news-feed-container.light-theme .intraday-news-feed-item b[b-349ff6rs2v] {
    color: #1e3a8a;
}

.intraday-news-feed-container .intraday-news-feed-item p[b-349ff6rs2v] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.intraday-news-feed-container .intraday-news-feed-item > span[b-349ff6rs2v] {
    display: block;
    padding-bottom: 0.5em;
}

/* override tag styling */
.intraday-news-feed-container .intraday-news-feed-item[b-349ff6rs2v]  .tagsshow-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    margin-top: 0.2em;
}

.intraday-news-feed-container .intraday-news-feed-item[b-349ff6rs2v]  .tagsshow-sub {
    background-color: transparent !important;
    border: 1px solid rgb(34, 211, 238);
    padding: 0.1em 0.35em !important;
    border-radius: 0.25em;
    font-size: 0.7em;
    opacity: 0.8;
}

.intraday-news-feed-container.light-theme .intraday-news-feed-item[b-349ff6rs2v]  .tagsshow-sub {
    border: 1px solid rgb(34, 211, 238);
}
/* /Components/Common/LandingPage/ClickThroughLinks.razor.rz.scp.css */
.click-through-links h2[b-bc3kyvy69u]{
    align-self: center;
}

.click-through-links .click-through-links[b-bc3kyvy69u] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.click-through-links .click-through-links ul[b-bc3kyvy69u] {
    display: flex;
    justify-content: end;
    list-style: none;
    padding: 0;
    width: 95%;
    margin: auto;
}

.click-through-links .click-through-links div:first-child ul[b-bc3kyvy69u] {
    justify-content: start;
}
.click-through-links .click-through-links div:last-child ul li:not(:last-child)[b-bc3kyvy69u] {
    margin-right: 10px;
}
.click-through-links .click-through-links div:first-child ul li:not(:first-child)[b-bc3kyvy69u] {
    margin-left: 10px;
}

/* up to md */
@media (max-width: 767px) {
    .click-through-links .click-through-links ul[b-bc3kyvy69u],
    .click-through-links .click-through-links div:first-child ul[b-bc3kyvy69u] {
        justify-content: center;
    }
    .click-through-links .click-through-links div:last-child ul li[b-bc3kyvy69u],
    .click-through-links .click-through-links div:first-child ul li[b-bc3kyvy69u] {
        margin-left: 5px;
        margin-right: 5px;
    }
}

.click-through-links .click-through-links .btn.btn-info[b-bc3kyvy69u]{
    border-radius: 0.375rem;
    font-size: 18px;
    min-width: 85px;
}


/* /Components/Common/LandingPage/CustomCarousel.razor.rz.scp.css */
.carousel-container[b-qbswfpjsyy],
.carousel-item[b-qbswfpjsyy] {
    height: inherit !important;
}

.carousel[b-qbswfpjsyy] {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Add this line */
}

.carousel-indicators[b-qbswfpjsyy] {
    width: 100%;
    margin: 1rem 0;
}

.carousel-indicators > div[b-qbswfpjsyy] {
    /*border-radius: 5px;*/
    background-color: #000061;
}

.carousel-indicators [data-bs-target][b-qbswfpjsyy] {
    flex: inherit;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* Update the carousel container styles */
.carousel-container[b-qbswfpjsyy] {
    width: 100%;
    overflow: hidden; /* Add this line */
    border-top: 3px solid #000061;
    border-bottom: 3px solid #000061;
    background-color: white;
}

.carousel-container > div[b-qbswfpjsyy] {
    display: flex;
    width: 100%;
    gap: 0;
}

.carousel-item[b-qbswfpjsyy] {
    /*height: 400px;*/
    width: 100%;
}

/* Update sidebar styles */
.sidebar-container[b-qbswfpjsyy] {
    width: 35%;  /*Use percentage instead of fixed width */
    height: 400px !important; /* Match carousel height */
    margin: 0;
    overflow-y: auto;
    /*background-color: #fff !important;*/
    /*border: 1px solid lightgrey;*/
    /*border-radius: 10px;*/
    scrollbar-width: none; /* Optional: style scrollbar width */
    /*flex: 1 1 auto;*/ /* Fixed width of 300px */
    list-style: none;
    padding: 1rem 0 1rem 1rem;
}

.sidebar-item[b-qbswfpjsyy] {
    /* min-width: 100px; */
    /* height: 125px; */ /* Remove fixed height */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    transition: background 0.2s;
}

/*disable the cursor pointer for all elements inside sidebar item*/
.sidebar-item *[b-qbswfpjsyy] {
    cursor: default;
}

.sidebar-item a[b-qbswfpjsyy] {
    color: #000061;
}
.active-item[b-qbswfpjsyy] {
    color: #163E9F;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    background: #E9EFF9;
    width: calc(100% - 3px);  /*Use percentage instead of fixed width */
/*    min-width: 255px;
    max-width: 355px;*/
    padding: 3px 0 0 5px !important;
}


@media only screen and (max-width: 1500px) {
    .sidebar-container[b-qbswfpjsyy] {
        display: none !important;
        height: 300px !important;
        margin-bottom: 1rem;
    }

    .carousel-container[b-qbswfpjsyy] {
        /*grid-template-columns: 1fr; !* Stack on smaller screens *!*/
        /*height: auto;*/
    }

    .carousel figure[b-qbswfpjsyy] {
        height: 300px !important;
    }
}

@media (max-width: 768px) {
    
    .carousel-parent[b-qbswfpjsyy]{
        align-content: center;
    }
    
    .carousel-indicators[b-qbswfpjsyy] {
        padding-bottom: 7%;
    }

    .sidebar-container[b-qbswfpjsyy] {
        height: 200px !important;
    }

    .carousel figure[b-qbswfpjsyy] {
        height: 200px !important;
    }
}

@media (max-width: 1800px) {
    .sidebar-item[b-qbswfpjsyy] {
        height: unset;
    }
}

/* Responsive breakpoints */
@media (max-width: 992px) {
    .carousel-container > div[b-qbswfpjsyy] {
        flex-direction: column;
    }

    .sidebar-container[b-qbswfpjsyy] {
        width: 100%;
        max-width: none;
        margin-bottom: 1rem;
    }
    
    .carousel-parent[b-qbswfpjsyy] {
        width: 100% !important;
    }
    #customCarousel[b-qbswfpjsyy] {
     flex: unset !important;
    }
}

.managementPanelToggle[b-qbswfpjsyy] {
    height: 2.5rem;
    width: 2.75rem;
    background-color: #000061;
    color: white;
    border: 1px solid #000061;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.managementPanelToggle:hover[b-qbswfpjsyy] {
    background-color: white;
    color: #000061;
}

.carousel-parent[b-qbswfpjsyy] {
    position: relative;
}

.carousel-loading-desktop[b-qbswfpjsyy] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.carousel-loading-mobile[b-qbswfpjsyy] {
    display: none;
}

@media only screen and (max-width: 992px) {
    .carousel-loading-mobile[b-qbswfpjsyy] {
        display: block;
    }
    .carousel-loading-desktop[b-qbswfpjsyy]{
        display: none;
    }
}

.carousel figure[b-qbswfpjsyy] {
    min-height: 250px;
    height: 400px;
    /*width: 100%;*/
    margin: 0;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.carousel figure img[b-qbswfpjsyy] {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.carousel figure figcaption[b-qbswfpjsyy] {
    background-color: #000061;
    color: white;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    /*width: 75%;*/
    /*margin: auto;*/
}

.carousel-control-next-icon[b-qbswfpjsyy]{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000061'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-control-prev-icon[b-qbswfpjsyy]{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000061'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
/* /Components/Common/LandingPage/FaqAccordion.razor.rz.scp.css */
/* /Components/Common/LandingPage/Introduction.razor.rz.scp.css */
/* /Components/Common/LandingPage/LandingPage.razor.rz.scp.css */
/* ===========  =========== */
/* full screen              */
/* ===========  =========== */

/* dashboard container      */
/* =========== =========== */
.dashboard-container[b-fyzwyr2b6p] {
    display: grid;
    grid-template-columns: 1fr 450px;
    grid-template-rows: calc(100vh - 50px);
}
.dashboard-container.container-fluid[b-fyzwyr2b6p]{
    --bs-gutter-x: 0;
}

/* mid container            */
/* =========== =========== */
.dashboard-container.container-fluid > .mid-container[b-fyzwyr2b6p] {
    padding: 0.75rem 1.25rem 0 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dashboard-container.container-fluid > .mid-container[b-fyzwyr2b6p] {
    background: linear-gradient(var(--a), #1544A3, #1544A3, #0092D1, #0092D1, #1544A3);
    border-right: 3px solid #000061;
    transition: --a 0.5s;
    animation: mid-container-rotate-b-fyzwyr2b6p 240s linear infinite;
}

/* deep goes through to child components*/
.mid-container[b-fyzwyr2b6p]  h2,
.mid-container[b-fyzwyr2b6p]  .h1Grey,
.mid-container[b-fyzwyr2b6p]  .h2Grey,
.mid-container[b-fyzwyr2b6p]  .markets-graphs-container .table-grid-item-chart a,
.mid-container[b-fyzwyr2b6p]  .markets-graphs-container table.table-sm.table-hover tr {
    /* Inline styling on market graphs table cause me to put important here... */
    color: white !important;
    border-bottom: 1px solid transparent;
}
.mid-container[b-fyzwyr2b6p]  .markets-graphs-container table.table-sm.table-hover thead tr{
    /* Inline styling on market graphs table cause me to put important here... */
    border-bottom: 1px solid white !important;
}
.mid-container[b-fyzwyr2b6p]  .markets-graphs-container table.table-sm.table-hover tbody tr:hover{
    background-color: initial;
    border-bottom: 1px solid white;
}

/* right container          */
/* =========== ===========  */
.dashboard-container.container-fluid > .right-container[b-fyzwyr2b6p] {
    padding: 0.75rem 0.5rem 0 0.5rem;
}


/* ===========  =========== */
/* desktop - tankers        */
/* ===========  =========== */
@media (max-width: 1650px) {
    .dashboard-container.Url_Tankers[b-fyzwyr2b6p] {
        grid-template-columns: 100%;
    }
}

/* ===========  =========== */
/* laptop                   */
/* ===========  =========== */

@media (max-width: 1200px) {
    .dashboard-container[b-fyzwyr2b6p] {
        grid-template-columns: 100%;
    }
    
    .dashboard-container.container-fluid > .mid-container[b-fyzwyr2b6p] {
        border-right: 0;
        border-bottom: 3px solid #000061;
    }
}

/* ===========  =========== */
/* tablet / mobile          */
/* ===========  =========== */

/*Visible at lg*/
@media (max-width: 992px) {
    .dashboard-container[b-fyzwyr2b6p] {
        align-content: center;
        grid-template-rows: auto;
    }
    
    .dashboard-container.container-fluid > .mid-container > div.order-0[b-fyzwyr2b6p]{
        display: flex;
        justify-content: center;
    }
}

/* =========== ===========  */
/* animations               */
/* =========== ===========  */
@property --a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 122deg;
}

@keyframes mid-container-rotate-b-fyzwyr2b6p {
    0% {
        --a: 112deg;
    }
    50% {
        --a: 472deg;
    }
    100% {
        --a: 832deg;
    }
}
/* /Components/Common/LandingPage/LatestReports.razor.rz.scp.css */
.page-cont[b-nxz76jpek7] {
    --card-image-height: 15vh;
    --card-image-width: auto;
    --view-btn: 70px;
    --card-height: auto;
}

.cards-container[b-nxz76jpek7] {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: 6% 2%;
}

.cards-container.no-items-found[b-nxz76jpek7]{
    grid-template-columns: 25% 50% 25%;
    gap: 0;
}

.report-card[b-nxz76jpek7] {
    border: 1px solid lightgray;
    background: #fff;
    border-radius: 3px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden; /* Hides any extra content */
    padding: 0.5rem;
    box-shadow: 0 0 4px 1px lightgray;
}

.cards-container.no-items-found .report-card[b-nxz76jpek7] {
    display: block;
}

.report-card-left[b-nxz76jpek7] {
    box-sizing: border-box;
    width: 58%;
    margin: 1% 0 1% 1%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

/*for when image goes on the left*/
.report-card-image[b-nxz76jpek7] {
    overflow: hidden;
    height: var(--card-image-height);
}

.report-card-right[b-nxz76jpek7] {
    box-sizing: border-box;
    max-height: 100%;
    width: 42%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.report-title[b-nxz76jpek7] {
    height: 3.7rem;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.2;
    display: block;
    z-index: 3;
}

.cards-container.no-items-found .report-title[b-nxz76jpek7] {
    height: initial;
    
}

.report-view-button-div[b-nxz76jpek7] {
    height: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*margin: 5% 0 5% 0*/
}
.report-card-view-image[b-nxz76jpek7] {
    display: none;
    height: var(--card-image-height);
    width: var(--card-image-width);
    z-index: 0;
}
.report-view-time-cont[b-nxz76jpek7] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.report-view-button[b-nxz76jpek7] {
    border: 2px solid lightgray;
    z-index: 10;
    height: 4vh;
    width: var(--view-btn);
    margin: 0.4rem 0.8rem;
    background-color: #000061;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
}

.report-view-button:hover[b-nxz76jpek7] {
    background: white;
    color: #000061;
    border: 2px solid #000061;
}

.lastUpdatedSmall[b-nxz76jpek7] {
    color: #6c757d;
}

/*half screen*/
@media only screen and (max-width: 1590px) {
    .page-cont[b-nxz76jpek7] {
        --card-height: 17vh;
        --card-image-height: 12vw;
        --card-image-width: 17vw;
    }

    .latest-reports-container[b-nxz76jpek7] {
        padding: 0 5% 0 5%;
    }

    .report-card[b-nxz76jpek7] {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: var(--card-height);
        padding: unset;
        text-align: center;
        border: 6px solid white;
    }

    .report-card-image[b-nxz76jpek7] {
        display: none;
    }
    .report-view-button-div[b-nxz76jpek7] {
        height: 100%;
        margin: unset;
        position: relative;
        overflow: hidden;
    }
    .report-card-view-image[b-nxz76jpek7] {
        display: block;
        overflow: hidden;
    }
    .report-card-view-image img[b-nxz76jpek7] {
        height: auto;
        width: 100%;
        max-height: none;
        /* calc value gives percentage down the image for that transparency to reach */
        mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 1.0) calc(var(--card-image-height)*0.1),
        rgba(0, 0, 0, 0.6) calc(var(--card-image-height)*0.3),
        transparent calc(var(--card-image-height)*0.7)
        );
    }


    .report-view-time-cont[b-nxz76jpek7] {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .report-card-left[b-nxz76jpek7] {
        display: none;
    }

    .report-title[b-nxz76jpek7] {
        height: 2.5rem;
        align-items: center;
        padding: unset;
    }

    .report-card-right[b-nxz76jpek7] {
        height: 100%;
        width: 100%;
        justify-content: unset;
    }

    .lastUpdatedSmall[b-nxz76jpek7] {

    }
}
@media only screen and (max-width: 1200px) {
    .page-cont[b-nxz76jpek7] {
        --card-image-height: 15vh;
        --card-image-width: 24vw;
    }

}

@media only screen and (max-width: 992px) {
    .page-cont[b-nxz76jpek7] {
        --card-height: 26vh; /*calc(var(--card-image-height) - 10vh);*/
        --card-image-height: 15vh;
        --card-image-width: 42vw;
    }

    .cards-container[b-nxz76jpek7] {
        height: auto;
        padding: 0 1vw 2vh 1vw;
        gap: calc(0.15 * var(--card-image-height)) calc(0.05 * var(--card-image-width));
    }

    .report-title[b-nxz76jpek7] {
        max-height: unset;
        height: 3rem;
        width: 100%;
    }

    .report-card-view-image img[b-nxz76jpek7] {
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) calc(var(--card-image-height)*0.1), rgba(0, 0, 0, 0.7) calc(var(--card-image-height)*0.6), transparent calc(var(--card-image-height)*1) );
    }
}

@media only screen and (max-width: 500px) {
    .cards-container[b-nxz76jpek7] {
        --grid-cols: 2;
        gap: calc(0.15 * var(--card-image-height)) calc(0.08 * var(--card-image-width));
    }

    .report-card-right[b-nxz76jpek7] {
        padding: unset;
    }




    /* TO HIDE IMAGE ON MOBILE (comment out image and button styling directly above)
        .report-card-view-image {
        display: none;
    }

    .report-view-button {
        position: relative;
        transform: unset;
    }*/
}
/* /Components/Common/LandingPage/MainRatesGraph.razor.rz.scp.css */
.main-rates-graph h2[b-h8trmqopnq]{
    align-self: center;
}

.main-rates-graph .graph-container[b-h8trmqopnq] {
    /* 300 graph height + border*/
    min-height: 334px;
    border: 2px solid #000061;
    border-radius: 2px;
    width: 95%;
    margin: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main-rates-graph .graph-container .ssy-colour-dw[b-h8trmqopnq] {
    height: 30px;
}
.main-rates-graph .graph-container h3[b-h8trmqopnq] {
    color: white;
    text-align: center;
}

.main-rates-graph .graph-container .graph[b-h8trmqopnq] {
    background-color: white;
    width: 100%;
    height: 300px;
    aspect-ratio: 16 / 7;
    padding-top: 10px;
}
/* /Components/Common/LandingPage/MarketsClosingFwdPrices.razor.rz.scp.css */
.positive[b-wy4aauxe4z] {
    color: mediumseagreen !important;
}

.negative[b-wy4aauxe4z] {
    color: crimson !important;
}

.radio-btns[b-wy4aauxe4z]{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
    column-gap: 4px;
    row-gap: 4px;
    align-items: center;
}
 .radio-btns span[b-wy4aauxe4z] {
     display: inline-flex;
     justify-content: center;
 }

.radio-label[b-wy4aauxe4z] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 130px;
    height: 35px;
    padding: 8px 8px;
    margin: 0 !important;
}

@media only screen and (max-width: 1580px) {
    .radio-label[b-wy4aauxe4z] {
        width: 120px;
    }
}@media only screen and (max-width: 1400px) {
    .radio-label[b-wy4aauxe4z] {
        width: 110px;
    }
}
@media only screen and (max-width: 1200px) {
    .radio-label[b-wy4aauxe4z] {
        width: 130px;
    }
    .not-on-mobile[b-wy4aauxe4z] {
        display: none;
    }
}
@media only screen and (max-width: 990px) {
    .radio-label[b-wy4aauxe4z] {
        width: 130px;
    }
    .not-on-mobile[b-wy4aauxe4z] {
        display: none;
    }
}
@media only screen and (max-width: 780px) {
    .radio-label[b-wy4aauxe4z] {
        width: 130px;
    }
    .not-on-mobile[b-wy4aauxe4z] {
        display: none;
    }
}
/* /Components/Common/LandingPage/MarketsClosingSpotPrices.razor.rz.scp.css */
.positive[b-kf5d196uzr] {
    color: mediumseagreen !important;
}

.negative[b-kf5d196uzr] {
    color: crimson !important;
}
/* /Components/Common/LandingPage/MarketsGraphs.razor.rz.scp.css */
.markets-graphs-container[b-8ttfgq1fbp] {
    margin-bottom: 1rem;
}

.table-grid-item-chart[b-8ttfgq1fbp] {
    border: 3px solid #FFFFFF90;
    border-radius: 3px;
}

[b-8ttfgq1fbp] .h1Grey {
    font-family: 'Soehne Breit', Arial, serif;
    font-size: 14px;
    font-weight: bolder;
    color: #000061;
}


[b-8ttfgq1fbp] .h1Grey a {
    color: #000061;
    text-decoration: underline;
}


[b-8ttfgq1fbp] .h2Grey {
    font-family: 'Soehne Breit', Arial, serif;
    font-size: 12px;
    color: #000061;
}

[b-8ttfgq1fbp] .HighChart-Base {
    padding: 0.5rem 0;
    background: #FFFFFF;
}

.loading-overlay[b-8ttfgq1fbp] {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 50px;
    width: 100%;
    height: 100%;
    background-color: #405864;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-image: url('./assets/loadin.gif');
    background-repeat: no-repeat;
    background-position: center; /* Center the image */
    background-size: 20%; /* Make the image slightly smaller */
    opacity: 0.9; /* Make slightly opaque */
}

.loading-overlay[b-8ttfgq1fbp]::after {
    content: "Loading";
    position: absolute;
    top: calc(50% + 100px); /* Adjust this value to position the text below the logo */
    color: white;
    font-size: 1.5em;
    text-align: center;
}

/* /Components/Common/LandingPage/QuickLinks.razor.rz.scp.css */
.quick-links-container[b-gb6kseecxg] {
    display: grid;
    grid-template-columns: repeat(4, 125px);
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

ul[b-gb6kseecxg], li[b-gb6kseecxg] { 
    margin-left: 0; 
    padding-left: 0; 
    list-style: none;
}

a[b-gb6kseecxg] {
    text-decoration: none;
}

.grid-item[b-gb6kseecxg] {
    padding: 20px;
    width: 125px;
    height: 125px;
}

.grid-item:hover[b-gb6kseecxg] {
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    animation: pulse-b-gb6kseecxg 1s infinite;
}

.grid-item-structure[b-gb6kseecxg] {
    height: 100%;
    width: 100%;
    text-align: center;
    color: white;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

/* if it doesn't have an ssy colour class make the colour inherit as default */
.grid-item[class*="ssy-colour-"] .grid-item-structure[b-gb6kseecxg]{
    color: inherit;
}

.grid-item-structure img[b-gb6kseecxg] {
    max-width: 65%;
    height: auto;
    margin-bottom: 10px;
}
.grid-item-structure p[b-gb6kseecxg] {
    margin: 0;
    font-size: 15px;
    font-family: "Soehne", 'Franklin Gothic book', sans-serif;
}

@media (max-width: 992px) {
    .quick-links-container[b-gb6kseecxg] {
        grid-template-columns: repeat(2, 125px);
    }
}

@media (max-width: 576px) {
    .quick-links-container[b-gb6kseecxg] {
        grid-template-columns: 125px;
    }
}

@media (max-width: 1675px) {
    .quick-links-container[b-gb6kseecxg] {
        grid-template-columns: repeat(3, 125px);
    }
}

@keyframes pulse-b-gb6kseecxg {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
/* /Components/Common/Model/ModelJoinSelector.razor.rz.scp.css */
.ModelJoinSelector-Container[b-ozf3tro72y] {
    display: flex;
    width: 100%;
}

.ModelJoinSelector-Container > div[b-ozf3tro72y] {
    width: 40%;
}

.ModelJoinSelector-Container > div:nth-child(2n)[b-ozf3tro72y] {
    width: 20%;
    min-width: 20%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.ssy-modelTable.ssy-modelJoin .ssy-modelTable-container[b-ozf3tro72y] {
    height: 750px;
    width: 100%;
    overflow-y: scroll;
}

.ssy-modelTable.ssy-modelJoin table[b-ozf3tro72y] {
    border-bottom: 1px solid #000061;
    width: 100%;
}

.ModelJoinSelector-Container > div:nth-child(2n+1) .ssy-modelTable table[b-ozf3tro72y] {
    table-layout: fixed;
}

.ssy-modelTable.ssy-modelJoin thead[b-ozf3tro72y] {
    font-weight: bold;
    background-color: #000061;
    color: white;
    border-left: 1px solid #000061;
    border-right: 1px solid #000061;
    position: sticky;
    top: 0;
}

.ssy-modelTable.ssy-modelJoin tr.selectlist[b-ozf3tro72y] {
    border-top: 1px solid transparent;
}

.ssy-modelTable.ssy-modelJoin tr.selectlist:hover[b-ozf3tro72y] {
    border-top: 1px solid #000061;
    border-bottom: 1px solid #000061;
}

.ssy-modelTable.ssy-modelJoin td[b-ozf3tro72y] {
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    border-left: 1px solid #000061;
    border-right: 1px solid #000061;
    padding: 0.25rem;
    /*word-wrap: break-word;*/
    /*max-width: 75%;*/
}

.ssy-modelTable.ssy-modelJoin th[b-ozf3tro72y] {
    padding: 0.25rem;
}

.ssy-modelTable.ssy-modelJoin .pointer[b-ozf3tro72y] {
    cursor: pointer;
}
/* /Components/Common/Model/ModelTable.razor.rz.scp.css */
.ssy-modelTable[b-asxgl7xqfg] {
    display:flex;
    flex-direction:column;
}

.ssy-modelTable .ssy-modelTable-filters[b-asxgl7xqfg] {
    display: flex;
    flex-direction: row;
}

.ssy-modelTable .ssy-modelTable-filters input[type="search"][b-asxgl7xqfg],
.ssy-modelTable .ssy-modelTable-filters select[b-asxgl7xqfg] {
    border-radius: 10px;
    border: 1px solid #000061;
    margin: 0 10px 10px 0;
    height: 25px;
    padding: 0 5px;
}
.ssy-modelTable .ssy-modelTable-container[b-asxgl7xqfg] {
    height: 750px;
    overflow-y:auto;
    overflow-x: clip;
    width: 100%;
}

.ssy-modelTable table[b-asxgl7xqfg] {
    border-bottom: 1px solid #000061;
    width: 100%;
}
.ssy-modelTable table.ssy-modelTable-fixed[b-asxgl7xqfg]{
    table-layout: fixed;
}

.ssy-modelTable thead[b-asxgl7xqfg] {
    font-weight: bold;
    background-color: #000061;
    color: white;
    border-left: 1px solid #000061;
    border-right: 1px solid #000061;
    position: sticky;
    top: 0;
}

.ssy-modelTable tr.selectlist[b-asxgl7xqfg] {
    border-top: 1px solid transparent;
}

.ssy-modelTable tr.selectlist.selected[b-asxgl7xqfg] {
    background-color: #DEDEDE;
}

.ssy-modelTable tr.selectlist:hover[b-asxgl7xqfg] {
    border-top: 1px solid #000061;
    border-bottom: 1px solid #000061;
}

.ssy-modelTable td[b-asxgl7xqfg] {
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    border-left: 1px solid #000061;
    border-right: 1px solid #000061;
    padding: 0.25rem;
    /*max-width: 50%;*/
}
.ssy-modelTable th[b-asxgl7xqfg] {
    padding: 0.25rem;
    width:auto;
}
.ssy-modelTable .pointer[b-asxgl7xqfg] {
    cursor: pointer;
}
/* /Components/Common/PriceInput/EodPrices_Input_Fwd.razor.rz.scp.css */
.enterPrices table[b-8pwdc4cgxc] {
    width: 100%;
}


/*table.enterPrices > thead > tr {*/
.tableHeader[b-8pwdc4cgxc] {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

.enterPrices table > tbody > tr[b-8pwdc4cgxc] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: min-content !important;
    /*font-weight: bold;*/
}

.routeName[b-8pwdc4cgxc] {
    font-weight: bold;
    background-color: #000061;
    color: white;
    font-size: 120%;
    padding: 0 0 0 5px;
    align-content: center;
    height: 1.9em;
}

.fcdesc[b-8pwdc4cgxc] {
    text-align: left;
    padding-left: 5px;
    width: 12em;
}

.fcjointprice[b-8pwdc4cgxc] {
    text-align: left;
    padding-left: 5px;
    width: 10em;
}

.fcprice[b-8pwdc4cgxc] {
    text-align: right;
    width: 8em;
}

.negNum[b-8pwdc4cgxc] {
    color: red;
}

.posNum[b-8pwdc4cgxc] {
    color: darkgreen;
}

.percMove1[b-8pwdc4cgxc] {
    background-color: lemonChiffon;
}

.percMove2[b-8pwdc4cgxc] {
    background-color: gold;
}

.percMove3[b-8pwdc4cgxc] {
    background-color: orange;
}

.percMove4[b-8pwdc4cgxc] {
    background-color: red;
    color: white;
}

[b-8pwdc4cgxc] .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    /*        width: 100%;*/
}

[b-8pwdc4cgxc] .staleprice {
    background-color: LightYellow;
}

.calculatedprice[b-8pwdc4cgxc] {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    width: 100%;
    background-color: lightgray;
    padding-right: 5px;
}

.formulatooltip[b-8pwdc4cgxc] {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.formulatooltip .formulatooltiptext[b-8pwdc4cgxc] {
    visibility: hidden;
    white-space: nowrap;
    background-color: #000061;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 2px 5px 2px 5px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.formulatooltip:hover .formulatooltiptext[b-8pwdc4cgxc] {
    visibility: visible;
}


.localtooltip[b-8pwdc4cgxc] {
    /*        position: relative;*/
    cursor: pointer;
}


.localtooltip .tooltiptext[b-8pwdc4cgxc] {
    visibility: hidden;
    background-color: #000061;
    color: white;
    text-align: left;
    border-radius: 6px;
    border-color: black;
    border-width: medium;
    padding: 5px;
    /* Position the popupHistory */
    position: absolute;
    left: 6em;
    z-index: 1;
    opacity: 0;
    transition: opacity 5s;
}

.localtooltip .tooltiptext[b-8pwdc4cgxc]::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #545 transparent transparent;
}

.localtooltip:hover .tooltiptext[b-8pwdc4cgxc] {
    visibility: visible;
    transition: .25s all ease;
    transition-delay: 1.5s;
    opacity: 1;
}

@media screen and (max-width: 600px) {

    .hideOnSmallScreens[b-8pwdc4cgxc] {
        display: none;
    }
}
/* /Components/Common/PriceInput/EodPrices_Input_GroupFwd.razor.rz.scp.css */
table.enterPrices > thead > tr[b-bdcg11b33a], table.enterPrices tr.tableHeader[b-bdcg11b33a] {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

table.enterPrices > tbody > tr[b-bdcg11b33a] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: min-content !important;
}

.fcdesc[b-bdcg11b33a] {
    text-align: left;
    padding-left: 5px;
    width: 12em;
}

.fcprice[b-bdcg11b33a] {
    text-align: right;
    width: 8em;
}

.fcjointprice[b-bdcg11b33a] {
    text-align: right;
    width: 10em;
}

.negNum[b-bdcg11b33a] {
    color: red;
}

.posNum[b-bdcg11b33a] {
    color: darkgreen;
}

.percMove1[b-bdcg11b33a] {
    background-color: lemonChiffon;
}

.percMove2[b-bdcg11b33a] {
    background-color: gold;
}

.percMove3[b-bdcg11b33a] {
    background-color: orange;
}

.percMove4[b-bdcg11b33a] {
    background-color: red;
    color: white;
}

[b-bdcg11b33a] .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
}

[b-bdcg11b33a] .staleprice {
    background-color: LightYellow;
}

.calculatedprice[b-bdcg11b33a] {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    width: 100%;
    background-color: lightgray;
    padding-right: 5px;
}

.formulatooltip[b-bdcg11b33a] {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.formulatooltip .formulatooltiptext[b-bdcg11b33a] {
    visibility: hidden;
    white-space: nowrap;
    background-color: #000061;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 2px 5px 2px 5px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.formulatooltip:hover .formulatooltiptext[b-bdcg11b33a] {
    visibility: visible;
}

.hideOnSmallScreens[b-bdcg11b33a] {
    display: table-cell;
}

@media screen and (max-width: 768px) {
    .hideOnSmallScreens[b-bdcg11b33a] {
        display: none;
    }
}
/* /Components/Common/PriceInput/EodPrices_Input_Spot.razor.rz.scp.css */
table.enterPrices[b-nqnd3tnd87] {
    width: 100%;
}

table.enterPrices > thead > tr[b-nqnd3tnd87] {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

table.enterPrices > tbody > tr[b-nqnd3tnd87] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: min-content !important;
    /*font-weight: bold;*/
}


.fcdesc[b-nqnd3tnd87] {
    text-align: left;
    padding-left: 5px;
    width: 12em;
}

.fcprice[b-nqnd3tnd87] {
    text-align: right;
    width: 8em;
}

.negNum[b-nqnd3tnd87] {
    color: red;
}

.posNum[b-nqnd3tnd87] {
    color: darkgreen;
}

.percMove1[b-nqnd3tnd87] {
    background-color: lemonChiffon;
}

.percMove2[b-nqnd3tnd87] {
    background-color: gold;
}

.percMove3[b-nqnd3tnd87] {
    background-color: orange;
}

.percMove4[b-nqnd3tnd87] {
    background-color: red;
    color: white;
}

[b-nqnd3tnd87] .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    /*        width: 100%;*/
}

[b-nqnd3tnd87] .staleprice {
    background-color: LightYellow;
}

.calculatedprice[b-nqnd3tnd87] {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    width: 100%;
    background-color: lightgray;
    padding-right: 5px;
}

.formulatooltip[b-nqnd3tnd87] {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.formulatooltip .formulatooltiptext[b-nqnd3tnd87] {
    visibility: hidden;
    white-space: nowrap;
    background-color: #000061;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 2px 5px 2px 5px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.formulatooltip:hover .formulatooltiptext[b-nqnd3tnd87] {
    visibility: visible;
}
/* /Components/Common/PriceInput/IntradayPrice_Input_Fwd.razor.rz.scp.css */
.enterPrices table[b-go4s2nc9pa] {
    width: 100%;
}

/*table.enterPrices > thead > tr {*/
.tableHeader[b-go4s2nc9pa] {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

.enterPrices table > tbody > tr[b-go4s2nc9pa] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: min-content !important;
    /*font-weight: bold;*/
}

.routeName[b-go4s2nc9pa] {
    font-weight: bold;
    background-color: #000061;
    color: white;
    font-size: 120%;
    padding: 0 0 0 5px;
    align-content: center;
    height: 1.9em;
}

.fcdesc[b-go4s2nc9pa] {
    text-align: left;
    padding-left: 5px;
    width: 12em;
    cursor: pointer;
}

.fcjointprice[b-go4s2nc9pa] {
    text-align: left;
    padding-left: 5px;
    width: 10em;
}

.fcprice[b-go4s2nc9pa] {
    text-align: right;
    width: 8em;
}

.negNum[b-go4s2nc9pa] {
    color: red;
}

.posNum[b-go4s2nc9pa] {
    color: darkgreen;
}

.percMove1[b-go4s2nc9pa] {
    background-color: lemonChiffon;
}

.percMove2[b-go4s2nc9pa] {
    background-color: gold;
}

.percMove3[b-go4s2nc9pa] {
    background-color: orange;
}

.percMove4[b-go4s2nc9pa] {
    background-color: red;
    color: white;
}

[b-go4s2nc9pa] .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    /*        width: 100%;*/
}

[b-go4s2nc9pa] .staleprice {
    background-color: LightYellow;
}

.calculatedprice[b-go4s2nc9pa] {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    width: 100%;
    background-color: lightgray;
    padding-right: 5px;
}

@media screen and (max-width: 600px) {

    .hideOnSmallScreens[b-go4s2nc9pa] {
        display: none;
    }
}
/* /Components/Common/PriceInput/Uranium_ClientCurve_Input_Fwd.razor.rz.scp.css */
.enterPrices table[b-9txr8gih5r] {
    width: 100%;
}

.tableHeader[b-9txr8gih5r] {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

.routeName[b-9txr8gih5r] {
    font-weight: bold;
    background-color: #000061;
    color: white;
    font-size: 120%;
    padding: 0 0 0 5px;
    align-content: center;
    height: 1.9em;
}

.fcdesc[b-9txr8gih5r] {
    text-align: left;
    padding-left: 5px;
    width: 9em;
}

.fcprice[b-9txr8gih5r] {
    text-align: right;
    width: 14em;
}

.location-header[b-9txr8gih5r] {
    text-align: center;
}

.bid-offer-cell[b-9txr8gih5r] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    white-space: nowrap;
}

.separator[b-9txr8gih5r] {
    color: #666;
    font-size: 0.9em;
}

.copy-col[b-9txr8gih5r] {
    width: 2rem;
    text-align: center;
    padding: 0 4px;
}

.copy-btn[b-9txr8gih5r] {
    cursor: pointer;
    opacity: 0.4;
    display: inline-flex;
    align-items: center;
}

.copy-btn:hover[b-9txr8gih5r] {
    opacity: 1;
}

.localtooltip[b-9txr8gih5r] {
    position: relative;
    cursor: pointer;
}

.localtooltip .tooltiptext[b-9txr8gih5r] {
    visibility: hidden;
    background-color: #000061;
    color: white;
    text-align: left;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    left: 6em;
    z-index: 1;
    opacity: 0;
    transition: opacity 5s;
}

.localtooltip:hover .tooltiptext[b-9txr8gih5r] {
    visibility: visible;
    transition: .25s all ease;
    transition-delay: 1.5s;
    opacity: 1;
}

.enterPrices[b-9txr8gih5r]  .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 4rem;
    max-width: 6rem;
}

.enterPrices[b-9txr8gih5r]  .staleprice {
    background-color: LightYellow;
}

.prev-price[b-9txr8gih5r] {
    font-size: 0.72em;
    color: #aaa;
    text-align: right;
    white-space: nowrap;
}

.volume-row[b-9txr8gih5r] {
    background-color: #f5f5f5;
}

.price-row[b-9txr8gih5r] {
    border-top: 1px solid #d0d8e0;
}

tr.row-alt[b-9txr8gih5r] {
    background-color: #eef4f9;
}

tr.volume-row.row-alt[b-9txr8gih5r] {
    background-color: #e5edf5;
}

.volume-row-collapsed td[b-9txr8gih5r] {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

.vol-ref[b-9txr8gih5r] {
    font-size: 0.72em;
    color: #7a9eb5;
    text-align: right;
    white-space: nowrap;
    font-style: italic;
}

.vol-label[b-9txr8gih5r] {
    font-size: 0.75em;
    color: #666;
    font-style: italic;
}

[b-9txr8gih5r] .vol-input {
    text-align: right;
    font-size: 13px;
    min-width: 4rem;
    max-width: 6rem;
    color: #444;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}

[b-9txr8gih5r] .units-input {
    text-align: left;
    font-size: 13px;
    min-width: 2.5rem;
    max-width: 4rem;
    color: #444;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}
/* /Components/Common/Report/ReportEodSpotPrices_Plus.razor.rz.scp.css */
@media only screen and (max-width: 700px) {

    .not-on-mobile[b-9xdmijek9x] {
        display: none;
    }
}
/* /Components/Common/SavedSettings/SavedSettingsList.razor.rz.scp.css */
/* ====================================================
   Slender saved-settings list
   ==================================================== */

.saved-settings-wrap[b-kgk3ayjswz] {
    font-size: 0.85rem;
}

/* ---------- Toolbar (save row) ---------- */
.saved-settings-toolbar[b-kgk3ayjswz] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.saved-settings-name[b-kgk3ayjswz] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid #B5CBD6;
    border-radius: 3px;
    font-size: 0.85rem;
}

.saved-settings-btn-save[b-kgk3ayjswz] {
    flex: 0 0 auto;
    background-color: #163E9F;
    color: white;
    border: none;
    padding: 4px 16px;
    border-radius: 3px;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 5rem;
}

.saved-settings-btn-save:hover:not(:disabled)[b-kgk3ayjswz] {
    background-color: #009DC9;
}

.saved-settings-btn-save:disabled[b-kgk3ayjswz] {
    background-color: #B5CBD6;
    cursor: not-allowed;
}

.saved-settings-btn-save.replace[b-kgk3ayjswz] {
    background-color: #FF670F;
}

.saved-settings-btn-save.replace:hover:not(:disabled)[b-kgk3ayjswz] {
    background-color: #DB303A;
}

/* ---------- Sort + filter row ---------- */
.saved-settings-controls[b-kgk3ayjswz] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.saved-settings-sort-label[b-kgk3ayjswz] {
    color: #405864;
    margin-right: 2px;
    font-size: 0.8rem;
}

.saved-settings-pill[b-kgk3ayjswz] {
    background-color: white;
    color: #163E9F;
    border: 1px solid #B5CBD6;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
}

.saved-settings-pill.active[b-kgk3ayjswz] {
    background-color: #163E9F;
    color: white;
    border-color: #163E9F;
}

.saved-settings-filter[b-kgk3ayjswz] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid #B5CBD6;
    border-radius: 3px;
    font-size: 0.8rem;
    margin-left: 6px;
}

/* ---------- List ---------- */
.saved-settings-list[b-kgk3ayjswz] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #B5CBD6;
    border-radius: 3px;
    background-color: white;
}

/* Group header rows */
.saved-settings-group-header[b-kgk3ayjswz] {
    background-color: #E9EFF9;
    color: #163E9F;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-bottom: 1px solid #B5CBD6;
    border-top: 1px solid #B5CBD6;
}

.saved-settings-group-header:first-child[b-kgk3ayjswz] {
    border-top: none;
}

.saved-settings-row[b-kgk3ayjswz] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #E9EFF9;
    min-height: 22px;
}

.saved-settings-row:last-child[b-kgk3ayjswz] {
    border-bottom: none;
}

.saved-settings-row:hover[b-kgk3ayjswz] {
    background-color: #F5F7FA;
}

.saved-settings-load[b-kgk3ayjswz] {
    flex: 1 1 auto;
    background: none;
    border: none;
    text-align: left;
    padding: 2px 8px;
    cursor: pointer;
    color: #163E9F;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
    min-width: 0;
}

.saved-settings-load:hover[b-kgk3ayjswz] {
    text-decoration: underline;
}

.saved-settings-row-name[b-kgk3ayjswz] {
    flex: 1 1 auto;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.saved-settings-row-date[b-kgk3ayjswz] {
    flex: 0 0 auto;
    color: #808896;
    font-size: 0.72rem;
    font-weight: normal;
    white-space: nowrap;
}

.saved-settings-delete[b-kgk3ayjswz] {
    background: none;
    border: none;
    color: #DB303A;
    padding: 0 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
}

.saved-settings-delete:hover[b-kgk3ayjswz] {
    background-color: #DB303A;
    color: white;
}

.saved-settings-row-confirm[b-kgk3ayjswz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    width: 100%;
    background-color: #FFEBEE;
    color: #DB303A;
    font-size: 0.8rem;
}

.saved-settings-confirm-yes[b-kgk3ayjswz] {
    background-color: #DB303A;
    color: white;
    border: none;
    padding: 1px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
}

.saved-settings-confirm-no[b-kgk3ayjswz] {
    background-color: white;
    color: #405864;
    border: 1px solid #B5CBD6;
    padding: 1px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
}

.saved-settings-empty[b-kgk3ayjswz] {
    color: #808896;
    font-size: 0.85rem;
    margin: 6px 0;
    font-style: italic;
}

/* ---------- Modal ---------- */
.saved-settings-modal-backdrop[b-kgk3ayjswz] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

.saved-settings-modal[b-kgk3ayjswz] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 6px;
    width: min(520px, 92vw);
    z-index: 1050;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}

.saved-settings-modal-header[b-kgk3ayjswz] {
    background-color: #163E9F;
    color: white;
    padding: 8px 14px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.saved-settings-modal-close[b-kgk3ayjswz] {
    background: none;
    border: none;
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.saved-settings-modal-body[b-kgk3ayjswz] {
    padding: 12px 16px;
    max-height: 70vh;
    overflow-y: auto;
}

.saved-settings-modal-help[b-kgk3ayjswz] {
    margin: 0 0 10px 0;
    color: #405864;
    font-size: 0.85rem;
}

.saved-settings-modal-date-block[b-kgk3ayjswz] {
    border: 1px solid #B5CBD6;
    border-radius: 4px;
    padding: 6px 10px 8px 10px;
    margin-bottom: 10px;
}

.saved-settings-modal-date-block legend[b-kgk3ayjswz] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #163E9F;
    padding: 0 4px;
    width: auto;
}

.saved-settings-modal-radio-row[b-kgk3ayjswz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    margin: 3px 0;
    flex-wrap: wrap;
}

.saved-settings-modal-radio-row input[type="radio"][b-kgk3ayjswz] {
    margin-right: 4px;
}

.saved-settings-modal-num[b-kgk3ayjswz] {
    width: 4rem;
    padding: 2px 4px;
    border: 1px solid #B5CBD6;
    border-radius: 3px;
    text-align: right;
}

.saved-settings-modal-period[b-kgk3ayjswz] {
    padding: 2px 4px;
    border: 1px solid #B5CBD6;
    border-radius: 3px;
}

.saved-settings-modal-footer[b-kgk3ayjswz] {
    padding: 8px 14px;
    border-top: 1px solid #E9EFF9;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.saved-settings-btn-cancel[b-kgk3ayjswz] {
    background-color: white;
    color: #405864;
    border: 1px solid #B5CBD6;
    padding: 4px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
}

.saved-settings-btn-confirm[b-kgk3ayjswz] {
    background-color: #163E9F;
    color: white;
    border: none;
    padding: 4px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
}

.saved-settings-btn-confirm:hover[b-kgk3ayjswz] {
    background-color: #009DC9;
}
/* /Components/Common/SsyAutoComplete.razor.rz.scp.css */
.ssy-autocomplete[b-0266la8d2r] {
    position: relative;
    width: 100%;
}

.ssy-autocomplete .ssy-autocomplete-input[b-0266la8d2r] {
    padding-right: 2.75rem;
}

.ssy-autocomplete > .ssy-autocomplete-clear-btn[b-0266la8d2r] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(-5%) translateY(-50%);
    background-color: unset;
    z-index: 10;
    border: none;
    display: none;
}

.ssy-autocomplete > .ssy-autocomplete-clear-btn:hover[b-0266la8d2r] {
    color: #DB303A;
}

.ssy-autocomplete:hover .ssy-autocomplete-clear-btn[b-0266la8d2r] {
    display: inline-block;
}


.ssy-autocomplete > .ssy-autocomplete-dropdown[b-0266la8d2r] {
    position: absolute;
    z-index: 10;
    inset: 0 auto auto 0;
    margin: 0;
    transform: translate(0px, 51px);
    list-style: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    display: none;
}

.ssy-autocomplete:hover > .ssy-autocomplete-dropdown[b-0266la8d2r],
.ssy-autocomplete:focus > .ssy-autocomplete-dropdown[b-0266la8d2r] {
    display: block;
}

.ssy-autocomplete > .ssy-autocomplete-dropdown li:not(.ssy-autocomplete-non-clickable):hover[b-0266la8d2r] {
    cursor: pointer;
    color: #212529;
    background-color: #f8f9fa;
}
/* /Components/Common/SsyBlobStorageUpdate.razor.rz.scp.css */
.blobupload-customhover[b-szp1erpvdt] {
    border: 1px solid #000097;
    border-radius: 4px;
}


.blobupload-container[b-szp1erpvdt] {
    max-width: 700px; /* Adjust based on preference */
    margin: auto;
    padding: 20px;
    background-color: #f4f4f4; /* Light grey background */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Soft shadow for depth */
}



/*.fileupload-container .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 50px;
    width: 100%;
    height: 100%;
    background-color: #405864;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-image: url('./assets/loadin.gif');
    background-repeat: no-repeat;
    background-position: center;*/ /* Center the image */
    /*background-size: 20%;*/ /* Make the image slightly smaller */
    /*opacity: 0.9;*/ /* Make slightly opaque */
/*}*/

/*.fileupload-container .loading-overlay::after {
    content: "Loading";
    position: absolute;
    top: calc(50% + 100px);*/ /* Adjust this value to position the text below the logo */
    /*color: white;
    font-size: 1.5em;
    text-align: center;
}*/

/*.fileupload-container ::deep .btn.btn-primary {
    display: inline-flex;
    column-gap: 5px;
    align-items: center;
}

.fileupload-container ::deep .quickgrid{
    width: 100%;
}
.fileupload-container ::deep .quickgrid td {
    padding: 5px 15px;*/ /* Adjust as needed */
    /*text-align: center;
}*/
/*thead should be sticky*/
/*.fileupload-container ::deep .quickgrid thead {
    position: sticky;
    top: 0;
    background-color: #fff;
    text-align: center;
    width: 100%;
    z-index: 1;
}

.fileupload-container ::deep .quickgrid thead .col-title {
    justify-content: center;   
}

.fileupload-container ::deep .quickgrid thead .col-title:has(.sort-indicator){
    justify-content: left;
}

.fileupload-container ::deep .quickgrid tr:nth-child(even):has(td > *) {
    background-color: #f2f2f2;*/ /* This is a light grey color */
/*}

.fileupload-container ::deep .quickgrid .name-column {
    width: 350px;
    text-overflow: ellipsis;
}

.fileupload-container ::deep .quickgrid .date-column {
    width: 100px;
}

.fileupload-container ::deep .quickgrid .int-ext-column {
    width: 50px;
}

.fileupload-container ::deep .quickgrid .search-box {
    margin: 5px;
    z-index: 1;
    position: relative;
}

.fileupload-container .roles-container {
    border: 1px solid black; 
    margin: 10px; 
    border-radius: 10px; 
    background-color: #f2f2f2;
    display: flex;
    flex-direction: row;
    padding: 0.5rem;
}

@media (max-width: 1300px) {
    .fileupload-container h1 > span.hide-mobile{
        display: none;
    }

    .fileupload-container ::deep .quickgrid .hide-mobile {
        display: none;
    }
    .fileupload-container .roles-container {
        flex-direction: column;
    }
}

::deep .font-weight-bold {
    font-weight: bold;
}*/


[b-szp1erpvdt] .edit-form-label {
    display: block; /* Ensure labels are block level for consistent alignment */
    margin-bottom: 5px; /* Space between label and input */
    color: #333; /* Dark grey color for text */
    font-weight: bold;
}

[b-szp1erpvdt] .edit-form-input, [b-szp1erpvdt] .edit-form-select {
    width: 100%; /* Full width inputs */
    padding: 8px;
    margin-bottom: 20px; /* Space between form fields */
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 4px; /* Slightly rounded corners */
}

[b-szp1erpvdt] .edit-form-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

[b-szp1erpvdt] .upload-modal-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

[b-szp1erpvdt] .upload-modal-header {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

[b-szp1erpvdt] .upload-modal-body {
    padding: 10px;
}

[b-szp1erpvdt] .upload-modal-select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

[b-szp1erpvdt] .upload-modal-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

[b-szp1erpvdt] .upload-modal-footer {
    text-align: center;
    margin-top: 20px;
}



[b-szp1erpvdt] .validation-summary {
    color: red;
    list-style-type: none;
    padding: 0;
}

/* reset disabled styling cause ugly */
[b-szp1erpvdt] .form-control:disabled, .form-control[readonly][b-szp1erpvdt] {
    color: #212529;
    background-color: #e9ecef;
}

/* email modal */
[b-szp1erpvdt] .role-select-btn:hover {
    font-weight: bold;
}
[b-szp1erpvdt] .role-select-btn.add:hover {
    background-color: #8CD47E;
    font-weight: normal;
}
[b-szp1erpvdt] .role-select-btn.remove:hover {
    background-color: #FF6961;
    font-weight: normal;
}
[b-szp1erpvdt] .selected-role {
    font-weight: bold;
    text-decoration: underline;
}
/* /Components/Common/SSYFTS.razor.rz.scp.css */
/* DESKTOP SEARCH */
/* ================ */
.search-bar-container[b-vedyjdpubc]  .input-group{
    margin: 0;
}
/* search bar input */
.search-bar-container[b-vedyjdpubc]  .input-group > .search-bar.form-control {
    padding: 0.4rem;
    padding-right: 1.5rem !important;
    font-size: 0.9rem;
    line-height: 1.1;
    border-radius: 0.3rem;
    border-color: transparent;
    background-color: white;
    color: black;
}

.search-bar-container[b-vedyjdpubc]  .input-group > .search-bar.form-control::placeholder {
    color: #999999;
}

.search-bar-container[b-vedyjdpubc]  .input-group > .search-bar.form-control:focus{
    color: black;
    background-color: white;
    
}
.search-bar-container[b-vedyjdpubc]  .input-group > .search-bar.form-control:focus-visible {
    outline: black auto 1px;
}
/* cancel button */
.search-bar-container[b-vedyjdpubc]  .input-group > button.btn {
    padding: 0.2rem;
    font-size: 0.8rem;
    background: transparent;
    color: #000061 !important;
    right: 0.3rem !important;
}

/* dropdown list */
.search-bar-container[b-vedyjdpubc]  .input-group > ul.dropdown-menu.autocomplete-list {
    width: 195%;
    transform: translate(-25%,2.8rem) !important;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: #000061 transparent;
    inset: inherit !important;
}

/* MOBILE SEARCH */
/* ================ */
.mobile-menu-search.search-container[b-vedyjdpubc] {
    width: 100%;
    height: 48px;
}
/* search bar input */
.mobile-menu-search .search-bar-container[b-vedyjdpubc]  .input-group > .search-bar.form-control {
    width: 100%;
    height: 48px;
    line-height: 1.1;
    border-radius: 0 !important;
    border: none;
    border-color: transparent;
    background-color: #B5CBD6;
    color: #000061;
    font-size: 1.05rem;
    padding: 0.4rem 0.8rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

.mobile-menu-search .search-bar-container[b-vedyjdpubc]  .input-group > .search-bar.form-control::placeholder {
    color: #000061;
}

.mobile-menu-search .search-bar-container[b-vedyjdpubc]  .input-group > .search-bar.form-control:focus{
    background-color: #B5CBD6;
    color: #000061;
    border: none;
    box-shadow: none;
}
/* cancel button */
.mobile-menu-search .search-bar-container[b-vedyjdpubc]  .input-group > button.btn {
    padding: 0.2rem;
    font-size: 1.05rem;
    background: transparent;
    color: #000061 !important;
    right: 1rem !important;
    top: 12px !important;
}
/* dropdown list */
.mobile-menu-search .search-bar-container[b-vedyjdpubc]  .input-group > ul.dropdown-menu.autocomplete-list {
    width: 98%;
    transform: translate(0,3.7rem) !important;
    inset: inherit !important;
    scrollbar-width: auto;
}
/* /Components/Common/SsyRichText_Adv.razor.rz.scp.css */
.ssy-rich-text-adv-container[b-0hb8e4nhjx] {
    height: 100%;
    width: 100%;
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ql-container {
    height: calc(100% - 42px); /* 100% - height of 'ql-toolbar' */
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 15px !important;
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ssy-rich-text-adv-character-count {
    padding: 4px 8px;
    font-size: 0.85em;
    color: #666;
    text-align: right;
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ssy-rich-text-adv-character-count.over-limit {
    color: #dc3545;
    font-weight: bold;
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  .elementToFadeOutAndIn {
    -webkit-animation: fade-in-out 2s linear forwards;
    animation: fade-in-out-b-0hb8e4nhjx 2s linear forwards;
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  aia {
     background-color: #AAFF00;
 }

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  aix {
    background-color: #FFD025;
    text-decoration: line-through;
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ql-toolbar.ql-snow .ql-formats {
    margin-right: 8px;
}

@-webkit-keyframes fade-in-out {
    0%, 100% {
        opacity: 1;
    }

    10% {
        opacity: 0;
    }
}

@keyframes fade-in-out-b-0hb8e4nhjx {
    0%, 100% {
        opacity: 1;
    }

    10% {
        opacity: 0;
    }
}

@media only screen and (max-width: 1000px) {
    .ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ql-container {
        height: calc(100% - 64px); /* 100% - height of 'ql-toolbar' */
    }
}

@media only screen and (max-width: 600px) {
    .ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ql-container {
        height: calc(100% - 84px); /* 100% - height of 'ql-toolbar' */
    }
}

@media only screen and (max-width: 488px) {
    .ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ql-container {
        height: calc(100% - 120px); /* 100% - height of 'ql-toolbar' */
    }
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ssy-ai-compliance-form {
    margin: 0;
    padding: 0;
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ssy-ai-compliance-card {
    background: #f8fafc;
    border-radius: 8px;
    padding: 24px 20px 20px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ssy-ai-compliance-text {
    font-size: 1.1rem;
    margin-bottom: 12px;
    text-align: center;
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ssy-ai-compliance-fineprint {
    color: #888;
    font-size: 0.92rem;
    margin-bottom: 20px;
    text-align: center;
}

.ssy-rich-text-adv-container[b-0hb8e4nhjx]  .ssy-ai-compliance-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    width: 100%;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.grid-main[b-zmueg8uke2] {
    display: grid;
    grid-template-columns: auto;
}

    .grid-main.grid-main-landing[b-zmueg8uke2] {
        grid-template-columns: 1fr 5fr;
    }

        .grid-main.grid-main-landing[b-zmueg8uke2]  nav.sidebar-desktop {
            margin-top: 50px;
            position: static;
        }

    .grid-main .body-main[b-zmueg8uke2] {
        margin-top: 51px;
        margin-left: 10px;
        padding: 0 1rem;
        overflow-y: auto;
        height: calc(100vh - 51px);
    }

    .grid-main.grid-main-landing .body-main[b-zmueg8uke2] {
        margin-top: 50px;
        margin-left: 0;
        padding: 0;
        height: calc(100vh - 50px);
        border-left: 3px solid #000061;
    }

#blazor-error-ui[b-zmueg8uke2] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-zmueg8uke2] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


@media (max-width: 950px) {
    .grid-main[b-zmueg8uke2],
    .grid-main.grid-main-landing[b-zmueg8uke2] {
        grid-template-columns: auto;
    }

        .grid-main .body-main[b-zmueg8uke2] {
            margin-left: 2px;
            padding: 0;
        }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.ssy-navbar-container[b-ezkrucvdjd]{
    /*background: linear-gradient(to right, #003F9A, #1544A3,#0092D1,#0092D1);*/
    background: #000061;
    color: white;
    position: fixed;
    z-index: 5;
    top: 0;
    height: 50px;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
}

/* ssy-navbar-title */
.ssy-navbar-title[b-ezkrucvdjd] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}
.ssy-navbar-title .ssy-nav-Logo[b-ezkrucvdjd] {
    background-image: url('./assets/Logo/SSYLogo_1Line_White_M.png');
    background-repeat: no-repeat;
    width: 80px;
    height: 30px;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: white;
    /*check aspect ratio*/
}
.ssy-navbar-title .ssy-nav-Logo:not(.no-wave-animation):hover[b-ezkrucvdjd] {
    animation: nav-ssyLogo-colorWave-b-ezkrucvdjd 6s ease-in-out infinite alternate;
}

.ssy-navbar-title .navigator-text[b-ezkrucvdjd]{
    font-size: 2.3rem;
    font-family: 'Soehne Breit', cursive;
    /*  wider spacing*/
    letter-spacing: 0.15em;
    color: white;
    font-weight: 400;
    text-decoration: none;
    margin-bottom: 0;
    margin-left: 5px;
    position: relative;
}

    .ssy-navbar-title .navigator-text:hover[b-ezkrucvdjd] {
        animation: nav-ssyLogo-colorWave-b-ezkrucvdjd 6s ease-in-out infinite alternate;
    }

.ssy-navbar-title .navigator-text .navigator-text-half[b-ezkrucvdjd]{
    display: none;
}
.ssy-navbar-title .navigator-text .navigator-text-full[b-ezkrucvdjd]{
    display: block;
}

.navigator-notice-text-full[b-ezkrucvdjd] {
    display: block;
}

.demo-environment-text[b-ezkrucvdjd] {
    background-color: red;
    border-radius: 5px;
    cursor: default;
    align-self: start;
    margin-top: 1.5%;
}

.ssy-navbar-title .navigator-environment[b-ezkrucvdjd]{
    margin: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
}

.ssy-navbar-title .navigator-environment  > span[b-ezkrucvdjd]{
    line-height: 1;
    font-weight: bold;
    color: #24DEBD;
}

.ssy-navbar-title .navigator-environment  > span:last-child[b-ezkrucvdjd]{
    color: #00E2FD;
}


/* Always show by default */
.ssy-navbar-desktop[b-ezkrucvdjd] {
    display: flex !important;
}

/* Hide below 1000px */
/* Hide desktop navbar below 950px */
@media (max-width: 950px) {
    .ssy-navbar-desktop[b-ezkrucvdjd] {
        display: none !important;
    }
}

/* Hamburger button visibility */
@media (min-width: 951px) {
    .ssy-navbar-mobile[b-ezkrucvdjd] {
        display: none !important;
    }
}

@media (max-width: 950px) {
    .ssy-navbar-mobile[b-ezkrucvdjd] {
        display: inline-block !important;
    }
}

@media only screen and (max-width: 1570px) {
    .ssy-navbar-title .navigator-text[b-ezkrucvdjd] {
        font-size: 1.3rem;
        margin-left: -10px;
        margin-top: 5px;
        display: block;
    }
    .ssy-navbar-title .navigator-text .navigator-text-half[b-ezkrucvdjd]{
        display: block;
    }
    .ssy-navbar-title .navigator-text .navigator-text-full[b-ezkrucvdjd]{
        display: none;
    }
    .navigator-notice-text-full[b-ezkrucvdjd]{
        display: none;
    }
}

/* ssy-navbar */
.ssy-navbar[b-ezkrucvdjd]{
    display: inline-flex;
    align-items: center;
}

/* mobile - animated hamburger / X */
.ssy-navbar .ssy-navbar-mobile[b-ezkrucvdjd] {
    border: 0;
    background: transparent;
    color: white;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
.ssy-navbar .ssy-navbar-mobile:hover[b-ezkrucvdjd],
.ssy-navbar .ssy-navbar-mobile:focus-visible[b-ezkrucvdjd] {
    background-color: rgba(255,255,255,0.08);
    outline: none;
}
.ssy-navbar .ssy-navbar-mobile.is-open[b-ezkrucvdjd] {
    background-color: rgba(0,226,253,0.12);
}

.ssy-navbar .ssy-navbar-mobile .hamburger-bars[b-ezkrucvdjd] {
    position: relative;
    width: 22px;
    height: 16px;
    display: inline-block;
}
.ssy-navbar .ssy-navbar-mobile .hamburger-bars > span[b-ezkrucvdjd] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1),
                top 220ms cubic-bezier(.2,.8,.2,1) 100ms,
                opacity 120ms ease 100ms,
                background-color 200ms ease;
}
.ssy-navbar .ssy-navbar-mobile .hamburger-bars > span:nth-child(1)[b-ezkrucvdjd] { top: 0; }
.ssy-navbar .ssy-navbar-mobile .hamburger-bars > span:nth-child(2)[b-ezkrucvdjd] { top: 7px; }
.ssy-navbar .ssy-navbar-mobile .hamburger-bars > span:nth-child(3)[b-ezkrucvdjd] { top: 14px; }

/* Open state - morph to X */
.ssy-navbar .ssy-navbar-mobile.is-open .hamburger-bars > span[b-ezkrucvdjd] {
    transition: top 220ms cubic-bezier(.2,.8,.2,1),
                transform 220ms cubic-bezier(.2,.8,.2,1) 100ms,
                opacity 120ms ease,
                background-color 200ms ease;
    background-color: #00E2FD;
}
.ssy-navbar .ssy-navbar-mobile.is-open .hamburger-bars > span:nth-child(1)[b-ezkrucvdjd] {
    top: 7px;
    transform: rotate(45deg);
}
.ssy-navbar .ssy-navbar-mobile.is-open .hamburger-bars > span:nth-child(2)[b-ezkrucvdjd] {
    opacity: 0;
}
.ssy-navbar .ssy-navbar-mobile.is-open .hamburger-bars > span:nth-child(3)[b-ezkrucvdjd] {
    top: 7px;
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .ssy-navbar .ssy-navbar-mobile .hamburger-bars > span[b-ezkrucvdjd] {
        transition: none;
    }
}

/* desktop */
.ssy-navbar .ssy-navbar-desktop[b-ezkrucvdjd]{
    align-items: center;
    flex-direction: row;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    font-family: 'Soehne Breit', 'Franklin Gothic Book', 'Arial Narrow', Arial, sans-serif;
    font-size: 1rem;
}

@media (max-width: 1650px) {
    .ssy-navbar-desktop[b-ezkrucvdjd] {
        font-size: 9pt !important;
    }
}

@media (max-width: 1200px) {
    .ssy-navbar-desktop[b-ezkrucvdjd] {
        font-size: 8.5pt !important;
    }
}

@media (max-width: 1050px) {
    .navigator-text-half[b-ezkrucvdjd] {
        font-size: 8pt !important;
    }

    .navigator-environment[b-ezkrucvdjd] {
        display: none !important;
    }
}


/* Nav Items */
/* Deep needed here as Nav-link is a different component */
.ssy-navbar .ssy-navbar-desktop[b-ezkrucvdjd]  .ssy-nav-link{
    padding: 0.5rem;
    color: white;
    text-decoration: none;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    display: block;
}

.ssy-navbar .ssy-navbar-desktop[b-ezkrucvdjd]  .ssy-nav-link[data-ssy-disabled="true"] {
    pointer-events: none;
    color: #B5CBD6;
}

.ssy-navbar .ssy-navbar-desktop[b-ezkrucvdjd]  .ssy-nav-link.ssy-nav-link-icon {
    width: 2.5rem;
}

.ssy-navbar .ssy-navbar-desktop[b-ezkrucvdjd]  .ssy-nav-link.ssy-nav-link-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ssy-navbar .ssy-navbar-desktop[b-ezkrucvdjd]  .ssy-nav-link:not(.ssy-nav-link-fts).ssy-nav-link-active,
.ssy-navbar .ssy-navbar-desktop[b-ezkrucvdjd]  .ssy-nav-link:not(.ssy-nav-link-fts):focus,
.ssy-navbar .ssy-navbar-desktop[b-ezkrucvdjd]  .ssy-nav-link:not(.ssy-nav-link-fts):active,
.ssy-navbar .ssy-navbar-desktop[b-ezkrucvdjd]  .ssy-nav-link:not(.ssy-nav-link-fts):hover {
    border-bottom: 1px solid white;
}

/* FTS */
@media (max-width: 1350px) {
    /* Hide desktop search bar */
    .ssy-navbar .ssy-navbar-desktop[b-ezkrucvdjd]  .search-container {
        display: none;
    }
    .ssy-navbar .ssy-navbar-desktop .nav-divider[b-ezkrucvdjd] {
        display: none;
    }
}


/* ANIMATIONS */
@keyframes nav-ssyLogo-colorWave-b-ezkrucvdjd {
    /* https://meyerweb.com/eric/tools/color-blend/#FFFFFF:000061:4:hex */
    0% {
        filter: invert(0);
    }

    50% {
        filter: invert(20%) ;
    }

    100% {
        filter: invert(0);
    }
}


/* ANIMATIONS */
@keyframes nav-ssyLogo-colorWave_old-b-ezkrucvdjd {
    /* https://meyerweb.com/eric/tools/color-blend/#FFFFFF:000061:4:hex */
    0% {
        /* #FFFFFF */
        filter: invert(1);
    }

    10% {
        /* #CCCCDF */
        filter: invert(95%) sepia(4%) saturate(3190%) hue-rotate(188deg) brightness(94%) contrast(85%);
    }

    20% {
        /* #9999C0 */
        filter: invert(72%) sepia(13%) saturate(648%) hue-rotate(202deg) brightness(84%) contrast(88%);
    }

    30% {
        /* #6666A0 */
        filter: invert(41%) sepia(7%) saturate(2740%) hue-rotate(202deg) brightness(96%) contrast(86%);
    }

    40% {
        /* #333381 */
        filter: invert(24%) sepia(9%) saturate(3982%) hue-rotate(202deg) brightness(96%) contrast(105%);
    }

    50% {
        /* #000061 */
        filter: invert(12%) sepia(77%) saturate(3396%) hue-rotate(235deg) brightness(67%) contrast(127%);
    }

    60% {
        /* #333381 */
        filter: invert(24%) sepia(9%) saturate(3982%) hue-rotate(202deg) brightness(96%) contrast(105%);
    }

    70% {
        /* #6666A0 */
        filter: invert(41%) sepia(7%) saturate(2740%) hue-rotate(202deg) brightness(96%) contrast(86%);
    }

    80% {
        /* #9999C0 */
        filter: invert(72%) sepia(13%) saturate(648%) hue-rotate(202deg) brightness(84%) contrast(88%);
    }

    90% {
        /* #CCCCDF */
        filter: invert(95%) sepia(4%) saturate(3190%) hue-rotate(188deg) brightness(94%) contrast(85%);
    }

    100% {
        /* #FFFFFF */
        filter: invert(1);
    }
}


@keyframes pulse-b-ezkrucvdjd {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
        color: red;
        background-color: white;
        border-radius: 8px;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@keyframes pulse-small-text-b-ezkrucvdjd {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
        color: red;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.navigator-text.pulse[b-ezkrucvdjd]
{
    animation: pulse-b-ezkrucvdjd 3s infinite;
}
.navigator-notice-text-full[b-ezkrucvdjd]{
    animation: pulse-small-text-b-ezkrucvdjd 3s infinite;
}

/* ---- Notification delete ("x") -------------------------------------------------------
   The x is a sibling of the notification body, not a child of it, so clicking it can never
   trigger the notification's own link navigation. Positioned over the top-right of the alert. */
.ssy-notification-item[b-ezkrucvdjd] {
    position: relative;
}

.ssy-notification-item .ssy-notification-delete[b-ezkrucvdjd] {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    padding: 0.25rem;
    opacity: 0.45;
    transition: opacity 0.15s ease-in-out;
}

.ssy-notification-item .ssy-notification-delete:hover[b-ezkrucvdjd],
.ssy-notification-item .ssy-notification-delete:focus-visible[b-ezkrucvdjd] {
    opacity: 1;
}

/* Keep the subject clear of the x. */
.ssy-notification-item .alert-heading[b-ezkrucvdjd] {
    padding-right: 2rem;
}
/* /Components/Layout/NavSidebarDesktop.razor.rz.scp.css */
/* CONTAINER */
nav.sidebar-desktop[b-v4oekr77js] {
    position: fixed;
    top: 50px;
    height: calc(100vh - 50px);
    max-width: 350px;
    display: none;
    flex-direction: row;
    z-index: 950;
}

nav.sidebar-desktop-landing[b-v4oekr77js]{
    height: calc(100vh - 50px);
    max-width: 350px;
    display: flex;
    flex-direction: row;
    margin-top: 50px;
}

@media (max-width: 950px) {
    nav.sidebar-desktop[b-v4oekr77js],
    nav.sidebar-desktop-landing[b-v4oekr77js] {
        display: none !important;
    }
}

.sidebar-menu[b-v4oekr77js] {
    background-color: #fdfdfd;
    height: calc(100vh - 50px);
}

.collapsed-menu[b-v4oekr77js] {
    width: 0;
    visibility: hidden;
    transition: visibility 50ms linear 75ms, width 250ms linear 50ms ; /* Add transition for smooth movement */
}

.expanded-menu[b-v4oekr77js] {
    width: 350px;
    position: relative;
    visibility: inherit;
    overflow-y: auto;
    padding-right: 0.25rem;
    /*hide the scrollbar*/
    scrollbar-width: thin;
    /*colour the scrollbar - works for everything but safari */
    scrollbar-color: #000061 transparent;
    /* ensure the space stays the same regardless if the scrollbar is needed*/
    scrollbar-gutter: stable;
    transition: visibility 50ms linear 225ms, width 250ms linear 50ms ; /* Add transition for smooth movement */
    padding-bottom: 1.5rem;
}

.sidebar-desktop-landing .expanded-menu[b-v4oekr77js] {
    width: 325px;
}

/* Apply custom scrollbar styles only in Safari for .expanded-menu */
@media not all and (min-resolution: 0.001dpcm) and (-webkit-min-device-pixel-ratio: 0) {
    .expanded-menu[b-v4oekr77js]::-webkit-scrollbar-track {
        background: transparent; /* The transparent background for the scrollbar track */
    }

    .expanded-menu[b-v4oekr77js]::-webkit-scrollbar-thumb {
        background-color: #000061; /* The dark blue color for the scrollbar thumb */
        border-radius: 4px; /* Rounds the edges of the scrollbar thumb */
        border: 2px solid transparent; /* Adds spacing around the thumb */
    }
}

/* title */
/* make the title line underneath line up with carousel*/
.sidebar-menu #sidebar-navigation[b-v4oekr77js] {
    position: sticky;
    top: 0;
    z-index: 2;
    text-decoration: none;
    align-content: start;
    width: 100%;
    display: inline-block;
    background: white;
    border-bottom: 1px solid #B5CBD6;
    margin: 0;
    padding-top: 5px;
    padding-left: 7px;
    padding-bottom: calc(4px + 0.25rem);
}

.sidebar-menu #sidebar-navigation a[b-v4oekr77js] {
    width: 100%;
    color: #000061;
    text-decoration: none;
}

/* list styling */
.sidebar-menu ul[b-v4oekr77js] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu[b-v4oekr77js]  ul {
    list-style: none;
    margin-bottom: 0.5rem;
}

.sidebar-menu[b-v4oekr77js]  ul > li.nav-item-header-container,
.sidebar-menu[b-v4oekr77js]  ul.sidebar-desktop-child {
    padding-left: 0;
}

.sidebar-menu[b-v4oekr77js]  ul.sidebar-desktop-child li:not(.nav-item-header-container):not(.sidebar-desktop-child-icon-collapse-container):not(.sidebar-desktop-child-icon-collapse) {
    padding-left: 2rem;
}

.sidebar-menu[b-v4oekr77js]  li.sidebar-desktop-child-icon-collapse-container > ul {
    padding-left: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 2rem auto;
}

.sidebar-menu[b-v4oekr77js]  li.sidebar-desktop-child-icon-collapse-container li.sidebar-desktop-child-icon-collapse.collapse-main {
    order: 0;
}
.sidebar-menu[b-v4oekr77js]  li.sidebar-desktop-child-icon-collapse-container li.sidebar-desktop-child-icon-collapse.collapse-main {
    order: 1;
}

/* headers */
.sidebar-menu[b-v4oekr77js]  .nav-item-header{
    color: #163E9F;
    background: transparent;
    border: 0;
    border-top: 1px solid #B5CBD6;
    
    width: 100%;
    height: 2rem;
    padding: 0.2rem 0 0.2rem 1rem;
    display: inline-block;
    position: relative;

    font-family: "Soehne", sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
}

.sidebar-menu[b-v4oekr77js]  > .sidebar-desktop-child > .nav-item-header-container:first-child .nav-item-header{
    /* remove border for first item, border on the title */
    border-top: none;
}

.sidebar-menu[b-v4oekr77js]  .nav-item-header-closed::after,
.sidebar-menu[b-v4oekr77js]  .nav-item-header-open::after{
    position: absolute;
    right: 0;
    color: #163E9F50;
    margin-right: 1rem;
}

.sidebar-menu[b-v4oekr77js]  .nav-item-header-closed::after{
    content: "▽";

}

.sidebar-menu[b-v4oekr77js]  .nav-item-header-open::after {
    content: "△";
}

/* only display list section if there is children */
.sidebar-menu[b-v4oekr77js]  li.nav-item-header-container:has(button:not(.nav-item-header-closed)){
    display: none;
}

.sidebar-menu[b-v4oekr77js]  li.nav-item-header-container:has(li:not(.nav-item-header-container)){
    display: block;
}

/* child links */
.sidebar-menu[b-v4oekr77js]  a.ssy-nav-link {
    color: #3C4142;
    font-weight: normal;
    border: 1px solid transparent;
    /*width: calc(100% - 1.5rem);*/
    text-decoration: none;
    display: grid;
    grid-template-columns: auto 3rem;
}
.sidebar-menu[b-v4oekr77js]  li.sidebar-desktop-child-icon-collapse.collapse-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidebar-menu[b-v4oekr77js]  li.sidebar-desktop-child-icon-collapse.collapse-icon > a.ssy-nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 1.2rem;
    max-height: 100%;
}
.sidebar-menu[b-v4oekr77js]  a.ssy-nav-link svg {
    display: none;
}

.sidebar-menu[b-v4oekr77js]  a.ssy-nav-link:hover,
.sidebar-menu[b-v4oekr77js]  a.ssy-nav-link:focus{
    color: #000061;
    background-color: #f0eeeb;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #f0eeeb;
}

.sidebar-menu[b-v4oekr77js]  li.sidebar-desktop-child-icon-collapse-container:hover a.ssy-nav-link svg,
.sidebar-menu[b-v4oekr77js]  li:not(.sidebar-desktop-child-icon-collapse-container) a.ssy-nav-link:hover svg,
.sidebar-menu[b-v4oekr77js]  li.sidebar-desktop-child-icon-collapse-container:focus a.ssy-nav-link svg,
.sidebar-menu[b-v4oekr77js]  li:not(.sidebar-desktop-child-icon-collapse-container) a.ssy-nav-link:focus svg {
    display: block;
}

.sidebar-menu[b-v4oekr77js]  .ssy-nav-link:active,
.sidebar-menu[b-v4oekr77js]  .ssy-nav-link-active{
    color: #000061;
    border-radius: 4px;
    border: 1px solid #b5cbd6;
    text-decoration: none;
    padding-left: 2px;
    margin-right: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
    background: #E9EFF9;
}

.sidebar-menu[b-v4oekr77js]  .ssy-nav-link:active svg,
.sidebar-menu[b-v4oekr77js]  .ssy-nav-link-active svg {
    display: block;
    padding-right: 2px;
}

.sidebar-menu[b-v4oekr77js]  .ssy-nav-link[data-ssy-disabled="true"] {
    pointer-events: none;
    color: #B5CBD6;
}

/* Collapse Button Styling */
.nav-collapse-bar[b-v4oekr77js] {
    background-color: #000061;
    border: 0;
    width: 20px;
    height: calc(100vh - 50px);
    border-right: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-collapse-bar-expanded[b-v4oekr77js] {
    background-color: transparent;
    color: white;
    border-left: 3px solid #000061;
    border-right: 0;
    width:3px;
}

.nav-collapse-bar-expanded .semi-circle[b-v4oekr77js] {
    height: 6rem;
    background-color: #000061;
    color: white;
    padding: 0 2px 0 2px;
    border-radius: 0 15px 15px 0;
    border: 1px solid transparent;
}

.nav-collapse-bar-expanded .semi-circle:hover[b-v4oekr77js],
.nav-collapse-bar-expanded .semi-circle:focus[b-v4oekr77js]{
    background-color: white;
    color: #000061;
    border: 1px solid #000061;
}
/* /Components/Layout/NavSidebarMobile.razor.rz.scp.css */
/* =============================================================
   Mobile menu - slide-in drawer from the left
   Brand palette: navy #000061 surface, cyan #00E2FD accent
   Visible only at <= 992px; hidden on desktop.
   ============================================================= */

.mobile-menu-root[b-w4vf4isk7f] { display: none; }

@media (max-width: 992px) {

    /* Layer container - sits below the fixed top navbar (50px).
       pointer-events:none so the closed (off-screen) drawer never
       blocks clicks on the page beneath. Children re-enable as needed. */
    .mobile-menu-root[b-w4vf4isk7f] {
        display: block;
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        pointer-events: none;
    }

    /* Backdrop - dim + blur the page behind the drawer */
    .mobile-menu-backdrop[b-w4vf4isk7f] {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 16, 0.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 200ms ease-out;
        pointer-events: none;
    }
    .mobile-menu-root.is-open .mobile-menu-backdrop[b-w4vf4isk7f] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Drawer - slides in from the left.
       Uses transform (compositor-only) for a smooth animation.
       Hamburger button stays in the top-right of the navbar. */
    .mobile-menu-drawer[b-w4vf4isk7f] {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(340px, 88vw);
        background: #000061;
        color: #fff;
        box-shadow: 8px 0 24px rgba(0, 0, 16, 0.35);
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
        display: flex;
        flex-direction: column;
        pointer-events: auto;
        overflow: hidden;
    }
    .mobile-menu-root.is-open .mobile-menu-drawer[b-w4vf4isk7f] {
        transform: translateX(0);
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-menu-backdrop[b-w4vf4isk7f],
        .mobile-menu-drawer[b-w4vf4isk7f] {
            transition: none;
        }
    }

    /* ---------- Header: notification button + search ---------- */
    .mobile-menu-drawer .mobile-menu-header[b-w4vf4isk7f] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 0.875rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        flex-shrink: 0;
    }
    .mobile-menu-drawer .mobile-menu-icon-btn[b-w4vf4isk7f] {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 120ms ease, border-color 120ms ease;
    }
    .mobile-menu-drawer .mobile-menu-icon-btn:hover[b-w4vf4isk7f],
    .mobile-menu-drawer .mobile-menu-icon-btn:focus-visible[b-w4vf4isk7f] {
        background-color: rgba(0, 226, 253, 0.14);
        border-color: rgba(0, 226, 253, 0.4);
        outline: none;
    }

    /* Search input restyled to match the dark surface */
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-search {
        flex: 1;
        min-width: 0;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-search .form-control,
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-search input {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #fff;
        border-radius: 10px;
        height: 40px;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-search input::placeholder,
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-search .form-control::placeholder {
        color: rgba(255, 255, 255, 0.55);
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-search .form-control:focus,
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-search input:focus {
        border-color: #00E2FD;
        box-shadow: 0 0 0 3px rgba(0, 226, 253, 0.18);
        background: rgba(255, 255, 255, 0.1);
    }

    /* ---------- Body: scrollable accordion ---------- */
    .mobile-menu-drawer .mobile-menu-body[b-w4vf4isk7f] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.25rem 0 1rem;
    }
    .mobile-menu-drawer .mobile-menu-body[b-w4vf4isk7f]::-webkit-scrollbar { width: 4px; }
    .mobile-menu-drawer .mobile-menu-body[b-w4vf4isk7f]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.18);
        border-radius: 4px;
    }

    /* ---------- Accordion: override Bootstrap defaults ---------- */
    .mobile-menu-drawer[b-w4vf4isk7f]  ul.accordion,
    .mobile-menu-drawer[b-w4vf4isk7f]  ul.accordion-collapse {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-item {
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-item:last-child { border-bottom: 0; }

    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-button {
        background: transparent !important;
        color: #fff !important;
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        padding: 0.875rem 1rem;
        min-height: 48px;
        border: 0 !important;
        box-shadow: none !important;
        text-align: left;
        width: 100%;
        transition: background-color 120ms ease, color 150ms ease;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-button:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-button:not(.collapsed) {
        color: #00E2FD !important;
        background-color: rgba(0, 226, 253, 0.06) !important;
    }

    /* ---------- Level 1 (top-level) sections - extra visual weight
       so the user can clearly see where one section ends and the next
       begins, especially when one is expanded. ---------- */

    /* Heavier dividers between top-level items */
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-accordion > .accordion-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-accordion > .accordion-item:last-child {
        border-bottom: 0;
    }

    /* Bolder, slightly larger, uppercase top-level button text */
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-accordion > .accordion-item > .accordion-header > .accordion-button,
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-accordion > .accordion-item.accordion-item-child > .nav-link {
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 1rem 1rem;
        min-height: 52px;
    }

    /* Expanded top-level section: tint the whole block (header + panel)
       with a subtle "card" background so children read as grouped under
       their parent, and the next collapsed section visibly starts after. */
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-accordion > .accordion-item:has(> .accordion-header > .accordion-button:not(.collapsed)) {
        background-color: rgba(255, 255, 255, 0.04);
        border-top: 1px solid rgba(0, 226, 253, 0.25);
        border-bottom: 1px solid rgba(0, 226, 253, 0.25);
    }
    /* Slim accent strip down the left edge of the expanded section */
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-accordion > .accordion-item:has(> .accordion-header > .accordion-button:not(.collapsed)) > .accordion-header {
        box-shadow: inset 3px 0 0 0 #00E2FD;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .mobile-menu-accordion > .accordion-item:has(> .accordion-header > .accordion-button:not(.collapsed)) > .accordion-collapse {
        box-shadow: inset 3px 0 0 0 rgba(0, 226, 253, 0.45);
    }

    /* CSS-drawn chevron, replacing Bootstrap's SVG */
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-button::after {
        background-image: none !important;
        width: 10px;
        height: 10px;
        border-right: 2px solid rgba(255, 255, 255, 0.6);
        border-bottom: 2px solid rgba(255, 255, 255, 0.6);
        transform: rotate(-45deg);
        transition: transform 200ms ease, border-color 200ms ease;
        margin-top: -2px;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-button:not(.collapsed)::after {
        transform: rotate(45deg);
        margin-top: -4px;
        border-color: #00E2FD;
    }

    /* Top-level leaf items (no children, level 1) - styled to match the
       expanding top-level buttons (uppercase, bolder, smaller caps). */
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-item-child.accordion-item-level1 a {
        display: block;
        padding: 1rem 1rem;
        min-height: 52px;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #fff;
        text-decoration: none;
        border-radius: 0;
        transition: background-color 120ms ease, color 150ms ease;
    }
    /* Inner span has class .accordion-button which would otherwise override font-size/weight */
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-item-child.accordion-item-level1 a .accordion-button {
        padding: 0;
        min-height: 0;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        text-transform: inherit;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-item-child.accordion-item-level1 a:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-item-child.accordion-item-level1 a.ssy-nav-link-active {
        background-color: rgba(0, 226, 253, 0.12);
        color: #00E2FD;
    }

    /* Nested accordion - thin left rail instead of nested boxes */
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-collapse .accordion {
        margin: 0 0 0.25rem 1rem;
        padding-left: 0.625rem;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-body {
        padding: 0.125rem 0.5rem 0.5rem 1rem;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-collapse .accordion-item {
        border-bottom: 0;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-collapse .accordion-button {
        padding: 0.625rem 0.75rem;
        min-height: 40px;
        font-weight: 400;
        font-size: 0.9rem;
    }

    /* Nav links inside accordion bodies */
    .mobile-menu-drawer[b-w4vf4isk7f]  a.nav-link,
    .mobile-menu-drawer[b-w4vf4isk7f]  a.ssy-nav-link {
        display: block;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        padding: 0.625rem 0.875rem;
        border-radius: 8px;
        font-size: 0.9rem;
        min-height: 40px;
        line-height: 1.3;
        transition: background-color 120ms ease, color 120ms ease;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  a.nav-link:hover,
    .mobile-menu-drawer[b-w4vf4isk7f]  a.ssy-nav-link:hover {
        background-color: rgba(255, 255, 255, 0.06);
        color: #fff;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  a.ssy-nav-link.ssy-nav-link-active {
        background-color: rgba(0, 226, 253, 0.12);
        color: #00E2FD;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  a.ssy-nav-link[data-ssy-disabled="true"] {
        pointer-events: none;
        color: rgba(255, 255, 255, 0.35);
    }

    /* Hide accordion items that have no permissioned children (preserved
       from the previous implementation - it stops empty sections from
       cluttering the menu for users without those roles). */
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-item:not(.accordion-item-child) {
        display: none;
    }
    .mobile-menu-drawer[b-w4vf4isk7f]  .accordion-item:not(.accordion-item-child):has(a.nav-link) {
        display: list-item;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* PublicLayout scoped styles — prefix: pl- */
/* Ported from NavMenu.razor.css to keep the public bar visually identical */
/* to the authenticated SSY brand bar. */

.pl-navbar-container[b-ucl3x3x5ov] {
    /*background: linear-gradient(to right, #003F9A, #1544A3,#0092D1,#0092D1);*/
    background: #000061;
    color: white;
    position: fixed;
    z-index: 5;
    top: 0;
    height: 50px;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
}

/* push page content below the fixed bar */
.public-layout-main[b-ucl3x3x5ov] {
    padding-top: 50px;
}

/* pl-navbar-title */
.pl-navbar-title[b-ucl3x3x5ov] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.pl-navbar-title .pl-nav-Logo[b-ucl3x3x5ov] {
    background-image: url('./assets/Logo/SSYLogo_1Line_White_M.png');
    background-repeat: no-repeat;
    width: 80px;
    height: 30px;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: white;
    /*check aspect ratio*/
}

.pl-navbar-title .pl-nav-Logo:not(.no-wave-animation):hover[b-ucl3x3x5ov] {
    animation: pl-ssyLogo-colorWave-b-ucl3x3x5ov 6s ease-in-out infinite alternate;
}

.pl-navbar-title .pl-navigator-text[b-ucl3x3x5ov] {
    font-size: 2.3rem;
    font-family: 'Soehne Breit', cursive;
    /*  wider spacing*/
    letter-spacing: 0.15em;
    color: white;
    font-weight: 400;
    text-decoration: none;
    margin-bottom: 0;
    margin-left: 5px;
    position: relative;
}

    .pl-navbar-title .pl-navigator-text:hover[b-ucl3x3x5ov] {
        animation: pl-ssyLogo-colorWave-b-ucl3x3x5ov 6s ease-in-out infinite alternate;
    }

.pl-navbar-title .pl-navigator-text .pl-navigator-text-half[b-ucl3x3x5ov] {
    display: none;
}

.pl-navbar-title .pl-navigator-text .pl-navigator-text-full[b-ucl3x3x5ov] {
    display: block;
}

.pl-navbar-title .pl-navigator-environment[b-ucl3x3x5ov] {
    margin: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
}

.pl-navbar-title .pl-navigator-environment > span[b-ucl3x3x5ov] {
    line-height: 1;
    font-weight: bold;
    color: #24DEBD;
}

.pl-navbar-title .pl-navigator-environment > span:last-child[b-ucl3x3x5ov] {
    color: #00E2FD;
}

/* pl-navbar (right-hand links) */
.ssy-navbar-links[b-ucl3x3x5ov] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.ssy-navbar-links ul[b-ucl3x3x5ov] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.ssy-navbar-links ul li.podcast-links[b-ucl3x3x5ov]{
    display: flex;
    flex-direction: row;
}

.ssy-navbar-links ul li a img[b-ucl3x3x5ov] {
    height: 30px;
}

.ssy-navbar-links .ssy-btn-theme[b-ucl3x3x5ov],
.ssy-navbar-links .ssy-btn-ssyglobal[b-ucl3x3x5ov] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: white;
    border-radius: 5px;
    border: 1px solid transparent;
    padding: 5px 5px;
    color: #000061;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: box-shadow 0.3s ease;
}

.ssy-navbar-links .ssy-btn-ssyglobal[b-ucl3x3x5ov] {
    background: #000061;
    color: white;
    border: 1px solid white;
}

.ssy-navbar-links ul li a.ssy-btn-ssyglobal img[b-ucl3x3x5ov] {
    height: 20px;
}

.ssy-navbar-links ul li a:not(.ssy-btn-ssyglobal):hover img[b-ucl3x3x5ov] {
    filter: drop-shadow(0 0 12px rgb(255, 255, 255, 0.8));
}

.ssy-navbar-links ul li a.theme:hover[b-ucl3x3x5ov],
.ssy-navbar-links ul li a.ssy-btn-ssyglobal:hover[b-ucl3x3x5ov] {
    box-shadow: 0 0 12px rgb(255, 255, 255, 0.8);
}

@media only screen and (max-width: 1570px) {
    .pl-navbar-title .pl-navigator-text[b-ucl3x3x5ov] {
        font-size: 1.3rem;
        margin-left: -10px;
        margin-top: 5px;
        display: block;
    }
    .pl-navbar-title .pl-navigator-text .pl-navigator-text-half[b-ucl3x3x5ov] {
        display: block;
    }
    .pl-navbar-title .pl-navigator-text .pl-navigator-text-full[b-ucl3x3x5ov] {
        display: none;
    }
}

@media (max-width: 1050px) {
    .pl-navigator-text-half[b-ucl3x3x5ov] {
        font-size: 8pt !important;
    }

    .pl-navigator-environment[b-ucl3x3x5ov] {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .ssy-navbar-links ul[b-ucl3x3x5ov] {
        gap: 10px;
    }
}

/* ANIMATIONS */
@keyframes pl-ssyLogo-colorWave-b-ucl3x3x5ov {
    /* https://meyerweb.com/eric/tools/color-blend/#FFFFFF:000061:4:hex */
    0% {
        filter: invert(0);
    }

    50% {
        filter: invert(20%);
    }

    100% {
        filter: invert(0);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5idsysqoo6],
.components-reconnect-repeated-attempt-visible[b-5idsysqoo6],
.components-reconnect-failed-visible[b-5idsysqoo6],
.components-pause-visible[b-5idsysqoo6],
.components-resume-failed-visible[b-5idsysqoo6],
.components-rejoining-animation[b-5idsysqoo6] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-5idsysqoo6],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-5idsysqoo6],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-5idsysqoo6],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-5idsysqoo6],
#components-reconnect-modal.components-reconnect-retrying[b-5idsysqoo6],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-5idsysqoo6],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-5idsysqoo6],
#components-reconnect-modal.components-reconnect-failed[b-5idsysqoo6],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-5idsysqoo6] {
    display: block;
}


#components-reconnect-modal[b-5idsysqoo6] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-5idsysqoo6 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-5idsysqoo6 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-5idsysqoo6 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-5idsysqoo6]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-5idsysqoo6 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-5idsysqoo6 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-5idsysqoo6 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-5idsysqoo6 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-5idsysqoo6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-5idsysqoo6] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-5idsysqoo6] {
    color: #FFFFFF;
    background-color: #000061;
    border: 1px solid #000061;
    padding: 4px 24px;
    border-radius: 4px;
}

#components-reconnect-modal button:hover[b-5idsysqoo6], 
#components-reconnect-modal button:active[b-5idsysqoo6] {
    color: #000061;
    background-color: #FFFFFF;
    border: 1px solid #000061;
}

.components-rejoining-animation[b-5idsysqoo6] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-5idsysqoo6] {
        position: absolute;
        border: 3px solid #00E2FD;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-5idsysqoo6 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-5idsysqoo6] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-5idsysqoo6 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/ApiDocs/ApiDocsExamples.razor.rz.scp.css */
h4[b-wz26t6ibod] {
    font-size: 1.3em;
}

.api-container[b-wz26t6ibod] {
    margin-left: 1rem;
    margin-right: 1rem;
}

.api-container[b-wz26t6ibod]  .code-block {
    background: #E9EFF9;
    border: 1px solid #9FB3BC;
    border-radius: 10px;
    margin: 1rem 0 1.5rem;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(231 , 238 , 242, 0.15);
}

.api-container[b-wz26t6ibod]  .code-block__header {
    align-items: center;
    background: #DAE5EB;
    border-bottom: 1px solid #9FB3BC;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
}

.api-container[b-wz26t6ibod]  .code-block__title {
    color: #000000;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.api-container[b-wz26t6ibod]  .code-block__copy {
    border-radius: 6px;
    flex-shrink: 0;
}

.api-container[b-wz26t6ibod]  .code-block__surface {
    color: #000000;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    overflow: auto;
    padding: 1rem 1.1rem 1.2rem;
}

.api-container[b-wz26t6ibod]  .code-block__surface code {
    display: block;
    white-space: pre;
}

.api-container[b-wz26t6ibod]  .token-keyword {
    color: #0000ff;
}

.api-container[b-wz26t6ibod]  .token-string {
    color: #A31515;
}

.api-container[b-wz26t6ibod]  .token-comment {
    color: #008000;
}

.api-container[b-wz26t6ibod]  .token-punctuation {
    color: #95a8bd;
}

.api-container[b-wz26t6ibod]  .token-function {
    color: #CF8B05;
}

@media (max-width: 640px) {
    .api-container[b-wz26t6ibod]  .code-block__header {
        align-items: stretch;
        flex-direction: column;
    }

    .api-container[b-wz26t6ibod]  .code-block__copy {
        width: 100%;
    }
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-wz26t6ibod] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/ApiDocsLandingPage.razor.rz.scp.css */
.code[b-g6kks53atw] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-g6kks53atw] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-g6kks53atw] {
    color: #405864;
}

.property[b-g6kks53atw] {
    color: #01A39E;
}

.value[b-g6kks53atw] {
    color: #163E9F;
}
.api-container[b-g6kks53atw] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-g6kks53atw] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Bulkers/DryBulkRates.razor.rz.scp.css */
.code[b-qsebi2awcg] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-qsebi2awcg] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-qsebi2awcg] {
    color: #405864;
}

.property[b-qsebi2awcg] {
    color: #01A39E;
}

.value[b-qsebi2awcg] {
    color: #163E9F;
}

.api-container[b-qsebi2awcg] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-qsebi2awcg] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Futures/FuturesCommentary.razor.rz.scp.css */
.code[b-7n1bt3oko2] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-7n1bt3oko2] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-7n1bt3oko2] {
    color: #405864;
}

.property[b-7n1bt3oko2] {
    color: #01A39E;
}

.value[b-7n1bt3oko2] {
    color: #163E9F;
}

.api-container[b-7n1bt3oko2] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-7n1bt3oko2] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Futures/FuturesFfaIntraday.razor.rz.scp.css */
.code[b-37g97ssyy9] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-37g97ssyy9] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-37g97ssyy9] {
    color: #405864;
}

.property[b-37g97ssyy9] {
    color: #01A39E;
}

.value[b-37g97ssyy9] {
    color: #163E9F;
}

.api-container[b-37g97ssyy9] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-37g97ssyy9] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Futures/FuturesFfaTradeSummary.razor.rz.scp.css */
.code[b-2lvhhikjk7] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-2lvhhikjk7] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-2lvhhikjk7] {
    color: #405864;
}

.property[b-2lvhhikjk7] {
    color: #01A39E;
}

.value[b-2lvhhikjk7] {
    color: #163E9F;
}

.api-container[b-2lvhhikjk7] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-2lvhhikjk7] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Futures/FuturesPricesFwdEod.razor.rz.scp.css */
.code[b-x9m3ll87pv] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-x9m3ll87pv] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-x9m3ll87pv] {
    color: #405864;
}

.property[b-x9m3ll87pv] {
    color: #01A39E;
}

.value[b-x9m3ll87pv] {
    color: #163E9F;
}

.api-container[b-x9m3ll87pv] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-x9m3ll87pv] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Futures/FuturesTradeSummary.razor.rz.scp.css */
.code[b-xp2vwzvtn2] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-xp2vwzvtn2] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-xp2vwzvtn2] {
    color: #405864;
}

.property[b-xp2vwzvtn2] {
    color: #01A39E;
}

.value[b-xp2vwzvtn2] {
    color: #163E9F;
}

.api-container[b-xp2vwzvtn2] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-xp2vwzvtn2] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Gas/GasRates.razor.rz.scp.css */
.code[b-2emnu8saco] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-2emnu8saco] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-2emnu8saco] {
    color: #405864;
}

.property[b-2emnu8saco] {
    color: #01A39E;
}

.value[b-2emnu8saco] {
    color: #163E9F;
}

.api-container[b-2emnu8saco] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-2emnu8saco] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/SNP/SNPRates.razor.rz.scp.css */
.code[b-8f8504dwbw] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-8f8504dwbw] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-8f8504dwbw] {
    color: #405864;
}

.property[b-8f8504dwbw] {
    color: #01A39E;
}

.value[b-8f8504dwbw] {
    color: #163E9F;
}

.api-container[b-8f8504dwbw] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-8f8504dwbw] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Tankers/TankerRates.razor.rz.scp.css */
.code[b-t2oikwd0f5] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-t2oikwd0f5] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-t2oikwd0f5] {
    color: #405864;
}

.property[b-t2oikwd0f5] {
    color: #01A39E;
}

.value[b-t2oikwd0f5] {
    color: #163E9F;
}

.api-container[b-t2oikwd0f5] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-t2oikwd0f5] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/Bulkers/ApiSetup/DryBulkRatesSetup.razor.rz.scp.css */
.drybulkextractbox[b-zn8luqwzb6] {
    border: 1px solid #009DC9;
    height: 85vh;
    overflow-y: scroll;
}

.drybulkextractdatepicker[b-zn8luqwzb6] {
}

.drybulkextractroutepicker[b-zn8luqwzb6] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 10px;
}

.drybulkextractroutepicker-ul[b-zn8luqwzb6] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.drybulkextractroutepicker-ul .chkbox[b-zn8luqwzb6] {
    margin: 0 3px 0 0;
    vertical-align: middle;
}


.drybulkextractroutepicker-ul li[b-zn8luqwzb6] {
    text-decoration: none;
}

.drybulkextractroutepicker-ul li:hover[b-zn8luqwzb6] {
    background-color: #B5CBD6;
}


.deleterow[b-zn8luqwzb6], .editapiclient[b-zn8luqwzb6] {
    cursor: pointer;
    padding-right: 3px;
}

.deleterow:hover[b-zn8luqwzb6] {
    font-weight: 700;
    color: white;
}

.draggablerow[b-zn8luqwzb6] {
    cursor: pointer;
}

.editapiclient[b-zn8luqwzb6] {
    color: #163E9F;
}


.editapiclient:hover[b-zn8luqwzb6] {
    font-weight: 700;
    color: #91A527;
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_010_main.razor.rz.scp.css */
/* ============================================================
   Dry Bulk Dashboard - shared shell, cards, chart placeholders and palette.
   ============================================================ */

.drybulkdash-dash-wrap[b-572uq5uycc] {
    --drybulkdash-blue: var(--ssy-colour-main-simpson-blue);
    --drybulkdash-accent: var(--ssy-colour-main-crystal-blue);
    --drybulkdash-up: var(--ssy-colour-palette-teal-green);
    --drybulkdash-down: var(--ssy-colour-palette-vivid-pink);
    --drybulkdash-warn: var(--ssy-colour-palette-crimson-red);
    --drybulkdash-page-bg: #F5F7FA;
    --drybulkdash-text: #1a1a1a;
    --drybulkdash-text-dim: #536A75;
    --drybulkdash-text-muted: #798E98;
    --drybulkdash-divider: #DCE5EB;
    --drybulkdash-card-border: #E1E8ED;
    --drybulkdash-card-border-soft: #CEDCE4;
    --drybulkdash-row-line: #F2F5F8;
    --drybulkdash-row-active-bg: #EAF1F5;
    --drybulkdash-surface: #FFFFFF;
    --drybulkdash-tint-1: #F8FAFB;
    --drybulkdash-tint-2: #F4F7F9;
    --drybulkdash-tint-3: #F1F5F8;
    --drybulkdash-tint-4: #EAF1F5;
    --drybulkdash-tint-5: #E7EEF2;
    --drybulkdash-tint-6: #DAE5EB;
    --drybulkdash-tint-accent: #C1E4F0;

    /* SsyKpiStrip theme mapping */
    --ssy-kpi-brand:   var(--drybulkdash-blue);
    --ssy-kpi-surface: var(--drybulkdash-surface);
    --ssy-kpi-border:  var(--drybulkdash-card-border);
    --ssy-kpi-text:    var(--drybulkdash-text);
    --ssy-kpi-muted:   var(--drybulkdash-text-muted);
    --ssy-kpi-up:      var(--drybulkdash-up);
    --ssy-kpi-dn:      var(--drybulkdash-down);

    /* Shared dashboard kit theme mapping */
    --ssy-dash-surface:     var(--drybulkdash-surface);
    --ssy-dash-border:      var(--drybulkdash-card-border);
    --ssy-dash-divider:     var(--drybulkdash-divider);
    --ssy-dash-border-soft: var(--drybulkdash-card-border-soft);
    --ssy-dash-text:        var(--drybulkdash-text);
    --ssy-dash-text-muted:  var(--drybulkdash-text-muted);
    --ssy-dash-brand:       var(--drybulkdash-blue);
    --ssy-dash-row-line:    var(--drybulkdash-row-line);
    --ssy-dash-row-active:  var(--drybulkdash-row-active-bg);
    --ssy-dash-row-active-bg: var(--drybulkdash-row-active-bg);
    --ssy-dash-up:          var(--drybulkdash-up);
    --ssy-dash-down:        var(--drybulkdash-down);
    --ssy-dash-text-dim:    var(--drybulkdash-text-dim);
    --ssy-dash-warn:        var(--drybulkdash-warn);
    --ssy-dash-caution:     var(--drybulkdash-accent);
    --ssy-dash-accent:      var(--drybulkdash-accent);
    --ssy-dash-tint-1:      var(--drybulkdash-tint-1);
    --ssy-dash-tint-2:      var(--drybulkdash-tint-2);
    --ssy-dash-tint-3:      var(--drybulkdash-tint-3);
    --ssy-dash-tint-4:      var(--drybulkdash-tint-4);
    --ssy-dash-tint-5:      var(--drybulkdash-tint-5);
    --ssy-dash-tint-6:      var(--drybulkdash-tint-6);
    --ssy-dash-tint-accent: var(--drybulkdash-tint-accent);
    --ssy-card-pad-x:       4px;
    --ssy-card-pad-top:     5px;
    --ssy-card-pad-bottom:  6px;

    /* No margin/padding here: the rule below sets both to 0 and wins (same
       selector, later in the file). The old `margin: 0 -1rem` cancelled
       .body-main's 1rem padding and has been dead for a while - stating it
       twice just hid that. */
    background: var(--drybulkdash-page-bg);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--drybulkdash-text);
}

[b-572uq5uycc] .drybulkdash-shell .ssy-dashboard-shell__selector {
    max-width: min(410px, 32vw);
}

.drybulkdash-shell-selector[b-572uq5uycc] {
    background: transparent;
}

@media (max-width: 767px) {
    [b-572uq5uycc] .drybulkdash-shell .ssy-dashboard-shell__selector {
        max-width: 100%;
        width: 100%;
    }
}

.drybulkdash-dash-wrap[b-572uq5uycc] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    /* 4px of bottom breathing room. Unconditional on purpose: this used to be
       gated on a restated copy of the lock breakpoint (min-width:1440px and
       min-height:769px) with an !important to beat `padding: 0` above. When the
       tab flows instead of pinning, 4px at the bottom of a scrolling page is
       invisible - so the condition bought nothing and cost a second copy of a
       number the grammar says lives in exactly one place. */
    padding: 0 0 4px;
}

/* Viewport-lock shell: when the active TabDef has Fit=true the wrapper gets
   drybulkdash-fit-active (dashboard-specific chrome tweaks below) plus the
   shared ssy-fit-shell class - the lock geometry itself (wrapper height, tab
   height, fail-safe) lives in the <style> block of SsyDashboardShell.razor;
   the tab's root element carries ssy-fit-tab and elects its panes with the
   ssy-fit-* classes. The lock's own condition is never restated here - the
   4px bottom padding this file used to gate on a copy of that condition is
   now unconditional on .drybulkdash-dash-wrap above. */

/* Card padding is driven entirely by the --ssy-card-pad-* vars set on this wrapper
   (consumed by the shared .ssy-card rule) — no per-card override needed. */

/* --- Shared vessel-size selector (animated sliding pill) --- */
.drybulkdash-dash-wrap .drybulkdash-segctl[b-572uq5uycc] {
    position: relative;
    display: flex;
    align-self: center;
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 2px;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 999px;
    background: var(--drybulkdash-row-active-bg);
    isolation: isolate;
}

.drybulkdash-dash-wrap .drybulkdash-segctl-glider[b-572uq5uycc] {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 0;
    width: calc((100% - 4px) / var(--drybulkdash-segn, 4));
    height: calc(100% - 4px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--drybulkdash-blue), var(--drybulkdash-accent));
    box-shadow: 0 2px 6px rgba(0, 32, 91, 0.28);
    transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.drybulkdash-dash-wrap .drybulkdash-segctl-btn[b-572uq5uycc] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 76px;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 3px 0 2px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    color: var(--drybulkdash-text-dim);
    transition: color 0.22s ease;
}

.drybulkdash-dash-wrap .drybulkdash-segctl-btn:hover[b-572uq5uycc] {
    color: var(--drybulkdash-blue);
}

.drybulkdash-dash-wrap .drybulkdash-segctl-on[b-572uq5uycc],
.drybulkdash-dash-wrap .drybulkdash-segctl-on:hover[b-572uq5uycc] {
    color: #fff;
}

.drybulkdash-dash-wrap .drybulkdash-segctl-label[b-572uq5uycc] {
    font-size: var(--ssy-fs-small);
    font-weight: 750;
    letter-spacing: 0.3px;
    line-height: 1.1;
}

.drybulkdash-dash-wrap .drybulkdash-segctl-dwt[b-572uq5uycc] {
    font-size: var(--ssy-fs-micro);
    font-weight: 600;
    letter-spacing: 0.4px;
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .drybulkdash-dash-wrap .drybulkdash-segctl-glider[b-572uq5uycc] {
        transition: none;
    }
}

@media (max-width: 767px) {
    /* Fill the row and let buttons flex evenly so the percentage-width glider
       always lines up (fixed 76px buttons drift + overflow the pill when the
       control is squeezed onto a phone). */
    .drybulkdash-dash-wrap .drybulkdash-segctl[b-572uq5uycc] {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .drybulkdash-dash-wrap .drybulkdash-segctl-btn[b-572uq5uycc] {
        flex: 1 1 0;
        min-width: 0;
    }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_100_Overview.razor.rz.scp.css */
/* Overview tab. Card / table / grid chrome comes from SsyCard, SsyDataTable
   and SsyGrid; only the rate table, forward strip, and news rail live here. */

.drybulk-overview[b-95cua1c0q1] {
    /* Intel mini-visual tint scale — one source of truth for the placeholder
       sparkbars/heat cells below. Tweak here, not per nth-child. */
    --drybulk-ov-tint: var(--drybulk-ov-tint);       /* base bar / cell */
    --drybulk-ov-tint-mid: var(--drybulk-ov-tint-mid);   /* mid emphasis */
    --drybulk-ov-tint-up: var(--drybulk-ov-tint-up);    /* positive */
    --drybulk-ov-tint-down: var(--drybulk-ov-tint-down);  /* negative */
    --drybulk-ov-tint-edge: var(--drybulk-ov-tint-edge);  /* bar border */
    /* layout (grid + row template) comes from ssy-fit-grid on the root */
    gap: 6px;
    color: var(--drybulkdash-text);
}

/* Routes-card header: "as of" date pill. */
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-tape-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.drybulk-ov-body[b-95cua1c0q1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 6px;
    min-width: 0;
}

/* row template comes from ssy-fit-grid on the element */
.drybulk-ov-main[b-95cua1c0q1] {
    gap: 6px;
    min-width: 0;
}

/* Columns are NOT declared here. The ratio is already stated once, as
   SsyGrid Cols="minmax(0,0.62fr) minmax(0,1.38fr)" in the markup, which
   publishes --ssy-grid-cols; the fit grammar applies it when this shell is
   wide enough for it and lets SsyGrid's MinCol="300px" auto-fit take over when
   it is not. Restating it here (unconditionally, at higher specificity) beat
   the auto-fit rule at every width, so MinCol was dead and the band produced a
   237px track at a 1104px shell - narrower than its own declared minimum. */

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-tape-card,
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-curve-card {
    min-width: 0;
}

/* curve card: sizing comes entirely from the shared pieces now - the band
   grammar flexes the card and its chart slot; unlocked the slot renders
   at its design Height via --ssy-chart-slot-h (SsyChartCard). */

/* ---- Baltic tape ---- */
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-tape-wrap {
    overflow-x: auto;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-tape {
    table-layout: fixed;
    min-width: 300px;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-col-route {
    width: 43%;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-col-num {
    width: 19%;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-route-cell {
    display: flex;
    align-items: baseline;
    min-width: 0;
    overflow: hidden;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-route-code {
    flex: 0 0 42px;
    /* Individual routes sit lighter; benchmark rows override below. */
    font-weight: 800;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-route-name {
    display: block;
    min-width: 0;
    margin-left: 4px;
    color: var(--drybulkdash-text-dim);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Row hierarchy: benchmark rows (BDI / index / TC average) ---- */
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-benchmark td {
    background: var(--drybulkdash-row-active-bg);
    font-weight: 900;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-benchmark .drybulk-ov-route-code {
    color: var(--drybulkdash-blue);
    font-weight: 950;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-benchmark .drybulk-ov-route-name {
    color: var(--drybulkdash-text);
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-group-row td {
    background: var(--drybulkdash-row-line);
    border-top: 1px solid var(--drybulkdash-divider);
    color: var(--drybulkdash-blue);
    font-size: var(--ssy-fs-tiny);
    font-weight: 950;
    letter-spacing: 0.8px;
    /* Beat the more-specific shared rule `table.ssy-dash-table td { text-align: right }`. */
    text-align: left !important;
    text-transform: uppercase;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-dod .ssy-delta-inline {
    width: 100%;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-dod .ssy-delta-inline span {
    font-size: var(--ssy-fs-small);
    font-weight: 850;
}


/* ---- 7TC forward ladder strip (benchmark curve, full width) ---- */
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-card {
    min-width: 0;
}

/* Auto-fit wrap (never a horizontal scroll): one row of rungs on a wide card,
   wrapping to 2+ rows on a phone. */
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 3px;
    min-width: 0;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-rung {
    display: grid;
    gap: 1px;
    padding: 4px 3px;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 4px;
    background: var(--drybulkdash-surface);
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-lbl {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-micro);
    font-weight: 850;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-val {
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
}

/* Compact DoD (D) + WoW (W) deltas under each ladder value: two lines, each
   tag+number kept together (never split across a wrap). */
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-delta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 2px;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-dpair {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
    line-height: 1.15;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-delta .ssy-delta-inline {
    width: auto;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-delta .ssy-delta-inline span {
    font-size: var(--ssy-fs-micro);
    font-weight: 850;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-dtag,
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-dna {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-micro);
    font-weight: 900;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-rung.is-spot {
    background: var(--drybulkdash-row-active-bg);
    border-color: var(--drybulkdash-blue);
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-rung.is-premium {
    background: color-mix(in srgb, var(--drybulkdash-up) 13%, #fff);
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-ladder-rung.is-discount {
    background: color-mix(in srgb, var(--drybulkdash-down) 10%, #fff);
}

/* ---- Tab workbench cards ---- */
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-intel-card {
    display: grid;
    grid-template-rows: auto auto;
    gap: 3px;
    min-width: 0;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-intel-signal {
    display: grid;
    gap: 3px;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-intel-caption {
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-micro);
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No live metric yet: dim the whole bar + caption so it never reads as data. */
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-intel-nosig {
    opacity: 0.5;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-intel-nosig .drybulk-ov-intel-caption {
    font-style: italic;
    font-weight: 750;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-intel-secondary {
    margin: 0;
    color: var(--drybulkdash-text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--ssy-fs-tiny);
    font-weight: 650;
    line-height: 1.15;
    overflow: hidden;
}

/* ---- News rail ---- */
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 7px;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-filter {
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 999px;
    background: var(--drybulkdash-surface);
    color: var(--drybulkdash-text-dim);
    padding: 2px 8px;
    font-family: inherit;
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    cursor: pointer;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-filter:hover {
    color: var(--drybulkdash-blue);
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-filter-on,
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-filter-on:hover {
    background: var(--drybulkdash-blue);
    border-color: var(--drybulkdash-blue);
    color: #fff;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-link {
    display: block;
    padding: 8px 0 8px 10px;
    border-left: 3px solid var(--drybulkdash-card-border-soft);
    border-bottom: 1px solid var(--drybulkdash-row-line);
    text-decoration: none;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-link.drybulkdash-news-up {
    border-left-color: var(--drybulkdash-up);
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-link.drybulkdash-news-down {
    border-left-color: var(--drybulkdash-down);
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-base);
    font-weight: 750;
    line-height: 1.24;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-link:hover .drybulk-ov-news-title {
    color: var(--drybulkdash-blue);
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-meta {
    display: block;
    margin-top: 4px;
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 850;
}

.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-note {
    margin: 8px 0 0 0;
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 650;
    line-height: 1.25;
}

/* Row separator and rhythm only. The shimmer bars inside are SsySkeleton, which
   owns their height, width and animation - do not restyle them from here. */
.drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news-skeleton {
    padding: 11px 0;
    border-bottom: 1px solid var(--drybulkdash-row-line);
}

/* Market band wraps intrinsically via SsyGrid MinCol - no viewport columns here. */
@media (max-width: 1100px) {
    .drybulk-ov-body[b-95cua1c0q1] {
        grid-template-columns: 1fr;
    }

    .drybulk-overview[b-95cua1c0q1]  .drybulk-ov-curve-card,
    .drybulk-overview[b-95cua1c0q1]  .drybulk-ov-curve-card .ssy-chart-card-slot {
        width: 100%;
        max-width: 100%;
    }

    .drybulk-overview[b-95cua1c0q1]  .drybulk-ov-news {
        display: none;
    }
}

/* Fit layout handled by the shared ssy-fit-* grammar (SsyDashboardShell.razor):
   root + main = ssy-fit-grid (KPI/intel auto, market row 1fr), market =
   ssy-fit-band (cards auto-flex, curve chart slot grows), tape wrap =
   ssy-fit-scroll-xy, news rail card = ssy-fit-col with its list =
   ssy-fit-scroll. No tab-specific lock CSS needed. */

/* Terminal state for an exhausted load: states plainly that the class has no
   data instead of leaving a skeleton up forever or letting a table of dashes
   read as a loaded market. Wraps rather than truncating, so it survives the
   390px mobile layout where the ledger itself becomes horizontally scrollable. */
.drybulk-ov-unavailable[b-95cua1c0q1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 4px 6px;
    border-left: 2px solid var(--drybulkdash-warn);
    background: var(--drybulkdash-row-active-bg);
}

.drybulk-ov-unavailable-msg[b-95cua1c0q1] {
    flex: 1 1 12ch;
    min-width: 0;
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    color: var(--drybulkdash-text-muted);
}

.drybulk-ov-unavailable-retry[b-95cua1c0q1] {
    flex: 0 0 auto;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 3px;
    background: var(--drybulkdash-surface);
    color: var(--drybulkdash-blue);
    font: inherit;
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    cursor: pointer;
}

.drybulk-ov-unavailable-retry:disabled[b-95cua1c0q1] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_200_Weather.razor.rz.scp.css */
/* ============================================================
   Dry Bulk weather tab. Scoped under the dashboard wrapper and the
   drybulkweather prefix. The port matrix (accordion table + cells + status
   dots + filter chips) now renders through the shared SsyAccordionTable + cell
   kit (Common/Dashboard); only the storm-watch bar, band-cell wrapper,
   Ventusky map and ENSO climate layer remain here.
   ============================================================ */

.drybulkdash-dash-wrap .drybulkweather-tab[b-7ryqrs1mq2] {
    display: grid;
    gap: 12px;
}

/* --- Top bar: storm watch + status chips + freshness --- */

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-top[b-7ryqrs1mq2] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    justify-content: space-between;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-storms[b-7ryqrs1mq2] {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    border: 1px solid var(--drybulkdash-card-border);
    border-left: 3px solid var(--drybulkdash-accent);
    border-radius: 4px;
    background: var(--drybulkdash-surface);
    padding: 8px 2px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-group-title[b-7ryqrs1mq2] {
    margin: 0;
    color: var(--drybulkdash-blue);
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

/* Basin-coverage qualifier next to "Storm watch" — the NHC feed is
   Atlantic/E. Pacific only, so the label keeps the W. Pacific gap honest. */
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-coverage[b-7ryqrs1mq2] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 600;
    white-space: nowrap;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-storm-pill[b-7ryqrs1mq2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 4px;
    background: var(--drybulkdash-row-active-bg);
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-base);
    font-weight: 600;
    line-height: 1.2;
    padding: 5px 8px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-counts[b-7ryqrs1mq2] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    margin-left: auto;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-allcalm[b-7ryqrs1mq2] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 4px;
    background: var(--drybulkdash-row-active-bg);
    color: var(--drybulkdash-up);
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 8px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-top[b-7ryqrs1mq2]  .dash-freshness-pill {
    flex: 0 0 auto;
}

/* --- Board: matrix + sticky detail rail --- */

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-board[b-7ryqrs1mq2] {
    gap: 14px;
}

.drybulkdash-dash-wrap .drybulkweather-tab[b-7ryqrs1mq2]  .drybulkweather-matrix-wrap {
    border: 1px solid var(--drybulkdash-card-border);
    border-radius: 4px;
    background: var(--drybulkdash-surface);
}

/* --- Band cells: now value + threshold band bar (shared SsyBandBar) --- */

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-bandcell[b-7ryqrs1mq2] {
    display: grid;
    gap: 2px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-bandnow[b-7ryqrs1mq2] {
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-flag[b-7ryqrs1mq2] {
    margin-right: 6px;
    font-size: var(--ssy-fs-lg);
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-ts[b-7ryqrs1mq2] {
    text-align: center;
    width: 26px;
    font-size: var(--ssy-fs-lg);
}

/* --- Sticky detail rail --- */

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-detail[b-7ryqrs1mq2] {
    position: sticky;
    top: 8px;
    min-width: 0;
}
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-context[b-7ryqrs1mq2]{display:flex;align-items:center;gap:9px;padding:5px 7px;border:1px solid var(--drybulkdash-card-border);border-bottom:0;background:var(--drybulkdash-surface);color:var(--drybulkdash-text-muted);font-size:9px}.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-context strong[b-7ryqrs1mq2]{color:var(--drybulkdash-brand);text-transform:uppercase}.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-context span:last-child[b-7ryqrs1mq2]{margin-left:auto}

/* --- Ventusky map --- */

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map[b-7ryqrs1mq2] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-head[b-7ryqrs1mq2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-buttons[b-7ryqrs1mq2] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.drybulkdash-dash-wrap .drybulkweather-history-tabs[b-7ryqrs1mq2] { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.drybulkdash-dash-wrap .drybulkweather-history-tabs button[b-7ryqrs1mq2] { border: 1px solid var(--drybulkdash-card-border); background: var(--drybulkdash-surface); color: var(--drybulkdash-blue); padding: 4px 10px; font: inherit; font-size: var(--ssy-fs-small); font-weight: 800; cursor: pointer; }
.drybulkdash-dash-wrap .drybulkweather-history-tabs button + button[b-7ryqrs1mq2] { margin-left: -1px; }
.drybulkdash-dash-wrap .drybulkweather-history-tabs button.on[b-7ryqrs1mq2] { background: var(--drybulkdash-blue); color: #fff; position: relative; }

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-note[b-7ryqrs1mq2] {
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-small);
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-tools[b-7ryqrs1mq2],
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-official-links[b-7ryqrs1mq2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-tools[b-7ryqrs1mq2] { justify-content: space-between; }
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-official-links[b-7ryqrs1mq2] { flex-wrap: wrap; justify-content: flex-end; font-size: var(--ssy-fs-small); }
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-official-links a[b-7ryqrs1mq2] { color: var(--drybulkdash-blue); font-weight: 750; text-decoration: none; }
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-official-links a:hover[b-7ryqrs1mq2] { text-decoration: underline; }

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-button[b-7ryqrs1mq2] {
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 0;
    background: var(--drybulkdash-surface);
    color: var(--drybulkdash-blue);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    min-width: 54px;
    padding: 6px 10px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-button:first-child[b-7ryqrs1mq2] {
    border-radius: 4px 0 0 4px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-button:last-child[b-7ryqrs1mq2] {
    border-radius: 0 4px 4px 0;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-button + .drybulkweather-map-button[b-7ryqrs1mq2] {
    margin-left: -1px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-button:hover[b-7ryqrs1mq2],
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-button.drybulkweather-selected[b-7ryqrs1mq2] {
    border-color: var(--drybulkdash-accent);
    background: var(--drybulkdash-row-active-bg);
    position: relative;
    z-index: 1;
}

.drybulkdash-dash-wrap .drybulkweather-tab iframe[b-7ryqrs1mq2] {
    width: 100%;
    height: clamp(380px, calc(100vh - 430px), 560px);
    border: 1px solid var(--drybulkdash-card-border);
    border-radius: 4px;
    background: var(--drybulkdash-blue);
}

/* --- CPC ENSO climate layer --- */

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate[b-7ryqrs1mq2] {
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--drybulkdash-card-border);
    padding-top: 12px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-head[b-7ryqrs1mq2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-title[b-7ryqrs1mq2] {
    margin: 2px 0 0;
    color: var(--drybulkdash-blue);
    font-size: var(--ssy-fs-display-lg);
    font-weight: 800;
    letter-spacing: 0;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-links[b-7ryqrs1mq2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-base);
    font-weight: 700;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-links a[b-7ryqrs1mq2],
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure-head a[b-7ryqrs1mq2] {
    color: var(--drybulkdash-blue);
    font-weight: 800;
    text-decoration: none;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-links a:hover[b-7ryqrs1mq2],
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure-head a:hover[b-7ryqrs1mq2] {
    text-decoration: underline;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-kpis[b-7ryqrs1mq2] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-kpi[b-7ryqrs1mq2],
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure[b-7ryqrs1mq2] {
    border: 1px solid var(--drybulkdash-card-border);
    border-radius: 4px;
    background: var(--drybulkdash-surface);
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-kpi[b-7ryqrs1mq2] {
    display: grid;
    gap: 4px;
    border-left: 3px solid var(--drybulkdash-accent);
    padding: 9px 10px;
    min-width: 0;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-kpi span[b-7ryqrs1mq2],
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure-head span[b-7ryqrs1mq2] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-kpi strong[b-7ryqrs1mq2] {
    overflow-wrap: anywhere;
    color: var(--drybulkdash-blue);
    font-size: var(--ssy-fs-display-lg);
    font-weight: 850;
    line-height: 1.05;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-kpi em[b-7ryqrs1mq2] {
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-base);
    font-style: normal;
    font-weight: 600;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-board[b-7ryqrs1mq2] {
    gap: 12px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure[b-7ryqrs1mq2] {
    display: grid;
    gap: 8px;
    padding: 9px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure-head[b-7ryqrs1mq2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure img[b-7ryqrs1mq2] {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 3px;
    background: #fff;
}

/* 535px left the Climate view 72px past the fold on a real 1080p browser. The
   source is a 3577x2086 plume chart already being downscaled, so trimming the box
   costs no legible detail and buys the fit. */
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-enso-figure img[b-7ryqrs1mq2] {
    height: 450px;
    object-fit: contain;
}

/* Collapsed by default so the ENSO board owns the viewport; the figures are
   corroboration you open when you want them. */
.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-figures > summary[b-7ryqrs1mq2] {
    cursor: pointer;
    padding: 3px 0;
    font-size: var(--ssy-fs-small);
    font-weight: 600;
    color: var(--drybulkdash-text-dim);
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-figures > summary:hover[b-7ryqrs1mq2] {
    color: var(--drybulkdash-blue);
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-figures[open] > summary[b-7ryqrs1mq2] {
    margin-bottom: 6px;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure-row[b-7ryqrs1mq2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure-row .drybulkweather-cpc-figure[b-7ryqrs1mq2] {
    min-width: 0;
}

.drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure-row img[b-7ryqrs1mq2] {
    height: 360px;
    object-fit: contain;
}

/* --- Responsive --- */

@media (max-width: 1280px) {
    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-board[b-7ryqrs1mq2] {
        grid-template-columns: 1fr;
    }

    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-board[b-7ryqrs1mq2] {
        grid-template-columns: 1fr;
    }

    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-cpc-figure-row[b-7ryqrs1mq2] {
        grid-template-columns: 1fr;
    }

    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-detail[b-7ryqrs1mq2] {
        position: static;
    }
}

@media (max-width: 680px) {
    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-top[b-7ryqrs1mq2],
    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-head[b-7ryqrs1mq2],
    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-head[b-7ryqrs1mq2] {
        align-items: flex-start;
        flex-direction: column;
    }

    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-map-tools[b-7ryqrs1mq2] {
        align-items: flex-start;
        flex-direction: column;
    }

    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-official-links[b-7ryqrs1mq2] { justify-content: flex-start; }

    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-climate-kpis[b-7ryqrs1mq2] {
        grid-template-columns: 1fr;
    }

    .drybulkdash-dash-wrap .drybulkweather-tab .drybulkweather-top[b-7ryqrs1mq2]  .dash-freshness-pill {
        width: 100%;
    }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_300_Congestion.razor.rz.scp.css */
/* Congestion tab. The Port Ledger table + cells now render through the shared
   SsyAccordionTable + cell kit (Common/Dashboard), so only the page layout,
   ledger header tools, legend colour hooks, and table width remain here. */

.drybulkdash-congestion[b-3p5dsvs2jy] {
    /* layout (grid + row template) comes from ssy-fit-grid on the root */
    gap: 6px;
}

.drybulkdash-congestion[b-3p5dsvs2jy]  .drybulkdash-congestion-grid {
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drybulkdash-congestion[b-3p5dsvs2jy]  .drybulkdash-port-ledger {
    min-width: 0;
}

/* Wide ledger keeps its own min-width so it scrolls horizontally on narrow viewports. No overflow
   is declared here on purpose: inside the fit breakpoint ssy-fit-scroll-xy on the table wrapper
   supplies it, and below that the SsyExceptionLedger panel hosting this table is rendered with
   ScrollX, so .ssy-dashboard-panel__body is already the horizontal scroll container. */
.drybulkdash-congestion[b-3p5dsvs2jy]  .ssya-table {
    min-width: 1120px;
    font-size: var(--ssy-fs-base);
}

.drybulkdash-congestion[b-3p5dsvs2jy]  .ssy-bandtrack {
    height: 17px;
}

.drybulkdash-congestion[b-3p5dsvs2jy]  .ssy-bandmark-primary {
    width: 12px;
    height: 12px;
}

.drybulkdash-congestion[b-3p5dsvs2jy]  .ssy-bandmark-secondary {
    width: 10px;
    height: 10px;
}

.drybulkdash-congestion[b-3p5dsvs2jy]  .ssy-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- ledger header tools (HeaderActions) --- */
.drybulkdash-congestion[b-3p5dsvs2jy]  .drybulkdash-ledger-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.drybulkdash-congestion[b-3p5dsvs2jy]  .drybulkdash-ledger-tools > span {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.drybulkdash-congestion[b-3p5dsvs2jy]  .drybulkdash-legend-hot {
    color: var(--drybulkdash-warn);
}

.drybulkdash-congestion[b-3p5dsvs2jy]  .drybulkdash-legend-cool {
    color: var(--drybulkdash-up);
}

/* Chart grid wraps intrinsically via SsyGrid MinCol - no viewport columns here. */

/* Fit layout handled by the shared ssy-fit-* grammar (SsyDashboardShell.razor):
   root = ssy-fit-grid (KPI + charts auto, ledger 1fr), ledger card =
   ssy-fit-col, its accordion wrap = ssy-fit-scroll-xy (sticky headers come
   from the shared tablewrap). No tab-specific lock CSS needed. */
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_400_Volumes.razor.rz.scp.css */
/* ============================================================
   Dry Bulk Dashboard - Weekly Volumes tab. All selectors scoped to
   .drybulkdash-vol; palette + card vars inherited from the
   .drybulkdash-dash-wrap shell. Light-terminal idiom: hairline rules,
   tabular figures, colour only on deltas / band position.
   ============================================================ */

.drybulkdash-vol[b-5rm7fllbc9] {
    /* layout (flex column) comes from ssy-fit-flex on the root */
    gap: 6px;
    --ssy-dash-warn: var(--drybulkdash-down);
}

/* Nav + controls now live in the shared SsyCommandBar (ssy-cmdbar-* classes,
   styled by that component); no per-tab toolbar/measure-pill CSS needed here. */

/* ---- active panel: compact tiles (no viewport-fill stretch) ---- */
.drybulkdash-vol .drybulkdash-vol-panel[b-5rm7fllbc9] {
    display: grid;
    gap: 6px;
    align-content: start;
    /* Content-sized rows, not shares of the panel's fixed height. The panel is a
       fixed-height scroll container, so an auto row divides that height between
       children: adding the by-producer footnotes below the board starved the board
       to its summary row, the chart cards collapsed to zero height, and their SVGs
       painted over what followed. Each child now takes the height it needs
       and the panel scrolls, which is what ssy-fit-scroll is for. */
    grid-auto-rows: max-content;
    /* no inner top padding: the pane height is fixed leftover flex space, so
       (border-box) padding here forces a few-px scroll; the root gap spaces it. */
}

/* ---- section layout: ledger + ONE total chart, subordinates below ----
   Same two-band structure as _410 Overview. Plain divs rather than SsyDashboardBoard
   because a board is one flow of grid items and this needs two grids with different
   column counts. No ::deep here: both elements are written in this component's own
   markup and carry its scope attribute (the summary WRAP still needs ::deep - that
   class sits on SsyDataTable's root). Rows are max-content, not a fit-fill lock:
   a section can carry 42 cards and the panel scrolls, unlike Overview's fixed nine. */
.drybulkdash-vol .drybulkdash-vol-section[b-5rm7fllbc9] {
    display: grid;
    grid-auto-rows: max-content;
    gap: 6px;
    min-width: 0;
}

.drybulkdash-vol .drybulkdash-vol-hero[b-5rm7fllbc9] {
    display: grid;
    --ssy-grid-cols: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-columns: var(--ssy-grid-cols);
    gap: 6px;
    min-width: 0;
}

.drybulkdash-vol .drybulkdash-vol-cardgrid[b-5rm7fllbc9] {
    display: grid;
    --ssy-grid-cols: repeat(4, minmax(0, 1fr));
    grid-template-columns: var(--ssy-grid-cols);
    gap: 6px;
    min-width: 0;
}

/* The ledger fills its hero cell and scrolls inside it, so a long section (minor bulks
   runs to 25 rows) cannot push the total chart off the top of the page. */
.drybulkdash-vol .drybulkdash-vol-hero[b-5rm7fllbc9]  .drybulkdash-vol-summary-wrap {
    height: 100%;
    overflow-y: auto;
}

/* ---- summary table: the command surface ---- */
.drybulkdash-vol[b-5rm7fllbc9]  .drybulkdash-vol-summary-wrap {
    height: auto;
    min-height: 100%;
    overflow-x: visible;
    background: var(--drybulkdash-surface);
    border: 1px solid var(--drybulkdash-card-border);
    border-radius: 4px;
    padding: 2px 3px 3px;
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary {
    table-layout: fixed;
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary th,
.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td {
    height: 20px;
    padding: 2px 6px;
    font-size: var(--ssy-fs-tiny);
    line-height: 1.1;
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary th {
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--drybulkdash-text-muted);
    border-bottom: 1px solid rgba(0, 0, 97, 0.35);
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary th.col-key,
.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td.col-key { width: 24%; }
.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary th.col-band,
.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td.col-band { width: 8%; text-align: center; }
.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary th:not(.col-key):not(.col-band),
.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td:not(.col-key):not(.col-band) { width: 11.33%; }

.drybulkdash-vol[b-5rm7fllbc9]  .drybulkdash-vol-series-name {
    display: inline-block;
    max-width: 72%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    font-weight: 650;
}

.drybulkdash-vol[b-5rm7fllbc9]  .drybulkdash-vol-series-type {
    margin-left: 5px;
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25px;
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td.metric {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td.metric .drybulkdash-vol-metric {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    white-space: nowrap;
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td.metric .drybulkdash-vol-metric strong {
    font-size: var(--ssy-fs-tiny);
    font-weight: 650;
    color: var(--drybulkdash-text);
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td.metric .drybulkdash-vol-metric span {
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td.metric .ssy-cool {
    color: var(--drybulkdash-up);
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td.metric .ssy-hot {
    color: var(--drybulkdash-down);
}

.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary td.metric .ssy-delta-flat {
    color: var(--drybulkdash-text-muted);
}

/* ---- band-position cell (shared SsyBandBar renders the strip) ---- */
.drybulkdash-vol[b-5rm7fllbc9]  .drybulkdash-vol-bandna {
    color: var(--drybulkdash-text-muted);
}

/* ---- row tick-in + hover spotlight ---- */
@keyframes drybulkdash-vol-rowin-b-5rm7fllbc9 {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}
.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary tbody tr {
    animation: drybulkdash-vol-rowin-b-5rm7fllbc9 240ms ease-out backwards;
    animation-delay: calc(var(--row-i, 0) * 18ms);
    cursor: default;
}
.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary tbody tr:hover,
.drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary tbody tr.drybulkdash-vol-hot {
    background: var(--drybulkdash-row-active-bg);
}
@media (prefers-reduced-motion: reduce) {
    .drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary tbody tr { animation: none; }
}

/* ---- chart cards: header metric row + hover halo ---- */
.drybulkdash-vol .drybulkdash-vol-cardwrap[b-5rm7fllbc9] {
    min-width: 0;
    border-radius: 4px;
    transition: box-shadow 0.15s ease;
}
.drybulkdash-vol .drybulkdash-vol-cardwrap:hover[b-5rm7fllbc9],
.drybulkdash-vol .drybulkdash-vol-cardwrap.drybulkdash-vol-hot[b-5rm7fllbc9] {
    box-shadow: 0 0 0 1px rgba(0, 0, 97, 0.25);
}
.drybulkdash-vol .drybulkdash-vol-cardwrap[b-5rm7fllbc9]  .ssy-card { height: 100%; }

.drybulkdash-vol[b-5rm7fllbc9]  .drybulkdash-vol-headmetric {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 2px 1px;
    white-space: nowrap;
}
.drybulkdash-vol[b-5rm7fllbc9]  .drybulkdash-vol-headmetric .ssy-delta-inline strong {
    font-size: var(--ssy-fs-base);
    font-weight: 750;
    color: var(--drybulkdash-blue);
    font-variant-numeric: tabular-nums;
}
.drybulkdash-vol[b-5rm7fllbc9]  .drybulkdash-vol-headmetric .ssy-delta-inline span {
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
}

/* ---- by-producer footnotes (shared-berth, gap and threshold declarations) ---- */
.drybulkdash-vol .drybulkdash-vol-attrib[b-5rm7fllbc9] {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}
.drybulkdash-vol .drybulkdash-vol-attrib-foot[b-5rm7fllbc9] {
    font-size: var(--ssy-fs-small);
    line-height: 1.4;
    color: var(--drybulkdash-text-dim);
    background: rgba(242, 169, 0, 0.08);
    border: 1px solid rgba(242, 169, 0, 0.35);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 0;
}
.drybulkdash-vol .drybulkdash-vol-attrib-foot b[b-5rm7fllbc9] { color: var(--drybulkdash-down); }

/* Coverage line reads as a clean bill of health when nothing is unattributed, and as a
   flag when something is. Same shape either way so the eye finds it in the same place. */
.drybulkdash-vol .drybulkdash-vol-attrib-foot.ok[b-5rm7fllbc9] {
    background: rgba(0, 32, 91, 0.04);
    border-color: var(--drybulkdash-card-border);
}
.drybulkdash-vol .drybulkdash-vol-attrib-foot.ok b[b-5rm7fllbc9] { color: var(--drybulkdash-text); }

/* ---- footer ---- */
.drybulkdash-vol .drybulkdash-vol-foot[b-5rm7fllbc9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 4px 2px 2px;
    border-top: 1px solid var(--drybulkdash-divider);
    font-size: var(--ssy-fs-small);
    color: var(--drybulkdash-text-muted);
}
.drybulkdash-vol .drybulkdash-vol-gap[b-5rm7fllbc9] { font-style: italic; }
/* The scope line closes the footer: pushed right so it does not read as a third sentence in
   the band/source note, and normal-weight because it is a record of the controls above, not
   a caveat about the data. */
.drybulkdash-vol .drybulkdash-vol-scope[b-5rm7fllbc9] { margin-left: auto; }

/* Fit layout handled by the shared ssy-fit-* grammar (SsyDashboardShell.razor):
   root = ssy-fit-flex, panel = ssy-fit-scroll (internal scroll pane for the
   variable-count chart grid; no scrollbar when the active view fits).
   No tab-specific lock CSS needed. */

@media (max-width: 1100px), (max-height: 768px) {
    /* Narrow or short: both bands collapse to a single column, so the total chart
       sits under the ledger rather than beside it and the cards follow. */
    .drybulkdash-vol .drybulkdash-vol-hero[b-5rm7fllbc9],
    .drybulkdash-vol .drybulkdash-vol-cardgrid[b-5rm7fllbc9] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The ledger stops filling a fixed hero cell once it is stacked - it should take
       its natural height and let the page scroll, not scroll inside itself. */
    .drybulkdash-vol .drybulkdash-vol-hero[b-5rm7fllbc9]  .drybulkdash-vol-summary-wrap {
        height: auto;
        overflow-y: visible;
    }

    .drybulkdash-vol .drybulkdash-vol-cardwrap[b-5rm7fllbc9],
    .drybulkdash-vol .drybulkdash-vol-cardwrap[b-5rm7fllbc9]  .ssy-card,
    .drybulkdash-vol .drybulkdash-vol-cardwrap[b-5rm7fllbc9]  .ssy-chart-card-slot {
        width: 100%;
        max-width: 100%;
    }

    .drybulkdash-vol[b-5rm7fllbc9]  .drybulkdash-vol-summary-wrap {
        overflow-x: auto;
    }

    .drybulkdash-vol[b-5rm7fllbc9]  table.drybulkdash-vol-summary {
        min-width: 850px;
    }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_410_VolumesOverview.razor.rz.scp.css */
.drybulkdash-vol-overview[b-k1xwiwngbt] {
    gap: 6px;
    min-height: 0;
}

/* Hero band: summary table | grand-total chart. --ssy-grid-cols is REQUIRED — the
   ssy-fit-band lock rule reads it for grid-template-columns; without it the band
   collapses to a single 1fr column. */
.drybulkdash-vol-overview .drybulkdash-vol-overview-hero[b-k1xwiwngbt] {
    display: grid;
    --ssy-grid-cols: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-columns: var(--ssy-grid-cols);
    gap: 6px;
    min-width: 0;
}

.drybulkdash-vol-overview .drybulkdash-vol-overview-grid[b-k1xwiwngbt] {
    display: grid;
    --ssy-grid-cols: repeat(4, minmax(0, 1fr));
    grid-template-columns: var(--ssy-grid-cols);
    gap: 6px;
    min-width: 0;
}

.drybulkdash-vol-overview .drybulkdash-vol-cardwrap[b-k1xwiwngbt] {
    min-width: 0;
    border-radius: 4px;
    transition: box-shadow 0.15s ease;
}
.drybulkdash-vol-overview .drybulkdash-vol-cardwrap:hover[b-k1xwiwngbt],
.drybulkdash-vol-overview .drybulkdash-vol-cardwrap.drybulkdash-vol-hot[b-k1xwiwngbt] {
    box-shadow: 0 0 0 1px rgba(0, 0, 97, 0.25);
}
/* Unconditional: `height: 100%` against an auto-height parent resolves to
   `auto`, so this needs no lock gate. It used to carry a restated copy of the
   lock breakpoint, which the grammar says lives in exactly one place. */
.drybulkdash-vol-overview .drybulkdash-vol-cardwrap[b-k1xwiwngbt]  .ssy-card {
    height: 100%;
}

/* The summary table fills its hero cell and scrolls internally (it can carry
   11 rows: global total + 8 regions + rest of world). */
.drybulkdash-vol-overview[b-k1xwiwngbt]  .drybulkdash-vol-summary-wrap {
    height: 100%;
    overflow-y: auto;
}

/* 768, not 700: 700 left a dead band at heights 701-768 where neither this
   block nor the lock applied. Width term is this tab's own narrow degrade. */
@media (max-width: 1100px), (max-height: 768px) {
    .drybulkdash-vol-overview .drybulkdash-vol-overview-hero[b-k1xwiwngbt],
    .drybulkdash-vol-overview .drybulkdash-vol-overview-grid[b-k1xwiwngbt] {
        --ssy-grid-cols: minmax(0, 1fr);
        grid-template-columns: var(--ssy-grid-cols);
    }

    .drybulkdash-vol-overview[b-k1xwiwngbt],
    .drybulkdash-vol-overview .drybulkdash-vol-overview-hero[b-k1xwiwngbt],
    .drybulkdash-vol-overview .drybulkdash-vol-overview-grid[b-k1xwiwngbt],
    .drybulkdash-vol-overview .drybulkdash-vol-cardwrap[b-k1xwiwngbt] {
        width: 100%;
        min-width: 0;
        height: auto;
    }

    .drybulkdash-vol-overview[b-k1xwiwngbt] {
        grid-template-rows: auto auto !important;
    }

    .drybulkdash-vol-overview .drybulkdash-vol-cardwrap[b-k1xwiwngbt]  .ssy-card {
        height: auto !important;
    }

    .drybulkdash-vol-overview[b-k1xwiwngbt]  .drybulkdash-vol-summary-wrap {
        height: auto !important;
        min-height: 0;
        max-height: 22rem;
        overflow: auto;
    }

    .drybulkdash-vol-overview[b-k1xwiwngbt]  table.drybulkdash-vol-summary {
        min-width: 850px;
    }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_500_Bunkers.razor.rz.scp.css */
.drybulk-bunkers[b-nwg8vqs8mi] {
    --drybulk-bunk-gutter-x: 1px;
    --drybulk-bunk-gutter-y: 3px;
    display: grid;
    gap: 5px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .ssy-card {
    padding: var(--drybulk-bunk-gutter-y) var(--drybulk-bunk-gutter-x);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .ssy-card-head {
    min-height: 18px;
    margin-bottom: 3px;
    padding-inline: 0;
}

.drybulk-bunkers[b-nwg8vqs8mi]  table.ssy-dash-table th,
.drybulk-bunkers[b-nwg8vqs8mi]  table.ssy-dash-table td {
    padding-inline: 2px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-wrap {
    overflow: auto;
    border-top: 1px solid var(--drybulkdash-card-border-soft);
    scrollbar-width: thin;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-col-route {
    width: 280px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-col-hub {
    width: 100px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-col-tight {
    width: 60px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-col-price {
    width: 70px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-col-move {
    width: 60px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-col-alt {
    width: 140px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-col-port,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-col-route {
    padding-left: 1px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-col-route {
    min-width: 360px;
    max-width: none;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-table .drybulk-bunk-col-route {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--drybulkdash-card-bg, #fff);
    box-shadow: 1px 0 0 var(--drybulkdash-card-border-soft);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-table thead .drybulk-bunk-col-route {
    z-index: 4;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-table tr:hover .drybulk-bunk-col-route,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-table tr.drybulk-bunk-row-muted .drybulk-bunk-col-route {
    background: var(--drybulkdash-row-active-bg);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-line {
    display: grid;
    grid-template-columns: minmax(38px, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-line b,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-line b {
    color: var(--drybulkdash-blue);
    font-weight: 950;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-line span,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-fwd-empty {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-cost-dn {
    color: var(--drybulkdash-up);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-cost-up {
    color: var(--drybulkdash-down);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-flat {
    color: var(--drybulkdash-text-muted);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-head-tools,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-legend,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-toggle,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stale,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-outlier {
    display: inline-flex;
    align-items: center;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-head-tools {
    gap: 8px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-head-tools > span,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-legend {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-legend {
    gap: 4px;
    font-size: var(--ssy-fs-tiny);
    letter-spacing: 0.3px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-legend-sw {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-legend-sw.drybulk-bunk-heat-high {
    background: color-mix(in srgb, var(--drybulkdash-down) 55%, transparent);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-legend-sw.drybulk-bunk-heat-low {
    background: color-mix(in srgb, var(--drybulkdash-up) 55%, transparent);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-feed,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-toggle,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-controls select {
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 4px;
    background: var(--drybulkdash-row-active-bg);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-feed {
    border-radius: 999px;
    padding: 2px 8px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-toggle button {
    height: 22px;
    border: 0;
    color: var(--drybulkdash-text-muted);
    font-family: inherit;
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
    line-height: 1;
    padding: 0 9px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-toggle {
    overflow: hidden;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-toggle button {
    border-right: 1px solid var(--drybulkdash-card-border-soft);
    background: transparent;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-toggle button:last-child {
    border-right: 0;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-toggle .drybulk-bunk-toggle-active {
    background: var(--drybulkdash-blue);
    color: #fff;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-clickable {
    cursor: pointer;
}

.drybulk-bunkers[b-nwg8vqs8mi]  tr:hover .drybulk-bunk-clickable,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-row.drybulk-bunk-clickable:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  tr.drybulk-bunk-row-selected td,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-row.drybulk-bunk-row-selected,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-row.drybulk-bunk-clickable:hover {
    background: var(--drybulkdash-row-active-bg);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stale,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-outlier {
    margin-left: 4px;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 3px;
    background: var(--drybulkdash-row-active-bg);
    color: var(--drybulkdash-down);
    font-size: var(--ssy-fs-micro);
    font-weight: 950;
    line-height: 1;
    padding: 2px 4px;
    text-transform: uppercase;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-tape .drybulk-bunk-group-start {
    border-left: 1px solid var(--drybulkdash-card-border);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-tape .drybulk-bunk-group-row th {
    color: var(--drybulkdash-blue);
    text-align: center;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-tape .drybulk-bunk-subhead th {
    top: 16px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-col-spark,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-spark-cell {
    width: 70px;
    min-width: 70px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-spark-cell {
    height: 24px;
    padding: 0 1px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-fwd-cell span,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-fwd-cell small {
    display: block;
    line-height: 1.05;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-fwd-cell span {
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-small);
    font-weight: 950;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-fwd-cell small {
    font-size: var(--ssy-fs-micro);
    font-weight: 950;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-top-grid {
    align-items: stretch;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-top-grid > .ssy-card,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-card,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-card,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-spreads-card,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Design heights, stated once - while viewport-locked the ssy-fit-band
   grammar (SsyDashboardShell.razor) overrides them so cards stretch to
   their band; unlocked they are the flowing page-scroll heights. */
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-top-grid > .ssy-card {
    height: 200px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-card,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-card,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-spreads-card {
    height: 246px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand {
    height: 214px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-table th,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-table td {
    height: 18px;
    padding-block: 1px;
    line-height: 1.05;
    white-space: nowrap;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-table th {
    font-size: var(--ssy-fs-micro);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-table td {
    font-size: var(--ssy-fs-tiny);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand {
    padding-bottom: 5px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-tape-card .drybulk-bunk-table-wrap,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-card .drybulk-bunk-route-wrap,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-bars,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-history-chart,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand-chart,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-spreads-body,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-spreads-chart {
    flex: 1;
    min-height: 0;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-bars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    padding: 4px var(--drybulk-bunk-gutter-x) 6px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-row span {
    overflow: hidden;
    color: var(--drybulkdash-blue);
    font-size: var(--ssy-fs-small);
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-bar-track {
    overflow: hidden;
    height: 25px;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 3px;
    background: var(--drybulkdash-row-active-bg);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 46px;
    color: #fff;
    padding-right: 4px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-bar b,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-row i {
    font-size: var(--ssy-fs-tiny);
    font-weight: 950;
    line-height: 1;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-row i {
    font-style: normal;
    text-align: right;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-alt {
    color: var(--drybulkdash-up);
    font-weight: 900;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand-grid,
.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand-grid {
    padding: 0 var(--drybulk-bunk-gutter-x) 5px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand-grid div {
    display: grid;
    gap: 2px;
    min-width: 0;
    min-height: 49px;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 3px;
    background: var(--drybulkdash-row-active-bg);
    padding: 5px var(--drybulk-bunk-gutter-x);
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand-grid strong {
    overflow: hidden;
    color: var(--drybulkdash-blue);
    font-size: var(--ssy-fs-display-lg);
    font-weight: 950;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand-grid small {
    overflow: hidden;
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-micro);
    font-weight: 750;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-controls {
    margin-bottom: 4px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-controls label {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin: 0;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-controls select {
    width: 100%;
    min-width: 0;
    height: 23px;
    color: var(--drybulkdash-text);
    font-family: inherit;
    font-size: var(--ssy-fs-small);
    font-weight: 850;
    padding: 2px 5px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-spreads-body {
    display: flex;
    gap: 8px;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-spreads-table {
    flex: 0 0 auto;
    align-self: flex-start;
}

.drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-spreads-table td {
    height: 17px;
}

/* Band grids (top/route/analytics) wrap intrinsically via SsyGrid MinCol -
   no viewport columns here. */

/* Viewport lock: handled entirely by the shared ssy-fit-* grammar
   (SsyDashboardShell.razor) - root carries ssy-fit-tab + ssy-fit-grid
   with the band ratios in --ssy-fit-rows, and the three band grids carry
   ssy-fit-band. No tab-specific lock CSS needed. */

/* Deliberate narrow-viewport degrade. */
@media (max-width: 1100px) {
    .drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-controls,
    .drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand-grid {
        grid-template-columns: 1fr;
    }

    .drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-top-grid > .ssy-card,
    .drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-route-card,
    .drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-stem-card,
    .drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-spreads-card,
    .drybulk-bunkers[b-nwg8vqs8mi]  .drybulk-bunk-demand {
        height: auto;
        min-height: 200px;
    }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_600_Commodities.razor.rz.scp.css */
.drybulkdash-commodities[b-9u0g5w4i1w] {
    min-width: 0;
}

.drybulkdash-commodities .drybulkdash-commodities-workspace[b-9u0g5w4i1w] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.drybulkdash-commodities .drybulkdash-commodities-status[b-9u0g5w4i1w] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ssy-space-2);
    min-height: 20px;
    padding-inline: var(--ssy-space-2);
    border-bottom: 1px solid var(--ssy-dash-border, #e1e8ed);
    background: var(--ssy-dash-surface, #fff);
    color: var(--ssy-dash-muted, #798e98);
    font-size: var(--ssy-fs-micro);
}

.drybulkdash-commodities .drybulkdash-commodities-status .is-stale[b-9u0g5w4i1w] {
    color: var(--ssy-dash-warning, #9a6700);
    font-weight: 700;
}

.drybulkdash-commodities .drybulkdash-commodities-status .ssy-link-button[b-9u0g5w4i1w] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ssy-dash-brand, #000061);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.drybulkdash-commodities .drybulkdash-commodities-pressure[b-9u0g5w4i1w] {
    display: inline-flex;
    align-items: end;
    gap: 2px;
    height: 18px;
    padding-inline: var(--ssy-space-2);
    opacity: .45;
}

.drybulkdash-commodities .drybulkdash-commodities-pressure i[b-9u0g5w4i1w] {
    display: block;
    width: 3px;
    background: currentColor;
}

.drybulkdash-commodities .drybulkdash-commodities-pressure i:nth-child(1)[b-9u0g5w4i1w],
.drybulkdash-commodities .drybulkdash-commodities-pressure i:nth-child(5)[b-9u0g5w4i1w] { height: 4px; }
.drybulkdash-commodities .drybulkdash-commodities-pressure i:nth-child(2)[b-9u0g5w4i1w],
.drybulkdash-commodities .drybulkdash-commodities-pressure i:nth-child(4)[b-9u0g5w4i1w] { height: 8px; }
.drybulkdash-commodities .drybulkdash-commodities-pressure i:nth-child(3)[b-9u0g5w4i1w] { height: 13px; }

.drybulkdash-commodities .drybulkdash-commodities-loading[b-9u0g5w4i1w] {
    display: grid;
    gap: var(--ssy-space-2);
    padding: var(--ssy-space-2);
}

@media (max-width: 720px) {
    .drybulkdash-commodities[b-9u0g5w4i1w]  .ssy-cmdbar.has-left.has-right {
        grid-template-columns: max-content max-content max-content;
        justify-content: start;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .drybulkdash-commodities .drybulkdash-commodities-status[b-9u0g5w4i1w] {
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_605_CommoditiesBoard.razor.rz.scp.css */
.drybulkdash-commodities-board[b-hmso2n1e2c] {
    gap: var(--ssy-space-2);
    background: var(--ssy-dash-canvas, #f5f7fa);
}

/* Panel views fill the viewport rather than scrolling - the grid is a fit-band, so
   however many panels a view carries, they share the height. */
.drybulkdash-commodities-bands[b-hmso2n1e2c] {
    padding: var(--ssy-space-1) var(--ssy-space-2) var(--ssy-space-2);
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-grid {
    gap: var(--ssy-space-2);
}

/* The chart fills its CARD rather than forcing a design height.
   This used to need `min-height: 0 !important` because SsyChartCard published its Height as
   an INLINE min-height that no stylesheet could beat - the floor stopped the chart shrinking
   in a short band and its x-axis labels printed over the card below ("the dates are broken"
   on a tight view was an overflowing chart, not wrong data). The floor is now a var that the
   fit grammar releases in height-constrained bands, so nothing is needed here but the fill. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-grid .ssy-chart-card-slot {
    height: 100%;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-grid > .ssy-card {
    min-height: 0;
}

/* Dense cards cannot let a long description wrap into the chart or collide with the expand
   affordance. The full wording remains in the chart's accessible heading and expanded view. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-grid .ssy-card-title,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup-chart .ssy-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dense arb charts use the legend as their series-identification surface. Highcharts'
   optional direct series labels otherwise land on top of neighbouring lane lines. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .highcharts-series-label {
    display: none;
}

/* Rotated producer labels belong inside the cost-curve plot. Highcharts deliberately
   permits these labels to overflow its SVG; clip that overflow at the curve card so
   it cannot cover the title and legend of the following row. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-supply-curve .highcharts-container,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-supply-curve .highcharts-root {
    overflow: hidden !important;
}

/* Hero: ladder table beside the chart it drives. No card chrome on the table - it reads
   as a continuation of the page, like the ledgers elsewhere on the dashboard. */
.drybulkdash-commodities-hero[b-hmso2n1e2c] {
    padding: var(--ssy-space-1) var(--ssy-space-2) var(--ssy-space-2);
}

.drybulkdash-commodities-hero-table[b-hmso2n1e2c] {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 2px 3px 3px;
    border: 1px solid var(--drybulkdash-card-border, #e1e8ed);
    border-radius: 4px;
    background: var(--drybulkdash-surface, #fff);
}

.drybulkdash-commodities-hero-table > :last-child[b-hmso2n1e2c] {
    min-height: 0;
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, var(--ssy-dash-brand, #000061) 35%, transparent) transparent;
    scrollbar-width: thin;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder thead th,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--drybulkdash-surface, #fff);
}

/* Ladder chrome mirrors the Volumes summary table: 20px rows, tiny type, fixed layout,
   brand rule under the head. Tight enough that the full ladder fits without scrolling. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder {
    table-layout: fixed;
    width: 100%;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder th,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder td {
    height: 18px;
    padding: 1px 6px;
    font-size: var(--ssy-fs-tiny);
    line-height: 1.05;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder th {
    border-bottom: 1px solid rgba(0, 0, 97, 0.35);
    color: var(--drybulkdash-text-muted, #798e98);
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder td {
    font-variant-numeric: tabular-nums;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder td.col-label {
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder td.col-last {
    font-weight: 700;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder th.col-label,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder td.col-label { width: 27%; }
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder th.col-last,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder td.col-last { width: 12%; }
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder th.col-unit,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder td.col-unit { width: 9%; }
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder th.col-freq,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder td.col-freq { width: 6%; }
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder th.col-source,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder td.col-source { width: 11%; }

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder td.col-source {
    color: var(--ssy-dash-muted, #798e98);
    font-size: var(--ssy-fs-micro);
    white-space: nowrap;
}

/* Family separators: a muted label row, not a heading - the families are self-evident. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder tbody tr.group td {
    position: sticky;
    top: 18px;
    z-index: 1;
    height: 14px;
    padding-top: 4px;
    border-bottom: 1px solid rgba(0, 0, 97, 0.12);
    background: none;
    color: var(--ssy-dash-muted, #798e98);
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-align: left;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder tbody tr.group {
    cursor: default;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder tbody tr.group:hover td {
    background: none;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder tbody tr:focus-visible {
    outline: 2px solid var(--ssy-dash-focus, #1688c9);
    outline-offset: -2px;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .col-unit {
    color: var(--ssy-dash-muted, #798e98);
    font-size: var(--ssy-fs-micro);
    white-space: nowrap;
}

/* Heat: three magnitude buckets per direction, tinted behind the number. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  td.col-delta.up.l2,
.drybulkdash-commodities-board[b-hmso2n1e2c]  td.col-delta.up.l3 { color: #017c78; }
.drybulkdash-commodities-board[b-hmso2n1e2c]  td.col-delta.dn.l2,
.drybulkdash-commodities-board[b-hmso2n1e2c]  td.col-delta.dn.l3 { color: #c22558; }
.drybulkdash-commodities-board[b-hmso2n1e2c]  td.col-delta.up.l1 { background: rgba(1, 163, 158, 0.06); }
.drybulkdash-commodities-board[b-hmso2n1e2c]  td.col-delta.up.l2 { background: rgba(1, 163, 158, 0.12); }
.drybulkdash-commodities-board[b-hmso2n1e2c]  td.col-delta.up.l3 { background: rgba(1, 163, 158, 0.2); }
.drybulkdash-commodities-board[b-hmso2n1e2c]  td.col-delta.dn.l1 { background: rgba(235, 56, 113, 0.06); }
.drybulkdash-commodities-board[b-hmso2n1e2c]  td.col-delta.dn.l2 { background: rgba(235, 56, 113, 0.12); }
.drybulkdash-commodities-board[b-hmso2n1e2c]  td.col-delta.dn.l3 { background: rgba(235, 56, 113, 0.2); }

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder tbody tr {
    cursor: pointer;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder tbody tr:hover td {
    background: rgba(0, 0, 97, 0.05);
}

/* Selected row: brand bar, tinted band and a bolder label - unmistakable at a glance
   without competing with the heat tints in the change columns. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder tbody tr.on td,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder tbody tr.on td.col-delta {
    background: rgba(0, 0, 97, 0.10);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 97, 0.22), inset 0 1px 0 rgba(0, 0, 97, 0.22);
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder tbody tr.on td.col-label {
    box-shadow: inset 3px 0 0 var(--ssy-dash-brand, #000061),
                inset 0 -1px 0 rgba(0, 0, 97, 0.22), inset 0 1px 0 rgba(0, 0, 97, 0.22);
    color: var(--ssy-dash-brand, #000061);
    font-weight: 800;
}

/* Build-up table: the same chrome as the ladder, transposed. Regions are columns because the
   comparison the reader wants is across routes on one line item, and there are only ever a
   handful of line items - so rows can be roomier than the ladder's 18px. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup {
    table-layout: fixed;
    width: 100%;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup th,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup td {
    height: 22px;
    padding: 1px 6px;
    font-size: var(--ssy-fs-tiny);
    line-height: 1.05;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup th {
    border-bottom: 1px solid rgba(0, 0, 97, 0.35);
    color: var(--drybulkdash-text-muted, #798e98);
    cursor: pointer;
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup th.col-num,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup td.col-num,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup td.col-delta {
    text-align: right;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup td.col-delta {
    font-variant-numeric: tabular-nums;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup td.col-num {
    font-variant-numeric: tabular-nums;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup td.col-label {
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup th.col-label,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup td.col-label { width: 26%; }

/* Charges read muted rather than red: on a cost stack every input line is negative, so red on
   all of them would carry no information and would fight the change rows below. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup td.col-num.dn {
    color: var(--ssy-dash-muted, #798e98);
}

/* The total is the point of the table: rule above it and heavier type, the one place the eye
   should land first. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup tbody tr.total td {
    border-top: 1px solid rgba(0, 0, 97, 0.35);
    color: var(--ssy-dash-brand, #000061);
    font-weight: 800;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup tbody tr.total td.col-num.dn {
    color: #c22558;
}

/* Change rows sit apart from the build-up: they describe the total, not another line item. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup tbody tr.delta td {
    height: 18px;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup tbody tr.delta td.col-label {
    color: var(--ssy-dash-muted, #798e98);
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    letter-spacing: 0.6px;
}

/* As-of row: the quietest thing on the table. It qualifies the numbers above rather than
   competing with them, so micro type and muted, separated by a hairline. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup tbody tr.asof td {
    height: 16px;
    border-top: 1px solid rgba(0, 0, 97, 0.12);
    color: var(--ssy-dash-muted, #798e98);
    font-size: var(--ssy-fs-micro);
    white-space: nowrap;
}

/* Selected column: brand tint down the whole column, matching the ladder's selected row. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup th.on {
    box-shadow: inset 0 2px 0 var(--ssy-dash-brand, #000061);
    color: var(--ssy-dash-brand, #000061);
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup td.col-num.on {
    background: rgba(0, 0, 97, 0.07);
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-buildup th:focus-visible {
    outline: 2px solid var(--ssy-dash-focus, #1688c9);
    outline-offset: -2px;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .ssy-dash-table th.col-label,
.drybulkdash-commodities-board[b-hmso2n1e2c]  .ssy-dash-table td.col-label {
    text-align: left;
}

.drybulkdash-commodities-board[b-hmso2n1e2c]  .ssy-dash-table td.col-label {
    color: var(--ssy-dash-brand, #000061);
    font-weight: 750;
}

@media (max-width: 1100px) {
    .drybulkdash-commodities-bands[b-hmso2n1e2c] {
        padding-inline: var(--ssy-space-1);
    }
}

/* Multi-select build-up columns: a deselected column stays in the table - the table is the data -
   but dims to show it is out of the panels below. */
.drybulkdash-commodities-buildup th.is-muted[b-hmso2n1e2c],
.drybulkdash-commodities-buildup td.is-muted[b-hmso2n1e2c] {
    opacity: .38;
}


/* See _610's copy: a stale row is dimmed rather than given an As-of column. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  tr.is-stale {
    color: var(--ssy-dash-muted, #798e98);
}

/* An odd number of paired panels leaves the last one alone in a 2-up row with an empty cell beside
   it. Span it instead. (This rule existed before against `.drybulkdash-commodities-band`, which is
   _610's scope and could never match it.)

   Scoped to TWO-column sections, which is the only arithmetic it describes. `:nth-child(odd)` means
   "alone in its row" only when the row holds two; in a three- or four-column section it fires on any
   odd-indexed last card whether or not that card is alone, and when the card genuinely is alone the
   result is worse than the hole it fixes - one chart stretched across four columns at a single row's
   height is mostly empty plot. A short last row simply ends there instead. */
.drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-grid.is-cols-2 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    /* The KPI strip takes its column count from a var now, so this is an
       ordinary cascade win rather than an !important fight with an inline style. */
    .drybulkdash-commodities-board[b-hmso2n1e2c]  .ssy-kpi-strip {
        --ssy-kpi-cols: 1;
    }

    .drybulkdash-commodities-board .drybulkdash-commodities-hero[b-hmso2n1e2c] {
        grid-template-columns: minmax(0, 1fr);
    }

    .drybulkdash-commodities-board .drybulkdash-commodities-hero-table[b-hmso2n1e2c] {
        min-height: 420px;
    }

    .drybulkdash-commodities-board[b-hmso2n1e2c]  .drybulkdash-commodities-ladder {
        min-width: 720px;
    }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_610_Commodities_Overview.razor.rz.scp.css */
.drybulkdash-commodities-overview[b-g4en5nerv9] {
    gap: var(--ssy-space-2);
    background: var(--ssy-dash-canvas, #f5f7fa);
}

/* Six boxes, one per sub-tab, three up. Each scrolls internally so a dense chain
   never pushes the grid past the viewport - the row cap in the component keeps
   the common case from needing to scroll at all. */
.drybulkdash-commodities-overview-grid[b-g4en5nerv9] {
    flex: 0 1 auto;
    min-height: 0;
    gap: var(--ssy-space-2);
    padding: var(--ssy-space-2);
}


.drybulkdash-commodities-overview-grid > .drybulkdash-commodities-band[b-g4en5nerv9] {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.drybulkdash-commodities-overview-grid > .drybulkdash-commodities-band > :last-child[b-g4en5nerv9] {
    min-height: 0;
    overflow-y: auto;
}

.drybulkdash-commodities-band[b-g4en5nerv9] {
    overflow: hidden;
    border: 1px solid var(--ssy-dash-border, #e1e8ed);
    border-radius: 4px;
    background: var(--ssy-dash-surface, #fff);
}

.drybulkdash-commodities-band > header[b-g4en5nerv9] {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding-inline: var(--ssy-space-2);
    border-bottom: 1px solid var(--ssy-dash-border, #e1e8ed);
}

.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-dash-table th {
    height: 26px;
    padding: 4px 10px;
}

.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-dash-table td {
    height: 32px;
    padding: 5px 10px;
}

.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-dash-table th.col-label,
.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-dash-table td.col-label {
    width: 28%;
    text-align: left;
}

.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-dash-table th.col-unit,
.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-dash-table td.col-unit {
    color: var(--ssy-dash-muted, #798e98);
    font-size: 10px;
    white-space: nowrap;
}

.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-dash-table th.col-spark,
.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-dash-table td.col-spark {
    width: 62px;
    padding-inline: 6px;
}

.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ssy-dash-brand, #000061);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-link-button:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.drybulkdash-commodities-overview[b-g4en5nerv9]  .ssy-link-button:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--ssy-dash-focus, #1688c9);
    outline-offset: 2px;
}

/* A series whose feed has stopped. Dimmed, not hidden: the last print is still the last thing the
   market said, and a broker may want it - it just must not read as today's. Row title carries the
   date and the age. Threshold is cadence-scaled in DryBulkCommoditiesHelpers.IsStale. */
.drybulkdash-commodities-overview[b-g4en5nerv9]  tr.is-stale {
    color: var(--ssy-dash-muted, #798e98);
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_6C0_Commodities_CoalArb.razor.rz.scp.css */
/* Only the wrapper is this page's own - the board owns the panels, and SsyOverlayDialog owns the
   assumptions overlay. position:relative is what the overlay takes its inset:0 from. */
.drybulkdash-dash-wrap .drybulkdash-coalarb[b-81izywzwfu] { gap: 4px; position: relative; }

.drybulkdash-assumptions-table[b-81izywzwfu] { overflow: auto; max-height: min(58vh, 520px); }
.drybulkdash-assumptions-table:focus-visible[b-81izywzwfu] { outline: 2px solid var(--ssy-color-focus, #009dc9); outline-offset: -2px; }
.drybulkdash-assumptions-table table[b-81izywzwfu] { min-width: 1320px; }
.drybulkdash-assumptions-table th[b-81izywzwfu] { position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.drybulkdash-assumptions-table .drybulkdash-assumptions-groups th[b-81izywzwfu] { top: 0; text-align: center; }
.drybulkdash-assumptions-table .drybulkdash-assumptions-groups + tr th[b-81izywzwfu] { top: 25px; }
.drybulkdash-assumptions-table .drybulkdash-pin-origin[b-81izywzwfu] { position: sticky; left: 0; z-index: 4; min-width: 112px; }
.drybulkdash-assumptions-table .drybulkdash-pin-load[b-81izywzwfu] { position: sticky; left: 112px; z-index: 4; min-width: 116px; }
.drybulkdash-assumptions-table td.drybulkdash-pin-origin[b-81izywzwfu],
.drybulkdash-assumptions-table td.drybulkdash-pin-load[b-81izywzwfu] { background: var(--ssy-color-surface, #fff); }
.drybulkdash-assumptions-method[b-81izywzwfu] { margin-top: 6px; }
.drybulkdash-assumptions-method summary[b-81izywzwfu] { cursor: pointer; font-weight: 700; }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_6D0_Commodities_CokingArb.razor.rz.scp.css */
/* See _6C0's copy: wrapper only; SsyOverlayDialog owns the overlay chrome. */
.drybulkdash-dash-wrap .drybulkdash-cokingarb[b-f9abi7jtc0] { gap: 4px; position: relative; }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_700_Macro.razor.rz.scp.css */
/* ============================================================
   Dry Bulk Dashboard - Macro tab. Console-tight: dense grids, small type,
   minimal whitespace. All selectors scoped to .drybulkdash-macro; palette
   inherited from the .drybulkdash-dash-wrap shell vars. Child-component
   internals (SsyGrid / SsyCard) are reached with ::deep.
   ============================================================ */

.drybulkdash-macro[b-60hb4pt15y] {
    /* Business-cycle quadrant colours (expansion / slowdown / contraction / recovery) */
    --drybulkdash-macro-q-exp: #01A179;
    --drybulkdash-macro-q-slow: #F2A900;
    --drybulkdash-macro-q-con: #E5006D;
    --drybulkdash-macro-q-rec: var(--ssy-colour-main-bright-blue);
    /* layout (flex column) comes from the root's ssy-fit-flex class */
    gap: 7px;
}

/* ---- direction colours (shared chip classes) ---- */
.drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-up { color: var(--drybulkdash-up); }
.drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-dn { color: var(--drybulkdash-down); }
.drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-neu { color: var(--drybulkdash-text-muted); }

.drybulkdash-macro .drybulkdash-macro-ribbon-sub[b-60hb4pt15y] {
    font-size: var(--ssy-fs-small);
    color: var(--drybulkdash-text-dim);
}
/* ---- command bar controls ---- */
.drybulkdash-macro .drybulkdash-macro-range[b-60hb4pt15y] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.drybulkdash-macro .drybulkdash-macro-method-btn[b-60hb4pt15y] {
    margin-left: 0;
}

/* anchor scroll target offset so the sticky toolbar doesn't cover section heads */
.drybulkdash-macro [id^="macro-"][b-60hb4pt15y] { scroll-margin-top: 34px; }

/* ---- methodology popover ---- */
.drybulkdash-macro .drybulkdash-macro-method[b-60hb4pt15y] {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 7vh 16px;
    background: rgba(20, 32, 46, 0.34);
}
.drybulkdash-macro .drybulkdash-macro-method-card[b-60hb4pt15y] {
    max-width: 560px;
    background: var(--drybulkdash-surface);
    border: 1px solid var(--drybulkdash-card-border);
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 32, 91, 0.22);
    padding: 12px 16px 14px;
    font-size: var(--ssy-fs-base);
    line-height: 1.4;
    color: var(--drybulkdash-text-dim);
}
.drybulkdash-macro .drybulkdash-macro-method-card header[b-60hb4pt15y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.drybulkdash-macro .drybulkdash-macro-method-card h3[b-60hb4pt15y] {
    margin: 0;
    font-size: var(--ssy-fs-lg);
    font-weight: 800;
    color: var(--drybulkdash-blue);
}
.drybulkdash-macro .drybulkdash-macro-method-card header button[b-60hb4pt15y] {
    border: 0;
    background: transparent;
    font-size: var(--ssy-fs-display-lg);
    line-height: 1;
    color: var(--drybulkdash-text-muted);
    cursor: pointer;
}
.drybulkdash-macro .drybulkdash-macro-method-card p[b-60hb4pt15y] { margin: 6px 0; }
.drybulkdash-macro .drybulkdash-macro-method-card ul[b-60hb4pt15y] { margin: 4px 0; padding-left: 16px; }
.drybulkdash-macro .drybulkdash-macro-method-card li[b-60hb4pt15y] { margin: 2px 0; }
.drybulkdash-macro .drybulkdash-macro-method-src[b-60hb4pt15y] { color: var(--drybulkdash-text-muted); }

/* Chart expand button + expand overlay now live in the shared SsyChartCard /
   SsyChartExpandModal modules (one source of truth across dashboards). */

/* ---- per-source recency chips ---- */
.drybulkdash-macro .drybulkdash-macro-recency[b-60hb4pt15y] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}
.drybulkdash-macro .drybulkdash-macro-recchip[b-60hb4pt15y] {
    border: 1px solid var(--drybulkdash-card-border);
    border-radius: 3px;
    padding: 0 4px;
}
.drybulkdash-macro .drybulkdash-macro-recchip em[b-60hb4pt15y] {
    font-style: normal;
    font-weight: 700;
    color: var(--drybulkdash-text-dim);
}

/* ---- pulse placeholder reads as intentionally locked, not unfinished ---- */
.drybulkdash-macro .drybulkdash-macro-pulse-rail[b-60hb4pt15y]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 3px, transparent 3px, transparent 6px);
    pointer-events: none;
}
.drybulkdash-macro .drybulkdash-macro-pulse-tag[b-60hb4pt15y]::before {
    content: "\1F512";
    margin-right: 3px;
    font-size: var(--ssy-fs-micro);
    opacity: 0.7;
}

/* ---- Zone 1: pulse placeholder + headline strip ---- */
.drybulkdash-macro .drybulkdash-macro-top[b-60hb4pt15y] {
    display: block;
    min-width: 0;
}
.drybulkdash-macro .drybulkdash-macro-pulse[b-60hb4pt15y] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--drybulkdash-card-border);
    border-radius: 4px;
    background: linear-gradient(180deg, #fff, #FAFCFE);
}
.drybulkdash-macro .drybulkdash-macro-pulse-head[b-60hb4pt15y] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.drybulkdash-macro .drybulkdash-macro-pulse-title[b-60hb4pt15y] {
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    color: var(--drybulkdash-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.drybulkdash-macro .drybulkdash-macro-pulse-tag[b-60hb4pt15y] {
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--drybulkdash-text-muted);
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 3px;
    padding: 1px 4px;
}
.drybulkdash-macro .drybulkdash-macro-pulse-rail[b-60hb4pt15y] {
    position: relative;
    height: 13px;
    border-radius: 999px;
    margin-top: 4px;
    background: linear-gradient(90deg,
        var(--drybulkdash-down) 0%,
        #E7CFA6 38%,
        #EBE7DC 50%,
        #BFE0CE 62%,
        var(--drybulkdash-up) 100%);
    opacity: 0.55;
}
.drybulkdash-macro .drybulkdash-macro-pulse-needle[b-60hb4pt15y] {
    position: absolute;
    left: 50%;
    top: -3px;
    bottom: -3px;
    width: 2px;
    transform: translateX(-50%);
    background: var(--drybulkdash-text-dim);
    border-radius: 2px;
}
.drybulkdash-macro .drybulkdash-macro-pulse-needle[b-60hb4pt15y]::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 7px;
    height: 7px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--drybulkdash-text-dim);
}
.drybulkdash-macro .drybulkdash-macro-pulse-scale[b-60hb4pt15y] {
    display: flex;
    justify-content: space-between;
    font-size: var(--ssy-fs-tiny);
    font-weight: 600;
    color: var(--drybulkdash-text-muted);
}
.drybulkdash-macro .drybulkdash-macro-pulse-note[b-60hb4pt15y] {
    font-size: var(--ssy-fs-tiny);
    line-height: 1.3;
    color: var(--drybulkdash-text-dim);
}
.drybulkdash-macro .drybulkdash-macro-headline[b-60hb4pt15y] {
    min-width: 0;
}

/* ---- sections (layout from ssy-fit-col ssy-fit-fill on the element) ---- */
.drybulkdash-macro .drybulkdash-macro-sec[b-60hb4pt15y] {
    gap: 5px;
}
.drybulkdash-macro .drybulkdash-macro-sechead[b-60hb4pt15y] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 2px 1px;
    border-top: 1px solid var(--drybulkdash-divider);
}
.drybulkdash-macro .drybulkdash-macro-sechead h2[b-60hb4pt15y] {
    margin: 0;
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    color: var(--drybulkdash-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.drybulkdash-macro .drybulkdash-macro-sechead h2 span[b-60hb4pt15y] {
    font-size: var(--ssy-fs-small);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--drybulkdash-text-dim);
}
.drybulkdash-macro .drybulkdash-macro-breadth-tally[b-60hb4pt15y] {
    margin-left: auto;
    font-size: var(--ssy-fs-small);
    color: var(--drybulkdash-text-dim);
}
.drybulkdash-macro .drybulkdash-macro-breadth-tally b[b-60hb4pt15y] { font-weight: 800; }

/* SsyGrid is a child component -> reach its root via ::deep */
.drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-grid {
    gap: 6px;
}

/* Five-chart China workbench: use a balanced 3-up / 2-up composition instead
   of leaving a conspicuous empty third cell on the second row. */
@media (min-width: 1101px) {
    .drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-grid:has(> :nth-child(5):last-child) {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-grid:has(> :nth-child(5):last-child) > :nth-child(-n + 3) {
        grid-column: span 2;
    }

    .drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-grid:has(> :nth-child(5):last-child) > :nth-child(n + 4) {
        grid-column: span 3;
    }
}

/* ---- note / context cards ---- */
.drybulkdash-macro .drybulkdash-macro-note-card[b-60hb4pt15y] {
    border: 1px solid var(--drybulkdash-card-border);
    border-radius: 4px;
    background: var(--drybulkdash-surface);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.drybulkdash-macro .drybulkdash-macro-note-card h4[b-60hb4pt15y] {
    margin: 0;
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--drybulkdash-blue);
}
.drybulkdash-macro .drybulkdash-macro-note-card p[b-60hb4pt15y] {
    margin: 0;
    font-size: var(--ssy-fs-small);
    line-height: 1.35;
    color: var(--drybulkdash-text-dim);
}
.drybulkdash-macro .drybulkdash-macro-gap[b-60hb4pt15y] {
    color: var(--drybulkdash-text-muted);
    font-style: italic;
}

/* ---- cycle quadrant key ---- */
.drybulkdash-macro .drybulkdash-macro-cyclekey[b-60hb4pt15y] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 2px 2px 0;
    font-size: var(--ssy-fs-tiny);
    color: var(--drybulkdash-text-dim);
}
.drybulkdash-macro .drybulkdash-macro-q[b-60hb4pt15y] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.drybulkdash-macro .drybulkdash-macro-q[b-60hb4pt15y]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.drybulkdash-macro .drybulkdash-macro-q-exp[b-60hb4pt15y]::before { background: var(--drybulkdash-macro-q-exp); }
.drybulkdash-macro .drybulkdash-macro-q-slow[b-60hb4pt15y]::before { background: var(--drybulkdash-macro-q-slow); }
.drybulkdash-macro .drybulkdash-macro-q-con[b-60hb4pt15y]::before { background: var(--drybulkdash-macro-q-con); }
.drybulkdash-macro .drybulkdash-macro-q-rec[b-60hb4pt15y]::before { background: var(--drybulkdash-macro-q-rec); }

/* ---- heatmap card: let the table use the full card width ---- */
.drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-heatcard {
    overflow-x: auto;
}

/* ---- footer ---- */
.drybulkdash-macro .drybulkdash-macro-foot[b-60hb4pt15y] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 5px 2px 2px;
    border-top: 1px solid var(--drybulkdash-divider);
    font-size: var(--ssy-fs-tiny);
    color: var(--drybulkdash-text-muted);
}
.drybulkdash-macro .drybulkdash-macro-foot b[b-60hb4pt15y] { color: var(--drybulkdash-text-dim); }

/* Deliberate narrow-viewport degrade. */
@media (max-width: 1100px) {
    .drybulkdash-macro .drybulkdash-macro-top[b-60hb4pt15y] {
        grid-template-columns: 1fr;
    }
}

/* ---- Fit layout handled by the shared ssy-fit-* grammar
   (SsyDashboardShell.razor) - root carries ssy-fit-tab + ssy-fit-flex,
   zone sections ssy-fit-col ssy-fit-fill, zone grids ssy-fit-band
   ssy-fit-fill. Only the heatmap-fill treatment is tab-specific: while the
   card is stretched (locked) the heat table grows so extra height
   distributes across its rows, legend pinned underneath; unlocked the card
   is content-sized and these rules are no-ops. ---- */
.drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-heatcard {
    overflow: auto;
}

.drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-heatcard .drybulkdash-macro-breadth {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.drybulkdash-macro[b-60hb4pt15y]  .drybulkdash-macro-heatcard .drybulkdash-macro-heat {
    flex: 1;
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_710_PmiBreadth.razor.rz.scp.css */
/* ============================================================
   PMI breadth heatmap — self-contained scoped styles. Cell background is an
   inline data-viz colour (HeatColor); everything else inherits the dashboard
   palette via the shell wrapper vars.
   ============================================================ */

.drybulkdash-macro-breadth[b-xhcxv2rzj1] {
    width: 100%;
    overflow-x: auto;
}

.drybulkdash-macro-heat[b-xhcxv2rzj1] {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: var(--ssy-fs-tiny);
}

.drybulkdash-macro-heat th[b-xhcxv2rzj1],
.drybulkdash-macro-heat td[b-xhcxv2rzj1] {
    padding: 0;
    text-align: center;
    border: 1px solid #fff;
}

.drybulkdash-macro-heat thead th[b-xhcxv2rzj1] {
    color: var(--drybulkdash-text-muted);
    font-weight: 700;
    font-size: var(--ssy-fs-tiny);
    line-height: 1.05;
    padding-bottom: 2px;
    vertical-align: bottom;
}

.drybulkdash-macro-heat-mhead span[b-xhcxv2rzj1] {
    display: block;
    font-size: var(--ssy-fs-micro);
    font-weight: 600;
    opacity: 0.7;
}

.drybulkdash-macro-heat-econ[b-xhcxv2rzj1] {
    text-align: left !important;
    white-space: nowrap;
    padding: 2px 6px 2px 2px !important;
    font-weight: 700;
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-small);
    position: sticky;
    left: 0;
    background: var(--drybulkdash-surface);
    z-index: 1;
}

.drybulkdash-macro-heat-cell[b-xhcxv2rzj1] {
    height: 17px;
    min-width: 22px;
    color: #20323B;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.drybulkdash-macro-heat-latest[b-xhcxv2rzj1],
.drybulkdash-macro-heat-mom[b-xhcxv2rzj1] {
    font-weight: 800;
    padding: 0 5px !important;
    white-space: nowrap;
    border-left: 2px solid var(--drybulkdash-row-line);
}

.drybulkdash-macro-heat-mom[b-xhcxv2rzj1] { font-size: var(--ssy-fs-tiny); }

.drybulkdash-macro-up[b-xhcxv2rzj1] { color: var(--drybulkdash-up); }
.drybulkdash-macro-dn[b-xhcxv2rzj1] { color: var(--drybulkdash-down); }

/* diffusion footer: count of economies in expansion per month */
.drybulkdash-macro-heat-diff td[b-xhcxv2rzj1] {
    font-weight: 800;
    font-size: var(--ssy-fs-tiny);
    color: var(--drybulkdash-text-dim);
    border-top: 2px solid var(--drybulkdash-card-border-soft);
    padding-top: 1px;
}
.drybulkdash-macro-heat-diff .drybulkdash-macro-heat-econ[b-xhcxv2rzj1] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-tiny);
}

/* legend */
.drybulkdash-macro-heat-legend[b-xhcxv2rzj1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--ssy-fs-tiny);
    color: var(--drybulkdash-text-muted);
}
.drybulkdash-macro-heat-scale[b-xhcxv2rzj1] {
    width: 64px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(219,48,58,0.78), rgba(219,48,58,0.12), rgba(1,161,121,0.12), rgba(1,161,121,0.78));
}
.drybulkdash-macro-heat-note[b-xhcxv2rzj1] {
    margin-left: auto;
    font-style: italic;
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_800_NewsSentiment.razor.rz.scp.css */
/* DamDb news sentiment tab. All selectors are scoped to the wrapper. */

.drybulkdash-news-sentiment[b-tdyn4zn6me] {
    /* row template comes from ssy-fit-grid on the root */
    gap: 10px;
    align-content: start;
}

.drybulkdash-news-sentiment .drybulkdash-news-workbench[b-tdyn4zn6me] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 10px;
    min-width: 0;
}

.drybulkdash-news-sentiment .drybulkdash-news-main[b-tdyn4zn6me] {
    min-width: 0;
}

/* rail: grid content; scroll behaviour from ssy-fit-scroll on the element */
.drybulkdash-news-sentiment .drybulkdash-news-rail[b-tdyn4zn6me] {
    display: grid;
    gap: 8px;
    align-content: start;
    width: 340px;
    min-width: 0;
}

/* --- KPI strip: mood gauge + bull/bear split. Lives in the main column above the
   feed (not full-width) so it never eats the sticky rail's vertical budget. One
   shared bordered card with an inner divider, mirroring SsyKpiStrip's chrome. --- */
.drybulkdash-news-sentiment .drybulkdash-news-kpis[b-tdyn4zn6me] {
    display: flex;
    width: auto;
    margin-bottom: 10px;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 4px;
    background: var(--drybulkdash-surface);
}

.drybulkdash-news-sentiment .drybulkdash-news-kpitile[b-tdyn4zn6me] {
    flex: 1 1 0;
    padding: 6px 16px 8px 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.drybulkdash-news-sentiment .drybulkdash-news-kpitile + .drybulkdash-news-kpitile[b-tdyn4zn6me] {
    border-left: 1px solid var(--drybulkdash-card-border-soft);
}

/* name + unit row — matches SsyKpiStrip: brand-blue uppercase name, muted unit */
.drybulkdash-news-sentiment .drybulkdash-news-kpitop[b-tdyn4zn6me] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 3px;
}

.drybulkdash-news-sentiment .drybulkdash-news-kpiname[b-tdyn4zn6me] {
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    color: var(--drybulkdash-blue);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.drybulkdash-news-sentiment .drybulkdash-news-kpiunit[b-tdyn4zn6me] {
    font-size: var(--ssy-fs-small);
    color: var(--drybulkdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* mood: value + word + WoW on one line, a slim −100..+100 bar with a marker below */
.drybulkdash-news-sentiment .drybulkdash-news-moodhead[b-tdyn4zn6me] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 9px;
}

.drybulkdash-news-sentiment .drybulkdash-news-kpival[b-tdyn4zn6me] {
    font-size: var(--ssy-fs-display-md);
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.drybulkdash-news-sentiment .drybulkdash-news-moodword[b-tdyn4zn6me] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    text-transform: capitalize;
}

.drybulkdash-news-sentiment .drybulkdash-news-wow[b-tdyn4zn6me] {
    margin-left: auto;
    align-self: baseline;
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.drybulkdash-news-sentiment .drybulkdash-news-moodbar[b-tdyn4zn6me] {
    position: relative;
    height: 8px;
    margin-top: auto;
    border-radius: 999px;
    /* fixed zones: bearish red / neutral grey (42–58%) / bullish green */
    background: linear-gradient(to right,
        var(--drybulkdash-down) 0%, var(--drybulkdash-down) 42%,
        var(--drybulkdash-card-border-soft) 42%, var(--drybulkdash-card-border-soft) 58%,
        var(--drybulkdash-up) 58%, var(--drybulkdash-up) 100%);
}

.drybulkdash-news-sentiment .drybulkdash-news-moodmarker[b-tdyn4zn6me] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: var(--drybulkdash-text);
    box-shadow: 0 0 0 1.5px var(--drybulkdash-surface);
}

.drybulkdash-news-sentiment .drybulkdash-news-wowlabel[b-tdyn4zn6me] {
    color: var(--drybulkdash-text);
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: -0.25px;
    margin-right: 3px;
}

/* momentum: 7d-vs-30d delta as the value, two mini baselines pinned to the bottom */
.drybulkdash-news-sentiment .drybulkdash-news-momsub[b-tdyn4zn6me] {
    display: flex;
    gap: 14px;
    margin-top: auto;
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    color: var(--drybulkdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
}

.drybulkdash-news-sentiment .drybulkdash-news-momsub strong[b-tdyn4zn6me] {
    font-weight: 800;
    margin-left: 3px;
}

.drybulkdash-news-sentiment .drybulkdash-news-momsub .drybulkdash-news-up[b-tdyn4zn6me] { color: var(--drybulkdash-up); }
.drybulkdash-news-sentiment .drybulkdash-news-momsub .drybulkdash-news-down[b-tdyn4zn6me] { color: var(--drybulkdash-down); }
.drybulkdash-news-sentiment .drybulkdash-news-momsub .drybulkdash-news-flat[b-tdyn4zn6me] { color: var(--drybulkdash-text-dim); }

/* split: counts as the value row, thin stacked bar pinned to the tile bottom */
.drybulkdash-news-sentiment .drybulkdash-news-splitnums[b-tdyn4zn6me] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 2px;
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    color: var(--drybulkdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.drybulkdash-news-sentiment .drybulkdash-news-splitnums strong[b-tdyn4zn6me] {
    font-size: var(--ssy-fs-display-md);
    font-weight: 700;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}

.drybulkdash-news-sentiment .drybulkdash-news-splitnums .drybulkdash-news-up strong[b-tdyn4zn6me] { color: var(--drybulkdash-up); }
.drybulkdash-news-sentiment .drybulkdash-news-splitnums .drybulkdash-news-down strong[b-tdyn4zn6me] { color: var(--drybulkdash-down); }
.drybulkdash-news-sentiment .drybulkdash-news-splitneutral strong[b-tdyn4zn6me] { color: var(--drybulkdash-text-dim); }

.drybulkdash-news-sentiment .drybulkdash-news-splitbar[b-tdyn4zn6me] {
    display: flex;
    height: 8px;
    margin-top: auto;
    border-radius: 999px;
    overflow: hidden;
    background: var(--drybulkdash-row-active-bg);
}

.drybulkdash-news-sentiment .drybulkdash-news-splitseg[b-tdyn4zn6me] { height: 100%; }
.drybulkdash-news-sentiment .drybulkdash-news-splitbull[b-tdyn4zn6me] { background: var(--drybulkdash-up); }
.drybulkdash-news-sentiment .drybulkdash-news-splitneu[b-tdyn4zn6me] { background: var(--drybulkdash-card-border-soft); }
.drybulkdash-news-sentiment .drybulkdash-news-splitbear[b-tdyn4zn6me] { background: var(--drybulkdash-down); }

.drybulkdash-news-sentiment .drybulkdash-news-kpival.drybulkdash-news-up[b-tdyn4zn6me] { color: var(--drybulkdash-up); }
.drybulkdash-news-sentiment .drybulkdash-news-kpival.drybulkdash-news-down[b-tdyn4zn6me] { color: var(--drybulkdash-down); }
.drybulkdash-news-sentiment .drybulkdash-news-kpival.drybulkdash-news-flat[b-tdyn4zn6me] { color: var(--drybulkdash-text); }
.drybulkdash-news-sentiment .drybulkdash-news-wow .drybulkdash-news-up[b-tdyn4zn6me] { color: var(--drybulkdash-up); }
.drybulkdash-news-sentiment .drybulkdash-news-wow .drybulkdash-news-down[b-tdyn4zn6me] { color: var(--drybulkdash-down); }
.drybulkdash-news-sentiment .drybulkdash-news-wow .drybulkdash-news-flat[b-tdyn4zn6me] { color: var(--drybulkdash-text-muted); }

/* --- state --- */
.drybulkdash-news-sentiment .drybulkdash-news-statebox[b-tdyn4zn6me] {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 36px 16px;
    color: var(--drybulkdash-text-muted);
    text-align: center;
}

.drybulkdash-news-sentiment .drybulkdash-news-statebox strong[b-tdyn4zn6me] {
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-xl);
}

/* --- card header tools --- */
.drybulkdash-news-sentiment .drybulkdash-news-headtools[b-tdyn4zn6me] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.drybulkdash-news-sentiment .drybulkdash-news-iconbtn[b-tdyn4zn6me] {
    border: 1px solid var(--drybulkdash-card-border-soft);
    background: var(--drybulkdash-surface);
    color: var(--drybulkdash-text-dim);
    border-radius: 6px;
    width: 24px;
    height: 24px;
    line-height: 1;
    font-size: var(--ssy-fs-lg);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.drybulkdash-news-sentiment .drybulkdash-news-iconbtn:hover[b-tdyn4zn6me] {
    color: var(--drybulkdash-blue);
}

.drybulkdash-news-sentiment .drybulkdash-spin[b-tdyn4zn6me] {
    display: inline-block;
    animation: drybulkdash-spin-b-tdyn4zn6me 0.8s linear infinite;
}

@keyframes drybulkdash-spin-b-tdyn4zn6me {
    to { transform: rotate(360deg); }
}

/* --- filters --- */
.drybulkdash-news-sentiment .drybulkdash-news-tools[b-tdyn4zn6me] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 2px 2px 7px 2px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--drybulkdash-row-line);
}

.drybulkdash-news-sentiment .drybulkdash-news-search[b-tdyn4zn6me] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--drybulkdash-card-border-soft);
    background: var(--drybulkdash-surface);
    border-radius: 999px;
    padding: 2px 12px;
    color: var(--drybulkdash-text-muted);
}

.drybulkdash-news-sentiment .drybulkdash-news-search input[b-tdyn4zn6me] {
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--ssy-fs-md);
    color: var(--drybulkdash-text);
    width: 210px;
    max-width: 52vw;
}

.drybulkdash-news-sentiment .drybulkdash-news-chips[b-tdyn4zn6me] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.drybulkdash-news-sentiment .drybulkdash-news-chip[b-tdyn4zn6me] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--drybulkdash-card-border-soft);
    background: var(--drybulkdash-surface);
    color: var(--drybulkdash-text-dim);
    border-radius: 999px;
    padding: 2px 8px;
    font-family: inherit;
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.drybulkdash-news-sentiment .drybulkdash-news-advanced[b-tdyn4zn6me] {
    flex-basis: 100%;
    min-width: 0;
}

.drybulkdash-news-sentiment .drybulkdash-news-advanced summary[b-tdyn4zn6me] {
    width: max-content;
    color: var(--drybulkdash-blue);
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    cursor: pointer;
    list-style-position: inside;
}

.drybulkdash-news-sentiment .drybulkdash-news-advanced-grid[b-tdyn4zn6me] {
    display: grid;
    gap: 7px;
    margin-top: 7px;
    padding: 8px;
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 6px;
    background: var(--drybulkdash-row-active-bg);
}

.drybulkdash-news-sentiment .drybulkdash-news-filtergroup[b-tdyn4zn6me] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
}

.drybulkdash-news-sentiment .drybulkdash-news-filtergroup > span[b-tdyn4zn6me] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    line-height: 20px;
    text-transform: uppercase;
}

.drybulkdash-news-sentiment .drybulkdash-news-chip:hover[b-tdyn4zn6me] {
    color: var(--drybulkdash-blue);
}

.drybulkdash-news-sentiment .drybulkdash-news-chip-on[b-tdyn4zn6me],
.drybulkdash-news-sentiment .drybulkdash-news-chip-on:hover[b-tdyn4zn6me] {
    background: var(--drybulkdash-blue);
    border-color: var(--drybulkdash-blue);
    color: #fff;
}

.drybulkdash-news-sentiment .drybulkdash-news-cnt[b-tdyn4zn6me] {
    margin-left: 5px;
    opacity: 0.7;
    font-size: var(--ssy-fs-small);
}

.drybulkdash-news-sentiment .drybulkdash-news-clear[b-tdyn4zn6me] {
    border: 1px solid var(--drybulkdash-accent);
    background: var(--drybulkdash-surface);
    color: var(--drybulkdash-blue);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: inherit;
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    cursor: pointer;
}

/* --- feed --- */
.drybulkdash-news-sentiment .drybulkdash-news-day[b-tdyn4zn6me] {
    margin: 9px 0 3px 0;
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.drybulkdash-news-sentiment .drybulkdash-news-item[b-tdyn4zn6me] {
    border-left: 3px solid var(--drybulkdash-card-border-soft);
    /* 3px, not 7px: the collapsed row is a single line, so the padding is what
       decides how many headlines fit the list. */
    padding: 3px 0 3px 10px;
    border-bottom: 1px solid var(--drybulkdash-row-line);
    cursor: pointer;
}

.drybulkdash-news-sentiment .drybulkdash-news-item:hover[b-tdyn4zn6me] {
    background: var(--drybulkdash-row-active-bg);
}

.drybulkdash-news-sentiment .drybulkdash-news-up[b-tdyn4zn6me] {
    border-left-color: var(--drybulkdash-up);
}

.drybulkdash-news-sentiment .drybulkdash-news-down[b-tdyn4zn6me] {
    border-left-color: var(--drybulkdash-down);
}

/* Single-line row: score | headline (truncates) | meta (holds its width). */
.drybulkdash-news-sentiment .drybulkdash-news-item-top[b-tdyn4zn6me] {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 8px;
}

.drybulkdash-news-sentiment .drybulkdash-news-score[b-tdyn4zn6me] {
    flex: 0 0 auto;
    min-width: 43px;
    font-size: var(--ssy-fs-md);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--drybulkdash-text-muted);
    padding-top: 1px;
}

.drybulkdash-news-sentiment .drybulkdash-news-up .drybulkdash-news-score[b-tdyn4zn6me],
.drybulkdash-news-sentiment .drybulkdash-news-pill.drybulkdash-news-up[b-tdyn4zn6me],
.drybulkdash-news-sentiment .drybulkdash-tb-val.drybulkdash-news-up[b-tdyn4zn6me] {
    color: var(--drybulkdash-up);
}

.drybulkdash-news-sentiment .drybulkdash-news-down .drybulkdash-news-score[b-tdyn4zn6me],
.drybulkdash-news-sentiment .drybulkdash-news-pill.drybulkdash-news-down[b-tdyn4zn6me],
.drybulkdash-news-sentiment .drybulkdash-tb-val.drybulkdash-news-down[b-tdyn4zn6me] {
    color: var(--drybulkdash-down);
}

/* Now rendered inside .drybulkdash-news-detail (expanded row) rather than in
   every collapsed row. */
.drybulkdash-news-sentiment .drybulkdash-news-takeaway[b-tdyn4zn6me] {
    margin: 0 0 3px 0;
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-md);
    font-weight: 800;
    line-height: 1.25;
}

.drybulkdash-news-sentiment .drybulkdash-news-title[b-tdyn4zn6me] {
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-md);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    /* Absorbs the leftover width and truncates rather than wrapping — wrapping
       is what made these rows 3 lines tall. Full text is in the title attribute
       and in the expanded detail. */
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drybulkdash-news-sentiment a.drybulkdash-news-title:hover[b-tdyn4zn6me] {
    color: var(--drybulkdash-blue);
    text-decoration: underline;
}

.drybulkdash-news-sentiment .drybulkdash-news-snippet[b-tdyn4zn6me] {
    margin: 3px 0 0 0;
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-base);
    line-height: 1.4;
}

.drybulkdash-news-sentiment .drybulkdash-news-meta[b-tdyn4zn6me] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    /* Sits beside the headline now, not under it. */
    flex: 0 0 auto;
    margin-top: 0;
}

.drybulkdash-news-sentiment .drybulkdash-news-pill[b-tdyn4zn6me],
.drybulkdash-news-sentiment .drybulkdash-news-tag[b-tdyn4zn6me],
.drybulkdash-news-sentiment .drybulkdash-news-driver[b-tdyn4zn6me],
.drybulkdash-news-sentiment .drybulkdash-news-detailchip[b-tdyn4zn6me] {
    border-radius: 999px;
    padding: 1px 7px;
    background: var(--drybulkdash-surface);
    border: 1px solid var(--drybulkdash-card-border-soft);
    font-size: var(--ssy-fs-base);
    font-weight: 700;
}

.drybulkdash-news-sentiment .drybulkdash-news-pill[b-tdyn4zn6me] {
    font-variant-numeric: tabular-nums;
}

.drybulkdash-news-sentiment .drybulkdash-news-materiality-high[b-tdyn4zn6me] {
    color: var(--drybulkdash-down);
}

.drybulkdash-news-sentiment .drybulkdash-news-materiality-medium[b-tdyn4zn6me] {
    color: var(--drybulkdash-warn);
}

.drybulkdash-news-sentiment .drybulkdash-news-materiality-low[b-tdyn4zn6me] {
    color: var(--drybulkdash-text-muted);
}

.drybulkdash-news-sentiment .drybulkdash-news-theme[b-tdyn4zn6me] {
    border: 0;
    background: var(--drybulkdash-row-active-bg);
    color: var(--drybulkdash-text-dim);
    border-radius: 999px;
    padding: 1px 7px;
    font-family: inherit;
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    cursor: pointer;
}

.drybulkdash-news-sentiment .drybulkdash-news-theme:hover[b-tdyn4zn6me] {
    color: var(--drybulkdash-blue);
}

.drybulkdash-news-sentiment .drybulkdash-news-srcdot[b-tdyn4zn6me] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 2px;
    flex: 0 0 auto;
}

.drybulkdash-news-sentiment .drybulkdash-news-source[b-tdyn4zn6me] {
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-base);
    font-weight: 700;
}

.drybulkdash-news-sentiment .drybulkdash-news-dot[b-tdyn4zn6me],
.drybulkdash-news-sentiment .drybulkdash-news-time[b-tdyn4zn6me] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-base);
    font-variant-numeric: tabular-nums;
}

.drybulkdash-news-sentiment .drybulkdash-news-driver[b-tdyn4zn6me] {
    color: var(--drybulkdash-blue);
}

.drybulkdash-news-sentiment .drybulkdash-news-detail[b-tdyn4zn6me] {
    margin-top: 7px;
    padding: 7px 9px;
    background: var(--drybulkdash-row-active-bg);
    border-radius: 6px;
}

.drybulkdash-news-sentiment .drybulkdash-news-detail p[b-tdyn4zn6me] {
    margin: 0 0 6px 0;
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-md);
    line-height: 1.45;
}

.drybulkdash-news-sentiment .drybulkdash-news-detailchip[b-tdyn4zn6me] {
    display: inline-flex;
    margin: 0 4px 4px 0;
}

.drybulkdash-news-sentiment .drybulkdash-news-more[b-tdyn4zn6me] {
    display: flex;
    justify-content: center;
    padding: 12px 0 2px 0;
}

.drybulkdash-news-sentiment .drybulkdash-news-more button[b-tdyn4zn6me] {
    border: 1px solid var(--drybulkdash-card-border-soft);
    background: var(--drybulkdash-surface);
    color: var(--drybulkdash-blue);
    border-radius: 999px;
    padding: 5px 16px;
    font-family: inherit;
    font-size: var(--ssy-fs-md);
    font-weight: 700;
    cursor: pointer;
}

.drybulkdash-news-sentiment .drybulkdash-news-empty[b-tdyn4zn6me] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-md);
    padding: 24px;
    text-align: center;
}

/* --- category breakdown bars --- */
.drybulkdash-news-sentiment .drybulkdash-themebars[b-tdyn4zn6me] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drybulkdash-news-sentiment .drybulkdash-themebar[b-tdyn4zn6me] {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    border-radius: 5px;
    padding: 1px 2px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.drybulkdash-news-sentiment .drybulkdash-themebar:hover[b-tdyn4zn6me],
.drybulkdash-news-sentiment .drybulkdash-themebar-on[b-tdyn4zn6me] {
    background: var(--drybulkdash-row-active-bg);
}

.drybulkdash-news-sentiment .drybulkdash-themebar-on[b-tdyn4zn6me] {
    box-shadow: inset 2px 0 0 var(--drybulkdash-blue);
}

.drybulkdash-news-sentiment .drybulkdash-tb-label[b-tdyn4zn6me] {
    font-size: var(--ssy-fs-base);
    font-weight: 600;
    color: var(--drybulkdash-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drybulkdash-news-sentiment .drybulkdash-tb-count[b-tdyn4zn6me] {
    color: var(--drybulkdash-text-muted);
    font-weight: 700;
    font-size: var(--ssy-fs-small);
}

.drybulkdash-news-sentiment .drybulkdash-tb-track[b-tdyn4zn6me] {
    position: relative;
    height: 8px;
    background: var(--drybulkdash-row-active-bg);
    border-radius: 3px;
}

.drybulkdash-news-sentiment .drybulkdash-tb-mid[b-tdyn4zn6me] {
    position: absolute;
    left: 50%;
    top: -1px;
    bottom: -1px;
    width: 1px;
    background: var(--drybulkdash-card-border-soft);
}

.drybulkdash-news-sentiment .drybulkdash-tb-fill[b-tdyn4zn6me] {
    position: absolute;
    top: 0;
    height: 8px;
    border-radius: 2px;
}

.drybulkdash-news-sentiment .drybulkdash-tb-up[b-tdyn4zn6me] {
    background: var(--drybulkdash-up);
}

.drybulkdash-news-sentiment .drybulkdash-tb-dn[b-tdyn4zn6me] {
    background: var(--drybulkdash-down);
}

.drybulkdash-news-sentiment .drybulkdash-tb-val[b-tdyn4zn6me] {
    text-align: right;
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* --- leaders --- */
.drybulkdash-news-sentiment .drybulkdash-news-leaders[b-tdyn4zn6me] {
    display: grid;
    gap: 8px;
}

.drybulkdash-news-sentiment .drybulkdash-news-leaders h4[b-tdyn4zn6me] {
    margin: 0 0 4px 0;
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.drybulkdash-news-sentiment .drybulkdash-news-leader[b-tdyn4zn6me] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 6px;
    align-items: center;
    padding: 4px 0;
    border-left: 3px solid var(--drybulkdash-card-border-soft);
    padding-left: 7px;
    text-decoration: none;
}

.drybulkdash-news-sentiment .drybulkdash-news-leader span[b-tdyn4zn6me] {
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-base);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drybulkdash-news-sentiment .drybulkdash-news-leader strong[b-tdyn4zn6me] {
    text-align: right;
    font-size: var(--ssy-fs-base);
    font-variant-numeric: tabular-nums;
}

.drybulkdash-news-sentiment .drybulkdash-news-leader:hover span[b-tdyn4zn6me] {
    color: var(--drybulkdash-blue);
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 1100px) {
    .drybulkdash-news-sentiment .drybulkdash-news-workbench[b-tdyn4zn6me] {
        grid-template-columns: 1fr;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-rail[b-tdyn4zn6me] {
        position: static;
        width: auto;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-kpis[b-tdyn4zn6me] {
        width: auto;
    }
}

/* Fit layout handled by the shared ssy-fit-* grammar (SsyDashboardShell.razor):
   root = ssy-fit-grid (workbench = the one row), main column = ssy-fit-col,
   feed card = ssy-fit-col ssy-fit-fill, feed list + rail = ssy-fit-scroll.
   No tab-specific lock CSS needed. */

/* Deliberate narrow-viewport degrade. */
@media (max-width: 760px) {
    .drybulkdash-news-sentiment .drybulkdash-news-kpis[b-tdyn4zn6me] {
        flex-direction: column;
        width: auto;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-kpitile + .drybulkdash-news-kpitile[b-tdyn4zn6me] {
        border-left: 0;
        border-top: 1px solid var(--drybulkdash-card-border-soft);
    }

    .drybulkdash-news-sentiment .drybulkdash-news-splitbar[b-tdyn4zn6me] {
        min-width: 0;
    }

    .drybulkdash-news-sentiment .drybulkdash-themebar[b-tdyn4zn6me] {
        grid-template-columns: 110px minmax(0, 1fr) 36px;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-item-top[b-tdyn4zn6me] {
        gap: 7px;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-score[b-tdyn4zn6me] {
        min-width: 38px;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-search input[b-tdyn4zn6me] {
        width: 170px;
    }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_900_Ffa.razor.rz.scp.css */
/* Root layout (grid, command-bar + workspace rows) comes from ssy-fit-grid +
   --ssy-fit-rows on the element (SsyDashboardShell.razor). */
.drybulkdash-ffa[b-rcren04v46] { --drybulkdash-ffa-cape:var(--ssy-colour-palette-royal-purple); --drybulkdash-ffa-asia:var(--ssy-colour-palette-golden-yellow); min-height:0; gap:4px; font-variant-numeric:tabular-nums; color:var(--drybulkdash-text); }
/* Command bar: shared SsyCommandBar component (Common/DashboardComponents_HA) -
   structure, ticker slots, controls, guide/date/readout and dark subtabs all
   live in SsyCommandBar.razor.css. Nothing bar-related here. */
.drybulkdash-ffa .drybulkdash-ffa-workspace[b-rcren04v46] { min-width:0; min-height:0; display:grid; gap:4px; align-content:start; overflow:auto; scrollbar-gutter:stable; }
.drybulkdash-ffa-mode-history .drybulkdash-ffa-workspace[b-rcren04v46] { grid-template-rows:minmax(0,1fr); overflow:hidden; }
.drybulkdash-ffa-mode-board .drybulkdash-ffa-workspace[b-rcren04v46] { grid-template-rows:minmax(245px,35fr) minmax(285px,40fr) minmax(165px,25fr); overflow:hidden; }
.drybulkdash-ffa-mode-board .drybulkdash-ffa-workspace > *[b-rcren04v46] { min-height:0; }
.drybulkdash-ffa-mode-flow .drybulkdash-ffa-workspace[b-rcren04v46],.drybulkdash-ffa-mode-spreads .drybulkdash-ffa-workspace[b-rcren04v46],.drybulkdash-ffa-mode-vol .drybulkdash-ffa-workspace[b-rcren04v46],.drybulkdash-ffa-mode-tech .drybulkdash-ffa-workspace[b-rcren04v46],.drybulkdash-ffa-mode-lab .drybulkdash-ffa-workspace[b-rcren04v46] { grid-template-rows:minmax(0,1fr); overflow:hidden; }
.drybulkdash-ffa-mode-flow .drybulkdash-ffa-workspace[b-rcren04v46]  > .drybulkdash-ffa-module,.drybulkdash-ffa-mode-vol .drybulkdash-ffa-workspace[b-rcren04v46]  > .drybulkdash-ffa-module,.drybulkdash-ffa-mode-tech .drybulkdash-ffa-workspace[b-rcren04v46]  > .drybulkdash-ffa-module,.drybulkdash-ffa-mode-lab .drybulkdash-ffa-workspace[b-rcren04v46]  > .drybulkdash-ffa-module { align-content:start; }
.drybulkdash-ffa .drybulkdash-ffa-board-analysis[b-rcren04v46] { min-height:0; display:grid; grid-template-columns:340px minmax(0,1fr); gap:4px; align-items:stretch; overflow:hidden; }
.drybulkdash-ffa .drybulkdash-ffa-board-charts[b-rcren04v46] { min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; min-width:0; align-items:stretch; overflow:hidden; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-module { display:grid; gap:3px; min-width:0; min-height:0; border:1px solid var(--drybulkdash-card-border); padding:0 3px 3px; background:var(--drybulkdash-surface); overflow:hidden; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-module > header { display:flex; align-items:center; justify-content:space-between; min-height:19px; margin:0 -3px; padding:0 4px; border-bottom:1px solid var(--drybulkdash-divider); background:var(--drybulkdash-tint-2); color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); text-transform:uppercase; letter-spacing:.35px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-module > header strong { color:var(--drybulkdash-text); font-weight:750; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-dash-table { table-layout:fixed; width:100%; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-dash-table th,.drybulkdash-ffa[b-rcren04v46]  .ssy-dash-table td { height:17px; padding:1px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--ssy-fs-micro); line-height:1.1; font-variant-numeric:tabular-nums; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-dash-table th { height:19px; color:var(--drybulkdash-text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.25px; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-dash-table th:not(:first-child),.drybulkdash-ffa[b-rcren04v46]  .ssy-dash-table td:not(:first-child) { text-align:right; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-dash-table tbody tr { cursor:pointer; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-dash-table tbody tr:hover,.drybulkdash-ffa[b-rcren04v46]  .ssy-dash-table tbody tr.drybulkdash-ffa-selected { background:var(--drybulkdash-row-active-bg); }
.drybulkdash-ffa[b-rcren04v46]  .ssy-cool { color:var(--drybulkdash-up); }
.drybulkdash-ffa[b-rcren04v46]  .ssy-hot { color:var(--drybulkdash-down); }
.drybulkdash-ffa[b-rcren04v46]  .ssy-delta-flat { color:var(--drybulkdash-text-muted); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-cell { width:100%; display:flex; justify-content:flex-end; border:0; background:transparent; cursor:pointer; color:var(--drybulkdash-text); font:inherit; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-matrix { table-layout:fixed; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-matrix-wrap { overflow:hidden; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-matrix th:first-child { width:42px; text-align:left; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-matrix td { position:relative; padding:0; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-board-pulse { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; padding-top:2px; border-top:1px solid var(--drybulkdash-divider); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-board-pulse article { min-height:32px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; gap:0 4px; padding:1px 4px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-tint-2); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-board-pulse span,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-board-pulse small { color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); text-transform:uppercase; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-board-pulse strong { text-align:right; font-size:var(--ssy-fs-small); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-board-pulse small { grid-column:1/-1; text-align:right; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-matrix td > .drybulkdash-ffa-heat { position:absolute; inset:0; border-radius:2px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-heat-up { background:color-mix(in srgb,var(--drybulkdash-up) var(--drybulkdash-ffa-heat-strength),transparent); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-heat-down { background:color-mix(in srgb,var(--drybulkdash-down) var(--drybulkdash-ffa-heat-strength),transparent); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-midonly { position:relative; z-index:1; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-midonly .ssy-delta > span { display:none; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-spot { border-bottom:1px solid var(--drybulkdash-divider); color:var(--drybulkdash-text-muted); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-spliced { border-left:2px dotted var(--drybulkdash-text-muted); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-selected .drybulkdash-ffa-cell { box-shadow:inset 0 0 0 1px var(--drybulkdash-blue); background:var(--drybulkdash-row-active-bg); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-thin { opacity:.55; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-spark { --ssy-dash-brand:var(--drybulkdash-text-muted); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-spark .ssy-spark { width:56px; height:11px; margin-left:auto; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-wrap { height:100%; overflow:auto; scrollbar-gutter:stable; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-layout { min-height:0; height:100%; display:block; overflow:hidden; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape { min-width:940px; }
.drybulkdash-ffa-mode-board[b-rcren04v46]  .drybulkdash-ffa-tape th,.drybulkdash-ffa-mode-board[b-rcren04v46]  .drybulkdash-ffa-tape td { height:18px; padding:1px 8px; font-size:10px; }
.drybulkdash-ffa-mode-board[b-rcren04v46]  .drybulkdash-ffa-tape th { height:20px; background:var(--drybulkdash-tint-2); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape tr.drybulkdash-ffa-group-start td { border-top:2px solid var(--drybulkdash-card-border); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape tr.drybulkdash-ffa-selected td:first-child { box-shadow:inset 3px 0 0 var(--drybulkdash-blue); font-weight:800; color:var(--drybulkdash-blue); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape .col-class { width:54px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape .col-contract { width:70px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape .col-price { width:60px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape .col-count { width:44px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape .col-width { width:50px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape .col-oi { width:60px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape .col-spark { width:54px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape th:first-child,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape td:first-child { position:sticky; left:0; z-index:2; background:var(--drybulkdash-surface); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape th:nth-child(2),.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape td:nth-child(2) { position:sticky; left:54px; z-index:2; background:var(--drybulkdash-surface); box-shadow:1px 0 0 var(--drybulkdash-divider); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape tbody tr:hover td:first-child,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape tbody tr:hover td:nth-child(2),.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape tbody tr.drybulkdash-ffa-selected td:first-child,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape tbody tr.drybulkdash-ffa-selected td:nth-child(2) { background:var(--drybulkdash-row-active-bg); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-detail { min-width:0; display:grid; grid-template-rows:20px minmax(0,1fr); gap:3px; padding:0 4px 3px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-tint-2); overflow:hidden; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-detail > header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--drybulkdash-divider); color:var(--drybulkdash-blue); font-size:var(--ssy-fs-micro); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-detail-body { min-height:0; display:grid; grid-template-columns:145px minmax(0,1fr); gap:6px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-detail-metrics { display:grid; grid-template-rows:repeat(6,minmax(0,1fr)); gap:1px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-detail-metrics span { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px; color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-detail-metrics strong { color:var(--drybulkdash-text); text-align:right; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-detail-spark { min-width:0; min-height:0; display:flex; align-items:stretch; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-detail-spark .ssy-spark { width:100%; height:100%; min-height:76px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-measpill { display:inline-flex; align-items:center; gap:2px; padding:1px; border:1px solid var(--drybulkdash-card-border-soft); border-radius:999px; background:var(--drybulkdash-row-active-bg); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-measpill button { border:0; border-radius:999px; padding:1px 7px; background:transparent; color:var(--drybulkdash-text-muted); font:inherit; font-size:var(--ssy-fs-micro); font-weight:700; cursor:pointer; text-transform:uppercase; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-measpill button.drybulkdash-ffa-meason { background:var(--drybulkdash-blue); color:var(--drybulkdash-surface); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-texttoggle { border:0; background:transparent; color:var(--drybulkdash-blue); font:inherit; font-size:var(--ssy-fs-micro); font-weight:700; cursor:pointer; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-sessionrail { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-settlement { min-height:0; display:grid; grid-template-columns:minmax(0,48fr) minmax(420px,52fr); gap:4px; overflow:hidden; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-settlement-ledger { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:3px; overflow:hidden; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clock { display:grid; grid-template-rows:auto 16px 11px; align-content:center; gap:2px; padding:2px 6px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-tint-2); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clock > header { display:flex; align-items:center; justify-content:space-between; color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); text-transform:uppercase; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clock > header strong { color:var(--drybulkdash-blue); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clockbar { position:relative; overflow:hidden; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-surface); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-window { position:absolute; top:0; bottom:0; left:33.333%; width:41.667%; background:var(--drybulkdash-row-active-bg); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-release-window { position:absolute; top:0; bottom:0; min-width:4px; background:color-mix(in srgb,var(--drybulkdash-accent) 35%,transparent); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-release-marker { position:absolute; top:0; bottom:0; z-index:2; width:2px; background:var(--drybulkdash-blue); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-release-marker.release-cape { background:var(--drybulkdash-ffa-cape); }.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-release-marker.release-dry { background:var(--drybulkdash-accent); }.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-release-marker.release-bfa { background:var(--drybulkdash-blue); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-release-marker.release-asia { background:var(--drybulkdash-ffa-asia); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-now { position:absolute; top:0; bottom:0; z-index:5; width:3px; background:var(--drybulkdash-down); box-shadow:0 0 0 1px var(--drybulkdash-surface); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-now::after { content:""; position:absolute; top:0; left:50%; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-1px); background:var(--drybulkdash-down); box-shadow:0 0 0 2px var(--drybulkdash-surface); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-now b { position:absolute; top:2px; left:7px; padding:1px 3px; border-radius:2px; background:var(--drybulkdash-down); color:#fff; font-size:7px; line-height:1; letter-spacing:.25px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-now-key { padding:1px 3px; border-radius:2px; background:var(--drybulkdash-down); color:#fff; font-size:7px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clocklabels { position:relative; color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); white-space:nowrap; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clocklabels span { position:absolute; transform:translateX(-50%); }.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clocklabels span:first-child { transform:none; }.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clocklabels .label-end { transform:translateX(-100%); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clocklabels .release-cape { color:var(--drybulkdash-ffa-cape); }.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clocklabels .release-dry { color:var(--drybulkdash-accent); }.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clocklabels .release-bfa { color:var(--drybulkdash-blue); font-weight:700; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clocklabels .release-asia { color:var(--drybulkdash-ffa-asia); font-weight:700; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-no-publication { opacity:.48; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-session-clock small { color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); text-align:right; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-tables { display:grid; grid-template-columns:minmax(360px,1fr); gap:4px; height:112px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-tables > div { min-width:0; border-right:1px solid var(--drybulkdash-divider); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-tables > div:last-child { border-right:0; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-ladder { height:112px; overflow-y:auto; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-main { display:grid; grid-template-columns:minmax(0,40fr) minmax(0,25fr) minmax(0,35fr); gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-heat { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-heroes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-positioning { display:grid; grid-template-columns:minmax(0,72fr) minmax(260px,28fr); gap:4px; min-height:0; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-positioning .drybulkdash-ffa-flow-ladder { height:231px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-secondary { display:grid; grid-template-columns:minmax(0,44fr) repeat(2,minmax(0,28fr)); gap:4px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-spreads { align-content:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-spread-matrices,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-spread-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-spread-matrices > * { border:1px solid var(--drybulkdash-card-border); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-roll-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-roll-row article { display:grid; grid-template-columns:1fr auto; gap:2px 6px; padding:4px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-tint-2); font-size:var(--ssy-fs-micro); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-roll-row small { color:var(--drybulkdash-text-muted); text-align:right; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-heroes,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-lab-heroes,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-lab-standard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-live { display:grid; grid-template-columns:minmax(440px,34fr) minmax(0,42fr) minmax(300px,24fr); gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-current { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-bottom,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-factor-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-support { display:grid; grid-template-columns:minmax(420px,56fr) minmax(0,44fr); gap:4px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-minors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-live { display:grid; grid-template-columns:minmax(0,68fr) minmax(360px,32fr); gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-score { height:345px; display:grid; align-content:start; gap:4px; padding:4px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-surface); overflow:hidden; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-score > strong { color:var(--drybulkdash-blue); font-size:var(--ssy-fs-small); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-factors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-context { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; min-height:72px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-factors article,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-tools article { display:grid; align-content:center; min-height:52px; padding:3px 5px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-tint-2); color:var(--drybulkdash-text); font-size:var(--ssy-fs-micro); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-regime { min-height:44px; display:grid; grid-template-columns:minmax(100px,1fr) minmax(120px,1fr); align-items:center; gap:1px 8px; padding:3px 6px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-tint-2); font-size:var(--ssy-fs-micro); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-regime span { color:var(--drybulkdash-text-muted); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-reliability { display:grid; gap:3px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-reliability article { min-height:38px; display:grid; grid-template-columns:34px repeat(3,minmax(0,1fr)); align-items:center; gap:4px; padding:2px 5px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-surface); font-size:var(--ssy-fs-micro); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-model-reliability span { color:var(--drybulkdash-text-muted); text-align:right; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-minis { display:grid; grid-template-columns:minmax(0,32fr) minmax(0,32fr) minmax(0,36fr); gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-mini-stack { display:grid; gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-options { display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:4px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-ledger { height:191px; display:grid; grid-template-rows:20px minmax(0,1fr); overflow:hidden; border:1px solid var(--drybulkdash-card-border); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-ledger > header { display:flex; align-items:center; justify-content:space-between; padding:0 5px; border-bottom:1px solid var(--drybulkdash-divider); background:var(--drybulkdash-tint-2); color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); text-transform:uppercase; letter-spacing:.3px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-ledger > header strong { color:var(--drybulkdash-blue); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-ledger > .ssy-table-wrap { min-height:0; overflow:auto; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-live .drybulkdash-ffa-options-ledger { height:209px; max-height:209px; overflow-y:auto; overflow-x:hidden; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-table tbody tr { height:26px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-table { width:100%; min-width:0; table-layout:fixed; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-table .col-time { width:84px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-table .col-class { width:48px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-table .col-contract { width:66px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-table .col-cp,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-table .col-venue { width:34px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-table .col-number { width:60px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-ledger thead th,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-ladder thead th { position:sticky; top:0; z-index:2; background:var(--drybulkdash-surface); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-lab-results { display:grid; grid-template-columns:minmax(0,58fr) minmax(0,42fr); gap:4px; min-height:105px; align-items:start; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-lab { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-lab article { display:grid; grid-auto-flow:row; border:1px solid var(--drybulkdash-card-border); padding:2px 3px; color:var(--drybulkdash-text); font-size:var(--ssy-fs-micro); line-height:1.05; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-range { display:inline-flex; gap:1px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-range button { border:0; padding:0 4px; background:transparent; color:var(--drybulkdash-text-muted); font:inherit; font-size:var(--ssy-fs-micro); cursor:pointer; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-range button.drybulkdash-ffa-range-on { color:var(--drybulkdash-blue); font-weight:750; text-decoration:underline; text-underline-offset:2px; }
.drybulkdash-ffa[b-rcren04v46]  details { border-top:1px solid var(--drybulkdash-divider); padding-top:3px; font-size:var(--ssy-fs-micro); }
/* One-layout: unlocked, the board rows content-size from their minimums and
   the page scrolls - no fallback template needed (SsyDashboardShell.razor doctrine). */
/* Deliberate narrow-viewport degrade. */
@media (max-width:1100px) { .drybulkdash-ffa .drybulkdash-ffa-boardtop[b-rcren04v46],.drybulkdash-ffa .drybulkdash-ffa-boardrail[b-rcren04v46],.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-tables,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-main,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-flow-heat,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-heroes,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-minis,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-vol-options,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-lab-heroes,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-lab-standard,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-lab-results { grid-template-columns:1fr; height:auto; max-height:none; } }

@media (max-width: 767px), (max-height: 768px) {
    .drybulkdash-ffa[b-rcren04v46],
    .drybulkdash-ffa .drybulkdash-ffa-workspace[b-rcren04v46] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .drybulkdash-ffa-mode-board .drybulkdash-ffa-workspace[b-rcren04v46],
    .drybulkdash-ffa-mode-flow .drybulkdash-ffa-workspace[b-rcren04v46],
    .drybulkdash-ffa-mode-spreads .drybulkdash-ffa-workspace[b-rcren04v46],
    .drybulkdash-ffa-mode-vol .drybulkdash-ffa-workspace[b-rcren04v46],
    .drybulkdash-ffa-mode-tech .drybulkdash-ffa-workspace[b-rcren04v46],
    .drybulkdash-ffa-mode-lab .drybulkdash-ffa-workspace[b-rcren04v46] {
        grid-template-rows: auto;
        overflow: visible;
    }

    .drybulkdash-ffa .drybulkdash-ffa-boardtop[b-rcren04v46],
    .drybulkdash-ffa .drybulkdash-ffa-boardrail[b-rcren04v46],
    .drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-module {
        overflow: visible;
    }

    .drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-matrix-wrap,
    .drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tape-wrap,
    .drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-options-ledger {
        max-width: 100%;
        overflow: auto;
        overscroll-behavior-inline: contain;
    }
}
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide { position:fixed; inset:0; z-index:1000; cursor:pointer; outline:none; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,30,.5); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-spot { position:fixed; box-shadow:0 0 0 200vmax rgba(0,0,30,.52); outline:2px solid var(--drybulkdash-accent); outline-offset:2px; border-radius:2px; pointer-events:none; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-chip { position:absolute; transform:translate(-50%,-50%); max-width:190px; padding:2px 6px; border:1px solid var(--drybulkdash-accent); border-radius:2px; background:var(--drybulkdash-blue); color:#fff; font-size:var(--ssy-fs-micro); line-height:1.25; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note { position:fixed; width:500px; max-width:calc(100vw - 16px); max-height:92vh; overflow:auto; padding:0 12px 10px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-surface); box-shadow:0 12px 40px rgba(0,0,0,.4); cursor:default; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note > header { position:sticky; top:0; display:flex; align-items:center; gap:8px; margin:0 -10px 6px; padding:5px 10px; background:var(--drybulkdash-blue); color:#fff; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note > header strong { flex:1; font-size:var(--ssy-fs-md); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note > header span { font-size:var(--ssy-fs-micro); opacity:.75; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note > header button { border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; cursor:pointer; line-height:1; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note h4 { margin:7px 0 2px; color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-small); text-transform:uppercase; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note .drybulkdash-ffa-guide-first-title { color:var(--drybulkdash-accent); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note .drybulkdash-ffa-guide-first { font-size:calc(var(--ssy-fs-base) + 1px); line-height:1.48; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note p,.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note li { margin:0 0 3px; font-size:var(--ssy-fs-base); line-height:1.4; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note ul { margin:0; padding-left:16px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note code { display:block; margin:5px 0; padding:4px 6px; background:color-mix(in srgb,var(--drybulkdash-blue) 8%,transparent); border-left:2px solid var(--drybulkdash-accent); font-size:var(--ssy-fs-small); white-space:pre-wrap; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-live { display:grid; grid-template-columns:84px 1fr; gap:7px; margin:7px 0; padding:7px 8px; border-left:3px solid var(--drybulkdash-accent); background:color-mix(in srgb,var(--drybulkdash-accent) 9%,transparent); font-size:var(--ssy-fs-base); line-height:1.4; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-live b { color:var(--drybulkdash-text); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-axis { margin:6px 0; padding:4px 6px; border:1px solid var(--drybulkdash-divider); color:var(--drybulkdash-text-muted); font-family:monospace; font-size:var(--ssy-fs-small); line-height:1.35; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-axis b { color:var(--drybulkdash-text); font-family:inherit; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-key { margin-top:-2px; color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-small); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-source { margin-top:7px; padding-top:5px; border-top:1px solid var(--drybulkdash-divider); color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-terms { display:flex; flex-direction:column; gap:1px; margin-top:6px; padding-top:5px; border-top:1px solid var(--drybulkdash-divider); font-size:var(--ssy-fs-micro); color:var(--drybulkdash-text-muted); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-terms b { color:var(--drybulkdash-text); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-guide-note > footer { margin-top:7px; padding-top:4px; border-top:1px solid var(--drybulkdash-divider); color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); }

/* Date jump input: sits inside the command bar's date cluster, matched to the
   20px control height and the bar's translucent-on-dark treatment. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-datejump {
    height: 20px;
    width: 108px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .28);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
}

.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-datejump::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}

.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-datejump:disabled {
    opacity: 0.45;
}

/* ============================================================================
   FFA TECH workbench - Highcharts Stock Tools rail, popups and icons.

   Highcharts ships gui.css / popup.css for all of this, but neither is on disk
   in this app, and the module's default icon host (code.highcharts.com/gfx/
   stock-icons/) answers 403 from the SSY network - so the rail would otherwise
   come up as unstyled markup with blank squares for buttons. Everything the
   toolbar needs is therefore defined here, scoped to this tab, and every icon is
   an inline data: URI: no wwwroot asset, no CDN request, works offline.

   Highcharts sets each button's background-image as an INLINE style
   (Toolbar.addButton), so the icon rules below need !important to win.

   The icon stroke is the single hard-coded colour in this file (U2 otherwise bans hex
   literals). A data: URI is an opaque string to CSS, so var(--drybulkdash-*) cannot be
   interpolated into it; the value is the muted-ink tone these glyphs need against both
   the surface and tint-2 button backgrounds.

   Only the seven buttons named in DryBulkFfaTemplates.TaWorkbench are styled.
   Submenu and scroll-arrow chrome is hidden outright: the button list is flat
   and short, so neither can ever be needed.
   ============================================================================ */

/* --- the rail ------------------------------------------------------------- */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-wrapper *,
.drybulkdash-ffa[b-rcren04v46]  .highcharts-bindings-wrapper * { box-sizing:border-box; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-toolbar li { position:relative; width:26px; height:26px; margin:0 0 2px; padding:0; list-style:none; cursor:pointer; border:1px solid transparent; background:var(--drybulkdash-surface); }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-toolbar li:hover { border-color:var(--drybulkdash-card-border); background:var(--drybulkdash-tint-2); }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-toolbar li.highcharts-active { border-color:var(--drybulkdash-blue); background:var(--drybulkdash-row-active-bg); }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-toolbar li.highcharts-separator { height:7px; margin:0; border:0; background:none; pointer-events:none; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-menu-item-btn { display:block; width:100%; height:100%; border:0; padding:0; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; background-size:17px 17px; font:inherit; color:inherit; cursor:pointer; }
/* Submenus and overflow arrows cannot occur with a flat seven-button list. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-submenu-wrapper,
.drybulkdash-ffa[b-rcren04v46]  .highcharts-submenu-item-arrow,
.drybulkdash-ffa[b-rcren04v46]  .highcharts-arrow-wrapper { display:none !important; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-hide { display:none; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-draw-mode { cursor:crosshair; }

/* --- collapse / expand toggle (the rail starts collapsed) ----------------- */

/* --- button icons -------------------------------------------------------- */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-indicators .highcharts-menu-item-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V4'/%3E%3Cpath d='M3 20h18'/%3E%3Cpath d='M6 15l4-5 3 3 5-7'/%3E%3C/svg%3E") !important; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-segment .highcharts-menu-item-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18L19 6'/%3E%3Ccircle cx='5' cy='18' r='2'/%3E%3Ccircle cx='19' cy='6' r='2'/%3E%3C/svg%3E") !important; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-horizontal-line .highcharts-menu-item-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Ccircle cx='7' cy='12' r='2'/%3E%3Ccircle cx='17' cy='12' r='2'/%3E%3C/svg%3E") !important; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-measure-xy .highcharts-menu-item-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='16' height='12' rx='1'/%3E%3Cpath d='M4 18L20 6'/%3E%3C/svg%3E") !important; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-toggle-annotations .highcharts-menu-item-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") !important; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-current-price-indicator .highcharts-menu-item-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h13' stroke-dasharray='3 2.5'/%3E%3Cpath d='M15 8h6v8h-6l-2-4z'/%3E%3C/svg%3E") !important; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-full-screen .highcharts-menu-item-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H3v6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M15 21h6v-6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3C/svg%3E") !important; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-toggle-annotations.highcharts-active .highcharts-menu-item-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6S2 12 2 12z'/%3E%3Cpath d='M4 20L20 4'/%3E%3C/svg%3E") !important; }

/* --- popups: the Indicators dialog and the SSY annotation forms ----------- */
/* Both are appended inside the chart's renderTo div, so ::deep reaches them. */
/* Highcharts appends these popups inside the chart's renderTo div and positions them with
   INLINE styles - position:absolute plus chart-relative left/top. Both facts are in
   HighchartBase.razor.js, which is NOT one of the nine folders CopyToLive mirrors, so it
   cannot be changed from here and reaching live. Everything below therefore has to win from
   CSS alone, which is what the !important flags are for: an inline style beats a stylesheet
   otherwise, and the inline coordinates are meaningless once the box is fixed.

   Fixed and centred, not anchored. Anchoring a popup near its drawing needs the JS to hand
   over a position, and it cannot; the chart-relative coordinates it does set land the box in
   the top-left corner of the VIEWPORT once the box is fixed, over the site nav. A centred
   panel needs nothing from the JS, is never clipped, never off-screen, and is the same place
   every time - which for a form the user opens, changes one field in and closes is worth more
   than proximity. It also matches the house overlay, SsyChartExpandModal.razor.css.

   The two rules differ only in weight. The Indicators dialog is a whole catalogue and takes
   the scrim, because the chart behind it is not the subject. The SSY annotation forms are
   small property panels for one drawing and take NO scrim - dimming the whole app behind a
   colour picker hides the very price action being styled.

   Note this is only half the fix. The other half is in SsyChartCard.razor.css: the card slot
   used to carry `contain: layout paint`, and layout containment makes the slot the containing
   block for fixed descendants, so `position:fixed` here was quietly resolving against the card
   and being clipped by it. See the comment on .ssy-chart-card-slot before reinstating either. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup:not(.highcharts-annotation-toolbar) { position:fixed !important; z-index:60; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; display:none; flex-direction:column; width:min(560px,92vw); max-height:82vh; padding:0; border:1px solid var(--drybulkdash-card-border); border-radius:6px; background:var(--drybulkdash-surface); box-shadow:0 12px 48px rgba(0,32,91,.26), 0 0 0 100vmax rgba(20,32,46,.4); color:var(--drybulkdash-text); font-size:var(--ssy-fs-micro); }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup { position:fixed !important; z-index:60; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; max-height:82vh !important; display:none; flex-direction:column; width:max-content; min-width:236px; max-width:300px; padding:0; border:1px solid var(--drybulkdash-card-border); border-radius:6px; background:var(--drybulkdash-surface); box-shadow:0 12px 48px rgba(0,32,91,.26); color:var(--drybulkdash-text); font-size:var(--ssy-fs-micro); }
/* The annotation toolbar stays a small strip, but fixed so overflow:hidden cannot clip it. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-annotation-toolbar { position:fixed !important; z-index:60; top:12px; left:50%; transform:translateX(-50%); width:auto; min-width:0; border:1px solid var(--drybulkdash-card-border); border-radius:4px; background:var(--drybulkdash-surface); box-shadow:0 6px 20px rgba(0,32,91,.2); }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup { overflow:hidden; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-main-title,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-header { display:flex; align-items:center; justify-content:space-between; min-height:22px; padding:2px 6px; border-bottom:1px solid var(--drybulkdash-divider); background:var(--drybulkdash-tint-2); color:var(--drybulkdash-text); font-weight:750; text-transform:uppercase; letter-spacing:.3px; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-close,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-close { position:absolute; top:2px; right:4px; width:18px; height:18px; border:0; background:transparent; color:var(--drybulkdash-text-muted); font-size:15px; line-height:1; cursor:pointer; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-close:hover,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-close:hover { color:var(--drybulkdash-accent); }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-body { padding:5px 6px; overflow:auto; min-height:0; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-lhs-col,
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-rhs-col { padding:5px 6px; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-lhs-col { border-right:1px solid var(--drybulkdash-divider); }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-lhs-full { width:100%; border-right:0; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-field,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-field { display:grid; grid-template-columns:minmax(0,1fr) 96px; align-items:center; gap:3px 6px; margin:0 0 3px; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup label,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup label { color:var(--drybulkdash-text-muted); text-transform:uppercase; letter-spacing:.25px; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup input,
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup select,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup input,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup select { width:100%; min-width:0; height:19px; padding:0 4px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-surface); color:var(--drybulkdash-text); font:inherit; font-size:var(--ssy-fs-micro); }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup input[type=checkbox],
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup input[type=checkbox] { width:auto; height:auto; }
/* The indicator search + list is how a study actually gets picked - give it room. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-input-search-indicators { margin:0 0 4px; }
.drybulkdash-ffa[b-rcren04v46]  ul.highcharts-indicator-list { max-height:min(46vh,320px); margin:0; padding:0; overflow-y:auto; list-style:none; border:1px solid var(--drybulkdash-divider); }
.drybulkdash-ffa[b-rcren04v46]  li.highcharts-indicator-list { border:0; margin:0; padding:0; list-style:none; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-indicator-list-item { display:block; width:100%; border:0; padding:2px 6px; background:transparent; color:var(--drybulkdash-text); font:inherit; font-size:var(--ssy-fs-micro); text-align:left; cursor:pointer; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-indicator-list-item:hover { background:var(--drybulkdash-tint-2); }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-indicator-list-item.highcharts-indicator-list-item-active { background:var(--drybulkdash-row-active-bg); color:var(--drybulkdash-blue); font-weight:700; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-tab-item { display:inline-block; padding:2px 8px; border:1px solid transparent; border-bottom-color:var(--drybulkdash-divider); background:var(--drybulkdash-tint-2); color:var(--drybulkdash-text-muted); text-transform:uppercase; cursor:pointer; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-tab-item-active { border-color:var(--drybulkdash-card-border); border-bottom-color:transparent; background:var(--drybulkdash-surface); color:var(--drybulkdash-blue); font-weight:750; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-tab-item-content { display:none; padding:4px 0 0; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-tab-item-content.highcharts-tab-item-show { display:block; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-tab-disabled { opacity:.45; pointer-events:none; }
/* Buttons: Highcharts' own bottom row and the SSY popups' button rows. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-bottom-row,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-btnrow { display:flex; gap:4px; justify-content:flex-end; padding:4px 6px; border-top:1px solid var(--drybulkdash-divider); background:var(--drybulkdash-tint-2); }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-bottom-row button,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-btnrow button { min-width:56px; height:20px; padding:0 8px; border:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-surface); color:var(--drybulkdash-text); font:inherit; font-size:var(--ssy-fs-micro); text-transform:uppercase; cursor:pointer; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-bottom-row button:hover,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-btnrow button:hover { border-color:var(--drybulkdash-blue); color:var(--drybulkdash-blue); }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-delete,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-clearall { margin-right:auto; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-delete:hover,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-clearall:hover { border-color:var(--drybulkdash-accent) !important; color:var(--drybulkdash-accent) !important; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-save,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-apply { border-color:var(--drybulkdash-blue) !important; color:var(--drybulkdash-blue) !important; font-weight:750; }
/* Colour pickers and the object list in the SSY annotation popups. */
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-swatches,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-colrow { display:flex; flex-wrap:wrap; gap:3px; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-swatch,
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-swatch-custom { width:15px; height:15px; border:1px solid var(--drybulkdash-card-border); padding:0; cursor:pointer; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-objects-list { margin:0; padding:0; max-height:170px; overflow-y:auto; list-style:none; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-objects-list li { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:1px 3px; border-bottom:1px solid var(--drybulkdash-divider); }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-objects-remove { width:16px; height:16px; border:0; background:transparent; color:var(--drybulkdash-text-muted); cursor:pointer; }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-objects-remove:hover { color:var(--drybulkdash-accent); }
.drybulkdash-ffa[b-rcren04v46]  .ssy-annpopup-note { margin:4px 0 0; color:var(--drybulkdash-text-muted); }
/* Annotation edit/remove strip Highcharts floats over a selected drawing. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-annotation-toolbar { display:flex; align-items:center; gap:4px; width:auto; min-width:0; padding:2px 4px; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-annotation-toolbar > p { margin:0; padding:0 4px; }

/* --- TECH tab layout ----------------------------------------------------- */
/* Readout column tracks the chart's design height so the two line up. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tech-controls { display:inline-flex; align-items:center; gap:6px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tech-reset { border:0; padding:0 4px; background:transparent; color:var(--drybulkdash-text-muted); font:inherit; font-size:var(--ssy-fs-micro); letter-spacing:.3px; cursor:pointer; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tech-reset:hover:not(:disabled) { color:var(--drybulkdash-accent); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tech-reset:disabled { opacity:.35; cursor:default; }

/* Indicator dialog body: list on the left, parameters on the right. Highcharts
   emits both columns as plain divs at full width, so the grid has to come from here. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-tab-item-content.highcharts-tab-item-show { display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); align-items:start; overflow:auto; min-height:0; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-lhs-col-wrapper,
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-rhs-col-wrapper { min-width:0; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup-lhs-full { grid-column:1 / -1; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup .highcharts-popup-main-title { grid-column:1 / -1; }
/* The search box is a bare input inside the list column. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-input-search-indicators-label { display:block; color:var(--drybulkdash-text-muted); text-transform:uppercase; letter-spacing:.25px; }

/* --- UI pass: rail as a docked instrument panel, dialog with a real header band --- */
/* The rail floats over the chart's left gutter. Without a surface behind it the icons sat
   on top of gridlines; a panel face plus a right edge makes it read as docked. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-toolbar { padding:2px 1px; }
/* Active tool needs to be unmistakable - it changes what a click on the plot does. */
/* The collapse handle: a grab-tab in the reserved gutter, not a 10px dot. */

/* Indicator dialog: Highcharts emits no title element for it - the popup's own children are
   just the close button, the ADD/EDIT tab buttons and the tab bodies. So the tab strip has to
   BE the header band: tinted buttons, and the visible body carries the rule beneath them. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup { padding-top:1px; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-tab-item { margin:0; border-radius:0; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-tab-item-content.highcharts-tab-item-show { border-top:1px solid var(--drybulkdash-card-border); }
/* The study name Highcharts prints above the parameter form. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup h3,
.drybulkdash-ffa[b-rcren04v46]  .highcharts-popup .highcharts-indicator-title { margin:0 0 4px; color:var(--drybulkdash-blue); font-size:var(--ssy-fs-small); font-weight:750; text-transform:uppercase; letter-spacing:.3px; }

/* --- readout column ------------------------------------------------------- */
/* LAST is the hero reading; the five below it are all comparisons against it. Brand tone
   marks that hierarchy, matching how drybulkdash-ffa-model-score treats its headline. */
/* RESET acts on saved state, not on the view like the range buttons - divide the two. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tech-reset { margin-left:2px; padding-left:7px; border-left:1px solid var(--drybulkdash-divider); }

/* --- tools as a horizontal strip across the top of the chart --------------- */
/* Highcharts only ever builds this GUI as a vertical rail inside chart.container, with no
   option to reposition it, so the horizontal orientation is done here. The chart reserves
   the band via chart.marginTop (see TaWorkbench), and the strip is pinned into it, which
   puts every control - range, RESET, tools - along one edge and gives the plot full width. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-wrapper,
.drybulkdash-ffa[b-rcren04v46]  .highcharts-bindings-wrapper { position:absolute; top:0; left:0; right:0; width:auto; height:26px !important; z-index:6; background:transparent; pointer-events:none; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-menu-wrapper { position:absolute; inset:0 0 auto 0; width:auto; height:26px; padding:0; overflow:visible; border-right:0; border-bottom:1px solid var(--drybulkdash-card-border); background:var(--drybulkdash-surface); pointer-events:auto; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-wrapper ul,
.drybulkdash-ffa[b-rcren04v46]  .highcharts-bindings-wrapper ul,
.drybulkdash-ffa[b-rcren04v46]  ul.highcharts-stocktools-toolbar { display:flex; flex-direction:row; align-items:center; gap:1px; width:auto; height:26px; margin:0; padding:0 2px; float:none; list-style:none; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-toolbar li { flex:0 0 auto; width:24px; height:22px; margin:0; }
/* Separators become vertical dividers between tool groups. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-toolbar li.highcharts-separator { width:1px; height:14px; margin:0 4px; border-left:1px solid var(--drybulkdash-divider); background:none; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-toolbar li.highcharts-separator > .highcharts-menu-item-btn { display:none; }
/* Active tool: underline it, since the inset side-bar cue was for a vertical rail. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-stocktools-toolbar li.highcharts-active { box-shadow:inset 0 -2px 0 var(--drybulkdash-blue); }
/* No collapse handle: the strip is always open, so there is nothing to toggle. */
.drybulkdash-ffa[b-rcren04v46]  .highcharts-toggle-toolbar { display:none !important; }
.drybulkdash-ffa[b-rcren04v46]  .highcharts-menu-item-btn { background-size:15px 15px; }

/* --- study pane labels ---------------------------------------------------- */
/* HighchartBase.labelIndicatorPanes draws these with chart.renderer.text() and no class,
   so they cannot be classed or turned off from here. They ARE the only class-less <text>
   directly under the SVG root, which makes them targetable. The halo (paint-order:stroke)
   lifts the label off the pane tint and gridlines; a real filled chip would need that
   shared JS file. */
.drybulkdash-ffa[b-rcren04v46]  svg.highcharts-root > text:not([class]) { fill:var(--drybulkdash-text) !important; font-size:9px !important; font-weight:750 !important; text-transform:uppercase; letter-spacing:.4px; paint-order:stroke; stroke:var(--drybulkdash-surface); stroke-width:3px; stroke-linejoin:round; }

/* ssyObjects is injected into the toolbar by HighchartBase.razor.js, which ships no icon and no
   lang entry for it - so the button rendered BLANK and titled itself with the raw key
   ("ssyObjects" on hover). That file is not one of the nine folders CopyToLive mirrors, so
   neither can be fixed at source; the lang entry is in TaWorkbench and the icon is here.
   A layers glyph, matching the stroke weight and colour of the six beside it. Inline data: URI
   like every other icon here, because the Highcharts icon host answers 403 from the SSY network. */
.drybulkdash-ffa[b-rcren04v46]  .ssy-tool-objects .highcharts-menu-item-btn { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E") !important; }

/* ---- TECH fixed readout (roadmap section 1) -----------------------------------------
   Replaces tooltip:{split:true}, which produced one labelled box per series - seven on the
   default layout - stacked down the chart over the price action. This is one line that never
   moves and never covers a candle. It sits in SsyChartCard ChartOverlay, which is already
   position:absolute / pointer-events:none / z-index 2, so the pointer still reaches the plot
   and the Stock Tools rail underneath. Pinned to the band chart.marginTop:30 already reserves,
   below the horizontal tool rail rather than over it.
   The content is written as innerHTML by the colocated .razor.js. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta .ssy-chart-card-overlay { top:0; left:0; right:0; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-readout { display:flex; flex-wrap:nowrap; align-items:baseline; gap:9px; overflow:hidden; margin:30px 0 0 8px; padding:1px 4px; color:var(--drybulkdash-text); font-size:var(--ssy-fs-micro); font-variant-numeric:tabular-nums; line-height:1.35; white-space:nowrap; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-readout-cell { display:inline-flex; align-items:baseline; gap:3px; }
/* Key in muted caps, value in the text colour and heavier - so the eye lands on the numbers,
   which is the whole reason the line exists. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-readout-cell > i { color:var(--drybulkdash-text-muted); font-style:normal; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-readout-cell > b { font-weight:750; }
/* Same red/teal as the candles (TaWorkbench color / upColor), so up and down read identically
   on the line and on the bars. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-readout-up > b { color:#01A39E; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-readout-down > b { color:#EB3871; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-readout-flat > b { color:var(--drybulkdash-text-muted); }
/* Study values are secondary to OHLC; the label is inline-styled to the series colour by the JS
   so the name matches the line drawn over the candles. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-readout-study > b { font-weight:600; }

/* A crosshair pointer over the plot. The rail, the legend and the axis labels keep the default
   arrow, so the cursor itself says where scrubbing works. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta .highcharts-container { cursor:crosshair; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta .highcharts-stocktools-wrapper, .drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta .highcharts-legend-item { cursor:default; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta .highcharts-stocktools-toolbar li { cursor:pointer; }


/* ---- TECH contract facts, on the header line ------------------------------------------
   Replaces an SsyKpiStrip in "cards" variant. Four short contract facts do not need a card
   each: that cost ~90px of chrome and a band of white space above the chart, and the height
   is worth more to the plot. The header row already existed, so this adds none.
   Label muted and small, value in the text colour and heavy, qualifier muted after it - the
   eye lands on the numbers, which is the only reason the row is there. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-facts { display:flex; flex:1 1 auto; align-items:baseline; gap:12px; min-width:0; margin:0 12px; overflow:hidden; white-space:nowrap; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-fact { display:inline-flex; align-items:baseline; gap:4px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-fact > i { color:var(--drybulkdash-text-muted); font-style:normal; font-weight:600; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-fact > b { color:var(--drybulkdash-text); font-weight:750; font-variant-numeric:tabular-nums; text-transform:none; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-fact > em { color:var(--drybulkdash-text-muted); font-style:normal; font-weight:500; font-variant-numeric:tabular-nums; text-transform:none; }
/* Same red/teal as the candles, so a negative roll or basis reads the same on the line as on
   the bars. ssy-hot/ssy-cool are the shared delta classes. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-fact > b.ssy-hot { color:#EB3871; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-fact > b.ssy-cool { color:#01A39E; }

/* The poll countdown is a status reading, not a control - no border, no box, and it must not
   sit at the same weight as the buttons either side of it. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ffa-tech-poll { min-width:22px; color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); font-variant-numeric:tabular-nums; opacity:.6; text-align:right; }

/* The header carries three things now, so the facts take the slack and the two ends stay put. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta > header > strong { flex:0 0 auto; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta > header > span:last-child { flex:0 0 auto; }


/* ---- Refresh ring -------------------------------------------------------------------
   The countdown IS the button. One element carrying three things: the ring drains over the
   60s so time-to-next-refresh reads at a glance, a ring that has stopped moving is how a
   dead poll becomes visible, and clicking it refreshes now. A separate counter plus button
   was two controls for one idea.
   Rotated -90deg so the drain starts at 12 o'clock, which is how a clock is read. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-poll { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-poll svg { width:16px; height:16px; transform:rotate(-90deg); overflow:visible; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-poll circle { fill:none; stroke-width:2; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-poll-track { stroke:var(--drybulkdash-divider); }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-poll-fill { stroke:var(--drybulkdash-blue); stroke-linecap:round; }
/* Two identical keyframes, alternated on every refresh. A changed animation-name is defined to
   restart an animation; relying on element replacement to do it is not safe, and the failure is
   silent - the ring would drain once and sit empty in the one control meant to show liveness. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-drain-a { animation:drybulkdash-ta-drain-a-b-rcren04v46 60s linear forwards; }
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-drain-b { animation:drybulkdash-ta-drain-b-b-rcren04v46 60s linear forwards; }
@keyframes drybulkdash-ta-drain-a-b-rcren04v46 { from { stroke-dashoffset:0; } to { stroke-dashoffset:34.56; } }
@keyframes drybulkdash-ta-drain-b-b-rcren04v46 { from { stroke-dashoffset:0; } to { stroke-dashoffset:34.56; } }
/* A ring that has run all the way out means the poll did not fire - which is exactly what should
   be visible, so it is NOT reset by the animation itself, only by an actual refresh re-keying it. */
@media (prefers-reduced-motion:reduce) { .drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-poll-fill { animation:none; stroke-dashoffset:0; } }
/* Not interactive - no hover or focus affordance, because there is nothing to click. */


/* ---- Venue session lines -------------------------------------------------------------
   SESSION marks each venue's open and close (see VenueSessionLinesJson). Hidden in CSS, not
   by rebuilding the config: regenerating the chart JSON makes Highcharts tear down and
   recreate every series, study and annotation, which was visibly laggy on a click. */
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-nosession .highcharts-plot-line.ssy-session-line,
.drybulkdash-ffa[b-rcren04v46]  .drybulkdash-ta-nosession .highcharts-plot-line-label.ssy-session-line { display:none; }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_946_Ffa_History.razor.rz.scp.css */
.drybulkdash-ffa-history[b-gav08f4kyw] { display:grid; grid-template-rows:auto auto auto minmax(320px,2fr) minmax(175px,1fr); gap:6px; min-height:0; min-width:0; height:100%; overflow:auto; font-variant-numeric:tabular-nums; }
.drybulkdash-ffa-history-toolbar[b-gav08f4kyw] { display:flex; align-items:center; flex-wrap:wrap; gap:8px; background:var(--drybulkdash-surface); border-bottom:1px solid var(--drybulkdash-divider); padding:6px; }
.drybulkdash-ffa-history-divider[b-gav08f4kyw] { height:18px; border-left:1px solid var(--drybulkdash-divider); }
.drybulkdash-ffa-history-spacer[b-gav08f4kyw] { flex:1; }
.drybulkdash-ffa-history-date[b-gav08f4kyw] { display:flex; align-items:center; gap:6px; color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-small); }
.drybulkdash-ffa-history input[b-gav08f4kyw],.drybulkdash-ffa-history select[b-gav08f4kyw],.drybulkdash-ffa-history-reset[b-gav08f4kyw],.drybulkdash-ffa-history-swap[b-gav08f4kyw] { font:inherit; font-size:var(--ssy-fs-small); color:var(--drybulkdash-text); background:var(--drybulkdash-surface); border:1px solid var(--drybulkdash-divider); border-radius:3px; min-height:28px; }
.drybulkdash-ffa-history-pickers[b-gav08f4kyw] { display:flex; gap:8px; align-items:stretch; }
.drybulkdash-ffa-history-leg[b-gav08f4kyw] { flex:1; min-width:0; margin:0; padding:4px 8px 8px; border:1px solid var(--drybulkdash-divider); background:var(--drybulkdash-surface); }
.drybulkdash-ffa-history-leg legend[b-gav08f4kyw] { float:none; width:auto; font-size:var(--ssy-fs-small); color:var(--drybulkdash-text-muted); margin:0; }
.drybulkdash-ffa-history-leg legend strong[b-gav08f4kyw] { color:var(--drybulkdash-blue); margin-left:8px; }
.drybulkdash-ffa-history-leg-controls[b-gav08f4kyw] { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.drybulkdash-ffa-history-leg-controls[b-gav08f4kyw]  .ssy-choice-rail { flex-wrap:wrap; }
.drybulkdash-ffa-history-swap[b-gav08f4kyw] { align-self:center; white-space:nowrap; }
.drybulkdash-ffa-history-main[b-gav08f4kyw] { grid-row:4; }
.drybulkdash-ffa-history-support[b-gav08f4kyw] { grid-row:5; }
.drybulkdash-ffa-history-main[b-gav08f4kyw],.drybulkdash-ffa-history-support[b-gav08f4kyw] { min-width:0; min-height:0; display:flex; }
.drybulkdash-ffa-history-main[b-gav08f4kyw]  .ssy-card,.drybulkdash-ffa-history-support[b-gav08f4kyw]  .ssy-card { flex:1; display:flex; flex-direction:column; min-width:0; }
/* flex:1 makes the slot take a share of the row, so SsyChartCard's authored design
   height must not also act as a floor - otherwise a short row cannot shrink the chart and
   its x-axis labels print over what follows. The fit grammar releases this var
   automatically inside ssy-fit-col/-band, but the FFA tabs are not on the grammar yet
   (see Phase 3), so it is released explicitly here. */
.drybulkdash-ffa-history-main[b-gav08f4kyw]  .ssy-chart-card-slot,.drybulkdash-ffa-history-support[b-gav08f4kyw]  .ssy-chart-card-slot { flex:1; --ssy-chart-slot-min-h:0px; }
.drybulkdash-ffa-history-status[b-gav08f4kyw] { grid-row:3; font-size:var(--ssy-fs-small); color:var(--drybulkdash-text-muted); }
.drybulkdash-ffa-history button:focus-visible[b-gav08f4kyw],.drybulkdash-ffa-history select:focus-visible[b-gav08f4kyw],.drybulkdash-ffa-history input:focus-visible[b-gav08f4kyw] { outline:2px solid var(--drybulkdash-blue); outline-offset:2px; }
@media(max-width:1200px) { .drybulkdash-ffa-history-pickers[b-gav08f4kyw] { flex-wrap:wrap; } .drybulkdash-ffa-history-leg[b-gav08f4kyw] { flex-basis:45%; } }
@media(max-width:850px) { .drybulkdash-ffa-history-leg[b-gav08f4kyw] { flex-basis:100%; } }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_A00_RoutesAndTransits.razor.rz.scp.css */
/* Routes & Transits tab shell. The 32px command bar is the shared
   SsyCommandBar component (Common/DashboardComponents_HA) - structure, ticker
   slots, controls, guide/readout and dark subtabs all live in its scoped css.
   Root/workspace layout (display/height/overflow) belongs to the ssy-fit-*
   grammar (SsyDashboardShell.razor) - only gaps and typography live here. */

.drybulkdash-transits[b-g8urxnlh1y] { gap:4px; font-variant-numeric:tabular-nums; color:var(--drybulkdash-text); }
.drybulkdash-transits .drybulkdash-transits-workspace[b-g8urxnlh1y] { gap:4px; }
.drybulkdash-transits[b-g8urxnlh1y]  button:focus-visible { outline:2px solid var(--drybulkdash-accent); outline-offset:-2px; }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_A10_Transits_Chokepoints.razor.rz.scp.css */
/* Chokepoint Transits workspace: viewport-fit grid (seven gates plus seasonality
   over recent-transit and global-watch tables). Layout comes from the shared
   ssy-fit-* grammar + SsyGrid (design columns in the markup, intrinsic MinCol
   wrap, band pin while locked) - no display/row/column templates here.
   Selector note: prefixes must be THIS component's own elements
   (.drybulkdash-transits-chokepoints); a scoped selector without ::deep can
   never match a child component's root element (e.g. an SsyGrid div), so the
   old .drybulkdash-transits-gates/-bottom-prefixed rules were dead. */

.drybulkdash-transits-chokepoints[b-qw1615ni9m] { min-width:0; gap:4px; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .ssy-card { min-width:0; min-height:0; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-focus { box-shadow:inset 0 0 0 2px var(--drybulkdash-blue); }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-focus .ssy-card-header { background:color-mix(in srgb,var(--drybulkdash-blue) 5%,var(--drybulkdash-surface)); }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-tablewrap { width:100%; min-width:0; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-tablewrap .ssy-dash-table { width:100%; font-size:var(--ssy-fs-tiny); font-variant-numeric:tabular-nums; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-tablewrap thead { position:sticky; top:0; z-index:1; background:var(--drybulkdash-surface); }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-tablewrap th { color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); letter-spacing:.035em; white-space:nowrap; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-tablewrap td { white-space:nowrap; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-tablewrap tbody tr:hover { background:color-mix(in srgb,var(--drybulkdash-blue) 4%,transparent); }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-vessel,
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-route { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-dark { color:var(--ssy-colour-palette-royal-purple); font-weight:800; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-darkbands { display:flex; align-items:center; gap:10px; min-height:26px; padding:3px 8px; border-bottom:1px solid var(--drybulkdash-border); background:color-mix(in srgb,var(--drybulkdash-blue) 3%,var(--drybulkdash-surface)); color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-tiny); white-space:nowrap; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-darkbands b { color:var(--drybulkdash-text); font-size:calc(var(--ssy-fs-tiny) + 1px); }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-darktotal { margin-left:auto; padding-left:10px; border-left:1px solid var(--drybulkdash-border); }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-tablenote { overflow:hidden; color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-tiny); line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-watchlist-body { min-height:0; overflow:auto; }
.drybulkdash-transits-chokepoints[b-qw1615ni9m]  .drybulkdash-transits-watchlist-body .ssy-dash-table { width:100%; }

@media (max-width:1439px), (max-height:768px) {
    .drybulkdash-transits-chokepoints[b-qw1615ni9m] { grid-template-rows:auto auto !important; }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_A15_Transits_Methodology.razor.rz.scp.css */
.drybulkdash-transits-method-backdrop[b-0o8gpmpv66] { position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:24px; background:rgba(0,32,91,.48); }
.drybulkdash-transits-method[b-0o8gpmpv66] { width:min(860px,100%); max-height:min(760px,calc(100vh - 48px)); overflow:auto; background:var(--drybulkdash-surface); color:var(--drybulkdash-text); border-top:4px solid var(--drybulkdash-accent); box-shadow:0 18px 60px rgba(0,32,91,.3); }
.drybulkdash-transits-method > header[b-0o8gpmpv66] { position:sticky; top:0; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 20px; background:var(--drybulkdash-blue); color:#fff; }
.drybulkdash-transits-method > header span[b-0o8gpmpv66] { font-size:var(--ssy-fs-micro); letter-spacing:.12em; opacity:.7; }
.drybulkdash-transits-method > header h2[b-0o8gpmpv66] { margin:2px 0 0; font-size:20px; }
.drybulkdash-transits-method > header button[b-0o8gpmpv66] { border:0; background:transparent; color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.drybulkdash-transits-method-body[b-0o8gpmpv66] { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; padding:20px; }
.drybulkdash-transits-method-body h3[b-0o8gpmpv66] { margin:0 0 8px; color:var(--drybulkdash-blue); font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
.drybulkdash-transits-method-body p[b-0o8gpmpv66],.drybulkdash-transits-method-body li[b-0o8gpmpv66],.drybulkdash-transits-method-body dd[b-0o8gpmpv66] { font-size:12px; line-height:1.5; }
.drybulkdash-transits-method-body p[b-0o8gpmpv66] { margin:0 0 8px; }
.drybulkdash-transits-method-body ul[b-0o8gpmpv66] { margin:0; padding-left:18px; }
.drybulkdash-transits-method-body dl[b-0o8gpmpv66] { margin:0; }
.drybulkdash-transits-method-body dl div[b-0o8gpmpv66] { display:grid; grid-template-columns:110px 1fr; gap:8px; padding:5px 0; border-bottom:1px solid var(--drybulkdash-border); }
.drybulkdash-transits-method-body dt[b-0o8gpmpv66] { font-size:11px; font-weight:700; }
.drybulkdash-transits-method-body dd[b-0o8gpmpv66] { margin:0; }
.drybulkdash-transits-method-meta[b-0o8gpmpv66] { grid-column:1 / -1; }
.drybulkdash-transits-method-meta dl[b-0o8gpmpv66] { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
@media (max-width:700px) { .drybulkdash-transits-method-backdrop[b-0o8gpmpv66] { padding:8px; } .drybulkdash-transits-method-body[b-0o8gpmpv66] { grid-template-columns:1fr; } .drybulkdash-transits-method-meta[b-0o8gpmpv66] { grid-column:auto; } .drybulkdash-transits-method-meta dl[b-0o8gpmpv66] { grid-template-columns:1fr; } }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_A20_Transits_RouteVolumes.razor.rz.scp.css */
.drybulkdash-rv[b-ltqglusavc] {
    gap: 4px;
    min-width: 0;
}

.drybulkdash-rv .drybulkdash-rv-tablewrap[b-ltqglusavc] {
    height: 100%;
    min-height: 0;
}

.drybulkdash-rv .drybulkdash-rv-table[b-ltqglusavc] {
    width: 100%;
    font-size: var(--ssy-fs-tiny);
}

.drybulkdash-rv .drybulkdash-rv-table th[b-ltqglusavc] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--drybulkdash-surface);
    padding-block: 5px;
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-micro);
    letter-spacing: .04em;
}

.drybulkdash-rv .drybulkdash-rv-table td[b-ltqglusavc] {
    padding-block: 5px;
}

.drybulkdash-rv .drybulkdash-rv-table tbody tr[b-ltqglusavc] {
    transition: background-color 80ms ease;
}

.drybulkdash-rv .drybulkdash-rv-num[b-ltqglusavc] {
    text-align: right;
    white-space: nowrap;
}

.drybulkdash-rv .drybulkdash-rv-value[b-ltqglusavc] {
    color: var(--drybulkdash-blue);
    font-weight: 800;
}

.drybulkdash-rv .drybulkdash-rv-route[b-ltqglusavc] {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drybulkdash-rv .drybulkdash-rv-leaf[b-ltqglusavc] {
    padding-left: 28px;
    font-weight: 400;
}

.drybulkdash-rv .drybulkdash-rv-caret[b-ltqglusavc] {
    display: inline-block;
    width: 12px;
    color: var(--rv-direction, var(--drybulkdash-blue));
}

.drybulkdash-rv .drybulkdash-rv-prow[b-ltqglusavc],
.drybulkdash-rv .drybulkdash-rv-lrow[b-ltqglusavc] {
    --rv-direction: var(--ssy-colour-palette-bright-blue);
    cursor: pointer;
}

.drybulkdash-rv .drybulkdash-rv-prow[b-ltqglusavc] {
    font-weight: 700;
}

.drybulkdash-rv .drybulkdash-rv-prow:not(.drybulkdash-rv-active)[b-ltqglusavc] {
    background: color-mix(in srgb, var(--rv-direction) 4%, transparent);
}

.drybulkdash-rv .drybulkdash-rv-prow:hover[b-ltqglusavc],
.drybulkdash-rv .drybulkdash-rv-lrow:hover[b-ltqglusavc] {
    background: color-mix(in srgb, var(--rv-direction) 7%, transparent);
}

.drybulkdash-rv .drybulkdash-rv-active[b-ltqglusavc] {
    background: color-mix(in srgb, var(--rv-direction) 11%, transparent);
    box-shadow: inset 3px 0 0 var(--rv-direction);
}

.drybulkdash-rv .drybulkdash-rv-star[b-ltqglusavc] {
    color: var(--drybulkdash-accent);
    margin-right: 3px;
}

.drybulkdash-rv .drybulkdash-rv-note[b-ltqglusavc],
.drybulkdash-rv .drybulkdash-rv-sentence[b-ltqglusavc] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-tiny);
}

.drybulkdash-rv .drybulkdash-rv-note[b-ltqglusavc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drybulkdash-rv .drybulkdash-rv-sentence[b-ltqglusavc] {
    padding: 3px 7px;
    border-left: 3px solid var(--drybulkdash-accent);
    background: color-mix(in srgb, var(--drybulkdash-accent) 5%, transparent);
}

.drybulkdash-rv .drybulkdash-rv-dir-ta[b-ltqglusavc] {
    --rv-direction: var(--ssy-colour-palette-bright-blue);
}

.drybulkdash-rv .drybulkdash-rv-dir-fh[b-ltqglusavc] {
    --rv-direction: var(--ssy-colour-palette-teal-green);
}

.drybulkdash-rv .drybulkdash-rv-dir-tp[b-ltqglusavc] {
    --rv-direction: var(--ssy-colour-palette-golden-yellow);
}

.drybulkdash-rv .drybulkdash-rv-dir-bh[b-ltqglusavc] {
    --rv-direction: var(--ssy-colour-palette-royal-purple);
}

.drybulkdash-rv[b-ltqglusavc]  .ssy-card {
    min-width: 0;
    min-height: 0;
}

.drybulkdash-rv[b-ltqglusavc]  .drybulkdash-rv-hero {
    border-top: 2px solid var(--drybulkdash-accent);
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_A30_Transits_BasinRouting.razor.rz.scp.css */
.drybulkdash-br[b-hg7b9owabl] {
    min-width: 0;
    gap: 4px;
}

.drybulkdash-br[b-hg7b9owabl]  .ssy-card {
    min-width: 0;
    min-height: 0;
}

.drybulkdash-br[b-hg7b9owabl]  .drybulkdash-br-kpi .ssy-kpi-strip {
    height: 100%;
}

.drybulkdash-br[b-hg7b9owabl]  .drybulkdash-br-kpi .ssy-kpi-tile {
    border-top: 2px solid transparent;
}

.drybulkdash-br[b-hg7b9owabl]  .drybulkdash-br-kpi .ssy-kpi-tile:nth-child(1),
.drybulkdash-br[b-hg7b9owabl]  .drybulkdash-br-kpi .ssy-kpi-tile:nth-child(2) {
    border-top-color: var(--drybulkdash-accent);
}

.drybulkdash-br[b-hg7b9owabl]  .drybulkdash-br-kpi .ssy-kpi-tile:nth-child(3),
.drybulkdash-br[b-hg7b9owabl]  .drybulkdash-br-kpi .ssy-kpi-tile:nth-child(4) {
    border-top-color: var(--drybulkdash-blue);
}

@media (max-width: 1439px), (max-height: 768px) {
    .drybulkdash-br[b-hg7b9owabl] {
        grid-template-rows: auto auto auto !important;
    }
}
/* /Components/Pages/Bulkers/PmxList/PmxList_000_ParentPage.razor.rz.scp.css */
.pmxlist-admin-wrap[b-owwu5id9w9] {
    margin-top: 1rem;
}

.pmxlist-admin-panel[b-owwu5id9w9] {
    width: min(100%, 100rem);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e6eb;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_050_HomePage.razor.rz.scp.css */
.pmx-home-stat-card[b-zo3w12ct4e] {
    border: 1px solid #e0e6eb;
}

.pmx-home-stat-title[b-zo3w12ct4e] {
    font-weight: 400;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
}

.pmx-home-wip[b-zo3w12ct4e] {
    min-height: 130px;
}

.pmx-home-wip__stamp[b-zo3w12ct4e] {
    font-size: 3rem;
    opacity: 0.25;
    pointer-events: none;
    letter-spacing: 0.2em;
}

.pmx-home-wip__actions[b-zo3w12ct4e] {
    gap: 1rem;
}

.pmx-home-panel[b-zo3w12ct4e] {
    min-height: 100%;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_100_CargoTonnageList.razor.rz.scp.css */
/* Mobile Responsiveness */
@media (max-width: 768px) {
    .pmx-search-input[b-jhptvkw622] {
        width: 100% !important;
        max-width: none;
    }

    .pmx-legend[b-jhptvkw622] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .pmx-copy-text[b-jhptvkw622] {
        font-size: 1rem;
        margin-left: 0;
        margin-right: 0;
    }

    .sticky-header[b-jhptvkw622] {
        padding: 0.5rem;
    }

    .pmx-title[b-jhptvkw622] {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    /* Stack filter controls vertically on mobile */
    .pmx-filters-row .row > .col-md-7[b-jhptvkw622],
    .pmx-filters-row .row > .col-md-5[b-jhptvkw622] {
        margin-bottom: 0.5rem;
    }

    .pmx-filters-row .row > .col-md-7 .row[b-jhptvkw622] {
        flex-direction: column;
        align-items: stretch !important;
    }

    .pmx-filters-row .row > .col-md-7 .col-auto[b-jhptvkw622] {
        margin-bottom: 0.5rem;
    }

    /* Make buttons larger for touch */
    .btn[b-jhptvkw622] {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-sm[b-jhptvkw622] {
        min-height: 36px;
        min-width: 36px;
    }

    /* Improve checkbox labels for touch */
    .ssy-checkbox-slider[b-jhptvkw622] {
        transform: scale(1.2);
        margin-right: 0.5rem;
    }

    /* Stack action buttons vertically */
    .pmx-filters-row .row > .col-md-5 .row[b-jhptvkw622] {
        flex-direction: column;
        align-items: stretch;
    }

    .pmx-filters-row .row > .col-md-5 .col-auto[b-jhptvkw622] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .pmx-filters-row .row > .col-md-5 .col-auto button[b-jhptvkw622] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .pmx-title[b-jhptvkw622] {
        font-size: 1.1rem;
    }

    .pmx-title-legend[b-jhptvkw622] {
        font-size: 0.9rem;
    }

    .sticky-header[b-jhptvkw622] {
        padding: 0.25rem;
    }

    /* Hide less critical elements on very small screens */
    .pmx-legend span:not(:first-child)[b-jhptvkw622] {
        display: none;
    }

    .pmx-legend span:first-child[b-jhptvkw622]::after {
        content: " • *Refreshed Today • *On Subs";
        color: inherit;
    }
}

/* Table responsiveness */
@media (max-width: 768px) {
    .main-table[b-jhptvkw622] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ssy-table-lw[b-jhptvkw622] {
        min-width: 1200px; /* Ensure table maintains its width for scrolling */
        font-size: 0.875rem;
    }

    .ssy-table-lw th[b-jhptvkw622],
    .ssy-table-lw td[b-jhptvkw622] {
        padding: 0.5rem 0.25rem;
        white-space: nowrap;
    }

    /* Make checkboxes larger for touch */
    .ssy-table-lw input[type="checkbox"][b-jhptvkw622] {
        transform: scale(1.2);
        margin: 0;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    .btn[b-jhptvkw622] {
        min-height: 48px;
        min-width: 48px;
    }

    .dropdown-item[b-jhptvkw622] {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    .form-control[b-jhptvkw622] {
        min-height: 44px;
        font-size: 1rem;
    }
}

/* Mobile Action Bar */
.mobile-action-bar[b-jhptvkw622] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-action-buttons[b-jhptvkw622] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-action-buttons .btn[b-jhptvkw622] {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border: none;
}

.mobile-action-buttons .btn:hover[b-jhptvkw622] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-action-buttons .btn:active[b-jhptvkw622] {
    transform: scale(0.95);
}

/* Mobile Table Summary */
@media (max-width: 576px) {
    .mobile-table-summary[b-jhptvkw622] {
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px;
        margin: 8px 0;
        font-size: 0.9rem;
    }

    .mobile-table-summary .summary-header[b-jhptvkw622] {
        font-weight: 600;
        color: #163E9F;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-table-summary .summary-stats[b-jhptvkw622] {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .mobile-table-summary .stat-item[b-jhptvkw622] {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 60px;
    }

    .mobile-table-summary .stat-value[b-jhptvkw622] {
        font-size: 1.1rem;
        font-weight: 700;
        color: #163E9F;
    }

    .mobile-table-summary .stat-label[b-jhptvkw622] {
        font-size: 0.8rem;
        color: #666;
        text-align: center;
    }

    .mobile-table-summary .expand-toggle[b-jhptvkw622] {
        background: none;
        border: 1px solid #163E9F;
        color: #163E9F;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-table-summary .expand-toggle:hover[b-jhptvkw622] {
        background: #163E9F;
        color: white;
    }
}

.pmx-list-table[b-jhptvkw622] {
    display: flex; 
    flex-direction: row;
    margin: 0 1%;
}

.container-relative[b-jhptvkw622] {
    position: relative;
    width: 100%;
}

.lookup-panel[b-jhptvkw622] {
    position: absolute;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100%;
    transition: right 0.4s ease, opacity 0.4s ease;
    z-index: 10;
    background-color: white; /* or whatever suits your theme */
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.lookup-panel.show[b-jhptvkw622] {
    right: 0;
    opacity: 1;
}

.table-wrapper[b-jhptvkw622] {
    transition: margin-right 0.4s ease;
    margin-right: 0;
}

.table-wrapper.shifted[b-jhptvkw622] {
    margin-right: 50%; /* match lookup-panel width */
}

.sticky-header[b-jhptvkw622] {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-bottom: 1px solid #ddd;
}

.lookup-flex-container[b-jhptvkw622] {
    display: flex;
    width: 100%;
    transition: all 0.3s ease;  
}

.main-table[b-jhptvkw622] {
    transition: all 0.3s ease;
}

.full-width[b-jhptvkw622] {
    width: 100%;
}

.half-width[b-jhptvkw622] {
    width: 40%;
}

.lookup-tab-panel[b-jhptvkw622] {
    width: 100%;
    transition: all 0.3s ease;
    border-left: 2px solid black;
    
}

.pmxlist-title-row[b-jhptvkw622] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.pmxlist-title[b-jhptvkw622] {
    margin-bottom: 0.5rem;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
    font-weight: 600;
}

.pmxlist-count[b-jhptvkw622] {
    font-weight: 400;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    font-size: 1rem;
}

.pmxlist-legend[b-jhptvkw622] {
    color: var(--ssy-colour-palette-slate-gray, #405864);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}

.pmxlist-filters-row[b-jhptvkw622] {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e0e6eb;
    padding-bottom: 0.5rem;
    gap: 0.25rem;
}

.pmxlist-search-input[b-jhptvkw622] {
    width: 250px;
    height: 1.6rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

:global(.pmxlist-compact-btn)[b-jhptvkw622] {
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

.pmxlist-copy-label[b-jhptvkw622] {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0 0.5rem 0 0.75rem;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
}

.pmxlist-iphone-textarea[b-jhptvkw622] {
    width: 100%;
    min-height: 20vh;
    border: 1px solid #d9e3ea;
    border-radius: 12px;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
}

.pmxlist-mainsection[b-jhptvkw622] {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    /*margin: auto;*/
    display: flex;
    flex-direction: column;
}

.pmxlist-header[b-jhptvkw622] {
    width: 100%;
    background-color: #F4F7F9;
    padding: 2px 4px 0 4px;
    box-sizing: border-box;
}

.pmxlist-datasection[b-jhptvkw622] {
    flex: 1;
    display: flex;
    overflow: hidden; /* Prevent parent scroll */
}

.pmxlist-datacolumn[b-jhptvkw622] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.pmxlist-singlecolumn[b-jhptvkw622] {
    flex: 1 1 95%;
}
.pmxlist-split-column1[b-jhptvkw622] {
    flex: 0 0 40%;
}
.pmxlist-split-column2[b-jhptvkw622] {
    flex: 0 0 60%;
}










/* container that holds table + lookup */
.pmxlist-datasection.pmxlist-vertical[b-jhptvkw622] {
display: flex;
flex-direction: column;
height: 100vh;          /* or 100% if parent already controls height */
min-height: 0;          /* important so children can scroll */
}

/* top 1/4 */
.pmxlist-top-panel[b-jhptvkw622] {
flex: 0 0 20%;
min-height: 0;
overflow: auto;         /* table scrolls if content exceeds 25% */
}

/* bottom 3/4 */
.pmxlist-bottom-panel[b-jhptvkw622] {
flex: 1 1 80%;
min-height: 0;
overflow: auto;         /* lookup scrolls if needed */
}

/* when lookup is off */
.pmxlist-full-panel[b-jhptvkw622] {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}

.pmxlist-datasection.pmxlist-vertical .pmxlist-bottom-panel[b-jhptvkw622] {
border-top: 2px solid #111010; /* adjust colour to match your theme */
}

[b-jhptvkw622] button.pmxlist-compact-dropdown-btn {
    padding: 0.15rem 0.65rem !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    height: auto !important;
}

[b-jhptvkw622] button.pmxlist-compact-dropdown-btn::after {
    margin-left: 0.35rem;
    vertical-align: middle;
}

.pmxlist-copy-stack[b-jhptvkw622] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
}

.pmxlist-filter-stack[b-jhptvkw622] {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 0.35rem 1rem;
    align-items: center;
}

/* ── Spreads route groups ── */
.pmxlist-route-bar[b-jhptvkw622] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.35rem 0 0.35rem 0;
}

.pmxlist-route-subrow[b-jhptvkw622] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    padding: 0 0 0.35rem 0;
}

.pmxlist-route-item[b-jhptvkw622] {
    padding: 0.35rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}

.pmxlist-route-item:hover[b-jhptvkw622]              { background: #f4f4f4; }
.pmxlist-route-item--active[b-jhptvkw622]            { background: #d4edda; color: #155724; font-weight: 600; }

.pmxlist-route-spacer[b-jhptvkw622] { flex: 1; min-width: 0; }
/* /Components/Pages/Bulkers/PmxList/PmxList_110_Header.razor.rz.scp.css */
.panamaxlist-header-form[b-j79n2cm7qb] {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #f9f9f9;
    z-index: 2;
    padding-bottom: 1rem;
    border-radius: 16px;
    border: 1px solid #e0e6eb;
}

@media (max-width: 768px) {
    .panamaxlist-header-form[b-j79n2cm7qb] {
        width: 100vw;
        margin-left: -1rem;
        padding: 0 1rem;
    }
}

.pmxlist-header-actions[b-j79n2cm7qb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.1rem;
}

.pmxlist-header-actions__filters[b-j79n2cm7qb] {
    display: flex;
    gap: 0.5rem;
}

.pmxlist-header-actions__primary[b-j79n2cm7qb] {
    display: flex;
}

.pmxlist-field-group[b-j79n2cm7qb] {
    min-width: 200px;
}

.pmxlist-muted-text[b-j79n2cm7qb] {
    color: var(--ssy-colour-palette-slate-gray, #405864);
    font-size: 0.9rem;
}

/* Modal overlay styles now in pmxlist-shared.css */

.panamaxlist-header-form label[b-j79n2cm7qb] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
}

.panamaxlist-header-form textarea[b-j79n2cm7qb] {
    height: 32px;
    resize: vertical;
    overflow: hidden;
}

.form-container[b-j79n2cm7qb] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.3s ease-in-out;
    border: 1px solid #ccd6dd;
    padding: 5px 15px 15px;
    border-radius: 20px;
    background-color: #f9f9f9;
}

.form-container.show[b-j79n2cm7qb] {
    max-height: 2000px;
    opacity: 1;
    transform: scaleY(1);
}


.pmx-duplicate-warning[b-j79n2cm7qb] {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #b45309; /* amber-ish */
    display: flex;
    align-items: center;
    gap: 6px;
}

.pmx-duplicate-warning i[b-j79n2cm7qb] {
    color: #f59e0b;
}

.pmx-duplicate-details[b-j79n2cm7qb] {
    opacity: 0.8;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_120_ListTable.razor.rz.scp.css */
/* Row status styles (.refresh-today, .submit-today, .on-subs, .large-ok-btn) now in pmxlist-shared.css */


.col-checkbox[b-iumv2vqgm8] {
    width: 1%;
    text-align: center;
}

.col-refreshed[b-iumv2vqgm8] {
    width: 3%;
    text-align: center;
}

.col-account[b-iumv2vqgm8] {
    width: 4%;
    text-align: left;
    overflow-wrap: anywhere;
}

.col-size[b-iumv2vqgm8] {
    width: 5%;
}

.col-load[b-iumv2vqgm8] {
    width: 5%;
}

.col-laycan[b-iumv2vqgm8] {
    width: 4%;
}

.col-disch[b-iumv2vqgm8] {
    width: 6%;
}

.col-cargo[b-iumv2vqgm8] {
    width: 4%;
    text-align: left;
}

.col-comments[b-iumv2vqgm8] {
    width: 10%;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.col-spreads[b-iumv2vqgm8] {
    width: 10%;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.spreads-placeholder-btn[b-iumv2vqgm8] {
    position: absolute;
    top: 4px;
    right: 4px;

    border: 1px solid rgba(0, 0, 0, 0.15);
    background: transparent;
    border-radius: 4px;

    padding: 2px 4px;
    font-size: 0.8rem;
    opacity: 0.7;
}

.source-message-btn[b-iumv2vqgm8] {
    position: absolute;
    top: 4px;
    right: 4px;

    border: 1px solid rgba(0, 0, 0, 0.15);
    background: transparent;
    border-radius: 4px;
    color: #163E9F;

    padding: 2px 4px;
    font-size: 0.8rem;
    opacity: 0.7;
}

.source-message-btn:hover[b-iumv2vqgm8] {
    opacity: 1;
}

.pmx-source-bubble[b-iumv2vqgm8] {
    width: 320px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);

    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.pmx-source-bubble-header[b-iumv2vqgm8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.8rem;
    font-weight: 600;
    color: #163E9F;
}

.pmx-source-bubble-close[b-iumv2vqgm8] {
    border: none;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    opacity: 0.6;
}

.pmx-source-bubble-close:hover[b-iumv2vqgm8] {
    opacity: 1;
}

.pmx-source-bubble-body[b-iumv2vqgm8] {
    padding: 8px 10px;
    font-size: 0.85rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
}

.col-offmkt[b-iumv2vqgm8] {
    width: 1.5%;
}

.col-broker[b-iumv2vqgm8] {
    width: 3%;
    text-align: left;
}

.col-comms[b-iumv2vqgm8] {
    width: 3%;
}

.col-updated[b-iumv2vqgm8] {
    width: 5.5%;
}

.col-actions[b-iumv2vqgm8] {
    width: 1%;
    text-align: center;
}

.d-none[b-iumv2vqgm8] {
    display: none !important;
}

.selected-lookup-row[b-iumv2vqgm8] {
    background-color: yellow !important; /* light yellow */
    font-weight: bold;
}

.pmxlist-region-row[b-iumv2vqgm8] {
    border-top: 1px solid #E7EEF2;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    cursor: default;
}

.pmxlist-region-row--clickable[b-iumv2vqgm8] {
    cursor: pointer;
}

.pmxlist-region-row--empty[b-iumv2vqgm8] {
    opacity: 0.85;
}

.pmxlist-region-toggle[b-iumv2vqgm8],
.pmxlist-region-toggle-placeholder[b-iumv2vqgm8] {
    width: 2.4rem;
    text-align: center;
    font-size: 1.1rem;
    color: var(--ssy-colour-main-bright-blue, #0087CB);
}

.pmxlist-region-title[b-iumv2vqgm8] {
    min-width: 10em;
}

.pmxlist-region-count[b-iumv2vqgm8] {
    font-weight: 500;
    font-size: 1rem;
    color: #000;
}

.pmxlist-region-count--muted[b-iumv2vqgm8] {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ssy-colour-palette-slate-gray, #405864);
}

.pmxlist-data-table[b-iumv2vqgm8] {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.pmxlist-cell-textarea[b-iumv2vqgm8] {
    min-height: 60px;
}

.pmxlist-pnc-label[b-iumv2vqgm8] {
    color: var(--ssy-colour-palette-crimson-red, #DB303A);
    font-weight: 600;
}

.pmxlist-actions-cell[b-iumv2vqgm8] {
    white-space: nowrap;
    width: 1%;
}

.pmxlist-warning-indicator[b-iumv2vqgm8] {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmxlist-warning-icon[b-iumv2vqgm8] {
    cursor: pointer;
    font-size: 1.2rem;
    color: rgb(255, 145, 0);
}

.pmxlist-updated-text[b-iumv2vqgm8] {
    font-size: 0.85em;
    color: #888;
    text-align: center;
    margin-top: 2px;
}

.pmxlist-subline[b-iumv2vqgm8] {
    font-size: 0.85em;
    font-weight: 700;
    color: #6c757d;
    margin-top: 1px;
}

.pmxlist-edit-input-label[b-iumv2vqgm8] {
    font-size: 9px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 1px;
}

.pmxlist-data-table .form-control[b-iumv2vqgm8],
.pmxlist-data-table select.form-control[b-iumv2vqgm8],
.pmxlist-data-table textarea.form-control[b-iumv2vqgm8] {
    font-size: 14px;
}

.pmxlist-data-table .pmxlist-align-top[b-iumv2vqgm8] {
    vertical-align: top;
}

.pmxlist-data-table th[b-iumv2vqgm8] {
    font-weight: 700;
}

.bi-check-lg[b-iumv2vqgm8], .bi-files[b-iumv2vqgm8] {
    transition: all 0.3s ease-in-out;
}

.col-bod[b-iumv2vqgm8] {
    width: 7%;
}

.col-pref[b-iumv2vqgm8] {
    width: 8%;
}

.col-vessel[b-iumv2vqgm8] {
    width: 8%;
}

.ssy-table-lw th[b-iumv2vqgm8],
.ssy-table-lw td[b-iumv2vqgm8] {
    border-right: 1px solid #ccc; /* Light grey vertical lines */
}

.ssy-table-lw th:last-child[b-iumv2vqgm8],
.ssy-table-lw td:last-child[b-iumv2vqgm8] {
    border-right: none; /* No border on the very last column */
}

.custom-modal-backdrop[b-iumv2vqgm8] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.custom-modal-content[b-iumv2vqgm8] {
    background-color: white;
    width: 50vw;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    margin-top: 10vh; /* Adjust this value to lift it up */
}

.custom-modal-header[b-iumv2vqgm8],
.custom-modal-footer[b-iumv2vqgm8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
}

.custom-modal-body[b-iumv2vqgm8] {
    flex-grow: 1;
    overflow-y: auto;
}

.tight-dropdown .btn[b-iumv2vqgm8],
.tight-dropdown .dropdown-toggle[b-iumv2vqgm8] {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.2;
}

.tight-dropdown .dropdown-action-button[b-iumv2vqgm8],
.tight-dropdown .dropdown-toggle[b-iumv2vqgm8] {
    padding-left: 2px;
    padding-right: 2px;
    min-width: unset;
}

/* Icon dropdown and animation styles now in pmxlist-shared.css */

/* ============================================
   MOBILE CARD STYLES
   ============================================ */

/* Desktop table - hidden on mobile, shown on md+ */
.pmxlist-desktop-table[b-iumv2vqgm8] {
    display: block !important;
}

@media (max-width: 767.98px) {
    .pmxlist-desktop-table[b-iumv2vqgm8] {
        display: none !important;
    }
}

/* Mobile cards - shown on mobile, hidden on md+ */
.pmxlist-mobile-cards[b-iumv2vqgm8] {
    display: none !important;
}

@media (max-width: 767.98px) {
    .pmxlist-mobile-cards[b-iumv2vqgm8] {
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.5rem;
    }
}

.pmxlist-card[b-iumv2vqgm8] {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pmxlist-card.on-subs[b-iumv2vqgm8] {
    border-left: 4px solid #dc3545;
}

.pmxlist-card.submit-today[b-iumv2vqgm8] {
    border-left: 4px solid rgb(0, 164, 0);
}

.pmxlist-card.on-subs .pmxlist-card-title[b-iumv2vqgm8] {
    color: #dc3545 !important;
}

.pmxlist-card.submit-today .pmxlist-card-title[b-iumv2vqgm8] {
    color: rgb(0, 164, 0) !important;
}

.pmxlist-card.refresh-today[b-iumv2vqgm8] {
    font-weight: bold;
}

.pmxlist-card-header[b-iumv2vqgm8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.pmxlist-card-title[b-iumv2vqgm8] {
    font-size: 1rem;
}

.pmxlist-card-laycan[b-iumv2vqgm8] {
    font-size: 0.8rem;
    color: #fff;
    background: #163E9F;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.pmxlist-card-body[b-iumv2vqgm8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pmxlist-card-row[b-iumv2vqgm8] {
    display: flex;
    font-size: 0.875rem;
    line-height: 1.4;
}

.pmxlist-card-label[b-iumv2vqgm8] {
    font-weight: 500;
    color: #666;
    min-width: 70px;
    flex-shrink: 0;
}

.pmxlist-card-row > span:last-child[b-iumv2vqgm8] {
    color: #333;
    word-break: break-word;
}

.pmxlist-card-footer[b-iumv2vqgm8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}

.pmxlist-card-updated[b-iumv2vqgm8] {
    font-size: 0.75rem;
    color: #888;
}

.pmxlist-card-actions[b-iumv2vqgm8] {
    display: flex;
    gap: 0.2rem;
}

.pmxlist-edit-checkboxes-row[b-iumv2vqgm8] {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.pmxlist-edit-checkboxes-row .form-check[b-iumv2vqgm8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pmxlist-offmkt-toggle[b-iumv2vqgm8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pmxlist-offmkt-option[b-iumv2vqgm8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.pmxlist-offmkt-radio[b-iumv2vqgm8] {
    width: 18px;
    height: 18px;
    accent-color: var(--ssy-colour-main-bright-blue, #0087CB);
    cursor: pointer;
}






.pmx-status-badge[b-iumv2vqgm8] {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1;
}

.pmx-status-badge--success[b-iumv2vqgm8] {
    background: rgba(25, 135, 84, 0.15); /* bootstrap success tint */
    color: #198754;
}

.pmx-status-badge--muted[b-iumv2vqgm8] {
    background: rgba(108, 117, 125, 0.15); /* bootstrap secondary tint */
    color: #6c757d;
}

/* Spreads Popup formatting */
.spreads-grid[b-iumv2vqgm8] {
    display: grid;
    grid-template-columns: 25% 1fr 70px; /* Rate | Vessel | PnC */
    gap: 0.75rem;
    align-items: center;
}

.spreads-header[b-iumv2vqgm8] {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.7;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    margin-bottom: 0.6rem;
}

.spreads-row[b-iumv2vqgm8] {
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.spreads-center[b-iumv2vqgm8] {
    display: flex;
    justify-content: center;
    align-items: center;
}

 
.pmx-floating-menu[b-iumv2vqgm8] {
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    margin: 0;
}

.pmx-floating-menu--above[b-iumv2vqgm8] {
    transform: translateY(-100%);
}

.pmx-floating-menu--left[b-iumv2vqgm8] {
    transform: translateX(-100%);
}

.pmx-floating-menu--above-left[b-iumv2vqgm8] {
    transform: translate(-100%, -100%);
}
/* /Components/Pages/Bulkers/PmxList/PmxList_121_RowSpreads.razor.rz.scp.css */
.rs121-wrapper[b-s2hiq14pqh] {
    display: flex;
    flex-direction: column;
}

.rs121-tabs[b-s2hiq14pqh] {
    margin-bottom: 1rem;
}

.rs121-input[b-s2hiq14pqh] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.rs121-num[b-s2hiq14pqh] {
    text-align: right;
}

.rs121-muted[b-s2hiq14pqh] {
    color: #888;
}

.rs121-placeholder[b-s2hiq14pqh] {
    color: #888;
    font-style: italic;
    margin: 0.5rem 0;
}

.rs121-footer[b-s2hiq14pqh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}

.rs121-save-all[b-s2hiq14pqh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #163E9F;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.3rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.rs121-save-all:hover[b-s2hiq14pqh]    { background: #1247b5; }
.rs121-save-all:disabled[b-s2hiq14pqh] { opacity: 0.55; cursor: default; }

.rs121-error[b-s2hiq14pqh] {
    color: #c00;
    font-size: 0.75rem;
}

.rs121-specs-warning[b-s2hiq14pqh] {
    color: #c00;
    font-size: 0.8rem;
    margin: 0 0 0.6rem;
}

.rs121-dist-warn[b-s2hiq14pqh] {
    color: #f59e0b;
    font-size: 0.75rem;
    margin-right: 0.25rem;
    cursor: default;
}

.ssy-table-lw[b-s2hiq14pqh] { width: 100%; }

.rs121-split-cell[b-s2hiq14pqh] { white-space: nowrap; padding: 3px 6px; }

.rs121-split-row[b-s2hiq14pqh] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #555;
}

.rs121-split-input[b-s2hiq14pqh] {
    width: 38px;
    padding: 1px 3px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 11px;
    text-align: center;
}

.rs121-equiv-header[b-s2hiq14pqh] {
    text-align: center;
    background: #eef2fb;
    color: #163E9F;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rs121-spreads-field[b-s2hiq14pqh] {
    margin-top: 0.75rem;
}

.rs121-spreads-field label[b-s2hiq14pqh] {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_122_SpreadsView.razor.rz.scp.css */
.rs122-wrapper[b-grnedn5ju4] { padding: 0.25rem 0; }

.rs122-msg[b-grnedn5ju4] { color: #888; font-style: italic; margin: 0.5rem 0; }
.rs122-num[b-grnedn5ju4] { text-align: center; color: #555; }

/* ── Filter bar ── */
.rs122-filterbar[b-grnedn5ju4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.rs122-filter-group[b-grnedn5ju4] {
    position: relative;
}

.rs122-filter-btn[b-grnedn5ju4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    white-space: nowrap;
    line-height: 1.4;
}

.rs122-filter-btn:hover[b-grnedn5ju4]              { background: #f4f4f4; }
.rs122-filter-btn--active[b-grnedn5ju4]            { background: #e6f0ff; border-color: #4a90d9; color: #1a5fa8; }

/* ── Stem size toggle (EAus/Indo routes only) ── */
.rs122-stem-toggle[b-grnedn5ju4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.rs122-stem-toggle-label[b-grnedn5ju4] {
    font-size: 0.82rem;
    color: #555;
}

.rs122-stem-btn[b-grnedn5ju4] {
    padding: 0.25rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1.4;
}

.rs122-stem-btn:hover[b-grnedn5ju4]     { background: #f4f4f4; }
.rs122-stem-btn--active[b-grnedn5ju4]   { background: #e6f0ff; border-color: #4a90d9; color: #1a5fa8; font-weight: 600; }

.rs122-dropdown[b-grnedn5ju4] {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.13);
    min-width: 140px;
    z-index: 200;
    display: flex;
    flex-direction: column;
}

.rs122-dropdown-item[b-grnedn5ju4] {
    padding: 0.35rem 0.75rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 0.82rem;
    white-space: nowrap;
}

.rs122-dropdown-item:hover[b-grnedn5ju4]              { background: #f4f4f4; }
.rs122-dropdown-item--selected[b-grnedn5ju4]          { background: #e6f0ff; color: #1a5fa8; font-weight: 600; }

/* ── Active-route chip ── */
.rs122-active-chip[b-grnedn5ju4] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.65rem;
    background: #e6f0ff;
    border: 1px solid #4a90d9;
    border-radius: 12px;
    color: #1a5fa8;
    font-size: 0.8rem;
    font-weight: 500;
}

.rs122-chip-clear[b-grnedn5ju4] {
    background: none;
    border: none;
    cursor: pointer;
    color: #4a90d9;
    font-size: 0.72rem;
    padding: 0;
    line-height: 1;
}

.rs122-chip-clear:hover[b-grnedn5ju4] { color: #c00; }

/* ── Row state classes ── */
.rs122-fresh[b-grnedn5ju4]         { color: #198754; font-weight: 600; }
.rs122-updated-today[b-grnedn5ju4] { font-weight: 600; }

.ssy-table-lw[b-grnedn5ju4] { width: 100%; }

.rs122-select-cell[b-grnedn5ju4] { width: 1%; text-align: center; }

.ssy-table-lw th[b-grnedn5ju4] { text-align: center; }

.ssy-table-lw th[b-grnedn5ju4],
.ssy-table-lw td[b-grnedn5ju4] {
    border-right: 1px solid #ccc; /* Light grey vertical lines */
}

.ssy-table-lw th:last-child[b-grnedn5ju4],
.ssy-table-lw td:last-child[b-grnedn5ju4] {
    border-right: none; /* No border on the very last column */
}

/* ── Editable offer cell ── */
.rs122-offer-cell[b-grnedn5ju4] {
    position: relative;
    white-space: nowrap;
}

.rs122-offer-input[b-grnedn5ju4] {
    width: 5rem;
    text-align: center;
    border: 1px solid transparent;
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
    border-radius: 3px;
}

.rs122-offer-input:focus[b-grnedn5ju4] {
    border-color: #4a90d9;
    outline: none;
    background: #fff;
}

.rs122-save-btn[b-grnedn5ju4] {
    position: absolute;
    right: -0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: #198754;
    color: #fff;
    border: none;
    border-radius: 3px;
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.62rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
}

.rs122-save-btn:hover[b-grnedn5ju4]    { background: #157347; }
.rs122-save-btn:disabled[b-grnedn5ju4] { opacity: 0.55; cursor: default; }

.rs122-save-error[b-grnedn5ju4] {
    color: #c00;
    font-weight: 700;
    margin-left: 0.2rem;
    cursor: help;
}

.rs122-sort-th[b-grnedn5ju4] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    outline: none;
}

.rs122-sort-th:focus[b-grnedn5ju4],
.rs122-sort-th:focus-visible[b-grnedn5ju4] { outline: none; }

.rs122-sort-th:hover[b-grnedn5ju4] { background: #dde6f8; }

.rs122-sort-active[b-grnedn5ju4] { background: #d0ddf5; }

.rs122-sort-icon[b-grnedn5ju4] {
    font-size: 0.7rem;
    margin-left: 0.2rem;
    vertical-align: middle;
}

.rs122-sort-icon--dim[b-grnedn5ju4] { opacity: 0.3; }

.rs122-equiv-header[b-grnedn5ju4] {
    text-align: center;
    background: #eef2fb;
    color: #163E9F;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Copy cell & menu ── */
.rs122-copy-cell[b-grnedn5ju4] { text-align: center; padding: 0 4px; white-space: nowrap; }

.rs122-copy-overlay[b-grnedn5ju4] {
    position: fixed;
    inset: 0;
    z-index: 1499;
}

.rs122-copy-menu[b-grnedn5ju4] {
    position: fixed;
    z-index: 1500;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    min-width: 150px;
    padding: 4px 0;
    transform: translateY(4px);
}

.rs122-copy-header[b-grnedn5ju4] {
    padding: 4px 12px 2px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.rs122-copy-section-label[b-grnedn5ju4] {
    padding: 4px 12px 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #163E9F;
}

.rs122-copy-item[b-grnedn5ju4] {
    display: block;
    width: 100%;
    padding: 5px 18px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 0.83rem;
    white-space: nowrap;
}

.rs122-copy-item:hover[b-grnedn5ju4] { background: #f0f4ff; }

.rs122-copy-divider[b-grnedn5ju4] {
    margin: 4px 0;
    border-top: 1px solid #e8e8e8;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_123_RouteTerms.razor.rz.scp.css */
.rs123-msg[b-1xzpxk2i4y] { color: #888; font-style: italic; }

.ssy-table-lw[b-1xzpxk2i4y] { width: 100%; }

.rs123-trade[b-1xzpxk2i4y] { margin-bottom: 1.5rem; }
.rs123-trade + .rs123-trade[b-1xzpxk2i4y] { border-top: 1px solid #e5e7eb; padding-top: 1rem; }

.rs123-trade-name[b-1xzpxk2i4y] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #163E9F;
    margin-bottom: 0.5rem;
}

.rs123-dim[b-1xzpxk2i4y] { color: #888; font-size: 0.8rem; }
.rs123-num[b-1xzpxk2i4y] { text-align: right; }

.rs123-meta[b-1xzpxk2i4y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: #555;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_124_BunkerPrices.razor.rz.scp.css */
.rs124-msg[b-7yuppfujfm] { color: #888; font-style: italic; }
.rs124-num[b-7yuppfujfm] { text-align: right; }
.ssy-table-lw[b-7yuppfujfm] { width: 100%; }
/* /Components/Pages/Bulkers/PmxList/PmxList_140_VesselDetails.razor.rz.scp.css */
/* VesselDetails-specific icon style - circular red close button */
/* Differs from standard .icon-dropdown-box in pmxlist-shared.css */

.edited-field[b-enyf8pozkz] {
    border-left: 4px solid #ffc107;
    padding-left: 8px;
    background-color: #fffdf5;
}






.tag-container[b-enyf8pozkz] {
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f8f9fa;
    padding: 6px 8px;
}

.tag-table[b-enyf8pozkz] {
    width: 100%;
    border-collapse: collapse;
}

.tag-table thead th[b-enyf8pozkz] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    padding: 6px 4px;
    border-bottom: 1px solid #dee2e6;
}

.tag-table tbody td[b-enyf8pozkz] {
    padding: 8px 4px;
    vertical-align: middle;
}

.tag-table tbody tr:not(:last-child) td[b-enyf8pozkz] {
    border-bottom: 1px solid #e9ecef;
}

.tag-left[b-enyf8pozkz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tag-name[b-enyf8pozkz] {
    font-size: 0.95rem;
    font-weight: 600;
}

.tag-text[b-enyf8pozkz] {
    display: flex;
    flex-direction: column;
}

.tag-context[b-enyf8pozkz] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 2px;
}

.tag-updated[b-enyf8pozkz] {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
}

.tag-status[b-enyf8pozkz] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.tag-status.applied[b-enyf8pozkz] {
    background-color: #28a745;
    color: white;
}

.tag-status.not-applied[b-enyf8pozkz] {
    background-color: #dee2e6;
    color: transparent;
}

.tag-editable-row[b-enyf8pozkz] { cursor: pointer; }
.tag-editable-row:hover[b-enyf8pozkz] { background: #f5f7fa; }
.tag-disabled-row[b-enyf8pozkz] { opacity: 0.65; }

/* ── Commercial Details two-column layout ── */
.vd140-desc-layout[b-enyf8pozkz]  { display: flex; gap: 16px; align-items: flex-start; }
.vd140-specs-panel[b-enyf8pozkz]  { flex: 0 0 62%; }
.vd140-tags-panel[b-enyf8pozkz]   { flex: 1; min-width: 0; }
.vd140-tables-row[b-enyf8pozkz]   { display: flex; gap: 16px; align-items: flex-start; }

.vd140-section-header[b-enyf8pozkz] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.vd140-section-title[b-enyf8pozkz] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #555;
}

.vd140-oap-cell[b-enyf8pozkz]  { color: #92400e; font-weight: 600; }

.vd140-error[b-enyf8pozkz] {
    color: #b91c1c;
    font-size: 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    padding: 4px 10px;
    margin-bottom: 6px;
}

.vd140-updated[b-enyf8pozkz] { margin-top: 6px; font-size: 11px; color: #999; }
.vd140-empty[b-enyf8pozkz]   { font-size: 12.5px; color: #aaa; }
/* /Components/Pages/Bulkers/PmxList/PmxList_210_LookupTab.razor.rz.scp.css */
/* Base .refresh-today style in pmxlist-shared.css */

.ssy-table-lw .submit-today[b-oaspcn9ts0] {
    color: rgb(0, 164, 0); /* Turns Cargo Green if Added Today */
    font-weight: bold;
}

.ssy-table-lw .on-subs[b-oaspcn9ts0] {
    color: rgb(255, 0, 0); /* Turns Cargo Red if On Subs */
    font-weight: bold;
}

.ssy-table-lw .highlighted-row[b-oaspcn9ts0] {
    background-color: #c3e6cb; /* Slightly darker green */
    border-left: 5px solid #28a745; /* Deeper green accent */
}

.ssy-table-lw .within-laycan[b-oaspcn9ts0] {
    background-color: #c3e6cb; /* Slightly darker green */
    border-left: 5px solid #28a745; /* Deeper green accent */
}

.ssy-table-lw .within-laycan.on-subs[b-oaspcn9ts0] {
    background-color: #c3e6cb;
    border-left: 5px solid #28a745;
    color: rgb(255, 0, 0);
    font-weight: bold;
}

.ssy-table-lw .within-laycan.submit-today[b-oaspcn9ts0] {
    background-color: #c3e6cb;
    border-left: 5px solid #28a745;
    color: rgb(0, 164, 0);
    font-weight: bold;
}

.ssy-table-lw .within-laycan.refresh-today[b-oaspcn9ts0] {
    background-color: #c3e6cb;
    border-left: 5px solid #28a745;
    font-weight: bold;
}

.pmxlist-btn-hover:hover[b-oaspcn9ts0] {
    background-color: #163E9F;
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor:pointer;
}

/* ============================================
   MOBILE CARD STYLES
   ============================================ */

/* Mobile cards - shown by default, hidden on md+ */
.lookup-mobile-cards[b-oaspcn9ts0] {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

@media (min-width: 768px) {
    .lookup-mobile-cards[b-oaspcn9ts0] {
        display: none !important;
    }
}

/* Desktop table - hidden by default, shown on md+ */
.lookup-desktop-table[b-oaspcn9ts0] {
    display: none !important;
}

@media (min-width: 768px) {
    .lookup-desktop-table[b-oaspcn9ts0] {
        display: table !important;
    }
}

.lookup-card[b-oaspcn9ts0] {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lookup-card.within-laycan[b-oaspcn9ts0] {
    background-color: #c3e6cb;
    border-left: 4px solid #28a745;
}

.lookup-card.on-subs[b-oaspcn9ts0] {
    border-left: 4px solid #dc3545;
}

.lookup-card.on-subs .lookup-card-title[b-oaspcn9ts0] {
    color: #dc3545;
}

.lookup-card.submit-today .lookup-card-title[b-oaspcn9ts0] {
    color: rgb(0, 164, 0);
}

.lookup-card.refresh-today[b-oaspcn9ts0] {
    font-weight: bold;
}

.lookup-card-header[b-oaspcn9ts0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.lookup-card-title[b-oaspcn9ts0] {
    font-weight: 600;
    font-size: 1rem;
    color: #000061;
}

.lookup-card-eta[b-oaspcn9ts0] {
    font-size: 0.8rem;
    color: #666;
    background: #f0f0f0;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.lookup-card.within-laycan .lookup-card-eta[b-oaspcn9ts0] {
    background: #28a745;
    color: #fff;
}

.lookup-card-body[b-oaspcn9ts0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lookup-card-row[b-oaspcn9ts0] {
    display: flex;
    font-size: 0.875rem;
    line-height: 1.4;
}

.lookup-card-label[b-oaspcn9ts0] {
    font-weight: 500;
    color: #666;
    min-width: 80px;
    flex-shrink: 0;
}

.lookup-card-row > span:last-child[b-oaspcn9ts0] {
    color: #333;
    word-break: break-word;
}

.tight-dropdown .btn[b-oaspcn9ts0],
.tight-dropdown .dropdown-toggle[b-oaspcn9ts0] {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.2;
}

.tight-dropdown .dropdown-action-button[b-oaspcn9ts0],
.tight-dropdown .dropdown-toggle[b-oaspcn9ts0] {
    padding-left: 2px;
    padding-right: 2px;
    min-width: unset;
}



.collapse-arrow[b-oaspcn9ts0] {
    display: inline-block;
    transition: transform 150ms ease-in-out;
}

.collapse-arrow.collapsed[b-oaspcn9ts0] {
    transform: rotate(-180deg);
}



.lookup-title[b-oaspcn9ts0] {
    font-size: 16px;
    font-weight: bold;
    font-family: Georgia, serif;
    color: rgb(0, 0, 97);
}

.filter-panel[b-oaspcn9ts0] {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #dcdfe4;
    border-radius: 6px;
    padding: 3px 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.filter-left-panel[b-oaspcn9ts0] {
    flex: 0 0 50%;
    min-width: 0;

    display: flex;
    flex-wrap: wrap;          /* <-- key */
    gap: 2px 3px;
    align-items: center;
}

.filter-right-panel[b-oaspcn9ts0] {
    flex: 0 0 50%;
    min-width: 0;

    display: flex;
    flex-wrap: wrap;          /* <-- key */
    gap: 2px 3px;
    align-items: center;
}

.pmxlist-header-actions[b-oaspcn9ts0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.pmxlist-header-actions__filters[b-oaspcn9ts0] {
    display: flex;
    gap: 0.5rem;
}

.pmxlist-warning-indicator[b-oaspcn9ts0] {
    width: 24px;              /* Reserve fixed width */
    display: flex;
    justify-content: center;  /* Center icon horizontally */
    align-items: center;      /* Center vertically */
    flex-shrink: 0;           /* Prevent shrinking */
}

.pmxlist-warning-icon[b-oaspcn9ts0] {
    font-size: 1.1rem;
    color: rgb(255, 0, 0);
    cursor: pointer;
}

.filter-wrap[b-oaspcn9ts0] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: flex-start;
}

.filter-item[b-oaspcn9ts0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;     /* hug label content instead of a fixed 260px column */
}

.filter-item label[b-oaspcn9ts0] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.2;
}

.lookup-desktop-table tbody td[b-oaspcn9ts0] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.lookup-desktop-table tbody tr:last-child td[b-oaspcn9ts0] {
    border-bottom: none;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_300_FixturesParent.razor.rz.scp.css */
/* Mobile Responsiveness */
@media (max-width: 768px) {
    .pmx-search-input[b-tez27samgl] {
        width: 100% !important;
        max-width: none;
    }

    .pmx-legend[b-tez27samgl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .pmx-copy-text[b-tez27samgl] {
        font-size: 1rem;
        margin-left: 0;
        margin-right: 0;
    }

    .sticky-header[b-tez27samgl] {
        padding: 0.5rem;
    }

    .pmx-title[b-tez27samgl] {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    /* Stack filter controls vertically on mobile */
    .pmx-filters-row .row > .col-md-7[b-tez27samgl],
    .pmx-filters-row .row > .col-md-5[b-tez27samgl] {
        margin-bottom: 0.5rem;
    }

    .pmx-filters-row .row > .col-md-7 .row[b-tez27samgl] {
        flex-direction: column;
        align-items: stretch !important;
    }

    .pmx-filters-row .row > .col-md-7 .col-auto[b-tez27samgl] {
        margin-bottom: 0.5rem;
    }

    /* Make buttons larger for touch */
    .btn[b-tez27samgl] {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-sm[b-tez27samgl] {
        min-height: 36px;
        min-width: 36px;
    }

    /* Improve checkbox labels for touch */
    .ssy-checkbox-slider[b-tez27samgl] {
        transform: scale(1.2);
        margin-right: 0.5rem;
    }

    /* Stack action buttons vertically */
    .pmx-filters-row .row > .col-md-5 .row[b-tez27samgl] {
        flex-direction: column;
        align-items: stretch;
    }

    .pmx-filters-row .row > .col-md-5 .col-auto[b-tez27samgl] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .pmx-filters-row .row > .col-md-5 .col-auto button[b-tez27samgl] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .pmx-title[b-tez27samgl] {
        font-size: 1.1rem;
    }

    .pmx-title-legend[b-tez27samgl] {
        font-size: 0.9rem;
    }

    .sticky-header[b-tez27samgl] {
        padding: 0.25rem;
    }

    /* Hide less critical elements on very small screens */
    .pmx-legend span:not(:first-child)[b-tez27samgl] {
        display: none;
    }

    .pmx-legend span:first-child[b-tez27samgl]::after {
        content: " • *Refreshed Today • *On Subs";
        color: inherit;
    }
}

/* Table responsiveness */
@media (max-width: 768px) {
    .main-table[b-tez27samgl] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ssy-table-lw[b-tez27samgl] {
        min-width: 1200px; /* Ensure table maintains its width for scrolling */
        font-size: 0.875rem;
    }

    .ssy-table-lw th[b-tez27samgl],
    .ssy-table-lw td[b-tez27samgl] {
        padding: 0.5rem 0.25rem;
        white-space: nowrap;
    }

    /* Make checkboxes larger for touch */
    .ssy-table-lw input[type="checkbox"][b-tez27samgl] {
        transform: scale(1.2);
        margin: 0;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    .btn[b-tez27samgl] {
        min-height: 48px;
        min-width: 48px;
    }

    .dropdown-item[b-tez27samgl] {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    .form-control[b-tez27samgl] {
        min-height: 44px;
        font-size: 1rem;
    }
}

/* Mobile Action Bar */
.mobile-action-bar[b-tez27samgl] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-action-buttons[b-tez27samgl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-action-buttons .btn[b-tez27samgl] {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border: none;
}

.mobile-action-buttons .btn:hover[b-tez27samgl] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-action-buttons .btn:active[b-tez27samgl] {
    transform: scale(0.95);
}

/* Mobile Table Summary */
@media (max-width: 576px) {
    .mobile-table-summary[b-tez27samgl] {
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px;
        margin: 8px 0;
        font-size: 0.9rem;
    }

    .mobile-table-summary .summary-header[b-tez27samgl] {
        font-weight: 600;
        color: #163E9F;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-table-summary .summary-stats[b-tez27samgl] {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .mobile-table-summary .stat-item[b-tez27samgl] {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 60px;
    }

    .mobile-table-summary .stat-value[b-tez27samgl] {
        font-size: 1.1rem;
        font-weight: 700;
        color: #163E9F;
    }

    .mobile-table-summary .stat-label[b-tez27samgl] {
        font-size: 0.8rem;
        color: #666;
        text-align: center;
    }

    .mobile-table-summary .expand-toggle[b-tez27samgl] {
        background: none;
        border: 1px solid #163E9F;
        color: #163E9F;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-table-summary .expand-toggle:hover[b-tez27samgl] {
        background: #163E9F;
        color: white;
    }
}

.pmx-list-table[b-tez27samgl] {
    display: flex; 
    flex-direction: row;
    margin: 0 1%;
}

.container-relative[b-tez27samgl] {
    position: relative;
    width: 100%;
}

.lookup-panel[b-tez27samgl] {
    position: absolute;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100%;
    transition: right 0.4s ease, opacity 0.4s ease;
    z-index: 10;
    background-color: white; /* or whatever suits your theme */
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.lookup-panel.show[b-tez27samgl] {
    right: 0;
    opacity: 1;
}

.table-wrapper[b-tez27samgl] {
    transition: margin-right 0.4s ease;
    margin-right: 0;
}

.table-wrapper.shifted[b-tez27samgl] {
    margin-right: 50%; /* match lookup-panel width */
}

.sticky-header[b-tez27samgl] {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-bottom: 1px solid #ddd;
}

.lookup-flex-container[b-tez27samgl] {
    display: flex;
    width: 100%;
    transition: all 0.3s ease;  
}

.main-table[b-tez27samgl] {
    transition: all 0.3s ease;
}

.full-width[b-tez27samgl] {
    width: 100%;
}

.half-width[b-tez27samgl] {
    width: 40%;
}

.lookup-tab-panel[b-tez27samgl] {
    width: 100%;
    transition: all 0.3s ease;
    border-left: 2px solid black;
    
}

.pmxlist-title-row[b-tez27samgl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.pmxlist-title[b-tez27samgl] {
    margin-bottom: 0.5rem;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
    font-weight: 600;
}

.pmxlist-count[b-tez27samgl] {
    font-weight: 400;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    font-size: 1rem;
}

.pmxlist-legend[b-tez27samgl] {
    color: var(--ssy-colour-palette-slate-gray, #405864);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}

.pmxlist-filters-row[b-tez27samgl] {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e0e6eb;
    padding-bottom: 0.5rem;
    gap: 0.25rem;
}

.pmxlist-search-input[b-tez27samgl] {
    width: 250px;
    height: 1.6rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

:global(.pmxlist-compact-btn)[b-tez27samgl] {
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

.pmxlist-copy-label[b-tez27samgl] {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0 0.5rem 0 0.75rem;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
}

.pmxlist-iphone-textarea[b-tez27samgl] {
    width: 100%;
    min-height: 20vh;
    border: 1px solid #d9e3ea;
    border-radius: 12px;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
}

.pmxlist-mainsection[b-tez27samgl] {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    /*margin: auto;*/
    display: flex;
    flex-direction: column;
}

.pmxlist-header[b-tez27samgl] {
    width: 100%;
    background-color: #F4F7F9;
    padding: 2px 4px 0 4px;
    box-sizing: border-box;
}

.pmxlist-datasection[b-tez27samgl] {
    flex: 1;
    display: flex;
    overflow: hidden; /* Prevent parent scroll */
}

.pmxlist-datacolumn[b-tez27samgl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.pmxlist-singlecolumn[b-tez27samgl] {
    flex: 1 1 95%;
}
.pmxlist-split-column1[b-tez27samgl] {
    flex: 0 0 40%;
}
.pmxlist-split-column2[b-tez27samgl] {
    flex: 0 0 60%;
}










/* container that holds table + lookup */
.pmxlist-datasection.pmxlist-vertical[b-tez27samgl] {
display: flex;
flex-direction: column;
height: 100vh;          /* or 100% if parent already controls height */
min-height: 0;          /* important so children can scroll */
}

/* when lookup is off, table fills available space */
.pmxlist-datasection.pmxlist-horizontal[b-tez27samgl] {
/* keep your existing behaviour, or nothing if current CSS already handles it */
}

/* top 1/4 */
.pmxlist-top-panel[b-tez27samgl] {
flex: 0 0 20%;
min-height: 0;
overflow: auto;         /* table scrolls if content exceeds 25% */
}

/* bottom 3/4 */
.pmxlist-bottom-panel[b-tez27samgl] {
flex: 1 1 80%;
min-height: 0;
overflow: auto;         /* lookup scrolls if needed */
}

/* when lookup is off */
.pmxlist-full-panel[b-tez27samgl] {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}

.pmxlist-datasection.pmxlist-vertical .pmxlist-bottom-panel[b-tez27samgl] {
border-top: 2px solid #111010; /* adjust colour to match your theme */
}
/* /Components/Pages/Bulkers/PmxList/PmxList_310_FixturesHeader.razor.rz.scp.css */
.panamaxlist-header-form[b-n1b32nnfl9] {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    padding: 0 1rem;
}

@media (max-width: 768px) {
    .panamaxlist-header-form[b-n1b32nnfl9] {
        width: 100vw;
        margin-left: -1rem;
        padding: 0 1rem;
    }
}

.fixture-inline-row[b-n1b32nnfl9] {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    white-space: nowrap;
}

.fixture-inline-title[b-n1b32nnfl9] {
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

.inline-field[b-n1b32nnfl9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.inline-field label[b-n1b32nnfl9] {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.inline-field .form-control[b-n1b32nnfl9],
.inline-field input[b-n1b32nnfl9],
.inline-field select[b-n1b32nnfl9] {
    width: 220px;
}

.inline-field.details-field .form-control[b-n1b32nnfl9],
.inline-field.details-field input[b-n1b32nnfl9],
.inline-field.details-field select[b-n1b32nnfl9] {
    min-width: 420px;
}

.inline-field.vessel-field .form-control[b-n1b32nnfl9],
.inline-field.vessel-field input[b-n1b32nnfl9],
.inline-field.vessel-field select[b-n1b32nnfl9] {
    width: 260px;
}

.inline-button[b-n1b32nnfl9] {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex: 0 0 auto;
}

.inline-button button[b-n1b32nnfl9] {
    white-space: nowrap;
}

.validation-row[b-n1b32nnfl9] {
    margin-top: 6px;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_320_FixturesTable.razor.rz.scp.css */
/* Icon dropdown styles now in pmxlist-shared.css */
.col-select[b-xlh4llh1u4] {
    width: 3%;
    text-align: center;
}

.col-fixed-date[b-xlh4llh1u4] {
    width: 9%;
    white-space: nowrap;
}

.col-vessel[b-xlh4llh1u4] {
    width: 11%;
}

.col-details[b-xlh4llh1u4] {
    width: auto;
}

.col-pnc[b-xlh4llh1u4] {
    width: 4%;
    text-align: center;
}

.col-actions[b-xlh4llh1u4] {
    width: 7%;
    text-align: center;
}

/* Date navigation arrows */
.date-arrows-left[b-xlh4llh1u4],
.date-arrows-right[b-xlh4llh1u4] {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 1.5rem;
    line-height: 1;
    color: #000;
    cursor: pointer;
    transition: color 0.2s ease;
}

.date-arrows-left:hover[b-xlh4llh1u4],
.date-arrows-right:hover[b-xlh4llh1u4] {
    color: #007bff;
}

.date-arrows-left:disabled[b-xlh4llh1u4],
.date-arrows-right:disabled[b-xlh4llh1u4] {
    color: #ccc;
    cursor: default;
}

/* Icon dropdown box styles now in pmxlist-shared.css */

.fixtures-toolbar[b-xlh4llh1u4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.1rem;
    background: #F4F7F9;
    width: 100%;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    flex-wrap: wrap;
}

.fixtures-toolbar-left[b-xlh4llh1u4],
.fixtures-toolbar-middle[b-xlh4llh1u4],
.fixtures-toolbar-right[b-xlh4llh1u4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fixtures-toolbar-left label[b-xlh4llh1u4] {
    margin-bottom: 0;
    white-space: nowrap;
}

.fixtures-toolbar-middle[b-xlh4llh1u4] {
    flex-wrap: wrap;
}

.fixtures-toolbar-right[b-xlh4llh1u4] {
    margin-left: auto;
}

.pmxlist-updated-text[b-xlh4llh1u4] {
    font-size: 10px;
    color: #888;
    text-align: center;
    margin-top: 2px;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_402_TonnageArchive.razor.rz.scp.css */
/* Styles for the Panamaxlist Table Parser component */

.panamaxlist-parser h3[b-9bspiv1ef5] {
    color: #333;
    margin-bottom: 1.5rem;
}

.panamaxlist-parser textarea[b-9bspiv1ef5] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.panamaxlist-parser .table[b-9bspiv1ef5] {
    margin-top: 1rem;
}

.panamaxlist-parser .table thead th[b-9bspiv1ef5] {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.panamaxlist-parser .table td[b-9bspiv1ef5], .panamaxlist-parser .table th[b-9bspiv1ef5] {
    padding: 0.5rem;
    vertical-align: middle;
}

.panamaxlist-parser input[type="checkbox"][b-9bspiv1ef5] {
    cursor: pointer;
}

.panamaxlist-parser .alert[b-9bspiv1ef5] {
    animation: fadeIn-b-9bspiv1ef5 0.5s;
}

/* Search functionality styles */
.search-container[b-9bspiv1ef5] {
    min-width: 300px;
    margin-left: 1rem;
}

.search-results-count[b-9bspiv1ef5] {
    text-align: right;
    margin-top: 0.25rem;
    color: #6c757d;
}

.panamaxlist-parser .input-group-append button[b-9bspiv1ef5] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.panamaxlist-parser .input-group-append button span[b-9bspiv1ef5] {
    font-size: 1.5rem;
    line-height: 0.5;
    display: inline-block;
}

/* Upload feedback styles */
.upload-feedback[b-9bspiv1ef5] {
    position: relative;
    padding-bottom: 2rem;
}

.upload-progress[b-9bspiv1ef5] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 0 0 0.25rem 0.25rem;
}

.upload-progress-bar[b-9bspiv1ef5] {
    height: 100%;
    width: 0;
    background-color: #17a2b8;
    animation: progress-b-9bspiv1ef5 3s ease-in-out forwards;
}

@keyframes progress-b-9bspiv1ef5 {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes fadeIn-b-9bspiv1ef5 {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/Bulkers/PmxList/PmxList_520_PendingTonnage.razor.rz.scp.css */
/* Styles for the Panamaxlist Table Parser component */

.panamaxlist-parser h3[b-yon7gb4pyj] {
    color: #333;
    margin-bottom: 1.5rem;
}

.panamaxlist-parser textarea[b-yon7gb4pyj] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.panamaxlist-parser .table[b-yon7gb4pyj] {
    margin-top: 1rem;
}

.panamaxlist-parser .table thead th[b-yon7gb4pyj] {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.panamaxlist-parser .table td[b-yon7gb4pyj], .panamaxlist-parser .table th[b-yon7gb4pyj] {
    padding: 0.5rem;
    vertical-align: middle;
}

.panamaxlist-parser input[type="checkbox"][b-yon7gb4pyj] {
    cursor: pointer;
}

.panamaxlist-parser .alert[b-yon7gb4pyj] {
    animation: fadeIn-b-yon7gb4pyj 0.5s;
}

/* Search functionality styles */
.search-container[b-yon7gb4pyj] {
    min-width: 300px;
    margin-left: 1rem;
}

.search-results-count[b-yon7gb4pyj] {
    text-align: right;
    margin-top: 0.25rem;
    color: #6c757d;
}

.panamaxlist-parser .input-group-append button[b-yon7gb4pyj] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.panamaxlist-parser .input-group-append button span[b-yon7gb4pyj] {
    font-size: 1.5rem;
    line-height: 0.5;
    display: inline-block;
}

/* Upload feedback styles */
.upload-feedback[b-yon7gb4pyj] {
    position: relative;
    padding-bottom: 2rem;
}

.upload-progress[b-yon7gb4pyj] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 0 0 0.25rem 0.25rem;
}

.upload-progress-bar[b-yon7gb4pyj] {
    height: 100%;
    width: 0;
    background-color: #17a2b8;
    animation: progress-b-yon7gb4pyj 3s ease-in-out forwards;
}

@keyframes progress-b-yon7gb4pyj {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes fadeIn-b-yon7gb4pyj {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/Bulkers/PmxList/PmxList_598_AIProcess.razor.rz.scp.css */
/* Styles for the Panamaxlist Table Parser component */

.panamaxlist-parser h3[b-x2g2tfvijr] {
    color: #333;
    margin-bottom: 1.5rem;
}

.panamaxlist-parser textarea[b-x2g2tfvijr] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.panamaxlist-parser .table[b-x2g2tfvijr] {
    margin-top: 1rem;
}

.panamaxlist-parser .table thead th[b-x2g2tfvijr] {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.panamaxlist-parser .table td[b-x2g2tfvijr], .panamaxlist-parser .table th[b-x2g2tfvijr] {
    padding: 0.5rem;
    vertical-align: middle;
}

.panamaxlist-parser input[type="checkbox"][b-x2g2tfvijr] {
    cursor: pointer;
}

.panamaxlist-parser .alert[b-x2g2tfvijr] {
    animation: fadeIn-b-x2g2tfvijr 0.5s;
}

/* Search functionality styles */
.search-container[b-x2g2tfvijr] {
    min-width: 300px;
    margin-left: 1rem;
}

.search-results-count[b-x2g2tfvijr] {
    text-align: right;
    margin-top: 0.25rem;
    color: #6c757d;
}

.panamaxlist-parser .input-group-append button[b-x2g2tfvijr] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.panamaxlist-parser .input-group-append button span[b-x2g2tfvijr] {
    font-size: 1.5rem;
    line-height: 0.5;
    display: inline-block;
}

/* Upload feedback styles */
.upload-feedback[b-x2g2tfvijr] {
    position: relative;
    padding-bottom: 2rem;
}

.upload-progress[b-x2g2tfvijr] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 0 0 0.25rem 0.25rem;
}

.upload-progress-bar[b-x2g2tfvijr] {
    height: 100%;
    width: 0;
    background-color: #17a2b8;
    animation: progress-b-x2g2tfvijr 3s ease-in-out forwards;
}

@keyframes progress-b-x2g2tfvijr {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes fadeIn-b-x2g2tfvijr {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/Bulkers/PmxList/PmxList_598_Verification.razor.rz.scp.css */
.pmxlist-verification-subline[b-uvhsg51uz6] {
    font-size: 0.85em;
    font-weight: 700;
    color: #6c757d;
    margin-top: 1px;
}

.pmxlist-verification-wrap[b-uvhsg51uz6] {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.pmxlist-verification-reason[b-uvhsg51uz6] {
    color: #b02a37;
    font-weight: 600;
}

.pmxlist-verification-source[b-uvhsg51uz6] {
    color: #555;
    font-size: 0.85rem;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_599_Parser.razor.rz.scp.css */
/* Styles for the Panamaxlist Table Parser component */

.panamaxlist-parser h3[b-g1t1eiixgv] {
    color: #333;
    margin-bottom: 1.5rem;
}

.panamaxlist-parser textarea[b-g1t1eiixgv] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.panamaxlist-parser .table[b-g1t1eiixgv] {
    margin-top: 1rem;
}

.panamaxlist-parser .table thead th[b-g1t1eiixgv] {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.panamaxlist-parser .table td[b-g1t1eiixgv], .panamaxlist-parser .table th[b-g1t1eiixgv] {
    padding: 0.5rem;
    vertical-align: middle;
}

.panamaxlist-parser input[type="checkbox"][b-g1t1eiixgv] {
    cursor: pointer;
}

.panamaxlist-parser .alert[b-g1t1eiixgv] {
    animation: fadeIn-b-g1t1eiixgv 0.5s;
}

/* Search functionality styles */
.search-container[b-g1t1eiixgv] {
    min-width: 300px;
    margin-left: 1rem;
}

.search-results-count[b-g1t1eiixgv] {
    text-align: right;
    margin-top: 0.25rem;
    color: #6c757d;
}

.panamaxlist-parser .input-group-append button[b-g1t1eiixgv] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.panamaxlist-parser .input-group-append button span[b-g1t1eiixgv] {
    font-size: 1.5rem;
    line-height: 0.5;
    display: inline-block;
}

/* Upload feedback styles */
.upload-feedback[b-g1t1eiixgv] {
    position: relative;
    padding-bottom: 2rem;
}

.upload-progress[b-g1t1eiixgv] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 0 0 0.25rem 0.25rem;
}

.upload-progress-bar[b-g1t1eiixgv] {
    height: 100%;
    width: 0;
    background-color: #17a2b8;
    animation: progress-b-g1t1eiixgv 3s ease-in-out forwards;
}

@keyframes progress-b-g1t1eiixgv {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes fadeIn-b-g1t1eiixgv {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/Bulkers/PmxList/PmxList_600_MarketView.razor.rz.scp.css */
.dashboard-grid[b-eni5koq5k5] {
    display: flex;
    flex-wrap: wrap;      /* allow boxes to naturally wrap */
    gap: 12px;
}

.dashboard-box[b-eni5koq5k5] {
    flex: 1 1 calc(25% - 12px); /* 4 per row */
    max-width: calc(25% - 12px);
    min-width: 150px;
}

.dashboard-box[b-eni5koq5k5] {
    border: 1px solid #000061;
    border-radius: 5px;
    overflow: hidden;
    width: 150px;
    font-weight: bold;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
}

.dashboard-box-title[b-eni5koq5k5] {
    background-color: #000061; /* SSY blue */
    color: white;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.dashboard-box-value[b-eni5koq5k5] {
    background-color: white;
    color: black;
    padding: 2px 0px;
    font-size: 16px;
    text-align: center;
}

.dashboard-box-value.positive[b-eni5koq5k5] {
    color: green;
}

.dashboard-box-value.negative[b-eni5koq5k5] {
    color: red;
}

.container-wrapper[b-eni5koq5k5] {
    display: flex;
    justify-content: space-between; /* Space evenly between containers */
    align-items: stretch; /* Ensure equal height */
    gap: 20px; /* Space between containers */
    margin-top: 20px; /* Add spacing between rows of containers */
}

.selectable-row[b-eni5koq5k5] {
    cursor: pointer;
}

.selectable-row.selected[b-eni5koq5k5] {
    background-color: #049924;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_810_ActivityLog.razor.rz.scp.css */
html[b-o514g2j1oo], body[b-o514g2j1oo] { height: 100vh; margin: 0; background: #f5f6f8; }

.page-shell[b-o514g2j1oo] {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.log-container[b-o514g2j1oo] {
flex: 1;
min-height: 0;          /* enables inner scrolling */
display: flex;
flex-direction: column;
margin-top: 10px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Header row (always at the very top) */
.log-headerbar[b-o514g2j1oo] {
display: grid;
grid-template-columns: 180px 180px 1fr 180px;
padding: 10px;
border-bottom: 1px solid #e6e8ec;
font-weight: 700;
color: #000061;
}

/* Scrollable area that bottom-anchors content: spacer (1fr) + table (auto) */
.content-frame[b-o514g2j1oo] {
flex: 1;
min-height: 0;
overflow: auto;

display: grid;
grid-template-rows: 1fr auto;
padding: 10px;
}

/* Table niceties (your DS likely covers most) */
.ssy-table-lw td[b-o514g2j1oo] { vertical-align: top; }
.ssy-table-lw td:nth-child(3)[b-o514g2j1oo] { white-space: normal; } /* allow details to wrap */
.ssy-table-lw td:not(:nth-child(3))[b-o514g2j1oo] { white-space: nowrap; }

.log-date-separator td[b-o514g2j1oo] {
    background-color: #f0f0f0;
    font-weight: bold;
    text-align: left;
    padding: 6px 10px;
    border-top: 2px solid #ccc;
}

.date-header[b-o514g2j1oo] {
    color: #555;
    font-size: 0.9rem;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_905_MissingData.razor.rz.scp.css */
.pmx905-missingdata .pmx905-subtabs[b-syolzactjg] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 2px solid #000061;
    padding-bottom: 4px;
}

.pmx905-missingdata .pmx905-subtab[b-syolzactjg] {
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    background: #f5f5f5;
    color: #444;
    cursor: pointer;
    position: relative;
    bottom: -2px;
    border-bottom: none;
}

.pmx905-missingdata .pmx905-subtab:hover[b-syolzactjg] {
    background: #e8e8e8;
}

.pmx905-missingdata .pmx905-subtab.active[b-syolzactjg] {
    background: white;
    color: #000061;
    border-color: #000061;
    border-bottom-color: white;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_905_MissingData_VesselSpecs.razor.rz.scp.css */
.pmx905specs-wrap .pmx905specs-card[b-58e8uw0bfw] {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}

.pmx905specs-wrap .pmx905specs-card-header[b-58e8uw0bfw] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 13px;
}

.pmx905specs-wrap .pmx905specs-imo[b-58e8uw0bfw] {
    font-weight: 400;
    font-size: 12px;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.pmx905specs-wrap .pmx905specs-card-body[b-58e8uw0bfw] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 12px;
}

.pmx905specs-wrap .pmx905specs-panel[b-58e8uw0bfw] {
    flex: 1 1 180px;
    min-width: 160px;
}

.pmx905specs-wrap .pmx905specs-panel-wide[b-58e8uw0bfw] {
    flex: 4 1 360px;
    min-width: 320px;
}

.pmx905specs-wrap .pmx905specs-panel + .pmx905specs-panel[b-58e8uw0bfw] {
    border-left: 1px solid #eee;
    padding-left: 16px;
}

.pmx905specs-wrap .pmx905specs-panel-title-row[b-58e8uw0bfw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.pmx905specs-wrap .pmx905specs-panel-title[b-58e8uw0bfw] {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pmx905specs-wrap .pmx905specs-label[b-58e8uw0bfw] {
    font-size: 11px;
    color: #666;
    margin-bottom: 2px;
}

.pmx905specs-wrap .pmx905specs-editgrid[b-58e8uw0bfw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 6px 14px;
}

.pmx905specs-wrap .pmx905specs-viewgrid[b-58e8uw0bfw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 4px 14px;
    font-size: 13px;
}

.pmx905specs-wrap .pmx905specs-viewgrid > div[b-58e8uw0bfw] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px dotted #eee;
    padding-bottom: 2px;
}

.pmx905specs-wrap .pmx905specs-actions[b-58e8uw0bfw] {
    margin-top: 10px;
    display: flex;
    gap: 6px;
}

.pmx905specs-wrap .pmx905specs-noprofiles[b-58e8uw0bfw] {
    font-size: 12px;
    color: #999;
}

.pmx905specs-wrap .pmx905specs-panel table.ssy-table-lw[b-58e8uw0bfw] {
    width: 100%;
    font-size: 12px;
    margin-bottom: 4px;
}

.pmx905specs-wrap .pmx905specs-nowrap[b-58e8uw0bfw] {
    white-space: nowrap;
}

.pmx905specs-wrap .pmx905specs-addrow[b-58e8uw0bfw] {
    background: #f0f7ff;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_990_Admin.razor.rz.scp.css */
.table-stickyheader thead[b-f7spxbh111] {
    position: sticky;
    top: 0;
    font-weight: normal;
    padding: 0 2px 0 2px;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_Misc_BKI_Ships.razor.rz.scp.css */
.pmxbkiships-wrap .pmxbkiships-card[b-31pr6dfi9o] {
    background: #fff;
    margin-bottom: 0;
    overflow: hidden;
}

.pmxbkiships-wrap .pmxbkiships-card-header[b-31pr6dfi9o] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 13px;
}

.pmxbkiships-wrap .pmxbkiships-imo[b-31pr6dfi9o] {
    font-weight: 400;
    font-size: 12px;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.pmxbkiships-wrap .pmxbkiships-card-body[b-31pr6dfi9o] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 12px;
}

.pmxbkiships-wrap .pmxbkiships-panel[b-31pr6dfi9o] {
    flex: 1 1 180px;
    min-width: 160px;
}

.pmxbkiships-wrap .pmxbkiships-panel-wide[b-31pr6dfi9o] {
    flex: 4 1 360px;
    min-width: 320px;
}

.pmxbkiships-wrap .pmxbkiships-panel + .pmxbkiships-panel[b-31pr6dfi9o] {
    border-left: 1px solid #eee;
    padding-left: 16px;
}

.pmxbkiships-wrap .pmxbkiships-panel-title-row[b-31pr6dfi9o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.pmxbkiships-wrap .pmxbkiships-panel-title[b-31pr6dfi9o] {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pmxbkiships-wrap .pmxbkiships-label[b-31pr6dfi9o] {
    font-size: 11px;
    color: #666;
    margin-bottom: 2px;
}

.pmxbkiships-wrap .pmxbkiships-editgrid[b-31pr6dfi9o] {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 6px 14px;
}

.pmxbkiships-wrap .pmxbkiships-viewgrid[b-31pr6dfi9o] {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 4px 14px;
    font-size: 13px;
}

.pmxbkiships-wrap .pmxbkiships-viewgrid > div[b-31pr6dfi9o] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px dotted #eee;
    padding-bottom: 2px;
}

.pmxbkiships-wrap .pmxbkiships-actions[b-31pr6dfi9o] {
    margin-top: 10px;
    display: flex;
    gap: 6px;
}

.pmxbkiships-wrap .pmxbkiships-noprofiles[b-31pr6dfi9o] {
    font-size: 12px;
    color: #999;
}

.pmxbkiships-wrap .pmxbkiships-panel table.ssy-table-lw[b-31pr6dfi9o] {
    width: 100%;
    font-size: 12px;
    margin-bottom: 4px;
}

.pmxbkiships-wrap .pmxbkiships-nowrap[b-31pr6dfi9o] {
    white-space: nowrap;
}

.pmxbkiships-wrap .pmxbkiships-addrow[b-31pr6dfi9o] {
    background: #f0f7ff;
}
/* /Components/Pages/Bulkers/Reports/CommodityPrices/RptCommodityPrices.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────────
   SSY Broker Commodity Prices — page styling
   Palette mirrors the colours used in the Python source script and matches
   the SSY Geared Markets brand language.

   (Scoped .razor.css cannot include @import — load EB Garamond / Source
    Sans 3 from App.razor's <head> if not already present.)
   ──────────────────────────────────────────────────────────────────────── */

.ssy-comm-frame[b-l69har0x9d] {
    --ssy-navy:        #000061;
    --ssy-navy-light:  #163E9F;
    --ssy-cyan:        #009DC9;
    --ssy-blue-mid:    #0087CB;
    --ssy-aqua:        #00E2FD;
    --ssy-pink:        #EB3871;
    --ssy-teal:        #01A39E;
    --ssy-purple:      #752FD0;
    --ssy-band:        #75BEE3;
    --ssy-grey:        #4a4a4a;
    --ssy-grey-soft:   #ededed;
    --ssy-up:          #2aaf57;
    --ssy-down:        #e23b3b;
    --serif:           "EB Garamond", Georgia, "Times New Roman", serif;
    --sans:            "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif;

    max-width: 1480px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 97, 0.07);
    border-radius: 14px;
    padding: 0 30px 36px;
    font-family: var(--sans);
    color: var(--ssy-grey);
    overflow: hidden;
}

/* ─── Masthead ──────────────────────────────────────────────────────── */
.ssy-comm-mast[b-l69har0x9d] { padding: 18px 0 0; }
.ssy-comm-mast-row[b-l69har0x9d] {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 24px; padding-bottom: 8px;
}
.ssy-comm-mast-brand[b-l69har0x9d] { display: flex; align-items: center; gap: 18px; }
.ssy-comm-mast-logo[b-l69har0x9d]  {
    height: 110px; width: auto; flex-shrink: 0;
    object-fit: fill; display: block;
}
.ssy-comm-mast-title h1[b-l69har0x9d] {
    font-family: var(--serif); font-weight: 600; font-size: 34px;
    color: var(--ssy-navy); margin: 0; letter-spacing: 0.4px; line-height: 1.1;
}
.ssy-comm-mast-title .subtitle[b-l69har0x9d] {
    font-family: var(--sans); font-weight: 600; color: var(--ssy-cyan);
    margin: 2px 0 0; font-size: 14px; letter-spacing: 0.4px;
    text-transform: uppercase;
}

.ssy-comm-mast-contact[b-l69har0x9d] {
    text-align: right; font-size: 12.5px; color: var(--ssy-grey); line-height: 1.55;
}
.ssy-comm-mast-contact .date-display[b-l69har0x9d] {
    font-family: var(--serif); font-weight: 700; font-size: 22px;
    color: var(--ssy-navy); margin-bottom: 6px;
}
.ssy-comm-mast-contact .lbl[b-l69har0x9d] { color: #999; display: inline-block; min-width: 76px; }
.ssy-comm-mast-contact a[b-l69har0x9d] { color: var(--ssy-blue-mid); text-decoration: none; }
.ssy-comm-mast-contact a:hover[b-l69har0x9d] { text-decoration: underline; }

.ssy-comm-mast-wave[b-l69har0x9d] { display: block; width: 100%; height: 36px; margin-top: -2px; }

/* ─── Toolbar ───────────────────────────────────────────────────────── */
.ssy-comm-toolbar[b-l69har0x9d] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 0 12px; flex-wrap: wrap;
}

.ssy-comm-status[b-l69har0x9d] { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #777; }
.ssy-comm-pill[b-l69har0x9d] {
    display: inline-block; padding: 3px 10px; border-radius: 11px;
    font-weight: 700; font-size: 11px; letter-spacing: 0.3px;
    background: var(--ssy-grey-soft); color: #555;
}
.ssy-comm-pill.live[b-l69har0x9d]    { background: #d6f4e2; color: #1f8a44; }
.ssy-comm-pill.mock[b-l69har0x9d]    { background: #fff4d4; color: #8a6a18; }
.ssy-comm-pill.loading[b-l69har0x9d] { background: #e8eef5; color: var(--ssy-navy); }
.ssy-comm-stamp[b-l69har0x9d] { font-size: 12px; color: #777; }

.ssy-comm-cat-tabs[b-l69har0x9d] { display: flex; gap: 6px; flex-wrap: wrap; }
.ssy-comm-cat[b-l69har0x9d] {
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    padding: 6px 12px; border-radius: 18px; border: 1px solid #d0d6dd;
    background: #fff; color: var(--ssy-grey); cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.ssy-comm-cat:hover:not(.active)[b-l69har0x9d] {
    background: #f0f5fa; border-color: var(--ssy-cyan); color: var(--ssy-navy);
}
.ssy-comm-cat.active[b-l69har0x9d] {
    background: var(--ssy-navy); color: #fff; border-color: var(--ssy-navy);
}

.ssy-comm-actions[b-l69har0x9d] { display: flex; gap: 8px; }
.ssy-comm-btn[b-l69har0x9d] {
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    padding: 7px 14px; border-radius: 22px; cursor: pointer;
    border: 1px solid var(--ssy-navy); background: var(--ssy-navy); color: #fff;
}
.ssy-comm-btn:hover:not([disabled])[b-l69har0x9d] { background: #00003e; }
.ssy-comm-btn[disabled][b-l69har0x9d] { opacity: 0.5; cursor: not-allowed; }
.ssy-comm-btn-primary[b-l69har0x9d] {}

/* ─── Section title ─────────────────────────────────────────────────── */
.ssy-comm-section-h[b-l69har0x9d] {
    font-family: var(--serif); font-weight: 700;
    color: var(--ssy-navy); font-size: 24px;
    margin: 8px 0 14px;
    text-align: center;
}

/* Date-range strip beneath the toolbar — italic, smaller, teal-green. */
.ssy-comm-date-range[b-l69har0x9d] {
    font-family: var(--sans);
    font-style: italic;
    font-weight: 600;
    font-size: 13px;
    color: var(--ssy-teal);
    margin: 4px 0 16px;
    text-align: center;
    letter-spacing: 0.2px;
}

/* ─── 5×5 grid ──────────────────────────────────────────────────────── */
.ssy-comm-grid[b-l69har0x9d] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 4px 0;
}
@media (max-width: 1280px) { .ssy-comm-grid[b-l69har0x9d] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .ssy-comm-grid[b-l69har0x9d] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ssy-comm-grid[b-l69har0x9d] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .ssy-comm-grid[b-l69har0x9d] { grid-template-columns: 1fr; } }

/* Cell base styles (cell component supplies its own scoped CSS too) */
.ssy-comm-cell[b-l69har0x9d] {
    border: 1px solid #e2e7ec;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .12s, box-shadow .12s;
}
.ssy-comm-cell:hover[b-l69har0x9d] { border-color: var(--ssy-band); box-shadow: 0 4px 14px rgba(0,0,97,.06); }

.ssy-comm-cell.empty[b-l69har0x9d] {
    background: repeating-linear-gradient(45deg, #f7fafc, #f7fafc 8px, #fff 8px, #fff 16px);
    border-color: #ebedf0;
}
.ssy-comm-cell.empty .ssy-comm-cell-head[b-l69har0x9d] { background: #c6d0d8; }
.ssy-comm-cell.empty .ssy-comm-cell-head .name[b-l69har0x9d] { color: #fff; }
.ssy-comm-cell.empty .ssy-comm-cell-head .desc[b-l69har0x9d] { color: rgba(255,255,255,0.85); }

.ssy-comm-cell.skeleton .ssy-comm-cell-head .name[b-l69har0x9d],
.ssy-comm-cell.skeleton .ssy-comm-cell-head .desc[b-l69har0x9d] {
    background: linear-gradient(90deg, #e8edf2 25%, #f5f7f9 50%, #e8edf2 75%);
    background-size: 200% 100%; animation: comm-shimmer-b-l69har0x9d 1.4s linear infinite;
    border-radius: 3px; min-height: 14px; color: transparent;
}
@keyframes comm-shimmer-b-l69har0x9d {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ssy-comm-cell-head[b-l69har0x9d] {
    background: var(--ssy-band);
    color: #fff;
    padding: 7px 10px 8px;
    text-align: center;
    line-height: 1.2;
}
[b-l69har0x9d] .ssy-comm-cell-head .name {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 13px;
    color: var(--ssy-navy);
}
[b-l69har0x9d] .ssy-comm-cell-head .desc {
    font-style: italic;
    font-size: 10px;
    margin-top: 1px;
    color: #666;
}

.ssy-comm-cell-chart[b-l69har0x9d] { flex: 1; min-height: 160px; padding: 0 4px 4px; }

/* Cell meta (last value + 3M delta). The cell component renders these
   classes inside a child render fragment, so we use ::deep to reach them. */
[b-l69har0x9d] .ssy-comm-cell-meta {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px 0;
    font-size: 11px;
    color: #777;
}
[b-l69har0x9d] .ssy-comm-cell-meta .last  { font-weight: 700; color: #000061; font-size: 12px; }
[b-l69har0x9d] .ssy-comm-cell-meta .delta.up   { color: #2aaf57; font-weight: 700; }
[b-l69har0x9d] .ssy-comm-cell-meta .delta.down { color: #e23b3b; font-weight: 700; }
[b-l69har0x9d] .ssy-comm-cell-meta .delta.flat { color: #777; }

/* ─── Footer ────────────────────────────────────────────────────────── */
.ssy-comm-disclaimer[b-l69har0x9d] {
    margin-top: 28px; padding: 14px 0 6px;
    border-top: 1px solid #dadfe5;
    font-size: 11px; color: #888; line-height: 1.55;
}
.ssy-comm-disclaimer strong[b-l69har0x9d] { color: var(--ssy-navy); }

.ssy-comm-error[b-l69har0x9d] {
    margin-top: 14px; padding: 10px 14px;
    border: 1px solid #f3c4c4; background: #fff5f5; color: #a23030;
    border-radius: 6px; font-size: 12.5px;
}
/* /Components/Pages/Bulkers/Reports/DBF/RptDryBulkForecaster_010_Main.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   Dry Bulk Forecaster — screen-only chrome: the desk the report sits on and
   the control bar above it.

   None of this belongs in the PDF, which is exactly why it is scoped here. The
   report pages themselves are styled in wwwroot/css/ssydbf.css, because the PDF
   service inlines wwwroot/css but not the scoped-CSS bundle.
   ───────────────────────────────────────────────────────────────────────────── */

/* Bleeds through .body-main's 1rem side padding. The layout drops that padding under 768px, hence the
   reset below. */
.dbf-viewer[b-qhekkm070h] {
    margin: 0 -1rem;
    padding: 0 0 40px;
    min-height: 100%;
}

@media (max-width: 768px) {
    .dbf-viewer[b-qhekkm070h] {
        margin: 0;
    }
}

/* ── Control bar ──────────────────────────────────────────────────────────────
   Title, issue date, page picker and tools, all on one line. Deliberately wider
   than the 900px sheet so everything fits. It never wraps — on a narrow window the
   bar scrolls sideways instead, so the row stays a single line. */
.dbf-bar[b-qhekkm070h] {
    background-color: #fff;
    width: min(100%, 1340px);
    margin: 0 auto 16px;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    position: sticky;
    top: 0;
    z-index: 50;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 60, 0.5);
}

.dbf-bar-title[b-qhekkm070h] {
    color: #000061;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.dbf-bar-select[b-qhekkm070h] {
    font-size: 0.75rem;
    padding: 2px 4px;
    border: 1px solid #3C5A9F;
    border-radius: 3px;
    background: #fff;
    color: #000061;
}

/* One picker holds the whole issue date, so it is sized for the longest month name rather
   than resizing — and moving everything beside it — each time the issue changes. */
.dbf-bar-issue[b-qhekkm070h] {
    min-width: 122px;
}

/* The page picker as a dropdown, for windows too narrow to hold the strip of buttons.
   Only one of the two is ever on screen — see the narrow-window block at the foot of
   this file, which is where they trade places. */
.dbf-bar-pages-select[b-qhekkm070h] {
    display: none;
}

/* Page picker. Centred in the slack in the middle of the bar, and never squeezed —
   the bar scrolls before the buttons give up any width. */
.dbf-bar-pages[b-qhekkm070h] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 0 auto;
    flex-wrap: nowrap;
    justify-content: center;
    min-width: max-content;
}

.dbf-nav-btn[b-qhekkm070h] {
    padding: 4px 9px;
    font-size: 0.74rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
    background: #000061;
    color: #fff;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

    .dbf-nav-btn:hover[b-qhekkm070h] {
        background: #163E9F;
        color: #fff;
        border-color: #163E9F;
    }

    .dbf-nav-btn.active[b-qhekkm070h] {
        background: #009DCA;
        border-color: #009DCA;
        color: #fff;
        font-weight: 600;
    }

/* Takes the picker's place on an archived issue — same slack in the middle of the bar, so
   the tools sit where they always do whichever issue is on screen. */
.dbf-bar-legacy[b-qhekkm070h] {
    flex: 1 0 auto;
    min-width: max-content;
    text-align: center;
    color: #536A75;
    font-size: 0.74rem;
    white-space: nowrap;
}

/* ── Tools ────────────────────────────────────────────────────────────────── */
.dbf-bar-tools[b-qhekkm070h] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* View / Edit switch, built like the zoom control beside it: one segmented pill, the side
   in force filled in. Only the report's authors ever see it. */
.dbf-mode[b-qhekkm070h] {
    display: flex;
    align-items: center;
    background: #000061;
    border: 1px solid transparent;
    border-radius: 3px;
    overflow: hidden;
}

.dbf-mode-btn[b-qhekkm070h] {
    border: 0;
    background: #000061;
    color: #fff;
    font-size: 0.74rem;
    padding: 4px 10px;
    height: 24px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

    .dbf-mode-btn + .dbf-mode-btn[b-qhekkm070h] {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }

    .dbf-mode-btn:hover[b-qhekkm070h] {
        background: #163E9F;
        color: #fff;
    }

    .dbf-mode-btn.active[b-qhekkm070h] {
        background: #009DCA;
        color: #fff;
        font-weight: 600;
    }

/* Publication. Built like the View/Edit switch beside it, because it is the same kind of
   thing — a state and the way to change it — but the state reads in olive rather than the
   bar's blues: it is the one control here that says something about the report's standing
   with clients rather than about this reader's view of it. */
.dbf-publish[b-qhekkm070h] {
    display: flex;
    align-items: center;
    border-radius: 3px;
    overflow: hidden;
}

.dbf-publish-state[b-qhekkm070h] {
    background: #91A527;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 10px;
    height: 24px;
    line-height: 16px;
    white-space: nowrap;
}

.dbf-publish-btn[b-qhekkm070h] {
    border: 0;
    background: #405864;
    color: #fff;
    font-size: 0.74rem;
    padding: 4px 10px;
    height: 24px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.15s;
}

    .dbf-publish-btn:hover[b-qhekkm070h] {
        background: #163E9F;
    }

    /* Armed: the next click withdraws the issue, so it stops looking like the rest of the bar. */
    .dbf-publish-btn.armed[b-qhekkm070h],
    .dbf-publish-btn.armed:hover[b-qhekkm070h] {
        background: #DB303A;
        font-weight: 600;
    }

.dbf-publish-go[b-qhekkm070h] {
    font-size: 0.76rem;
    padding: 3px 12px;
    white-space: nowrap;
}

/* Sits under the bar on its own line — see the markup. Two bands, one look: a publish that did
   not reach the database and a capture that came out short of its charts are different questions,
   but they read the same way and can both be unanswered at once. */
.dbf-publish-msg[b-qhekkm070h],
.dbf-capture-msg[b-qhekkm070h] {
    width: min(100%, 1340px);
    margin: -8px auto 12px;
    padding: 6px 14px;
    background: #fff;
    border-left: 3px solid #DB303A;
    border-radius: 3px;
    color: #DB303A;
    font-size: 0.76rem;
}

.dbf-zoom[b-qhekkm070h] {
    display: flex;
    align-items: center;
    background: #000061;
    border: 1px solid transparent;
    border-radius: 3px;
    overflow: hidden;
}

.dbf-zoom-btn[b-qhekkm070h],
.dbf-zoom-level[b-qhekkm070h] {
    border: 0;
    background: #000061;
    color: #fff;
    font-size: 0.76rem;
    padding: 4px 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.dbf-zoom-btn[b-qhekkm070h] {
    width: 24px;
    height: 24px;
    font-size: 0.95rem;
    line-height: 1;
}

.dbf-zoom-level[b-qhekkm070h] {
    width: 46px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

    .dbf-zoom-btn:hover:not(:disabled)[b-qhekkm070h],
    .dbf-zoom-level:hover[b-qhekkm070h] {
        background: #163E9F;
        color: #fff;
    }

    .dbf-zoom-btn:disabled[b-qhekkm070h] {
        color: #3C5A9F;
        cursor: default;
    }

.dbf-bar-pdf[b-qhekkm070h] {
    font-size: 0.76rem;
    padding: 3px 12px;
    white-space: nowrap;
}

/* ── While a capture is running ───────────────────────────────────────────────
   The bar goes quiet for the length of a capture: it now waits for its charts, so it lasts
   seconds, and an issue changed under it hands the author a document of one issue passed by a
   check made on another. Stated visually as well as enforced — a control that looks live and
   does nothing is worse than one that plainly cannot be used.

   pointer-events rather than a :not(:disabled) on each control's hover: :not() carries its
   argument's specificity, so narrowing the hovers lifts them above the .active states that win on
   source order, and the page you are on loses its selected colour the moment you hover it. Taking
   the pointer out of the equation leaves every other rule exactly as it was — and reaches the
   ssy-btn-main hover behind Publish and Preview PDF, which lives in a global stylesheet this file
   could not have narrowed anyway. Nothing is lost: the control is already inert, and its title is
   not worth reading while the report is off-screen. */
.dbf-bar-select:disabled[b-qhekkm070h],
.dbf-nav-btn:disabled[b-qhekkm070h],
.dbf-mode-btn:disabled[b-qhekkm070h],
.dbf-publish-btn:disabled[b-qhekkm070h],
.dbf-publish-go:disabled[b-qhekkm070h],
.dbf-bar-pdf:disabled[b-qhekkm070h] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* ── Narrow windows ───────────────────────────────────────────────────────────
   A phone cannot hold the full bar, and three of the things on it have nothing to do
   there: the browser does its own zooming, the PDF is a desk job, and the report's name
   is on the sheet below anyway. Eight page buttons will not fit either, so the picker
   becomes the dropdown — same ActivePage behind it, so the two can never disagree about
   which page is open. */
@media (max-width: 768px) {
    .dbf-bar-title[b-qhekkm070h],
    .dbf-bar-pages[b-qhekkm070h],
    .dbf-zoom[b-qhekkm070h],
    .dbf-bar-pdf[b-qhekkm070h] {
        display: none;
    }

    /* Pushes the tools to the right of the bar, the way the button strip's slack did. */
    .dbf-bar-pages-select[b-qhekkm070h] {
        display: block;
        min-width: 132px;
        margin-right: auto;
    }
}

/* ── Fitting the sheet to a phone ─────────────────────────────────────────────
   A page is a fixed 900px of paper — the whole layout is drawn against that width —
   so on a phone it is zoomed down until it fits rather than reflowed. The paper keeps
   its `margin: 0 auto` from ssydbf.css and zoom shrinks the box it centres, so it stays
   in the middle of whatever is left.

   Steps rather than a formula: `zoom` cannot be worked out from the viewport in CSS.
   Each stop is set to land comfortably inside its own breakpoint (900 × zoom, plus room
   to breathe), so every width in the band fits. The capture is excluded — those sheets
   carry their own zoom, and the document is not a phone.

   These stops live here rather than in ssydbf.css because they are screen-only, and the
   PDF service never receives the scoped bundle. */
@media (max-width: 768px) {
    .dbf-paper:not(.dbf-paper-pdf)[b-qhekkm070h] {
        zoom: 0.8;
    }
}

@media (max-width: 600px) {
    .dbf-paper:not(.dbf-paper-pdf)[b-qhekkm070h] {
        zoom: 0.62;
    }
}

@media (max-width: 480px) {
    .dbf-paper:not(.dbf-paper-pdf)[b-qhekkm070h] {
        zoom: 0.48;
    }
}

@media (max-width: 400px) {
    .dbf-paper:not(.dbf-paper-pdf)[b-qhekkm070h] {
        zoom: 0.39;
    }
}

/* ── PDF capture ──────────────────────────────────────────────────────────────
   The report wrapper while a PDF is being built. Parked off-screen rather than
   hidden so the sheets still lay out; the capture takes the wrapper's innerHTML,
   so nothing here reaches the document. */
.dbf-capture[b-qhekkm070h] {
    position: fixed;
    top: 0;
    left: -20000px;
    width: 900px;
}

.dbf-building[b-qhekkm070h] {
    width: 900px;
    min-height: 400px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #536A75;
    font-size: 0.9rem;
}

/* ── Archived issue ───────────────────────────────────────────────────────────
   The published file for an issue older than the built report, shown in place of the
   sheets. The iframe inside is written by the viewer component and sized by the styling
   the shell hands it, so this is only the paper it sits on — it runs the width of the
   control bar rather than a page's 900px, because the file decides its own layout. */
.dbf-legacy[b-qhekkm070h] {
    width: min(100%, 1340px);
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.dbf-legacy-empty[b-qhekkm070h] {
    width: min(100%, 1340px);
    min-height: 200px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #536A75;
    font-size: 0.9rem;
}
/* /Components/Pages/Bulkers/Reports/DryCargo/RptTemplates/CapesizeRpt.razor.rz.scp.css */

.cape-rpt-content[b-04lyl7dlx8] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.cape-rpt-left[b-04lyl7dlx8] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cape-rpt-mkt-coms[b-04lyl7dlx8] {
    /*height: calc(36% + var(--mktCom-recFixt-split));*/
    height: fit-content;
}

.cape-rpt-rec-fxts[b-04lyl7dlx8] {
    margin: 2% 0;
    /*height: calc(36% - var(--mktCom-recFixt-split));*/
    height: fit-content;
}

.cape-rpt-newbuilding[b-04lyl7dlx8] {
/*    margin: 2% 0;*/
    height: 13%;
}

@scope (.cape-rpt-table) {
    :scope[b-04lyl7dlx8] {
        height: 30%;
        width: 100%;
        text-align: center;
        margin-bottom: 4vh;
    }

    h4[b-04lyl7dlx8] {
        background-color: #009DC9;
        color: white;
        padding: 4px;
        text-align: left;
        font-weight: 500;
    }

    table[b-04lyl7dlx8] {
        width: 100%;
    }

    tbody tr:nth-child(odd)[b-04lyl7dlx8] {
        background-color: #EBF1F8;
    }
}

.cape-rpt-exch-rates[b-04lyl7dlx8] {
    height: 22%;
}

.cape-rpt-freight-fixt[b-04lyl7dlx8] {
    height: 78%;
}

.cape-rpt-right[b-04lyl7dlx8] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.cape-5TC-avg[b-04lyl7dlx8] {
    height: 30%;
    /*border: 1px solid navy;*/
}

.cape-rpt-mkt-coms-btm[b-04lyl7dlx8] {
    height: fit-content;
    width: 100%;
}
/* /Components/Pages/Bulkers/Reports/DryCargo/RptTemplates/DryCargoRpt.razor.rz.scp.css */
.dry-rpt-content[b-968ow64jo4] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.dry-rpt-left[b-968ow64jo4] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@scope (.dry-rpt-table) {
    :scope[b-968ow64jo4] {
        width: 100%;
        text-align: center;
    }

    table[b-968ow64jo4] {
        width: 100%;
    }

    tbody tr:nth-child(even)[b-968ow64jo4] {
        background-color: #EBF1F8;
    }
}

.dry-rpt-exch-rates[b-968ow64jo4] {
    height: 24%;
}

.dry-rpt-freight-fixt[b-968ow64jo4] {
    height: 76%;
}

.dry-rpt-right[b-968ow64jo4] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dry-rpt-price-graph[b-968ow64jo4] {
    height: 24%;
}

@scope (.dry-rpt-friday-tables) {
    :scope[b-968ow64jo4] {
        font-size: 0.95em;
        width: 100%;
        text-align: center;
    }

    tbody tr:nth-child(odd)[b-968ow64jo4] {
        background-color: #EBF1F8;
    }
}
/* /Components/Pages/Bulkers/Reports/DryCargo/RptTemplates/HandysizeRpt.razor.rz.scp.css */

.handy-rpt-content[b-y7gd5hvxzh] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.handy-rpt-left[b-y7gd5hvxzh] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.handy-rpt-left-fri[b-y7gd5hvxzh] {
    width: 50%;
    height: 100%;
}

.handy-rpt-mkt-coms[b-y7gd5hvxzh] {
    height: fit-content;
}

.handy-rpt-rec-fxts[b-y7gd5hvxzh] {
    margin: 2% 0;
    height: fit-content;
}

.handy-rpt-exch-rates[b-y7gd5hvxzh] {
    height: 22%;
}

.handy-rpt-freight-fixt[b-y7gd5hvxzh] {
    height: 78%;
}

.handy-rpt-right[b-y7gd5hvxzh] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.handy-rpt-table[b-y7gd5hvxzh] {
    height: 30%;
    width: 100%;
    margin: 2% 0;
}

.handy-TC-avg[b-y7gd5hvxzh] {
    height: 35%;
    margin-bottom: 2%;
}
/* /Components/Pages/Bulkers/Reports/DryCargo/RptTemplates/PanamaxRpt.razor.rz.scp.css */

.pnmx-rpt-content[b-zh3tr0z6ou] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.pnmx-rpt-top[b-zh3tr0z6ou] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80%;
    width: 100%;
}

.pnmx-rpt-left[b-zh3tr0z6ou] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pnmx-rpt-mkt-coms[b-zh3tr0z6ou] {
    height: fit-content;
}

.pnmx-rpt-rec-fxts[b-zh3tr0z6ou] {
    margin: 2% 0;
    height: fit-content;
}

@scope (.pnmx-rpt-table) {
    :scope[b-zh3tr0z6ou] {
        width: 100%;
        text-align: center;
        margin-bottom: 4vh;
    }

    h4[b-zh3tr0z6ou] {
        background-color: #009DC9;
        color: white;
        padding: 4px;
        text-align: left;
        font-weight: 500;
    }

    table[b-zh3tr0z6ou] {
        width: 100%;
    }

    tbody tr:nth-child(odd)[b-zh3tr0z6ou] {
        background-color: #EBF1F8;
    }
}

.pnmx-rpt-exch-rates[b-zh3tr0z6ou] {
    height: 22%;
}

.pnmx-rpt-freight-fixt[b-zh3tr0z6ou] {
    height: 78%;
}

.pnmx-rpt-right[b-zh3tr0z6ou] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pnmx-5TC-avg[b-zh3tr0z6ou] {
    height: 28%;
    margin-bottom: 1%;
}

/*bottom*/
.pnmx-tng-supply[b-zh3tr0z6ou] {
    height: 17%;
    width: 100%;
}


/* friday */

.pnmx-rpt-mkt-coms-btm[b-zh3tr0z6ou] {
    height: fit-content;
    width: 100%;
}
/* /Components/Pages/Bulkers/Reports/DryCombinedReport/DryCombinedRpt.razor.rz.scp.css */
/* Dry Combined Report — scoped styles
 * Masthead and toolbar dimensions mirror the SSY Geared Mkt Report so the
 * two reports look like siblings. Tab content (sections, cards, tables,
 * prose blocks, banner, chart cards) uses the same accent bar / gradient
 * /pill visual language as the Geared report.
 */

.dry-combined-frame[b-dqbrpheec8] {
    --ssy-navy:        #1f4e8a;
    --ssy-deep:        #163E9F;
    --ssy-blue:        #0087CB;
    --ssy-blue-light:  #4ec0e0;
    --ssy-blue-pale:   #d3edf7;
    --ssy-aqua:        #009DC9;
    --ssy-grey:        #4a4a4a;
    --ssy-grey-soft:   #ededed;
    --ssy-up:          #2aaf57;
    --ssy-down:        #e23b3b;
    --serif:           "EB Garamond", Georgia, "Times New Roman", serif;
    --sans:            "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif;

    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 2px 16px rgba(31, 78, 138, 0.07);
    border-radius: 14px;
    padding: 0 30px 36px;
    font-family: var(--sans);
    color: var(--ssy-grey);
    overflow: hidden;
}

/* ─── Masthead ──────────────────────────────────────────────────── */
.dry-combined-mast[b-dqbrpheec8] { padding: 18px 0 0; }

.dry-combined-mast-row[b-dqbrpheec8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 8px;
}

.dry-combined-mast-brand[b-dqbrpheec8] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dry-combined-mast-logo[b-dqbrpheec8] {
    height: 110px;
    width: auto;
    flex-shrink: 0;
    object-fit: fill;
    display: block;
}

.dry-combined-mast-title h1[b-dqbrpheec8] {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 34px;
    color: var(--ssy-navy);
    margin: 0;
    letter-spacing: 0.4px;
    line-height: 1.1;
}

.dry-combined-mast-title .subtitle[b-dqbrpheec8] {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--ssy-blue);
    margin: 4px 0 0;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.dry-combined-mast-contact[b-dqbrpheec8] {
    text-align: right;
    font-size: 12px;
    color: var(--ssy-grey);
    line-height: 1.6;
}

.dry-combined-mast-contact .date-display[b-dqbrpheec8] {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 24px;
    color: var(--ssy-navy);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.dry-combined-mast-contact .lbl[b-dqbrpheec8] {
    color: #999;
    display: inline-block;
    min-width: 50px;
}

.dry-combined-mast-contact a[b-dqbrpheec8] {
    color: var(--ssy-blue);
    text-decoration: none;
    font-weight: 500;
}

.dry-combined-mast-contact a:hover[b-dqbrpheec8] { text-decoration: underline; }

.dry-combined-mast-wave[b-dqbrpheec8] {
    display: block;
    width: 100%;
    height: 32px;
    margin-top: 2px;
    overflow: visible;
}

/* ─── Toolbar ───────────────────────────────────────────────────── */
.dry-combined-toolbar[b-dqbrpheec8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 8px;
    flex-wrap: wrap;
}

.dry-combined-date-nav[b-dqbrpheec8] { display: flex; align-items: center; gap: 8px; }

.dry-combined-tabs[b-dqbrpheec8] { display: flex; gap: 6px; flex-wrap: wrap; }

.dry-combined-tab[b-dqbrpheec8] {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--ssy-navy);
    padding: 7px 16px;
    cursor: pointer;
    color: var(--ssy-navy);
    border-radius: 22px;
    letter-spacing: 0.2px;
    transition: background .15s, color .15s, transform .12s, box-shadow .15s;
}

.dry-combined-tab:hover:not(.active)[b-dqbrpheec8] {
    background: var(--ssy-grey-soft);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(31, 78, 138, 0.12);
}

.dry-combined-tab.active[b-dqbrpheec8] {
    color: #fff;
    background: var(--ssy-blue);
    border-color: var(--ssy-blue);
    box-shadow: 0 2px 8px rgba(0, 135, 203, 0.30);
}

.dry-combined-tab.active:hover[b-dqbrpheec8] { background: var(--ssy-aqua); }

.dry-combined-actions[b-dqbrpheec8] { display: flex; align-items: center; gap: 8px; }

.dry-combined-edit-btn[b-dqbrpheec8],
.dry-combined-icon-btn[b-dqbrpheec8] {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 22px;
    border: 1px solid var(--ssy-navy);
    background: var(--ssy-navy);
    color: #fff;
    cursor: pointer;
    transition: background .12s, transform .12s;
    letter-spacing: 0.2px;
}

.dry-combined-edit-btn:hover[b-dqbrpheec8],
.dry-combined-icon-btn:hover[b-dqbrpheec8] {
    background: #173d70;
    transform: translateY(-1px);
}

.dry-combined-edit-btn.active[b-dqbrpheec8] {
    background: var(--ssy-blue);
    border-color: var(--ssy-blue);
}

/* ─── Tab panel ─────────────────────────────────────────────────── */
.dry-combined-content[b-dqbrpheec8] {
    min-height: 480px;
    margin-top: 14px;
    border-top: 2px solid var(--ssy-blue-light);
    padding-top: 8px;
    animation: dc-fade-b-dqbrpheec8 0.25s ease-out;
}

@keyframes dc-fade-b-dqbrpheec8 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.dry-combined-panel[b-dqbrpheec8] { display: none; }
.dry-combined-panel.active[b-dqbrpheec8] { display: block; animation: dc-fade-b-dqbrpheec8 0.2s ease-out; }

/* ─── Section headings (matches Geared section-h with accent bar) ─ */
.dc-section-h[b-dqbrpheec8] {
    font-family: var(--sans);
    color: var(--ssy-blue);
    font-size: 20px;
    font-weight: 700;
    margin: 26px 0 10px;
    letter-spacing: 0.3px;
    position: relative;
    padding-left: 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.dc-section-h[b-dqbrpheec8]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--ssy-blue) 0%, var(--ssy-blue-light) 100%);
}

/* When a section heading is the first child of a column (e.g. the
 * Market Sentiment + Freight Futures pair at the top of Dry Cargo), drop
 * the default 26px top margin so the two columns align cleanly. */
.dc-col > .dc-section-h:first-child[b-dqbrpheec8] { margin-top: 0; }

.dc-section-sub[b-dqbrpheec8] {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0;
    text-transform: none;
}

.dc-subsection-h[b-dqbrpheec8] {
    font-family: var(--sans);
    color: var(--ssy-navy);
    font-size: 16px;
    font-weight: 700;
    margin: 18px 0 6px;
    letter-spacing: 0.2px;
}

/* Comment-section heading — matches the Geared Mkt Rpt's Comment tab h3
 * (small blue, no accent bar, tight margins). Use this for prose sections;
 * keep .dc-section-h for tables and charts where the accent bar helps. */
.dc-comment-h[b-dqbrpheec8] {
    font-family: var(--sans);
    color: var(--ssy-blue-deep, #1c8fbf);
    font-size: 16px;
    font-weight: 700;
    margin: 18px 0 6px;
    letter-spacing: 0.2px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.dc-comment-h:first-child[b-dqbrpheec8] { margin-top: 0; }

/* ─── Layout grids ──────────────────────────────────────────────── */
.dc-grid-2[b-dqbrpheec8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin: 4px 0 10px;
}

@media (max-width: 960px) {
    .dc-grid-2[b-dqbrpheec8] { grid-template-columns: 1fr; }
}

.dc-col[b-dqbrpheec8] { display: flex; flex-direction: column; }

.dc-chart-grid[b-dqbrpheec8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 10px 0 0;
}

@media (max-width: 820px) {
    .dc-chart-grid[b-dqbrpheec8] { grid-template-columns: 1fr; }
}

/* ─── Top banner (replaces dryC-rpt-top-banner) ─────────────────── */
.dc-banner[b-dqbrpheec8] {
    background: linear-gradient(90deg, var(--ssy-deep) 0%, var(--ssy-blue) 80%);
    color: #fff;
    padding: 12px 18px;
    margin: 14px 0 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(0, 135, 203, 0.20);
    /* Strip inline styles + force a single-line layout so multi-headline
     * banners ("ATL: FIRM   PAC: FIRM   MID EAST: FIRM") sit on one row. */
    overflow-x: auto;
    white-space: normal;
}
.dc-banner br[b-dqbrpheec8] { display: none; }
.dc-banner p[b-dqbrpheec8] { display: inline; margin: 0; padding: 0; }
.dc-banner *[b-dqbrpheec8] {
    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    background: transparent !important;
}

/* ─── Cards ─────────────────────────────────────────────────────── */
.dc-card[b-dqbrpheec8] {
    border: 1px solid #d8dde3;
    border-radius: 10px;
    background: linear-gradient(160deg, #fff 0%, #f7fbfd 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dc-card-h[b-dqbrpheec8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 16px 6px;
    border-bottom: 1px solid #e7e9ec;
}

.dc-card-h h3[b-dqbrpheec8] {
    font-family: var(--sans);
    color: var(--ssy-navy);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.2px;
}

.dc-card-note[b-dqbrpheec8] {
    font-size: 11px;
    color: #888;
    font-style: italic;
}

/* ─── Tables ────────────────────────────────────────────────────── */
.dc-table[b-dqbrpheec8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: #fff;
}

.dc-card .dc-table[b-dqbrpheec8] { border-radius: 0 0 10px 10px; }

.dc-table thead th[b-dqbrpheec8] {
    background: var(--ssy-blue-pale);
    color: var(--ssy-navy);
    font-weight: 700;
    text-align: center;
    padding: 5px 10px;
    font-family: var(--sans);
    letter-spacing: 0.2px;
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid #c5e0ec;
}

.dc-table thead th.numeric[b-dqbrpheec8] { text-align: right; }
.dc-table thead th.dc-cell-label[b-dqbrpheec8] { text-align: left; }

.dc-table tbody td[b-dqbrpheec8] {
    padding: 4px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #eef2f5;
    line-height: 1.35;
}

.dc-table tbody tr:nth-child(odd) td[b-dqbrpheec8] { background: #fafcfd; }
.dc-table tbody tr:hover td[b-dqbrpheec8] { background: #eaf6fb; }
.dc-table tbody tr:last-child td[b-dqbrpheec8] { border-bottom: none; }

.dc-cell-label[b-dqbrpheec8] {
    text-align: left;
    font-weight: 500;
    color: var(--ssy-grey);
}

.dc-cell-sublabel[b-dqbrpheec8] {
    text-align: left;
    color: #777;
    padding-left: 24px !important;
    font-size: 12.5px;
}

.dc-cell-numeric[b-dqbrpheec8] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ssy-navy);
    font-weight: 500;
}

.dc-cell-category[b-dqbrpheec8] {
    text-align: left;
    font-weight: 700;
    color: var(--ssy-navy);
    background: #fff !important;
}

.dc-cell-rowlabel[b-dqbrpheec8] {
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    color: var(--ssy-navy);
    background: #fff !important;
    border-right: 1px solid #e7e9ec;
}

.dc-cell-trend[b-dqbrpheec8] {
    text-align: right;
    font-weight: 600;
    color: var(--ssy-grey);
    font-variant-numeric: tabular-nums;
}

.dc-cell-trend.up[b-dqbrpheec8]   { color: var(--ssy-up); }
.dc-cell-trend.down[b-dqbrpheec8] { color: var(--ssy-down); }

.dc-row-bold td[b-dqbrpheec8] { font-weight: 700; }
.dc-row-bold td.dc-cell-label[b-dqbrpheec8] { color: var(--ssy-navy); }

/* Newbuild + tonnage tables use the same base but allow tighter padding */
.dc-table-newbuild thead th[b-dqbrpheec8] { background: var(--ssy-blue); color: #fff; }
.dc-table-newbuild thead th.dc-cell-label[b-dqbrpheec8] { color: #fff; }

.dc-table-tonnage[b-dqbrpheec8] { font-size: 12.5px; }
.dc-table-tonnage thead th[b-dqbrpheec8] { background: var(--ssy-navy); color: #fff; }

.dc-table-friday[b-dqbrpheec8] { font-size: 12.5px; margin-top: 4px; }
.dc-table-friday thead th[b-dqbrpheec8] { background: var(--ssy-blue); color: #fff; }

/* Market-sentiment matrix at the top of the Dry Cargo tab */
.dc-sentiment-table thead th:not(:first-child)[b-dqbrpheec8] { text-align: center; }
.dc-sentiment-table td.dc-sentiment-class[b-dqbrpheec8] {
    font-weight: 700;
    color: var(--ssy-navy);
    font-size: 14px;
    letter-spacing: 0.2px;
}
.dc-sentiment-cell[b-dqbrpheec8] {
    text-align: center;
    font-weight: 600;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
.dc-sentiment-cell.up[b-dqbrpheec8]    { color: var(--ssy-up);   font-weight: 700; }
.dc-sentiment-cell.down[b-dqbrpheec8]  { color: var(--ssy-down); font-weight: 700; }
.dc-sentiment-cell.flat[b-dqbrpheec8]  { color: var(--ssy-grey); }
.dc-sentiment-table tbody tr:nth-child(odd) td[b-dqbrpheec8] { background: #fafcfd; }

/* ─── Prose / comment blocks (matches Geared Mkt Rpt's Comment tab) ─ */
.dc-prose[b-dqbrpheec8] {
    font-size: 1.1em !important;
    line-height: 1.55 !important;
    color: var(--ssy-grey) !important;
    font-family: var(--sans) !important;
    margin: 0 0 18px;
    min-height: 24px;
}

.dc-prose p[b-dqbrpheec8] { margin: 0 0 10px; }
.dc-prose p:last-child[b-dqbrpheec8] { margin-bottom: 0; }
.dc-prose b[b-dqbrpheec8], .dc-prose strong[b-dqbrpheec8] { color: var(--ssy-navy) !important; }

/* Broker entries carry inline font-size / font-family / color attributes
 * that would otherwise override .dc-prose and make different tabs read
 * at different scales. Force every descendant — regardless of how it
 * was saved — to inherit the comment block's typography. */
.dc-prose *[b-dqbrpheec8] {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}
.dc-prose b *[b-dqbrpheec8], .dc-prose strong *[b-dqbrpheec8],
.dc-prose * b[b-dqbrpheec8], .dc-prose * strong[b-dqbrpheec8] { color: var(--ssy-navy) !important; }

/* ─── Chart cards ───────────────────────────────────────────────── */
.dc-chart-card[b-dqbrpheec8] {
    border: 1px solid #d8dde3;
    border-radius: 10px;
    padding: 14px 16px 18px;
    background: #fff;
    position: relative;
    margin: 4px 0 8px;
}

.dc-chart-wide[b-dqbrpheec8] {
    /* Slightly more breathing room for solo charts */
    padding: 16px 18px 22px;
}

.dc-chart-title[b-dqbrpheec8] {
    font-family: var(--sans);
    color: var(--ssy-navy);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: 0.2px;
}

.dc-chart-source[b-dqbrpheec8] {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 10.5px;
    font-style: italic;
    color: #999;
}

/* Pin embedded Highcharts to a fixed pixel height — Highcharts otherwise
 * defaults to ~400px which makes the 4-up TC Averages grid balloon. The
 * !important here beats any inline height Highcharts may sprinkle on the
 * chart container after it boots. */
.dc-chart-card[b-dqbrpheec8]  .highcharts-container,
.dc-chart-card[b-dqbrpheec8]  svg.highcharts-root {
    width: 100% !important;
    height: 100% !important;
}
.dc-chart-card[b-dqbrpheec8]  > div {
    height: 240px !important;
    max-height: 240px;
    overflow: hidden;
}
.dc-chart-wide[b-dqbrpheec8]  > div {
    height: 280px !important;
    max-height: 280px;
}
.dc-chart-grid .dc-chart-card[b-dqbrpheec8]  > div {
    height: 200px !important;
    max-height: 200px;
}

/* ─── Friday badge ──────────────────────────────────────────────── */
.dc-friday-badge[b-dqbrpheec8] {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #c87b0a;
    border: 1px solid #c87b0a;
    border-radius: 4px;
    padding: 2px 7px;
    background: #fff6e6;
    vertical-align: middle;
    text-transform: uppercase;
}

/* ─── Disclaimer footer ─────────────────────────────────────────── */
.dry-combined-disclaimer[b-dqbrpheec8] {
    margin-top: 40px;
    padding: 16px 0 4px;
    border-top: 1px solid #dadfe5;
    font-size: 11.5px;
    color: #888;
    line-height: 1.6;
}

.dry-combined-disclaimer strong[b-dqbrpheec8] { color: var(--ssy-navy); }
/* /Components/Pages/Bulkers/Reports/ECSA/Components/RptEcsaRatesTable.razor.rz.scp.css */
rpt-ecsa-table-td[b-guijbl8j7o] {
    font-size: 1em !important;
}
/* /Components/Pages/Bulkers/Reports/ECSA/RptEcsa.razor.rz.scp.css */

/* /Components/Pages/Bulkers/Reports/GearedMonthly/Components/GearedMonthlySummaryItem.razor.rz.scp.css */
/* ── Wrapper ── */
.gm-summary-item[b-9rcljrsz5p] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.gm-summary-item--editing[b-9rcljrsz5p] {
    background: #f8fbfd;
    border: 1px solid #d0e4ef;
    border-radius: 8px;
    padding: 12px;
    position: relative;
}

/* ── Number badge ── */
.gm-summary-num[b-9rcljrsz5p] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1f4e8a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

/* ── Body ── */
.gm-summary-body[b-9rcljrsz5p] {
    flex: 1;
    min-width: 0;
}

/* ── Title input (edit mode) ── */
.gm-summary-title-input[b-9rcljrsz5p] {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    color: #0087CB;
    border: none;
    border-bottom: 1px solid #c8d8e4;
    background: transparent;
    padding: 2px 0 4px;
    margin-bottom: 8px;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.gm-summary-title-input:focus[b-9rcljrsz5p] {
    border-bottom-color: #0087CB;
}

.gm-summary-title-input[b-9rcljrsz5p]::placeholder {
    color: #bbb;
    font-weight: 400;
}

/* ── Editor wrapper ── */
.gm-summary-editor[b-9rcljrsz5p] {
    min-height: 80px;
}

/* ── Display mode ── */
.gm-summary-title-display[b-9rcljrsz5p] {
    font-size: 14.5px;
    font-weight: 700;
    color: #0087CB;
    margin-bottom: 3px;
}

.gm-summary-text-display[b-9rcljrsz5p] {
    font-size: 12.5px;
    color: #4a5568;
    line-height: 1.5;
}

/* ── Delete button ── */
.gm-summary-delete-btn[b-9rcljrsz5p] {
    flex-shrink: 0;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    transition: background .15s, color .15s, border-color .15s;
    align-self: flex-start;
    margin-top: 4px;
}

.gm-summary-delete-btn:hover[b-9rcljrsz5p] {
    background: #fee2e2;
    color: #e23b3b;
    border-color: #e23b3b;
}
/* /Components/Pages/Bulkers/Reports/GearedMonthly/Components/Sections/CommodityMarkets/CommodityMarketsSection.razor.rz.scp.css */
/* ================================================================
   Commodity Markets section — GearedMonthly
   Three-column layout: Energy | Metals | Agricultural
   ================================================================ */

/* ── Section wrapper ─────────────────────────────────────── */
.gm-comm-section[b-6i4u9ro5ly] {
    padding: 0 0 2rem;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.gm-comm-toolbar[b-6i4u9ro5ly] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

.gm-comm-asof[b-6i4u9ro5ly] {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 1rem;
    text-align: right;
}

/* ── Three-column grid ───────────────────────────────────── */
/*
 * Subgrid approach: each .gm-comm-col spans 3 row tracks (heading,
 * commentary, charts) and adopts those tracks from the parent via
 * grid-template-rows: subgrid. CSS therefore sizes each row by the
 * tallest item across all three columns, so the chart grids always
 * start at the same vertical position regardless of commentary length.
 */
.gm-comm-columns[b-6i4u9ro5ly] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.5rem;
    row-gap: 0.75rem;   /* shared gap between heading / commentary / charts rows */
}

@media (max-width: 1100px) {
    .gm-comm-columns[b-6i4u9ro5ly] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .gm-comm-columns[b-6i4u9ro5ly] {
        grid-template-columns: 1fr;
    }
}

/* ── Column ──────────────────────────────────────────────── */
.gm-comm-col[b-6i4u9ro5ly] {
    display: grid;
    grid-row: span 3;           /* occupy the same 3 row tracks as siblings */
    grid-template-rows: subgrid; /* heading / commentary / charts share parent row heights */
    align-content: start;
}

.gm-comm-col-h[b-6i4u9ro5ly] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000061;
    margin: 0 0 0.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #000061;
}

/* ── Chart grid within a column ─────────────────────────── */
.gm-comm-charts[b-6i4u9ro5ly] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    /* Don't stretch rows to fill the shared track height — keeps the
       chart rows packed at the top so all columns line up. */
    align-content: start;
    align-items: start;
}

.gm-comm-chart-wrap[b-6i4u9ro5ly] {
    position: relative;
}

    /* Dim hidden charts in edit mode */
    .gm-comm-chart-wrap.hidden-chart[b-6i4u9ro5ly] {
        opacity: 0.45;
    }

    /* Show/hide toggle button */
    .gm-comm-chart-wrap.editing .gm-comm-toggle-btn[b-6i4u9ro5ly] {
        display: flex;
    }

.gm-comm-toggle-btn[b-6i4u9ro5ly] {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    z-index: 2;
    transition: background 0.15s;
}

.gm-comm-toggle-btn--hide[b-6i4u9ro5ly] {
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
}

    .gm-comm-toggle-btn--hide:hover[b-6i4u9ro5ly] {
        background: rgb(220, 38, 38);
    }

.gm-comm-toggle-btn--show[b-6i4u9ro5ly] {
    background: rgba(0, 0, 97, 0.80);
    color: #fff;
}

    .gm-comm-toggle-btn--show:hover[b-6i4u9ro5ly] {
        background: #000061;
    }

/* ── Cell styles (replicated from RptCommodityPrices — CSS isolation) ── */
[b-6i4u9ro5ly] .ssy-comm-cell {
    border: none;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-6i4u9ro5ly] .ssy-comm-cell-head {
    background: transparent;
    padding: 6px 4px 2px;
    text-align: left;
    line-height: 1.2;
}

[b-6i4u9ro5ly] .ssy-comm-cell-head .name {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 13px;
    color: #000061;
}

[b-6i4u9ro5ly] .ssy-comm-cell-head .desc {
    font-style: italic;
    font-size: 10px;
    margin-top: 1px;
    color: #888;
}

[b-6i4u9ro5ly] .ssy-comm-cell-chart {
    flex: 1;
    min-height: 160px;
    padding: 0 4px 4px;
}

[b-6i4u9ro5ly] .ssy-comm-cell-meta {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px 0;
    font-size: 11px;
    color: #777;
}

[b-6i4u9ro5ly] .ssy-comm-cell-meta .last        { font-weight: 700; color: #000061; font-size: 12px; }
[b-6i4u9ro5ly] .ssy-comm-cell-meta .delta.up    { color: #2aaf57; font-weight: 700; }
[b-6i4u9ro5ly] .ssy-comm-cell-meta .delta.down  { color: #e23b3b; font-weight: 700; }
[b-6i4u9ro5ly] .ssy-comm-cell-meta .delta.flat  { color: #777; }

[b-6i4u9ro5ly] .ssy-comm-cell.skeleton .ssy-comm-cell-head .name,
[b-6i4u9ro5ly] .ssy-comm-cell.skeleton .ssy-comm-cell-head .desc {
    background: linear-gradient(90deg, #e8edf2 25%, #f5f7f9 50%, #e8edf2 75%);
    background-size: 200% 100%;
    animation: comm-shimmer-b-6i4u9ro5ly 1.4s linear infinite;
    border-radius: 3px;
    min-height: 14px;
    color: transparent;
}

@keyframes comm-shimmer-b-6i4u9ro5ly {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gm-comm-no-charts[b-6i4u9ro5ly] {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Commentary area ─────────────────────────────────────── */
.gm-comm-commentary[b-6i4u9ro5ly] {
    margin-top: 0.25rem;
}

.gm-comm-editor[b-6i4u9ro5ly] {
    min-height: 140px;
}

.gm-comm-text[b-6i4u9ro5ly] {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #1f2937;
}

    .gm-comm-text p[b-6i4u9ro5ly] {
        margin: 0 0 0.5em;
    }

.gm-comm-empty[b-6i4u9ro5ly] {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0;
}
/* /Components/Pages/Bulkers/Reports/GearedMonthly/Components/Sections/FfaDerivativeMarkets/FfaDerivativeMarketsSection.razor.rz.scp.css */
/* ================================================================
   FFA Derivative Markets section — GearedMonthly
   Three-column layout: Forward Curve | Candlestick Chart | Indicators
   ================================================================ */

.gm-ffa-section[b-3nxy121hry] {
    padding: 0 0 2rem;
}

/* ── Three-column grid ───────────────────────────────────── */
.gm-ffa-columns[b-3nxy121hry] {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr minmax(330px, 450px);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1200px) {
    .gm-ffa-columns[b-3nxy121hry] {
        grid-template-columns: minmax(200px, 280px) 1fr;
    }

    .gm-ffa-col--right[b-3nxy121hry] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .gm-ffa-columns[b-3nxy121hry] {
        grid-template-columns: 1fr;
    }
}

/* ── Column shared ───────────────────────────────────────── */
.gm-ffa-col[b-3nxy121hry] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gm-ffa-col-h[b-3nxy121hry] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000061;
    margin: 0 0 0.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #000061;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.gm-ffa-period-accent[b-3nxy121hry] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #01A39E;
    text-transform: none;
    letter-spacing: 0;
}

.gm-ffa-period-accent--lg[b-3nxy121hry] {
    font-size: 0.95rem; /* matches heading size */
}

/* ── Forward curve table ─────────────────────────────────── */
.gm-ffa-table[b-3nxy121hry] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.gm-ffa-table thead tr[b-3nxy121hry] {
    background: #000061;
    color: #fff;
}

.gm-ffa-table thead th[b-3nxy121hry] {
    padding: 5px 8px;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.gm-ffa-table thead th.num[b-3nxy121hry] {
    text-align: right;
}

.gm-ffa-table tbody tr[b-3nxy121hry] {
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background 0.1s;
}

.gm-ffa-table tbody tr:hover[b-3nxy121hry] {
    background: #f0f4ff;
}

.gm-ffa-table tbody tr.selected[b-3nxy121hry] {
    background: #e8edf8;
}

.gm-ffa-table tbody td[b-3nxy121hry] {
    padding: 4px 8px;
    color: #1f2937;
}

.gm-ffa-table td.period[b-3nxy121hry] {
    font-weight: 600;
    color: #000061;
    white-space: nowrap;
}

.gm-ffa-table td.num[b-3nxy121hry] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gm-ffa-table td.bold[b-3nxy121hry] {
    font-weight: 700;
}

/* ── Group header rows ───────────────────────────────────── */
.gm-ffa-table tr.gm-ffa-group-header td[b-3nxy121hry] {
    background: #eef1f8;
    color: #000061;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-top: 2px solid #000061;
    cursor: default;
}

.gm-ffa-table tr.gm-ffa-group-header:first-child td[b-3nxy121hry] {
    border-top: none;
}

/* ── Change badge ────────────────────────────────────────── */
.gm-ffa-chg[b-3nxy121hry] {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.78rem;
}

.gm-ffa-chg.ffa-pos[b-3nxy121hry] {
    background: #dcfce7;
    color: #166534;
}

.gm-ffa-chg.ffa-neg[b-3nxy121hry] {
    background: #fee2e2;
    color: #991b1b;
}

.gm-ffa-asof[b-3nxy121hry] {
    font-size: 0.72rem;
    color: #6b7280;
    text-align: right;
    margin-top: 0.4rem;
}

.gm-ffa-asof time[b-3nxy121hry] {
    color: #0087CB;
    font-weight: 600;
}

/* ── Chart column ────────────────────────────────────────── */
.gm-ffa-chart-wrap[b-3nxy121hry] {
    width: 100%;
    min-height: 806px;
}

.gm-ffa-chart-empty[b-3nxy121hry] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    background: #f8fafc;
    border-radius: 8px;
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
    border: 1px dashed #d1d5db;
}

.gm-ffa-loading[b-3nxy121hry],
.gm-ffa-empty[b-3nxy121hry] {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Right placeholder panel ─────────────────────────────── */
.gm-ffa-placeholder-panel[b-3nxy121hry] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gm-ffa-placeholder-label[b-3nxy121hry] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.gm-ffa-placeholder-box[b-3nxy121hry] {
    background: #f8fafc;
    border-radius: 6px;
    border: 1px dashed #d1d5db;
    padding: 1.25rem 1rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
    font-style: italic;
}

/* ── EWMAC speed selector ────────────────────────────── */
.gm-ewmac-speeds[b-3nxy121hry] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}

.gm-ewmac-speed-btn[b-3nxy121hry] {
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 12px;
    border: 1.5px solid #000061;
    background: #fff;
    color: #000061;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    line-height: 1.6;
}

.gm-ewmac-speed-btn:hover[b-3nxy121hry] {
    background: #eef1f8;
}

.gm-ewmac-speed-btn.active[b-3nxy121hry] {
    background: #000061;
    color: #fff;
}

/* ── EWMAC chart ─────────────────────────────────────── */
.gm-ewmac-chart-wrap[b-3nxy121hry] {
    width: 100%;
}

/* ── Correlation matrix ──────────────────────────────── */
.gm-corr-table[b-3nxy121hry] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.gm-corr-table thead th[b-3nxy121hry] {
    background: #000061;
    color: #fff;
    padding: 4px 6px;
    font-weight: 600;
    font-size: 0.68rem;
    text-align: center;
    letter-spacing: 0.03em;
}

.gm-corr-table thead th:first-child[b-3nxy121hry] {
    background: transparent;
}

.gm-corr-table tbody td[b-3nxy121hry] {
    padding: 4px 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    border: 1px solid #e5e7eb;
}

.gm-corr-table td.gm-corr-label[b-3nxy121hry] {
    background: #000061;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ── Sub-section heading ─────────────────────────────── */
.gm-ewmac-subhead[b-3nxy121hry] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 1rem 0 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1.5px solid #000061;
}

/* ── Preset parameters line ──────────────────────────── */
.gm-ewmac-params[b-3nxy121hry] {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: -0.25rem;
    margin-bottom: 0.15rem;
}

/* ── Signal legend ───────────────────────────────────── */
.gm-ewmac-legend[b-3nxy121hry] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.72rem;
    color: #374151;
    margin-top: -1.2rem;
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 10;
}

.gm-ewmac-legend-item[b-3nxy121hry] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.gm-ewmac-dot[b-3nxy121hry] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
/* /Components/Pages/Bulkers/Reports/GearedMonthly/Components/Sections/PhysicalMarketRates/PhysicalMarketRatesSection.razor.rz.scp.css */
/* ================================================================
   Physical Market Rates section — GearedMonthly
   Layout: region tabs → two-column (rates+commentary | trend charts)
   ================================================================ */

.gm-phys-section[b-k7vk9a5imy] {
    padding: 0 0 2rem;
}

/* ── Region tabs ──────────────────────────────────────────────── */
.gm-phys-region-tabs[b-k7vk9a5imy] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.gm-phys-region-tab[b-k7vk9a5imy] {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    border: 1.5px solid #000061;
    background: transparent;
    color: #000061;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.gm-phys-region-tab:hover:not(.placeholder):not(.active)[b-k7vk9a5imy] {
    background: #e8edf5;
}

.gm-phys-region-tab.active[b-k7vk9a5imy] {
    background: #000061;
    color: #fff;
}

.gm-phys-region-tab.placeholder[b-k7vk9a5imy] {
    border-color: #c8cdd5;
    color: #9ca3af;
    cursor: not-allowed;
}

.gm-phys-soon[b-k7vk9a5imy] {
    font-style: italic;
    font-weight: 400;
    font-size: 0.72rem;
    margin-left: 0.25rem;
}

/* ── Two-column layout ────────────────────────────────────────── */
.gm-phys-layout[b-k7vk9a5imy] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .gm-phys-layout[b-k7vk9a5imy] {
        grid-template-columns: 1fr;
    }
}

/* ── Left column ─────────────────────────────────────────────── */
.gm-phys-left[b-k7vk9a5imy] {
    min-width: 0;
}

/* Block headers (rates / commentary) */
.gm-phys-block-header[b-k7vk9a5imy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.gm-phys-block-header--cmt[b-k7vk9a5imy] {
    margin-top: 1.5rem;
}

.gm-phys-col-h[b-k7vk9a5imy] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000061;
    margin: 0;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #000061;
    flex: 1;
}

.gm-phys-note[b-k7vk9a5imy] {
    font-size: 0.72rem;
    color: #9ca3af;
    font-style: italic;
    margin: 0.4rem 0 0;
}

/* Weekly-report source attribution */
.gm-phys-source-note[b-k7vk9a5imy] {
    font-size: 0.72rem;
    color: #6b7280;
    margin: 0.5rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.gm-phys-source-badge[b-k7vk9a5imy] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0087CB;
    border: 1px solid #0087CB;
    border-radius: 3px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* Per-section edit row layout */
.gm-phys-cmt-row[b-k7vk9a5imy] {
    margin-bottom: 0.5rem;
}

.gm-phys-cmt-subrow[b-k7vk9a5imy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    min-height: 1.6rem;
}

/* "edited" badge shown next to sub-heading when an override is saved */
.gm-phys-override-badge[b-k7vk9a5imy] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: #01A39E;
    border-radius: 3px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* Revert button */
.gm-phys-revert-btn[b-k7vk9a5imy] {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 1px 7px;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

    .gm-phys-revert-btn:hover[b-k7vk9a5imy] {
        border-color: #9ca3af;
        color: #374151;
    }

/* Commentary */
.gm-phys-sub-h[b-k7vk9a5imy] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #000061;
    margin: 1rem 0 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gm-phys-prose[b-k7vk9a5imy] {
    font-size: 0.85rem;
    line-height: 1.65;
    color: #1f2937;
}

    .gm-phys-prose p[b-k7vk9a5imy] { margin: 0 0 0.5em; }

.gm-phys-editor[b-k7vk9a5imy] {
    margin-bottom: 1rem;
}

.gm-phys-empty[b-k7vk9a5imy] {
    font-size: 0.82rem;
    color: #9ca3af;
    margin: 0.25rem 0;
}

.gm-phys-loading[b-k7vk9a5imy] {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
    margin: 0.25rem 0;
}

/* ── Right column: charts ─────────────────────────────────────── */
.gm-phys-right[b-k7vk9a5imy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gm-phys-chart-card[b-k7vk9a5imy] {
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 10px 12px 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 97, 0.05);
}

.gm-phys-chart-label[b-k7vk9a5imy] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #000061;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
}

.gm-phys-chart-wrap[b-k7vk9a5imy] {
    height: 180px;
}

/* Rates table: inherit scoped styles from the shared table component.
   The ::deep combinator reaches into RptSsyGearedRatesTable's rendered HTML. */
[b-k7vk9a5imy] .rpt-ssy-geared-rates th {
    font-size: 0.78rem;
}

[b-k7vk9a5imy] .rpt-ssy-geared-rates td {
    font-size: 0.78rem;
}

/* ════════════════════════════════════════════════════════════════
   Baltic Exchange subpage
   ════════════════════════════════════════════════════════════════ */

.gm-baltic-layout[b-k7vk9a5imy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .gm-baltic-layout[b-k7vk9a5imy] {
        grid-template-columns: 1fr;
    }
}

.gm-baltic-left[b-k7vk9a5imy] {
    min-width: 0;
}

/* ── Assessments table ── */
.gm-baltic-table[b-k7vk9a5imy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .gm-baltic-table th[b-k7vk9a5imy] {
        text-align: left;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        padding: 0.45rem 0.6rem;
        border-bottom: 2px solid #000061;
        white-space: nowrap;
    }

    .gm-baltic-table th.num[b-k7vk9a5imy],
    .gm-baltic-table td.num[b-k7vk9a5imy] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .gm-baltic-table td[b-k7vk9a5imy] {
        padding: 0.42rem 0.6rem;
        border-bottom: 1px solid #eceff3;
        color: #1f2937;
    }

.gm-baltic-row[b-k7vk9a5imy] {
    cursor: pointer;
    transition: background 0.1s;
}

    .gm-baltic-row:hover[b-k7vk9a5imy] {
        background: #f0f5fa;
    }

    .gm-baltic-row.selected[b-k7vk9a5imy] {
        background: #e4ecf7;
        box-shadow: inset 3px 0 0 #000061;
    }

.gm-baltic-route[b-k7vk9a5imy] {
    font-weight: 700;
    color: #000061;
    white-space: nowrap;
}

/* Index averages at the foot of the table */
.gm-baltic-row.index-row td[b-k7vk9a5imy] {
    border-top: 2px solid #000061;
    background: #f5f8fc;
    font-weight: 600;
}

/* Only the first index row carries the heavy separator */
.gm-baltic-row.index-row + .gm-baltic-row.index-row td[b-k7vk9a5imy] {
    border-top: 1px solid #eceff3;
}

.gm-baltic-row.index-row.selected td[b-k7vk9a5imy] {
    background: #e4ecf7;
}

.gm-baltic-name[b-k7vk9a5imy] {
    color: #4b5563;
    font-size: 0.76rem;
}

.gm-baltic-current[b-k7vk9a5imy] {
    font-weight: 700;
}

.gm-baltic-up[b-k7vk9a5imy] {
    color: #0e9f6e;
    font-size: 0.6rem;
    margin-left: 0.25rem;
}

.gm-baltic-down[b-k7vk9a5imy] {
    color: #C8102E;
    font-size: 0.6rem;
    margin-left: 0.25rem;
}

.gm-baltic-asat[b-k7vk9a5imy] {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}

    .gm-baltic-asat.stale[b-k7vk9a5imy] {
        color: #C8102E;
        font-weight: 600;
    }

/* ── History chart (right column, under the map) ── */
.gm-baltic-chart-card[b-k7vk9a5imy] {
    margin-top: 0;
}

.gm-baltic-chart-wrap[b-k7vk9a5imy] {
    height: 220px;
}

.gm-baltic-name[b-k7vk9a5imy] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Route map ── */
.gm-baltic-right[b-k7vk9a5imy] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

/* Map + definition side by side (each ~quarter of the page) */
.gm-baltic-right-top[b-k7vk9a5imy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.gm-baltic-map-card[b-k7vk9a5imy] {
    border: 1px solid #dde3ea;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 97, 0.05);
    min-width: 0;
}

.gm-baltic-map[b-k7vk9a5imy] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.gm-baltic-def[b-k7vk9a5imy] {
    min-width: 0;
}

.gm-baltic-map-legend[b-k7vk9a5imy] {
    display: flex;
    gap: 1.2rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #eceff3;
    font-size: 0.74rem;
    font-weight: 600;
    color: #374151;
}

.gm-baltic-dot[b-k7vk9a5imy] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.3rem;
}

.gm-baltic-dot--from[b-k7vk9a5imy] {
    background: #01A39E;
}

.gm-baltic-dot--to[b-k7vk9a5imy] {
    background: #C8102E;
}

.gm-baltic-map-note[b-k7vk9a5imy] {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #eceff3;
    font-size: 0.74rem;
    font-style: italic;
    color: #6b7280;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   Global subpage (weekly Handysize/Supramax physical report)
   ════════════════════════════════════════════════════════════════ */

.gm-global-layout[b-k7vk9a5imy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .gm-global-layout[b-k7vk9a5imy] {
        grid-template-columns: 1fr;
    }
}

.gm-global-left[b-k7vk9a5imy] {
    min-width: 0;
}

.gm-global-right[b-k7vk9a5imy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

/* Commentary prose — same size as the South Atlantic commentary.
   The weekly report editor saves inline font sizes intended for the
   printed page, so force everything to inherit the on-screen size. */
.gm-global-prose[b-k7vk9a5imy] {
    font-size: 0.85rem;
}

    [b-k7vk9a5imy] .gm-global-prose * {
        font-size: inherit !important;
        line-height: inherit !important;
    }

/* Rates table — site-wide ssy-table-lw look, sized to match the
   South Atlantic indicative rates table (0.78rem) */
.gm-global-table[b-k7vk9a5imy] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.6rem;
}

    .gm-global-table th[b-k7vk9a5imy] {
        font-size: 0.78rem;
        text-align: left;
        padding: 0.3rem 0.5rem;
        white-space: nowrap;
    }

    .gm-global-table td[b-k7vk9a5imy] {
        font-size: 0.78rem;
        padding: 0.26rem 0.5rem;
    }

    .gm-global-table th.num[b-k7vk9a5imy],
    .gm-global-table td.num[b-k7vk9a5imy] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.gm-global-row[b-k7vk9a5imy] {
    cursor: pointer;
}

    .gm-global-table tbody tr.gm-global-row.selected[b-k7vk9a5imy] {
        background-color: #B5CBD6;
        box-shadow: inset 3px 0 0 #000061;
    }

/* Top banner strip, echoing the weekly report's banner */
.gm-global-banner[b-k7vk9a5imy] {
    background: #000061;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin: 0.25rem 0 0.75rem;
}

    .gm-global-banner p[b-k7vk9a5imy] {
        margin: 0;
    }

.gm-global-link[b-k7vk9a5imy] {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0087CB;
    text-decoration: none;
    border: 1.5px solid #0087CB;
    border-radius: 20px;
    padding: 0.3rem 0.9rem;
    transition: background 0.15s, color 0.15s;
}

    .gm-global-link:hover[b-k7vk9a5imy] {
        background: #0087CB;
        color: #fff;
    }

/* ── Route definition ── */
.gm-baltic-def-h[b-k7vk9a5imy] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #000061;
    margin: 0 0 0.35rem;
}

    .gm-baltic-def-h span[b-k7vk9a5imy] {
        font-weight: 500;
        color: #4b5563;
        font-size: 0.8rem;
        margin-left: 0.4rem;
    }

.gm-baltic-def-text[b-k7vk9a5imy] {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #1f2937;
    margin: 0 0 0.4rem;
}

.gm-baltic-def-vessel[b-k7vk9a5imy] {
    font-size: 0.7rem;
    line-height: 1.55;
    color: #6b7280;
    margin: 0 0 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px dashed #dde3ea;
}
/* /Components/Pages/Bulkers/Reports/GearedMonthly/Components/Sections/Utilisation/UtilisationSection.razor.rz.scp.css */
/* ================================================================
   Utilisation section — GearedMonthly
   Layout: KPI cards (left) + headline chart (right) / 3 charts below
   ================================================================ */

.gm-util-section[b-x6mgqkjs91] {
    padding: 0 0 2rem;
}

/* ── Top row: KPIs + headline chart ─────────────────────────── */
.gm-util-top[b-x6mgqkjs91] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

/* ── KPI cards stack ─────────────────────────────────────────── */
.gm-util-kpis[b-x6mgqkjs91] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gm-util-kpi[b-x6mgqkjs91] {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #000061;
    border-radius: 0 6px 6px 0;
    padding: 0.5rem 0.75rem;
}

.gm-util-kpi--headline[b-x6mgqkjs91] {
    background: #000061;
    border-left-color: #01A39E;
    border-color: #000061;
}

.gm-util-kpi--headline .gm-util-kpi-label[b-x6mgqkjs91] {
    color: rgba(255, 255, 255, 0.8);
}

.gm-util-kpi--headline .gm-util-kpi-value[b-x6mgqkjs91] {
    color: #ffffff;
    font-size: 1.6rem;
}

.gm-util-kpi--headline .gm-util-kpi-sub[b-x6mgqkjs91] {
    color: rgba(255, 255, 255, 0.65);
}

.gm-util-kpi-label[b-x6mgqkjs91] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.1rem;
}

.gm-util-kpi-value[b-x6mgqkjs91] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000061;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.gm-util-kpi-sub[b-x6mgqkjs91] {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: 0.1rem;
}

/* ── Headline chart column ───────────────────────────────────── */
.gm-util-headline-chart[b-x6mgqkjs91] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── Headline chart header (title + tabs row) ────────────────── */
.gm-util-headline-header[b-x6mgqkjs91] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.gm-util-headline-header .gm-util-col-h[b-x6mgqkjs91] {
    flex: 1;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ── Chart mode tabs ─────────────────────────────────────────── */
.gm-util-chart-tabs[b-x6mgqkjs91] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.gm-util-chart-tab[b-x6mgqkjs91] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.6rem;
    border-radius: 99px;
    border: 1px solid #000061;
    background: transparent;
    color: #000061;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.gm-util-chart-tab.active[b-x6mgqkjs91],
.gm-util-chart-tab:hover[b-x6mgqkjs91] {
    background: #000061;
    color: #fff;
}

/* ── Column heading ──────────────────────────────────────────── */
.gm-util-col-h[b-x6mgqkjs91] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000061;
    margin: 0 0 0.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #000061;
}

/* ── Bottom row: three decomposition charts ──────────────────── */
.gm-util-bottom[b-x6mgqkjs91] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.gm-util-chart-cell[b-x6mgqkjs91] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── Loading / empty states ──────────────────────────────────── */
.gm-util-loading[b-x6mgqkjs91],
.gm-util-empty[b-x6mgqkjs91] {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .gm-util-top[b-x6mgqkjs91] {
        grid-template-columns: 1fr;
    }

    .gm-util-kpis[b-x6mgqkjs91] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gm-util-kpi[b-x6mgqkjs91] {
        flex: 1 1 calc(33% - 0.5rem);
        min-width: 140px;
    }

    .gm-util-bottom[b-x6mgqkjs91] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .gm-util-bottom[b-x6mgqkjs91] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Bulkers/Reports/GearedMonthly/Components/Sections/VesselDemand/VesselDemandSection.razor.rz.scp.css */
/* ================================================================
   Vessel Demand section — GearedMonthly
   ================================================================ */

.gm-demand-section[b-3hnpfv7lb3] {
    padding: 0 0 2rem;
}

/* ── Top layout: table col (left) + chart panel (right) ──────── */
.gm-demand-top[b-3hnpfv7lb3] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 1.5rem;
    align-items: start;
}

/* Prevent the table column from blowing out the grid */
.gm-demand-table-col[b-3hnpfv7lb3] {
    min-width: 0;
}

/* ── Section heading ─────────────────────────────────────────── */
.gm-demand-col-h[b-3hnpfv7lb3] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000061;
    margin: 0 0 0.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #000061;
}

.gm-demand-col-h-sub[b-3hnpfv7lb3] {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #4b5563;
    font-size: 0.8rem;
}

/* ── Table header row ────────────────────────────────────────── */
.gm-demand-table-header[b-3hnpfv7lb3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.gm-demand-table-header .gm-demand-col-h[b-3hnpfv7lb3] {
    flex: 1;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* ── Metric toggle tabs ──────────────────────────────────────── */
.gm-demand-tabs[b-3hnpfv7lb3] {
    display: flex;
    gap: 0.25rem;
}

.gm-demand-tab[b-3hnpfv7lb3] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.6rem;
    border-radius: 99px;
    border: 1px solid #000061;
    background: transparent;
    color: #000061;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.gm-demand-tab.active[b-3hnpfv7lb3],
.gm-demand-tab:hover[b-3hnpfv7lb3] {
    background: #000061;
    color: #fff;
}

/* ── Two-table container ─────────────────────────────────────── */
.gm-demand-tables-container[b-3hnpfv7lb3] {
    display: flex;
    align-items: start;
}

/* Label column table — truly frozen, no scroll */
.gm-demand-tbl-labels[b-3hnpfv7lb3] {
    flex-shrink: 0;
    width: 170px;
    table-layout: fixed;
    border-right: 2px solid #000061;
}

/* Annual scroll wrapper — only the data year columns scroll */
.gm-demand-annual-scroll[b-3hnpfv7lb3] {
    overflow-x: auto;
    flex-shrink: 0;
    /* Show 2 years: 2 × 3 cols × 48px = 288px */
    width: 288px;
    border-right: 2px solid #000061;
    scrollbar-width: thin;
}

/* Annual data table — expands to full content width */
.gm-demand-tbl-annual[b-3hnpfv7lb3] {
    width: max-content;
    table-layout: fixed;
}

/* Right scrolling table wrapper */
.gm-demand-quarterly-scroll[b-3hnpfv7lb3] {
    overflow-x: auto;
    flex: 1;
    min-width: 0;
}

/* Quarterly table: expand to natural column width so scrolling kicks in */
.gm-demand-tbl-quarterly[b-3hnpfv7lb3] {
    width: max-content;
    min-width: 100%;
}

/* ── Shared table styles ─────────────────────────────────────── */
.gm-demand-tbl[b-3hnpfv7lb3] {
    border-collapse: collapse;
    font-size: 0.75rem;
    white-space: nowrap;
}

.gm-demand-tbl thead tr:first-child th[b-3hnpfv7lb3] {
    background: #000061;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 0.18rem 0.5rem;
    font-size: 0.7rem;
}

.gm-demand-tbl thead tr:first-child th.gm-demand-th-commodity[b-3hnpfv7lb3] {
    background: transparent;
    color: transparent;
    border: none;
}

.gm-demand-tbl thead tr:nth-child(2) th[b-3hnpfv7lb3] {
    background: #f1f5f9;
    color: #374151;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: right;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid #d1d5db;
}

.gm-demand-th-geared[b-3hnpfv7lb3] {
    color: #0087CB !important;
}

.gm-demand-td-commodity[b-3hnpfv7lb3] {
    font-weight: 600;
    color: #1f2937;
    padding: 0.18rem 0.75rem 0.18rem 0.25rem;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
    background: #fff;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-demand-td-val[b-3hnpfv7lb3] {
    text-align: right;
    padding: 0.18rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    font-variant-numeric: tabular-nums;
    color: #374151;
}

.gm-demand-td-geared[b-3hnpfv7lb3] {
    color: #0087CB;
}

.gm-demand-td-pct[b-3hnpfv7lb3],
.gm-demand-th-pct[b-3hnpfv7lb3] {
    color: #6b7280;
    font-style: italic;
}

/* ── Annual column headers ───────────────────────────────────── */
.gm-annual-head[b-3hnpfv7lb3] {
    background: #002b8c !important;
}

/* ── Quarterly period headers ────────────────────────────────── */
.gm-demand-tbl-quarterly thead tr:first-child th[b-3hnpfv7lb3] {
    background: #009DCA;
}

/* Separator: right border after the last annual % column */
.gm-annual-sep[b-3hnpfv7lb3] {
    border-right: 2px solid #000061 !important;
}

/* ── Group header row ────────────────────────────────────────── */
.gm-demand-tr-group td[b-3hnpfv7lb3] {
    background: #e8edf5;
    color: #000061;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.28rem 0.5rem;
    border-top: 2px solid #000061;
}

.gm-demand-tr-group:hover td[b-3hnpfv7lb3] {
    background: #dce4f0;
}

.gm-demand-td-group[b-3hnpfv7lb3] {
    white-space: nowrap;
    background: #e8edf5;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-demand-expand[b-3hnpfv7lb3] {
    font-size: 0.6rem;
    margin-right: 0.35rem;
    opacity: 0.7;
}

.gm-demand-td-subtotal[b-3hnpfv7lb3] {
    font-weight: 700;
    color: #000061;
}

.gm-demand-td-subtotal.gm-demand-td-geared[b-3hnpfv7lb3] {
    color: #0069a8;
}

.gm-demand-td-subtotal.gm-demand-td-pct[b-3hnpfv7lb3] {
    color: #4b5563;
    font-style: normal;
}

/* ── Sub-group toggle hover ──────────────────────────────────── */
.gm-demand-tr-subgroup-toggle:hover td[b-3hnpfv7lb3] {
    background: #f9fafb;
}

.gm-demand-expand-country[b-3hnpfv7lb3] {
    color: #0087CB;
    font-size: 0.55rem;
}

/* ── Country rows ────────────────────────────────────────────── */
.gm-demand-tr-country td[b-3hnpfv7lb3] {
    background: #f0f7fc;
    border-bottom: 1px solid #e0eef6;
}

.gm-demand-td-country[b-3hnpfv7lb3] {
    font-weight: 400;
    color: #374151;
    padding: 0.15rem 0.5rem 0.15rem 1.75rem;
    font-size: 0.72rem;
    white-space: nowrap;
    font-style: italic;
    background: #f0f7fc;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-demand-td-country-val[b-3hnpfv7lb3] {
    font-size: 0.72rem;
    color: #4b5563;
}

/* ── Total row ───────────────────────────────────────────────── */
.gm-demand-tr-total td[b-3hnpfv7lb3] {
    font-weight: 700;
    background: #f8fafc;
    border-top: 2px solid #000061;
    color: #000061;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
}

.gm-demand-tr-total .gm-demand-td-geared[b-3hnpfv7lb3] {
    color: #0087CB;
}

/* ── Note ────────────────────────────────────────────────────── */
.gm-demand-note[b-3hnpfv7lb3] {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 0.4rem;
    font-style: italic;
}

/* ── Right chart panel ───────────────────────────────────────── */
/* Height pinned once by JS after first render to match initial table height */
.gm-demand-charts[b-3hnpfv7lb3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Group selector buttons */
.gm-chart-group-tabs[b-3hnpfv7lb3] {
    display: flex;
    gap: 0.15rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.gm-chart-group-tab[b-3hnpfv7lb3] {
    font-size: 0.62rem;
    font-weight: 500;
    padding: 0.15rem 0.4rem;
    border-radius: 99px;
    border: 1px solid #009DCA;
    background: transparent;
    color: #009DCA;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.gm-chart-group-tab.active[b-3hnpfv7lb3],
.gm-chart-group-tab:hover[b-3hnpfv7lb3] {
    background: #009DCA;
    color: #fff;
}

/* Individual chart sections — each takes equal share of available column height */
.gm-chart-section[b-3hnpfv7lb3] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
}

/* Geared Share Trend and Commodity Mix are taller than the pie chart section */
.gm-chart-section-trend[b-3hnpfv7lb3],
.gm-chart-section-mix[b-3hnpfv7lb3] {
    flex: 1.4;
}

/* Label + optional metric buttons on one row */
.gm-chart-label-row[b-3hnpfv7lb3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.1rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #e5e7eb;
}

.gm-chart-label-row .gm-chart-label[b-3hnpfv7lb3] {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.gm-chart-label[b-3hnpfv7lb3] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #000061;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    padding-bottom: 0.1rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Hide the Highcharts legend inside the Commodity Mix chart only.
   ::deep is required because Highcharts renders as JS-generated SVG/HTML
   which doesn't receive Blazor's scoped CSS attribute. */
.gm-chart-section-mix[b-3hnpfv7lb3]  .highcharts-legend {
    display: none !important;
}

/* Metric toggle buttons inside chart label row */
.gm-chart-metric-tabs[b-3hnpfv7lb3] {
    display: flex;
    gap: 0.15rem;
    flex-shrink: 0;
}

.gm-chart-metric-tab[b-3hnpfv7lb3] {
    font-size: 0.6rem;
    font-weight: 500;
    padding: 0.1rem 0.35rem;
    border-radius: 99px;
    border: 1px solid #000061;
    background: transparent;
    color: #000061;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.gm-chart-metric-tab.active[b-3hnpfv7lb3],
.gm-chart-metric-tab:hover[b-3hnpfv7lb3] {
    background: #000061;
    color: #fff;
}

.gm-demand-chart-ph[b-3hnpfv7lb3] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: #f8fafc;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    color: #9ca3af;
    font-size: 0.78rem;
    font-style: italic;
}

/* ── Loading / empty ─────────────────────────────────────────── */
.gm-demand-loading[b-3hnpfv7lb3],
.gm-demand-empty[b-3hnpfv7lb3] {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .gm-demand-top[b-3hnpfv7lb3] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Bulkers/Reports/GearedMonthly/Components/Sections/VesselSupply/VesselSupplySection.razor.rz.scp.css */
/* ================================================================
   Vessel Supply section — GearedMonthly
   ================================================================ */

.gm-supply-section[b-8fogcd74n3] {
    padding: 0 0 2rem;
}

/* ── KPI strip ───────────────────────────────────────────────── */
.gm-supply-kpi-strip[b-8fogcd74n3] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.gm-supply-kpi[b-8fogcd74n3] {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #000061;
    border-radius: 0 6px 6px 0;
    padding: 0.45rem 0.75rem;
    flex: 1 1 140px;
    min-width: 120px;
}

.gm-supply-kpi--hl[b-8fogcd74n3] {
    background: #000061;
    border-color: #000061;
    border-left-color: #01A39E;
}

.gm-supply-kpi--hl .gm-supply-kpi-label[b-8fogcd74n3] { color: rgba(255,255,255,0.75); }
.gm-supply-kpi--hl .gm-supply-kpi-value[b-8fogcd74n3] { color: #fff; }
.gm-supply-kpi--hl .gm-supply-kpi-sub[b-8fogcd74n3]   { color: rgba(255,255,255,0.6); }

.gm-supply-kpi-label[b-8fogcd74n3] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.1rem;
}

.gm-supply-kpi-value[b-8fogcd74n3] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000061;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.gm-supply-kpi-sub[b-8fogcd74n3] {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 0.1rem;
}

/* ── Column heading ──────────────────────────────────────────── */
.gm-supply-col-h[b-8fogcd74n3] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000061;
    margin: 0 0 0.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #000061;
}

/* ── Card grid ───────────────────────────────────────────────── */
.gm-supply-grid[b-8fogcd74n3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.gm-supply-card[b-8fogcd74n3] {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    padding: 0.75rem 0.9rem 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 97, 0.05);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.gm-supply-card--span2[b-8fogcd74n3] {
    grid-column: span 2;
}

.gm-supply-card--span3[b-8fogcd74n3] {
    grid-column: span 3;
}

@media (max-width: 1200px) {
    .gm-supply-grid[b-8fogcd74n3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gm-supply-card--span2[b-8fogcd74n3],
    .gm-supply-card--span3[b-8fogcd74n3] {
        grid-column: span 2;
    }
}

@media (max-width: 850px) {
    .gm-supply-grid[b-8fogcd74n3] {
        grid-template-columns: 1fr;
    }

    .gm-supply-card--span2[b-8fogcd74n3],
    .gm-supply-card--span3[b-8fogcd74n3] {
        grid-column: span 1;
    }
}

/* Card header with pills alongside the heading */
.gm-supply-card-head[b-8fogcd74n3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    border-bottom: 2px solid #000061;
    padding-bottom: 0.35rem;
    margin-bottom: 0.25rem;
}

.gm-supply-col-h--bare[b-8fogcd74n3] {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ── Pills & controls ────────────────────────────────────────── */
.gm-supply-pills[b-8fogcd74n3] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.gm-supply-pill[b-8fogcd74n3] {
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.18rem 0.65rem;
    border-radius: 12px;
    border: 1.5px solid #000061;
    background: transparent;
    color: #000061;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

    .gm-supply-pill:hover:not(.active)[b-8fogcd74n3] {
        background: #e8edf5;
    }

    .gm-supply-pill.active[b-8fogcd74n3] {
        background: #000061;
        color: #fff;
    }

.gm-supply-select[b-8fogcd74n3] {
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    color: #000061;
    border: 1px solid #c8cdd5;
    border-radius: 5px;
    padding: 0.2rem 0.4rem;
    background: #fff;
    align-self: flex-start;
    cursor: pointer;
}

.gm-supply-link-btn[b-8fogcd74n3] {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: #0087CB;
    background: transparent;
    border: none;
    padding: 0.1rem 0;
    cursor: pointer;
    align-self: flex-start;
}

    .gm-supply-link-btn:hover[b-8fogcd74n3] {
        text-decoration: underline;
    }

/* ── Vessel speeds (Supramax segment) ────────────────────────── */
.gm-supply-speed-table[b-8fogcd74n3] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.4rem;
    font-variant-numeric: tabular-nums;
}

    .gm-supply-speed-table th[b-8fogcd74n3] {
        font-size: 0.66rem;
        font-weight: 700;
        color: #fff;
        background: #000061;
        padding: 0.22rem 0.3rem;
        text-align: right;
        white-space: nowrap;
    }

    .gm-supply-speed-table td[b-8fogcd74n3] {
        font-size: 0.66rem;
        color: #1f2937;
        padding: 0.2rem 0.3rem;
        text-align: right;
        border-bottom: 1px solid #eceff3;
    }

    .gm-supply-speed-table tbody tr:nth-of-type(even)[b-8fogcd74n3] {
        background: #f2f6fb;
    }

    .gm-supply-speed-table td.yr[b-8fogcd74n3] {
        font-weight: 700;
        color: #000061;
        text-align: left;
    }

.gm-supply-note[b-8fogcd74n3] {
    font-size: 0.68rem;
    color: #9ca3af;
    font-style: italic;
    margin: 0.2rem 0 0;
}

/* ── Loading / empty ─────────────────────────────────────────── */
.gm-supply-loading[b-8fogcd74n3],
.gm-supply-empty[b-8fogcd74n3] {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
    padding: 0.5rem 0;
}

/* /Components/Pages/Bulkers/Reports/GearedMonthly/RptSsyGearedMonthly.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────────
   SSY Geared Bulk Monthly Report — page styling
   Mirrored verbatim from RptSsyGearedMkt.razor.css so the monthly report
   looks identical to the weekly report. Diverge from this file (rather
   than the weekly one) if monthly-specific tweaks are needed later.

   Palette is anchored to the SSY tokens used elsewhere in Navigator
   (Highcharts light theme, ECSA report, masthead colours).

   Note: Scoped .razor.css files can't contain @import rules. If you want
   to ship the actual EB Garamond / Source Sans 3 fonts, add the Google
   Fonts <link> to wwwroot/index.html (or App.razor's <head>):
       <link rel="preconnect" href="https://fonts.googleapis.com">
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap" rel="stylesheet">
   Until then the page falls back to the next options in each font stack
   (Georgia / Segoe UI), which still keeps the look on-brand.
   ──────────────────────────────────────────────────────────────────────── */

.ssy-geared-frame[b-dxoc7mf3c7] {
    --ssy-navy:        #1f4e8a;
    --ssy-deep:        #163E9F;
    --ssy-blue:        #0087CB;
    --ssy-blue-light:  #4ec0e0;
    --ssy-blue-pale:   #d3edf7;
    --ssy-aqua:        #009DC9;
    --ssy-pink:        #EB3871;
    --ssy-teal:        #01A39E;
    --ssy-up:          #2aaf57;
    --ssy-down:        #e23b3b;
    --ssy-grey:        #4a4a4a;
    --ssy-grey-soft:   #ededed;
    --serif:           "EB Garamond", Georgia, "Times New Roman", serif;
    --sans:            "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif;

    max-width: 1760px;
    margin: -1.1rem auto 0;
    background: #fff;
    box-shadow: 0 2px 16px rgba(31, 78, 138, 0.07);
    border-radius: 14px;
    padding: 0 18px 18px;
    font-family: var(--sans);
    color: var(--ssy-grey);
    overflow: hidden;
}

/* ─── Masthead ─── */
.ssy-geared-mast[b-dxoc7mf3c7] {
    padding: 4px 0 0;
}

.ssy-geared-mast-row[b-dxoc7mf3c7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 2px;
}

.ssy-geared-mast-brand[b-dxoc7mf3c7] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ssy-geared-mast-logo[b-dxoc7mf3c7] {
    height: 80px;
    width: auto;
    flex-shrink: 0;
    object-fit: fill;
    display: block;
}

.ssy-geared-mast-title h1[b-dxoc7mf3c7] {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 28px;
    color: var(--ssy-navy);
    margin: 0;
    letter-spacing: 0.4px;
    line-height: 1.1;
}

.ssy-geared-section-accent[b-dxoc7mf3c7] {
    color: #01A39E;
}

.ssy-geared-mast-title.overview-title h1[b-dxoc7mf3c7] {
    font-size: 34px;
}

.ssy-geared-mast-title .subtitle[b-dxoc7mf3c7] {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--ssy-blue);
    margin: 4px 0 0;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.ssy-geared-mast-contact[b-dxoc7mf3c7] {
    text-align: right;
    font-size: 12px;
    color: var(--ssy-grey);
    line-height: 1.6;
}

.ssy-geared-mast-contact .date-display[b-dxoc7mf3c7] {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 19px;
    color: var(--ssy-navy);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.ssy-geared-mast-contact .lbl[b-dxoc7mf3c7] {
    color: #999;
    display: inline-block;
    min-width: 50px;
}

.ssy-geared-mast-contact a[b-dxoc7mf3c7] {
    color: var(--ssy-blue);
    text-decoration: none;
    font-weight: 500;
}

.ssy-geared-mast-contact a:hover[b-dxoc7mf3c7] {
    text-decoration: underline;
}

/* Decorative wave below the masthead */
.ssy-geared-mast-wave[b-dxoc7mf3c7] {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 0;
    overflow: visible;
}

/* ─── Toolbar ─── */
.ssy-geared-toolbar[b-dxoc7mf3c7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0 8px;
    flex-wrap: wrap;
}

.ssy-geared-date-nav[b-dxoc7mf3c7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssy-geared-page-nav[b-dxoc7mf3c7] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ssy-geared-actions[b-dxoc7mf3c7] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Pill buttons (section nav + edit toggles) */
.ssy-geared-pill[b-dxoc7mf3c7] {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 22px;
    border: 1px solid var(--ssy-navy);
    background: #fff;
    color: var(--ssy-navy);
    cursor: pointer;
    transition: background .15s, color .15s, transform .12s, box-shadow .15s;
    letter-spacing: 0.2px;
}

.ssy-geared-pill:hover[b-dxoc7mf3c7] {
    background: var(--ssy-grey-soft);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(31, 78, 138, 0.12);
}

.ssy-geared-pill.active[b-dxoc7mf3c7] {
    background: var(--ssy-blue);
    color: #fff;
    border-color: var(--ssy-blue);
    box-shadow: 0 2px 8px rgba(0, 135, 203, 0.30);
}

.ssy-geared-pill.active:hover[b-dxoc7mf3c7] {
    background: var(--ssy-aqua);
}

/* Comment icon button */
.ssy-geared-icon-btn[b-dxoc7mf3c7] {
    background: var(--ssy-navy);
    border: 1px solid var(--ssy-navy);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .12s;
    padding: 0;
}

.ssy-geared-icon-btn:hover[b-dxoc7mf3c7] {
    background: #173d70;
    transform: translateY(-1px);
}

/* ─── Region tabs ─── */
.ssy-geared-region-tabs[b-dxoc7mf3c7] {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--ssy-blue-light);
    margin: 8px 0 22px;
}

.ssy-geared-region-tab[b-dxoc7mf3c7] {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: none;
    padding: 10px 22px 8px;
    cursor: pointer;
    color: var(--ssy-grey);
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: background .15s, color .15s;
}

.ssy-geared-region-tab:hover:not([disabled])[b-dxoc7mf3c7] {
    background: rgba(78, 192, 224, 0.18);
    color: var(--ssy-navy);
}

.ssy-geared-region-tab.active[b-dxoc7mf3c7] {
    color: #fff;
    background: var(--ssy-blue-light);
}

.ssy-geared-region-tab[disabled][b-dxoc7mf3c7] {
    color: #aaa;
    cursor: not-allowed;
}

.ssy-geared-region-tab em[b-dxoc7mf3c7] {
    font-style: normal;
    color: #999;
    font-weight: 400;
    font-size: 11px;
}

/* ─── Section content layout ─── */
.ssy-geared-content[b-dxoc7mf3c7] {
    min-height: 480px;
    padding-top: 1.25rem;
    animation: ssy-fade-b-dxoc7mf3c7 0.25s ease-out;
}

@keyframes ssy-fade-b-dxoc7mf3c7 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.ssy-geared-section-h[b-dxoc7mf3c7] {
    font-family: var(--sans);
    color: var(--ssy-blue);
    font-size: 20px;
    font-weight: 700;
    margin: 78px 0 10px;
    letter-spacing: 0.3px;
    position: relative;
    padding-left: 12px;
}

.ssy-geared-section-h[b-dxoc7mf3c7]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--ssy-blue) 0%, var(--ssy-blue-light) 100%);
}

.ssy-geared-section-head[b-dxoc7mf3c7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 66px 0 10px;
}

.ssy-geared-prose[b-dxoc7mf3c7] {
    font-size: 15px;
    line-height: 1.6;
    color: #2d3748;
    margin: 6px 0 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f4fafd 100%);
    border-left: 3px solid var(--ssy-blue-light);
    border-radius: 0 8px 8px 0;
}

.ssy-geared-note[b-dxoc7mf3c7] {
    font-size: 12px;
    color: #888;
    margin: 12px 0 0;
}

/* ─── Overview cards ─── */
.ssy-geared-overview-cards[b-dxoc7mf3c7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 14px 0 20px;
}

.ssy-geared-overview-card[b-dxoc7mf3c7] {
    border: 1px solid #d8dde3;
    border-radius: 10px;
    padding: 16px 18px;
    background: linear-gradient(160deg, #fff 0%, #f7fbfd 100%);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.ssy-geared-overview-card[b-dxoc7mf3c7]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ssy-blue) 0%, var(--ssy-blue-light) 60%, transparent 100%);
    opacity: 0;
    transition: opacity .2s;
}

.ssy-geared-overview-card:hover[b-dxoc7mf3c7] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(31, 78, 138, 0.12);
    border-color: var(--ssy-blue);
}

.ssy-geared-overview-card:hover[b-dxoc7mf3c7]::after {
    opacity: 1;
}

.ssy-geared-overview-card h4[b-dxoc7mf3c7] {
    color: var(--ssy-blue);
    font-size: 16px;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.ssy-geared-overview-card .card-sub[b-dxoc7mf3c7] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.45;
    flex: 1;
}

.ssy-geared-overview-card .card-cta[b-dxoc7mf3c7] {
    font-size: 11px;
    color: var(--ssy-navy);
    font-weight: 700;
    letter-spacing: 0.6px;
    margin-top: 6px;
}

/* ─── Tonnage list headers ─── */
.ssy-geared-list-head[b-dxoc7mf3c7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 22px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.ssy-geared-list-head h3[b-dxoc7mf3c7] {
    font-family: var(--sans);
    color: var(--ssy-navy);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.2px;
}

.ssy-geared-list-head .count[b-dxoc7mf3c7] {
    font-size: 13px;
    color: var(--ssy-grey);
    font-weight: 500;
}

.ssy-geared-list-head .count .up[b-dxoc7mf3c7]   { color: var(--ssy-up);   font-weight: 700; }
.ssy-geared-list-head .count .down[b-dxoc7mf3c7] { color: var(--ssy-down); font-weight: 700; }

/* ─── Cargo: segment headers + region bands ─── */
.ssy-geared-segment-h[b-dxoc7mf3c7] {
    color: var(--ssy-navy);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 17px;
    margin: 26px 0 6px;
    letter-spacing: 0.2px;
}

.ssy-geared-region-band[b-dxoc7mf3c7] {
    background: linear-gradient(90deg, var(--ssy-deep) 0%, #1f4e8a 80%);
    color: #fff;
    padding: 6px 14px;
    margin: 10px 0 0;
    font-weight: 700;
    font-size: 13px;
    border-radius: 5px 5px 0 0;
    letter-spacing: 0.4px;
}

/* ─── Overview 4-column layout ─── */
.ssy-geared-overview-layout[b-dxoc7mf3c7] {
    display: grid;
    grid-template-columns: 200px minmax(0, 1.1fr) minmax(0, 1fr) 330px;
    gap: 24px;
    margin: 16px 0 24px;
    align-items: start;
}

@media (max-width: 1400px) {
    .ssy-geared-overview-layout[b-dxoc7mf3c7] {
        grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr);
    }

    .ssy-geared-right-panel[b-dxoc7mf3c7] {
        grid-column: 1 / -1;
    }
}

/* ── Contents: current page (greyed) ── */
.contents-current .contents-num[b-dxoc7mf3c7],
.contents-current .contents-here[b-dxoc7mf3c7] {
    color: #b3b9c4;
}

.contents-here[b-dxoc7mf3c7] {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
}

/* ── Scuttlebutt column ── */
.ssy-geared-scuttle[b-dxoc7mf3c7] {
    min-width: 0;
}

.ssy-geared-scuttle-text[b-dxoc7mf3c7] {
    font-size: 13px;
    line-height: 1.65;
    color: var(--ssy-grey);
}

    .ssy-geared-scuttle-text p[b-dxoc7mf3c7] {
        margin: 0 0 0.5em;
    }

.ssy-geared-scuttle-editor[b-dxoc7mf3c7] {
    min-height: 160px;
}

/* ── Right panel: utilisation strip + headings ── */
.ssy-geared-panel-section[b-dxoc7mf3c7] {
    background: #fff;
    padding: 10px 12px 8px;
    border-bottom: 1px solid #d8dde3;
}

.ssy-geared-panel-h[b-dxoc7mf3c7] {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ssy-navy);
    margin: 0 0 6px;
}

.ssy-geared-panel-h--rates[b-dxoc7mf3c7] {
    background: #f4f6f8;
    margin: 0;
    padding: 8px 12px 4px;
}

.ssy-geared-util-strip[b-dxoc7mf3c7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ssy-geared-util-kpi[b-dxoc7mf3c7] {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--ssy-navy);
    border-radius: 0 5px 5px 0;
    padding: 5px 8px;
}

    .ssy-geared-util-kpi .lbl[b-dxoc7mf3c7] {
        font-family: var(--sans);
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6b7280;
    }

    .ssy-geared-util-kpi .val[b-dxoc7mf3c7] {
        font-family: var(--sans);
        font-size: 16px;
        font-weight: 700;
        color: var(--ssy-navy);
        font-variant-numeric: tabular-nums;
        line-height: 1.2;
    }

.ssy-geared-panel-note[b-dxoc7mf3c7] {
    font-family: var(--sans);
    font-size: 10.5px;
    font-style: italic;
    color: #9ca3af;
    margin: 6px 0 0;
    padding: 0;
}

.ssy-geared-panel-table-wrap .ssy-geared-panel-note[b-dxoc7mf3c7] {
    margin: 0;
    padding: 5px 8px 7px;
    background: #fff;
}

.ssy-geared-panel-table td.delta-pos[b-dxoc7mf3c7] {
    color: #0e9f6e;
    font-weight: 600;
}

.ssy-geared-panel-table td.delta-neg[b-dxoc7mf3c7] {
    color: #C8102E;
    font-weight: 600;
}

/* ─── Shared column heading ─── */
.ssy-geared-col-h[b-dxoc7mf3c7] {
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--ssy-navy);
    margin: 0 0 14px;
    letter-spacing: 0.2px;
}

/* ─── Contents list ─── */
.ssy-geared-contents-list[b-dxoc7mf3c7] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ssy-geared-contents-list li[b-dxoc7mf3c7] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #edf0f3;
}

.ssy-geared-contents-list li:last-child[b-dxoc7mf3c7] {
    border-bottom: none;
}

.contents-num[b-dxoc7mf3c7] {
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--ssy-navy);
    min-width: 18px;
    text-align: right;
}

.contents-link[b-dxoc7mf3c7] {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ssy-blue);
    cursor: pointer;
    text-align: left;
    transition: color .15s;
    line-height: 1.35;
}

.contents-link:hover[b-dxoc7mf3c7] {
    color: var(--ssy-navy);
    text-decoration: underline;
}

/* ─── Summary list ─── */
.ssy-geared-summary-list[b-dxoc7mf3c7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ─── Summary header (title + Edit toggle) ─── */
.ssy-geared-summary-header[b-dxoc7mf3c7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ssy-geared-summary-header .ssy-geared-col-h[b-dxoc7mf3c7] {
    margin-bottom: 0;
}

/* ─── Empty state ─── */
.gm-summary-empty[b-dxoc7mf3c7] {
    font-size: 12.5px;
    color: #aaa;
    font-style: italic;
}

/* ─── Summary item — editing mode ─── */
.gm-summary-item[b-dxoc7mf3c7] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.gm-summary-item--editing[b-dxoc7mf3c7] {
    background: #f8fbfd;
    border: 1px solid #d0e4ef;
    border-radius: 8px;
    padding: 12px;
    position: relative;
}

.gm-summary-num[b-dxoc7mf3c7] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ssy-navy);
    color: #fff;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.gm-summary-body[b-dxoc7mf3c7] {
    flex: 1;
    min-width: 0;
}

.gm-summary-title-input[b-dxoc7mf3c7] {
    width: 100%;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--ssy-blue);
    border: none;
    border-bottom: 1px solid #c8d8e4;
    background: transparent;
    padding: 2px 0 4px;
    margin-bottom: 8px;
    outline: none;
    box-sizing: border-box;
}

.gm-summary-title-input:focus[b-dxoc7mf3c7] {
    border-bottom-color: var(--ssy-blue);
}

.gm-summary-title-input[b-dxoc7mf3c7]::placeholder {
    color: #bbb;
    font-weight: 400;
}

.gm-summary-editor[b-dxoc7mf3c7] {
    min-height: 80px;
}

.gm-summary-title-display[b-dxoc7mf3c7] {
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ssy-blue);
    margin-bottom: 3px;
}

.gm-summary-text-display[b-dxoc7mf3c7] {
    font-size: 12.5px;
    color: #4a5568;
    line-height: 1.5;
}

.gm-summary-delete-btn[b-dxoc7mf3c7] {
    flex-shrink: 0;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    transition: background .15s, color .15s, border-color .15s;
    align-self: flex-start;
    margin-top: 4px;
}

.gm-summary-delete-btn:hover[b-dxoc7mf3c7] {
    background: #fee2e2;
    color: var(--ssy-down);
    border-color: var(--ssy-down);
}

.gm-summary-add-btn[b-dxoc7mf3c7] {
    margin-top: 8px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ssy-blue);
    background: transparent;
    border: 1px dashed var(--ssy-blue);
    border-radius: 8px;
    padding: 6px 16px;
    cursor: pointer;
    width: 100%;
    transition: background .15s, color .15s;
}

.gm-summary-add-btn:hover[b-dxoc7mf3c7] {
    background: var(--ssy-blue-pale);
}

/* ─── Right panel ─── */
.ssy-geared-right-panel[b-dxoc7mf3c7] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #d8dde3;
    border-radius: 8px;
    overflow: hidden;
}

.ssy-geared-panel-tabs[b-dxoc7mf3c7] {
    display: flex;
    background: #f4f6f8;
    border-bottom: 1px solid #d8dde3;
}

.ssy-geared-panel-tab[b-dxoc7mf3c7] {
    flex: 1;
    padding: 8px 12px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ssy-grey);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, background .15s;
}

.ssy-geared-panel-tab.active[b-dxoc7mf3c7] {
    color: var(--ssy-navy);
    background: #fff;
    border-bottom-color: var(--ssy-blue);
}

.ssy-geared-panel-table-wrap[b-dxoc7mf3c7] {
    overflow-x: auto;
    background: #fff;
}

.ssy-geared-panel-table[b-dxoc7mf3c7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: var(--sans);
}

.ssy-geared-panel-table th[b-dxoc7mf3c7] {
    background: var(--ssy-navy);
    color: #fff;
    padding: 6px 8px;
    text-align: right;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.ssy-geared-panel-table th:first-child[b-dxoc7mf3c7] {
    text-align: left;
}

.ssy-geared-panel-table td[b-dxoc7mf3c7] {
    padding: 5px 8px;
    text-align: right;
    border-bottom: 1px solid #edf0f3;
    color: var(--ssy-grey);
}

.ssy-geared-panel-table td:first-child[b-dxoc7mf3c7] {
    text-align: left;
    font-weight: 600;
    color: var(--ssy-navy);
}

.ssy-geared-panel-table tbody tr:last-child td[b-dxoc7mf3c7] {
    border-bottom: none;
}

.placeholder-cell[b-dxoc7mf3c7] {
    text-align: center !important;
    color: #aaa !important;
    font-style: italic;
    padding: 24px 8px !important;
    font-weight: 400 !important;
}

.ssy-geared-chart-placeholder[b-dxoc7mf3c7] {
    height: 180px;
    background: linear-gradient(160deg, #f4fafd 0%, #edf4f8 100%);
    border-top: 1px solid #d8dde3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-ph-label[b-dxoc7mf3c7] {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
    text-align: center;
    padding: 0 16px;
}

/* ─── Footer disclaimer ─── */
.ssy-geared-disclaimer[b-dxoc7mf3c7] {
    margin-top: 40px;
    padding: 16px 0 4px;
    border-top: 1px solid #dadfe5;
    font-size: 10px;
    color: #888;
    line-height: 1.6;
}

.ssy-geared-disclaimer strong[b-dxoc7mf3c7] {
    color: var(--ssy-navy);
}
/* /Components/Pages/Bulkers/Reports/GeneralReport/GeneralReportClientsModal.razor.rz.scp.css */
/* Manage-clients popup. The modal chrome (backdrop, header, footer, buttons,
   form controls, table) comes from SsyPopup, ssyglobal.css and Bootstrap — the
   rules here only cover the two-pane split and the few bits with no global
   equivalent. */

.grclients-panes[b-utq3yjcfjq] {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 18px;
	height: 62vh;
}

.grclients-list[b-utq3yjcfjq] {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-right: 14px;
	border-right: 1px solid #e4e4e0;
}

/* The list scrolls, not the whole popup body: the editor stays put while you
   hunt through 100-odd clients. */
.grclients-rows[b-utq3yjcfjq] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.grclients-table[b-utq3yjcfjq] {
	width: 100%;
}
.grclients-table tbody tr[b-utq3yjcfjq] {
	cursor: pointer;
}
.grclients-table tbody tr.is-selected[b-utq3yjcfjq] {
	background: #e6eaf6;
}
.grclients-table tbody tr.is-inactive .grclients-rowname[b-utq3yjcfjq] {
	color: #9a9a96;
	text-decoration: line-through;
}

.grclients-off[b-utq3yjcfjq] {
	margin-left: 6px;
	padding: 0 4px;
	border: 1px solid #9a9a96;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: #6b6b6b;
}

.grclients-check[b-utq3yjcfjq] {
	font-size: 12px;
	color: #6b6b6b;
}

.grclients-editor[b-utq3yjcfjq] {
	min-height: 0;
	overflow-y: auto;
	padding-right: 4px;
}

/* Four short lists side by side rather than one long column, so a client with a
   dozen contacts does not push the brokers off the bottom. */
.grclients-fields[b-utq3yjcfjq] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}

.grclients-field .form-label[b-utq3yjcfjq] {
	font-weight: 700;
}

.grclients-hint[b-utq3yjcfjq] {
	margin-left: 6px;
	font-weight: 400;
	font-size: 11px;
	color: #6b6b6b;
}

.grclients-brokername[b-utq3yjcfjq] {
	flex: 0 0 110px;
}

/* Row-remove: a full ssy-btn is far too heavy repeated down a list of keywords. */
.grclients-x[b-utq3yjcfjq] {
	flex: 0 0 auto;
	margin-left: 4px;
	border: none;
	background: none;
	color: #9a9a96;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
}
.grclients-x:hover[b-utq3yjcfjq] {
	color: #a4362f;
}

.grclients-add[b-utq3yjcfjq] {
	font-size: 12px;
	padding: 2px 10px;
}

.grclients-note[b-utq3yjcfjq] {
	padding: 8px 10px;
	border-radius: 5px;
	background: #f4f4f2;
	font-size: 12px;
}

/* Footer status sits left of the buttons, which the footer right-aligns. */
.grclients-status[b-utq3yjcfjq] {
	margin-right: auto;
	font-size: 12px;
	color: #6b6b6b;
}
.grclients-status.is-error[b-utq3yjcfjq] {
	color: #a4362f;
	font-weight: 600;
}

@media (max-width: 768px) {
	.grclients-panes[b-utq3yjcfjq] {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}
	.grclients-list[b-utq3yjcfjq] {
		max-height: 200px;
		padding-right: 0;
		border-right: none;
		border-bottom: 1px solid #e4e4e0;
	}
}
/* /Components/Pages/Bulkers/Reports/GeneralReport/GeneralReportPricesModal.razor.rz.scp.css */
/* Header-price popup. Page code `grp-` (GeneralReportPrices), per CLAUDE.md:
   every class defined here is prefixed and nothing generic is redefined, because
   this component's markup hosts EodPrices_Input_Spot and a bare `table` or
   `summary` rule would reach into that shared grid. */

.grp-paste[b-j5uf4y52u9] {
	margin: 0 0 10px;
	padding: 6px 8px;
	border: 1px solid #cfcfca;
	border-radius: 4px;
	background: #fbfbf9;
}

/* Closed, the paste box is one line of chrome above the grid — the grid is what
   the popup is for, and most opens do not paste. */
.grp-paste > summary[b-j5uf4y52u9] {
	cursor: pointer;
	font-weight: 700;
	color: var(--ssy-colour-main-simpson-blue, #000061);
}

.grp-paste-area[b-j5uf4y52u9] {
	width: 100%;
	height: 120px;
	margin: 8px 0;
	/* Monospace so pasted tab-separated columns line up and a mis-parse is
	   visible before Apply is pressed. Same choice as the report tab's box. */
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 12px;
	white-space: pre;
}

.grp-paste-note[b-j5uf4y52u9] {
	margin-left: 8px;
	font-size: 12px;
	font-style: italic;
	color: #6b6b6b;
}
/* /Components/Pages/Bulkers/Reports/GeneralReport/GeneralReport_00.razor.rz.scp.css */
/* Cape General Report — page shell (tabs + shared date).
   Prefix: gr00-. The report tab keeps its own gr- prefix in
   GeneralReport_10_Report.razor.css and the send screen uses gr20-, so the three
   never collide and a rule here cannot leak into either. */

.gr00-page[b-ufikx58rmn] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gr00-header[b-ufikx58rmn] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid #dcdcd6;
	padding-bottom: 4px;
}

.gr00-date[b-ufikx58rmn] {
	margin: 0;
}

.gr00-tabs[b-ufikx58rmn] {
	display: flex;
	gap: 4px;
}

.gr00-tab[b-ufikx58rmn] {
	position: relative;
	border: none;
	background: none;
	cursor: pointer;
	padding: 8px 16px;
	font-size: 1.05rem;
	color: #4a4a46;
	/* The active tab is marked with a border on the element itself rather than a
	   sliding indicator, so it survives the tab strip wrapping on a narrow
	   window. */
	border-bottom: 3px solid transparent;
}

.gr00-tab:hover:not(:disabled)[b-ufikx58rmn] {
	color: var(--ssy-colour-main-simpson-blue, #000061);
}

/* Disabled while the report is unlocked. The tab stays visible rather than being
   hidden, so it is obvious the screen exists and that locking is what opens it —
   a tab that appeared out of nowhere on lock would read as a glitch. The title
   attribute carries the reason. */
.gr00-tab:disabled[b-ufikx58rmn] {
	color: #b4b4ae;
	cursor: not-allowed;
}

.gr00-tab.is-active[b-ufikx58rmn] {
	color: var(--ssy-colour-main-simpson-blue, #000061);
	font-weight: 700;
	border-bottom-color: var(--ssy-colour-main-simpson-blue, #000061);
}

/* Count of emails generated but not yet sent. Deliberately loud: an unsent run
   is the state this page most easily gets left in. */
.gr00-badge[b-ufikx58rmn] {
	display: inline-block;
	min-width: 20px;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 10px;
	background: #a4362f;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
}

/* Hidden, NOT unmounted. The report tab holds the @ref'd element that PDFs and
   email bodies are captured from, plus two Bootstrap modals; tearing that out on
   a tab click would lose an in-flight run and orphan a backdrop. */
.gr00-hidden[b-ufikx58rmn] {
	display: none;
}
/* /Components/Pages/Bulkers/Reports/GeneralReport/GeneralReport_10_Report.razor.rz.scp.css */
.generalreport-pagelayout[b-din1lxm46u] {
	padding: 10px 16px 40px;
}

.generalreport-pagelayout .gr-controls[b-din1lxm46u] {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto 12px;
}
.generalreport-pagelayout .gr-date[b-din1lxm46u] { margin: 0; }
.generalreport-pagelayout .gr-inline[b-din1lxm46u] { font-size: 12px; color: #6b6b6b; display: flex; align-items: center; gap: 6px; }
.generalreport-pagelayout .gr-inline select[b-din1lxm46u] { font-size: 13px; padding: 4px 7px; border: 1px solid #cfcfca; border-radius: 6px; }
.generalreport-pagelayout .gr-summary[b-din1lxm46u] { font-size: 12px; color: #6b6b6b; }
/* A failed generate closes its overlay and leaves the page looking unchanged, so
   this line is the only feedback there is. It must not read as the same kind of
   note as "Saved 12 lines". */
.generalreport-pagelayout .gr-summary.is-error[b-din1lxm46u] {
	color: #7d2620;
	font-weight: 700;
	background: #f7e4e2;
	border-radius: 4px;
	padding: 3px 8px;
}

.generalreport-pagelayout .gr-bulk-overlay[b-din1lxm46u] {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.48);
}
.generalreport-pagelayout .gr-bulk-card[b-din1lxm46u] {
	width: min(420px, calc(100vw - 32px));
	padding: 24px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 42px rgba(0, 0, 0, 0.32);
	text-align: center;
}
.generalreport-pagelayout .gr-bulk-spinner[b-din1lxm46u] {
	width: 38px;
	height: 38px;
	margin: 0 auto 14px;
	border: 4px solid #d9d9e2;
	border-top-color: var(--ssy-colour-main-simpson-blue, #000061);
	border-radius: 50%;
	animation: gr-bulk-spin-b-din1lxm46u 0.8s linear infinite;
}
.generalreport-pagelayout .gr-bulk-title[b-din1lxm46u] {
	font-size: 17px;
	font-weight: 700;
	color: var(--ssy-colour-main-simpson-blue, #000061);
}
.generalreport-pagelayout .gr-bulk-detail[b-din1lxm46u] {
	margin: 7px 0 10px;
	font-size: 13px;
	color: #4f4f4f;
}
.generalreport-pagelayout .gr-bulk-card progress[b-din1lxm46u] {
	display: block;
	width: 100%;
	height: 10px;
	accent-color: var(--ssy-colour-main-simpson-blue, #000061);
}
.generalreport-pagelayout .gr-bulk-hint[b-din1lxm46u] {
	margin-top: 12px;
	font-size: 12px;
	color: #6b6b6b;
}
@keyframes gr-bulk-spin-b-din1lxm46u {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.generalreport-pagelayout .gr-bulk-spinner[b-din1lxm46u] { animation: none; }
}

/* Lock toggle: prominent, changes colour by state. */
.generalreport-pagelayout .ssy-btn-main.is-locked[b-din1lxm46u] {
	background: var(--ssy-colour-main-simpson-blue, #000061);
	color: #fff;
}

/* While editing, outline the editable report so it reads as a form. */
.generalreport-pagelayout.editing .rpt-page[b-din1lxm46u] {
	outline: 2px dashed #cfcfca;
	outline-offset: -2px;
}

/* Inside the paste SsyPopup. Border, padding and radius come from Bootstrap's
   form-control; only the monospace grid and the height are ours — pasted report
   data is column-aligned and unreadable in a proportional font. */
.generalreport-pagelayout .gr-paste-area[b-din1lxm46u] {
	min-height: 300px;
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	font-size: 12.5px;
	line-height: 1.45;
	resize: vertical;
}
/* Screen-only page chrome. The report's own <style> block lives inside the
   element whose innerHTML is posted to the print service, so a shadow declared
   there prints as a grey outline around (and above) every PDF page. Declared
   here it applies on screen only. */
.generalreport-pagelayout .rpt-page[b-din1lxm46u] {
	box-shadow: 3px 3px 10px grey;
}
/* /Components/Pages/Bulkers/Reports/GeneralReport/GeneralReport_20_Emails.razor.rz.scp.css */
/* Cape General Report — send screen. Prefix: gr20-.
   Everything is scoped under a gr20- class; no bare element selectors, because
   this component hosts an SsyPopup whose content would inherit them. */

.gr20-panel[b-tn0hvb5scw] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gr20-controls[b-tn0hvb5scw] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
}

.gr20-inline[b-tn0hvb5scw] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 0.9rem;
}

/* Pushes the summary and the Send button to the right, so the irreversible
   action is nowhere near Refresh. */
.gr20-spacer[b-tn0hvb5scw] {
	flex: 1 1 auto;
}

.gr20-summary[b-tn0hvb5scw] {
	font-size: 0.9rem;
	color: #4a4a46;
}

.gr20-status[b-tn0hvb5scw] {
	margin: 0;
	padding: 6px 10px;
	border-radius: 4px;
	background: #eef2fb;
	font-size: 0.9rem;
}

.gr20-status.is-error[b-tn0hvb5scw] {
	background: #f7e4e2;
	color: #7d2620;
}

.gr20-table[b-tn0hvb5scw] {
	width: 100%;
	font-size: 0.9rem;
}

.gr20-table td[b-tn0hvb5scw],
.gr20-table th[b-tn0hvb5scw] {
	vertical-align: top;
}

.gr20-tick[b-tn0hvb5scw] {
	width: 34px;
	text-align: center;
}

/* Backs up the native indeterminate dash, which is set from JS after render.
   If that call has not landed yet — or the module failed to import — a partial
   selection would otherwise be indistinguishable from an empty one on the
   control that decides who gets emailed. */
.gr20-tick input.is-partial[b-tn0hvb5scw] {
	outline: 2px solid #a4362f;
	outline-offset: 1px;
}

.gr20-num[b-tn0hvb5scw] {
	width: 90px;
	text-align: right;
	white-space: nowrap;
}

.gr20-client[b-tn0hvb5scw] {
	font-weight: 700;
}

/* Addresses can be long and there can be several. Wrapping beats truncating —
   this is the column somebody is checking before an irreversible send. */
.gr20-addr[b-tn0hvb5scw] {
	word-break: break-word;
	max-width: 22rem;
	color: #4a4a46;
}

.gr20-table tr.is-master[b-tn0hvb5scw] {
	background: #f4f7ff;
}

.gr20-table tr.is-failed[b-tn0hvb5scw] {
	background: #fdf3f2;
}

.gr20-tag[b-tn0hvb5scw] {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 3px;
	background: #e3e8f4;
	color: #2c3a63;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
}

.gr20-tag.is-warn[b-tn0hvb5scw] {
	background: #f6e6c8;
	color: #7a5410;
}

.gr20-status-pill[b-tn0hvb5scw] {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
}

.gr20-pending[b-tn0hvb5scw] {
	background: #e9eef8;
	color: #2c3a63;
}

.gr20-queued[b-tn0hvb5scw] {
	background: #dff0e2;
	color: #14532a;
}

.gr20-sent[b-tn0hvb5scw] {
	background: #16733a;
	color: #fff;
}

.gr20-failed[b-tn0hvb5scw] {
	background: #a4362f;
	color: #fff;
}

.gr20-skipped[b-tn0hvb5scw] {
	background: #e4e4e0;
	color: #4a4a46;
}

.gr20-error[b-tn0hvb5scw] {
	margin-top: 2px;
	max-width: 22rem;
	color: #7d2620;
	font-size: 0.78rem;
	word-break: break-word;
}

.gr20-campaign[b-tn0hvb5scw] {
	margin: 4px 0 0;
	font-size: 0.8rem;
	color: #6b6b6b;
}

.gr20-view[b-tn0hvb5scw] {
	white-space: nowrap;
}

/* ----- Send confirmation modal ----- */

.gr20-confirm-lead[b-tn0hvb5scw] {
	margin: 0 0 10px;
	font-size: 0.95rem;
}

/* Every recipient, scrollable. The whole point of confirming in a modal rather
   than a browser dialog is that the list can be read — but a 100-client run must
   not push the Send button off the screen. */
.gr20-confirm-list[b-tn0hvb5scw] {
	max-height: 34vh;
	overflow-y: auto;
	margin: 0 0 12px;
	padding: 6px 8px;
	border: 1px solid #dcdcd6;
	border-radius: 4px;
	list-style: none;
	font-size: 0.85rem;
}

.gr20-confirm-list li[b-tn0hvb5scw] {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	padding: 2px 0;
}

.gr20-confirm-list li + li[b-tn0hvb5scw] {
	border-top: 1px solid #f0f0ec;
}

.gr20-confirm-list span[b-tn0hvb5scw] {
	color: #4a4a46;
	word-break: break-word;
}

.gr20-confirm-warn[b-tn0hvb5scw] {
	margin: 0;
	padding: 8px 10px;
	border-radius: 4px;
	background: #f7e4e2;
	color: #7d2620;
	font-weight: 700;
	font-size: 0.9rem;
}

/* ----- View modal ----- */

.gr20-viewmeta[b-tn0hvb5scw] {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: 2px 12px;
	margin-bottom: 10px;
	font-size: 0.88rem;
}

.gr20-viewmeta > div[b-tn0hvb5scw] {
	display: contents;
}

.gr20-viewmeta b[b-tn0hvb5scw] {
	color: #6b6b6b;
	font-weight: 700;
}

.gr20-viewmeta span[b-tn0hvb5scw] {
	word-break: break-word;
}

.gr20-viewtabs[b-tn0hvb5scw] {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #dcdcd6;
	margin-bottom: 8px;
}

.gr20-viewtab[b-tn0hvb5scw] {
	border: none;
	background: none;
	cursor: pointer;
	padding: 6px 14px;
	font-size: 0.9rem;
	color: #4a4a46;
	border-bottom: 2px solid transparent;
}

.gr20-viewtab.is-active[b-tn0hvb5scw] {
	color: var(--ssy-colour-main-simpson-blue, #000061);
	font-weight: 700;
	border-bottom-color: var(--ssy-colour-main-simpson-blue, #000061);
}

/* The stored body is shown in an iframe: it carries its own <style> block for
   the 280mm report sheet, which would restyle this page if it were injected
   inline. */
.gr20-frame[b-tn0hvb5scw] {
	width: 100%;
	height: 60vh;
	border: 1px solid #dcdcd6;
	background: #fff;
}

/* The attachment goes through the bundled PDF.js viewer, mounted by
   GeneralReport_20_Emails.razor.js. The iframe is created in JS, so it never
   gets this component's scope attribute and cannot be styled by class from
   here — hence ::deep on the host, which compiles to a descendant selector off
   the scoped div. */
.gr20-pdfhost[b-tn0hvb5scw] {
	min-height: 60vh;
}

.gr20-pdfhost[b-tn0hvb5scw]  iframe {
	width: 100%;
	height: 60vh;
	border: 1px solid #dcdcd6;
	background: #fff;
}
/* /Components/Pages/Bulkers/Reports/PeriodSnp/DryCargo_20_SnpRates_Upd.razor.rz.scp.css */
[b-ed2ubx6g3z] .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    /*        width: 100%;*/
}

[b-ed2ubx6g3z] .stalePrice {
    background-color: LightYellow;
}
/* /Components/Pages/Bulkers/Reports/PmxBkrDaily/PMX_DAILY_010_Main.razor.rz.scp.css */
/* /Components/Pages/Bulkers/Reports/PmxBkrDaily/PMX_DAILY_100_Page1.razor.rz.scp.css */
.dashboard-grid[b-cngqiux2q2] {
    display: flex;
    flex-direction: row;
    flex-wrap: nRowrap; /* prevents wrapping */
    gap: 12px;
    margin-bottom: 5px;
}

.dashboard-box[b-cngqiux2q2] {
    border: 1px solid #000061;
    border-radius: 5px;
    overflow: hidden;
    width: 150px;
    font-weight: bold;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
}

.dashboard-box-title[b-cngqiux2q2] {
    background-color: #000061; /* SSY blue */
    color: white;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.dashboard-box-value[b-cngqiux2q2] {
    background-color: white;
    color: black;
    padding: 2px 0px;
    font-size: 16px;
    text-align: center;
}

.dashboard-box-value.positive[b-cngqiux2q2] {
    color: green;
}

.dashboard-box-value.negative[b-cngqiux2q2] {
    color: red;
}

.container-wrapper[b-cngqiux2q2] {
    display: flex;
    justify-content: space-between; /* Space evenly between containers */
    align-items: stretch; /* Ensure equal height */
    gap: 10px; /* Space between containers */
    margin-top: 5px; /* Add spacing between rows of containers */
}

.left-column[b-cngqiux2q2] {
flex: 7 1 0;
}

.right-column[b-cngqiux2q2] {
flex: 3 1 0;
}

.right-column[b-cngqiux2q2] {
display: flex;
flex-direction: column;
gap: 8px; /* spacing between stacked sections */
}

.pacific-tables[b-cngqiux2q2] {
display: flex;
gap: 12px;
}

.pacific-tables table[b-cngqiux2q2] {
flex: 1 1 0;
}
/* /Components/Pages/Bulkers/Reports/SSYGearedMktReport/Components/RptSsyGearedRatesTable.razor.rz.scp.css */
.rpt-ssy-geared-rates-td[b-vl110mi20w] {
    font-size: 1em !important;
}
/* /Components/Pages/Bulkers/Reports/SSYGearedMktReport/RptSsyGearedMkt.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────────
   SSY Geared Markets — page styling
   Palette is anchored to the SSY tokens used elsewhere in Navigator
   (Highcharts light theme, ECSA report, masthead colours).

   Note: Scoped .razor.css files can't contain @import rules. If you want
   to ship the actual EB Garamond / Source Sans 3 fonts, add the Google
   Fonts <link> to wwwroot/index.html (or App.razor's <head>):
       <link rel="preconnect" href="https://fonts.googleapis.com">
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap" rel="stylesheet">
   Until then the page falls back to the next options in each font stack
   (Georgia / Segoe UI), which still keeps the look on-brand.
   ──────────────────────────────────────────────────────────────────────── */

.ssy-geared-frame[b-zca9zweunp] {
    --ssy-navy:        #1f4e8a;
    --ssy-deep:        #163E9F;
    --ssy-blue:        #0087CB;
    --ssy-blue-light:  #4ec0e0;
    --ssy-blue-pale:   #d3edf7;
    --ssy-aqua:        #009DC9;
    --ssy-pink:        #EB3871;
    --ssy-teal:        #01A39E;
    --ssy-up:          #2aaf57;
    --ssy-down:        #e23b3b;
    --ssy-grey:        #4a4a4a;
    --ssy-grey-soft:   #ededed;
    --serif:           "EB Garamond", Georgia, "Times New Roman", serif;
    --sans:            "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif;

    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 2px 16px rgba(31, 78, 138, 0.07);
    border-radius: 14px;
    padding: 0 30px 36px;
    font-family: var(--sans);
    color: var(--ssy-grey);
    overflow: hidden;
}

/* ─── Masthead ─── */
.ssy-geared-mast[b-zca9zweunp] {
    padding: 18px 0 0;
}

.ssy-geared-mast-row[b-zca9zweunp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 8px;
}

.ssy-geared-mast-brand[b-zca9zweunp] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ssy-geared-mast-logo[b-zca9zweunp] {
    height: 110px;
    width: auto;
    flex-shrink: 0;
    object-fit: fill;
    display: block;
}

.ssy-geared-mast-title h1[b-zca9zweunp] {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 34px;
    color: var(--ssy-navy);
    margin: 0;
    letter-spacing: 0.4px;
    line-height: 1.1;
}

.ssy-geared-mast-title .subtitle[b-zca9zweunp] {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--ssy-blue);
    margin: 4px 0 0;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.ssy-geared-mast-contact[b-zca9zweunp] {
    text-align: right;
    font-size: 12px;
    color: var(--ssy-grey);
    line-height: 1.6;
}

.ssy-geared-mast-contact .date-display[b-zca9zweunp] {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 24px;
    color: var(--ssy-navy);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.ssy-geared-mast-contact .lbl[b-zca9zweunp] {
    color: #999;
    display: inline-block;
    min-width: 50px;
}

.ssy-geared-mast-contact a[b-zca9zweunp] {
    color: var(--ssy-blue);
    text-decoration: none;
    font-weight: 500;
}

.ssy-geared-mast-contact a:hover[b-zca9zweunp] {
    text-decoration: underline;
}

/* Decorative wave below the masthead */
.ssy-geared-mast-wave[b-zca9zweunp] {
    display: block;
    width: 100%;
    height: 32px;
    margin-top: 2px;
    overflow: visible;
}

/* ─── Toolbar ─── */
.ssy-geared-toolbar[b-zca9zweunp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 8px;
    flex-wrap: wrap;
}

.ssy-geared-date-nav[b-zca9zweunp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssy-geared-page-nav[b-zca9zweunp] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ssy-geared-actions[b-zca9zweunp] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Pill buttons (section nav + edit toggles) */
.ssy-geared-pill[b-zca9zweunp] {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 22px;
    border: 1px solid var(--ssy-navy);
    background: #fff;
    color: var(--ssy-navy);
    cursor: pointer;
    transition: background .15s, color .15s, transform .12s, box-shadow .15s;
    letter-spacing: 0.2px;
}

.ssy-geared-pill:hover[b-zca9zweunp] {
    background: var(--ssy-grey-soft);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(31, 78, 138, 0.12);
}

.ssy-geared-pill.active[b-zca9zweunp] {
    background: var(--ssy-blue);
    color: #fff;
    border-color: var(--ssy-blue);
    box-shadow: 0 2px 8px rgba(0, 135, 203, 0.30);
}

.ssy-geared-pill.active:hover[b-zca9zweunp] {
    background: var(--ssy-aqua);
}

/* Comment icon button */
.ssy-geared-icon-btn[b-zca9zweunp] {
    background: var(--ssy-navy);
    border: 1px solid var(--ssy-navy);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .12s;
    padding: 0;
}

.ssy-geared-icon-btn:hover[b-zca9zweunp] {
    background: #173d70;
    transform: translateY(-1px);
}

/* ─── Region tabs ─── */
.ssy-geared-region-tabs[b-zca9zweunp] {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--ssy-blue-light);
    margin: 8px 0 22px;
}

.ssy-geared-region-tab[b-zca9zweunp] {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: none;
    padding: 10px 22px 8px;
    cursor: pointer;
    color: var(--ssy-grey);
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: background .15s, color .15s;
}

.ssy-geared-region-tab:hover:not([disabled])[b-zca9zweunp] {
    background: rgba(78, 192, 224, 0.18);
    color: var(--ssy-navy);
}

.ssy-geared-region-tab.active[b-zca9zweunp] {
    color: #fff;
    background: var(--ssy-blue-light);
}

.ssy-geared-region-tab[disabled][b-zca9zweunp] {
    color: #aaa;
    cursor: not-allowed;
}

.ssy-geared-region-tab em[b-zca9zweunp] {
    font-style: normal;
    color: #999;
    font-weight: 400;
    font-size: 11px;
}

/* ─── Section content layout ─── */
.ssy-geared-content[b-zca9zweunp] {
    min-height: 480px;
    animation: ssy-fade-b-zca9zweunp 0.25s ease-out;
}

@keyframes ssy-fade-b-zca9zweunp {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.ssy-geared-section-h[b-zca9zweunp] {
    font-family: var(--sans);
    color: var(--ssy-blue);
    font-size: 20px;
    font-weight: 700;
    margin: 26px 0 10px;
    letter-spacing: 0.3px;
    position: relative;
    padding-left: 12px;
}

.ssy-geared-section-h[b-zca9zweunp]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--ssy-blue) 0%, var(--ssy-blue-light) 100%);
}

.ssy-geared-section-head[b-zca9zweunp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 22px 0 10px;
}

.ssy-geared-prose[b-zca9zweunp] {
    font-size: 15px;
    line-height: 1.6;
    color: #2d3748;
    margin: 6px 0 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f4fafd 100%);
    border-left: 3px solid var(--ssy-blue-light);
    border-radius: 0 8px 8px 0;
}

.ssy-geared-note[b-zca9zweunp] {
    font-size: 12px;
    color: #888;
    margin: 12px 0 0;
}

/* ─── Overview cards ─── */
.ssy-geared-overview-cards[b-zca9zweunp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 14px 0 20px;
}

.ssy-geared-overview-card[b-zca9zweunp] {
    border: 1px solid #d8dde3;
    border-radius: 10px;
    padding: 16px 18px;
    background: linear-gradient(160deg, #fff 0%, #f7fbfd 100%);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.ssy-geared-overview-card[b-zca9zweunp]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ssy-blue) 0%, var(--ssy-blue-light) 60%, transparent 100%);
    opacity: 0;
    transition: opacity .2s;
}

.ssy-geared-overview-card:hover[b-zca9zweunp] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(31, 78, 138, 0.12);
    border-color: var(--ssy-blue);
}

.ssy-geared-overview-card:hover[b-zca9zweunp]::after {
    opacity: 1;
}

.ssy-geared-overview-card h4[b-zca9zweunp] {
    color: var(--ssy-blue);
    font-size: 16px;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.ssy-geared-overview-card .card-sub[b-zca9zweunp] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.45;
    flex: 1;
}

.ssy-geared-overview-card .card-cta[b-zca9zweunp] {
    font-size: 11px;
    color: var(--ssy-navy);
    font-weight: 700;
    letter-spacing: 0.6px;
    margin-top: 6px;
}

/* ─── Tonnage list headers ─── */
.ssy-geared-list-head[b-zca9zweunp] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 22px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.ssy-geared-list-head h3[b-zca9zweunp] {
    font-family: var(--sans);
    color: var(--ssy-navy);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.2px;
}

.ssy-geared-list-head .count[b-zca9zweunp] {
    font-size: 13px;
    color: var(--ssy-grey);
    font-weight: 500;
}

.ssy-geared-list-head .count .up[b-zca9zweunp]   { color: var(--ssy-up);   font-weight: 700; }
.ssy-geared-list-head .count .down[b-zca9zweunp] { color: var(--ssy-down); font-weight: 700; }

/* ─── Cargo: segment headers + region bands ─── */
.ssy-geared-segment-h[b-zca9zweunp] {
    color: var(--ssy-navy);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 17px;
    margin: 26px 0 6px;
    letter-spacing: 0.2px;
}

.ssy-geared-region-band[b-zca9zweunp] {
    background: linear-gradient(90deg, var(--ssy-deep) 0%, #1f4e8a 80%);
    color: #fff;
    padding: 6px 14px;
    margin: 10px 0 0;
    font-weight: 700;
    font-size: 13px;
    border-radius: 5px 5px 0 0;
    letter-spacing: 0.4px;
}

/* ─── Footer disclaimer ─── */
.ssy-geared-disclaimer[b-zca9zweunp] {
    margin-top: 40px;
    padding: 16px 0 4px;
    border-top: 1px solid #dadfe5;
    font-size: 11.5px;
    color: #888;
    line-height: 1.6;
}

.ssy-geared-disclaimer strong[b-zca9zweunp] {
    color: var(--ssy-navy);
}
/* /Components/Pages/Bulkers/VoyageRates/Commodities.razor.rz.scp.css */
.vr-map-cont[b-rvfowpgsh0] {
    height: 100%;
    width: 100%;
    padding-top: 12px;
    display: flex; 
    flex-direction: row;
}
.vr-map-cont path[b-rvfowpgsh0] {
    fill: lightgray
}
.vr-map-svg-cont svg[b-rvfowpgsh0] {
    width: 50%;
    height: 50%;
}

.vr-map-svg-cont[b-rvfowpgsh0] {
    height: 100%;
    width: 50%;
}

.vr-country-cont[b-rvfowpgsh0] {
    height: 100%;
    width: 50%;
}

.vr-stats[b-rvfowpgsh0] {
    margin-top: 2%;
    height: 98%;
    width: 100%;
}
/* /Components/Pages/Bulkers/VoyageRates/Comps/Map.razor.rz.scp.css */
.world-map-cont[b-0cdufhaemw] {
    height: 100%;
    width: 100%;
}
.world-map-cont path[b-0cdufhaemw] {
    fill: #F0F0F0;
}
.world-map-cont svg[b-0cdufhaemw] {
    height: 100%;
    width: 100%;
}

.country-clickable[b-0cdufhaemw] {
    cursor: pointer;
    fill: #98ABB4 !important;
    transition: fill 0.3s ease;
}

    .country-clickable:hover[b-0cdufhaemw] {
        fill: #009DC9 !important;
    }

.country-chosen[b-0cdufhaemw] {
    cursor: pointer;
    fill: #0087CB !important;
    transition: fill 0.3s ease;
}

.route-path[b-0cdufhaemw] {
    stroke: #000061;
    transition: stroke 0.3s ease;
}
    .route-path:hover[b-0cdufhaemw] {
        stroke: red !important;
    }
/* /Components/Pages/Bulkers/VoyageRates/NewVoyageRoute.razor.rz.scp.css */
.dropdown-search[b-v0zur600js] {
    display: flex; 
    flex-direction: column;
    align-items: baseline;
    border: 1px solid;
    border-radius: 12px;
    padding: 7px 13px;
    margin-top: 0.3%;
    position: absolute;
    z-index: 111111;
}

.dropdown-search-item[b-v0zur600js] {
    display: flex;
    width: 100%;
}

    .dropdown-search-item:hover[b-v0zur600js] {
        background-color: #F0F0F0;
    }

.vr-btn[b-v0zur600js] {
    height: 32px;
    width: 32px;
    border: 1px solid #000061;
    background-color: white;
    border-radius: 999px;
}
    .vr-btn:hover[b-v0zur600js] {
        background-color: #D3E9FF;
        font-weight: 500;
    }
    .vr-btn:focus[b-v0zur600js] {
        background-color: #D3E9FF;
        font-weight: 500;
    }
/* /Components/Pages/Bulkers/VoyageRates/PortInfoManager.razor.rz.scp.css */
.dropdown-search[b-jhl7slffy7] {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    border: 1px solid #000061;
    border-radius: 12px;
    padding: 7px 13px;
    margin-top: 12px;
    margin-left: 8px;
    position: absolute;
    z-index: 111111;
}

.dropdown-search-item[b-jhl7slffy7] {
    display: flex;
    width: 100%;
}

    .dropdown-search-item:hover[b-jhl7slffy7] {
        background-color: #F0F0F0;
    }
/* /Components/Pages/Futures/ApiSetup/FuturesRatesSetup.razor.rz.scp.css */
.gasextractbox[b-jkrd93dob6] {
    border: 1px solid #009DC9;
    height: 85vh;
    overflow-y: scroll;
}

.gasextractdatepicker[b-jkrd93dob6] {
}

.gasextractroutepicker[b-jkrd93dob6] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 10px;
}

.gasextractroutepicker-ul[b-jkrd93dob6] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.gasextractroutepicker-ul .chkbox[b-jkrd93dob6] {
    margin: 0 3px 0 0;
    vertical-align: middle;
}


.gasextractroutepicker-ul li[b-jkrd93dob6] {
    text-decoration: none;
}

.gasextractroutepicker-ul li:hover[b-jkrd93dob6] {
    background-color: #B5CBD6;
}


.deleterow[b-jkrd93dob6], .editapiclient[b-jkrd93dob6] {
    cursor: pointer;
    padding-right: 3px;
}

.deleterow:hover[b-jkrd93dob6] {
    font-weight: 700;
    color: white;
}

.draggablerow[b-jkrd93dob6] {
    cursor: pointer;
}

.editapiclient[b-jkrd93dob6] {
    color: #163E9F;
}


.editapiclient:hover[b-jkrd93dob6] {
    font-weight: 700;
    color: #91A527;
}
/* /Components/Pages/Futures/BalticFwdPrices/BalticFwdPrices.razor.rz.scp.css */
.positive[b-zmdsy3ds1m] {
    color: mediumseagreen !important;
}

.negative[b-zmdsy3ds1m] {
    color: crimson !important;
}

.ssy-table-lw td[b-zmdsy3ds1m], .ssy-table-lw th[b-zmdsy3ds1m] {
    padding: .25rem;
}

.radio-btns input[type="radio"][b-zmdsy3ds1m] {
    display: none;
}

.radio-label[b-zmdsy3ds1m] {
    display: block;
    padding: 0.5rem;
    text-align: center;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    cursor: pointer;
    border-radius: 4px;
}

.radio-btns input[type="radio"]:checked + .radio-label[b-zmdsy3ds1m] {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

.radio-item[b-zmdsy3ds1m] {
    flex: 1;
    min-width: 120px;
}
.ssy-date-selector[b-zmdsy3ds1m] {
    font-size: 1.5em;
    color: #009DC9;
}
.ssy-date-selector time[b-zmdsy3ds1m] {
    font-weight: 600;
}

.section-container[b-zmdsy3ds1m] {
    padding: 0;
    border-radius: 0;  /* Removed border radius */
    height: auto;
    margin: 0;
}

.section-container table[b-zmdsy3ds1m] {
    margin: 0;
    width: 100% !important;  /* Ensure all tables are full width */
    table-layout: fixed;     /* Fixed table layout for consistent columns */
}

/* Add consistent column widths */
.section-container table th[b-zmdsy3ds1m],
.section-container table td[b-zmdsy3ds1m] {
    padding: 0.25rem 0.5rem;
    white-space: nowrap;  /* Prevent wrapping */
}

.section-container table th:first-child[b-zmdsy3ds1m],
.section-container table td:first-child[b-zmdsy3ds1m] {
    width: 40%;
    text-align: left;

}

.section-container table th:nth-child(2)[b-zmdsy3ds1m],
.section-container table td:nth-child(2)[b-zmdsy3ds1m],
.section-container table th:last-child[b-zmdsy3ds1m],
.section-container table td:last-child[b-zmdsy3ds1m] {
    width: 30%;  /* Adjusted width distribution */
    text-align: right;
    direction: ltr;  /* Ensure numbers read left-to-right */
}


@media (min-width: 992px) {
    .container-fluid[b-zmdsy3ds1m] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .col-lg-4[b-zmdsy3ds1m] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .section-container[b-zmdsy3ds1m] {
        margin: 0;
        flex: 0 0 auto;
    }

    .mt-4[b-zmdsy3ds1m] {
        margin-top: 0 !important;
    }
}
/* /Components/Pages/Futures/DataAndHistoricals/DataAndHistoricals.razor.rz.scp.css */
.commentary[b-bs697l7ly7] {
    color: #000061;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 10pt;
    margin-bottom: 2rem;
}

.eod_vol_total[b-bs697l7ly7] {
    cursor: grab;
    background-color: #B5CBD6;
}

.eod_vol_total:hover[b-bs697l7ly7] {
    background-color: #B5CBD6A0;
}

.dataSourceButtons[b-bs697l7ly7] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 0.5%;
    margin-bottom: 0.7%;
}

.dataSourceButtons button[b-bs697l7ly7] {
    font-size: 130%;
    padding-top: 0.2%;
    padding-bottom: 0.2%;
    padding-left: 0.5%;
    padding-right: 0.5%;
    border: 2.5px solid #0087CB;
    border-radius: 999px;
}
.date-select-simple[b-bs697l7ly7]  .ssy-date-selector {
    display: block;
}

/* ============================================================
 * Top-level desk tabs (FFA / Metals / Coal / Carbon / LNG / LPG / Uranium)
 * ------------------------------------------------------------
 * Designed as the PRIMARY level of navigation on this page.
 * They sit ABOVE the inner .ssy-radio-main route picker; the two
 * controls are visually related (both pill-like, both rounded) but
 * the desk tabs clearly outrank: bigger, individually separated,
 * stronger active fill, with a thin divider below to mark the
 * hierarchical break.
 *
 * Performance note:
 *   No keyframe animations are applied to the heavy content panel.
 *   Only the tab buttons themselves transition (color/background),
 *   so switching desks is bottlenecked only by the SQL data fetch -
 *   the UI is not also paying a chart-remount or animation cost.
 * ============================================================ */

.eod-desk-tabs[b-bs697l7ly7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.25rem auto 0;
    padding: 0;
    max-width: 1000px;
}

.eod-desk-tab[b-bs697l7ly7] {
    /* reset button styles */
    appearance: none;
    margin: 0;
    padding: 0.55rem 1.4rem;

    /* surface */
    background: #ffffff;
    border: 1.5px solid #c5cedb;
    border-radius: 999px; /* full pill */
    box-shadow: 0 1px 2px rgba(0, 0, 97, 0.04);

    /* type */
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #000061;

    /* layout */
    text-align: center;
    cursor: pointer;
    user-select: none;
    min-width: 90px;
    line-height: 1.1;

    /* transition (cheap properties only - color, bg, shadow, border) */
    transition:
        background-color 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.eod-desk-tab:hover:not(:disabled):not(.active)[b-bs697l7ly7] {
    background: #f2f5fb;
    border-color: #000061;
}

.eod-desk-tab:focus-visible[b-bs697l7ly7] {
    outline: 2px solid #0087CC;
    outline-offset: 2px;
}

/* Active = solid navy fill, white text, slightly raised */
.eod-desk-tab.active[b-bs697l7ly7] {
    background: #000061;
    border-color: #000061;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 97, 0.25);
    cursor: default;
}

/* No-permission tab: greyed out, no pointer */
.eod-desk-tab.no-access[b-bs697l7ly7],
.eod-desk-tab:disabled[b-bs697l7ly7] {
    background: #f4f5f7;
    border-color: #e0e3e8;
    color: #b5bdc7;
    cursor: not-allowed;
    box-shadow: none;
}

.eod-desk-tab.no-access:hover[b-bs697l7ly7],
.eod-desk-tab:disabled:hover[b-bs697l7ly7] {
    background: #f4f5f7;
    border-color: #e0e3e8;
    color: #b5bdc7;
}

/* Hierarchy divider: thin horizontal rule under the desk tabs that visually
   separates the primary level from the secondary (.ssy-radio-main) row beneath. */
.eod-desk-tabs-divider[b-bs697l7ly7] {
    max-width: 1000px;
    margin: 0.6rem auto 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        #d9dfe6 12%,
        #d9dfe6 88%,
        transparent 100%
    );
}

/* Narrow screens: shrink pills so the row still fits */
@media (max-width: 700px) {
    .eod-desk-tab[b-bs697l7ly7] {
        padding: 0.45rem 0.9rem;
        font-size: 0.9rem;
        min-width: 70px;
    }
    .eod-desk-tabs[b-bs697l7ly7] {
        gap: 0.35rem;
    }
}
/* /Components/Pages/Futures/DataAndHistoricals/Uranium/UraniumBpiPrice.razor.rz.scp.css */
/* Current BPI quote (ubp-) — styling copied from UraniumDataAndHistoricals.razor.css
   so the public block matches the internal page. */

.ubp-card[b-bbefgz7nv2] {
    max-width: 440px;
    margin: 0 auto;
    padding: 0.9rem 1.1rem 1rem;
    background: var(--ssy-colour-main-pure-white, #FFFFFF);
    border: 1px solid var(--ssy-colour-palette-light-bluegray, #B5CBD6);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(22, 62, 159, 0.08);
    color: #1d2b3a;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

/* ── Broker Price Index current prices ───────────────────────────────── */
.uranium-bpi-current[b-bbefgz7nv2] {
    padding: 0.4rem 0.6rem;
}

.uranium-bpi-prices[b-bbefgz7nv2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.uranium-bpi-price-item[b-bbefgz7nv2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.uranium-bpi-price-label[b-bbefgz7nv2] {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.uranium-bpi-price-value[b-bbefgz7nv2] {
    font-size: 1.1rem;
    font-weight: 700;
}

.uranium-bpi-divider[b-bbefgz7nv2] {
    font-size: 1.2rem;
    color: #aaa;
    padding: 0 0.1rem;
    align-self: flex-end;
    padding-bottom: 2px;
}

.uranium-bpi-change[b-bbefgz7nv2] {
    font-size: 0.82rem;
    font-weight: 600;
    margin-left: 0.35rem;
    align-self: flex-end;
    padding-bottom: 3px;
}

/* ── Price direction colours (SSY palette) ───────────────────────────── */
.uranium-price-up[b-bbefgz7nv2]   { color: #91A527; font-weight: 600; }
.uranium-price-down[b-bbefgz7nv2] { color: #DB303A; font-weight: 600; }
.uranium-price-flat[b-bbefgz7nv2] { color: #405864; font-weight: 600; }

.uranium-bpi-asof[b-bbefgz7nv2] {
    font-size: 0.72rem;
    font-style: italic;
    color: #888;
    margin-top: 0.2rem;
}
/* /Components/Pages/Futures/DataAndHistoricals/Uranium/UraniumBpiSpotHistory.razor.rz.scp.css */
/* Uranium BPI vs Implied SPUT spot history chart (ubs-). */

.ubs-chart[b-i7qilojdas] {
    width: 100%;
    height: 100%;
    min-height: 380px;
}
/* /Components/Pages/Futures/DataAndHistoricals/Uranium/UraniumDataAndHistoricals.razor.rz.scp.css */
/* ── Broker Price Index current prices ───────────────────────────────── */
.uranium-bpi-current[b-47bpvn8hab] {
    padding: 0.4rem 0.6rem;
}

.uranium-bpi-prices[b-47bpvn8hab] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.uranium-bpi-price-item[b-47bpvn8hab] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.uranium-bpi-price-label[b-47bpvn8hab] {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.uranium-bpi-price-value[b-47bpvn8hab] {
    font-size: 1.1rem;
    font-weight: 700;
}

.uranium-bpi-divider[b-47bpvn8hab] {
    font-size: 1.2rem;
    color: #aaa;
    padding: 0 0.1rem;
    align-self: flex-end;
    padding-bottom: 2px;
}

.uranium-bpi-change[b-47bpvn8hab] {
    font-size: 0.82rem;
    font-weight: 600;
    margin-left: 0.35rem;
    align-self: flex-end;
    padding-bottom: 3px;
}

/* ── Price direction colours (SSY palette) ───────────────────────────── */
.uranium-price-up[b-47bpvn8hab]   { color: #91A527; font-weight: 600; }
.uranium-price-down[b-47bpvn8hab] { color: #DB303A; font-weight: 600; }

/* ── Curve table ─────────────────────────────────────────────────────── */
.uranium-curve-table[b-47bpvn8hab] {
    border-collapse: collapse;
    font-size: 0.88rem;
}

/* Product name cell — sits in the dark header row alongside location names */
.uranium-curve-product-header-row[b-47bpvn8hab] {
    background: #000061 !important;
    color: #ffffff !important;
}

.uranium-curve-product-cell[b-47bpvn8hab] {
    text-align: left !important;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #ffffff !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    white-space: nowrap;
}

.uranium-curve-loc-header[b-47bpvn8hab] {
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    color: #ffffff !important;
}

.uranium-subheader-row th[b-47bpvn8hab] {
    font-size: 0.72rem;
    font-weight: 500;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    border-bottom: 1px solid #ccc;
    background: #f7f8fc;
}

.uranium-subheader-cell[b-47bpvn8hab] {
    text-align: center;
}

.uranium-change-header[b-47bpvn8hab] {
    text-align: center;
    color: #888 !important;
}

.uranium-curve-price-cell[b-47bpvn8hab] {
    text-align: center;
    white-space: nowrap;
}

.uranium-change-cell[b-47bpvn8hab] {
    text-align: center;
    white-space: nowrap;
    font-size: 0.82rem;
}

.uranium-sep[b-47bpvn8hab] {
    color: #bbb;
    margin: 0 0.15rem;
}

.uranium-no-price[b-47bpvn8hab] {
    color: #bbb;
    text-align: center;
}

/* ── Table wrapper: horizontal breathing room ────────────────────────── */
.uranium-table-wrap[b-47bpvn8hab] {
    padding: 0 0.6rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

/* ── colgroup widths ─────────────────────────────────────────────────── */
/* Period col: wide enough for "Dec 27" and longer product names */
.uranium-col-period[b-47bpvn8hab] { width: 70px; }
/* Bid / Offer value columns */
.uranium-col-price[b-47bpvn8hab]  { width: 52px; }
/* "/" separator — as narrow as possible */
.uranium-col-sep[b-47bpvn8hab]    { width: 14px; }
/* Change column */
.uranium-col-change[b-47bpvn8hab] { width: 50px; }

/* ── Mobile overrides — make 3-route table fit without horizontal scroll  */
@media (max-width: 767px) {
    .uranium-curve-table[b-47bpvn8hab] {
        font-size: 0.75rem;
    }
    /* Tighten cell padding so values have room */
    .uranium-curve-table td[b-47bpvn8hab],
    .uranium-curve-table th[b-47bpvn8hab] {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    /* Narrower cols: 3 routes = 48 + 3×(40+8+40) = 48+264 = 312px — fits 390px */
    .uranium-col-period[b-47bpvn8hab] { width: 48px; }
    .uranium-col-price[b-47bpvn8hab]  { width: 40px; }
    .uranium-col-sep[b-47bpvn8hab]    { width: 8px;  }
    .uranium-col-change[b-47bpvn8hab],.uranium-change-cell[b-47bpvn8hab], .uranium-change-header[b-47bpvn8hab] { width: 0;display: none;    } /* hidden on mobile anyway */
}
/* /Components/Pages/Futures/DataAndHistoricals/Uranium/UraniumForwardYield.razor.rz.scp.css */
/* U3O8 forward-curve yield chart (ufy-). */

.ufy-chart[b-zx0p6k7z1n] {
    width: 100%;
    height: 380px;
}
/* /Components/Pages/Futures/DataAndHistoricals/Uranium/UraniumLiveCurve.razor.rz.scp.css */
/* Live U3O8 curve (ulc-) — dark trading-screen card using the SSY global palette
   (variables defined in wwwroot/css/ssyglobal.css). Self-contained so it reads
   correctly on the light public dashboard. */

.ulc-wrap[b-ruipz2oc0x] {
    background: var(--ssy-colour-main-simpson-blue);
    border: 1px solid var(--ssy-colour-palette-slate-gray);
    border-radius: 6px;
    padding: 0.75rem 0.9rem 0.6rem;
    color: var(--ssy-colour-palette-light-bluegray);
}

.ulc-title[b-ruipz2oc0x] {
    text-align: center;
    color: var(--ssy-colour-palette-golden-yellow);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.ulc-table[b-ruipz2oc0x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ulc-th[b-ruipz2oc0x] {
    color: var(--ssy-colour-palette-golden-yellow);
    font-weight: 600;
    text-align: center;
    padding: 0.3rem 0.4rem 0.45rem;
    border-bottom: 1px solid var(--ssy-colour-palette-slate-gray);
    font-size: 0.76rem;
    line-height: 1.05;
}

.ulc-th.ulc-period-col[b-ruipz2oc0x] {
    text-align: left;
}

.ulc-row td[b-ruipz2oc0x] {
    padding: 0.28rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid rgba(64, 88, 100, 0.45); /* slate-gray, faded */
    white-space: nowrap;
}

.ulc-row:hover td[b-ruipz2oc0x] {
    background: rgba(22, 62, 159, 0.35); /* deep-blue, faded */
}

.ulc-row td.ulc-period[b-ruipz2oc0x] {
    text-align: left;
    color: var(--ssy-colour-palette-golden-yellow);
    font-weight: 500;
}

.ulc-row td.ulc-loc[b-ruipz2oc0x] {
    color: var(--ssy-colour-palette-golden-yellow);
    font-size: 0.8rem;
}

.ulc-row td.ulc-bid[b-ruipz2oc0x] {
    color: var(--ssy-colour-palette-olive-green);
    font-weight: 600;
}

.ulc-row td.ulc-indic[b-ruipz2oc0x] {
    color: var(--ssy-colour-main-bright-blue);
    font-weight: 600;
}

.ulc-row td.ulc-ask[b-ruipz2oc0x] {
    color: var(--ssy-colour-palette-crimson-red);
    font-weight: 600;
}

.ulc-row td.ulc-change[b-ruipz2oc0x] {
    font-size: 0.8rem;
}

.ulc-arrow[b-ruipz2oc0x] {
    font-size: 0.7rem;
}

.ulc-up[b-ruipz2oc0x] {
    color: var(--ssy-colour-palette-olive-green);
}

.ulc-down[b-ruipz2oc0x] {
    color: var(--ssy-colour-palette-crimson-red);
}

.ulc-flat[b-ruipz2oc0x] {
    color: var(--ssy-colour-palette-light-bluegray);
}

.ulc-asof[b-ruipz2oc0x] {
    text-align: center;
    color: var(--ssy-colour-palette-light-bluegray);
    font-style: italic;
    font-size: 0.7rem;
    margin-top: 0.45rem;
    opacity: 0.8;
}

.ulc-empty[b-ruipz2oc0x] {
    text-align: center;
    color: var(--ssy-colour-palette-light-bluegray);
    padding: 0.8rem;
    font-size: 0.85rem;
}
/* /Components/Pages/Futures/DataAndHistoricals/Uranium/UraniumOptionsCalculator.razor.rz.scp.css */
/* Uranium Options Calculator (uoc-) — SSY-branded light card.
   Colours and typography come from the design-system in wwwroot/css/ssyglobal.css
   (body/default-paragraph font: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif; 1rem ≈ 10pt).
   All class names are page-prefixed per project conventions. */

.uoc-card[b-gw1801j3p9] {
    max-width: 440px;
    margin: 0 auto;
    padding: 0.9rem 1.1rem 1rem;
    background: var(--ssy-colour-main-pure-white, #FFFFFF);
    border: 1px solid var(--ssy-colour-palette-light-bluegray, #B5CBD6);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(22, 62, 159, 0.08);
    color: #1d2b3a;
    /* Default paragraph font from ssyglobal.css */
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

/* ── Header: title (left) + live readout (right) ─────────────────────── */
.uoc-header[b-gw1801j3p9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    min-height: 61px;
}

.uoc-title[b-gw1801j3p9] {
    color: var(--ssy-colour-main-deep-blue, #163E9F);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 1.1rem;
    margin: 0;
    flex: 1 1 8rem;
    min-width: 8rem;
}

.uoc-readout[b-gw1801j3p9] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

/* When greeks are hidden the price sits alone — centre it in the freed space. */
.uoc-readout-price-only[b-gw1801j3p9] {
    flex: 1 1 auto;
    justify-content: center;
}

.uoc-greek-col[b-gw1801j3p9] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* A stacked label-over-value stat (used for each greek and the price) */
.uoc-stat[b-gw1801j3p9] {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.2;
}

.uoc-result-label[b-gw1801j3p9] {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    white-space: nowrap;
}

.uoc-greek-value[b-gw1801j3p9] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
}

.uoc-price-value[b-gw1801j3p9] {
    color: var(--ssy-colour-main-bright-blue, #0087CB);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

/* ── Note + greeks toggle ────────────────────────────────────────────── */
.uoc-note-row[b-gw1801j3p9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 0.5rem;
}

.uoc-note[b-gw1801j3p9] {
    margin: 0;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--ssy-colour-palette-slate-gray, #405864);
}

.uoc-greeks-toggle[b-gw1801j3p9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-style: normal;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
    cursor: pointer;
    white-space: nowrap;
}

.uoc-greeks-toggle input[b-gw1801j3p9] {
    accent-color: var(--ssy-colour-main-deep-blue, #163E9F);
    cursor: pointer;
    margin: 0;
}

.uoc-greeks-toggle span[b-gw1801j3p9] {
    -webkit-user-select:none;
    user-select:none;
}

.uoc-divider[b-gw1801j3p9] {
    border: none;
    border-top: 1px solid var(--ssy-colour-palette-light-bluegray, #B5CBD6);
    margin: 0.8rem 0;
}

/* ── Call / Put toggle (SSY pill buttons) ────────────────────────────── */
.uoc-toggle[b-gw1801j3p9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.uoc-toggle-btn[b-gw1801j3p9] {
    padding: 0.45rem 0.5rem;
    background: var(--ssy-colour-main-pure-white, #FFFFFF);
    color: var(--ssy-colour-main-deep-blue, #163E9F);
    border: 1px solid var(--ssy-colour-main-deep-blue, #163E9F);
    border-radius: 9999px;
    /* Inherit the card (paragraph) font — form controls otherwise use the UA default */
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.uoc-toggle-btn:hover[b-gw1801j3p9] {
    background: rgba(22, 62, 159, 0.08);
}

.uoc-toggle-active[b-gw1801j3p9],
.uoc-toggle-active:hover[b-gw1801j3p9] {
    background: var(--ssy-colour-main-deep-blue, #163E9F);
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
    border-color: var(--ssy-colour-main-deep-blue, #163E9F);
}

/* ── Inputs ──────────────────────────────────────────────────────────── */
.uoc-grid[b-gw1801j3p9] {
    display: grid;
    gap: 0.55rem 0.75rem;
    margin-bottom: 0.7rem;
}

.uoc-grid-2[b-gw1801j3p9] {
    grid-template-columns: 1fr 1fr;
}

.uoc-grid-3[b-gw1801j3p9] {
    grid-template-columns: 1fr 1fr 1fr;
}

.uoc-field[b-gw1801j3p9] {
    display: flex;
    flex-direction: column;
}

.uoc-label[b-gw1801j3p9] {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    margin-bottom: 0.2rem;
}

.uoc-input[b-gw1801j3p9] {
    background: var(--ssy-colour-main-pure-white, #FFFFFF);
    border: 1px solid var(--ssy-colour-palette-light-bluegray, #B5CBD6);
    border-radius: 5px;
    color: #1d2b3a;
    padding: 0.4rem 0.55rem;
    /* Inherit the card (paragraph) font — form controls otherwise use the UA default */
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    width: 100%;
}

.uoc-input:focus[b-gw1801j3p9] {
    outline: none;
    border-color: var(--ssy-colour-main-deep-blue, #163E9F);
    box-shadow: 0 0 0 2px rgba(22, 62, 159, 0.18);
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .uoc-header[b-gw1801j3p9] {
        justify-content: center;
    }

    .uoc-title[b-gw1801j3p9] {
        flex-basis: 100%;
        text-align: center;
    }

    .uoc-readout[b-gw1801j3p9] {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 380px) {
    .uoc-grid-2[b-gw1801j3p9],
    .uoc-grid-3[b-gw1801j3p9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Futures/DataAndHistoricals/Uranium/UraniumReturnCalculator.razor.rz.scp.css */
/* Uranium % Return Calculator (urc-) — SSY-branded light card.
   Colours and typography come from the design-system in wwwroot/css/ssyglobal.css
   (body/default-paragraph font: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif; 1rem ≈ 10pt).
   All class names are page-prefixed per project conventions. */

.urc-card[b-tod41vv581] {
    max-width: 440px;
    margin: 0 auto;
    padding: 0.9rem 1.1rem 1rem;
    background: var(--ssy-colour-main-pure-white, #FFFFFF);
    border: 1px solid var(--ssy-colour-palette-light-bluegray, #B5CBD6);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(22, 62, 159, 0.08);
    color: #1d2b3a;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

/* ── Header: title (left) + live readout (right) ─────────────────────── */
.urc-header[b-tod41vv581] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    min-height: 61px;
}

.urc-title[b-tod41vv581] {
    color: var(--ssy-colour-main-deep-blue, #163E9F);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 1.1rem;
    margin: 0;
    flex: 1 1 8rem;
    min-width: 8rem;
}

.urc-readout[b-tod41vv581] {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

/* A stacked label-over-value stat */
.urc-stat[b-tod41vv581] {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.2;
}

.urc-result-label[b-tod41vv581] {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    white-space: nowrap;
}

.urc-return-value[b-tod41vv581] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ssy-colour-main-bright-blue, #0087CB);
}

.urc-annual-value[b-tod41vv581] {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
}

/* Directional colouring — green for gains, red for losses. */
.urc-pos[b-tod41vv581] { color: #1a7f4b; }
.urc-neg[b-tod41vv581] { color: #c0392b; }

/* ── Note + days-held readout ────────────────────────────────────────── */
.urc-note-row[b-tod41vv581] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 0.5rem;
}

.urc-note[b-tod41vv581] {
    margin: 0;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--ssy-colour-palette-slate-gray, #405864);
}

.urc-days[b-tod41vv581] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
    white-space: nowrap;
}

.urc-divider[b-tod41vv581] {
    border: none;
    border-top: 1px solid var(--ssy-colour-palette-light-bluegray, #B5CBD6);
    margin: 0.8rem 0;
}

/* ── Inputs ──────────────────────────────────────────────────────────── */
.urc-grid[b-tod41vv581] {
    display: grid;
    gap: 0.55rem 0.75rem;
    margin-bottom: 0.2rem;
}

.urc-grid-2[b-tod41vv581] {
    grid-template-columns: 1fr 1fr;
}

.urc-field[b-tod41vv581] {
    display: flex;
    flex-direction: column;
}

.urc-label[b-tod41vv581] {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    margin-bottom: 0.2rem;
}

.urc-input[b-tod41vv581] {
    background: var(--ssy-colour-main-pure-white, #FFFFFF);
    border: 1px solid var(--ssy-colour-palette-light-bluegray, #B5CBD6);
    border-radius: 5px;
    color: #1d2b3a;
    padding: 0.4rem 0.55rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    width: 100%;
}

.urc-input:focus[b-tod41vv581] {
    outline: none;
    border-color: var(--ssy-colour-main-deep-blue, #163E9F);
    box-shadow: 0 0 0 2px rgba(22, 62, 159, 0.18);
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .urc-header[b-tod41vv581] {
        justify-content: center;
    }

    .urc-title[b-tod41vv581] {
        flex-basis: 100%;
        text-align: center;
    }

    .urc-readout[b-tod41vv581] {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 380px) {
    .urc-grid-2[b-tod41vv581] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Futures/EodBatteryMetalsEmail.razor.rz.scp.css */


.bminputpage[b-wdjz9gwezu] {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 1fr;
}


@media screen and (max-width: 600px) {

    .bminputpage[b-wdjz9gwezu] {
        display: flex;
        flex-direction: column;
    }
}
/* /Components/Pages/Futures/EodCommentary.razor.rz.scp.css */

.eodCommPage-grid-container[b-lq9nrmfx1c] {
    display: grid;
    grid-template-columns: var(--input-columns);
    grid-gap: 40px;
    background-color: transparent;
}
/*
.grid-item-input {
}
*/
.eodcomm-pricesColumn[b-lq9nrmfx1c] {
    grid-row: 1 / span 2;
    width: 580px;
    /* width: 580px; float: left; margin-right:10px;*/
}



.showOnSmallScreens[b-lq9nrmfx1c] {
    display: none;
}


@media screen and (max-width: 600px) {


    .eodCommPage-grid-container[b-lq9nrmfx1c] {
        display: block;
        grid-gap: 40px;
        background-color: transparent;
    }

    .showOnSmallScreens[b-lq9nrmfx1c] {
        display: block;
    }
}

.rcorners[b-lq9nrmfx1c] {
    display: inline-block;
    border-radius: 25px;
    border: 2px solid;
    text-align: center;
    line-height: 1.5em;
    height: 1.8em;
    width: 50px;
    margin-left: 4px;
}

.goodborder[b-lq9nrmfx1c] {
    background-color: #70ad4755;
    border-color: #70ad47;
}

.badborder[b-lq9nrmfx1c] {
    background-color: #ff804155;
    border-color: #ff8041;
}

.ffatabcontent[b-lq9nrmfx1c] {
    border: 1px solid #405864;
    padding: 5px;
    background-color: #F4F7F9;
    border-radius: 3px;
}
/* /Components/Pages/Futures/EuEtsCalculator.razor.rz.scp.css */
.euets-flex[b-h3ys2hq867] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
}

.text-end[b-h3ys2hq867] {
    padding-left:0;
}

.euets-flex-calculations[b-h3ys2hq867] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 27px;
    margin-bottom: 15px;
}

.euets-flex-result[b-h3ys2hq867] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 27px;
    width: 100%;
}

.euets-grid-saved[b-h3ys2hq867] {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    list-style:none;
    margin-left: 0;
    padding-left: 0;
}

.euets-grid-saved li[b-h3ys2hq867] {
    margin-left: 0;
    padding-left: 0;
}

.main-col-left[b-h3ys2hq867] {
    width: 350px;
}

.main-col-right[b-h3ys2hq867] {
    /*flex: 1 0 auto;*/
}

.euets-table-header1[b-h3ys2hq867] {
    font-family: 'Soehne breit', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1.2rem;
    color: #009DC9;
    border: 2px solid #B5CBD6;
}

.euets-table-header2[b-h3ys2hq867] {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #009DC9;
}

.euets-result-values[b-h3ys2hq867] {
    font-size: 1rem;
    color: #000061;
    background-color: #E9EFF98A;
    font-weight: normal;
}

.euets-flex-savename[b-h3ys2hq867] {
    display: flex;
    justify-content: space-between;
    width: 355px;
}

.euets-savename[b-h3ys2hq867] {
    border-radius: 25px 0 0 25px;
    background: #009DC9;
    color: white;
    padding: 3px 0 3px 10px;
    width: 325px;
    border: none;
    overflow: hidden;
    text-overflow: clip;
}


.euets-savename-delete[b-h3ys2hq867] {
    border-radius: 0 25px 25px 0;
    background: #F7A506;
    border: none;
    padding: 3px 0 3px 0;
    width: 30px;
    cursor: pointer;
}

.euets-flex-delete[b-h3ys2hq867] {
    display: flex;
    justify-content: space-between;
    width: 150px;
}

.euets-savename-delete-confirm[b-h3ys2hq867] {
    border-radius: 25px 0 0 25px;
    background: #DB303A;
    border: none;
    color: white;
    padding: 3px 3px 3px 0;
    width: 75px;
    cursor: pointer;
    text-align: right;
}

.euets-savename-delete-cancel[b-h3ys2hq867] {
    border-radius: 0 25px 25px 0;
    background: #91A527;
    border: none;
    padding: 3px;
    width: 75px;
    cursor: pointer;
}

.euets-country-input[b-h3ys2hq867] {
    border: 1px solid #ced4da;
    border-radius: .375rem;
    color: #212529;
    padding: .375rem .75rem;
    line-height: 1.5;
}




.euets-flex-contact[b-h3ys2hq867] {
    display: flex;
    justify-content: space-around;
    height: 200px;
    width: 410px;
    padding: 5px;
}


.euets-assumptions-noneditable.form-control:disabled[b-h3ys2hq867]{
    background-color: #fff;
    color: #000;
    border-color: #fff;
}



@media only screen and (max-width: 1620px) {
    .euets-flex[b-h3ys2hq867] {
        gap: 10px;
    }


}
/* /Components/Pages/Futures/FuturesDataExtractor/FuturesTradeExtractor_00.razor.rz.scp.css */
.tradeextractPageLayout[b-llnat61zkx] {
    display: grid;
    grid-template-columns: 320px auto;
    gap: 20px;
}

.tradeextractbox[b-llnat61zkx] {
    border: 1px solid #009DC9;
}

.tradeextractdatepicker[b-llnat61zkx] {
}

.tradeextractroutepicker[b-llnat61zkx] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 20px;
}

.tradeextractroutepicker-ul[b-llnat61zkx] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    .tradeextractroutepicker-ul .chkbox[b-llnat61zkx] {
        margin: 0 3px 0 0;
        vertical-align: middle;
    }


    .tradeextractroutepicker-ul li[b-llnat61zkx] {
        text-decoration: none;
    }

        .tradeextractroutepicker-ul li:hover[b-llnat61zkx] {
            background-color: #B5CBD6;
        }

.tradeextractroutepicker-tbl tr:hover[b-llnat61zkx] {
    background-color: #B5CBD6;
}

.tradeextractroutepicker-tbl td[b-llnat61zkx] {
    padding-right: 30px;
}

.tradeextractroutepicker-tbl .delete[b-llnat61zkx] {
    cursor: pointer;
    padding-right: 3px;
}

    .tradeextractroutepicker-tbl .delete:hover[b-llnat61zkx] {
        font-weight: 700;
        color: white;
    }

.tradeextractoutput-tbl th:not(:first-child)[b-llnat61zkx] {
    text-align: center;
    border: 1px solid #B5CBD6;
}

.tradeextractoutput-tbl[b-llnat61zkx] {
    text-align: right;
}

    .tradeextractoutput-tbl tr:hover[b-llnat61zkx] {
        background-color: #B5CBD6;
    }

    .tradeextractoutput-tbl td:first-child[b-llnat61zkx], .tradeextractoutput-tbl th:first-child[b-llnat61zkx] {
        text-align: left;
    }

    .tradeextractoutput-tbl th label[b-llnat61zkx] {
        font-size: 0.8rem;
        font-weight: normal;
        color: #163E9F;
        font-style: italic;
    }

.tradeextractoutpup-btn-text[b-llnat61zkx] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

    .tradeextractoutpup-btn-text > div[b-llnat61zkx] {
        flex-shrink: 0;
    }

    .tradeextractoutpup-btn-text button[b-llnat61zkx] {
        white-space: nowrap;
    }

.tradeextractoutput-c3y[b-llnat61zkx] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.disclaimer-accordion[b-llnat61zkx] {
    background-color: #B5CBD6;
    color: #000061;
    cursor: pointer;
    padding: 2px 0 2px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 0.8rem;
    transition: 0.4s;
}

    .disclaimer-accordion:hover[b-llnat61zkx] {
        background-color: #405864;
        color: white;
    }


.tradeflashing[b-llnat61zkx] {
    animation: tradeflash-b-llnat61zkx 3s infinite;
    color: #EB3871;
    font-weight: bold;
}

        @keyframes tradeflash-b-llnat61zkx {
            0%  {opacity: 1; }
            50% {opacity: 0.5; }
            100% {opacity: 1; }
        }
/* /Components/Pages/Futures/IntradayDashboard/IntradayDashboard.razor.rz.scp.css */
.settings-container[b-zzjkugx7ep] {
    position: fixed;
    top: 50px;
    display: flex;
    flex-direction: column;
    z-index: 925;
    left: 0;
    border-left: 3px solid #243447;
}

.settings-container.light-theme[b-zzjkugx7ep] {
    border-left: 3px solid #000061;
}

.settings-container .settings-btn[b-zzjkugx7ep] {
    height: 5rem;
    width: 1.3rem;
    background-color: #243447;
    color: white;
    border-radius: 0;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.settings-container.light-theme .settings-btn[b-zzjkugx7ep] {
    background-color: #000061;
}

.settings-container .settings-btn:last-child[b-zzjkugx7ep] {
    border-radius: 0 0px 15px 0;
}

.settings-container .settings-btn:hover[b-zzjkugx7ep] {
    background-color: white;
    color: #243447;
    border: 1px solid #243447;
}

.settings-container.light-theme .settings-btn:hover[b-zzjkugx7ep] {
    color: #000061;
    border: 1px solid #000061;
}

.settings-container .settings-btn:hover[b-zzjkugx7ep]  path,
.settings-container .settings-btn[b-zzjkugx7ep]  svg:hover path,
.settings-container .settings-btn[b-zzjkugx7ep]  path:hover {
    fill: #243447;
}

.settings-container.light-theme .settings-btn:hover[b-zzjkugx7ep]  path,
.settings-container.light-theme .settings-btn[b-zzjkugx7ep]  svg:hover path,
.settings-container.light-theme .settings-btn[b-zzjkugx7ep]  path:hover {
    fill: #000061;
}


.settings-container .settings-btn.copy-fade-in-fade-out[b-zzjkugx7ep] {
    animation-name: copyFadeInOut-b-zzjkugx7ep;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@keyframes copyFadeInOut-b-zzjkugx7ep {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.dashboard-container[b-zzjkugx7ep] {
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    /* screen width - navbar */
    height: calc(100vh - 55px);
    /* screen width - body margin - body padding - margin */
    width: calc(100vw - 1rem - 10px - 0.25em);
    padding-bottom: 0.25em;
    margin-left: 0.25em;
    box-sizing: border-box;
}

.board[b-zzjkugx7ep] {
    position: relative;
    display: grid;
    gap: 12px;
    width: fit-content;
    height: fit-content;
    max-width: 100%;
    max-height: 100%;
}

.item[b-zzjkugx7ep] {
    width: 100%;
    user-select: none;
    touch-action: none;
    cursor: grab;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.board.modal-open .item[b-zzjkugx7ep],
.board.modal-open[b-zzjkugx7ep] {
    cursor: default;
}

.item:active[b-zzjkugx7ep],
.item:focus[b-zzjkugx7ep],
.item:focus-visible[b-zzjkugx7ep] {
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    outline: none;
}

.placeholder-slot[b-zzjkugx7ep] {
    background: light-dark(rgba(0,0,0,.08), rgba(255,255,255,.08));
    border-radius: 0.75em;
    border: 2px dashed light-dark(rgba(0,0,0,.16), rgba(255,255,255,.16));
    z-index: 1;
}

.js-hidden-origin[b-zzjkugx7ep] {
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
}

.js-drag-ghost[b-zzjkugx7ep] {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    cursor: grabbing;
}

/* Add box shadow to child element */
.js-drag-ghost[b-zzjkugx7ep]  > div {
    box-shadow: 0 14px 28px light-dark(rgba(0,0,0,.18), rgba(255,255,255,.18));
}

.js-drag-placeholder[b-zzjkugx7ep] {
    z-index: 1;
}

[b-zzjkugx7ep] .intraday-settings-tab-legend {
    margin-right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-zzjkugx7ep] .intraday-settings-configs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

[b-zzjkugx7ep] .intraday-settings-config-group {
    border: 1px solid #495057;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

[b-zzjkugx7ep] .intraday-settings-config-title {
    color: #000061;
    margin-bottom: 0.5rem;
}

[b-zzjkugx7ep] .intraday-settings-config-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-zzjkugx7ep] .intraday-settings-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #495057;
    border-radius: 0.4rem;
}

[b-zzjkugx7ep] .intraday-settings-config-row.selected {
    border-color: #0d6efd;
    background: color-mix(in srgb, #0d6efd 15%, transparent);
}

[b-zzjkugx7ep] .intraday-settings-config-main {
    flex: 1;
    text-align: left;
}

[b-zzjkugx7ep] .intraday-settings-config-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-zzjkugx7ep] .intraday-settings-config-actions button {
    border: none;
    background: transparent;
    color: inherit;
}

[b-zzjkugx7ep] .intraday-settings-config-edit {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

[b-zzjkugx7ep] .intraday-settings-config-edit input {
    flex: 1;
}

[b-zzjkugx7ep] .intraday-settings-checkbox-row {
    width: 100%;
}

[b-zzjkugx7ep] .intraday-settings-checkbox-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    padding-left: 0;
}

[b-zzjkugx7ep] .intraday-settings-checkbox-label {
    padding-left: 0.5rem;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    margin: 0;
}

[b-zzjkugx7ep] .ssy-recursive-checkboxlist legend {
    font-size: 1.25rem;
}

[b-zzjkugx7ep] .ssy-recursive-checkboxlist-children {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

[b-zzjkugx7ep] .ssy-recursive-checkboxlist-items {
    display: flex;
    flex-direction: column;
}

[b-zzjkugx7ep] .ssy-recursive-checkboxlist-items > label {
    margin-bottom: 0.75rem;
}


/* Radio styling   */
/* ============== */
.chart-radio.myssy-radio-main[b-zzjkugx7ep] {
    display: flex;
    justify-content: center;
    gap: 0.5em;
}

.chart-radio.myssy-radio-main input[b-zzjkugx7ep] {
    display: none;
}

.chart-radio.myssy-radio-main label[b-zzjkugx7ep] {
    padding: 0.25em 0.5em;
    font-size: 1em;
    font-weight: 600;
    border-radius: 0.5em;
    background: #009DC9; /*light-dark(#009DC9,#152234);*/
    color: #FFFFFF; /*light-dark(#FFFFFF,#E5E7EB);*/
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.08);
    transition: all .15s ease;
}

.chart-radio.myssy-radio-main label:hover[b-zzjkugx7ep] {
    background: #0076b0; /* light-dark(#0076b0, #1e3a5f); */
}

.chart-radio.myssy-radio-main input:checked + label[b-zzjkugx7ep] {
    background: #000061; /*light-dark(#000061, #22C55E);*/
    color: #fff; /*light-dark(#fff, #0f172a);*/
    border-color: transparent;
}

.chart-radio.myssy-radio-main input:disabled + label[b-zzjkugx7ep] {
    background: #E5E7EB;
    color: #000000;
    cursor: not-allowed;
    border-color: transparent;
}
/* /Components/Pages/Futures/IntradayDashboard/IntradayDashboardMobile.razor.rz.scp.css */
.settings-container[b-211w6tpvsx] {
    position: fixed;
    top: 50px;
    display: flex;
    flex-direction: column;
    z-index: 925;
    left: 0;
    border-left: 3px solid #000061;
}

.settings-btn[b-211w6tpvsx] {
    height: 5rem;
    width: 1.3rem;
    background-color: #000061;
    color: white;
    border-radius: 0;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.settings-btn.red-btn[b-211w6tpvsx] {
    background-color: #DB303A;
}

.settings-btn:last-child[b-211w6tpvsx] {
    border-radius: 0 0px 15px 0;
}

.settings-btn:hover[b-211w6tpvsx] {
    background-color: white;
    color: #000061;
    border: 1px solid #000061;
}

.settings-btn.red-btn:hover[b-211w6tpvsx] {
    color: #DB303A;
    border: 1px solid #DB303A;
}

.settings-btn:hover[b-211w6tpvsx]  path, .settings-btn[b-211w6tpvsx]  svg:hover path, .settings-btn[b-211w6tpvsx]  path:hover {
    fill: #000061;
}

.settings-btn.red-btn:hover[b-211w6tpvsx]  path, .settings-btn.red-btn[b-211w6tpvsx]  svg:hover path, .settings-btn.red-btn[b-211w6tpvsx]  path:hover {
    fill: #DB303A;
}

.dashboard-container[b-211w6tpvsx] {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    height: calc(100vh - 55px - 0.25em);
    display: flex;
    flex-direction: column;
    margin-bottom: 0.25em;
    margin-left: 0.25em;
    padding-right: 0.5em;
}

/*.dashboard-container .dashboard-row {
    display: flex;
    width: 100%;
    flex-wrap: unset;
    margin-bottom: 0.5em;
    column-gap: 0.5em;
}*/

    .dashboard-container .dashboard-item[b-211w6tpvsx] {
        /*min-height: 25em;*/
        /*border-radius: 1em;*/
        /*padding: 0.5em;*/
        /*max-height: 40em;*/
        margin-bottom: 0.5em;
    }

    .dashboard-container .dashboard-item.item-span-1[b-211w6tpvsx] {
        /*width: 22.25em;*/
        min-width: 22.25em;
    }

        .dashboard-container .dashboard-item.item-span-2[b-211w6tpvsx] {
            /*width: calc((22.25em * 2) + 0.5em);*/
            /*min-width: calc((22.25em * 2) + 0.5em);*/
            min-width: 22.25em;
        }

.dashboard-container .dashboard-item.item-padding[b-211w6tpvsx] {
    width: 0.5em;
    min-width: 0.5em;
}

@media (min-width: 2000px) {
    .intraday-dashboard[b-211w6tpvsx] {
        --ssy-grid-columns: 6;
    }
}

/* Large desktop */
@media (max-width: 1400px) {
    .intraday-dashboard[b-211w6tpvsx] {
        --ssy-grid-columns: 4;
    }
}

/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {
    .intraday-dashboard[b-211w6tpvsx] {
        --ssy-grid-columns: 2;
    }

    .grid-container[b-211w6tpvsx] {
        grid-template-columns: auto auto auto;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .intraday-dashboard[b-211w6tpvsx] {
        --ssy-grid-columns: 1;
    }

    .grid-container[b-211w6tpvsx] {
        grid-template-columns: auto auto;
    }

    .span-3[b-211w6tpvsx] {
        grid-column: span 2;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .intraday-dashboard[b-211w6tpvsx] {
        --ssy-grid-columns: 0;
    }

    .grid-container[b-211w6tpvsx] {
        grid-template-columns: auto;
    }

    .span-3[b-211w6tpvsx] {
        grid-column: span 1;
    }

    .span-2[b-211w6tpvsx] {
        grid-column: span 1;
    }
}
/* /Components/Pages/Futures/IntradayPrices/FfaLiveCurves.razor.rz.scp.css */
.itd-pge-noPaddingMargin[b-qnd7kw3gwk] {
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: visible !important;
}

.container-fluid .itd-pge-row[b-qnd7kw3gwk] {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.5em;
}

.itd-pge-box[b-qnd7kw3gwk] {
    min-width: 22em;
    white-space: nowrap !important;
}

@media screen and (max-width:600px) {
    .itd-pge-box[b-qnd7kw3gwk] {
        width: 92%;
    }


}

@media screen and (min-width:600px) {
    .itd-pge-box[b-qnd7kw3gwk] {
        width: 20em;
        padding: 0;
    }

    .container-fluid .itd-pge-row[b-qnd7kw3gwk] {
        margin-left: -13px;
    }

}

@media screen and (min-width:768px) {
    .itd-pge-box[b-qnd7kw3gwk] {
        width: 22em;
        white-space: nowrap !important;
        padding: unset;
        margin-right: 5px;
    }

    .container-fluid .itd-pge-row[b-qnd7kw3gwk] {
        flex-wrap: unset;
        margin-left: 0;
    }
}


.itd-pge-box.draggable[b-qnd7kw3gwk] {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    text-align: center;
}

   /* .itd-pge-box.draggable:hover {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        text-align: center;
    }

    .itd-pge-box.draggable.dragging {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        text-align: center;
    }*/
/* /Components/Pages/Futures/IntradayPrices/IntradayPriceTable.razor.rz.scp.css */
table.intraday thead tr[b-k45iaxlqku] {
    border-color: #0087CB !important;
}

table.intraday tbody tr[b-k45iaxlqku] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: min-content !important;
    font-weight: bold;
}

table.intraday tbody tr th:nth-child(1)[b-k45iaxlqku] {
    text-align: left;
    padding-left: 5px;
}

table.intraday tbody tr td:nth-child(1)[b-k45iaxlqku] {
    text-align: center;
}

table.intraday tbody tr th:nth-child(2)[b-k45iaxlqku], td:nth-child(2)[b-k45iaxlqku] {
    text-align: right;
}

table.intraday tbody tr th:nth-child(3)[b-k45iaxlqku], td:nth-child(3)[b-k45iaxlqku] {
    text-align: right;
}

table.intraday tbody tr th:nth-child(4)[b-k45iaxlqku], td:nth-child(4)[b-k45iaxlqku] {
    text-align: right;
}

table.intraday tbody tr th:nth-child(5)[b-k45iaxlqku], td:nth-child(5)[b-k45iaxlqku] {
    text-align: right;
}

.pulsecolour[b-k45iaxlqku] {
    animation-name: pulseSetting;
    animation-duration: 700ms;
    animation-iteration-count: 40;
    animation-timing-function: linear;
}



/* /Components/Pages/Futures/LiveTrades.razor.rz.scp.css */


.date-select-simple-arrows[b-wzlyo9gp5s] {
    font-size: 20px;
    width: 30px;
}

.dateChanger-date[b-wzlyo9gp5s] {
    font-size: 16px;
    width: 160px;
    display: inline-block;
    text-align: center;
}

.date-select-simple-arrows.disable[b-wzlyo9gp5s] {
    color: lightgray;
}

    .date-select-simple-arrows.disable:hover[b-wzlyo9gp5s] {
        color: lightgray;
        cursor: default;
        font-weight: normal;
    }

.arrow[b-wzlyo9gp5s] {
    height: 20px;
}

    .arrow.switch-arrow[b-wzlyo9gp5s] {
        transform: rotate(180deg);
    }

.tooltip-box[b-wzlyo9gp5s] {
    position: fixed;
    padding: 10px;
    background-color: #000061;
    border-radius: 5px;
    color: #fff;
}


.filtertextbox[b-wzlyo9gp5s] {
    width: 300px;
    padding-right: 4px;
    margin-left: 5%;
    margin-top: 0%;
}


.ssythemefilter[b-wzlyo9gp5s] {
    background-color: white;
    border-color: #d2cdc3;
    color: black;
}

.pulsenewtrade[b-wzlyo9gp5s] {
    animation-name: pulseNewTradeSettings-b-wzlyo9gp5s;
    animation-duration: 700ms;
    animation-iteration-count: 40;
    animation-timing-function: linear;
    font-weight: bold;
    color: black;
    background-color: #D9EBF9 !important;
}

.tradetable-row[b-wzlyo9gp5s] {
    cursor: pointer;
    height: 1.5em;
}

.tradetable-div[b-wzlyo9gp5s] {
    font-family: Verdana;
    font-size: 0.9rem;
    flex-basis: content;
    flex-shrink: 1;
    width: 100%;
}

.tradetable[b-wzlyo9gp5s] {
    width: 650px;
}

.numcol[b-wzlyo9gp5s] {
    text-align: right;
}

.centercol[b-wzlyo9gp5s] {
    text-align: center;
}

.lightUnderscore[b-wzlyo9gp5s] {
    text-decoration: underline;
    -webkit-text-decoration-color: silver; /* safari still uses vendor prefix */
    text-decoration-color: silver;
}

.stattable-routename[b-wzlyo9gp5s] {
    border-top: solid 1px silver;
    border-bottom: solid 1px silver;
    background-color: none;
    font-weight: bold;
    color: #000061;
}

.stattable-detail[b-wzlyo9gp5s] {
    background-color: none;
}

    .stattable-detail:hover[b-wzlyo9gp5s] {
        background-color: lightgrey;
    }

.tradesummarylogo[b-wzlyo9gp5s] {
    background-image: url("/assets/lines/SSYShippingLines_01_stretchable.svg");
    background-size: 100% 200%;
    /*background-position-y: -10px;*/
}

@keyframes pulseNewTradeSettings-b-wzlyo9gp5s {
    0% {
        /*background-color: #f0e2b4 !important;*/
        color: black;
    }

    100% {
        /*background-color: #f5ef87 !important;*/
        color: red;
    }
}

@media screen and (max-width: 1400px) {
    .tradetable[b-wzlyo9gp5s] {
        width: 450px;
    }
}


@media screen and (max-width: 600px) {
    .hide-mobile[b-wzlyo9gp5s] {
        display: none;
    }

    .flex-mobile-wrap[b-wzlyo9gp5s] {
        flex-wrap: wrap;
    }

    .tradetable[b-wzlyo9gp5s] {
        width: 100%;
    }

    .tradetable-div[b-wzlyo9gp5s] {
        flex-basis: unset;
        flex-shrink: 1;
        width: 100%;
    }

    .date-select-simple .date-arrows[b-wzlyo9gp5s] {
        padding: 0 8px 0 8px;
    }
}
/* /Components/Pages/Futures/Options/OptionVolatilities.razor.rz.scp.css */
.ov-header[b-2f08t7eu8d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.ov-header-actions[b-2f08t7eu8d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ov-copy-btn[b-2f08t7eu8d] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #ccc;
    background: #FFFFFF;
    color: #333;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom:3px;
}

.ov-copy-btn:hover[b-2f08t7eu8d] {
    background: #f0f0f0;
}

.ov-setup-toggle[b-2f08t7eu8d] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #009DC9;
    background: #FFFFFF;
    color: #009DC9;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom:3px;
}

.ov-setup-toggle:hover[b-2f08t7eu8d] {
    background: #E5F6FB;
}

.ov-setup-toggle.active[b-2f08t7eu8d] {
    background: #009DC9;
    color: #FFFFFF;
}

.ov-controls[b-2f08t7eu8d] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ov-control-box[b-2f08t7eu8d] {
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    background: #fafafa;
}

.ov-date[b-2f08t7eu8d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ov-size[b-2f08t7eu8d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ov-periods-label[b-2f08t7eu8d] {
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.ov-periods-list[b-2f08t7eu8d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    max-width: 40rem;
    max-height: 6rem;
    overflow-y: auto;
}

.ov-period-item[b-2f08t7eu8d] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.ov-saved-msg[b-2f08t7eu8d] {
    margin-left: 0.75rem;
    color: #005DB9;
    font-size: 0.85rem;
}

.ov-chart-grid[b-2f08t7eu8d] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.ov-chart-card[b-2f08t7eu8d] {
    min-height: 22rem;
    border: 1px solid #e0e0e0;
    padding: 0;
    margin: -1px 0 0 -1px;
}

.ov-chart-nodata[b-2f08t7eu8d] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20rem;
    color: #777;
}

@media (max-width: 1100px) {
    .ov-chart-grid[b-2f08t7eu8d] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Futures/Splash/Splash_010_Main.razor.rz.scp.css */
/* ============== HERO ============== */
.hero[b-7cbyp12ixa] {
    position: relative;
    min-height: 540px;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 16px;
}
.hero-bg[b-7cbyp12ixa] {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}
.hero-photo[b-7cbyp12ixa] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    animation: heroZoom-b-7cbyp12ixa 24s ease-in-out infinite;
}
@keyframes heroZoom-b-7cbyp12ixa {
    0%, 100% { transform: scale(1.06) translate(0, 0); }
    50%      { transform: scale(1.12) translate(-1.5%, -1%); }
}
.hero-veil[b-7cbyp12ixa] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(5,6,20,0.25) 0%, rgba(5,6,20,0.85) 70%),
        linear-gradient(180deg, rgba(5,6,20,0.55) 0%, rgba(5,6,20,0.92) 100%);
}

.hero-particles[b-7cbyp12ixa] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-particle[b-7cbyp12ixa] {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(0,157,201,0.7);
    box-shadow: 0 0 8px rgba(0,157,201,0.7);
    animation: particleFloat-b-7cbyp12ixa 12s linear infinite;
}
@keyframes particleFloat-b-7cbyp12ixa {
    0%   { transform: translateY(40px); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(-60vh); opacity: 0; }
}
.hero-particle.p-0[b-7cbyp12ixa]  { left: 5%;  bottom: 0; animation-delay: 0s;     animation-duration: 13s; }
.hero-particle.p-1[b-7cbyp12ixa]  { left: 12%; bottom: 0; animation-delay: -2s;    animation-duration: 11s; background: rgba(247,165,6,0.6); box-shadow: 0 0 8px rgba(247,165,6,0.6); }
.hero-particle.p-2[b-7cbyp12ixa]  { left: 19%; bottom: 0; animation-delay: -5s;    animation-duration: 14s; }
.hero-particle.p-3[b-7cbyp12ixa]  { left: 26%; bottom: 0; animation-delay: -3s;    animation-duration: 12s; }
.hero-particle.p-4[b-7cbyp12ixa]  { left: 33%; bottom: 0; animation-delay: -7s;    animation-duration: 16s; }
.hero-particle.p-5[b-7cbyp12ixa]  { left: 40%; bottom: 0; animation-delay: -1s;    animation-duration: 15s; background: rgba(247,165,6,0.6); }
.hero-particle.p-6[b-7cbyp12ixa]  { left: 47%; bottom: 0; animation-delay: -4s;    animation-duration: 13s; }
.hero-particle.p-7[b-7cbyp12ixa]  { left: 54%; bottom: 0; animation-delay: -8s;    animation-duration: 11s; }
.hero-particle.p-8[b-7cbyp12ixa]  { left: 61%; bottom: 0; animation-delay: -2.5s;  animation-duration: 14s; }
.hero-particle.p-9[b-7cbyp12ixa]  { left: 68%; bottom: 0; animation-delay: -6s;    animation-duration: 12s; background: rgba(247,165,6,0.6); }
.hero-particle.p-10[b-7cbyp12ixa] { left: 74%; bottom: 0; animation-delay: -3.5s;  animation-duration: 15s; }
.hero-particle.p-11[b-7cbyp12ixa] { left: 81%; bottom: 0; animation-delay: -9s;    animation-duration: 13s; }
.hero-particle.p-12[b-7cbyp12ixa] { left: 88%; bottom: 0; animation-delay: -1.5s;  animation-duration: 11s; }
.hero-particle.p-13[b-7cbyp12ixa] { left: 94%; bottom: 0; animation-delay: -4.5s;  animation-duration: 16s; }
.hero-particle.p-14[b-7cbyp12ixa] { left: 8%;  bottom: 0; animation-delay: -10s;   animation-duration: 14s; }
.hero-particle.p-15[b-7cbyp12ixa] { left: 22%; bottom: 0; animation-delay: -7.5s;  animation-duration: 12s; background: rgba(247,165,6,0.6); }
.hero-particle.p-16[b-7cbyp12ixa] { left: 56%; bottom: 0; animation-delay: -11s;   animation-duration: 15s; }
.hero-particle.p-17[b-7cbyp12ixa] { left: 78%; bottom: 0; animation-delay: -2.8s;  animation-duration: 13s; }

.hero-grid[b-7cbyp12ixa] {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    padding: 64px 56px;
    align-items: center;
}
.hero-copy[b-7cbyp12ixa] { max-width: 640px; }
.hero-lede[b-7cbyp12ixa] {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(231,236,255,0.78);
    margin: 18px 0 28px;
    max-width: 540px;
    font-weight: 300;
}
.hero-cta[b-7cbyp12ixa] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-btn[b-7cbyp12ixa] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.2,.8,.2,1);
}
.hero-btn.primary[b-7cbyp12ixa] {
    background: linear-gradient(135deg, #009DC9, #003B89);
    color: #fff;
    box-shadow: 0 14px 32px rgba(0,157,201,0.38);
}
.hero-btn.primary:hover[b-7cbyp12ixa] {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,157,201,0.52);
}
.hero-btn.primary span[b-7cbyp12ixa] { transition: transform 0.3s; display: inline-block; }
.hero-btn.primary:hover span[b-7cbyp12ixa] { transform: translateX(4px); }

.hero-btn.ghost[b-7cbyp12ixa] {
    background: rgba(255,255,255,0.06);
    color: #e7ecff;
    border: 1px solid rgba(255,255,255,0.18);
}
.hero-btn.ghost:hover[b-7cbyp12ixa] {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.4);
}

.hero-cal[b-7cbyp12ixa] { justify-self: end; width: 100%; max-width: 480px; }

@media (max-width: 1100px) {
    .hero-grid[b-7cbyp12ixa] { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
    .hero-cal[b-7cbyp12ixa] { justify-self: stretch; max-width: none; }
}

/* ============== CURVES GRID ============== */
.curves-grid[b-7cbyp12ixa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}

/* ============== JUMP CARDS ============== */
.jump-grid[b-7cbyp12ixa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.jump[b-7cbyp12ixa] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: #e7ecff;
    text-decoration: none;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.4s cubic-bezier(.2,.8,.2,1);
}
.jump[b-7cbyp12ixa]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(0,157,201,0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}
.jump:hover[b-7cbyp12ixa] {
    transform: translateY(-4px);
    border-color: rgba(0,157,201,0.5);
    color: #fff;
    box-shadow: 0 20px 50px rgba(0,157,201,0.18);
}
.jump:hover[b-7cbyp12ixa]::before { opacity: 1; }
.jump-num[b-7cbyp12ixa] {
    font-size: 11px;
    letter-spacing: 0.3em;
    color: #009DC9;
    font-variant-numeric: tabular-nums;
}
.jump-title[b-7cbyp12ixa] {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.01em;
}
.jump-blurb[b-7cbyp12ixa] {
    font-size: 13px;
    color: rgba(231,236,255,0.7);
    line-height: 1.5;
    margin-top: 4px;
}
.jump-arrow[b-7cbyp12ixa] {
    margin-top: 12px;
    font-size: 18px;
    color: #F7A506;
    transition: transform 0.3s;
}
.jump:hover .jump-arrow[b-7cbyp12ixa] { transform: translateX(6px); }
/* /Components/Pages/Futures/Splash/Splash_100_Markets.razor.rz.scp.css */
.md-lede[b-15m1jog54h] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 640px;
}

.md-grid[b-15m1jog54h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

.md-card[b-15m1jog54h] {
    --accent: #009DC9;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 26px 22px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: #e7ecff;
    text-decoration: none;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.4s cubic-bezier(.2,.8,.2,1);
}
.md-card[b-15m1jog54h]::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, var(--accent), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
}
.md-card:hover[b-15m1jog54h] {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    color: #fff;
}
.md-card:hover[b-15m1jog54h]::before { opacity: 0.85; }

.md-card-strip[b-15m1jog54h] {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent 70%);
}

.md-card-eyebrow[b-15m1jog54h] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}
.md-card-title[b-15m1jog54h] {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.01em;
}
.md-card-sub[b-15m1jog54h] {
    font-size: 12px;
    color: rgba(231,236,255,0.55);
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.md-card-spot[b-15m1jog54h] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.md-card-spot-num[b-15m1jog54h] {
    font-size: 38px;
    font-weight: 200;
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.md-card-tenors[b-15m1jog54h] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.md-tenor[b-15m1jog54h] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    padding: 4px;
    border-radius: 6px;
}
.md-tenor-period[b-15m1jog54h] {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(231,236,255,0.45);
}
.md-tenor-mid[b-15m1jog54h] {
    font-size: 13px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.md-card-go[b-15m1jog54h] {
    margin-top: auto;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--accent);
    transition: transform 0.3s;
}
.md-card:hover .md-card-go[b-15m1jog54h] { transform: translateX(4px); }
/* /Components/Pages/Futures/Splash/Splash_200_Charts.razor.rz.scp.css */
.cv-lede[b-uhqsmwxsts] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 640px;
}
.cv-jump-grid[b-uhqsmwxsts] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}
.cv-jump[b-uhqsmwxsts] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: #e7ecff;
    text-decoration: none;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.4s cubic-bezier(.2,.8,.2,1);
}
.cv-jump[b-uhqsmwxsts]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(0,157,201,0.18));
    opacity: 0;
    transition: opacity 0.4s;
}
.cv-jump:hover[b-uhqsmwxsts] {
    transform: translateY(-4px);
    border-color: rgba(0,157,201,0.5);
    box-shadow: 0 18px 50px rgba(0,157,201,0.22);
    color: #fff;
}
.cv-jump:hover[b-uhqsmwxsts]::after { opacity: 1; }
.cv-jump-num[b-uhqsmwxsts] {
    font-size: 11px;
    letter-spacing: 0.3em;
    color: #009DC9;
    font-variant-numeric: tabular-nums;
}
.cv-jump-title[b-uhqsmwxsts] {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.cv-jump-blurb[b-uhqsmwxsts] {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(231,236,255,0.7);
}
.cv-jump-go[b-uhqsmwxsts] {
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #F7A506;
}
/* /Components/Pages/Futures/Splash/Splash_210_Indices.razor.rz.scp.css */
.ix-lede[b-hu4nh92yrd] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 640px;
}
.ix-charts[b-hu4nh92yrd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
}
.ix-chart[b-hu4nh92yrd] {
    padding: 22px 24px 18px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
}
.ix-chart-head[b-hu4nh92yrd] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.ix-chart-eyebrow[b-hu4nh92yrd] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(231,236,255,0.45);
}
.ix-chart-title[b-hu4nh92yrd] {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.ix-chart-body[b-hu4nh92yrd] {
    flex: 1;
    min-height: 320px;
}
.ix-chart-placeholder[b-hu4nh92yrd] {
    width: 100%;
    height: 320px;
}
/* /Components/Pages/Futures/Splash/Splash_220_Differentials.razor.rz.scp.css */
.df-lede[b-op2e9l1ihu] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 640px;
}
.df-chart[b-op2e9l1ihu] { padding: 24px 26px 22px; }
.df-chart-head[b-op2e9l1ihu] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.df-chart-eyebrow[b-op2e9l1ihu] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(231,236,255,0.45);
}
.df-chart-title[b-op2e9l1ihu] {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
}
.df-chart-body[b-op2e9l1ihu] { min-height: 460px; }
/* /Components/Pages/Futures/Splash/Splash_230_Movement.razor.rz.scp.css */
.mv-lede[b-nlkyiw6kdh] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 740px;
}

/* ============== ROUTE PICKER ============== */
.mv-vessels[b-nlkyiw6kdh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.mv-vessel[b-nlkyiw6kdh] {
    --accent: #009DC9;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    color: rgba(231,236,255,0.85);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.2,.8,.2,1);
    text-align: left;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.mv-vessel:hover[b-nlkyiw6kdh] {
    transform: translateY(-2px);
    border-color: var(--accent);
    color: #fff;
}
.mv-vessel.active[b-nlkyiw6kdh] {
    background: rgba(0,157,201,0.12);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,157,201,0.25);
}
.mv-vessel-dot[b-nlkyiw6kdh] {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    flex-shrink: 0;
    transition: transform 0.3s;
}
.mv-vessel.active .mv-vessel-dot[b-nlkyiw6kdh] {
    animation: vesselDotPulse-b-nlkyiw6kdh 1.6s ease-in-out infinite;
}
@keyframes vesselDotPulse-b-nlkyiw6kdh {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.6; }
}
.mv-vessel-name[b-nlkyiw6kdh] {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: inherit;
}
.mv-vessel-route[b-nlkyiw6kdh] {
    font-size: 10px;
    color: rgba(231,236,255,0.5);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-left: auto;
}

/* ============== CHART CARD ============== */
.mv-chart[b-nlkyiw6kdh] {
    padding: 24px 28px 20px;
}
.mv-chart-head[b-nlkyiw6kdh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.mv-chart-eyebrow[b-nlkyiw6kdh] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(231,236,255,0.45);
    margin-bottom: 4px;
}
.mv-chart-title[b-nlkyiw6kdh] {
    font-size: 22px;
    color: #fff;
    font-weight: 400;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.mv-key[b-nlkyiw6kdh] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.mv-key-item[b-nlkyiw6kdh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(231,236,255,0.7);
    letter-spacing: 0.06em;
}
.mv-key-mid[b-nlkyiw6kdh], .mv-key-up[b-nlkyiw6kdh], .mv-key-down[b-nlkyiw6kdh] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}
.mv-key-mid[b-nlkyiw6kdh] { background: rgba(0,157,201,0.85); }
.mv-key-up[b-nlkyiw6kdh] {
    background: rgba(77,220,165,0.95);
    border: 1px solid rgba(77,220,165,1);
}
.mv-key-down[b-nlkyiw6kdh] {
    background: rgba(255,107,138,0.4);
    border: 1px solid rgba(255,107,138,1);
}

.mv-chart-body[b-nlkyiw6kdh] {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    border-radius: 12px;
}

/* Huge outlined date that floats over the lower-left while playing.
   Uses -webkit-text-stroke so the glyphs are hollow and the chart
   shows through the centre of each letter. */
.mv-date-overlay[b-nlkyiw6kdh] {
    position: absolute;
    left: 12px;
    bottom: 12px;
    pointer-events: none;
    z-index: 4;
    margin: 0;
    padding: 0;
    font-family: 'Soehne', 'Inter', system-ui, sans-serif;
    font-size: 4rem;
    margin-top: -3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    /* hollow glyphs - chart shows through every letter */
    color: transparent;
    -webkit-text-stroke: 1px rgba(231, 236, 255, 0.8);
    text-stroke: 1px rgba(231, 236, 255, 0.8);
    text-shadow: 0 0 60px rgba(0, 157, 201, 0.18);
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.5s cubic-bezier(.2,.8,.2,1), transform 0.6s cubic-bezier(.2,.8,.2,1);
}
    .mv-date-overlay.visible[b-nlkyiw6kdh] {
        opacity: 1;
        transform: translateY(0) scale(1);
        font-size: 4rem;
        position: absolute;
        margin-top: -3rem;
    }

/* ============== TIMELINE ============== */
.mv-timeline[b-nlkyiw6kdh] {
    margin-top: 18px;
    padding: 20px 22px;
    border-radius: 14px;
    background: rgba(7,10,32,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    align-items: center;
}

.mv-play[b-nlkyiw6kdh] {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(0,157,201,0.5);
    background: linear-gradient(135deg, rgba(0,157,201,0.25), rgba(0,0,97,0.4));
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(.2,.8,.2,1);
    flex-shrink: 0;
}
.mv-play:hover:not(:disabled)[b-nlkyiw6kdh] {
    transform: scale(1.06);
    border-color: #009DC9;
    box-shadow: 0 8px 24px rgba(0,157,201,0.5);
}
.mv-play:disabled[b-nlkyiw6kdh] {
    opacity: 0.4;
    cursor: not-allowed;
}
.mv-play.playing[b-nlkyiw6kdh] {
    border-color: #F7A506;
    background: linear-gradient(135deg, rgba(247,165,6,0.3), rgba(0,0,97,0.4));
    box-shadow: 0 0 0 4px rgba(247,165,6,0.15), 0 8px 24px rgba(247,165,6,0.4);
    animation: playingPulse-b-nlkyiw6kdh 1.8s ease-in-out infinite;
}
@keyframes playingPulse-b-nlkyiw6kdh {
    0%, 100% { box-shadow: 0 0 0 4px rgba(247,165,6,0.15), 0 8px 24px rgba(247,165,6,0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(247,165,6,0.05), 0 8px 24px rgba(247,165,6,0.55); }
}

/* slider track */
.mv-track-wrap[b-nlkyiw6kdh] {
    position: relative;
    padding: 0 4px;
}
.mv-track[b-nlkyiw6kdh] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, rgba(0,157,201,0.4), rgba(247,165,6,0.4));
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    margin: 0;
}
.mv-track:disabled[b-nlkyiw6kdh] { opacity: 0.4; cursor: not-allowed; }

.mv-track[b-nlkyiw6kdh]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    background: #fff;
    border: 3px solid #009DC9;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(0,157,201,0.2), 0 4px 12px rgba(0,0,0,0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}
.mv-track[b-nlkyiw6kdh]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(0,157,201,0.18), 0 4px 14px rgba(0,0,0,0.55);
}
.mv-track[b-nlkyiw6kdh]::-moz-range-thumb {
    width: 22px; height: 22px;
    background: #fff;
    border: 3px solid #009DC9;
    border-radius: 50%;
    cursor: pointer;
}

.mv-track-labels[b-nlkyiw6kdh] {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(231,236,255,0.5);
}

.mv-tick-row[b-nlkyiw6kdh] {
    position: absolute;
    top: -2px;
    left: 4px; right: 4px;
    height: 10px;
    pointer-events: none;
}
.mv-tick[b-nlkyiw6kdh] {
    position: absolute;
    top: 0;
    width: 2px;
    height: 10px;
    margin-left: -1px;
    background: rgba(255,255,255,0.18);
    transform: translateY(0);
    transition: background 0.2s, transform 0.2s, height 0.2s;
}
.mv-tick.active[b-nlkyiw6kdh] {
    background: #F7A506;
    height: 14px;
    box-shadow: 0 0 8px #F7A506;
}

.mv-counter[b-nlkyiw6kdh] {
    text-align: right;
    color: rgba(231,236,255,0.7);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    letter-spacing: 0.08em;
    min-width: 64px;
}
.mv-counter-now[b-nlkyiw6kdh] {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}
.mv-counter-of[b-nlkyiw6kdh] {
    color: rgba(231,236,255,0.45);
    margin-left: 4px;
}

@media (max-width: 760px) {
    .mv-timeline[b-nlkyiw6kdh] {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }
    .mv-counter[b-nlkyiw6kdh] { text-align: center; }
    .mv-play[b-nlkyiw6kdh] { justify-self: center; }
}
/* /Components/Pages/Futures/Splash/Splash_300_Commentary.razor.rz.scp.css */
.cm-lede[b-a07mpaaij3] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 720px;
}
.cm-deep[b-a07mpaaij3] {
    color: #009DC9;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0,157,201,0.5);
    transition: color 0.25s, border-color 0.25s;
}
.cm-deep:hover[b-a07mpaaij3] { color: #fff; border-color: #fff; }

.cm-grid[b-a07mpaaij3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}
.cm-card[b-a07mpaaij3] {
    --accent: #009DC9;
    position: relative;
    padding: 26px 28px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.3s;
}
.cm-card:hover[b-a07mpaaij3] {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.cm-card-strip[b-a07mpaaij3] {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
}
.cm-card-eyebrow[b-a07mpaaij3] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}
.cm-card-title[b-a07mpaaij3] {
    font-size: 22px;
    color: #fff;
    font-weight: 500;
    margin: 0 0 14px;
    letter-spacing: 0.01em;
}
.cm-card-body[b-a07mpaaij3] {
    color: rgba(231,236,255,0.85);
    line-height: 1.65;
    font-size: 14px;
}
[b-a07mpaaij3] .cm-card-body p { margin: 0 0 10px; }
[b-a07mpaaij3] .cm-card-body strong { color: #fff; font-weight: 500; }
[b-a07mpaaij3] .cm-card-body a { color: #009DC9; text-decoration: none; }
[b-a07mpaaij3] .cm-card-body a:hover { text-decoration: underline; }
.cm-empty[b-a07mpaaij3] {
    color: rgba(231,236,255,0.4);
    font-style: italic;
}
/* /Components/Pages/Futures/Splash/Splash_310_Fundamentals.razor.rz.scp.css */
.fd-lede[b-ffzgitmrxx] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 720px;
}
.fd-card[b-ffzgitmrxx] { padding: 32px 36px; max-width: 920px; }
.fd-card-eyebrow[b-ffzgitmrxx] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #009DC9;
    margin-bottom: 8px;
}
.fd-card-title[b-ffzgitmrxx] {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0 0 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 18px;
}
.fd-card-body[b-ffzgitmrxx] {
    color: rgba(231,236,255,0.88);
    font-size: 15px;
    line-height: 1.75;
    font-weight: 300;
}
[b-ffzgitmrxx] .fd-card-body p { margin: 0 0 14px; }
[b-ffzgitmrxx] .fd-card-body strong { color: #fff; font-weight: 500; }
[b-ffzgitmrxx] .fd-card-body a { color: #009DC9; text-decoration: none; }
[b-ffzgitmrxx] .fd-card-body a:hover { text-decoration: underline; }
.fd-empty[b-ffzgitmrxx] {
    color: rgba(231,236,255,0.4);
    font-style: italic;
}
/* /Components/Pages/Futures/Splash/_Shared/SplashCalendar.razor.rz.scp.css */
.cal-wrap[b-2ypt9igbf7] {
    position: relative;
    width: 100%;
    max-width: 540px;
}

/* ----- HERO ----- */
.cal-hero[b-2ypt9igbf7] {
    position: relative;
    padding: 28px 32px;
    border-radius: 24px;
    background: linear-gradient(140deg, rgba(0,157,201,0.18) 0%, rgba(0,0,97,0.4) 60%, rgba(247,165,6,0.08) 100%);
    border: 1px solid rgba(255,255,255,0.16);
    cursor: pointer;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s;
    user-select: none;
}
.cal-hero:hover[b-2ypt9igbf7] {
    transform: translateY(-3px);
    box-shadow: 0 24px 60px rgba(0,157,201,0.28);
}
.cal-hero-eyebrow[b-2ypt9igbf7] {
    display: flex; align-items: center; gap: 8px;
    color: rgba(231,236,255,0.7);
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.cal-hero-eyebrow .dot[b-2ypt9igbf7] {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ddca5;
    box-shadow: 0 0 10px #4ddca5;
    animation: heroPulse-b-2ypt9igbf7 1.4s ease-in-out infinite;
}
@keyframes heroPulse-b-2ypt9igbf7 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

.cal-hero-display[b-2ypt9igbf7] {
    display: flex;
    align-items: flex-end;
    gap: 22px;
}
.cal-hero-day[b-2ypt9igbf7] {
    font-size: 96px;
    font-weight: 200;
    line-height: 0.9;
    color: #fff;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 30px rgba(0,157,201,0.4);
}
.cal-hero-rest[b-2ypt9igbf7] { padding-bottom: 10px; }
.cal-hero-month[b-2ypt9igbf7] {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.02em;
}
.cal-hero-year[b-2ypt9igbf7] {
    font-size: 14px;
    color: rgba(231,236,255,0.65);
    letter-spacing: 0.16em;
    margin-top: 2px;
}
.cal-hero-dow[b-2ypt9igbf7] {
    font-size: 11px;
    color: #F7A506;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 8px;
    font-weight: 500;
}

.cal-hero-foot[b-2ypt9igbf7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.cal-step[b-2ypt9igbf7] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.18);
    color: #e7ecff;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cal-step:hover[b-2ypt9igbf7] {
    background: rgba(0,157,201,0.25);
    border-color: #009DC9;
    transform: scale(1.05);
}
.cal-step:disabled[b-2ypt9igbf7] {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}
.cal-hint[b-2ypt9igbf7] {
    font-size: 11px;
    color: rgba(231,236,255,0.5);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cal-glow[b-2ypt9igbf7] {
    position: absolute;
    width: 280px; height: 280px;
    right: -80px; top: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,157,201,0.4) 0%, transparent 70%);
    pointer-events: none;
    animation: glowFloat-b-2ypt9igbf7 8s ease-in-out infinite;
}
@keyframes glowFloat-b-2ypt9igbf7 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-30px, 20px); }
}

/* ----- PANEL (calendar grid drawer) ----- */
.cal-panel[b-2ypt9igbf7] {
    margin-top: 12px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.4s, margin-top 0.4s;
    pointer-events: none;
}
.cal-wrap.expanded .cal-panel[b-2ypt9igbf7] {
    max-height: 540px;
    opacity: 1;
    pointer-events: auto;
}
.cal-panel-inner[b-2ypt9igbf7] {
    padding: 22px;
    background: rgba(7, 10, 32, 0.55);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.cal-quick[b-2ypt9igbf7] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.cal-chip[b-2ypt9igbf7] {
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(231,236,255,0.85);
    font-size: 11px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.25s ease;
}
.cal-chip:hover[b-2ypt9igbf7] {
    background: rgba(0,157,201,0.18);
    border-color: rgba(0,157,201,0.5);
    color: #fff;
    transform: translateY(-1px);
}
.cal-chip.active[b-2ypt9igbf7] {
    background: linear-gradient(135deg, #009DC9, #000061);
    border-color: #009DC9;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,157,201,0.35);
}
.cal-chip:disabled[b-2ypt9igbf7] {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.cal-month-bar[b-2ypt9igbf7] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: 12px;
}
.cal-mbtn[b-2ypt9igbf7] {
    background: none;
    border: none;
    color: #009DC9;
    cursor: pointer;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.25s;
}
.cal-mbtn:hover[b-2ypt9igbf7] { background: rgba(0,157,201,0.15); }
.cal-month-name[b-2ypt9igbf7] {
    text-align: center;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.12em;
    font-weight: 500;
}

.cal-grid[b-2ypt9igbf7] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-dow[b-2ypt9igbf7] {
    text-align: center;
    color: rgba(231,236,255,0.4);
    font-size: 9px;
    letter-spacing: 0.18em;
    padding: 6px 0;
    text-transform: uppercase;
}
.cal-cell[b-2ypt9igbf7] {
    aspect-ratio: 1 / 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(231,236,255,0.85);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.cal-cell.empty[b-2ypt9igbf7] {
    background: transparent;
    cursor: default;
    pointer-events: none;
}
.cal-cell:not(.empty):hover[b-2ypt9igbf7] {
    background: rgba(0,157,201,0.18);
    border-color: rgba(0,157,201,0.5);
    transform: scale(1.05);
}
.cal-cell.weekend[b-2ypt9igbf7] {
    color: rgba(231,236,255,0.25);
    background: rgba(255,255,255,0.015);
}
.cal-cell.today[b-2ypt9igbf7]::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    background: #F7A506;
    border-radius: 50%;
}
.cal-cell.selected[b-2ypt9igbf7] {
    background: linear-gradient(135deg, #009DC9, #003B89);
    border-color: #009DC9;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,157,201,0.4);
}
.cal-cell.disabled[b-2ypt9igbf7] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 540px) {
    .cal-hero-day[b-2ypt9igbf7] { font-size: 64px; }
    .cal-hero-month[b-2ypt9igbf7] { font-size: 18px; }
    .cal-hero[b-2ypt9igbf7] { padding: 22px; }
}
/* /Components/Pages/Futures/Splash/_Shared/SplashShell.razor.rz.scp.css */
/* ================================================================
   SplashShell - dark glass theme
   - Scoped styles using ::deep so the look reaches inside child
     components on every Splash page.
   ================================================================ */

.splash-root[b-m3op71ghxp] {
    --ssy-navy:        #000061;
    --ssy-cyan:        #009DC9;
    --ssy-amber:       #F7A506;
    --splash-bg-0:     #050614;
    --splash-bg-1:     #0a0e29;
    --splash-bg-2:     #11163d;
    --splash-glass:    rgba(255, 255, 255, 0.04);
    --splash-glass-2:  rgba(255, 255, 255, 0.07);
    --splash-stroke:   rgba(255, 255, 255, 0.10);
    --splash-stroke-2: rgba(255, 255, 255, 0.18);
    --splash-text:     #e7ecff;
    --splash-text-dim: rgba(231, 236, 255, 0.65);
    --splash-text-faint: rgba(231, 236, 255, 0.4);
    --splash-up:       #4ddca5;
    --splash-down:     #ff6b8a;
    --splash-flat:     #b9c2de;

    position: relative;
    min-height: 100vh;
    width: 100%;
    color: var(--splash-text);
    background: linear-gradient(180deg,
        var(--splash-bg-0) 0%,
        var(--splash-bg-1) 35%,
        var(--splash-bg-2) 100%);
    font-family: 'Soehne', 'Inter', 'Segoe UI', system-ui, sans-serif;
    overflow-x: hidden;
}

/* ---------- background blobs / drifting glow ---------- */
[b-m3op71ghxp] .splash-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
[b-m3op71ghxp] .splash-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.55;
    mix-blend-mode: screen;
    animation: splashDrift-b-m3op71ghxp 28s ease-in-out infinite;
}
[b-m3op71ghxp] .splash-bg-blob-a {
    width: 620px; height: 620px;
    left: -10%; top: -15%;
    background: radial-gradient(circle, #009DC9 0%, transparent 70%);
}
[b-m3op71ghxp] .splash-bg-blob-b {
    width: 720px; height: 720px;
    right: -15%; top: 10%;
    background: radial-gradient(circle, #000061 0%, transparent 70%);
    animation-delay: -9s;
}
[b-m3op71ghxp] .splash-bg-blob-c {
    width: 540px; height: 540px;
    left: 30%; bottom: -20%;
    background: radial-gradient(circle, #F7A506 0%, transparent 75%);
    opacity: 0.32;
    animation-delay: -18s;
}
@keyframes splashDrift-b-m3op71ghxp {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.05); }
    66%      { transform: translate(-30px, 40px) scale(0.95); }
}
[b-m3op71ghxp] .splash-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,0.8), transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,0.8), transparent 75%);
}

/* ---------- top bar ---------- */
[b-m3op71ghxp] .splash-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    background: rgba(7, 10, 32, 0.55);
    border-bottom: 1px solid var(--splash-stroke);
}
[b-m3op71ghxp] .splash-topbar-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 14px 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
}

[b-m3op71ghxp] .splash-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
[b-m3op71ghxp] .splash-brand-mark {
    width: 28px;
    height: 28px;
    position: relative;
}
[b-m3op71ghxp] .splash-brand-mark-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ssy-cyan);
    box-shadow: 0 0 12px var(--ssy-cyan);
    animation: brandPulse-b-m3op71ghxp 2.4s ease-in-out infinite;
}
[b-m3op71ghxp] .splash-brand-mark-dot:nth-child(1) { left: 0; top: 0; }
[b-m3op71ghxp] .splash-brand-mark-dot:nth-child(2) { right: 0; top: 4px; background: var(--ssy-amber); box-shadow: 0 0 12px var(--ssy-amber); }
[b-m3op71ghxp] .splash-brand-mark-dot:nth-child(3) { left: 6px; bottom: 0; background: #fff; box-shadow: 0 0 10px #fff; }
[b-m3op71ghxp] .splash-brand-mark-dot.delay-1 { animation-delay: -0.8s; }
[b-m3op71ghxp] .splash-brand-mark-dot.delay-2 { animation-delay: -1.6s; }
@keyframes brandPulse-b-m3op71ghxp {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.7; }
}
[b-m3op71ghxp] .splash-brand-line-1 {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--splash-text);
    font-weight: 600;
}
[b-m3op71ghxp] .splash-brand-line-2 {
    font-size: 11px;
    color: var(--splash-text-dim);
    letter-spacing: 0.1em;
}

[b-m3op71ghxp] .splash-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
[b-m3op71ghxp] .splash-tab {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    color: var(--splash-text-dim);
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
    font-size: 13px;
    letter-spacing: 0.04em;
}
[b-m3op71ghxp] .splash-tab:hover {
    color: var(--splash-text);
    background: var(--splash-glass);
    transform: translateY(-1px);
}
[b-m3op71ghxp] .splash-tab.active {
    color: var(--splash-text);
    background: var(--splash-glass-2);
}
[b-m3op71ghxp] .splash-tab-num {
    font-size: 10px;
    color: var(--splash-text-faint);
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
}
[b-m3op71ghxp] .splash-tab.active .splash-tab-num { color: var(--ssy-cyan); }
[b-m3op71ghxp] .splash-tab-label { font-weight: 500; }
[b-m3op71ghxp] .splash-tab-underline {
    position: absolute;
    left: 16px; right: 16px;
    bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg, var(--ssy-cyan), var(--ssy-amber));
    border-radius: 2px;
    animation: underlineSlide-b-m3op71ghxp 0.5s ease both;
}
@keyframes underlineSlide-b-m3op71ghxp {
    from { transform: scaleX(0.2); opacity: 0; }
    to   { transform: scaleX(1);   opacity: 1; }
}

[b-m3op71ghxp] .splash-date-pill {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--splash-stroke-2);
    border-radius: 999px;
    background: var(--splash-glass);
    cursor: pointer;
    transition: all 0.25s ease;
    font-variant-numeric: tabular-nums;
}
[b-m3op71ghxp] .splash-date-pill:hover {
    border-color: var(--ssy-cyan);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,157,201,0.18);
}
[b-m3op71ghxp] .splash-date-pill-dow {
    font-size: 10px;
    color: var(--splash-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
[b-m3op71ghxp] .splash-date-pill-dm {
    font-size: 14px;
    font-weight: 600;
    color: var(--splash-text);
}
[b-m3op71ghxp] .splash-date-pill-y {
    font-size: 11px;
    color: var(--splash-text-dim);
}
[b-m3op71ghxp] .splash-date-pill-icon {
    color: var(--ssy-cyan);
    display: flex;
    align-items: center;
}

[b-m3op71ghxp] .splash-crumbs {
    max-width: 1600px;
    margin: 0 auto;
    padding: 8px 28px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--splash-text-dim);
}
[b-m3op71ghxp] .splash-crumb {
    color: var(--splash-text-dim);
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.05em;
}
[b-m3op71ghxp] .splash-crumb:hover { color: var(--ssy-cyan); }
[b-m3op71ghxp] .splash-crumb.current {
    color: var(--splash-text);
    font-weight: 500;
}
[b-m3op71ghxp] .splash-crumb-sep { color: var(--splash-text-faint); }

/* ---------- main content area ---------- */
[b-m3op71ghxp] .splash-main {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px 28px 80px;
}

/* ---------- footer ---------- */
[b-m3op71ghxp] .splash-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--splash-stroke);
    padding: 28px 28px 36px;
    color: var(--splash-text-faint);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-align: center;
}
[b-m3op71ghxp] .splash-footer-thin {
    color: var(--splash-text-faint);
    margin-top: 4px;
    font-style: italic;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    [b-m3op71ghxp] .splash-topbar-inner {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }
    [b-m3op71ghxp] .splash-tabs { flex-wrap: wrap; }
    [b-m3op71ghxp] .splash-brand { justify-content: center; }
    [b-m3op71ghxp] .splash-date-pill { justify-self: center; }
}

/* ===============================================================
   Re-usable building blocks - styles "leak" via ::deep so any
   page that uses .splash-card, .splash-pill, etc. picks them up
   without re-defining.
   =============================================================== */

[b-m3op71ghxp] .splash-card {
    position: relative;
    background: var(--splash-glass);
    border: 1px solid var(--splash-stroke);
    border-radius: 18px;
    padding: 22px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
}
[b-m3op71ghxp] .splash-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    opacity: 0.5;
}
[b-m3op71ghxp] .splash-card:hover {
    transform: translateY(-4px);
    border-color: var(--splash-stroke-2);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

[b-m3op71ghxp] .splash-card-glow:hover {
    border-color: rgba(0,157,201,0.5);
    box-shadow: 0 18px 60px rgba(0,157,201,0.2);
}

[b-m3op71ghxp] .splash-h1 {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.1;
}
[b-m3op71ghxp] .splash-h1 b { font-weight: 600; color: var(--ssy-cyan); }

[b-m3op71ghxp] .splash-h2 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--splash-text);
    margin: 0 0 4px;
}

[b-m3op71ghxp] .splash-h3 {
    font-size: 11px;
    color: var(--splash-text-faint);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin: 0 0 12px;
    font-weight: 500;
}

[b-m3op71ghxp] .splash-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--splash-stroke-2);
    border-radius: 999px;
    font-size: 10px;
    color: var(--splash-text-dim);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--splash-glass);
}
[b-m3op71ghxp] .splash-eyebrow .pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--splash-up);
    box-shadow: 0 0 8px var(--splash-up);
    animation: eyebrowPulse-b-m3op71ghxp 1.6s ease-in-out infinite;
}
@keyframes eyebrowPulse-b-m3op71ghxp {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.4); }
}

/* arrows / dod indicators */
[b-m3op71ghxp] .splash-dod {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
[b-m3op71ghxp] .splash-dod.up   { color: var(--splash-up); }
[b-m3op71ghxp] .splash-dod.down { color: var(--splash-down); }
[b-m3op71ghxp] .splash-dod.flat { color: var(--splash-flat); }
[b-m3op71ghxp] .splash-dod-arrow { font-size: 10px; }

/* generic reveal-on-mount */
[b-m3op71ghxp] .splash-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: splashReveal-b-m3op71ghxp 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}
[b-m3op71ghxp] .splash-reveal.delay-1 { animation-delay: 0.05s; }
[b-m3op71ghxp] .splash-reveal.delay-2 { animation-delay: 0.1s; }
[b-m3op71ghxp] .splash-reveal.delay-3 { animation-delay: 0.15s; }
[b-m3op71ghxp] .splash-reveal.delay-4 { animation-delay: 0.2s; }
[b-m3op71ghxp] .splash-reveal.delay-5 { animation-delay: 0.25s; }
[b-m3op71ghxp] .splash-reveal.delay-6 { animation-delay: 0.3s; }
@keyframes splashReveal-b-m3op71ghxp {
    to { opacity: 1; transform: translateY(0); }
}

/* loader skeleton bar */
[b-m3op71ghxp] .splash-skeleton {
    display: inline-block;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.13) 50%,
        rgba(255,255,255,0.05) 100%);
    background-size: 200% 100%;
    animation: splashShimmer-b-m3op71ghxp 1.6s linear infinite;
    border-radius: 4px;
    color: transparent !important;
}
@keyframes splashShimmer-b-m3op71ghxp {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* section heading helper */
[b-m3op71ghxp] .splash-section {
    margin-top: 48px;
}
[b-m3op71ghxp] .splash-section:first-child { margin-top: 0; }
/* /Components/Pages/Futures/TradeTracker/TradeTrackerOrderBook/TradeTrackerOrderBook.razor.rz.scp.css */
/* Order-book spin-off — page-scoped styles.
   ============================================
   Every selector descends from .tradetrackerorderbook-pagelayout so nothing
   leaks into the combined view or the trades-only spin-off. Brand colours come
   from the global ssy-* palette where possible; only the bits unique to this
   layout live here. */

.tradetrackerorderbook-pagelayout[b-bvow0u3cfs] {
    background-color: #0D0D1A;
    color: #e0e0e0;
    font-family: Verdana, sans-serif;
    padding: 8px 8px 16px;
}

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-header[b-bvow0u3cfs] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-title[b-bvow0u3cfs] {
        color: #6ab0e0;
        font-size: 1.4rem;
        font-weight: bold;
        margin: 0;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-actions[b-bvow0u3cfs] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-viewbtn[b-bvow0u3cfs] {
        font-size: 0.8rem;
        padding: 3px 10px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datebar[b-bvow0u3cfs] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 0;
        margin-bottom: 8px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datenav[b-bvow0u3cfs] {
        color: #6ab0e0;
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0 4px;
        user-select: none;
    }

        .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datenav:hover[b-bvow0u3cfs] {
            color: #ffffff;
        }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datetext[b-bvow0u3cfs] {
        color: #e0e0e0;
        font-size: 1rem;
        font-weight: bold;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-orderbookpanel[b-bvow0u3cfs] {
        min-height: 5rem;
        padding: 10px 8px;
        background-color: #1a1a2e;
        border: 1px solid #8888aa;
        border-radius: 10px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-tabrow[b-bvow0u3cfs] {
        display: grid;
        gap: 0;
        row-gap: 4px;
        grid-template-columns: repeat(6, 10rem);
        margin-bottom: 6px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-bookrow[b-bvow0u3cfs] {
        display: flex;
        gap: 10px;
        overflow: visible;
        font-size: 0.9rem;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-nodata[b-bvow0u3cfs] {
        color: #8888aa;
        font-size: 0.85rem;
        padding: 10px 4px;
    }

/* Mobile — stack the tab row into a wrapping flex strip and let the
   order-book tables wrap vertically. */
@media screen and (max-width: 700px) {
    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-tabrow[b-bvow0u3cfs] {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: none;
        gap: 4px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-bookrow[b-bvow0u3cfs] {
        flex-direction: column;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-actions[b-bvow0u3cfs] {
        width: 100%;
    }
}
/* /Components/Pages/Futures/TradeTracker/TradeTrackerTrades/TradeTrackerTrades.razor.rz.scp.css */
/* Trade-list spin-off — page-scoped styles.
   ============================================
   Every selector descends from .tradetrackertrades-pagelayout so nothing
   leaks into the combined view or the order-book spin-off. Brand colours
   come from the global ssy-* palette where possible; only the bits unique
   to this layout live here. */

.tradetrackertrades-pagelayout[b-n8lzrubxbx] {
    background-color: #0D0D1A;
    color: #e0e0e0;
    font-family: Verdana, sans-serif;
    padding: 8px 8px 16px;
}

    .tradetrackertrades-pagelayout .tradetrackertrades-header[b-n8lzrubxbx] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-title[b-n8lzrubxbx] {
        color: #6ab0e0;
        font-size: 1.4rem;
        font-weight: bold;
        margin: 0;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-actions[b-n8lzrubxbx] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-viewbtn[b-n8lzrubxbx] {
        font-size: 0.8rem;
        padding: 3px 10px;
    }

    /* Totals strip — single-row coloured chips, identical look to the
       combined view but scoped under the spin-off wrapper. */
    .tradetrackertrades-pagelayout .tradetrackertrades-totalsstrip[b-n8lzrubxbx] {
        display: flex;
        margin-top: 4px;
        font-size: 0.8rem;
        overflow: hidden;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalslabel[b-n8lzrubxbx] {
        background-color: #0D0D1A;
        color: #8888aa;
        padding: 2px 8px;
        display: flex;
        align-items: center;
        min-width: 4rem;
        border-right: 1px solid #2a2a45;
        font-size: 0.75rem;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalscol[b-n8lzrubxbx] {
        display: flex;
        flex-direction: column;
        border-right: 1px solid #2a2a45;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalscolname[b-n8lzrubxbx] {
        background-color: #1d263b;
        color: #6ab0e0;
        text-align: right;
        padding: 2px 8px 0 8px;
        font-size: 0.75rem;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalscolval[b-n8lzrubxbx] {
        background-color: #1a1a2e;
        color: white;
        text-align: right;
        padding: 0 8px 2px 8px;
        font-weight: bold;
    }

    /* Date + filter row. */
    .tradetrackertrades-pagelayout .tradetrackertrades-datebar[b-n8lzrubxbx] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        margin-top: 8px;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-datenav[b-n8lzrubxbx] {
        color: #6ab0e0;
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0 4px;
        user-select: none;
    }

        .tradetrackertrades-pagelayout .tradetrackertrades-datenav:hover[b-n8lzrubxbx] {
            color: #ffffff;
        }

    .tradetrackertrades-pagelayout .tradetrackertrades-datetext[b-n8lzrubxbx] {
        color: #e0e0e0;
        font-size: 1rem;
        font-weight: bold;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-filterinput[b-n8lzrubxbx] {
        background-color: #1d263b;
        border: 1px solid #3a3a5c;
        border-radius: 3px;
        color: #e0e0e0;
        font-size: 0.85rem;
        padding: 3px 6px;
        flex: 1 1 auto;
        max-width: 30rem;
    }

        .tradetrackertrades-pagelayout .tradetrackertrades-filterinput[b-n8lzrubxbx]::placeholder {
            color: #555577;
        }

        .tradetrackertrades-pagelayout .tradetrackertrades-filterinput:focus[b-n8lzrubxbx] {
            outline: none;
            border-color: #6ab0e0;
        }

    .tradetrackertrades-pagelayout .tradetrackertrades-hint[b-n8lzrubxbx] {
        color: #8888aa;
        font-size: 0.75rem;
        margin: 2px 0 6px;
    }

    /* Trade table & summary use the global .tt-table / .tt-tradetable-row /
       .tt-expand-row styles from the combined page's inline <style>, so we
       only add the spin-off wrapper here. table-layout:fixed on a thin
       window keeps the columns scaling with the wrapper rather than
       expanding to their content. */
    .tradetrackertrades-pagelayout .tradetrackertrades-table[b-n8lzrubxbx] {
        width: 100%;
        max-width: 60rem;
        min-width: 0;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-summarywrap[b-n8lzrubxbx] {
        margin-top: 12px;
        background-color: #14142d;
        width: fit-content;
    }

/* Mobile — collapse the date bar and let the totals strip wrap so the page
   works docked in a narrow window or on a phone. */
@media screen and (max-width: 700px) {
    .tradetrackertrades-pagelayout .tradetrackertrades-totalsstrip[b-n8lzrubxbx] {
        flex-wrap: wrap;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-datebar[b-n8lzrubxbx] {
        flex-wrap: wrap;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-filterinput[b-n8lzrubxbx] {
        max-width: 100%;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-actions[b-n8lzrubxbx] {
        width: 100%;
    }
}
/* /Components/Pages/Futures/TradeTracker/TradeTracker_010_main.razor.rz.scp.css */


/* ── In-row panel layout ───────────────────────────────────────────────
   Each row of order-book panels is a horizontal flex strip; rows stack.
   The trade-list / trade-summary panels sit inside a row but should only
   take the height of the order-book panels beside them and scroll their
   own content. align-self:stretch gives the wrapper the row's height; the
   child component is absolutely filled inside it and scrolls vertically. */
.tt-panelrow[b-sevv83xiiy] {
    margin-bottom: 10px;
}

/* Porthole button — a round "window" that jumps between the 010 and 020 pages.
   Deliberately reads as a portal/porthole (metal rim + glowing glass), not a link. */
.tt-porthole[b-sevv83xiiy] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid #6ab0e0;
    background: radial-gradient(circle at 32% 28%, #34618c 0%, #16263d 55%, #0a1422 100%);
    color: #d6ecff;
    font-family: Verdana, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 7px rgba(0, 226, 253, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.7);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

    .tt-porthole:hover[b-sevv83xiiy] {
        color: #ffffff;
        transform: scale(1.06);
        box-shadow: 0 0 14px rgba(0, 226, 253, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.7);
    }

    .tt-porthole:active[b-sevv83xiiy] {
        transform: scale(0.97);
    }

.tt-inline-panel[b-sevv83xiiy] {
    position: relative;
    align-self: stretch;
    /* A definite floor so a row made up ENTIRELY of inline panels (e.g. closed/open/cancelled)
       doesn't collapse to a single line — there is no order-book sibling to stretch against.
       When there IS a taller sibling, align-self:stretch still grows the panel to match it. */
    min-height: 22rem;
    width: 34rem;
    border: 1px solid #8888aa;
    border-radius: 6px;
    overflow: hidden;
    background: #14142d;
}

    /* Per-type widths. Order lists are wide tables (~45.5em) so they get more room to avoid a
       horizontal scrollbar; the trade summary is widened by ~1 scrollbar width for the same reason. */
    .tt-inline-panel.tt-inline-panel--list[b-sevv83xiiy] {
        width: 48.5rem;
    }

    .tt-inline-panel.tt-inline-panel--summary[b-sevv83xiiy] {
        width: 31rem;
    }

    /* Fixed title bar so you can tell open / closed / cancelled etc. apart. */
    .tt-inline-panel .tt-inline-title[b-sevv83xiiy] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1.5rem;
        line-height: 1.5rem;
        padding: 0 8px;
        font-family: Verdana, sans-serif;
        font-size: 0.8rem;
        font-weight: 700;
        color: #fff;
        background: #1a1a2e;
        border-bottom: 1px solid #8888aa;
        z-index: 1;
    }

    /* Scrolls vertically only; horizontal is hidden so the 3 order lists never show a
       horizontal scrollbar (the panel is sized wide enough to fit instead). */
    .tt-inline-panel .tt-inline-scroll[b-sevv83xiiy] {
        position: absolute;
        top: 1.5rem;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px;
    }

.date-select-simple-arrows[b-sevv83xiiy] {
    font-size: 20px;
    width: 30px;
}

.dateChanger-date[b-sevv83xiiy] {
    font-size: 16px;
    width: 160px;
    display: inline-block;
    text-align: center;
}

.date-select-simple-arrows.disable[b-sevv83xiiy] {
    color: lightgray;
}

    .date-select-simple-arrows.disable:hover[b-sevv83xiiy] {
        color: lightgray;
        cursor: default;
        font-weight: normal;
    }

.arrow[b-sevv83xiiy] {
    height: 20px;
}

    .arrow.switch-arrow[b-sevv83xiiy] {
        transform: rotate(180deg);
    }

.tooltip-box[b-sevv83xiiy] {
    position: fixed;
    padding: 10px;
    background-color: #2a2a45;
    border: 1px solid #3a3a5c;
    border-radius: 5px;
    color: #e0e0e0;
}


.filtertextbox[b-sevv83xiiy] {
    width: 300px;
    padding-right: 4px;
    margin-left: 5%;
    margin-top: 0%;
}


.ssythemefilter[b-sevv83xiiy] {
    background-color: #1d263b;
    border-color: #3a3a5c;
    color: #e0e0e0;
}


.tt-tradetable-row[b-sevv83xiiy] {
    cursor: pointer;
    height: 1.5rem;
}

.tt-tradetable-div[b-sevv83xiiy] {
    flex-basis: content;
    flex-shrink: 1;
    width: 100%;
    /* Stop the left panel from taking the whole viewport on wide screens —
       50rem is wide enough to fit the trade table comfortably while leaving
       room for the order-book / summary on the right. The split-divider div
       lives directly after this element so the right panel still fills the
       rest of the row. */
    max-width: 50rem;
    /* Default flex items have min-width:auto which equals the intrinsic
       content width — for a wide table that means the wrapper refuses to
       shrink. min-width:0 lets the wrapper honour its max-width / parent
       constraints, and overflow-x:auto adds a scrollbar inside the wrapper
       when the table's own column min-widths still exceed the wrapper. The
       table bleeding under the right-hand panel was the symptom of both
       missing. */
    min-width: 0;
    overflow-x: auto;
}

/* ── Split divider between the trade list (left) and the order-book / summary
   (right). Width matches the previous flex gap of 10px so the layout doesn't
   shift when the user toggles the panel. */
.tt-split-divider[b-sevv83xiiy] {
    width: 10px;
    flex-shrink: 0;
    border-left: 1px solid #2a2a45;
    border-right: 1px solid #2a2a45;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: background-color 120ms ease, width 120ms ease;
}

    .tt-split-divider:hover[b-sevv83xiiy] {
        background-color: #1d263b;
    }


    /* When the left panel is hidden, give the divider a touch more presence so
   it remains easy to find. The chevron flips direction via the data-state attr. */
    .tt-split-divider[data-state="collapsed"][b-sevv83xiiy] {
        width: 14px;
        background-color: #1d263b;
    }

/* Split-screen button — sits inline with the Premium / Clearer controls. */
.tt-split-screen-btn[b-sevv83xiiy] {
    background-color: #1d263b;
    border: 1px solid #3a3a5c;
    border-radius: 3px;
    color: #6ab0e0;
    font-family: Verdana, sans-serif;
    font-size: 0.8rem;
    padding: 2px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .tt-split-screen-btn:hover[b-sevv83xiiy] {
        background-color: #2a2a45;
        color: #ffffff;
    }

/* Let the table follow its wrapper rather than sit at a fixed 650px.
   The colgroup min-widths in the markup still keep columns readable; the
   wrapper's overflow-x picks up the slack when the wrapper goes really
   narrow (e.g. the user dragging the split divider in tight). */
.tt-tradetable[b-sevv83xiiy] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Per-column filter row below the headers — slightly indented inputs so they
   read as a sub-row of the table header. */
.tt-filter-row[b-sevv83xiiy] {
    background-color: #1a1a2e;
}

    .tt-filter-row th[b-sevv83xiiy] {
        padding: 2px 4px;
    }



.tt-page-right-tab[b-sevv83xiiy] {
    overflow: visible;
    width: calc(100vw - 685px);
}

.numcol[b-sevv83xiiy] {
    text-align: right;
}

.centercol[b-sevv83xiiy] {
    text-align: center;
}

.lightUnderscore[b-sevv83xiiy] {
    text-decoration: underline;
    -webkit-text-decoration-color: silver; /* safari still uses vendor prefix */
    text-decoration-color: silver;
}

.stattable-routename[b-sevv83xiiy] {
    border-top: solid 1px #2a2a45;
    border-bottom: solid 1px #2a2a45;
    background-color: #14142d;
    font-weight: bold;
    color: #6ab0e0;
}

.stattable-detail[b-sevv83xiiy] {
    background-color: transparent;
}

    .stattable-detail:hover[b-sevv83xiiy] {
        background-color: #2a2a45;
    }

.tradesummarylogo[b-sevv83xiiy] {
    background-image: url("/assets/lines/SSYShippingLines_01_stretchable.svg");
    background-size: 100% 200%;
    /*background-position-y: -10px;*/
}



.pulsenewtrade[b-sevv83xiiy] {
    animation-name: pulseNewTradeSettings-b-sevv83xiiy;
    animation-duration: 700ms;
    animation-iteration-count: 40;
    animation-timing-function: linear;
    color: #FFE68C;
    /*color: #FFE892;*/
    text-shadow: 0 0 15px #ffb300;
}

@keyframes pulseNewTradeSettings-b-sevv83xiiy {

    0% {
        text-shadow: 0 0 15px #ffb300;
    }

    50% {
        text-shadow: 0 0 2px #ffff00; /*0 0 4px #fff700, 0 0 8px #ffea00, 0 0 14px #ffd000, 0 0 40px #ffb300;*/
    }

    100% {
        text-shadow: 0 0 15px #ffff00;
    }
}

@media screen and (max-width: 1400px) {
    .tt-tradetable[b-sevv83xiiy] {
        width: 100%;
    }

    .tt-page-right-tab[b-sevv83xiiy] {
        width: calc(100vw - 485px);
    }
}


@media screen and (max-width: 600px) {
    .hide-mobile[b-sevv83xiiy] {
        display: none;
    }

    .flex-mobile-wrap[b-sevv83xiiy] {
        flex-wrap: wrap;
    }

    .tt-tradetable[b-sevv83xiiy] {
        width: 100%;
    }

    .tt-tradetable-div[b-sevv83xiiy] {
        flex-basis: unset;
        flex-shrink: 1;
        width: 100%;
        /* Reset the desktop cap on mobile — the panels stack so the trade
           table should be free to use the full viewport width. */
        max-width: none;
    }

    /* The vertical divider doesn't make sense on a stacked mobile layout,
       so hide it. The split-screen button still works (and is the better
       affordance on a phone anyway). */
    .tt-split-divider[b-sevv83xiiy] {
        display: none;
    }

    .date-select-simple .date-arrows[b-sevv83xiiy] {
        padding: 0 8px 0 8px;
    }

    .tt-page-right-tab[b-sevv83xiiy] {
        width: 100%;
    }
}
/* /Components/Pages/Futures/TradeTracker/TradeTracker_100_OrderBook.razor.rz.scp.css */
/* /Components/Pages/Futures/TradeTracker/TradeTracker_200_TradeEditPopup.razor.rz.scp.css */
/* ── TradeTracker_200_TradeEditPopup scoped styles ──────── */

.tt-tradeedit-form[b-5wdpdtdsuh] {
    font-family: Verdana, sans-serif;
    font-size: 0.88rem;
    color: #e0e0e0;
    padding: 4px 0;
}

.tt-tradeedit-subheader[b-5wdpdtdsuh] {
    color: #8888aa;
    font-size: 0.78rem;
    margin: 0 0 12px 0;
}

/* Label + input side-by-side row */
.tt-tradeedit-row[b-5wdpdtdsuh] {
    display: grid;
    grid-template-columns: 8rem 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.tt-tradeedit-label[b-5wdpdtdsuh] {
    color: #8888aa;
    font-size: 0.82rem;
    text-align: right;
    white-space: nowrap;
}

/* Make all controlled inputs fill their grid cell */
.tt-tradeedit-field[b-5wdpdtdsuh] {
    width: 100%;
    box-sizing: border-box;
}

/* Validation error */
.tt-tradeedit-error[b-5wdpdtdsuh] {
    color: #ff6666;
    font-size: 0.8rem;
    margin: 4px 0 8px 8.5rem; /* align under the input column */
}

/* Delete confirmation strip */
.tt-tradeedit-deleteconfirm[b-5wdpdtdsuh] {
    background-color: #2a1010;
    border: 1px solid #c0392b;
    border-radius: 4px;
    padding: 10px 12px;
    margin: 8px 0;
    font-size: 0.85rem;
    color: #ff9999;
}

/* Button row */
.tt-tradeedit-buttons[b-5wdpdtdsuh] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* Delete trigger button — danger-coloured outline */
.tt-tradeedit-deletetrigger[b-5wdpdtdsuh] {
    color: #ff8888 !important;
    border-color: #c0392b !important;
}

    .tt-tradeedit-deletetrigger:hover[b-5wdpdtdsuh] {
        background-color: #3a1010 !important;
    }

/* Delete confirm action button */
.tt-tradeedit-deletebtn[b-5wdpdtdsuh] {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
}

    .tt-tradeedit-deletebtn:hover[b-5wdpdtdsuh] {
        background-color: #a93226 !important;
    }
/* /Components/Pages/Futures/TradeTracker/TradeTracker_210_ImpliedExecutePopup.razor.rz.scp.css */
.tradetracker-impliedexec[b-75x0yvyku8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 0.9rem;
}

    /* ── Derivation strip: SPREAD + OUTRIGHT ⇒ IMPLIED ───────────────────────── */
    .tradetracker-impliedexec .impliedexec-derivation[b-75x0yvyku8] {
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .tradetracker-impliedexec .impliedexec-card[b-75x0yvyku8] {
        flex: 1;
        border: 1px solid #c8c8d4;
        border-radius: 6px;
        /* No top padding — the tag below acts as a _150-style header strip that bleeds to the edges. */
        padding: 0 0 8px 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: #fff;
        overflow: hidden;
    }

    /* The two source orders are interactive — make that obvious. */
    .tradetracker-impliedexec .impliedexec-card-source[b-75x0yvyku8] {
        cursor: pointer;
    }

        .tradetracker-impliedexec .impliedexec-card-source:hover[b-75x0yvyku8] {
            border-color: #009DC9;
            box-shadow: 0 0 0 2px #009DC933;
        }

    /* The derived result, accented in the implied colour. */
    .tradetracker-impliedexec .impliedexec-card-implied[b-75x0yvyku8] {
        border-color: #009DC9;
        border-width: 2px;
        background: #009DC90D;
    }

    .tradetracker-impliedexec .impliedexec-card-client[b-75x0yvyku8] {
        font-weight: 700;
        font-size: 1rem;
    }

    .tradetracker-impliedexec .impliedexec-card-contract[b-75x0yvyku8] {
        color: #444;
    }

    .tradetracker-impliedexec .impliedexec-card-price[b-75x0yvyku8] {
        font-size: 1.15rem;
        font-weight: 700;
        margin-top: 2px;
    }

        .tradetracker-impliedexec .impliedexec-card-price span[b-75x0yvyku8] {
            font-size: 0.72rem;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 3px;
            margin-right: 6px;
            vertical-align: middle;
        }

    .tradetracker-impliedexec .impliedexec-bid[b-75x0yvyku8] {
        background: #1f7a33;
        color: #fff;
    }

    .tradetracker-impliedexec .impliedexec-offer[b-75x0yvyku8] {
        background: #b03030;
        color: #fff;
    }

    .tradetracker-impliedexec .impliedexec-card-edit[b-75x0yvyku8] {
        margin-top: 4px;
        font-size: 0.72rem;
        color: #009DC9;
    }

    /* The + and ⇒ operators between cards. */
    .tradetracker-impliedexec .impliedexec-op[b-75x0yvyku8] {
        display: flex;
        align-items: center;
        font-size: 1.4rem;
        color: #6a6a82;
        padding: 0 2px;
    }

    /* ── Per-leg completion (each leg is an order-book entry via an embedded _150) ──
   No outer border / vertical padding: the _151 form already has its own framed look,
   so the wrapper just reserves horizontal room and a tight gap between legs. Dropping
   the grey border and the top/bottom padding reclaims the vertical space the popup
   needed (it was a touch too tall for the screen). */
    .tradetracker-impliedexec .impliedexec-completelegs[b-75x0yvyku8] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tradetracker-impliedexec .impliedexec-completeleg[b-75x0yvyku8] {
        padding: 0 10px;
        border-radius: 6px;
    }

        /* Blue glow on the leg whose derivation card was clicked — shows the cursor has jumped here. */
        .tradetracker-impliedexec .impliedexec-completeleg.impliedexec-leg-focus[b-75x0yvyku8] {
            box-shadow: 0 0 0 3px #00E2FD, 0 0 8px 2px #00E2FD99;
            background-color: #00E2FD;
        }

    .tradetracker-impliedexec .impliedexec-leg-title[b-75x0yvyku8] {
        font-weight: 700;
        margin-bottom: 6px;
    }

    .tradetracker-impliedexec .impliedexec-done[b-75x0yvyku8] {
        margin-left: 8px;
        color: #1f7a33;
        font-weight: 700;
    }

    .tradetracker-impliedexec .impliedexec-error[b-75x0yvyku8] {
        color: #c0392b;
        font-weight: 600;
    }
/* /Components/Pages/Futures/TradeTracker/TradeTracker_220_ImpliedSpreadExecutePopup.razor.rz.scp.css */
/* Scoped styles for the implied-SPREAD execution popup. Mirrors TradeTracker_210's look — Blazor
   scoped CSS can't be shared between two components, so the visual language is duplicated here so
   both execution popups read identically. */

.tradetracker-impliedexec[b-k80pr57335] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 0.9rem;
}

    /* ── Derivation strip: OUTRIGHT − OUTRIGHT ⇒ SPREAD ──────────────────────── */
    .tradetracker-impliedexec .impliedexec-derivation[b-k80pr57335] {
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .tradetracker-impliedexec .impliedexec-card[b-k80pr57335] {
        flex: 1;
        border: 1px solid #c8c8d4;
        border-radius: 6px;
        /* No top padding — the tag below acts as a _150-style header strip that bleeds to the edges. */
        padding: 0 0 8px 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: #fff;
        overflow: hidden;
    }

    .tradetracker-impliedexec .impliedexec-card-source[b-k80pr57335] {
        cursor: default;
    }

    /* The derived result, accented in the implied colour. */
    .tradetracker-impliedexec .impliedexec-card-implied[b-k80pr57335] {
        border-color: #009DC9;
        border-width: 2px;
        background: #009DC90D;
    }

    .tradetracker-impliedexec .impliedexec-card-client[b-k80pr57335] {
        font-weight: 700;
        font-size: 1rem;
    }

    .tradetracker-impliedexec .impliedexec-card-contract[b-k80pr57335] {
        color: #444;
    }

    .tradetracker-impliedexec .impliedexec-card-price[b-k80pr57335] {
        font-size: 1.15rem;
        font-weight: 700;
        margin-top: 2px;
    }

        .tradetracker-impliedexec .impliedexec-card-price span[b-k80pr57335] {
            font-size: 0.72rem;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 3px;
            margin-right: 6px;
            vertical-align: middle;
        }

    .tradetracker-impliedexec .impliedexec-bid[b-k80pr57335] {
        background: #1f7a33;
        color: #fff;
    }

    .tradetracker-impliedexec .impliedexec-offer[b-k80pr57335] {
        background: #b03030;
        color: #fff;
    }

    /* The − and ⇒ operators between cards. */
    .tradetracker-impliedexec .impliedexec-op[b-k80pr57335] {
        display: flex;
        align-items: center;
        font-size: 1.4rem;
        color: #6a6a82;
        padding: 0 2px;
    }

    /* ── Per-leg completion (each leg is an order-book entry via an embedded _151) ── */
    .tradetracker-impliedexec .impliedexec-completelegs[b-k80pr57335] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tradetracker-impliedexec .impliedexec-completeleg[b-k80pr57335] {
        padding: 0 10px;
        border-radius: 6px;
    }

    .tradetracker-impliedexec .impliedexec-leg-title[b-k80pr57335] {
        font-weight: 700;
        margin-bottom: 6px;
    }

    .tradetracker-impliedexec .impliedexec-done[b-k80pr57335] {
        margin-left: 8px;
        color: #1f7a33;
        font-weight: 700;
    }

    .tradetracker-impliedexec .impliedexec-error[b-k80pr57335] {
        color: #c0392b;
        font-weight: 600;
    }
/* /Components/Pages/Futures/TradeTracker/TradeTracker_800_Reports.razor.rz.scp.css */
.tradetracker-reports-pagelayout[b-eoboxl8g0x] {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 60px);
    background-color: #0D0D1A;
    color: #e0e0e0;
    font-family: Verdana, sans-serif;
}

/* Thin always-visible rail down the left edge — the click target that opens the report list. */
.tradetracker-reports-pagelayout .reports-rail[b-eoboxl8g0x] {
    flex: 0 0 26px;
    background-color: #14142d;
    border: none;
    border-right: 1px solid #2a2a45;
    color: #6ab0e0;
    cursor: pointer;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

    .tradetracker-reports-pagelayout .reports-rail:hover[b-eoboxl8g0x],
    .tradetracker-reports-pagelayout .reports-rail.open[b-eoboxl8g0x] {
        background-color: #1d263b;
        color: #ffffff;
    }

.tradetracker-reports-pagelayout .reports-rail-label[b-eoboxl8g0x] {
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    font-size: 0.7rem;
}

/* Flyout list of available reports. */
.tradetracker-reports-pagelayout .reports-menu[b-eoboxl8g0x] {
    flex: 0 0 230px;
    background-color: #14142d;
    border-right: 1px solid #2a2a45;
    padding: 10px 0;
}

.tradetracker-reports-pagelayout .reports-menu-title[b-eoboxl8g0x] {
    color: #8888aa;
    font-size: 0.7rem;
    letter-spacing: 2px;
    padding: 0 12px 8px 12px;
}

.tradetracker-reports-pagelayout .reports-menu-item[b-eoboxl8g0x] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: #e0e0e0;
    cursor: pointer;
    padding: 6px 12px;
}

    .tradetracker-reports-pagelayout .reports-menu-item:hover[b-eoboxl8g0x] {
        background-color: #1d263b;
    }

    .tradetracker-reports-pagelayout .reports-menu-item.selected[b-eoboxl8g0x] {
        border-left-color: #6ab0e0;
        background-color: #1a1a2e;
    }

.tradetracker-reports-pagelayout .reports-menu-item-name[b-eoboxl8g0x] {
    display: block;
    color: #6ab0e0;
    font-size: 0.85rem;
}

.tradetracker-reports-pagelayout .reports-menu-item-desc[b-eoboxl8g0x] {
    display: block;
    color: #8888aa;
    font-size: 0.7rem;
}

.tradetracker-reports-pagelayout .reports-body[b-eoboxl8g0x] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    overflow-x: auto;
}

.tradetracker-reports-pagelayout .reports-empty[b-eoboxl8g0x] {
    color: #8888aa;
    font-size: 0.85rem;
    padding: 20px;
}
/* /Components/Pages/Futures/TradeTracker/TradeTracker_805_ClientSummary.razor.rz.scp.css */
.tradetracker-clientsummary[b-t9m10bgqjb] {
    font-family: Verdana, sans-serif;
    font-size: 0.8rem;
    color: #e0e0e0;
}

/* ── Toolbar ───────────────────────────────────────────── */
.tradetracker-clientsummary .cs-toolbar[b-t9m10bgqjb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding-bottom: 10px;
}

.tradetracker-clientsummary .cs-title[b-t9m10bgqjb] {
    color: #6ab0e0;
    font-size: 1.1rem;
    font-weight: bold;
}

.tradetracker-clientsummary .cs-datepicker[b-t9m10bgqjb] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tradetracker-clientsummary .cs-date-nav[b-t9m10bgqjb] {
    background: none;
    border: none;
    color: #6ab0e0;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 2px;
}

    .tradetracker-clientsummary .cs-date-nav:disabled[b-t9m10bgqjb] {
        color: #3a3a5c;
        cursor: default;
    }

.tradetracker-clientsummary .cs-date-select[b-t9m10bgqjb] {
    background-color: #1d263b;
    border: 1px solid #3a3a5c;
    border-radius: 3px;
    color: #e0e0e0;
    font-family: Verdana, sans-serif;
    font-size: 0.8rem;
    min-width: 12rem;
    padding: 3px 6px;
}

.tradetracker-clientsummary .cs-lots-toggle[b-t9m10bgqjb] {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #8888aa;
}

.tradetracker-clientsummary .cs-totals[b-t9m10bgqjb] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.tradetracker-clientsummary .cs-totals-label[b-t9m10bgqjb] {
    color: #8888aa;
    font-size: 0.7rem;
}

.tradetracker-clientsummary .cs-totals-val[b-t9m10bgqjb] {
    color: #ffffff;
    font-weight: bold;
    padding-right: 10px;
}

.tradetracker-clientsummary .cs-copy-msg[b-t9m10bgqjb] {
    color: #01A39E;
}

.tradetracker-clientsummary .cs-empty[b-t9m10bgqjb] {
    color: #8888aa;
    padding: 20px 0;
}

.tradetracker-clientsummary .cs-section-title[b-t9m10bgqjb] {
    color: #6ab0e0;
    font-size: 0.9rem;
    font-weight: bold;
    margin: 22px 0 6px 0;
    border-bottom: 1px solid #2a2a45;
    padding-bottom: 3px;
}

/* Section title with a control parked on the right of the same rule. */
.tradetracker-clientsummary .cs-section-head[b-t9m10bgqjb] {
    align-items: baseline;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.tradetracker-clientsummary .cs-totals-toggle[b-t9m10bgqjb] {
    align-items: center;
    color: #8888aa;
    cursor: pointer;
    display: flex;
    font-weight: normal;
    gap: 5px;
}

/* ── Shared table look, matching the Trade Tracker pages ─ */
.tradetracker-clientsummary .cs-table[b-t9m10bgqjb] {
    background-color: #14142d;
    border: 1px solid #2a2a45;
    border-collapse: collapse;
    color: #ffffff;
}

    .tradetracker-clientsummary .cs-table thead tr[b-t9m10bgqjb] {
        background-color: #14142d;
        border-bottom: 1px solid #2a2a45;
        color: #8888aa;
    }

    .tradetracker-clientsummary .cs-table th[b-t9m10bgqjb] {
        font-weight: normal;
        white-space: nowrap;
    }

.tradetracker-clientsummary .cs-left[b-t9m10bgqjb] {
    text-align: left;
}

.tradetracker-clientsummary .cs-num[b-t9m10bgqjb] {
    text-align: right;
}

/* ── Route columns ─────────────────────────────────────── */
.tradetracker-clientsummary .cs-flow-row[b-t9m10bgqjb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}

.tradetracker-clientsummary .cs-flow-col[b-t9m10bgqjb] {
    flex: 0 0 auto;
    max-width: 30rem;
}

.tradetracker-clientsummary .cs-flow-head[b-t9m10bgqjb] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 4px;
}

.tradetracker-clientsummary .cs-copy-btn[b-t9m10bgqjb] {
    background-color: #1d263b;
    border: 1px solid #3a3a5c;
    border-radius: 3px;
    color: #6ab0e0;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 8px;
}

    .tradetracker-clientsummary .cs-copy-btn:hover[b-t9m10bgqjb] {
        border-color: #6ab0e0;
        color: #ffffff;
    }

.tradetracker-clientsummary .cs-flow-title[b-t9m10bgqjb] {
    color: #6ab0e0;
    font-weight: bold;
}

.tradetracker-clientsummary .cs-flow-title-plain[b-t9m10bgqjb] {
    display: block;
    padding-bottom: 4px;
}

.tradetracker-clientsummary .cs-flow-table[b-t9m10bgqjb] {
    width: 100%;
}

.tradetracker-clientsummary .cs-period-name[b-t9m10bgqjb] {
    color: #6ab0e0;
    font-weight: bold;
    padding: 6px 6px 0 6px;
    width: 5rem;
}

.tradetracker-clientsummary .cs-period-range[b-t9m10bgqjb] {
    color: #8888aa;
    padding: 6px 6px 0 6px;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-period-lots[b-t9m10bgqjb] {
    color: #ffffff;
    font-weight: bold;
    padding: 6px 6px 0 6px;
    text-align: right;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-side-label[b-t9m10bgqjb] {
    color: #8888aa;
    padding: 0 6px;
    vertical-align: top;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-side-names[b-t9m10bgqjb] {
    padding: 0 6px;
    word-break: break-word;
}

.tradetracker-clientsummary .cs-period-last td[b-t9m10bgqjb] {
    border-bottom: 1px solid #2a2a45;
    padding-bottom: 6px;
}

.tradetracker-clientsummary .cs-lots[b-t9m10bgqjb] {
    color: #8888aa;
    font-size: 0.7rem;
}

/* ── Buy / sell table ──────────────────────────────────── */
.tradetracker-clientsummary .cs-bs-table[b-t9m10bgqjb] {
    min-width: 16rem;
}

    .tradetracker-clientsummary .cs-bs-table td[b-t9m10bgqjb],
    .tradetracker-clientsummary .cs-bs-table th[b-t9m10bgqjb] {
        padding: 1px 8px;
    }

/* ── Five day matrix ───────────────────────────────────── */
.tradetracker-clientsummary .cs-matrix-table td[b-t9m10bgqjb],
.tradetracker-clientsummary .cs-matrix-table th[b-t9m10bgqjb] {
    padding: 1px 10px;
}

.tradetracker-clientsummary .cs-matrix-name[b-t9m10bgqjb] {
    color: #6ab0e0;
    vertical-align: middle;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-matrix-side[b-t9m10bgqjb] {
    color: #8888aa;
    font-size: 0.7rem;
}

.tradetracker-clientsummary .cs-matrix-total td[b-t9m10bgqjb] {
    font-weight: bold;
}

/* Whichever row ends a client block carries the rule under it. */
.tradetracker-clientsummary .cs-matrix-lastrow td[b-t9m10bgqjb] {
    border-bottom: 1px solid #2a2a45;
}

/* The 5px breather the desk asked for between clients. */
.tradetracker-clientsummary .cs-matrix-gap td[b-t9m10bgqjb] {
    border: none;
    height: 5px;
    padding: 0;
}
/* /Components/Pages/Futures/TradeTracker/TradeTracker_915_LayoutEditor.razor.rz.scp.css */
/*  Editor for the order-book tab layout. Everything is scoped under
    .tradetracker-layouteditor so it can't bleed into other pages — see
    CLAUDE.md rule 4. We don't restyle the popup chrome (that belongs to
    _190); we only style elements unique to this editor.                 */

.tradetracker-layouteditor[b-ikddds0z8t] {
    color: #e0e0e0;
    font-size: 0.85rem;
}

    /* One row of panels inside the edited tab. */
    .tradetracker-layouteditor .le-row-block[b-ikddds0z8t] {
        border: 1px solid #2a2a44;
        border-radius: 6px;
        padding: 8px;
        margin-bottom: 10px;
        background: #0f0f1e;
    }

    .tradetracker-layouteditor .le-row-header[b-ikddds0z8t] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
    }

    .tradetracker-layouteditor .le-row-label[b-ikddds0z8t] {
        color: #8888aa;
        font-weight: 600;
    }

    .tradetracker-layouteditor .le-addrow-btn[b-ikddds0z8t] {
        margin-top: 4px;
    }

    .tradetracker-layouteditor .le-intro[b-ikddds0z8t] {
        color: #bbb;
        font-size: 0.75rem;
        margin: 0 0 12px;
    }

    .tradetracker-layouteditor .le-section-label[b-ikddds0z8t] {
        color: #8888aa;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 12px 0 6px;
    }

    /* ── Tab strip ──────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-tabstrip[b-ikddds0z8t] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        padding: 8px;
        background: #0a0a14;
        border: 1px solid #2a2a44;
        border-radius: 6px;
        margin-bottom: 18px;
    }

    .tradetracker-layouteditor .le-tabchip[b-ikddds0z8t] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        background: #1a1a2e;
        border: 1px solid #8888aa;
        border-radius: 4px;
        cursor: grab;
        user-select: none;
    }

        .tradetracker-layouteditor .le-tabchip:hover[b-ikddds0z8t] {
            background: #20203a;
        }

    .tradetracker-layouteditor .le-tabchip-selected[b-ikddds0z8t] {
        background: #26264a;
        border-color: #00E2FD;
        box-shadow: 0 0 0 1px #00E2FD inset;
        color: #fff;
    }

    .tradetracker-layouteditor .le-tabchip-add[b-ikddds0z8t] {
        background: transparent;
        border: 1px dashed #00E2FD;
        color: #00E2FD;
        cursor: pointer;
    }

    .tradetracker-layouteditor .le-tabchip-label[b-ikddds0z8t] {
        font-weight: 500;
    }

    .tradetracker-layouteditor .le-grip[b-ikddds0z8t] {
        color: #666;
        font-size: 0.85rem;
        cursor: grab;
    }

    .tradetracker-layouteditor .le-x[b-ikddds0z8t] {
        color: #FF7777;
        cursor: pointer;
        margin-left: 4px;
        font-size: 0.95rem;
        line-height: 1;
        padding: 0 2px;
    }

        .tradetracker-layouteditor .le-x:hover[b-ikddds0z8t] {
            color: #ffaaaa;
        }

    .tradetracker-layouteditor .le-plus[b-ikddds0z8t] {
        font-size: 0.95rem;
        line-height: 1;
    }

    /* ── Edit panel ─────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-edit-panel[b-ikddds0z8t] {
        background: #0a0a14;
        border: 1px solid #2a2a44;
        border-radius: 6px;
        padding: 14px;
    }

    .tradetracker-layouteditor .le-name-row[b-ikddds0z8t] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 4px;
    }

    .tradetracker-layouteditor .le-field-label[b-ikddds0z8t] {
        color: #aaa;
        font-size: 0.75rem;
        min-width: 72px;
    }

    .tradetracker-layouteditor .le-name-input[b-ikddds0z8t] {
        width: 220px;
    }

    .tradetracker-layouteditor .le-auto-pill[b-ikddds0z8t] {
        color: #00FF7F;
        font-size: 0.7rem;
        border: 1px solid #00FF7F;
        border-radius: 3px;
        padding: 1px 6px;
    }

    .tradetracker-layouteditor .le-custom-pill[b-ikddds0z8t] {
        color: #FFE68C;
        font-size: 0.7rem;
        border: 1px solid #FFE68C;
        border-radius: 3px;
        padding: 1px 6px;
    }

    .tradetracker-layouteditor .le-hint[b-ikddds0z8t] {
        color: #666;
        font-size: 0.7rem;
        font-style: italic;
        margin: 0 0 14px 82px;
    }

    /* ── Panel list ─────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-panel-list[b-ikddds0z8t] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 10px;
    }

    .tradetracker-layouteditor .le-panelrow[b-ikddds0z8t] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        background: #1a1a2e;
        border: 1px solid #8888aa;
        border-radius: 4px;
        cursor: grab;
    }

    .tradetracker-layouteditor .le-panelrow-special[b-ikddds0z8t] {
        background: #14142d;
        border-color: #FFE68C;
        cursor: default;
    }

    .tradetracker-layouteditor .le-panel-title[b-ikddds0z8t] {
        flex: 1;
    }

    .tradetracker-layouteditor .le-short[b-ikddds0z8t] {
        color: #666;
        font-size: 0.7rem;
    }

    .tradetracker-layouteditor .le-add-row[b-ikddds0z8t] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tradetracker-layouteditor .le-add-select[b-ikddds0z8t] {
        flex: 1;
        max-width: 280px;
    }

    .tradetracker-layouteditor .le-add-btn[b-ikddds0z8t] {
        padding: 3px 14px;
    }

    .tradetracker-layouteditor .le-error[b-ikddds0z8t] {
        color: #FF7777;
        font-size: 0.75rem;
        margin: 10px 0 0;
    }

    /* ── Footer ─────────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-footer[b-ikddds0z8t] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid #2a2a44;
        flex-wrap: wrap;
        gap: 8px;
    }

    .tradetracker-layouteditor .le-reset-btn[b-ikddds0z8t] {
        background: transparent;
        color: #FF7777;
        border: 1px solid #FF7777;
        border-radius: 3px;
        padding: 4px 14px;
        font-size: 0.75rem;
        cursor: pointer;
    }

        .tradetracker-layouteditor .le-reset-btn:hover[b-ikddds0z8t] {
            background: #FF777722;
        }

    .tradetracker-layouteditor .le-reset-confirm[b-ikddds0z8t] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.75rem;
        color: #FFE68C;
    }

    .tradetracker-layouteditor .le-reset-yes[b-ikddds0z8t] {
        padding: 3px 10px;
    }

    .tradetracker-layouteditor .le-saved-msg[b-ikddds0z8t] {
        color: #00FF7F;
        font-size: 0.7rem;
    }
/* /Components/Pages/Futures/TradeTracker/TradeTracker_950_EditHistoricData.razor.rz.scp.css */
/* IntradayPriceEditor page-scoped styles. Prefix: itp- (IntradayPrice editor). */

.itp-page[b-ierrurrhrg] {
    padding: 0.75em 1em;
}

.itp-heading[b-ierrurrhrg] {
    margin-bottom: 0.5em;
}

/* Two-column layout: left filters, right table. */
.itp-layout[b-ierrurrhrg] {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
    margin-top: 0.75em;
}

.itp-left[b-ierrurrhrg] {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    width: 17em;
    flex: 0 0 17em;
}

.itp-right[b-ierrurrhrg] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}

.itp-label[b-ierrurrhrg] {
    font-weight: 600;
    font-size: 0.85em;
    margin-top: 0.4em;
}

.itp-date[b-ierrurrhrg] {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.25em 0.4em;
    font-size: 0.9em;
}

.itp-listbox[b-ierrurrhrg] {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.2em;
    font-size: 0.9em;
}

.itp-legend[b-ierrurrhrg] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.6em;
    font-size: 0.8em;
    flex-wrap: wrap;
}

.itp-swatch[b-ierrurrhrg] {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: 3px;
    font-size: 0.8em;
}

.itp-msg[b-ierrurrhrg] {
    font-style: italic;
    color: #6c757d;
    margin: 1em 0;
}

.itp-table[b-ierrurrhrg] {
    border-collapse: collapse;
    width: auto;
    min-width: 32em;
    font-size: 0.9em;
}

.itp-table th[b-ierrurrhrg],
.itp-table td[b-ierrurrhrg] {
    border: 1px solid #e0e0e0;
    padding: 0.25em 0.6em;
    white-space: nowrap;
}

.itp-table thead th[b-ierrurrhrg] {
    background: #f2f4f7;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.itp-table .itp-num[b-ierrurrhrg] {
    text-align: right;
}

.itp-table .itp-centre[b-ierrurrhrg] {
    text-align: center;
}

.itp-inp[b-ierrurrhrg] {
    width: 6.5em;
    text-align: right;
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding: 0.1em 0.35em;
}

.itp-btn[b-ierrurrhrg] {
    padding: 0.15em 0.7em;
    font-size: 0.85em;
}

/* Escalating red bands for moves over 10% (each 10% is more intense). */
.itp-m1[b-ierrurrhrg] {
    background: #ffe0e0;
}

.itp-m2[b-ierrurrhrg] {
    background: #ffb3b3;
}

.itp-m3[b-ierrurrhrg] {
    background: #ff8080;
}

.itp-m4[b-ierrurrhrg] {
    background: #f24d4d;
    color: #ffffff;
}

.itp-m5[b-ierrurrhrg] {
    background: #d90000;
    color: #ffffff;
    font-weight: 600;
}
/* /Components/Pages/General/Analysis/Surveys/Surveys.razor.rz.scp.css */
.svy-rpt-btn[b-az69lovmyn] {
    background-color: #000061;
    color: white;
    border: 1px solid navy;
    cursor: pointer;
    padding: 0.3% 3%;
    width: 100%;
}

/* /Components/Pages/General/Analysis/Vessels/Pages/Changes.razor.rz.scp.css */
.vls-type-btn[b-7rm7v4wvcd] {
    cursor: pointer;
    background-color: #E8E8E8;
    margin-right: 2%;
    padding: 0.5% 2.5%;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

    .vls-type-btn:hover[b-7rm7v4wvcd] {
        background-color: #D1EDF5;
    }


.striped-bg[b-7rm7v4wvcd] {
    background: repeating-linear-gradient( 45deg, #666DA9, #666DA9 20%, #163E9F 20%, #163E9F 40% );
}
/* /Components/Pages/General/Analysis/Vessels/Pages/FuelInfo.razor.rz.scp.css */
.fuelinfo-btn[b-szukaiwjis] {
    cursor: pointer;
    background-color: #E8E8E8;
    margin-right: 2%;
    padding: 0.5% 5%;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

    .fuelinfo-btn:hover[b-szukaiwjis] {
        background-color: #D1EDF5;
    }
/* /Components/Pages/General/Analysis/Vessels/Pages/Orderbook.razor.rz.scp.css */
@scope (.orderbook-cont) {
    :scope[b-kuc3xdl3n9] {
        /*        background-color: lightblue;*/
        /*        border: 2px solid gray;*/
        display: flex;
        flex-direction: column;
        height: 96%;
        width: 100%;
    }

    .div[b-kuc3xdl3n9] {
        border: 1px solid lightblue;
    }

    td[b-kuc3xdl3n9], th[b-kuc3xdl3n9] {
        padding: 5px;
    }
}

.orderbook-top[b-kuc3xdl3n9] {
    display: flex;
    flex-direction: row;
    height: 50%;
    width: 100%;
}

.orderbook-outlook[b-kuc3xdl3n9] {
    height: 100%;
    width: 59%;
    padding: 0.5%;
}

.orderbook-outlook-graph[b-kuc3xdl3n9] {
    height: 90%;
}

.orderbook-outlook-btn[b-kuc3xdl3n9] {
    cursor: pointer;
    background-color: #E8E8E8;
    margin-right: 2%;
    padding: 0.5% 5%;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

    .orderbook-outlook-btn:hover[b-kuc3xdl3n9] {
        background-color: #D1EDF5;
    }


.orderbook-btm[b-kuc3xdl3n9] {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.orderbook-geo[b-kuc3xdl3n9] {
    height: 100%;
    width: 50%;
    padding: 0.5%;
}

.orderbook-yards[b-kuc3xdl3n9] {
    height: 100%;
    width: 50%;
    padding: 0.5%;
}
/* /Components/Pages/General/Analysis/Vessels/Pages/YardInfo.razor.rz.scp.css */
.country-btn[b-oq2cff82lp] {
    width: 100%;
    cursor: pointer;
    background-color: #E8E8E8;
    /*    color: white;*/
    padding: 3% 5%;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

    .country-btn:hover[b-oq2cff82lp] {
        background-color: #D1EDF5;
    }


@scope(.yard-util-table) {
    :scope[b-oq2cff82lp] {
    }

    thead[b-oq2cff82lp] {
        background-color: #163E9F;
        color: white;
        font-weight: 400;
    }

    tbody[b-oq2cff82lp] {
    }

        tbody tr:hover[b-oq2cff82lp] {
            background-color: #D0E4F0 !important;
        }
}
/* /Components/Pages/General/Bunkers/BunkerPrices.razor.rz.scp.css */
#mapdiv[b-95bobo2hnz] {
    width: 100%;
    height: 400px !important;
    z-index: unset !important;
}

#chartdiv[b-95bobo2hnz] {
    width: 100%;
}

.leaflet-popup-close-button[b-95bobo2hnz] {
    display: none;
}

.grid-container-bunker[b-95bobo2hnz] {
    display: grid;
    grid-template-columns: auto 300px;
    gap: 5px;
}

.grid-container-table-map[b-95bobo2hnz] {
    display: grid;
    grid-template-columns: 400px auto;
    grid-template-rows: auto;
    gap: 5px;
}

/*Autocomlete CSS*/

.autocomplete[b-95bobo2hnz] {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

.cardformat[b-95bobo2hnz] {
    background-color: #DEEEF1 !important;
    width: 285px;
}

.autocomplete-items[b-95bobo2hnz] {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div[b-95bobo2hnz] {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover[b-95bobo2hnz] {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active[b-95bobo2hnz] {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.bunkersidebar[b-95bobo2hnz]  .bunkerex-input {
    height: 38px;
    background-color: #f0eeeb !important;
    color: black !important;
    border: black 1px solid !important;
    padding-left: 5px;
    padding-right: 2px;
}

.bunkersidebar[b-95bobo2hnz]  .bunkerex-button {
    vertical-align: top;
    height: 38px;
    background-color: #f0eeeb;
    color: black;
    border: black 1px solid;
    padding: 0;
}


.chartrow[b-95bobo2hnz] {
    display: flex;
}

.chartrowitem[b-95bobo2hnz] {
    /* flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    border: 1px solid black; */
    /*width: calc((100dvw - 350px) / @chartCount );*/
    height: 460px
}

.leaflet-pane[b-95bobo2hnz] {
    z-index: 0;
}

.bunkersidebar[b-95bobo2hnz] {
    background-color:#B5CBD6;
    border: 1px solid #405864;
    border-radius: 10px;
    padding:8px;
}

@media (max-width: 768px) {
    .grid-container-bunker[b-95bobo2hnz] {
        display: block;
    }

    .grid-container-table-map[b-95bobo2hnz] {
        display: block;
    }

    .chartrow[b-95bobo2hnz] {
        display: block;
    }

    .chartrowitem[b-95bobo2hnz] {
        width: 100%;
        height: 460px
    }
}
/*End of Autocomplete CSS*/

/* /Components/Pages/General/Commentary/Commentary_00_Main.razor.rz.scp.css */
.commentary-page-layout[b-gvygzap5om] {
    display: grid;
    grid-template-columns: 250px auto;
    gap: 10px;
}

.commentary-button[b-gvygzap5om] {
    width: 80%;
    margin-bottom: 10px;
}

.commentary-filter-input[b-gvygzap5om] {
    width: 80%;
}

.commentary-filter-header[b-gvygzap5om] {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
}

.commentary-filter-subheader[b-gvygzap5om] {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 8px;
}


    .span-2-widescreen[b-gvygzap5om] {
        grid-column: span 2;
    }

.commentary-small-icon[b-gvygzap5om] {
    height: 15px;
    cursor: pointer;
    border-radius: 5px;
}

    .commentary-small-icon.red:hover[b-gvygzap5om] {
        background-color: #FE908F;
    }

    .commentary-small-icon.orange:hover[b-gvygzap5om] {
        background-color: #F7B900;
    }

    .commentary-small-icon.green:hover[b-gvygzap5om] {
        background-color: #73D673;
    }


.commentary-side-panel[b-gvygzap5om] {
    z-index: 900;
    position: fixed;
    width: calc(100vw - 195px);
    height: 100vh;
    top: 0;
    left: calc(-100vw + 200px);
    transition: transform 0.5s ease-out;
    background-color: var(--ssy-grey);
    border-right: 5px solid var(--ssy-black);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

    .commentary-side-panel.expanded[b-gvygzap5om] {
        transform: translateX(calc(100vw - 200px));
    }

.commentary-side-panel-container[b-gvygzap5om] {
    position: relative;
    height: 100%;
    width: 100%;
}

.commentary-side-panel-tab[b-gvygzap5om] {
    position: absolute;
    top: 40vh;
    left: calc(100vw - 200px);
    height: 94px;
    width: 30px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    background-color: var(--ssy-black);
}

.commentary-arrow[b-gvygzap5om] {
    height: 40px;
    transition: transform 0.25s;
    transform: rotate(270deg);
    margin-top: 26px;
    margin-left: -5px;
}

    .commentary-arrow.expanded[b-gvygzap5om] {
        transform: rotate(450deg);
    }

@media (max-width: 840px) {
    .span-2-widescreen[b-gvygzap5om] {
        grid-column: auto;
    }
}
/* /Components/Pages/General/Commentary/Commentary_50_Edit.razor.rz.scp.css */
.commentaryeditgrid[b-j30kmh2tjs] {
    margin-left: 5px;
    display: grid;
    /*flex-direction: column;*/
    grid-template-columns: 14rem auto;
    gap: 10px;
}



.commentaryeditflex[b-j30kmh2tjs] {
    display: flex;
    gap: 10px;
}

.commentaryeditheader[b-j30kmh2tjs] {
    border: 1px solid silver;
    font-size: 20px;
    color: black;
    width: 100%;
    padding-left: 1em;
    margin-bottom: 4px;
    background-color: #E9EFF9;
}


    .commentaryeditheader[b-j30kmh2tjs]::placeholder {
        font-weight: unset;
        opacity: 0.5;
        color: grey;
        font-style: italic;
    }

.commentaryedittitle[b-j30kmh2tjs] {
    border: 1px solid silver;
    font-size: 20px;
    color: grey;
    width: 100%;
    padding-left: 1em;
    margin-bottom: 4px;
    background-color: #E9EFF9;
}

.commentarytitleheader[b-j30kmh2tjs] {
    border: 1px solid silver;
    font-weight: bold;
    width: 100%;
    padding-left: 5px;
    background-color: #E9EFF9;
}

.commentarylistbox[b-j30kmh2tjs] {
    border: 1px solid silver;
    font-weight: bold;
    width: 100%;
    padding-left: 5px;
    background-color: #E9EFF9;
}

.commentaryedittext[b-j30kmh2tjs] {
    border: 1px solid silver;
    color: black;
    width: 100%;
    padding-left: 1em;
    margin-bottom: 4px;
    background-color: #E9EFF9;
}


    .commentaryedittext[b-j30kmh2tjs]::placeholder {
        opacity: 0.5;
        color: grey;
        font-style: italic;
    }

.tagsshow-container[b-j30kmh2tjs] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2px;
}


.tagsshow-container-sub[b-j30kmh2tjs] {
    display: flex;
    align-items: flex-start;
    gap: 1px;
}

.tagsshow-parent[b-j30kmh2tjs] {
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    width: 100px;
    border: darkGrey;
    border-radius: 5px;
    margin-bottom: 10px;
}

.tagsshow-sub[b-j30kmh2tjs] {
    text-align: center;
    font-size: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 0 5px 0 5px;
}

.buttons-flex-container[b-j30kmh2tjs] {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: space-between;
}

.commentary-editor-button[b-j30kmh2tjs] {
    padding: 5px 20px 5px 20px;
}

.links-grid-container[b-j30kmh2tjs] {
    display: grid;
    grid-template-columns: 170px auto 22px;
    gap: 3px;
}

.delete-container[b-j30kmh2tjs] {
    position: relative;
    width: 300px;
    padding: 10px 20px 10px 20px;
}

.hoverred:hover[b-j30kmh2tjs] {
    background-color: #DB303A;
    border-radius: 5px;
}

.hoverorange:hover[b-j30kmh2tjs] {
    background-color: #F7B900;
    border-radius: 5px;
}

.hovergreen:hover[b-j30kmh2tjs] {
    background-color: #73D673;
    border-radius: 5px;
}
/* /Components/Pages/General/Commentary/Commentary_90_TagSelector.razor.rz.scp.css */
.tags-container[b-3krgu92uyf] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    flex-direction: column;
}
.commentaryeditgrid .tags-container[b-3krgu92uyf] {
    flex-direction: row;
}

.tags-container-sub[b-3krgu92uyf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tags-parent[b-3krgu92uyf] {
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    padding: 0 10px;
    border: var(--tag-border);
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    min-width: 100px;
}
.commentaryeditgrid .tags-parent[b-3krgu92uyf] {
    min-width: 0;
}

.tags-sub[b-3krgu92uyf] {
    font-size: 10px;
    cursor: pointer;
}

.tags-sub[b-3krgu92uyf]::before {
    display: inline-block;
    content: '';
    width: 15px;
    height: 15px;
    margin: 2px 3px;
    border-radius: 10px;
    border: var(--tag-border);
    background-color: var(--tag-bk-colours);
    color: var(--tag-tx-colours);
    vertical-align: middle;
}

@media (min-width: 576px) {
    .commentaryeditgrid .tags-container[b-3krgu92uyf] {
        flex-direction: column;
    }

    .commentaryeditgrid .tags-parent[b-3krgu92uyf] {
        min-width: 100px;
    }
}
/* /Components/Pages/General/CustomCarouselEdit.razor.rz.scp.css */
/* --- Carousel Management Window Modern Redesign --- */
.carousel-mgmt-main[b-nxvp9w1d8i] {
    width: 100%;
    height: 100%;
    padding: 0;
    background: #f6f8fa;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.carousel-mgmt-header-bar[b-nxvp9w1d8i] {
    background: #fff;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.carousel-mgmt-header-desc[b-nxvp9w1d8i] {
    font-size: 1rem;
    color: #666;
}

.carousel-mgmt-columns[b-nxvp9w1d8i] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    padding: 2rem;
    flex: 1 1 auto;
    overflow-y: auto;
    background: #f6f8fa;
}

.carousel-mgmt-section[b-nxvp9w1d8i] {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    max-height: 80vh;
}

.carousel-mgmt-section header[b-nxvp9w1d8i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.carousel-mgmt-count[b-nxvp9w1d8i] {
    color: #888;
    margin-left: 0.5rem;
    font-size: 1rem;
}

.carousel-mgmt-filter[b-nxvp9w1d8i] {
    margin-left: auto;
    width: 120px;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    background: #f7fafd;
}

.carousel-mgmt-list[b-nxvp9w1d8i] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 200px;
    background: transparent;
    border: none;
    padding: 0;
}

.carousel-mgmt-card-item[b-nxvp9w1d8i] {
    background: #f8f9fa;
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s, border 0.2s, background 0.2s;
    cursor: grab;
}

.carousel-mgmt-card-item-row[b-nxvp9w1d8i] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
}

.carousel-mgmt-card-item.dragging[b-nxvp9w1d8i] {
    opacity: 0.5;
    border: 2px dashed #007bff;
    background: #e9eff9;
}

.carousel-mgmt-drag-handle[b-nxvp9w1d8i] {
    color: #888;
    font-size: 1.3rem;
    padding-top: 0.2rem;
    user-select: none;
    transition: color 0.2s;
    cursor: grab;
}

.carousel-mgmt-card-item:hover .carousel-mgmt-drag-handle[b-nxvp9w1d8i] {
    color: #007bff;
}

.carousel-mgmt-thumb[b-nxvp9w1d8i] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #f6f8fa;
}

.carousel-mgmt-card-item-content[b-nxvp9w1d8i] {
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
    display: flex;
    flex-direction: column;
}

.carousel-mgmt-card-title[b-nxvp9w1d8i] {
    font-size: 1rem;
    font-weight: 600;
    color: #163E9F;
}

.carousel-mgmt-card-desc[b-nxvp9w1d8i] {
    font-size: 0.97rem;
    color: #444;
    margin-bottom: 0.25rem;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.carousel-mgmt-card-meta[b-nxvp9w1d8i] {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    gap: 1rem;
}

.carousel-mgmt-card-actions[b-nxvp9w1d8i] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.empty-list-placeholder[b-nxvp9w1d8i] {
    color: #aaa;
    text-align: center;
    padding: 2.5rem 0;
    font-size: 1.1rem;
    background: #f3f6fa;
    border-radius: 0.75rem;
    border: 1px dashed #d0d7e2;
    margin-bottom: 1rem;
}

.limit-warning[b-nxvp9w1d8i] {
    color: #dc3545;
    font-size: 1.3rem;
    margin-left: 0.5rem;
}

.carousel-mgmt-modal-footer[b-nxvp9w1d8i] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem 2rem 1.25rem 2rem;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}

/** MODAL **/

[b-nxvp9w1d8i] .carousel-edit-image-preview-simple {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.5rem;
    text-align: center;
}

/* Fix preview and crop styles */
[b-nxvp9w1d8i] .preview-area-simple {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

[b-nxvp9w1d8i] .preview-image-simple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Changed from contain to cover */
    border-radius: 0.5rem;
    z-index: 1;
}
/* /Components/Pages/General/CustomCharts.razor.rz.scp.css */
.chart-builder-container[b-a78zcl10l2] {
    display: grid;
    grid-template-columns: 27.1rem auto;
    gap: 1.5rem;
}
    .chart-builder-container .chart-builder-highchart[b-a78zcl10l2] {
        align-self: baseline;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding-left: 0.5rem;
    }

/* Each chart wrapper is drag-resizable via the native CSS resize handle in the bottom-right corner.
   Tracked via [data-chart-wrapper="1"] in CustomCharts.razor.js, which reflows the live Highcharts
   instance during the drag and persists the resulting pixel size through Saved Settings. */
.ssy-chart-wrapper[b-a78zcl10l2] {
    resize: both;
    overflow: hidden;
    min-width: 320px;
    min-height: 200px;
    position: relative;
    border: 1px dashed transparent;
}
.ssy-chart-wrapper:hover[b-a78zcl10l2] {
    /* Hint that the corner is draggable. */
    border-color: rgba(22, 62, 159, 0.18);
}
.ssy-chart-wrapper[b-a78zcl10l2]::after {
    /* Make the native resize handle a little more visible. */
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    background:
        linear-gradient(135deg, transparent 50%, #163E9F 50%, #163E9F 60%, transparent 60%, transparent 70%, #163E9F 70%, #163E9F 80%, transparent 80%);
    pointer-events: none;
    opacity: 0.55;
}

.chart-builder-container h2[b-a78zcl10l2] {
    margin-bottom: 0.5em;
}
.chart-builder-form[b-a78zcl10l2] {
    align-self: flex-start;
}

.chart-builder-form > .chart-builder[b-a78zcl10l2] {
    height: calc(100% - 3em);
    display: grid;
}

.chart-builder > .chart-data-selector[b-a78zcl10l2]{
    /*min-height: 16rem;*/
}

.chart-builder > div[b-a78zcl10l2] {
    border: 2px solid #009DC9;
    margin-bottom: 1em;
}
.chart-builder h3.ssy-colour-lw[b-a78zcl10l2] {
    text-align: center;
    font-size: 1.25em;
}

.chart-builder-measures[b-a78zcl10l2] {
    display: flex;
    gap: 3px;
}

.chart-builder-measures .ssy-radio-main label[b-a78zcl10l2] {
    background-color: #009DC9;
    color: white;
}

.chart-builder-measures .ssy-radio-main input:checked + label[b-a78zcl10l2] {
    background-color: #000061;
    color: white;
}

.chart-builder-action:hover[b-a78zcl10l2] {
    cursor: pointer;
    color: white;
    background-color: #163E9F;
    border-radius: 5px;
}

/* Friendly "no data" note shown in a chart card when the selection returned no rows. */
.chart-builder-nodata[b-a78zcl10l2] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 1.5rem;
    gap: 0.6rem;
    color: #374151;
}
.chart-builder-nodata-title[b-a78zcl10l2] {
    font-weight: 700;
    font-size: 1.1em;
    color: #009DC9;
}
.chart-builder-nodata p[b-a78zcl10l2] {
    max-width: 36rem;
    margin: 0;
    line-height: 1.5;
    color: #6B7280;
}

@media (max-width: 900px)  {
    .chart-builder-container[b-a78zcl10l2] {
        display: block;
    }

        .chart-builder-container .chart-builder-highchart[b-a78zcl10l2] {
            align-self: baseline;
            overflow: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

    .chart-builder-measures[b-a78zcl10l2] {
        display: block;
    }
}
/* /Components/Pages/General/CustomCharts/CustomCharts_010_Main.razor.rz.scp.css */
.chart-builder-container[b-3fw4o5st9k] {
    display: grid;
    grid-template-columns: 27.1rem auto;
    gap: 1.5rem;
}

    /* The chart display column is rendered by CustomCharts_080_ChartDisplay, so its markup carries
       that child's scope. Reach it with ::deep anchored on the parent-owned .chart-builder-container. */
    .chart-builder-container[b-3fw4o5st9k]  .chart-builder-highchart {
        align-self: baseline;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding-left: 0.5rem;
    }

/* Each chart wrapper is drag-resizable via the native CSS resize handle in the bottom-right corner.
   Tracked via [data-chart-wrapper="1"] in CustomCharts_010_Main.razor.js, which reflows the live
   Highcharts instance during the drag and persists the resulting pixel size through Saved Settings. */
.chart-builder-container[b-3fw4o5st9k]  .ssy-chart-wrapper {
    resize: both;
    overflow: hidden;
    min-width: 320px;
    min-height: 200px;
    position: relative;
    border: 1px dashed transparent;
}

    .chart-builder-container[b-3fw4o5st9k]  .ssy-chart-wrapper:hover {
        /* Hint that the corner is draggable. */
        border-color: rgba(22, 62, 159, 0.18);
    }

    .chart-builder-container[b-3fw4o5st9k]  .ssy-chart-wrapper::after {
        /* Make the native resize handle a little more visible. */
        content: "";
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 12px;
        height: 12px;
        background: linear-gradient(135deg, transparent 50%, #163E9F 50%, #163E9F 60%, transparent 60%, transparent 70%, #163E9F 70%, #163E9F 80%, transparent 80%);
        pointer-events: none;
        opacity: 0.55;
    }

.chart-builder-container h2[b-3fw4o5st9k] {
    margin-bottom: 0.5em;
}

.chart-builder-form[b-3fw4o5st9k] {
    align-self: flex-start;
}

    .chart-builder-form > .chart-builder[b-3fw4o5st9k] {
        height: calc(100% - 3em);
        display: grid;
    }

.chart-builder > .chart-data-selector[b-3fw4o5st9k] {
    /*min-height: 16rem;*/
}

.chart-builder > div[b-3fw4o5st9k] {
    border: 2px solid #009DC9;
    margin-bottom: 1em;
}

.chart-builder h3.ssy-colour-lw[b-3fw4o5st9k] {
    text-align: center;
    font-size: 1.25em;
}

/* Setup-panel sections rendered by child components (CustomCharts_0NN_*) sit under the
   parent-owned .chart-builder wrapper but carry the child's CSS scope, so the plain
   .chart-builder > div / .chart-builder h3 rules above don't reach them. Mirror those rules
   with ::deep so the parent keeps owning the section styling. Add the child's section class
   here as each one is extracted. */
.chart-builder[b-3fw4o5st9k]  .chart-builder-size,
.chart-builder[b-3fw4o5st9k]  .chart-builder-actions,
.chart-builder[b-3fw4o5st9k]  .chart-date-selector,
.chart-builder[b-3fw4o5st9k]  .chart-period-selector {
    border: 2px solid #009DC9;
    margin-bottom: 1em;
}

/* Chart actions section (Force refresh / Reset) - rendered by CustomCharts_070_ChartActions,
   so reach it with ::deep. Buttons mirror the page's blue action styling. */
.chart-builder[b-3fw4o5st9k]  .chart-builder-actions-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 6px 8px 10px;
}

.chart-builder[b-3fw4o5st9k]  .chart-builder-actions-btn {
    flex: 1 1 0;
    padding: 6px 10px;
    font-size: 0.85rem;
    color: white;
    background-color: #009DC9;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.chart-builder[b-3fw4o5st9k]  .chart-builder-actions-btn:hover {
    background-color: #163E9F;
}

.chart-builder[b-3fw4o5st9k]  .chart-builder-actions-btn--reset {
    background-color: #DB303A;
}

.chart-builder[b-3fw4o5st9k]  .chart-builder-actions-btn--reset:hover {
    background-color: #A81F27;
}
.chart-builder[b-3fw4o5st9k]  h3.ssy-colour-lw {
    text-align: center;
    font-size: 1.25em;
}
.chart-builder[b-3fw4o5st9k]  .chart-builder-action:hover {
    cursor: pointer;
    color: white;
    background-color: #163E9F;
    border-radius: 5px;
}

.chart-builder-measures[b-3fw4o5st9k] {
    display: flex;
    gap: 3px;
}

    .chart-builder-measures .ssy-radio-main label[b-3fw4o5st9k] {
        background-color: #009DC9;
        color: white;
    }

    .chart-builder-measures .ssy-radio-main input:checked + label[b-3fw4o5st9k] {
        background-color: #000061;
        color: white;
    }

.chart-builder-action:hover[b-3fw4o5st9k] {
    cursor: pointer;
    color: white;
    background-color: #163E9F;
    border-radius: 5px;
}

/* Friendly "no data" note shown in a chart card when the selection returned no rows.
   Rendered by CustomCharts_080_ChartDisplay, so reach it with ::deep. */
.chart-builder-container[b-3fw4o5st9k]  .chart-builder-nodata {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 1.5rem;
    gap: 0.6rem;
    color: #374151;
}

.chart-builder-container[b-3fw4o5st9k]  .chart-builder-nodata-title {
    font-weight: 700;
    font-size: 1.1em;
    color: #009DC9;
}

.chart-builder-container[b-3fw4o5st9k]  .chart-builder-nodata p {
    max-width: 36rem;
    margin: 0;
    line-height: 1.5;
    color: #6B7280;
}

@media (max-width: 900px) {
    .chart-builder-container[b-3fw4o5st9k] {
        display: block;
    }

        .chart-builder-container[b-3fw4o5st9k]  .chart-builder-highchart {
            align-self: baseline;
            overflow: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

    .chart-builder-measures[b-3fw4o5st9k] {
        display: block;
    }
}

/* ============================================================================
   Reset confirmation modal (styled replacement for the browser confirm()).
   Owned by this page (elements are declared directly in CustomCharts_010_Main.razor),
   so no ::deep. Visual style mirrors the Saved-settings save dialog. cc- = CustomCharts.
   ============================================================================ */
.cc-reset-backdrop[b-3fw4o5st9k] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

.cc-reset-modal[b-3fw4o5st9k] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 6px;
    width: min(460px, 92vw);
    z-index: 1050;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}

.cc-reset-modal-header[b-3fw4o5st9k] {
    background-color: #163E9F;
    color: white;
    padding: 8px 14px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

.cc-reset-modal-close[b-3fw4o5st9k] {
    background: none;
    border: none;
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.cc-reset-modal-body[b-3fw4o5st9k] {
    padding: 14px 16px;
    color: #405864;
    font-size: 0.9rem;
}

.cc-reset-modal-body p[b-3fw4o5st9k] {
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.cc-reset-modal-note[b-3fw4o5st9k] {
    color: #405864;
    font-style: italic;
}

.cc-reset-modal-footer[b-3fw4o5st9k] {
    padding: 8px 14px;
    border-top: 1px solid #E9EFF9;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.cc-reset-btn-tab[b-3fw4o5st9k] {
    background-color: #163E9F;
    color: white;
    border: none;
    padding: 5px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.cc-reset-btn-tab:hover[b-3fw4o5st9k] {
    background-color: #009DC9;
}

.cc-reset-btn-cancel[b-3fw4o5st9k] {
    background-color: white;
    color: #405864;
    border: 1px solid #B5CBD6;
    padding: 5px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
}

.cc-reset-btn-cancel:hover[b-3fw4o5st9k] {
    background-color: #F1F5FB;
}

.cc-reset-btn-confirm[b-3fw4o5st9k] {
    background-color: #DB303A;
    color: white;
    border: none;
    padding: 5px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.cc-reset-btn-confirm:hover[b-3fw4o5st9k] {
    background-color: #A81F27;
}

/* ============================================================================
   Chart tools row (toolbar show/hide checkbox + copy-as-image button).
   Declared in CustomCharts_080_ChartDisplay.razor, so ::deep is needed to reach it.
   cc- = CustomCharts.
   ============================================================================ */
.chart-builder-container[b-3fw4o5st9k]  .cc-chart-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 4px 0 6px;
}

.chart-builder-container[b-3fw4o5st9k]  .cc-chart-tools-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #163E9F;
    cursor: pointer;
    margin: 0;
}

.chart-builder-container[b-3fw4o5st9k]  .cc-chart-tools-copy {
    background-color: #163E9F;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

.chart-builder-container[b-3fw4o5st9k]  .cc-chart-tools-copy:hover {
    background-color: #01A39E;
}
/* /Components/Pages/General/CustomCharts/CustomCharts_050_RoutePeriodCombo.razor.rz.scp.css */
/* Spread Selector section + Create-spread popup (sprd- prefix per the page-scoped CSS rules). */

.sprd-body[b-3bn5qsryef] {
    padding: 0.6rem 0.8rem 0.8rem;
}

.sprd-hint[b-3bn5qsryef] {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: #405864;
}

.sprd-create-btn[b-3bn5qsryef] {
    padding: 4px 14px;
}

.sprd-list-title[b-3bn5qsryef] {
    margin: 0.9rem 0 0.3rem;
    font-size: 0.9rem;
    color: #163E9F;
}

.sprd-list-empty[b-3bn5qsryef] {
    font-size: 0.8rem;
    color: #405864;
    font-style: italic;
}

.sprd-list[b-3bn5qsryef] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sprd-list-item[b-3bn5qsryef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #E9F3F8;
    border: 1px solid #B5CBD6;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.85rem;
}

.sprd-list-actions[b-3bn5qsryef] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.sprd-list-edit[b-3bn5qsryef] {
    color: #163E9F;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

    .sprd-list-edit:hover[b-3bn5qsryef] {
        color: #0087CB;
    }

.sprd-list-remove[b-3bn5qsryef] {
    border: none;
    background: none;
    color: #DB303A;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
}

    .sprd-list-remove:hover[b-3bn5qsryef] {
        background: #DB303A;
        color: #ffffff;
    }

/* ---- Create spread popup ---- */

.sprd-overlay[b-3bn5qsryef] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 40, 0.45);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.sprd-popup[b-3bn5qsryef] {
    background: #ffffff;
    border: 2px solid #009DC9;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    width: min(60rem, 96vw);
    max-height: 92vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.sprd-popup-header[b-3bn5qsryef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #009DC9;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.4rem 0.9rem;
}

.sprd-popup-close[b-3bn5qsryef] {
    border: none;
    background: none;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.sprd-leg[b-3bn5qsryef] {
    border-bottom: 1px solid #B5CBD6;
    padding: 0.6rem 0.9rem 0.8rem;
}

.sprd-leg-header[b-3bn5qsryef] {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin-bottom: 0.4rem;
}

    .sprd-leg-header h4[b-3bn5qsryef] {
        margin: 0;
        color: #163E9F;
        font-size: 1rem;
        white-space: nowrap;
    }

.sprd-leg-pick[b-3bn5qsryef] {
    font-size: 1.05rem;
    color: #405864;
    font-style: italic;
}

.sprd-leg-pick-done[b-3bn5qsryef] {
    color: #163E9F;
    font-style: normal;
    font-weight: 700;
    font-size: 1.15rem;
}


.sprd-leg-selectors[b-3bn5qsryef] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.sprd-selector-caption[b-3bn5qsryef] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #009DC9;
    margin-bottom: 2px;
}

.sprd-popup-footer[b-3bn5qsryef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
}

.sprd-preview-label[b-3bn5qsryef] {
    font-size: 0.9rem;
    color: #405864;
    margin-right: 0.4rem;
}

.sprd-preview-title[b-3bn5qsryef] {
    font-weight: 700;
    color: #163E9F;
}

.sprd-preview-hint[b-3bn5qsryef] {
    font-size: 0.85rem;
    color: #405864;
    font-style: italic;
}

.sprd-create-chart:disabled[b-3bn5qsryef] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .sprd-leg-selectors[b-3bn5qsryef] {
        display: block;
    }
}
/* /Components/Pages/General/Dashboard/Dashboard_00.razor.rz.scp.css */
/* container */

.ssymarkets-dashboard-container .dashboard-chartsection[b-fw3r49wmly] {
    display: grid;
    grid-template-columns: 3em auto;
}

.ssymarkets-dashboard-container .dashboard-header[b-fw3r49wmly] {
    writing-mode: vertical-lr;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ssymarkets-dashboard-container .dashboard-header a[b-fw3r49wmly],
.ssymarkets-dashboard-container .dashboard-header a h2[b-fw3r49wmly],
.ssymarkets-dashboard-container .dashboard-header div[b-fw3r49wmly],
.ssymarkets-dashboard-container .dashboard-header div h2[b-fw3r49wmly]{
    color: inherit;
}

.ssymarkets-dashboard-container .dashboard-content[b-fw3r49wmly] {
    display: flex;
    flex-direction: column;
}

.ssymarkets-dashboard-container .dashboard-content:not(.contentType-table)[b-fw3r49wmly]{
    justify-content: space-between;
}

.ssymarkets-dashboard-container .dashboard-row .dashboard-content:first-child[b-fw3r49wmly] {
    padding-left: 0.5rem;
}

.ssymarkets-dashboard-container .dashboard-content[b-fw3r49wmly]  .HighChart-Base {
    
}

/* border top classes */
.dashboard-chartsection .dashboard-header[b-fw3r49wmly],
.dashboard-chartsection .dashboard-row[b-fw3r49wmly] {
    border-top: 7px solid #000000;
}

.dashboard-chartsection .dashboard-header.ssy-colour-dw[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-dw"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #000061; /* Simpson Blue */
}

.dashboard-chartsection .dashboard-header.ssy-colour-brightblue-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-brightblue-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #0087CB; /* Bright Blue */
}

.dashboard-chartsection .dashboard-header.ssy-colour-vividpink-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-vividpink-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #EB3871; /* Vivid Pink */
}

.dashboard-chartsection .dashboard-header.ssy-colour-tealgreen-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-tealgreen-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #01A39E; /* Teal Green */
}

.dashboard-chartsection .dashboard-header.ssy-colour-goldenyellow-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-goldenyellow-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #F7A506; /* Golden Yellow */
}

.dashboard-chartsection .dashboard-header.ssy-colour-aquamarine-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-aquamarine-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #24DEBD; /* Aquamarine */
}

.dashboard-chartsection .dashboard-header.ssy-colour-brightorange-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-brightorange-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #FF670F; /* Bright Orange */
}

.dashboard-chartsection .dashboard-header.ssy-colour-royalpurple-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-royalpurple-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #752FD0; /* Royal Purple */
}

.dashboard-chartsection .dashboard-header.ssy-colour-lemonyellow-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-lemonyellow-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #FFD025; /* Lemon Yellow */
}

.dashboard-chartsection .dashboard-header.ssy-colour-cyanblue-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-cyanblue-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #009DCA; /* Cyan Blue */
}

.dashboard-chartsection .dashboard-header.ssy-colour-slategray-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-slategray-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #405864; /* Slate Gray */
}

.dashboard-chartsection .dashboard-header.ssy-colour-lightblue-gray-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-lightblue-gray-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #B5CBD6; /* Light Blue-Gray */
}

.dashboard-chartsection .dashboard-header.ssy-colour-crimsonred-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-crimsonred-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #DB303A; /* Crimson Red */
}

.dashboard-chartsection .dashboard-header.ssy-colour-olivegreen-white[b-fw3r49wmly],
.dashboard-chartsection[data-headerColor*="ssy-colour-olivegreen-white"] .dashboard-row[b-fw3r49wmly] {
    border-top-color: #91A527; /* Olive Green */
}

/* loading classes */

/* While the dashboard is still loading we keep the chart sections in layout
   (so Highcharts and Bootstrap's grid can size everything correctly off-screen)
   but invisible to the user. Once every child has reported it's ready we fade
   the sections in as one settled view, instead of letting them flicker in and
   resize individually. */
.ssymarkets-dashboard-container.is-loading .dashboard-chartsection[b-fw3r49wmly] {
    opacity: 0;
    pointer-events: none;
}

.ssymarkets-dashboard-container.is-ready .dashboard-chartsection[b-fw3r49wmly] {
    opacity: 1;
    transition: opacity 0.15s ease-in;
}

.loading-overlay[b-fw3r49wmly] {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 50px;
    width: 100%;
    height: 100%;
    background-color: #405864;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    background-image: url('./assets/loadin.gif');
    background-repeat: no-repeat;
    background-position: center; /* Center the image */
    background-size: 20%; /* Make the image slightly smaller */
    opacity: 0.9; /* Make slightly opaque */
}

.loading-overlay[b-fw3r49wmly]::after {
    content: "Loading";
    position: absolute;
    top: calc(50% + 100px); /* Adjust this value to position the text below the logo */
    color: white;
    font-size: 1.5em;
    text-align: center;
}

/* styling for charts and components*/

[b-fw3r49wmly] .tableRowHeaderText a {
    color:white;
}

[b-fw3r49wmly] .h1Grey {
    font-family: 'Soehne Breit', Arial;
    font-size: 16px;
    font-weight: bolder;
    color: #000061;
}


[b-fw3r49wmly] .h1Grey a {
    color: #000061;
    text-decoration: underline;
}


[b-fw3r49wmly] .h2Grey {
    font-family: 'Soehne Breit', Arial;
    font-size: 12px;
    color: #000061;
}

/* Mobile: hide vertical scrollbar but keep scrolling enabled (prevents flicker as content loads) */
@media (min-width: 768px) {
    .ssymarkets-dashboard-container[b-fw3r49wmly] {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE / legacy Edge */
        overflow-y: auto; /* ensure scrolling still works */
        -webkit-overflow-scrolling: touch;
    }

        .ssymarkets-dashboard-container[b-fw3r49wmly]::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none; /* Chrome / Safari / WebKit */
        }
}
/* /Components/Pages/General/LearningHub/DemoClientAccess.razor.rz.scp.css */
.client-demo-table[b-rkgovn9u1g] {
    width: 100%;
}
.client-demo-table .td[b-rkgovn9u1g] {
    padding: 15px;
}
/* /Components/Pages/General/LearningHub/LearningHub.razor.rz.scp.css */
/* /Components/Pages/General/LearningHub/LearningHubVideo.razor.rz.scp.css */
.theatre-container[b-pnysgso4cj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 94vh;
    background-color: #f5f7fa;
}

.page-header[b-pnysgso4cj] {
    width: 100%;
    max-width: 1200px;
    margin-bottom: 0rem;
    margin-top: 1rem;
}

.page-header h2[b-pnysgso4cj] {
    color: #2c3e50;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.page-header hr[b-pnysgso4cj] {
    border: none;
    height: 2px;
    background: linear-gradient(to right, #007bff, transparent);
}


.video-container[b-pnysgso4cj] {
    width: 100%;
    max-width: 1200px;
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    margin-top: 1rem;
}

.video-player[b-pnysgso4cj] {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #000;
}

@media (max-width: 768px) {
    .video-container[b-pnysgso4cj] {
        margin-top: 1rem;
    }
}


/* /Components/Pages/General/LearningHub/LearningHubVideoPage.razor.rz.scp.css */
/* /Components/Pages/General/LearningHub/RequestAccess/RegisterRequestAccess_1.razor.rz.scp.css */
.req-access-field[b-txorbe5yjo] {
    background-color: #405864;
    color: #F0F0F0;
    border: 1px solid gray;
    border-radius: 12px;
}

.req-access-label[b-txorbe5yjo] {
    color: lightgray;
}
/* /Components/Pages/General/MarketPost/MarketPost_00.razor.rz.scp.css */
/* ============================================================
   MarketPost — scoped component styles
   Palette colours come from the SSY global stylesheet (ssyglobal.css)
   via CSS custom properties:
     --ssy-colour-main-simpson-blue   #000061  primary dark / headings
     --ssy-colour-main-deep-blue      #163E9F  primary actions, active
     --ssy-colour-main-crystal-blue   #009DC9  secondary accents
     --ssy-colour-palette-slate-gray  #405864  secondary text
     --ssy-colour-palette-light-bluegray #B5CBD6 borders
     --ssy-colour-palette-crimson-red #DB303A  errors / danger
     --ssy-colour-palette-olive-green #91A527  success states
   Ad-hoc tint/background hexes (e.g. #E9EFF9, #EEF2FC) are kept inline.
   ============================================================ */

/* Page container — centred, collapses gracefully on mobile.
   Widened to 1200px so the Content step's zone grid can fit the Prices column
   alongside Write / Link / File on a single row. */
.mp-page-container[b-fis5ywz7vk] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .mp-page-container[b-fis5ywz7vk] {
        padding: 0 0.5rem;
    }
}

/* ── Page heading ────────────────────────────────────────── */
.mp-page-heading[b-fis5ywz7vk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0 0.75rem 0;
    color: var(--ssy-colour-main-simpson-blue);
    border-bottom: 1px solid var(--ssy-colour-palette-light-bluegray);
    margin-bottom: 0.75rem;
}

.mp-page-title[b-fis5ywz7vk] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    letter-spacing: -0.01em;
}

/* ── Step nav draft button ───────────────────────────────── */
/* In MarketPost_100_Create — needs ::deep */
.mp-page-container[b-fis5ywz7vk]  .mp-step-nav-draft {
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
}

/* ── Section nav ─────────────────────────────────────────── */
/* In MarketPost_00 itself — no ::deep needed.
   The sections are sub-pages, so these are anchors: they carry an href, middle-click and
   copy-link work, and the active one is marked with aria-current="page". */
.mp-tab-bar[b-fis5ywz7vk] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--ssy-colour-main-deep-blue);
    margin-bottom: 1rem;
}

.mp-tab[b-fis5ywz7vk] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    /* Anchors bring their own colour and underline — the .mp-tab look wins on all states. */
    a.mp-tab[b-fis5ywz7vk],
    a.mp-tab:hover[b-fis5ywz7vk],
    a.mp-tab:focus[b-fis5ywz7vk],
    a.mp-tab:visited[b-fis5ywz7vk] {
        text-decoration: none;
    }

    .mp-tab:hover[b-fis5ywz7vk] {
        background: #E9EFF9;
        color: var(--ssy-colour-main-simpson-blue);
    }

    .mp-tab--active[b-fis5ywz7vk],
    a.mp-tab--active:hover[b-fis5ywz7vk] {
        background: var(--ssy-colour-main-deep-blue);
        color: #fff;
    }

/* Hide the Resend / Scheduled / Bouncebacks tabs on mobile to keep the tab bar uncluttered. */
@media (max-width: 600px) {
    .mp-tab--hide-mobile[b-fis5ywz7vk] {
        display: none;
    }
}

/* ── Drafts inline dropdown ──────────────────────────────── */
/* In MarketPost_100_Create — needs ::deep */
.mp-page-container[b-fis5ywz7vk]  .mp-drafts-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-drafts-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    background: #f5f8fe;
    color: var(--ssy-colour-main-simpson-blue);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.13s, background 0.13s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-drafts-toggle:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    background: #EEF2FC;
}

.mp-page-container[b-fis5ywz7vk]  .mp-drafts-chevron {
    margin-left: auto;
    font-size: 0.6rem;
    opacity: 0.6;
}

.mp-page-container[b-fis5ywz7vk]  .mp-drafts-list {
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.mp-page-container[b-fis5ywz7vk]  .mp-draft-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #E9EFF9;
    transition: background 0.1s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-draft-item:last-child {
    border-bottom: none;
}

.mp-page-container[b-fis5ywz7vk]  .mp-draft-item:hover {
    background: #f5f8fe;
}

.mp-page-container[b-fis5ywz7vk]  .mp-draft-item--active {
    background: #f3f7e8;
    border-left: 3px solid var(--ssy-colour-palette-olive-green);
}

.mp-page-container[b-fis5ywz7vk]  .mp-draft-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.mp-page-container[b-fis5ywz7vk]  .mp-draft-item-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-draft-item-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.7rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-draft-item-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* ── Stepper ─────────────────────────────────────────────── */
/* In MarketPost_100_Create — needs ::deep */
.mp-page-container[b-fis5ywz7vk]  .mp-create-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    position: relative;
}

.mp-page-container[b-fis5ywz7vk]  .mp-stepper-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    left: calc(50% + 14px);
    width: calc(100% - 28px);
    height: 2px;
    background: var(--ssy-colour-palette-light-bluegray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-stepper-item--active {
    opacity: 1;
}

.mp-page-container[b-fis5ywz7vk]  .mp-stepper-item--done {
    opacity: 0.85;
}

.mp-page-container[b-fis5ywz7vk]  .mp-stepper-item--done::after {
    background: var(--ssy-colour-main-deep-blue) !important;
    opacity: 0.6;
}

.mp-page-container[b-fis5ywz7vk]  .mp-stepper-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E9EFF9;
    border: 2px solid var(--ssy-colour-main-deep-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ssy-colour-main-deep-blue);
    margin-bottom: 4px;
    transition: background 0.2s, color 0.2s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-stepper-item--active .mp-stepper-circle {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

.mp-page-container[b-fis5ywz7vk]  .mp-stepper-item--done .mp-stepper-circle {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

.mp-page-container[b-fis5ywz7vk]  .mp-stepper-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    color: var(--ssy-colour-main-simpson-blue);
}

/* ── Step body ───────────────────────────────────────────── */
/* In MarketPost_100_Create — needs ::deep */
.mp-page-container[b-fis5ywz7vk]  .mp-step-body {
    min-height: 240px;
    padding: 0.85rem;
    background: #E9EFF9;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
}

/* mp-step-title and mp-step-subtitle are used in all four step components
   (_110, _120, _130, _140) — children of _100_Create — needs ::deep */
.mp-page-container[b-fis5ywz7vk]  .mp-step-title {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-step-subtitle {
    margin: 0 0 1rem 0;
    font-size: 0.8rem;
    color: var(--ssy-colour-palette-slate-gray);
}

/* ── Nav buttons ─────────────────────────────────────────── */
/* Pinned to the bottom of the scrolling area (main.body-main) so Back / Next / Save as Draft are
   always on screen. Without this the Content step grows past the fold as soon as a file is picked -
   the FileUploader's confirm panel and then its upload-status block push the row down - and the
   author has to scroll to find Next. Sticky is a safe enhancement: if an ancestor ever clips
   overflow it silently falls back to the old in-flow position.
   The bar carries its own opaque background so step content scrolls underneath rather than
   showing through. */
.mp-page-container[b-fis5ywz7vk]  .mp-step-nav {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    background: #fff;
    border-top: 1px solid var(--ssy-colour-palette-light-bluegray);
    box-shadow: 0 -4px 10px rgba(0, 0, 97, 0.07);
}

/* ── Feed placeholder ────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-feed-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.9rem;
}

/* ── Post type selector row (Step 1) ─────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-posttype-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0.75rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-posttype-select {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
    padding: 0.55rem 0.7rem;
    border-color: var(--ssy-colour-main-deep-blue);
}

/* ── Template banner ─────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-template-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    margin-bottom: 0.65rem;
    border-radius: 5px;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    background: #f5f8fe;
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-template-banner--active {
    border-color: var(--ssy-colour-palette-olive-green);
    background: #f3f7e8;
    color: #3d4f00;
}

/* ── Template picker (multi-template dropdown inside the banner) ─── */
.mp-page-container[b-fis5ywz7vk]  .mp-template-picker-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    flex-wrap: wrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-template-picker-select {
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 4px;
    background: #fff;
    color: var(--ssy-colour-main-deep-blue);
    font-weight: 600;
    cursor: pointer;
    min-width: 160px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-template-banner--active .mp-template-picker-select {
    border-color: var(--ssy-colour-palette-olive-green);
    color: #3d4f00;
}

.mp-page-container[b-fis5ywz7vk]  .mp-template-picker-desc {
    font-size: 0.75rem;
    color: var(--ssy-colour-palette-slate-gray);
    font-style: italic;
}

/* ── Post type context strip (Steps 3 & 4) — compact type reminder ── */
.mp-page-container[b-fis5ywz7vk]  .mp-step-posttype-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: #647c87;
}

/* ── Post type confirmation badge (Step 2) ───────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-posttype-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 5px;
    border: 1px solid var(--ssy-colour-palette-olive-green);
    background: #f3f7e8;
    color: var(--ssy-colour-main-simpson-blue);
    font-size: 0.82rem;
    font-weight: 600;
}

/* ── Three-zone grid ─────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-zone-grid {
    /* Flex + wrap + centre so Write / Link / File / Prices keep a natural width and the
       row stays centred whether there are 1 or 4 cards. Cards flow onto one row when
       there's room and wrap as the viewport narrows. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Each card keeps a consistent width and shrinks (never grows past its basis) so the
   group stays centred rather than stretching to fill the row. Each sub-section is capped
   to roughly the height of a 4-item File card and scrolls internally beyond that. */
.mp-page-container[b-fis5ywz7vk]  .mp-zone-card {
    flex: 0 1 260px;
    max-width: 100%;
    max-height: 18rem;
    overflow-y: auto;
}

@media (max-width: 540px) {
    .mp-page-container[b-fis5ywz7vk]  .mp-zone-card {
        flex-basis: 100%;
    }
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.15s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-card--has-items {
    border-color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-card--restricted {
    background: #f9f9f9;
    border-color: #dde5ea;
    opacity: 0.7;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-card--restricted .mp-zone-header {
    color: #9cb0bb;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 0.5rem;
    min-height: 2.6rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 5px;
    background: #f5f8fe;
    transition: border-color 0.12s, background 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item--active {
    border-color: var(--ssy-colour-main-deep-blue);
    background: #E9EFF9;
}

/* Pick button — circle on the left, taps to select the item */
.mp-page-container[b-fis5ywz7vk]  .mp-zone-item-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 1.5px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 50%;
    background: #fff;
    color: var(--ssy-colour-palette-slate-gray);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item-pick:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item--active .mp-zone-item-pick {
    background: var(--ssy-colour-main-deep-blue);
    border-color: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item-select {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.78rem;
    color: var(--ssy-colour-main-simpson-blue);
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0;
    outline: none;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--ssy-colour-palette-light-bluegray);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: color 0.12s, background 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item-remove:hover {
    color: var(--ssy-colour-palette-crimson-red);
    background: #fde8e8;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-add-btn {
    align-self: stretch;
    border: 1px dashed var(--ssy-colour-palette-light-bluegray);
    border-radius: 5px;
    background: transparent;
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.5rem 0.5rem;
    min-height: 2.4rem;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
    margin-top: 2px;
    text-align: center;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-add-btn:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
    background: #f0f4fd;
}

/* Placeholder shown in the Write zone when no commentary types are configured */
.mp-page-container[b-fis5ywz7vk]  .mp-zone-no-commentary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.5rem;
    font-size: 0.75rem;
    color: var(--ssy-colour-palette-slate-gray);
    font-style: italic;
    border: 1px dashed var(--ssy-colour-palette-light-bluegray);
    border-radius: 5px;
    background: #f9fafb;
    margin-top: 2px;
}

/* ── Prices section (read-only, route groups for the post type) ── */
.mp-page-container[b-fis5ywz7vk]  .mp-prices-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.7rem;
    /* Grid item: no bottom margin (grid gap handles spacing) and min-width:0 so the
       route chips wrap instead of forcing the column wider. */
    min-width: 0;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    background: #fbfcfe;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-daterow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.4rem;
    margin-bottom: 0.1rem;
    border-bottom: 1px solid #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-date-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-date {
    max-width: 11rem;
    font-size: 0.78rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-subtitle {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 5px;
    background: #fff;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-group-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-route-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ssy-colour-palette-slate-gray);
    background: #eef3fb;
    border-radius: 10px;
    padding: 0.05rem 0.45rem;
}

/* Clickable route-group row in the Prices section — opens the routes modal. */
.mp-page-container[b-fis5ywz7vk]  .mp-prices-group-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-group-btn:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    background: #f5f8fe;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-group-btn .mp-prices-group-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "View N routes ›" affordance — makes it obvious the row is clickable. */
.mp-page-container[b-fis5ywz7vk]  .mp-prices-view-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ssy-colour-main-deep-blue);
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-group-btn:hover .mp-prices-view-hint {
    text-decoration: underline;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-view-chevron {
    font-size: 0.95rem;
    line-height: 1;
}

/* Modal subtitle — reiterates which route group's routes are being shown. */
.mp-page-container[b-fis5ywz7vk]  .mp-route-modal-subtitle {
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-route-modal-subtitle strong {
    color: var(--ssy-colour-main-simpson-blue);
}

/* Routes modal list (name + code per row). */
.mp-page-container[b-fis5ywz7vk]  .mp-route-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 60vh;
    overflow-y: auto;
}

.mp-page-container[b-fis5ywz7vk]  .mp-route-modal-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #E9EFF9;
    border-radius: 4px;
    background: #f5f8fe;
}

.mp-page-container[b-fis5ywz7vk]  .mp-route-modal-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-route-modal-code {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-family: monospace;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-group-notes {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-routes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-route {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid #E9EFF9;
    border-radius: 4px;
    background: #f5f8fe;
    font-size: 0.72rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-route-name {
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-route-code {
    font-size: 0.66rem;
    color: var(--ssy-colour-palette-slate-gray);
    font-family: monospace;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-route-uom {
    font-size: 0.66rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-route-info {
    font-size: 0.66rem;
    color: var(--ssy-colour-palette-slate-gray);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-prices-empty {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--ssy-colour-palette-slate-gray);
}

/* ── Content area (below zones) ──────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-content-area {
    border: 1px solid var(--ssy-colour-main-deep-blue);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.mp-page-container[b-fis5ywz7vk]  .mp-content-area-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    background: var(--ssy-colour-main-deep-blue);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

/* Type selector embedded in the blue content-area header */
.mp-page-container[b-fis5ywz7vk]  .mp-content-type-select {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    outline: none;
}

.mp-page-container[b-fis5ywz7vk]  .mp-content-type-select:focus {
    border-color: rgba(255,255,255,0.7);
}

.mp-page-container[b-fis5ywz7vk]  .mp-content-type-select option {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

/* Name label replacing the old select in the zone item row */
.mp-page-container[b-fis5ywz7vk]  .mp-zone-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
    cursor: default;
}

/* ── Classify form ───────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Variant: two controls side-by-side (e.g. Date + Author) */
.mp-page-container[b-fis5ywz7vk]  .mp-form-row--inline {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Each column inside an --inline row */
.mp-page-container[b-fis5ywz7vk]  .mp-inline-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

/* Narrower fixed-width column for the author select */
.mp-page-container[b-fis5ywz7vk]  .mp-inline-group--author {
    flex: 0 0 auto;
    width: 210px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-form-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-form-input,
.mp-page-container[b-fis5ywz7vk]  .mp-form-select,
.mp-page-container[b-fis5ywz7vk]  .mp-form-textarea {
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: black;
    background: #fff;
    width: 100%;
}

.mp-page-container[b-fis5ywz7vk]  .mp-form-input::placeholder,
.mp-page-container[b-fis5ywz7vk]  .mp-form-textarea::placeholder {
    color: var(--ssy-colour-palette-light-bluegray);
    font-style: italic;
}

.mp-page-container[b-fis5ywz7vk]  .mp-form-input:focus,
.mp-page-container[b-fis5ywz7vk]  .mp-form-select:focus,
.mp-page-container[b-fis5ywz7vk]  .mp-form-textarea:focus {
    outline: 2px solid var(--ssy-colour-main-deep-blue);
    outline-offset: 1px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-form-hint {
    font-size: 0.72rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-form-hint code {
    font-size: 0.72rem;
    background: #EBF0F4;
    border-radius: 3px;
    padding: 0 3px;
    font-family: monospace;
    color: #2a4a5a;
}

.mp-page-container[b-fis5ywz7vk]  .mp-add-time-btn {
    flex-shrink: 0;
    border: 1px dashed var(--ssy-colour-palette-light-bluegray);
    border-radius: 5px;
    background: transparent;
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-add-time-btn:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
    background: #f0f4fd;
}

.mp-page-container[b-fis5ywz7vk]  .mp-remove-time-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 50%;
    background: transparent;
    color: var(--ssy-colour-palette-light-bluegray);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-remove-time-btn:hover {
    border-color: var(--ssy-colour-palette-crimson-red);
    color: var(--ssy-colour-palette-crimson-red);
    background: #fde8e8;
}

/* ── Delivery channels ───────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-section {
    margin-top: 1.2rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-section-header {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    border-bottom: 1px solid var(--ssy-colour-palette-light-bluegray);
    padding-bottom: 4px;
    margin-bottom: 0.6rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-channel-row:hover {
        border-color: var(--ssy-colour-main-deep-blue);
    }

/* Channel entry — wraps the row label + optional sub-options */
.mp-page-container[b-fis5ywz7vk]  .mp-channel-entry {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Locked channel (e.g. Navigator Feed on a resend — already in the feed): greyed and non-interactive. */
.mp-page-container[b-fis5ywz7vk]  .mp-channel-entry--locked {
    opacity: 0.6;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-channel-entry--locked .mp-channel-toggle,
    .mp-page-container[b-fis5ywz7vk]  .mp-channel-entry--locked input {
        cursor: not-allowed;
    }

/* "Already in feed" badge shown in place of the visibility selector on a resend. */
.mp-page-container[b-fis5ywz7vk]  .mp-channel-already-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ssy-colour-palette-fresh-green, #4f7a1e);
    background: #f0f6e8;
    border: 1px solid #d3e6bb;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

/* Sub-option row — sender / channel selector shown under a checked channel */
.mp-page-container[b-fis5ywz7vk]  .mp-channel-sub {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.8rem 0.5rem 3.4rem; /* left-indent to align under the channel text */
    background: #f5f8fe;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-top: none;
    border-radius: 0 0 6px 6px;
    flex-wrap: wrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-sub-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    white-space: nowrap;
    min-width: 3.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-sub-select {
    flex: 1;
    min-width: 0;
    max-width: 280px;
    font-size: 0.82rem;
    padding: 0.3rem 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-sub-address {
    font-size: 0.72rem;
    color: var(--ssy-colour-palette-slate-gray);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-desc {
    font-size: 0.75rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-top: 2px;
}

/* Slim Navigator Feed row — toggle on the left, visibility inline on the right */
.mp-page-container[b-fis5ywz7vk]  .mp-channel-row--inline {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    cursor: default;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-toggle {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-inline-sub {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Active channel: connect the row to its expanded recipients tray below */
.mp-page-container[b-fis5ywz7vk]  .mp-channel-entry--active .mp-channel-row {
    border-color: var(--ssy-colour-main-deep-blue);
    border-radius: 6px 6px 0 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-recipients {
    padding: 0.6rem 0.8rem 0.7rem;
    background: #f5f8fe;
    border: 1px solid var(--ssy-colour-main-deep-blue);
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-from {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

/* Email "From" is fixed to the post's author — shown as read-only text, not a dropdown */
.mp-page-container[b-fis5ywz7vk]  .mp-channel-from-author {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ssy-colour-main-deep-blue);
    white-space: nowrap;
}

/* Note explaining that the email sender always follows the post's author */
.mp-page-container[b-fis5ywz7vk]  .mp-channel-from-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-names-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    cursor: pointer;
    user-select: none;
}

.mp-page-container[b-fis5ywz7vk]  .mp-channel-names-toggle input {
    cursor: pointer;
}

/* ── Distribution list (Recipients section) ──────────────────────────────── */

.mp-page-container[b-fis5ywz7vk]  .mp-dist-dedup-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #5a7585;
    font-style: italic;
    margin-bottom: 0.5rem;
}

/* ── Delivery: Email / WhatsApp split panes ──────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-deliv-panes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
}

.mp-page-container[b-fis5ywz7vk]  .mp-deliv-pane {
    flex: 1 1 320px;
    min-width: 0;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 8px;
    background: #fbfcfe;
    padding: 0.6rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-deliv-pane-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    padding: 0 0.15rem 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #E9EFF9;
}

/* Bulk department actions row, pinned above the grouped staff list */
.mp-page-container[b-fis5ywz7vk]  .mp-dept-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    background: #eef3fb;
    border-bottom: 1px solid #E9EFF9;
}

/* Department group header inside the staff list (sticky via mp-dist-subheader) */
.mp-page-container[b-fis5ywz7vk]  .mp-dept-header {
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    background: #dde8f7;
    border-top: 1px solid #c5d8ef;
    border-bottom: 1px solid #c5d8ef;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dept-header .mp-dist-member-name {
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Accordion sub-header (department / editing-team role). Split into two independent click targets:
   - mp-dept-toggle: just the checkbox + icon + name — the ONLY area that includes/excludes the group,
     so it can't be toggled by accident when reaching for the expander. Sized to its content.
   - mp-accordion-expand: fills the rest of the row (plus the count + chevron on the right) and only
     expands/collapses the member list. */
.mp-page-container[b-fis5ywz7vk]  .mp-dept-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.mp-page-container[b-fis5ywz7vk]  .mp-accordion-expand {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0.25rem 0.2rem 0.25rem 0.5rem;
    border: none;
    background: none;
    color: var(--ssy-colour-palette-slate-gray);
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.12s;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-accordion-expand:hover {
        color: var(--ssy-colour-main-deep-blue);
    }

/* Accordion headers stack as a list and open/close in place, so they should NOT stick to the top of
   the scroll area (multiple sticky headers piling up with shadows looked broken). Flat sub-headers
   elsewhere (Trigonal / Navigator client lists) keep the sticky behaviour. */
.mp-page-container[b-fis5ywz7vk]  .mp-dist-subheader.mp-accordion-header {
    position: static;
    box-shadow: none;
}

/* A deselected sticky sub-header (department, editing-team role, client/Trigonal list) must stay
   fully opaque — fading the whole bar (mp-dist-member--deselected) makes its background translucent
   and lets the rows scrolling beneath show through, which reads as ghosted/overlapping text. Keep
   the bar opaque and convey the deselected state by dimming only its contents. */
.mp-page-container[b-fis5ywz7vk]  .mp-dist-subheader.mp-dist-member--deselected {
    opacity: 1;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-subheader.mp-dist-member--deselected .mp-dist-member-info {
    opacity: 0.45;
}

/* A staff member nested under a department header — indented with a guide line */
.mp-page-container[b-fis5ywz7vk]  .mp-dept-member {
    position: relative;
    padding-left: 2.6rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dept-member .mp-dist-member-name {
    font-weight: 500;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dept-filter-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8aa0ab;
    margin-right: 0.2rem;
}

/* "All" / "Only my dept" quick actions in the department filter */
.mp-page-container[b-fis5ywz7vk]  .mp-dept-action {
    border: 1px solid var(--ssy-colour-main-deep-blue);
    border-radius: 12px;
    background: #fff;
    color: var(--ssy-colour-main-deep-blue);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.12rem 0.55rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dept-action:hover {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

/* Disabled quick-action (e.g. a department already fully added to the test list) */
.mp-page-container[b-fis5ywz7vk]  .mp-dept-action:disabled {
    opacity: 0.5;
    cursor: default;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-dept-action:disabled:hover {
        background: #fff;
        color: var(--ssy-colour-main-deep-blue);
    }

/* Destructive variant of a quick action - the All Staff box's "Clear all". Red so it reads as
   the opposite of "All", and it goes flush right, away from the additive actions. */
.mp-page-container[b-fis5ywz7vk]  .mp-dept-action--clear {
    margin-left: auto;
    border-color: var(--ssy-colour-palette-crimson-red);
    color: var(--ssy-colour-palette-crimson-red);
}

    .mp-page-container[b-fis5ywz7vk]  .mp-dept-action--clear:hover:not(:disabled) {
        background: var(--ssy-colour-palette-crimson-red);
        color: #fff;
    }

    .mp-page-container[b-fis5ywz7vk]  .mp-dept-action--clear:disabled:hover {
        background: #fff;
        color: var(--ssy-colour-palette-crimson-red);
    }

/* Blocking notice shown inside the All Staff box when the selection has been emptied. The step
   cannot advance in this state (see MarketPost_130_Delivery.IsValid), so it is styled as an
   error rather than an amber note. */
.mp-page-container[b-fis5ywz7vk]  .mp-dist-required {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.45rem 0.7rem 0.6rem;
    padding: 0.45rem 0.6rem;
    background: #fdecee;
    border: 1px solid #f3c2c6;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ssy-colour-palette-crimson-red);
}

/* The "n selected" badge turns red when n is 0, so an emptied box is obvious while collapsed. */
.mp-page-container[b-fis5ywz7vk]  .mp-dist-count--empty {
    color: var(--ssy-colour-palette-crimson-red);
}

/* Test-recipient picker — per-person Add / Added toggle and per-department "Add all" button.
   Both sit flush-right in their row so the Add control lines up down the list. */
.mp-page-container[b-fis5ywz7vk]  .mp-test-pick-btn,
.mp-page-container[b-fis5ywz7vk]  .mp-test-dept-add {
    margin-left: auto;
    flex-shrink: 0;
}

/* Added state — filled to read as "already selected", matching the deep-blue hover fill */
.mp-page-container[b-fis5ywz7vk]  .mp-test-pick-btn--added {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

/* ── Test-recipient picker popup ─────────────────────────────────────────── */
/* The popup content column. Nothing here should overflow the modal horizontally — long emails
   ellipsize rather than pushing the Add button off the edge. */
.mp-page-container[b-fis5ywz7vk]  .mp-test-picker {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Let the name/email column take the free space and truncate, so the row's Add control always stays
   on-screen inside the modal. */
.mp-page-container[b-fis5ywz7vk]  .mp-test-picker .mp-dist-member-info {
    flex: 1 1 auto;
}

.mp-page-container[b-fis5ywz7vk]  .mp-test-picker .mp-dist-member {
    cursor: default;
}

/* Prompt shown before the user searches — keeps the popup calm instead of listing all staff. */
.mp-page-container[b-fis5ywz7vk]  .mp-test-search-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding: 0.7rem 0.8rem;
    border: 1px dashed var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    background: #f5f8fe;
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
}

/* Search results and chosen recipients each scroll within their own bounded area so the popup as a
   whole stays within the viewport (the modal is also IsScrollable as a backstop). */
.mp-page-container[b-fis5ywz7vk]  .mp-test-results {
    max-height: 320px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-test-recipients {
    max-height: 170px;
}

/* Chosen-recipients header: count on the left, "Remove all" reset action on the right */
.mp-page-container[b-fis5ywz7vk]  .mp-test-recipients-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-test-recipients-head .mp-route-modal-subtitle {
        margin-bottom: 0;
    }

/* "Remove all" quick action — a subtle destructive tint, going solid red on hover */
.mp-page-container[b-fis5ywz7vk]  .mp-test-remove-all {
    flex-shrink: 0;
    border-color: var(--ssy-colour-palette-crimson-red);
    color: var(--ssy-colour-palette-crimson-red);
}

    .mp-page-container[b-fis5ywz7vk]  .mp-test-remove-all:hover {
        background: var(--ssy-colour-palette-crimson-red);
        color: #fff;
    }

/* Flat person row in the picker (no department grouping) — department shown as a chip after the name */
.mp-page-container[b-fis5ywz7vk]  .mp-test-person-dept {
    margin-left: 0.4rem;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ssy-colour-main-deep-blue);
    background: #E9EFF9;
    border-radius: 8px;
    padding: 0.05rem 0.4rem;
    white-space: nowrap;
}

/* Ad-hoc Trigonal list — "added" badge, remove button, and add picker */
.mp-page-container[b-fis5ywz7vk]  .mp-adhoc-badge {
    margin-left: 0.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ssy-colour-main-deep-blue);
    background: #E9EFF9;
    border-radius: 8px;
    padding: 0.02rem 0.4rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-adhoc-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border: none;
    background: transparent;
    color: var(--ssy-colour-palette-light-bluegray);
    cursor: pointer;
    border-radius: 50%;
}

.mp-page-container[b-fis5ywz7vk]  .mp-adhoc-remove:hover {
    color: var(--ssy-colour-palette-crimson-red);
    background: #fdeaea;
}

/* Test Send — chip list of added emails/phone numbers, plus the "+ Add" trigger button */
.mp-page-container[b-fis5ywz7vk]  .mp-test-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-test-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 14px;
    background: #f5f8fe;
    padding: 0.15rem 0.3rem 0.15rem 0.7rem;
    font-size: 0.78rem;
    color: #2a4a5a;
}

/* The auto-populated post author, set apart from typed test recipients. */
.mp-page-container[b-fis5ywz7vk]  .mp-test-chip--author {
    border-color: var(--ssy-colour-main-deep-blue);
    background: #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-test-add-btn {
    border-style: dashed;
}

.mp-page-container[b-fis5ywz7vk]  .mp-trigonal-add {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-trigonal-add-select {
    flex: 1;
    min-width: 0;
    max-width: 320px;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
}

/* Ad-hoc list picker popup — search box + selectable rows */
.mp-page-container[b-fis5ywz7vk]  .mp-adhoc-search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-adhoc-pick-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #E9EFF9;
    border-radius: 4px;
    background: #f5f8fe;
}

/* "View people" button on a Trigonal list row */
.mp-page-container[b-fis5ywz7vk]  .mp-dist-people-btn {
    margin-left: auto;
    flex-shrink: 0;
    border: 1px solid var(--ssy-colour-main-deep-blue);
    border-radius: 4px;
    background: #fff;
    color: var(--ssy-colour-main-deep-blue);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-people-btn:hover {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

@media (max-width: 720px) {
    .mp-page-container[b-fis5ywz7vk]  .mp-deliv-pane {
        flex-basis: 100%;
    }
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-entry {
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-entry--active {
    border-color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.15rem 0.6rem 0.15rem 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-desc {
    font-size: 0.75rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-top: 2px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ssy-colour-main-deep-blue);
    white-space: nowrap;
    margin-left: auto;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    color: var(--ssy-colour-palette-slate-gray);
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: background 0.12s;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-dist-expand-btn:hover {
        background: #e8f0fe;
        color: var(--ssy-colour-main-deep-blue);
    }

/* Scrollable member list */
.mp-page-container[b-fis5ywz7vk]  .mp-dist-members {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    border-top: 1px solid #e0e8f0;
    background: #f5f8fe;
}

/* Sub-section header inside a scrollable mp-dist-members — stays pinned at top while scrolling.
   Must carry a solid, opaque background (rows scroll beneath it; a transparent header lets them
   show through, which looks like ghosted/overlapping text) and be visually distinct from the
   #f5f8fe list so it reads clearly as a group header. */
.mp-page-container[b-fis5ywz7vk]  .mp-dist-subheader {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #d6e4f5;
    border-top: 1px solid #b9d0ec;
    border-bottom: 1px solid #b9d0ec;
    box-shadow: 0 2px 5px -3px rgba(22, 62, 159, 0.4);
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-subheader .mp-dist-member-name {
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
}

/* Staff / Clients divider inside the Navigator Mailing List section */
.mp-page-container[b-fis5ywz7vk]  .mp-dist-group-label {
    padding: 0.35rem 0.8rem 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ssy-colour-palette-slate-gray);
    background: #f5f8fe;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-member {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.1s;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-dist-member:hover {
        background: #e8f0fe;
    }

.mp-page-container[b-fis5ywz7vk]  .mp-dist-member--deselected {
    opacity: 0.45;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-member-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-member-name {
    font-weight: 500;
    color: var(--ssy-colour-main-simpson-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-page-container[b-fis5ywz7vk]  .mp-dist-member-addr {
    font-size: 0.7rem;
    color: var(--ssy-colour-palette-slate-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-page-container[b-fis5ywz7vk]  .mp-badge {
    font-size: 0.65rem;
    background: #E9EFF9;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 10px;
    padding: 1px 6px;
    color: var(--ssy-colour-palette-slate-gray);
    font-weight: 400;
}

/* Staff / client list-type pills */
.mp-page-container[b-fis5ywz7vk]  .mp-badge--staff {
    background: #EAF3EC;
    border-color: #b8d6c0;
    color: #2f6b42;
}

.mp-page-container[b-fis5ywz7vk]  .mp-badge--client {
    background: #EEF2FC;
    border-color: #c3d0ea;
    color: var(--ssy-colour-main-simpson-blue);
}

/* ── Preview card — matches feed card layout ─────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-preview-card {
    background: #fff;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-left: 3px solid var(--ssy-colour-main-deep-blue);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-preview-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}

/* Visibility pill next to type badge */
.mp-page-container[b-fis5ywz7vk]  .mp-preview-vis-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    background: #E9EFF9;
    color: var(--ssy-colour-main-deep-blue);
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-preview-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ssy-colour-palette-light-bluegray);
    flex-shrink: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-preview-author {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ssy-colour-palette-slate-gray);
}

/* Tag chips in the preview card */
.mp-page-container[b-fis5ywz7vk]  .mp-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-preview-tag {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    background: #E9EFF9;
    color: var(--ssy-colour-main-deep-blue);
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-preview-type-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-preview-date {
    font-size: 0.75rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-preview-headline {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-preview-summary {
    font-size: 0.82rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-bottom: 0.6rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-preview-body-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-bottom: 0.4rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-preview-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.73rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-bottom: 0.4rem;
}

/* ── Validation errors ───────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-validation-errors {
    background: #fff3f3;
    border: 1px solid var(--ssy-colour-palette-crimson-red);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
    color: var(--ssy-colour-palette-crimson-red);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-validation-errors ul {
        margin: 0;
        padding-left: 1rem;
    }

/* Non-blocking amber note shown when a Custom schedule is backdated into the past. */
.mp-page-container[b-fis5ywz7vk]  .mp-schedule-past-note {
    background: #fffbeb;
    border: 1px solid #f6e0a3;
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
    color: #B7791F;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

/* ── Copy-for-platform row ───────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-copy-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1.5px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 8px;
    background: #fff;
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.13s, color 0.13s, background 0.13s;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-copy-btn:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
    background: #EEF2FC;
}

.mp-page-container[b-fis5ywz7vk]  .mp-copy-btn--copied {
    border-color: var(--ssy-colour-palette-olive-green);
    background: #f3f7e8;
    color: #3d5200;
}

/* ── Next button wrapper + validation hint ───────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-step-next-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-step-next-hint {
    font-size: 0.72rem;
    color: var(--ssy-colour-palette-crimson-red);
    text-align: right;
}

/* ── Send row ────────────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-send-row {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding-top: 1rem;
}

/* Post-send copy panel */
.mp-page-container[b-fis5ywz7vk]  .mp-send-copy-panel {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    background: #f5f8fe;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 8px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-send-copy-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-bottom: 0.6rem;
}

/* ── Post-send success banner ────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-send-success-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: linear-gradient(135deg, #f3f8ec 0%, #e8f2dc 100%);
    border: 1.5px solid var(--ssy-colour-palette-olive-green);
    border-left: 4px solid var(--ssy-colour-palette-olive-green);
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-send-success-icon {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--ssy-colour-palette-olive-green);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(145, 165, 39, 0.35);
    margin-top: 2px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-send-success-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-send-success-title {
    font-size: 1rem;
    font-weight: 700;
    color: #3d5200;
    letter-spacing: 0.01em;
}

.mp-page-container[b-fis5ywz7vk]  .mp-send-success-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-send-success-headline {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
    line-height: 1.4;
    margin-top: 0.1rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-send-success-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* ── Test Send completion banner — deliberately distinct from the green post-send success banner ── */
.mp-page-container[b-fis5ywz7vk]  .mp-test-sent-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, #eef2fc 0%, #e2eafb 100%);
    border: 1.5px solid var(--ssy-colour-main-deep-blue);
    border-left: 4px solid var(--ssy-colour-main-deep-blue);
    border-radius: 10px;
    margin-top: 0.7rem;
}

/* Failure variant — a test send that reported errors. Amber, so it reads as "needs attention"
   rather than "sent OK"; the banner's meta line carries the actionable reason. */
.mp-page-container[b-fis5ywz7vk]  .mp-test-sent-banner--issue {
    background: linear-gradient(135deg, #fdf4e3 0%, #fbe9c7 100%);
    border-color: #B7791F;
    border-left-color: #B7791F;
}

.mp-page-container[b-fis5ywz7vk]  .mp-test-sent-icon {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--ssy-colour-main-deep-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(22, 62, 159, 0.35);
    margin-top: 1px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-test-sent-banner--issue .mp-test-sent-icon {
    background: #B7791F;
    box-shadow: 0 2px 8px rgba(183, 121, 31, 0.35);
}

.mp-page-container[b-fis5ywz7vk]  .mp-test-sent-banner--issue .mp-test-sent-title,
.mp-page-container[b-fis5ywz7vk]  .mp-test-sent-banner--issue .mp-test-sent-meta {
    color: #8a5a12;
}

.mp-page-container[b-fis5ywz7vk]  .mp-test-sent-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    letter-spacing: 0.01em;
}

.mp-page-container[b-fis5ywz7vk]  .mp-test-sent-meta {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ssy-colour-main-deep-blue);
    margin-top: 0.15rem;
}

/* ── Feed ────────────────────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-feed-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem 0 1.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-meta {
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-top: 2px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-search-outer {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 10px;
    background: #fff;
    padding: 0 0.7rem;
    transition: border-color 0.15s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-search-outer:focus-within {
    border-color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-search {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: #1a2b3c;
    padding: 0.55rem 0.4rem;
    font-family: inherit;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-search::placeholder {
    color: var(--ssy-colour-palette-light-bluegray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--ssy-colour-palette-light-bluegray);
    padding: 0 0.1rem;
    line-height: 1;
    transition: color 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-search-clear:hover {
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-active-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-date-group {
    margin-bottom: 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-date-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    margin-top: 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-date-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ssy-colour-palette-slate-gray);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-date-line {
    flex: 1;
    height: 1px;
    background: #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-card {
    background: #fff;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-left: 3px solid var(--ssy-colour-main-deep-blue);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    transition: box-shadow 0.15s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-card:hover {
    box-shadow: 0 3px 10px rgba(22, 62, 159, 0.09);
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-card--clickable {
    cursor: pointer;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-card--clickable:hover {
    border-left-color: var(--ssy-colour-main-simpson-blue);
}

/* ── Post detail popup ───────────────────────────────────── */
.mp-detail-wrap[b-fis5ywz7vk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
    max-height: 75vh;
    overflow-y: auto;
}

.mp-detail-html[b-fis5ywz7vk] {
    font-size: 0.85rem;
    line-height: 1.7;
    color: #1a2b3c;
}

.mp-detail-html p[b-fis5ywz7vk] { margin: 0 0 0.5rem; }

.mp-detail-loading[b-fis5ywz7vk] {
    font-size: 0.82rem;
    color: var(--ssy-colour-palette-slate-gray);
    padding: 0.5rem 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}

/* Badge cluster: type code + visibility — pinned top-right */
.mp-page-container[b-fis5ywz7vk]  .mp-feed-card-header-badges {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-type-badge {
    flex-shrink: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
    letter-spacing: 0.02em;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-avatar--blue   { background: #e0e7ff; color: #3730a3; }
.mp-page-container[b-fis5ywz7vk]  .mp-feed-avatar--green  { background: #dcfce7; color: #166534; }
.mp-page-container[b-fis5ywz7vk]  .mp-feed-avatar--amber  { background: #fef3c7; color: #92400e; }
.mp-page-container[b-fis5ywz7vk]  .mp-feed-avatar--purple { background: #f5f3ff; color: #6d28d9; }
.mp-page-container[b-fis5ywz7vk]  .mp-feed-avatar--teal   { background: #ccfbf1; color: #0f766e; }
.mp-page-container[b-fis5ywz7vk]  .mp-feed-avatar--grey   { background: #E9EFF9; color: var(--ssy-colour-palette-slate-gray); }

.mp-page-container[b-fis5ywz7vk]  .mp-feed-card-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.73rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ssy-colour-palette-light-bluegray);
    display: inline-block;
    flex-shrink: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-time {
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-vis-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: #E9EFF9;
    color: var(--ssy-colour-main-deep-blue);
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-card-summary {
    font-size: 0.82rem;
    color: var(--ssy-colour-palette-slate-gray);
    line-height: 1.6;
    margin-bottom: 0.65rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-card-tags .mp-tag-chip {
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-empty-sub {
    font-size: 0.8rem;
    color: var(--ssy-colour-palette-light-bluegray);
    max-width: 320px;
}

/* ── Feed filter buttons ─────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-wrap {
    position: relative;
    flex-shrink: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.35rem;
    padding: 0 0.85rem;
    border: 1.5px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 10px;
    background: #fff;
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: border-color 0.13s, color 0.13s, background 0.13s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-btn:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-btn--active {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
    background: #EEF2FC;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-chevron {
    font-size: 0.6rem;
    opacity: 0.6;
    margin-left: 0.1rem;
}

/* ── Filter dropdown panel ───────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 320px;
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem 0.4rem;
    border-bottom: 1px solid #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ssy-colour-palette-slate-gray);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-clear-link {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ssy-colour-palette-slate-gray);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: color 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-clear-link:hover {
    color: var(--ssy-colour-palette-crimson-red);
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-scroll {
    overflow-y: auto;
    max-height: 380px;
    padding: 0.4rem 0.6rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-scroll::-webkit-scrollbar { width: 4px; }
.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-scroll::-webkit-scrollbar-thumb {
    background: #E9EFF9;
    border-radius: 2px;
}

/* Group label inside the type filter */
.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ssy-colour-main-deep-blue);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.5rem 0.4rem 0.2rem;
    border-top: 1px solid #E9EFF9;
    margin-top: 0.25rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-group-label:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0.25rem;
}

/* Each filter row (checkbox + label) */
.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    color: #1a2b3c;
    transition: background 0.1s;
    user-select: none;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-item:hover {
    background: #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-check {
    width: 1rem;
    height: 1rem;
    accent-color: var(--ssy-colour-main-deep-blue);
    cursor: pointer;
    flex-shrink: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-empty {
    font-size: 0.8rem;
    color: var(--ssy-colour-palette-light-bluegray);
    padding: 0.75rem 0.4rem;
    font-style: italic;
}

/* Done button row */
.mp-page-container[b-fis5ywz7vk]  .mp-feed-filter-panel-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.65rem;
    border-top: 1px solid #E9EFF9;
}

/* Clickable author name in card meta row */
.mp-page-container[b-fis5ywz7vk]  .mp-feed-meta-author {
    background: none;
    border: none;
    font: inherit;
    font-size: 0.73rem;
    color: var(--ssy-colour-palette-slate-gray);
    cursor: pointer;
    padding: 0;
    transition: color 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-feed-meta-author:hover {
    color: var(--ssy-colour-main-deep-blue);
    text-decoration: underline;
}

/* ── Shared placeholder panel ────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-placeholder-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.5rem;
    border: 1px dashed var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    background: #E9EFF9;
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.82rem;
    text-align: center;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-placeholder-panel--inline {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.5rem 0.8rem;
    }

.mp-page-container[b-fis5ywz7vk]  .mp-placeholder-note {
    font-size: 0.75rem;
    color: var(--ssy-colour-palette-slate-gray);
    max-width: 420px;
    margin: 0;
}

/* ── Admin inner tab bar ─────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-tab-bar {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--ssy-colour-palette-light-bluegray);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-tab {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    border: none;
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-tab:hover {
    background: #E9EFF9;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-tab--active {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-tab--active .mp-admin-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ── Admin panel ─────────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-panel {
    padding: 0.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: #fff0f0;
    border: 1px solid var(--ssy-colour-palette-crimson-red);
    border-radius: 6px;
    color: var(--ssy-colour-palette-crimson-red);
    font-size: 0.8rem;
}

/* ── Admin section ───────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 0.35rem;
    height: 1.3rem;
    border-radius: 999px;
    background: #E9EFF9;
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.7rem;
    font-weight: 600;
}

/* ── Admin table ─────────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-table {
    width: 100%;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-empty {
    color: #a0aab4;
    font-style: italic;
    text-align: center;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-desc {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-actions {
    width: 2.5rem;
    text-align: center;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-table .edit {
    text-align: center;
    background: none;
    color: inherit;
    border: none;
    padding: 0.2rem;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    vertical-align: middle;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-table .edit:hover {
    background-color: #E9EFF9;
    border-radius: 4px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-add-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
}

/* Wider filter select shared by Post Types (group), Commentary Types (post type), Tags (parent) */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-filter-select {
    min-width: 180px;
    width: 100%;
    flex: 1;
}

/* Email link in the Authors table */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-email-link {
    color: var(--ssy-colour-main-deep-blue);
    text-decoration: none;
    font-size: 0.82rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-email-link:hover {
    text-decoration: underline;
}

.mp-page-container[b-fis5ywz7vk]  .ssy-table-dw tbody tr:hover .mp-admin-email-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Null / not-applicable placeholder */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-na {
    color: #9cb0bb;
}

/* Identity user ID cell in the Authors table — muted in normal state, readable on row hover */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-uid-cell {
    font-size: 0.72rem;
    color: #9cb0bb;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .ssy-table-dw tbody tr:hover .mp-admin-uid-cell {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ── Admin popup form ────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-form {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: start;
    padding: 0.75rem 1rem;
}

/* Keep single-line labels vertically centred against plain inputs */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-form label:not(.ssy-custom-checkbox-container):not([style]) {
    padding-top: 0.35rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-form label:not(.ssy-custom-checkbox-container) {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--ssy-colour-palette-slate-gray);
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-form-short {
    max-width: 100px;
}

/* ── Staff / Client segmented switch (admin popups) ──────── */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-seg {
    display: inline-flex;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    overflow: hidden;
    background: #f9fafb;
    width: fit-content;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-seg-btn {
    border: none;
    background: transparent;
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ssy-colour-palette-slate-gray);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-seg-btn + .mp-admin-seg-btn {
    border-left: 1px solid var(--ssy-colour-palette-light-bluegray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-seg-btn:hover:not(:disabled):not(.mp-admin-seg-btn--on) {
    background: #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-seg-btn--on {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-seg-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

/* ── Post Type role picker ───────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-picker {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    background: #f9fafb;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-picker::-webkit-scrollbar { width: 4px; }
.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-picker::-webkit-scrollbar-thumb {
    background: var(--ssy-colour-palette-light-bluegray);
    border-radius: 2px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.1s;
    user-select: none;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-item:hover {
    background: #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-item--selected {
    background: #EEF2FC;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-item input[type="checkbox"] {
    accent-color: var(--ssy-colour-main-deep-blue);
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    cursor: pointer;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-name {
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    font-size: 0.75rem;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-display {
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-empty {
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-light-bluegray);
    font-style: italic;
    padding: 0.25rem 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-role-hint {
    font-size: 0.7rem;
    color: #9cb0bb;
    font-style: italic;
    padding-top: 0.35rem;
    border-top: 1px solid #E9EFF9;
    margin-top: 0.2rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-date-hint {
    font-size: 0.7rem;
    color: #9cb0bb;
    margin-top: 0.3rem;
    line-height: 1.5;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-date-hint code {
    font-size: 0.68rem;
    background: #E9EFF9;
    color: var(--ssy-colour-main-deep-blue);
    border-radius: 3px;
    padding: 1px 4px;
    font-family: ui-monospace, monospace;
}

/* Template admin — link type row (checkbox + optional display name input) */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-link-type-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.2rem 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-link-dn-input {
    flex: 1 1 180px;
    min-width: 0;
    font-size: 0.75rem !important;
    height: 1.8rem !important;
    padding: 0.2rem 0.4rem !important;
}

/* Template admin — per-type Min/Max amount inputs */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-amount-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-amount-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-admin-amount-input {
    width: 3.2rem;
    font-size: 0.75rem !important;
    height: 1.8rem !important;
    padding: 0.2rem 0.3rem !important;
}

/* Template admin — commentary types note */
.mp-page-container[b-fis5ywz7vk]  .mp-admin-template-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--ssy-colour-palette-slate-gray);
    font-style: italic;
    background: #f3f7f9;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 5px;
    padding: 0.4rem 0.55rem;
    line-height: 1.5;
}

/* ── Scheduling row ──────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-schedule-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Timezone selector row */
.mp-page-container[b-fis5ywz7vk]  .mp-schedule-tz-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-tz-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
    white-space: nowrap;
    min-width: 5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-tz-select-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-tz-select {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-tz-detected {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--ssy-colour-palette-olive-green);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Confirmation card shown whenever a schedule is active */
.mp-page-container[b-fis5ywz7vk]  .mp-schedule-confirmation {
    margin-top: 0.65rem;
    padding: 0.6rem 0.85rem;
    background: #EEF2FC;
    border: 1px solid var(--ssy-colour-main-deep-blue);
    border-left: 3px solid var(--ssy-colour-main-deep-blue);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-confirmation-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-confirmation-local strong {
    font-weight: 700;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-date-only-note {
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
    font-style: italic;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 5px;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ssy-colour-palette-slate-gray);
    cursor: pointer;
    transition: border-color 0.13s, color 0.13s, background 0.13s;
    user-select: none;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-option input[type="radio"] {
    display: none;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-option:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
    /* override ssy-btn:hover which would fill with var(--ssy-colour-main-deep-blue) background */
    background: #f0f4fd !important;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-option:hover path {
    fill: var(--ssy-colour-main-deep-blue) !important;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-option--active {
    border-color: var(--ssy-colour-main-deep-blue);
    background: var(--ssy-colour-main-deep-blue) !important;
    color: #fff !important;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-option--active:hover {
    background: var(--ssy-colour-main-simpson-blue) !important;
    border-color: var(--ssy-colour-main-simpson-blue) !important;
    color: #fff !important;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-option--active path,
.mp-page-container[b-fis5ywz7vk]  .mp-schedule-option--active:hover path {
    fill: #fff !important;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-inputs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-schedule-date,
.mp-page-container[b-fis5ywz7vk]  .mp-schedule-time {
    width: auto;
    font-size: 0.82rem;
}

/* ── Drag handle (Link and File zone items) ──────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-zone-drag-handle {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--ssy-colour-palette-light-bluegray);
    cursor: grab;
    user-select: none;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item:hover .mp-zone-drag-handle {
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item:active .mp-zone-drag-handle {
    cursor: grabbing;
}

/* Compact status pill replacing the old full-text label */
.mp-page-container[b-fis5ywz7vk]  .mp-zone-item-status {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item-status--url {
    background: #e0f4fb;
    color: #007aab;
    border: 1px solid #b0dff0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-zone-item-status--uploaded {
    background: #f3f7e8;
    color: #3d5200;
    border: 1px solid #c8de90;
}

/* ── Link form (inside content area) ────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-link-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
}

/* ── File form (display name + FileUploader) ─────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-file-form {
    display: flex;
    flex-direction: column;
}

.mp-page-container[b-fis5ywz7vk]  .mp-file-form-name {
    padding: 0.85rem 0.9rem 0.6rem;
    border-bottom: 1px solid #E9EFF9;
}

/* Compact the FileUploader when embedded in the content area */
.mp-page-container[b-fis5ywz7vk]  .mp-file-form .file-uploader {
    max-width: 100%;
    margin: 0;
    padding: 1rem 1rem 0.75rem;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

.mp-page-container[b-fis5ywz7vk]  .mp-file-form .uploader-header {
    display: none;
}

.mp-page-container[b-fis5ywz7vk]  .mp-file-form .upload-area {
    padding: 0.9rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
}

/* FileUploader ships sizes meant for a standalone page. Inside the wizard its confirm panel and
   its post-upload status block together added roughly 300px, which is what pushed the Next button
   below the fold - compact both so picking and confirming a file stays on one screen. */
.mp-page-container[b-fis5ywz7vk]  .mp-file-form .confirm-panel {
    width: 100%;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0;
    border-radius: 6px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-file-form .confirm-title {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-file-form .metadata-table {
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-file-form .metadata-table th,
    .mp-page-container[b-fis5ywz7vk]  .mp-file-form .metadata-table td {
        padding: 0.28rem 0.5rem;
    }

.mp-page-container[b-fis5ywz7vk]  .mp-file-form .upload-status {
    margin-top: 0;
    padding: 0.6rem 0.75rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-file-form .file-details {
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-file-form .action-buttons {
    margin-top: 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-file-form .upload-icon {
    font-size: 2rem;
    margin-bottom: 0.4rem;
}

/* ── Tag chip (used in feed cards + filter pills) ────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 20px;
    background: #fff;
    color: var(--ssy-colour-palette-slate-gray);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    white-space: nowrap;
    line-height: 1;
}

    .mp-page-container[b-fis5ywz7vk]  .mp-tag-chip:hover {
        border-color: var(--ssy-colour-main-crystal-blue);
        color: var(--ssy-colour-main-simpson-blue);
        background: #f0f7fc;
    }

    .mp-page-container[b-fis5ywz7vk]  .mp-tag-chip--selected {
        border-color: var(--ssy-colour-main-deep-blue);
        background: var(--ssy-colour-main-deep-blue);
        color: #fff;
    }

    .mp-page-container[b-fis5ywz7vk]  .mp-tag-chip--selected:hover {
        background: var(--ssy-colour-main-simpson-blue);
        border-color: var(--ssy-colour-main-simpson-blue);
        color: #fff;
    }

/* ── Tag tree (Classify step) ────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.25rem 0;
}

/* Each root group holds the root node + its children block */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Shared button reset & base */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-node {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    background: #fff;
    color: var(--ssy-colour-palette-slate-gray);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    white-space: nowrap;
    line-height: 1;
    text-align: left;
}

/* Root node — slightly larger, bold */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-node--root {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
}

/* Child / grandchild — slightly smaller */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-node--child {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
}

/* Hover */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-node:hover {
    border-color: var(--ssy-colour-main-crystal-blue);
    color: var(--ssy-colour-main-simpson-blue);
    background: #f0f7fc;
}

/* Selected — solid blue */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-node--selected {
    border-color: var(--ssy-colour-main-deep-blue);
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-node--selected:hover {
    background: var(--ssy-colour-main-simpson-blue);
    border-color: var(--ssy-colour-main-simpson-blue);
    color: #fff;
}

/* Partially selected — outline blue, indicating a child is active */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-node--partial {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
    background: #EEF2FC;
}

/* Indicator cell (tick / dash) */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-partial-dash {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

/* Children container — indented with a vertical guide line */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-children {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.2rem;
    margin-left: 0.65rem;
    padding-left: 1rem;
    /* vertical guide line */
    border-left: 2px solid #E9EFF9;
}

/* L2 children (grandchildren) inherit indentation */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-children--l2 {
    margin-top: 0.15rem;
    margin-left: 0.5rem;
    border-left-color: #F0F4FD;
}

/* Each child row — draws the horizontal connecting branch */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-child-row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-left: 0.6rem;
}

/* Horizontal branch line from the vertical guide to the node */
.mp-page-container[b-fis5ywz7vk]  .mp-tag-tree-child-row::before {
    content: "";
    position: absolute;
    left: -0.05rem;
    top: 0.65rem;
    width: 0.65rem;
    height: 2px;
    background: #E9EFF9;
}

/* ── Email Config / WhatsApp Config form helpers ─────────── */

/* From row: email + name side by side */
.mp-page-container[b-fis5ywz7vk]  .mp-email-from-row {
    display: flex;
    gap: 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-email-from-row .form-control {
    flex: 1;
    min-width: 0;
}

/* Checks row: Staff Only + Attach Post Files side by side */
.mp-page-container[b-fis5ywz7vk]  .mp-email-checks-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 0.35rem 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-email-check-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 180px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-email-check-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ssy-colour-palette-slate-gray);
}

/* HTML body split panel: textarea on left, iframe preview on right */
.mp-page-container[b-fis5ywz7vk]  .mp-email-body-section {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-email-body-section > label {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--ssy-colour-palette-slate-gray);
    padding-top: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-email-split-wrap {
    display: flex;
    gap: 0.5rem;
    height: 380px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-email-html-textarea {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    resize: none;
    background: #fafbfc;
    color: #1a2b3c;
    transition: border-color 0.12s, outline 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-email-html-textarea:focus {
    outline: 2px solid var(--ssy-colour-main-deep-blue);
    outline-offset: 1px;
    border-color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-email-preview-frame {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 4px;
    background: #fff;
}

/* JSON row: Default Email Variables + Settings side by side */
.mp-page-container[b-fis5ywz7vk]  .mp-email-json-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 1rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-email-json-field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-email-json-textarea {
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    resize: vertical;
}

/* ── Analytics tab ───────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-an-controls {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-control {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Let the post selector stretch to fill the row */
/* Pushes a control to the far end of the selector row — the refresh button, which is an action
   rather than part of the selection sequence. */
.mp-page-container[b-fis5ywz7vk]  .mp-an-control--right {
    margin-left: auto;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-control--grow {
    flex: 1 1 460px;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-select {
    min-width: 260px;
}

/* The post dropdown is the widest control */
.mp-page-container[b-fis5ywz7vk]  .mp-an-select--wide {
    width: 100%;
    min-width: 460px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-hint {
    color: #6b7c88;
    font-style: italic;
    padding: 0.75rem 0;
}

/* KPI strip */
.mp-page-container[b-fis5ywz7vk]  .mp-an-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0.5rem 0 1.25rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi {
    --accent: var(--ssy-colour-main-deep-blue);
    --accent-soft: #E9EFF9;
    position: relative;
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.95rem 1rem 0.9rem 1.1rem;
    border: 1px solid #DCE6EC;
    border-radius: 12px;
    background: linear-gradient(160deg, #ffffff 0%, var(--accent-soft) 220%);
    box-shadow: 0 1px 2px rgba(22, 62, 159, 0.04);
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Accent stripe down the left edge */
.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 62, 159, 0.10);
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi-val {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi-unit {
    font-size: 1rem;
    font-weight: 700;
    margin-left: 1px;
    opacity: 0.7;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi-lbl {
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7c88;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Navigator colour accents */
.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi--blue  { --accent: var(--ssy-colour-main-deep-blue); --accent-soft: #E9EFF9; }
.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi--green { --accent: #2E9E5B; --accent-soft: #E8F6EE; }
.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi--gold  { --accent: #B5852A; --accent-soft: #FAF1DD; }
.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi--tan   { --accent: #867754; --accent-soft: #F2EFE7; }
.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi--red   { --accent: #C0392B; --accent-soft: #FBE6E3; }
.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi--slate { --accent: #51606B; --accent-soft: #EDF1F3; }
.mp-page-container[b-fis5ywz7vk]  .mp-an-kpi--unsub { --accent: #7E5AA2; --accent-soft: #F1ECF7; }

/* Background-refresh indicator */
.mp-page-container[b-fis5ywz7vk]  .mp-an-refreshing {
    margin-left: 0.4rem;
    font-style: italic;
    color: #8a98a3;
}

/* Analytics channel sub-tabs (Email / WhatsApp) */
/* View switcher on one side, copy-link on the other. */
.mp-page-container[b-fis5ywz7vk]  .mp-an-viewbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-viewbar .mp-an-channel-tabs {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-channel-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #E1E8ED;
}

/* Links out to the email as it was delivered. */
.mp-page-container[b-fis5ywz7vk]  .mp-an-sent-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-sent-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid #B5CBD6;
    border-radius: 4px;
    background: #fff;
    color: #163E9F;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-sent-link:hover {
    background: #E9EFF9;
    border-color: #163E9F;
    text-decoration: none;
}

/* The per-recipient variant is icon-only and sits in a table cell. */
.mp-page-container[b-fis5ywz7vk]  .mp-an-sent-link--row {
    padding: 0.15rem 0.35rem;
    border-color: transparent;
    background: transparent;
    color: #405864;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-sent-link--row:hover {
    color: #163E9F;
    border-color: #B5CBD6;
}

/* Internal / external marker, used in the audience table and the recipient list. */
.mp-page-container[b-fis5ywz7vk]  .mp-an-audience-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: baseline;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-audience-dot--internal { background: #163E9F; }
.mp-page-container[b-fis5ywz7vk]  .mp-an-audience-dot--external { background: #009DC9; }

/* Explanatory footnote under an analytics table. */
.mp-page-container[b-fis5ywz7vk]  .mp-an-audience-note {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    line-height: 1.5;
    color: #405864;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-channel-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7c88;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.12s, border-color 0.12s;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-channel-tab:hover {
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-channel-tab--active {
    color: var(--ssy-colour-main-deep-blue);
    border-bottom-color: var(--ssy-colour-main-deep-blue);
}

/* Status pill (WhatsApp per-message delivery state) */
.mp-page-container[b-fis5ywz7vk]  .mp-an-status {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: #EEF2F5;
    color: var(--ssy-colour-palette-slate-gray);
    white-space: nowrap;
}

/* Status pill colours — matched to the donut/funnel palette */
.mp-page-container[b-fis5ywz7vk]  .mp-an-status--bad {
    background: #FBE6E3;
    color: #B0281B;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-status--read {
    background: #E8F6EE;
    color: #1E7A45;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-status--delivered {
    background: #E9EFF9;
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-status--sent {
    background: #FAF1DD;
    color: #8A6410;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-status--pending {
    background: #EEF2F5;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-status--unsub {
    background: #F1ECF7;
    color: #7E5AA2;
}

/* Unsubscribed rows are informational only — not expandable */
.mp-page-container[b-fis5ywz7vk]  .mp-an-job-row--static {
    cursor: default;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-job-row--static:hover {
    background-color: transparent;
}

/* Post heading */
.mp-page-container[b-fis5ywz7vk]  .mp-an-heading {
    margin: 0.25rem 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #E1E8ED;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ssy-colour-main-deep-blue);
    line-height: 1.25;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-subtitle {
    font-size: 0.78rem;
    color: #6b7c88;
    margin-top: 0.15rem;
}

/* Chart cards: narrow delivery donut beside a wide opens-over-time chart */
.mp-page-container[b-fis5ywz7vk]  .mp-an-cards {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 760px) {
    .mp-page-container[b-fis5ywz7vk]  .mp-an-cards {
        grid-template-columns: 1fr;
    }
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-chart--tall {
    height: 240px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-card {
    border: 1px solid #DCE6EC;
    border-radius: 8px;
    padding: 0.85rem 1rem 0.5rem;
    background: #fff;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2b3f4c;
    margin-bottom: 0.4rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-chart {
    width: 100%;
    height: 200px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-meta {
    margin-top: 0.85rem;
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-future {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: #9cb0bb;
    font-style: italic;
}

/* Per-recipient drill-down */
.mp-page-container[b-fis5ywz7vk]  .mp-an-job-row {
    cursor: pointer;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-job-row:hover {
    background-color: #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-job-detail-row > td {
    background: #f6f9fb;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-job-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.4rem 0.2rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-an-flag {
    font-size: 0.65rem;
    color: #b06a00;
    background: #fdf2df;
    border-radius: 3px;
    padding: 0 4px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   New post type wizard — MarketPost_905_AdminNewPostType
   A child of _900_Admin, itself a child of this page, so every rule needs ::deep.
   The wizard reuses .mp-stepper, .mp-admin-form, .mp-admin-role-picker and
   .mp-admin-link-type-row wholesale; what follows is only the parts it adds.
   ═════════════════════════════════════════════════════════════════════════════ */

.mp-page-container[b-fis5ywz7vk]  .mp-npt-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* The rail carries seven steps rather than the authoring wizard's four, so it needs
   a little more breathing room beneath it. */
.mp-page-container[b-fis5ywz7vk]  .mp-npt-stepper {
    margin: 0.35rem 0 0.5rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* One sentence at the top of each step saying what the step is for and why it matters. */
.mp-page-container[b-fis5ywz7vk]  .mp-npt-lede {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--ssy-colour-palette-slate-gray);
    background: #f3f7f9;
    border-left: 3px solid var(--ssy-colour-main-deep-blue);
    border-radius: 0 5px 5px 0;
    padding: 0.5rem 0.7rem;
}

/* ── Inline warnings ─────────────────────────────────────────────────────────
   Amber rather than crimson: none of these block the save, they only say the
   configuration will work in a way the admin may not have intended. */
.mp-page-container[b-fis5ywz7vk]  .mp-npt-warn {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.74rem;
    line-height: 1.5;
    color: #8a5a00;
    background: #fff7e8;
    border: 1px solid #e8d3a8;
    border-radius: 5px;
    padding: 0.4rem 0.55rem;
    margin-top: 0.3rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-warn code {
    font-size: 0.7rem;
    font-family: ui-monospace, monospace;
    background: #f7ecd8;
    border-radius: 3px;
    padding: 1px 4px;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-note-ok {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.76rem;
    line-height: 1.5;
    color: #2f6b42;
    background: #eaf3ec;
    border: 1px solid #b8d6c0;
    border-radius: 5px;
    padding: 0.45rem 0.6rem;
    margin-top: 0.3rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-count {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-toggle {
    margin: 0.1rem 0 0.2rem;
}

/* A read-only explanation standing where a form control would otherwise be. */
.mp-page-container[b-fis5ywz7vk]  .mp-npt-static {
    font-size: 0.76rem;
    font-style: italic;
    color: #9cb0bb;
    padding-top: 0.35rem;
}

/* ── Review summary ────────────────────────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-npt-review {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    column-gap: 1rem;
    align-items: baseline;
    border-top: 1px solid #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-review-k {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9cb0bb;
    padding: 0.5rem 0;
    border-bottom: 1px solid #E9EFF9;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-review-v {
    font-size: 0.8rem;
    color: var(--ssy-colour-main-simpson-blue);
    padding: 0.5rem 0;
    border-bottom: 1px solid #E9EFF9;
    min-width: 0;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-review-sub {
    display: block;
    font-size: 0.72rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-top: 0.1rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-review-none {
    color: #a0aab4;
    font-style: italic;
}

@media (max-width: 640px) {
    .mp-page-container[b-fis5ywz7vk]  .mp-npt-review {
        grid-template-columns: 1fr;
    }

    .mp-page-container[b-fis5ywz7vk]  .mp-npt-review-k {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* ── Pre-flight warning block on the review step ─────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-npt-warnblock {
    background: #fff7e8;
    border: 1px solid #e8d3a8;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-warnblock-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #8a5a00;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-warnlist {
    margin: 0.45rem 0 0.35rem;
    padding-left: 1.1rem;
    font-size: 0.76rem;
    line-height: 1.55;
    color: #6f4b0a;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-warnlist li {
    margin-bottom: 0.3rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-warnblock-foot {
    font-size: 0.72rem;
    font-style: italic;
    color: #9a7a3d;
    padding-top: 0.3rem;
    border-top: 1px solid #eddfc4;
}

/* ── Commit results ──────────────────────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-npt-results {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    background: #f9fafb;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-result {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.78rem;
    padding: 0.25rem 0.1rem;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-result--ok {
    color: #2f6b42;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-result--fail {
    color: var(--ssy-colour-palette-crimson-red);
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-result-label {
    font-weight: 600;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-result-detail {
    font-size: 0.72rem;
    color: var(--ssy-colour-palette-slate-gray);
    line-height: 1.45;
}

/* ── Footer actions ──────────────────────────────────────────────────────── */
.mp-page-container[b-fis5ywz7vk]  .mp-npt-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.6rem;
    border-top: 1px solid var(--ssy-colour-palette-light-bluegray);
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-nav-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.mp-page-container[b-fis5ywz7vk]  .mp-npt-nav-hint {
    font-size: 0.72rem;
    font-style: italic;
    color: #8a5a00;
}
/* /Components/Pages/General/MobileLauncher.razor.rz.scp.css */
/* Mobile / PWA entry gateway. Page prefix: ml- (MobileLauncher). */

.ml-wrap[b-9el5383src] {
    max-width: 420px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ml-logo[b-9el5383src] {
    width: 180px;
    max-width: 60%;
    margin: 1.5rem 0 1rem 0;
}

.ml-title[b-9el5383src] {
    margin-bottom: 0.25rem;
    color: #000061;
}

.ml-sub[b-9el5383src] {
    color: #444;
    margin-bottom: 1.5rem;
}

.ml-form[b-9el5383src] {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ml-btn[b-9el5383src] {
    width: 100%;
}

.ml-btn small[b-9el5383src] {
    opacity: 0.7;
    font-weight: 400;
}

.ml-err[b-9el5383src] {
    margin-bottom: 0.25rem;
}

.ml-change[b-9el5383src] {
    background: none;
    border: none;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #000061;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Pages/General/OmniPortal/Components/AttachmentListItem.razor.rz.scp.css */
.opalitem[b-dfhc2a17n3] {
    padding: 4px 8px 4px 20px;
    
    border-radius: 4px;
    transition: all 0.3s ease; /* Increased transition time for smoother effect */
    border-left: 3px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

    .opalitem:hover[b-dfhc2a17n3] {
        background-color: #f8f9fa;
        border-left-color: #163E9F;
        transform: translateX(3px); /* Add subtle movement on hover */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Add subtle shadow for depth */
    }

    .opalitem:active[b-dfhc2a17n3] {
        background-color: #f0f0f0;
        transform: translateX(2px) scale(0.99);
    }

    .opalitem:hover .child-type-label[b-dfhc2a17n3] {
        background: #f8f9fa;
        color: #555;
    }

    .opalitem span[b-dfhc2a17n3] {
        color: #333;
        font-size: 0.9rem;
        margin-right: 20px;
        display: inline-block;
    }

.item-content[b-dfhc2a17n3] {
    display: flex;
    flex-direction: column;
}

.item-date[b-dfhc2a17n3] {
    position: relative;
    z-index: 1;
}

.item-indicator[b-dfhc2a17n3] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: rgba(22, 62, 159, 0.05);
    transition: width 0.3s ease;
    z-index: 0;
    border-radius: 0 4px 4px 0;
}

.opalitem:hover .item-indicator[b-dfhc2a17n3] {
    width: 100%;
}

.actions[b-dfhc2a17n3] {
    display: flex;
    align-items: center;
    opacity: 0.6; /* Start with lower opacity */
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 2;
}

.opalitem:hover .actions[b-dfhc2a17n3] {
    opacity: 1; /* Full opacity on hover */
}

.view-html-button[b-dfhc2a17n3],
.view-pdf-button[b-dfhc2a17n3] {
    opacity: 0.7;
    transition: all 0.2s ease; /* Changed from just opacity to all */
    padding: 4px;
    margin-left: 8px;
    cursor: pointer;
    border-radius: 4px; /* Add rounded corners */
    position: relative;
}

.view-html-button:hover[b-dfhc2a17n3],
.view-pdf-button:hover[b-dfhc2a17n3] {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05); /* Add subtle background */
    transform: scale(1.1); /* Slightly larger on hover */
}

.view-html-button:active[b-dfhc2a17n3],
.view-pdf-button:active[b-dfhc2a17n3] {
    transform: scale(0.95);
}

[b-dfhc2a17n3] .badge {
    margin-left: 8px;
    padding: 3px 8px;
    font-size: 0.75rem;
    animation: pulse-b-dfhc2a17n3 2s infinite; /* Add pulsing animation for new badges */
}

@keyframes pulse-b-dfhc2a17n3 {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.archive-item[b-dfhc2a17n3] {
   /* margin-left: 15px;*/
    font-size: 0.9em;
    /*padding: 4px 12px;*/
}

.archive-item:hover[b-dfhc2a17n3] {
    background-color: #f3f3f3;
    border-left-color: #009DC9;
}

.archive-item span[b-dfhc2a17n3] {
    color: #666;
}

.archive-item .child-type-label[b-dfhc2a17n3] {
    background: #fafafa;
    color: #888;
}

.child-type-label[b-dfhc2a17n3] {
    position: absolute;
    left: -3px;
    top: 0;
    font-size: 0.65rem;
    color: #666;
    background: #fff;
    padding: 1px 6px;
    line-height: 1;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    border-radius: 0 0 4px 0;
    transition: all 0.2s ease;
}

.opalitem:hover .child-type-label[b-dfhc2a17n3] {
    left: 0;
    color: #163E9F;
    border-color: #163E9F;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .opalitem[b-dfhc2a17n3] {
        padding: 12px 15px 12px 45px;
        margin: 4px 0;
    }
    
    .actions[b-dfhc2a17n3] {
        display: flex;
        gap: 10px;
        opacity: 0.9;
    }
    
    .view-html-button[b-dfhc2a17n3],
    .view-pdf-button[b-dfhc2a17n3] {
        padding: 8px;
        margin-left: 0;
        opacity: 0.9;
        position: relative;
        z-index: 5;
    }
    
    .view-html-button[b-dfhc2a17n3]::before,
    .view-pdf-button[b-dfhc2a17n3]::before {
        content: '';
        position: absolute;
        top: -5px;
        bottom: -5px;
        left: -5px;
        right: -5px;
        z-index: -1;
    }
    
    .item-date[b-dfhc2a17n3] {
        font-size: 1rem !important;
    }
    
    .child-type-label[b-dfhc2a17n3] {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
}
/* /Components/Pages/General/OmniPortal/Components/ViewFileIFrame.razor.rz.scp.css */
.fileViewerContainer[b-2qrfbeybab] {
    height: 100%;
    width: 100%;
    position: relative;
}
.fileViewerContainer[b-2qrfbeybab]  iframe[data-jsFunction="viewFile"],
.fileViewerContainer[b-2qrfbeybab]  iframe[data-jsFunction="viewFileByUri"],
.fileViewerContainer[b-2qrfbeybab]  iframe[data-jsFunction="loadSandboxedIframe"],
.fileViewerContainer[b-2qrfbeybab]  iframe[data-jsFunction="loadOfficeIframe"],
.fileViewerContainer[b-2qrfbeybab]  iframe[data-jsFunction="loadUrlIframe"]{
    width: 100%;
    height: 100%;
    border: none;
    margin: 0 auto;
    display: inline-block;
    overflow: auto;
}
/* /Components/Pages/General/OmniPortal/FileUpload.razor.rz.scp.css */
.fileupload-container .loading-overlay[b-iudv622tm2] {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 50px;
    width: 100%;
    height: 100%;
    background-color: #405864;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-image: url('./assets/loadin.gif');
    background-repeat: no-repeat;
    background-position: center; /* Center the image */
    background-size: 20%; /* Make the image slightly smaller */
    opacity: 0.9; /* Make slightly opaque */
}

.fileupload-container .loading-overlay[b-iudv622tm2]::after {
    content: "Loading";
    position: absolute;
    top: calc(50% + 100px); /* Adjust this value to position the text below the logo */
    color: white;
    font-size: 1.5em;
    text-align: center;
}

.fileupload-container[b-iudv622tm2]  .btn.btn-primary {
    display: inline-flex;
    column-gap: 5px;
    align-items: center;
}

.fileupload-container[b-iudv622tm2]  .quickgrid{
    width: 100%;
}
.fileupload-container[b-iudv622tm2]  .quickgrid td {
    padding: 5px 15px; /* Adjust as needed */
    text-align: center;
}

.fileupload-container[b-iudv622tm2]  .quickgrid tr:nth-child(even):has(td > *) {
    background-color: #f2f2f2; /* This is a light grey color */
}

.fileupload-container[b-iudv622tm2]  .quickgrid .name-column {
    width: 350px;
    text-overflow: ellipsis;
}

.fileupload-container[b-iudv622tm2]  .quickgrid .date-column {
    width: 100px;
}

.fileupload-container[b-iudv622tm2]  .quickgrid .int-ext-column {
    width: 50px;
}

.fileupload-container[b-iudv622tm2]  .quickgrid .btn-column {
    width: 150px;
}
.fileupload-container[b-iudv622tm2]  .quickgrid .btn-extended-column {
    width: 175px;
}

.fileupload-container[b-iudv622tm2]  .quickgrid .search-box {
    margin: 5px;
    z-index: 1;
    position: relative;
}

.fileupload-container .roles-container[b-iudv622tm2] {
    border: 1px solid black; 
    margin: 10px; 
    border-radius: 10px; 
    background-color: #f2f2f2;
    display: flex;
    flex-direction: row;
    padding: 0.5rem;
}

@media (max-width: 1300px) {
    .fileupload-container h1 > span.hide-mobile[b-iudv622tm2]{
        display: none;
    }

    .fileupload-container[b-iudv622tm2]  .quickgrid .hide-mobile {
        display: none;
    }
    .fileupload-container .roles-container[b-iudv622tm2] {
        flex-direction: column;
    }
}

[b-iudv622tm2] .font-weight-bold {
    font-weight: bold;
}

[b-iudv622tm2] .edit-form-container {
    max-width: 600px; /* Adjust based on preference */
    margin: auto;
    padding: 20px;
    background-color: #f4f4f4; /* Light grey background */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Soft shadow for depth */
}

[b-iudv622tm2] .edit-form-label {
    display: block; /* Ensure labels are block level for consistent alignment */
    margin-bottom: 5px; /* Space between label and input */
    color: #333; /* Dark grey color for text */
    font-weight: bold;
}

[b-iudv622tm2] .edit-form-input, [b-iudv622tm2] .edit-form-select {
    width: 100%; /* Full width inputs */
    padding: 8px;
    margin-bottom: 20px; /* Space between form fields */
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 4px; /* Slightly rounded corners */
}

[b-iudv622tm2] .edit-form-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

[b-iudv622tm2] .upload-modal-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

[b-iudv622tm2] .upload-modal-header {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

[b-iudv622tm2] .upload-modal-body {
    padding: 10px;
}

[b-iudv622tm2] .upload-modal-select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

[b-iudv622tm2] .upload-modal-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

[b-iudv622tm2] .upload-modal-footer {
    text-align: center;
    margin-top: 20px;
}



[b-iudv622tm2] .validation-summary {
    color: red;
    list-style-type: none;
    padding: 0;
}

/* reset disabled styling cause ugly */
[b-iudv622tm2] .form-control:disabled, .form-control[readonly][b-iudv622tm2] {
    color: #212529;
    background-color: #e9ecef;
}

/* email modal */
[b-iudv622tm2] .role-select-btn:hover {
    font-weight: bold;
}
[b-iudv622tm2] .role-select-btn.add:hover {
    background-color: #8CD47E;
    font-weight: normal;
}
[b-iudv622tm2] .role-select-btn.remove:hover {
    background-color: #FF6961;
    font-weight: normal;
}
[b-iudv622tm2] .selected-role {
    font-weight: bold;
    text-decoration: underline;
}
/* /Components/Pages/General/OmniPortal/OmniPortal.razor.rz.scp.css */
/* Layout & Responsive Styles */
.col-md-10[b-fgesmmdxhj] {
    transition: margin-left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu-collapsed .col-md-10[b-fgesmmdxhj] {
    margin-left: 0;
    width: 100%;
}

@media (max-width: 1500px) {
    .col-sm-2[b-fgesmmdxhj] {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .col-md-10[b-fgesmmdxhj] {
        flex: 0 0 80%;
        max-width: 80%;
    }
    .collapse-button[b-fgesmmdxhj] {
        left: 19.5% !important;
    }
    .menu-collapsed .collapse-button[b-fgesmmdxhj] {
        left: -10px !important;
        animation: slideOut-b-fgesmmdxhj 0.3s forwards;
    }
}

@media (max-width: 992px) {
    .collapse-button[b-fgesmmdxhj] {
        left: 19% !important;
    }
    .menu-collapsed .collapse-button[b-fgesmmdxhj] {
        left: 0 !important
    }
}

/* Menu States & Navigation */
.expanded-menu[b-fgesmmdxhj] {
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    transform: translateX(0);
    width: 16.66%;
    animation: slideIn-b-fgesmmdxhj 0.3s forwards;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.collapsed-menu[b-fgesmmdxhj] {
    display: none;
    transform: translateX(-100%);
    width: 0;
    animation: slideOut-b-fgesmmdxhj 0.3s forwards;
}

.menu-expanded .collapse-button[b-fgesmmdxhj] {
    left: 16.5%;
    margin-left: 6px;
    animation: slideIn-b-fgesmmdxhj 0.3s forwards;
}

.sidebar-container[b-fgesmmdxhj] {
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: calc(99vh - 60px);
    padding-right: 0;
    padding-bottom: 8px;
}
.select-attachType-container[b-fgesmmdxhj]{
    padding: 8px;
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #f8f9fa;
}

/* Sidebar Components */
.sidebar-container[b-fgesmmdxhj]::-webkit-scrollbar {
    width: 6px;
}

.sidebar-container[b-fgesmmdxhj]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sidebar-container[b-fgesmmdxhj]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.sidebar-container[b-fgesmmdxhj]::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.opcard[b-fgesmmdxhj] {
    padding: 0px 2px 0 0;
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.opcardcontent[b-fgesmmdxhj] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}


/* Report Headers */
.reportHeaderGroup[b-fgesmmdxhj] {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    color: #163E9F;
    background: #ffffff;
    transition: all 0.3s ease;
    width: 100%;
    font-weight: 500;
}


.reportHeaderGroup.static[b-fgesmmdxhj] {
    cursor: default;
}

.reportHeaderGroup:not(.static)[b-fgesmmdxhj] {
    cursor: pointer;
}

.reportHeaderGroup a[b-fgesmmdxhj] {
    width: 100%;
}

.reportHeaderGroup.collapsed[b-fgesmmdxhj]::after,
.reportHeaderGroup.expanded[b-fgesmmdxhj]::after {
    position: absolute;
    right: 0;
    color: #163E9F;
    margin-right: 1rem;
}

.reportHeaderGroup.collapsed[b-fgesmmdxhj]::after {
    content: "▼";
    /*content: "▽";*/
}

.reportHeaderGroup.expanded[b-fgesmmdxhj]::after {
    content: "▲";
    /*content: "△";*/
}

/* Remove the old a::after rules since we're using the div::after instead */
.reportHeaderGroup.collapsed a[b-fgesmmdxhj]::after,
.reportHeaderGroup.expanded a[b-fgesmmdxhj]::after {
    display: none;
}


.accordion[b-fgesmmdxhj]{
    padding: 1px 0 !important;
    width: 100%;
}

.opaccordion-button[b-fgesmmdxhj] {
    position: relative;
    font-size: 0.9rem !important;
    padding: 8px 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    color: #000061;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

    .opaccordion-button:not(.collapsed)[b-fgesmmdxhj] {
        background-color: #f8f9fa;
        color: #000061;
        box-shadow: none;
    }

    .opaccordion-button:hover[b-fgesmmdxhj] {
        background-color: #f8f9fa;
        border-left-color: #163E9F;
    }

    .opaccordion-button:focus[b-fgesmmdxhj] {
        box-shadow: 0 0 0 0.1rem rgba(219, 48, 58, 0.25);
    }

    .opaccordion-button[b-fgesmmdxhj]::after {
        position: absolute;
        right: 0;
        color: #163E9F;
        margin-right: 1rem;
    }

    .opaccordion-button.collapsed[b-fgesmmdxhj]::after {
        content: "▼";
    }

    .opaccordion-button:not(.collapsed)[b-fgesmmdxhj]::after {
        content: "▲";
    }

.accordion-body[b-fgesmmdxhj] {
    padding: 4px 0 0 0;
    width: 100%;
}

.accordion-collapse[b-fgesmmdxhj] {
    width: 100%;
}

.accordion-body .itemDiv[b-fgesmmdxhj] {
    padding: 4px 15px;
    margin: 2px 0;
    border-radius: 4px;
    background: #ffffff;
    border-left: 3px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    width: 100%;
}

    .accordion-body .itemDiv:hover[b-fgesmmdxhj] {
        background-color: #f8f9fa;
        border-left-color: #163E9F;
    }

.accordion-collapse[b-fgesmmdxhj] {
    transition: all 0.3s ease-in-out;
}



/* List Items   */ 
.itemDiv[b-fgesmmdxhj] {
    padding: 4px 15px;
    margin: 2px 0;
    border-radius: 4px;
    background: #ffffff;
    border-left: 3px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.itemDiv span[b-fgesmmdxhj] {
    margin-left: 10px;
}

/* Buttons & Interactive Elements */
.collapse-button[b-fgesmmdxhj] {
    position: fixed;
    width: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
    z-index: 98;
    transition: all 0.3s ease;
}

.semi-circle[b-fgesmmdxhj] {
    height: 4.8rem !important;
    top: calc(50% - 7px);
    background-color: #009DC9;
    color: white;
    padding: 0 4px;
    border-radius: 0 15px 15px 0;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.semi-circle:hover[b-fgesmmdxhj] {
    background-color: #0088b0;
    width: 25px;
    box-shadow: 2px 0 6px rgba(0,0,0,0.15);
}

.downloadButton[b-fgesmmdxhj],
.CopyButton[b-fgesmmdxhj] {
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.itemDiv:hover[b-fgesmmdxhj] {
    background-color: #f8f9fa;
    border-left-color: #163E9F;
}

.itemDiv:hover .downloadButton[b-fgesmmdxhj],
.itemDiv:hover .CopyButton[b-fgesmmdxhj] {
    opacity: 1;
}

.collapse-button:hover[b-fgesmmdxhj] {
    background-color: #0088b0;
}

/* Utility Classes */
.text-info[b-fgesmmdxhj] {
    color: #000061 !important;
}

/* Viewer Action Button */
.viewer-action-button[b-fgesmmdxhj] {
    position: absolute;
    left: 30px;
    top: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #49494a;
    background: none;
    padding: 0 5px;
    /*I want round buttons*/
    border-radius: 50%;
    border: 1px solid transparent;
}

.viewer-action-button:hover[b-fgesmmdxhj] {
    background-color: #000061;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Add styles for the archive items to look more like report items */
.accordion-item[b-fgesmmdxhj] {
    border: none;
    background: none;
    width: 100%;
    margin: 4px 0;
}

.accordion[b-fgesmmdxhj] {
    padding: 1px 0 !important;
    width: 100%;
}

.accordion-head[b-fgesmmdxhj] {
    font-family: "Soehne", sans-serif;
}


/* Child Attachment Types */
.child-attachment-type[b-fgesmmdxhj] {
    padding-left: 15px;
    border-left: 2px solid #e0e0e0;
    margin: 5px 0 5px 15px;
}

.child-attachment-type .itemDiv[b-fgesmmdxhj] {
    background: #fafafa;
}

.child-attachment-type .itemDiv:hover[b-fgesmmdxhj] {
    background-color: #f0f0f0;
    border-left-color: #009DC9;
}

.child-attachment-type .opaccordion-button[b-fgesmmdxhj] {
    background: #fafafa;
    font-size: 0.8rem !important;
}

/* Add a light shadow to the selected attachment type */
.opcard.selected[b-fgesmmdxhj] {
    box-shadow: 0 0 10px rgba(0, 0, 97, 0.2);
    border-color: #000061;
}

@keyframes slideIn-b-fgesmmdxhj {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut-b-fgesmmdxhj {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

a[b-fgesmmdxhj] {
    text-decoration: none;
    display: block;
    width: 100%;
    cursor: pointer;
}

.loading-container[b-fgesmmdxhj] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
}

.loading-spinner[b-fgesmmdxhj] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000061;
    border-radius: 50%;
    animation: spinner-b-fgesmmdxhj 1.5s linear infinite;
    margin-bottom: 15px;
}

@keyframes spinner-b-fgesmmdxhj {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.file-viewer-placeholder[b-fgesmmdxhj] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #f8f9fa;
    color: #6c757d;
    border-radius: 8px;
    border: 1px dashed #dee2e6;
}

.placeholder-content[b-fgesmmdxhj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.placeholder-content p[b-fgesmmdxhj] {
    margin-top: 1rem;
    font-size: 1.1rem;
}

.archive-count[b-fgesmmdxhj] {
    color: #6c757d;
    font-size: 0.85rem;
    margin-left: 0.5rem;
    background-color: #e9ecef;
    padding: 0.2rem 0.2rem;
    border-radius: 1rem;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .expanded-menu[b-fgesmmdxhj] {
        width: 100%;
        max-width: 100%;
        position: fixed;
        top: 60px;
        left: 0;
        z-index: 99;
        height: calc(100vh - 60px);
    }

    .expanded-menu[b-fgesmmdxhj] {
        width: 100% !important;
        max-width: 100% !important;
        position: fixed;
        top: 60px;
        left: 0;
        z-index: 99;
        height: calc(100vh - 60px);
        transition: transform 0.3s ease-in-out;
        padding: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }


    .col-md-10[b-fgesmmdxhj] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-10[b-fgesmmdxhj] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0 !important;
    }

    .collapse-button[b-fgesmmdxhj] {
        z-index: 100;
        width: 40px !important;
        height: 80px !important;
        left: 10px !important;
        background-color: rgba(0, 157, 201, 0.9) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
    }

    .menu-collapsed .expanded-menu[b-fgesmmdxhj] {
        transform: translateX(-100%);
    }
   
    
    .menu-collapsed .collapse-button[b-fgesmmdxhj] {
        left: 10px !important;
    }
    
    .file-viewer-placeholder[b-fgesmmdxhj] {
        padding: 1rem;
    }



    .menu-collapsed .collapse-button[b-fgesmmdxhj] {
        left: 30px !important;
    }

    .menu-expanded .collapse-button[b-fgesmmdxhj] {
        left: -5px !important;
    }
    
    .file-viewer-placeholder[b-fgesmmdxhj] {
        padding: 1rem;
    }
    
    /* Increase touch target sizes for mobile */
    .reportHeaderGroup[b-fgesmmdxhj] {
        padding: 12px 15px;
        margin: 6px 0;
    }
    
    .itemDiv[b-fgesmmdxhj] {
        padding: 12px 15px;
        margin: 4px 0;
    }
    
    .actions[b-fgesmmdxhj] {
        display: flex;
        gap: 10px;
    }
    
    .view-html-button[b-fgesmmdxhj],
    .view-pdf-button[b-fgesmmdxhj] {
        padding: 8px;
        margin-left: 5px;
        opacity: 0.9;
    }
    
    /* Collapsible sidebar with overlay effect */
    .menu-overlay[b-fgesmmdxhj] {
        display: none;
    }
    
    .menu-expanded .menu-overlay[b-fgesmmdxhj] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.4);
        z-index: 98;
        animation: fadeIn-b-fgesmmdxhj 0.3s forwards;
    }
    
    @keyframes fadeIn-b-fgesmmdxhj {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* Mobile-friendly action buttons */
    .mobile-action-container[b-fgesmmdxhj] {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 95;
    }
    
    .mobile-action-button[b-fgesmmdxhj] {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #009DC9;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 3px 6px rgba(0,0,0,0.2);
        transition: all 0.2s ease;
        border: none;
    }
    
    .mobile-action-button:hover[b-fgesmmdxhj],
    .mobile-action-button:focus[b-fgesmmdxhj] {
        background-color: #0088b0;
        transform: scale(1.05);
    }
    
    /* Improved toast positioning for mobile */
    [b-fgesmmdxhj] .toast-container {
        bottom: 80px !important;
        right: 20px !important;
    }
}
/* /Components/Pages/General/ReportBuilder/Components/AdminPortal/ReportAdminPortal.razor.rz.scp.css */
/* Report-builder Admin Portal — all classes ap- prefixed (page-scoped CSS rule). */

.ap-root[b-4l1dnt8ize] {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: 0;
    background: #f8fafc;
}

/* ── Blank top bar (just the back arrow) ── */
.ap-topbar[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    flex-shrink: 0;
    padding: 0 14px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

.ap-back[b-4l1dnt8ize] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: white;
    color: #374151;
    font-size: 0.82rem;
    padding: 6px 12px;
    cursor: pointer;
}

    .ap-back:hover[b-4l1dnt8ize] {
        border-color: #000061;
        color: #000061;
    }

.ap-back-arrow[b-4l1dnt8ize] {
    font-size: 1.05rem;
    line-height: 1;
}

.ap-topbar-title[b-4l1dnt8ize] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Tabs ── */
.ap-tabs[b-4l1dnt8ize] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    padding: 10px 14px 0;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}

.ap-tab[b-4l1dnt8ize] {
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.82rem;
    padding: 8px 16px;
    cursor: pointer;
}

    .ap-tab:hover:not(:disabled)[b-4l1dnt8ize] {
        color: #000061;
    }

.ap-tab-active[b-4l1dnt8ize] {
    background: white;
    color: #000061;
    font-weight: 600;
    border-color: #e5e7eb;
    margin-bottom: -1px;
}

.ap-tab-soon[b-4l1dnt8ize] {
    opacity: 0.5;
    cursor: default;
}

/* ── Completeness tab ── */
.ap-completeness[b-4l1dnt8ize] {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    padding: 18px;
    overflow: auto;
}

/* Calendar */
.ap-cal[b-4l1dnt8ize] {
    flex-shrink: 0;
    width: 300px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    height: fit-content;
}

.ap-cal-nav[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ap-cal-navbtn[b-4l1dnt8ize] {
    width: 28px;
    height: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: white;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    color: #374151;
}

    .ap-cal-navbtn:hover[b-4l1dnt8ize] {
        background: #f3f4f6;
    }

.ap-cal-label[b-4l1dnt8ize] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #000061;
}

.ap-cal-grid[b-4l1dnt8ize] {
    display: grid;
    /* minmax(0, 1fr) (not the default minmax(auto, 1fr)) so the aspect-ratio day cells can shrink
       to the track instead of forcing their auto min-size — otherwise the 7 columns overflow the
       fixed-width calendar and the number boxes spill off to the right. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.ap-cal-dow[b-4l1dnt8ize] {
    margin-bottom: 3px;
}

.ap-cal-dowcell[b-4l1dnt8ize] {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    padding: 2px 0;
}

.ap-cal-cell[b-4l1dnt8ize] {
    aspect-ratio: 1 / 1;
    min-width: 0;           /* let the cell shrink to its grid track (pairs with minmax(0,1fr)) */
    border: 1px solid transparent;
    border-radius: 5px;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .ap-cal-cell:hover[b-4l1dnt8ize] {
        background: #eef2ff;
    }

.ap-cal-empty[b-4l1dnt8ize] {
    cursor: default;
}

.ap-cal-today[b-4l1dnt8ize] {
    border-color: #9ca3af;
}

.ap-cal-sel[b-4l1dnt8ize] {
    background: #000061;
    color: white;
    font-weight: 600;
}

    .ap-cal-sel:hover[b-4l1dnt8ize] {
        background: #000061;
    }

/* Standalone "Today" button under the grid — its own class so a today *day cell*
   (.ap-cal-cell.ap-cal-today) never picks up this full-width button styling. */
.ap-cal .ap-cal-todaybtn[b-4l1dnt8ize] {
    margin-top: 10px;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: white;
    font-size: 0.78rem;
    padding: 6px 0;
    cursor: pointer;
    color: #374151;
}

    .ap-cal .ap-cal-todaybtn:hover[b-4l1dnt8ize] {
        background: #f3f4f6;
    }

/* Lists */
.ap-lists[b-4l1dnt8ize] {
    flex: 1;
    min-width: 0;
}

.ap-lists-head[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ap-lists-title[b-4l1dnt8ize] {
    margin: 0;
    font-size: 1rem;
    color: #000061;
}

.ap-toggle[b-4l1dnt8ize] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.ap-lists-sub[b-4l1dnt8ize] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.ap-group[b-4l1dnt8ize] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}

.ap-group-head[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid #f1f5f9;
}

.ap-group-complete[b-4l1dnt8ize] {
    background: #e5f6ec;
    color: #14652f;
}

.ap-group-partial[b-4l1dnt8ize] {
    background: #fef3c7;
    color: #92590b;
}

.ap-group-none[b-4l1dnt8ize] {
    background: #f3f4f6;
    color: #6b7280;
}

.ap-dot[b-4l1dnt8ize] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ap-dot-complete[b-4l1dnt8ize] { background: #16a34a; }
.ap-dot-partial[b-4l1dnt8ize]  { background: #d97706; }
.ap-dot-none[b-4l1dnt8ize]     { background: #9ca3af; }

.ap-count[b-4l1dnt8ize] {
    margin-left: auto;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 0.78rem;
}

.ap-dept[b-4l1dnt8ize] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 8px 14px 3px;
}

.ap-report[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 14px;
    border-top: 1px solid #f8fafc;
}

    .ap-report:hover[b-4l1dnt8ize] {
        background: #f8fafc;
    }

.ap-report-title[b-4l1dnt8ize] {
    font-size: 0.85rem;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-report-count[b-4l1dnt8ize] {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.ap-empty[b-4l1dnt8ize] {
    padding: 10px 14px;
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
}

/* ── Report Rules (scheduling) tab ── */
.ap-rules[b-4l1dnt8ize] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.ap-rules-intro[b-4l1dnt8ize] {
    font-size: 0.82rem;
    color: #4b5563;
    margin: 0 0 12px;
    max-width: 760px;
}

/* Collapsible department header */
.ap-dept-toggle[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 8px 10px 6px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
    color: #374151;
}

    .ap-dept-toggle:hover[b-4l1dnt8ize] { color: #000061; }

.ap-dept-caret[b-4l1dnt8ize] { width: 10px; color: #9ca3af; font-size: 0.7rem; }
.ap-dept-name[b-4l1dnt8ize]  { font-weight: 700; }
.ap-dept-count[b-4l1dnt8ize] {
    font-size: 0.66rem; font-weight: 700; color: #6b7280;
    background: #f3f4f6; border-radius: 999px; padding: 1px 7px;
}
.ap-dept-livecount[b-4l1dnt8ize] { font-size: 0.7rem; color: #16a34a; font-weight: 600; }

/* Report rules grid */
.ap-rule-grid[b-4l1dnt8ize] { display: flex; flex-direction: column; margin-bottom: 8px; }

.ap-rule-grow[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-top: none;
    background: #fff;
}

    .ap-rule-grow:first-child[b-4l1dnt8ize] { border-top: 1px solid #e5e7eb; border-radius: 6px 6px 0 0; }
    .ap-rule-grow:last-child[b-4l1dnt8ize]  { border-radius: 0 0 6px 6px; }
    .ap-rule-grow.ap-rule-islive[b-4l1dnt8ize] { background: #f0fdf4; }

.ap-rule-ghead[b-4l1dnt8ize] {
    background: #f9fafb;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.ap-gc-report[b-4l1dnt8ize] { flex: 1; min-width: 0; }
.ap-gc-mp[b-4l1dnt8ize]     { width: 180px; flex-shrink: 0; }
.ap-gc-sched[b-4l1dnt8ize]  { width: 240px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.ap-gc-live[b-4l1dnt8ize]   { width: 54px; flex-shrink: 0; text-align: center; }

.ap-gc-sched .ap-rule-sched[b-4l1dnt8ize] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-sched-cellbtns[b-4l1dnt8ize] { display: flex; gap: 4px; flex-shrink: 0; }

/* Live toggle switch */
.ap-live-toggle[b-4l1dnt8ize] {
    width: 38px;
    height: 20px;
    border-radius: 999px;
    border: none;
    background: #d1d5db;
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

    .ap-live-toggle.on[b-4l1dnt8ize] { background: #16a34a; }

.ap-live-knob[b-4l1dnt8ize] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

    .ap-live-toggle.on .ap-live-knob[b-4l1dnt8ize] { left: 20px; }

.ap-rule-row[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    margin-bottom: 6px;
}

.ap-rule-main[b-4l1dnt8ize] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ap-rule-sched[b-4l1dnt8ize] {
    font-size: 0.75rem;
    color: #1e3a5f;
}

.ap-rule-unsched[b-4l1dnt8ize] {
    color: #9ca3af;
    font-style: italic;
}

.ap-rule-actions[b-4l1dnt8ize] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ap-rule-btn[b-4l1dnt8ize] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
}

/* Uniform width for the row action buttons so "Edit"/"Remove" line up with "Add schedule". */
.ap-rule-actions .ap-rule-btn[b-4l1dnt8ize] {
    min-width: 100px;
    text-align: center;
    white-space: nowrap;
}

    .ap-rule-btn:hover[b-4l1dnt8ize] {
        background: #f3f4f6;
    }

.ap-rule-btn-primary[b-4l1dnt8ize] {
    background: #000061;
    border-color: #000061;
    color: #fff;
}

    .ap-rule-btn-primary:hover[b-4l1dnt8ize] {
        background: #000061;
        opacity: 0.9;
    }

.ap-rule-btn-danger[b-4l1dnt8ize] {
    color: #b45309;
    border-color: #fcd34d;
    background: #fffbeb;
}

.ap-sched-editor[b-4l1dnt8ize] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    padding: 12px;
    margin: -2px 0 10px 10px;
}

.ap-sched-row[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ap-sched-label[b-4l1dnt8ize] {
    font-size: 0.78rem;
    color: #6b7280;
    width: 74px;
    flex-shrink: 0;
}

.ap-sched-btns[b-4l1dnt8ize] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ap-sched-opt[b-4l1dnt8ize] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
}

    .ap-sched-opt:hover[b-4l1dnt8ize] {
        background: #eef2ff;
    }

    .ap-sched-opt.on[b-4l1dnt8ize] {
        background: #000061;
        border-color: #000061;
        color: #fff;
    }

.ap-sched-input[b-4l1dnt8ize] {
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #fff;
}

.ap-sched-hint[b-4l1dnt8ize] {
    font-size: 0.72rem;
    color: #9ca3af;
    margin: 0;
}

.ap-sched-preview[b-4l1dnt8ize] {
    font-size: 0.8rem;
    color: #000061;
    font-weight: 600;
    margin: 4px 0 10px;
}

.ap-sched-actions[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ap-sched-notice[b-4l1dnt8ize] {
    font-size: 0.78rem;
    color: #15803d;
}

.ap-rule-mp[b-4l1dnt8ize] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ap-rule-mp-label[b-4l1dnt8ize] {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}
/* /Components/Pages/General/ReportBuilder/Components/DataPanel/ReportDataPanel.razor.rz.scp.css */
/* "new · by X" tag shown for ~30s on a datapoint another user just changed. */
.dp-newtag[b-qjalh9kx5n] {
    position: absolute;
    top: -6px;
    right: -4px;
    z-index: 2;
    background: #16a34a;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* "history / restore" button on a datapoint cell — small clock, shown on hover. */
.dp-hist-btn[b-qjalh9kx5n] {
    position: absolute;
    bottom: 1px;
    left: 1px;
    z-index: 2;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 0.62rem;
    line-height: 1;
    padding: 1px 2px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s, color 0.1s;
}

.dp-td-editable:hover .dp-hist-btn[b-qjalh9kx5n] { opacity: 0.8; }
.dp-hist-btn:hover[b-qjalh9kx5n] { color: #000061; opacity: 1; }

/* Inline variant used in the textblock label row (no absolute positioning). */
.dp-hist-btn-inline[b-qjalh9kx5n] {
    position: static;
    opacity: 0.7;
    font-size: 0.62rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

    .dp-hist-btn-inline:hover[b-qjalh9kx5n] { opacity: 1; color: #000061; }

/* ── History / rollback modal ── */
.dp-hist-overlay[b-qjalh9kx5n] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.dp-hist-modal[b-qjalh9kx5n] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    width: min(720px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dp-hist-head[b-qjalh9kx5n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
}

.dp-hist-title[b-qjalh9kx5n] { font-size: 0.95rem; font-weight: 700; color: #111827; }
.dp-hist-sub[b-qjalh9kx5n]   { font-size: 0.76rem; color: #6b7280; margin-top: 2px; }

.dp-hist-close[b-qjalh9kx5n] {
    border: none;
    background: transparent;
    font-size: 1rem;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

    .dp-hist-close:hover[b-qjalh9kx5n] { color: #374151; }

.dp-hist-body[b-qjalh9kx5n] {
    padding: 12px 18px 18px;
    overflow-y: auto;
}

.dp-hist-empty[b-qjalh9kx5n] {
    padding: 24px 0;
    text-align: center;
    color: #9ca3af;
    font-size: 0.82rem;
}

.dp-hist-table[b-qjalh9kx5n] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

    .dp-hist-table th[b-qjalh9kx5n] {
        text-align: left;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        border-bottom: 1px solid #e5e7eb;
        padding: 5px 8px;
    }

    .dp-hist-table td[b-qjalh9kx5n] {
        border-bottom: 1px solid #f3f4f6;
        padding: 6px 8px;
        vertical-align: middle;
        color: #374151;
    }

.dp-hist-current[b-qjalh9kx5n] { background: #f0fdf4; }

.dp-hist-when[b-qjalh9kx5n] { white-space: nowrap; color: #6b7280; font-variant-numeric: tabular-nums; }

.dp-hist-val[b-qjalh9kx5n] {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.74rem;
}

.dp-hist-act[b-qjalh9kx5n] {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 10px;
}

.dp-hist-act-insert[b-qjalh9kx5n] { background: #dbeafe; color: #1e40af; }
.dp-hist-act-update[b-qjalh9kx5n] { background: #fef3c7; color: #92400e; }
.dp-hist-act-delete[b-qjalh9kx5n] { background: #fee2e2; color: #991b1b; }

.dp-hist-restore[b-qjalh9kx5n] {
    border: 1px solid #000061;
    background: #fff;
    color: #000061;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
}

    .dp-hist-restore:hover:not(:disabled)[b-qjalh9kx5n] { background: #000061; color: #fff; }
    .dp-hist-restore:disabled[b-qjalh9kx5n] { opacity: 0.4; cursor: not-allowed; }

.dp-hist-currenttag[b-qjalh9kx5n] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #16a34a;
}

.dp-hist-note[b-qjalh9kx5n] {
    margin-top: 10px;
    font-size: 0.72rem;
    color: #9ca3af;
    font-style: italic;
}

/* ── Panel shell ── */
.report-data-panel[b-qjalh9kx5n] {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid #e5e7eb;
    background: #f9fafb;
    align-self: stretch;
}

/* ── Header ── */
.dp-header[b-qjalh9kx5n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.dp-title[b-qjalh9kx5n] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}

/* ── Save button ── */
.dp-save-btn[b-qjalh9kx5n] {
    padding: 5px 12px;
    background: #000061;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.12s;
}

    .dp-save-btn:hover:not(:disabled)[b-qjalh9kx5n] { background: #0000a0; }
    .dp-save-btn:disabled[b-qjalh9kx5n]             { opacity: 0.45; cursor: not-allowed; }

    .dp-save-btn.dp-save-pending[b-qjalh9kx5n]               { background: #ea580c; }
    .dp-save-btn.dp-save-pending:hover:not(:disabled)[b-qjalh9kx5n] { background: #c2410c; }

.dp-pending-badge[b-qjalh9kx5n] {
    background: white;
    color: #ea580c;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.5;
}

/* ── Notice bar ── */
.dp-notice[b-qjalh9kx5n] {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
}

.dp-notice-success[b-qjalh9kx5n] { background: #f0fdf4; color: #15803d; border-bottom: 1px solid #bbf7d0; }
.dp-notice-error[b-qjalh9kx5n]   { background: #fef2f2; color: #b91c1c; border-bottom: 1px solid #fecaca; }

/* ── Scrollable body ── */
.dp-body[b-qjalh9kx5n] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Placeholder ── */
.dp-placeholder[b-qjalh9kx5n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-height: 160px;
    color: #9ca3af;
    text-align: center;
}

.dp-placeholder-icon[b-qjalh9kx5n] {
    font-size: 2rem;
    opacity: 0.35;
}

.dp-placeholder-text[b-qjalh9kx5n] {
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 200px;
}

/* ── Info message (no-entry components) ── */
.dp-info-msg[b-qjalh9kx5n] {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 0.78rem;
    color: #6b7280;
    font-style: italic;
    line-height: 1.5;
}

/* ── Paste zone ── */
.dp-paste-zone[b-qjalh9kx5n] {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dp-paste-label[b-qjalh9kx5n] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
}

.dp-paste-hint[b-qjalh9kx5n] {
    font-weight: 400;
    color: #9ca3af;
}

.dp-paste-textarea[b-qjalh9kx5n] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 5px 7px;
    font-size: 0.72rem;
    font-family: monospace;
    color: #374151;
    resize: vertical;
    background: white;
}

    .dp-paste-textarea:focus[b-qjalh9kx5n] {
        outline: none;
        border-color: #000061;
    }

.dp-paste-status[b-qjalh9kx5n] {
    font-size: 0.7rem;
    border-radius: 3px;
    padding: 3px 6px;
}

.dp-paste-ok[b-qjalh9kx5n]   { background: #f0fdf4; color: #15803d; }
.dp-paste-warn[b-qjalh9kx5n] { background: #fef2f2; color: #b91c1c; }

.dp-paste-actions[b-qjalh9kx5n] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dp-apply-btn[b-qjalh9kx5n] {
    padding: 4px 10px;
    background: #000061;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .dp-apply-btn:hover:not(:disabled)[b-qjalh9kx5n] { background: #0000a0; }
    .dp-apply-btn:disabled[b-qjalh9kx5n]             { opacity: 0.4; cursor: not-allowed; }

.dp-paste-summary[b-qjalh9kx5n] {
    font-size: 0.68rem;
    color: #15803d;
}

/* ── Inline table ── */
/* ── Per-date row visibility strip ── */
.dp-rowvis[b-qjalh9kx5n] {
    margin: 8px 0 6px;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
}

.dp-rowvis-head[b-qjalh9kx5n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 6px;
}

.dp-rowvis-collapse[b-qjalh9kx5n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #374151;
    cursor: pointer;
}

.dp-rowvis-chips[b-qjalh9kx5n] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dp-rowvis-chip[b-qjalh9kx5n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 160px;
    padding: 3px 8px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 0.74rem;
    cursor: pointer;
}

    .dp-rowvis-chip:hover[b-qjalh9kx5n] { border-color: #9ca3af; }

    .dp-rowvis-chip .dp-rowvis-dot[b-qjalh9kx5n] { color: #16a34a; font-size: 0.7rem; line-height: 1; }
    .dp-rowvis-chip .dp-rowvis-label[b-qjalh9kx5n] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.dp-rowvis-off[b-qjalh9kx5n] {
    background: #f3f4f6;
    color: #9ca3af;
}

    .dp-rowvis-off .dp-rowvis-dot[b-qjalh9kx5n] { color: #9ca3af; }
    .dp-rowvis-off .dp-rowvis-label[b-qjalh9kx5n] { text-decoration: line-through; }

/* Greyed row in the inline grid when hidden for this date */
.dp-row-hidden[b-qjalh9kx5n] {
    opacity: 0.45;
}

    .dp-row-hidden .dp-cell-inline-input[b-qjalh9kx5n] { text-decoration: line-through; }

.dp-inline-table-wrap[b-qjalh9kx5n] {
    overflow-x: auto;
}

.dp-inline-table[b-qjalh9kx5n] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    /* Inherit data-table border/padding from the shared stylesheet;
       override only what differs in the panel context */
    .dp-inline-table th[b-qjalh9kx5n],
    .dp-inline-table td[b-qjalh9kx5n] {
        border: 1px solid #e5e7eb;
        padding: 4px 8px;
        vertical-align: middle;
        overflow: hidden;
    }

/* Cells that contain an input get zero padding so the input fills the cell */
.dp-inline-table td.dp-td-editable[b-qjalh9kx5n] {
    padding: 0;
}

/* Header cells and non-editable data cells are dimmed — datapoint cells stay full opacity */
.dp-inline-table th[b-qjalh9kx5n],
.dp-inline-table td:not(.dp-td-editable)[b-qjalh9kx5n] {
    opacity: 0.4;
}

/* Read-only cells with no resolved value yet */
.dp-inline-table td.dp-td-no-data[b-qjalh9kx5n] {
    color: #9ca3af;
    font-style: italic;
}


/* The inline input inside a table cell */
.dp-cell-inline-input[b-qjalh9kx5n] {
    width: 100%;
    height: 100%;
    min-height: 28px;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 4px 8px;
    box-sizing: border-box;
    display: block;
    outline: none;
}

    .dp-cell-inline-input:focus[b-qjalh9kx5n] {
        background: rgba(255, 255, 255, 0.92);
        outline: 2px solid #000061;
        outline-offset: -2px;
        border-radius: 1px;
    }

    /* Orange tint + border when value differs from loaded (pending) */
    .dp-cell-inline-input.dp-cell-pending[b-qjalh9kx5n] {
        background: rgba(249, 115, 22, 0.07);
    }

    .dp-cell-inline-input.dp-cell-pending:focus[b-qjalh9kx5n] {
        background: rgba(249, 115, 22, 0.12);
        outline-color: #ea580c;
    }

/* ── Stack children list ── */
.dp-stack-children[b-qjalh9kx5n] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dp-stack-child-block[b-qjalh9kx5n] {
    padding: 10px 0;
    border-bottom: 1px dashed #e5e7eb;
}

    .dp-stack-child-block:last-child[b-qjalh9kx5n] {
        border-bottom: none;
    }

/* ── TextBlock inline editor ── */
.dp-textblock-container[b-qjalh9kx5n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-label[b-qjalh9kx5n] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* don't inherit the textblock's font size/color */
    font-size: 0.68rem !important;
    color: #6b7280!important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-decoration: none !important;
}

.dp-textblock-input[b-qjalh9kx5n] {
    width: 100%;
    min-height: 80px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 8px;
    box-sizing: border-box;
    /* Inherits font-size, color, font-weight etc. from .dp-textblock-container */
    font: inherit;
    color: inherit;
    background: white;
    resize: vertical;
    line-height: 1.5;
    transition: border-color 0.12s;
}

    .dp-textblock-input:focus[b-qjalh9kx5n] {
        outline: none;
        border-color: #000061;
        box-shadow: 0 0 0 2px rgba(0,0,97,.08);
    }

    .dp-textblock-input.dp-cell-pending[b-qjalh9kx5n] {
        border-color: #ea580c;
        background: rgba(249, 115, 22, 0.05);
    }

/* ── Graph datapoint series ── */
.dp-graph-hint[b-qjalh9kx5n] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.dp-graph-series-row[b-qjalh9kx5n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    background: #fafafa;
    user-select: none;
}
.dp-graph-series-row:hover[b-qjalh9kx5n] { border-color: #9ca3af; background: #f3f4f6; }
.dp-graph-series-expanded[b-qjalh9kx5n]  { border-color: #000061; background: #eff6ff; border-radius: 4px 4px 0 0; }

.dp-graph-series-label[b-qjalh9kx5n] { flex: 1; font-size: 0.85rem; font-weight: 500; color: #374151; }

.dp-series-status[b-qjalh9kx5n] {
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}
.dp-status-ok[b-qjalh9kx5n]   { background: #dcfce7; color: #166534; }
.dp-status-none[b-qjalh9kx5n] { background: #f3f4f6; color: #9ca3af; }

.dp-graph-paste-panel[b-qjalh9kx5n] {
    padding: 10px 12px 12px;
    border: 1px solid #000061;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: white;
}

/* ── List row remove button ── */
.dp-list-remove-row[b-qjalh9kx5n] {
    width: 22px;
    height: 22px;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    background: white;
    font-size: 0.85rem;
    color: #9ca3af;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

    .dp-list-remove-row:hover[b-qjalh9kx5n] { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

/* ── Change-arrow insert menu ─────────────────────────────────────────────── */
.dp-arrow-bar[b-qjalh9kx5n] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 6px;
    font-size: 0.8rem;
}

.dp-arrow-bar-label[b-qjalh9kx5n] { color: #6b7280; }

.dp-arrow-btn[b-qjalh9kx5n] {
    padding: 2px 9px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    transition: background 0.1s, border-color 0.1s;
}

    .dp-arrow-btn:hover[b-qjalh9kx5n] { background: #f9fafb; border-color: #9ca3af; }

    .dp-arrow-btn.dp-arrow-up[b-qjalh9kx5n]   { color: #16a34a; }
    .dp-arrow-btn.dp-arrow-down[b-qjalh9kx5n] { color: #dc2626; }
    .dp-arrow-btn.dp-arrow-flat[b-qjalh9kx5n] { color: #6b7280; }

.dp-arrow-bar-hint[b-qjalh9kx5n] {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.72rem;
}
/* /Components/Pages/General/ReportBuilder/Components/DatapointManager.razor.rz.scp.css */
.dp-manager-empty[b-02vdgytakr] {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
    margin: 4px 0;
}

.dp-manager-list[b-02vdgytakr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.dp-manager-row[b-02vdgytakr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    background: #f9fafb;
}

    .dp-manager-row:hover[b-02vdgytakr] {
        background: #f3f4f6;
    }

/* ── Type badges ── */
.dp-manager-type-badge[b-02vdgytakr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.dp-badge-numeric[b-02vdgytakr] {
    background: #d1fae5;
    color: #065f46;
}

.dp-badge-text[b-02vdgytakr] {
    background: #f3f4f6;
    color: #6b7280;
}

.dp-manager-name[b-02vdgytakr] {
    flex: 1;
    font-size: 0.8rem;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-manager-format-hint[b-02vdgytakr] {
    font-size: 0.7rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.dp-manager-remove[b-02vdgytakr] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #9ca3af;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}

    .dp-manager-remove:hover[b-02vdgytakr] {
        color: #b91c1c;
    }
/* /Components/Pages/General/ReportBuilder/Components/DatapointPicker.razor.rz.scp.css */
.dp-picker-wrap[b-qaelxhotvz] {
    position: relative;
    width: 100%;
}

.dp-picker-input[b-qaelxhotvz] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
    box-sizing: border-box;
}

    .dp-picker-input:focus[b-qaelxhotvz] {
        outline: none;
        border-color: #000061;
    }

.dp-dropdown[b-qaelxhotvz] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.dp-option[b-qaelxhotvz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

    .dp-option:hover[b-qaelxhotvz],
    .dp-option-selected[b-qaelxhotvz] {
        background: #f3f4f6;
    }

.dp-option-create[b-qaelxhotvz] {
    color: #000061;
    font-style: italic;
    border-top: 1px solid #f3f4f6;
}

    .dp-option-create:hover[b-qaelxhotvz] {
        background: #eff6ff;
    }

/* ── Type badges in dropdown ── */
.dp-type-badge[b-qaelxhotvz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.dp-badge-numeric[b-qaelxhotvz] {
    background: #d1fae5;
    color: #065f46;
}

.dp-badge-text[b-qaelxhotvz] {
    background: #f3f4f6;
    color: #6b7280;
}

.dp-badge-image[b-qaelxhotvz] {
    background: #ede9fe;
    color: #5b21b6;
}

/* ── Inline creation form ── */
.dp-create-form[b-qaelxhotvz] {
    margin-top: 4px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    padding: 10px 12px;
}

.dp-create-name[b-qaelxhotvz] {
    font-size: 0.78rem;
    color: #374151;
    margin: 0 0 8px;
}

.dp-create-type-row[b-qaelxhotvz] {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.dp-type-btn[b-qaelxhotvz] {
    padding: 3px 10px;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    color: #374151;
    cursor: pointer;
}

    .dp-type-btn:hover[b-qaelxhotvz] {
        background: #f3f4f6;
    }

.dp-type-btn-active[b-qaelxhotvz] {
    background: #000061;
    color: white;
    border-color: #000061;
}

    .dp-type-btn-active:hover[b-qaelxhotvz] {
        background: #000061;
    }

.dp-create-num-opts[b-qaelxhotvz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.dp-create-label[b-qaelxhotvz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #374151;
}

.dp-create-check-label[b-qaelxhotvz] {
    cursor: pointer;
}

.dp-create-num-input[b-qaelxhotvz] {
    width: 60px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.78rem;
    color: #374151;
}

.dp-create-actions[b-qaelxhotvz] {
    display: flex;
    gap: 6px;
}

.dp-create-confirm[b-qaelxhotvz] {
    padding: 4px 10px;
    font-size: 0.78rem;
    background: #000061;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

    .dp-create-confirm:hover[b-qaelxhotvz] {
        background: #000080;
    }

.dp-create-cancel[b-qaelxhotvz] {
    padding: 4px 10px;
    font-size: 0.78rem;
    background: white;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
}

    .dp-create-cancel:hover[b-qaelxhotvz] {
        background: #f3f4f6;
    }
/* /Components/Pages/General/ReportBuilder/Components/DatePicker/ReportDatePicker.razor.rz.scp.css */
/* Report-date picker — all classes rdp- prefixed (page-scoped CSS rule). */

.rdp-root[b-qkps7o0wth] {
    position: relative;
    display: inline-block;
}

.rdp-field[b-qkps7o0wth] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
    cursor: pointer;
}

    .rdp-field:hover[b-qkps7o0wth] {
        border-color: #000061;
    }

/* Blue tint when the selected date has SOME data. */
.rdp-field.rdp-field-hasdata[b-qkps7o0wth] {
    background: #e6f3fa;
    border-color: #009DC9;
}

/* Green tint when the selected date has ALL data entered. */
.rdp-field.rdp-field-complete[b-qkps7o0wth] {
    background: #e5f6ec;
    border-color: #16a34a;
}

.rdp-field-icon[b-qkps7o0wth] {
    font-size: 0.85rem;
    line-height: 1;
}

.rdp-backdrop[b-qkps7o0wth] {
    position: fixed;
    inset: 0;
    z-index: 500;
}

.rdp-popup[b-qkps7o0wth] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 501;
    width: 250px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
    padding: 8px;
}

.rdp-nav[b-qkps7o0wth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.rdp-nav-btn[b-qkps7o0wth] {
    width: 26px;
    height: 26px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: #374151;
}

    .rdp-nav-btn:hover[b-qkps7o0wth] {
        background: #f3f4f6;
    }

.rdp-nav-label[b-qkps7o0wth] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #000061;
}

.rdp-grid[b-qkps7o0wth] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.rdp-dow[b-qkps7o0wth] {
    margin-bottom: 2px;
}

.rdp-dow-cell[b-qkps7o0wth] {
    text-align: center;
    font-size: 0.66rem;
    font-weight: 600;
    color: #9ca3af;
    padding: 2px 0;
}

.rdp-cell[b-qkps7o0wth] {
    aspect-ratio: 1 / 1;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .rdp-cell:hover[b-qkps7o0wth] {
        background: #f3f4f6;
    }

.rdp-cell-empty[b-qkps7o0wth] {
    cursor: default;
}

/* Blue "some data" background — the whole point of the custom picker. */
.rdp-cell.rdp-cell-hasdata[b-qkps7o0wth] {
    background: #d7edf8;
    color: #0b5c78;
    font-weight: 600;
}

    .rdp-cell.rdp-cell-hasdata:hover[b-qkps7o0wth] {
        background: #c3e4f4;
    }

/* Green "all data entered" background — a fully-complete report date. */
.rdp-cell.rdp-cell-complete[b-qkps7o0wth] {
    background: #d6f0e0;
    color: #14652f;
    font-weight: 600;
}

    .rdp-cell.rdp-cell-complete:hover[b-qkps7o0wth] {
        background: #c3e8d1;
    }

.rdp-cell.rdp-cell-today[b-qkps7o0wth] {
    border-color: #9ca3af;
}

.rdp-cell.rdp-cell-sel[b-qkps7o0wth] {
    background: #000061;
    color: white;
    font-weight: 600;
}

    .rdp-cell.rdp-cell-sel:hover[b-qkps7o0wth] {
        background: #000061;
    }

.rdp-footer[b-qkps7o0wth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #f3f4f6;
}

.rdp-legend[b-qkps7o0wth] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: #6b7280;
}

.rdp-legend-dot[b-qkps7o0wth] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #d7edf8;
    border: 1px solid #a9d5ea;
}

.rdp-legend-dot-complete[b-qkps7o0wth] {
    background: #d6f0e0;
    border-color: #9bd5b2;
    margin-left: 6px;
}

.rdp-today-btn[b-qkps7o0wth] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    cursor: pointer;
    color: #374151;
}

    .rdp-today-btn:hover[b-qkps7o0wth] {
        background: #f3f4f6;
    }
/* /Components/Pages/General/ReportBuilder/Components/Footer/ReportFooterBlock.razor.rz.scp.css */
.report-component-card[b-cnzn3yrvxp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-cnzn3yrvxp] {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer-icon[b-cnzn3yrvxp] { background: #009DC9; }

.component-label[b-cnzn3yrvxp] { font-size: 0.8rem; font-weight: 500; }

.report-footer[b-cnzn3yrvxp] {
    display: flex;
    flex-direction: row;
    color: #000061;
    align-items: center;
    padding: 8px 0 0 0;
}

.footer-contact[b-cnzn3yrvxp] {
    text-align: right;
    width: 28%;
}

.footer-email[b-cnzn3yrvxp] {
    font-size: 0.8em;
}

.footer-divider[b-cnzn3yrvxp] {
    background-color: #000061;
    height: 60px;
    width: 1px;
    margin: 0 2%;
}

.footer-disclaimer[b-cnzn3yrvxp] {
    width: 72%;
    font-size: 0.6em;
    margin-right: 1%;
}
/* /Components/Pages/General/ReportBuilder/Components/Footer/ReportFooterBlockEditModal.razor.rz.scp.css */
.edit-modal-body[b-ilz0y6tjls] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.edit-section-label[b-ilz0y6tjls] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 4px 0;
}

.edit-row[b-ilz0y6tjls] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-label[b-ilz0y6tjls] {
    width: 110px;
    font-size: 0.8rem;
    color: #374151;
    flex-shrink: 0;
}

.edit-input[b-ilz0y6tjls] {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
}

.edit-input:focus[b-ilz0y6tjls] {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 2px rgba(0,0,97,.1);
}

.visibility-options[b-ilz0y6tjls] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1;
}

.visibility-option[b-ilz0y6tjls] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

.template-option[b-ilz0y6tjls] {
    border: 2px solid #000061;
    border-radius: 6px;
    padding: 10px 12px;
}

.template-option-top[b-ilz0y6tjls] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.template-name[b-ilz0y6tjls] { font-size: 0.85rem; font-weight: 600; color: #111827; }

.template-file[b-ilz0y6tjls] {
    font-size: 0.7rem;
    color: #6b7280;
    font-family: monospace;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
}

.template-preview[b-ilz0y6tjls] {
    width: 100%;
    height: 110px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: white;
    padding: 8px;
    box-sizing: border-box;
}

.preview-scale-wrapper[b-ilz0y6tjls] {
    transform: scale(0.5);
    transform-origin: top left;
    width: 200%;
    pointer-events: none;
}

.edit-coming-soon[b-ilz0y6tjls] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
    margin-top: 4px;
}
/* /Components/Pages/General/ReportBuilder/Components/Graph/ReportGraph.razor.rz.scp.css */
.report-component-card[b-p4h13nn7ai] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-p4h13nn7ai] {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.graph-icon[b-p4h13nn7ai] { background: #8b5cf6; }

.component-label[b-p4h13nn7ai] { font-size: 0.8rem; font-weight: 500; }

.report-graph-live[b-p4h13nn7ai] {
    width: 100%;
    /* No explicit height — it's a flex:1 child, so it fills the space left after the optional header
       band. An explicit height:100% here forced full-box height and pushed the chart's legend out of
       the box (clipped) when a header was shown. */
    min-height: 0;
    box-sizing: border-box;
    /* Reports are static print-style output — no tooltips, hover, zoom or legend toggling.
       This also lets a click land on the component so it can be dragged/selected. */
    pointer-events: none;
}

.report-graph-empty[b-p4h13nn7ai] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 8px;
}

.graph-svg[b-p4h13nn7ai] {
    width: 100%;
    max-width: 300px;
    height: 80px;
    opacity: 0.5;
}

.empty-placeholder[b-p4h13nn7ai] {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.8rem;
    margin: 0;
    text-align: center;
}
/* /Components/Pages/General/ReportBuilder/Components/Graph/ReportGraphEditModal.razor.rz.scp.css */
.edit-modal-body[b-rc57t8esnc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.edit-section-label[b-rc57t8esnc] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 0;
}

.edit-row[b-rc57t8esnc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-label[b-rc57t8esnc] {
    width: 120px;
    font-size: 0.8rem;
    color: #374151;
    flex-shrink: 0;
}

.edit-input[b-rc57t8esnc] {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    box-sizing: border-box;
}

.edit-input:focus[b-rc57t8esnc] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.size-input[b-rc57t8esnc] { max-width: 80px; flex: none; }

.edit-divider[b-rc57t8esnc] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }

/* Shared header-theme swatches + format buttons — standard styling matches the text block modal.
   Defined here because scoped CSS is per-component and this modal was missing them (buttons rendered
   as blocky browser-default greys). */
.theme-swatch[b-rc57t8esnc] {
    padding: 4px 10px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.1s;
}

    .theme-swatch:hover[b-rc57t8esnc] { border-color: #9ca3af; }
    .theme-swatch.theme-active[b-rc57t8esnc] { border-color: #000061; }

.fmt-btn[b-rc57t8esnc] {
    width: 32px;
    height: 32px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .fmt-btn:hover[b-rc57t8esnc] { background: #f3f4f6; }
    .fmt-btn-active[b-rc57t8esnc] { background: #000061; border-color: #000061; color: white; }
    .fmt-btn-active b[b-rc57t8esnc], .fmt-btn-active i[b-rc57t8esnc] { color: white; }

/* ── Tab bar ── */
.graph-tab-bar[b-rc57t8esnc] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-top: 14px;
    margin-bottom: 10px;
}

.graph-tab-btn[b-rc57t8esnc] {
    padding: 7px 18px;
    font-size: 0.82rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: #6b7280;
    cursor: pointer;
    margin-bottom: -2px;
    border-radius: 4px 4px 0 0;
    transition: color 0.1s, border-color 0.1s;
}

.graph-tab-btn:hover[b-rc57t8esnc] { color: #374151; background: #f9fafb; }
.graph-tab-active[b-rc57t8esnc] { color: #000061; border-bottom-color: #000061; font-weight: 600; }

/* ── Series list ── */
.series-list[b-rc57t8esnc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 6px;
}

.series-row[b-rc57t8esnc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #374151;
}

.series-type-badge[b-rc57t8esnc] {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.series-badge-dp[b-rc57t8esnc]    { background: #059669; }
.series-badge-route[b-rc57t8esnc] { background: #2563eb; }

.series-color-picker[b-rc57t8esnc] {
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    background: white;
}
.series-dash[b-rc57t8esnc] {
    height: 22px;
    max-width: 74px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    font-size: 0.68rem;
    color: #374151;
    background: white;
    cursor: pointer;
    flex-shrink: 0;
}
.series-dash:focus[b-rc57t8esnc] { outline: none; border-color: #000061; }

.series-color-picker[b-rc57t8esnc]::-webkit-color-swatch-wrapper { padding: 2px; }
.series-color-picker[b-rc57t8esnc]::-webkit-color-swatch { border: none; border-radius: 2px; }

.series-info[b-rc57t8esnc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.series-label-input[b-rc57t8esnc] {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 0.8rem;
    color: #374151;
    background: transparent;
    box-sizing: border-box;
}
.series-label-input:hover[b-rc57t8esnc]  { border-color: #e5e7eb; background: white; }
.series-label-input:focus[b-rc57t8esnc]  { outline: none; border-color: #000061; background: white; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.series-route-path[b-rc57t8esnc] {
    font-size: 0.68rem;
    color: #9ca3af;
    padding: 0 6px;
}

.series-no-data[b-rc57t8esnc] {
    font-size: 0.68rem;
    color: #f59e0b;
    padding: 0 6px;
    font-style: italic;
}

/* ── Per-series period selector ── */
.series-period-row[b-rc57t8esnc] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
    flex-wrap: wrap;
}

.series-period-btn[b-rc57t8esnc],
.series-period-type[b-rc57t8esnc] {
    padding: 2px 8px;
    font-size: 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    line-height: 1.4;
}
.series-period-btn:hover[b-rc57t8esnc],
.series-period-type:hover[b-rc57t8esnc] { border-color: #9ca3af; color: #374151; }
.series-period-active[b-rc57t8esnc] { background: #000061; color: white; border-color: #000061; }

.series-period-offset[b-rc57t8esnc] {
    width: 48px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.7rem;
    color: #374151;
    background: #f9fafb;
    text-align: center;
}
.series-period-offset:focus[b-rc57t8esnc] { outline: none; border-color: #000061; }

.series-period-hint[b-rc57t8esnc] {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-left: 2px;
}

.series-cutoff-row[b-rc57t8esnc] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px 3px;
    flex-wrap: wrap;
}

.series-cutoff-date[b-rc57t8esnc] {
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.7rem;
    color: #374151;
    background: #f9fafb;
}

    .series-cutoff-date:focus[b-rc57t8esnc] { outline: none; border-color: #000061; }

.series-remove-btn[b-rc57t8esnc] {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}
.series-remove-btn:hover[b-rc57t8esnc] { color: #b91c1c; }

/* ── Drag handle + legend toggle ── */
.series-drag[b-rc57t8esnc] {
    cursor: grab;
    color: #9ca3af;
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: -3px;
    padding: 0 2px;
    flex-shrink: 0;
    user-select: none;
}
.series-drag:hover[b-rc57t8esnc] { color: #6b7280; }
.series-drag:active[b-rc57t8esnc] { cursor: grabbing; }

.series-dragging[b-rc57t8esnc] { opacity: 0.5; }

.series-legend-btn[b-rc57t8esnc] {
    background: none;
    border: none;
    color: #000061;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}
.series-legend-btn.series-legend-off[b-rc57t8esnc] { color: #cbd5e1; }
.series-legend-btn:hover[b-rc57t8esnc] { color: #009DC9; }

/* ── Add series type toggle / buttons ── */
.type-toggle[b-rc57t8esnc] { display: flex; gap: 6px; margin-top: 6px; }

.type-btn[b-rc57t8esnc] {
    padding: 5px 14px;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}
.type-btn:hover[b-rc57t8esnc] { border-color: #9ca3af; }
.type-btn-active[b-rc57t8esnc] { background: #000061; color: white; border-color: #000061; }

/* ── Division buttons ── */
.division-row[b-rc57t8esnc] { display: flex; gap: 6px; flex-wrap: wrap; }

.div-btn[b-rc57t8esnc] {
    padding: 4px 12px;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}
.div-btn:hover[b-rc57t8esnc] { border-color: #9ca3af; }
.div-btn-active[b-rc57t8esnc] { background: #000061; color: white; border-color: #000061; }

/* ── Route search ── */
.search-wrapper[b-rc57t8esnc] { position: relative; }

.route-dropdown[b-rc57t8esnc] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    max-height: 220px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 2px;
}

.route-option[b-rc57t8esnc] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.route-option:last-child[b-rc57t8esnc] { border-bottom: none; }
.route-option:hover[b-rc57t8esnc] { background: #eff6ff; }

.route-code[b-rc57t8esnc] { font-size: 0.7rem; font-weight: 600; color: #000061; }
.route-desc[b-rc57t8esnc] { font-size: 0.8rem; color: #374151; }

/* ── Data tab: datapoint series list ── */
.dp-series-row[b-rc57t8esnc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 4px;
    background: #fafafa;
    user-select: none;
}
.dp-series-row:hover[b-rc57t8esnc] { border-color: #9ca3af; background: #f3f4f6; }
.dp-series-expanded[b-rc57t8esnc] { border-color: #000061; background: #eff6ff; border-radius: 4px 4px 0 0; }

.dp-series-label[b-rc57t8esnc]  { flex: 1; font-size: 0.85rem; font-weight: 500; color: #374151; }

.dp-series-status[b-rc57t8esnc] {
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}
.dp-status-ok[b-rc57t8esnc]   { background: #dcfce7; color: #166534; }
.dp-status-none[b-rc57t8esnc] { background: #f3f4f6; color: #9ca3af; }

.dp-chevron[b-rc57t8esnc] { font-size: 0.55rem; color: #9ca3af; }

/* ── Data paste panel ── */
.dp-paste-panel[b-rc57t8esnc] {
    padding: 10px 12px 12px;
    border: 1px solid #000061;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: white;
    margin-bottom: 4px;
}

.paste-textarea[b-rc57t8esnc] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.78rem;
    font-family: monospace;
    color: #374151;
    background: #f9fafb;
    box-sizing: border-box;
    resize: vertical;
}
.paste-textarea:focus[b-rc57t8esnc] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

/* ── Preview ── */
.graph-preview-wrap[b-rc57t8esnc] {
    height: 300px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: white;
}

/* ── Date format builder (X-axis) ── */
.date-parts-row[b-rc57t8esnc] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 28px;
    padding: 4px 0;
    align-items: center;
}

.date-parts-empty[b-rc57t8esnc] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

.date-part-chip[b-rc57t8esnc] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-family: monospace;
    white-space: nowrap;
}

.date-part-text[b-rc57t8esnc] { line-height: 1.2; }

.date-part-remove[b-rc57t8esnc] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 1px;
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.5;
    color: inherit;
}
.date-part-remove:hover[b-rc57t8esnc] { opacity: 1; }

.date-part-day[b-rc57t8esnc]     { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.date-part-weekday[b-rc57t8esnc] { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.date-part-month[b-rc57t8esnc]   { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.date-part-year[b-rc57t8esnc]    { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.date-part-quarter[b-rc57t8esnc] { background: #fef9c3; color: #854d0e; border-color: #fef08a; }
.date-part-week[b-rc57t8esnc]    { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.date-part-sep[b-rc57t8esnc]     { background: #ffffff; color: #6b7280; border-color: #d1d5db; }

.date-preview[b-rc57t8esnc] {
    font-size: 0.78rem;
    color: #374151;
    margin: 2px 0 0;
}

.date-picker-row[b-rc57t8esnc] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.date-picker-btn[b-rc57t8esnc] {
    padding: 4px 10px;
    font-size: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}
.date-picker-btn:hover[b-rc57t8esnc] { border-color: #9ca3af; }
.date-picker-btn.active[b-rc57t8esnc] { background: #000061; color: white; border-color: #000061; }

.date-options-row[b-rc57t8esnc] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px 0;
    align-items: center;
    margin-top: 4px;
}

.date-opt-btn[b-rc57t8esnc] {
    padding: 4px 12px;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    cursor: pointer;
    font-family: monospace;
}
.date-opt-btn:hover[b-rc57t8esnc] { border-color: #000061; color: #000061; background: #eff6ff; }
/* /Components/Pages/General/ReportBuilder/Components/Header/ReportHeaderBlock.razor.rz.scp.css */
.report-component-card[b-spgoms9xmq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-spgoms9xmq] {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-icon[b-spgoms9xmq] { background: #000061; }

.component-label[b-spgoms9xmq] { font-size: 0.8rem; font-weight: 500; }

/* Editor-only affordance for the draggable title/subtitle (not delivered to the PDF). */
.rh-banner-edit .rh-el[b-spgoms9xmq] {
    border-radius: 3px;
    transition: outline-color 0.1s, background 0.1s;
    outline: 1px dashed transparent;
}

    .rh-banner-edit .rh-el:hover[b-spgoms9xmq] {
        outline-color: #94a3b8;
        background: rgba(148, 163, 184, 0.12);
    }
/* /Components/Pages/General/ReportBuilder/Components/Header/ReportHeaderBlockEditModal.razor.rz.scp.css */
.edit-modal-body[b-3t3eva61fx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.edit-section-label[b-3t3eva61fx] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 4px 0;
}

.edit-row[b-3t3eva61fx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-label[b-3t3eva61fx] {
    width: 70px;
    font-size: 0.8rem;
    color: #374151;
    flex-shrink: 0;
}

.edit-input[b-3t3eva61fx] {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
}

.edit-input:focus[b-3t3eva61fx] {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 2px rgba(0,0,97,.1);
}

.template-option[b-3t3eva61fx] {
    border: 2px solid #000061;
    border-radius: 6px;
    padding: 10px 12px;
}

.template-option-top[b-3t3eva61fx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.template-name[b-3t3eva61fx] { font-size: 0.85rem; font-weight: 600; color: #111827; }

.template-file[b-3t3eva61fx] {
    font-size: 0.7rem;
    color: #6b7280;
    font-family: monospace;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
}

.template-preview[b-3t3eva61fx] {
    width: 100%;
    height: 110px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: white;
}

.preview-scale-wrapper[b-3t3eva61fx] {
    transform: scale(0.38);
    transform-origin: top left;
    width: 263%;
    pointer-events: none;
}

.edit-coming-soon[b-3t3eva61fx] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
    margin-top: 4px;
}

/* Bold/Italic/Underline toggle buttons for title + subtitle styling. */
.fmt-btn[b-3t3eva61fx] {
    width: 26px;
    height: 26px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    color: #374151;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .fmt-btn:hover[b-3t3eva61fx] {
        background: #f3f4f6;
    }

    .fmt-btn.fmt-btn-active[b-3t3eva61fx] {
        background: #000061;
        border-color: #000061;
        color: white;
    }
/* /Components/Pages/General/ReportBuilder/Components/Image/ReportImage.razor.rz.scp.css */
.report-component-card[b-vyzvwi6irb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-vyzvwi6irb] {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.image-icon[b-vyzvwi6irb] {
    background: #f5e150;
}

.component-label[b-vyzvwi6irb] {
    font-size: 0.8rem;
    font-weight: 500;
}


.report-image-wrap[b-vyzvwi6irb] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* object-fit:contain keeps aspect ratio and scales to fit — never overflows */
.report-image-fill[b-vyzvwi6irb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.image-empty-placeholder[b-vyzvwi6irb] {
    color: #9ca3af;
    font-size: 0.8rem;
    text-align: center;
    padding: 8px;
}
/* /Components/Pages/General/ReportBuilder/Components/Image/ReportImageEditModal.razor.rz.scp.css */
.edit-modal-body[b-of8c32d6ip] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.edit-section-label[b-of8c32d6ip] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 12px 0 4px;
}

/* ── Existing image gallery ── */
.img-gallery[b-of8c32d6ip] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding: 2px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
}

.img-thumb-wrap[b-of8c32d6ip] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
    background: white;
    min-width: 0;
}

.img-thumb-wrap:hover[b-of8c32d6ip]        { border-color: #9ca3af; background: #f3f4f6; }
.img-thumb-selected[b-of8c32d6ip]          { border-color: #000061 !important; background: #eff6ff !important; }

.img-thumb[b-of8c32d6ip] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 3px;
    background: #f9fafb;
}

.img-thumb-label[b-of8c32d6ip] {
    font-size: 0.62rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

/* ── Remove button ── */
.remove-img-btn[b-of8c32d6ip] {
    padding: 4px 10px;
    font-size: 0.78rem;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    background: #fef2f2;
    color: #dc2626;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.remove-img-btn:hover:not(:disabled)[b-of8c32d6ip] { background: #fee2e2; }
.remove-img-btn:disabled[b-of8c32d6ip]             { opacity: 0.5; cursor: default; }

/* ── Header / border section controls (scoped CSS is per-component, so these shared "edit modal"
   classes must be defined here too — mirrors the text block modal's definitions). ── */
.tb-header-toggle[b-of8c32d6ip] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

.theme-swatch[b-of8c32d6ip] {
    padding: 4px 10px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.1s;
}

    .theme-swatch:hover[b-of8c32d6ip]  { border-color: #9ca3af; }
    .theme-swatch.theme-active[b-of8c32d6ip] { border-color: #000061; }

.edit-input[b-of8c32d6ip] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    box-sizing: border-box;
}

.edit-input:focus[b-of8c32d6ip] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.size-input-text[b-of8c32d6ip] {
    width: 46px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
    text-align: right;
}
.size-input-text:focus[b-of8c32d6ip] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.edit-divider[b-of8c32d6ip] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }
/* /Components/Pages/General/ReportBuilder/Components/List/ReportList.razor.rz.scp.css */
/* ── Palette card (template mode) ── */
.report-component-card[b-nxvbghnw6i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-nxvbghnw6i] {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list-icon[b-nxvbghnw6i] {
    background: #EB3871;
}

.list-icon-lines[b-nxvbghnw6i] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 14px;
}

    .list-icon-lines span[b-nxvbghnw6i] {
        display: block;
        height: 2px;
        background: white;
        border-radius: 1px;
    }

.component-label[b-nxvbghnw6i] { font-size: 0.8rem; font-weight: 500; }

/* ── Canvas (view mode) ── */
.list-body[b-nxvbghnw6i] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── List resize support ── */
.list-resize-wrap[b-nxvbghnw6i] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.list-table[b-nxvbghnw6i] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.list-table th[b-nxvbghnw6i] {
    padding: 5px 8px;
    font-size: 0.8em;
    font-weight: 600;
    border-right: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    text-align: left;
}

    .list-table th:last-child[b-nxvbghnw6i] { border-right: none; }

.list-table td[b-nxvbghnw6i] {
    padding: 5px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid rgba(0,0,0,0.05);
    box-sizing: border-box;
    color: #000000;
}

    .list-table td:last-child[b-nxvbghnw6i] { border-right: none; }

.list-table tbody tr[b-nxvbghnw6i] { border-bottom: 1px solid #e5e7eb; }
.list-table tbody tr:last-child[b-nxvbghnw6i] { border-bottom: none; }

.list-placeholder[b-nxvbghnw6i] {
    padding: 12px 8px;
    color: #9ca3af;
    font-style: italic;
    font-size: 0.78rem;
}

/* ── Column resize handle (identical pattern to table) ── */
.col-resize-handle[b-nxvbghnw6i] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    margin-left: -3px;
    cursor: col-resize;
    z-index: 15;
}

    .col-resize-handle:hover[b-nxvbghnw6i] {
        background: rgba(0, 0, 97, 0.12);
    }

/* Hovering anywhere on the list (edit/style mode only — the handles only exist then) reveals a thin
   guide line at every resizable column divider so the user can see where to grab, exactly like the
   table. Scoped/hover-only, so it never reaches the html2canvas PDF. */
.list-resize-wrap:hover .col-resize-handle[b-nxvbghnw6i]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0, 0, 97, 0.25);
    pointer-events: none;
}

.col-resize-handle:hover[b-nxvbghnw6i]::before {
    background: rgba(0, 0, 97, 0.55);
    width: 2px;
}
/* /Components/Pages/General/ReportBuilder/Components/List/ReportListEditModal.razor.rz.scp.css */
.edit-modal-body[b-o49kqka1zy] { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }

.edit-section-label[b-o49kqka1zy] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 0;
}

.edit-input[b-o49kqka1zy] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    box-sizing: border-box;
}

.edit-input:focus[b-o49kqka1zy] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.col-add-btn[b-o49kqka1zy] {
    align-self: flex-start;
    padding: 5px 10px;
    border: 1px dashed #d1d5db;
    border-radius: 4px;
    background: white;
    font-size: 0.78rem;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
}

.col-add-btn:hover[b-o49kqka1zy] { background: #f3f4f6; border-color: #9ca3af; }

.col-remove-btn[b-o49kqka1zy] {
    width: 24px;
    height: 24px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    font-size: 1rem;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    transition: background 0.1s, border-color 0.1s;
}

.col-remove-btn:hover:not(:disabled)[b-o49kqka1zy] { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.col-remove-btn:disabled[b-o49kqka1zy] { opacity: 0.35; cursor: not-allowed; }

.tb-header-toggle[b-o49kqka1zy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

.theme-swatch[b-o49kqka1zy] {
    padding: 4px 10px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.1s;
}

    .theme-swatch:hover[b-o49kqka1zy]  { border-color: #9ca3af; }
    .theme-swatch.theme-active[b-o49kqka1zy] { border-color: #000061; }

/* Format buttons (bold / align) — standard styling matches the text block modal; defined here
   because scoped CSS is per-component and this modal was missing it (buttons rendered blocky). */
.fmt-btn[b-o49kqka1zy] {
    width: 32px;
    height: 32px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .fmt-btn:hover[b-o49kqka1zy] { background: #f3f4f6; }
    .fmt-btn-active[b-o49kqka1zy] { background: #000061; border-color: #000061; color: white; }
    .fmt-btn-active b[b-o49kqka1zy], .fmt-btn-active i[b-o49kqka1zy] { color: white; }

.size-input-text[b-o49kqka1zy] {
    width: 46px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
    text-align: right;
}

.size-input-text:focus[b-o49kqka1zy] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.size-select[b-o49kqka1zy] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    box-sizing: border-box;
}
.size-select:focus[b-o49kqka1zy] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.edit-divider[b-o49kqka1zy] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }
/* /Components/Pages/General/ReportBuilder/Components/Shared/BorderBackgroundEditor.razor.rz.scp.css */
.bba-root[b-tea2wjazj2] { padding: 4px 0; }

.bba-none[b-tea2wjazj2] {
    min-width: 42px;
    height: 26px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #6b7280;
    font-size: 0.72rem;
    cursor: pointer;
}

.bba-none-active[b-tea2wjazj2] {
    background: #000061;
    color: #fff;
    border-color: #000061;
}

.bba-label[b-tea2wjazj2] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 0 0 8px;
}

.swatch-row[b-tea2wjazj2] { display: flex; flex-wrap: wrap; gap: 6px; }

.swatch[b-tea2wjazj2] {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    outline: 1px solid #e5e7eb;
    transition: outline-color 0.1s, border-color 0.1s;
}

.swatch:hover[b-tea2wjazj2] { outline-color: #9ca3af; }

.swatch-active[b-tea2wjazj2] {
    border-color: #000061 !important;
    outline-color: #000061 !important;
}

/* Custom-colour swatch: a rainbow tile with the native colour input sitting invisibly on top. */
.bba-custom[b-tea2wjazj2] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

.bba-custom input[type="color"][b-tea2wjazj2] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    padding: 0;
    cursor: pointer;
}

.bba-row[b-tea2wjazj2] { display: flex; align-items: center; gap: 10px; }

.bba-sublabel[b-tea2wjazj2] {
    width: 42px;
    font-size: 0.78rem;
    color: #374151;
    flex-shrink: 0;
}

.bba-range[b-tea2wjazj2] { flex: 1; accent-color: #000061; }

.bba-px[b-tea2wjazj2] {
    width: 28px;
    text-align: right;
    font-size: 0.78rem;
    color: #374151;
}

.bba-select[b-tea2wjazj2] {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    box-sizing: border-box;
}

.bba-select:focus[b-tea2wjazj2] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }
/* /Components/Pages/General/ReportBuilder/Components/Shared/ColorSelect.razor.rz.scp.css */
.cs-wrap[b-fzpbl0k4m6] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}

/* The native swatch — a compact rounded chip that shows the current colour. */
.cs-native[b-fzpbl0k4m6] {
    display: inline-flex;
    width: 30px;
    height: 26px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

.cs-native input[type="color"][b-fzpbl0k4m6] {
    width: 140%;
    height: 140%;
    margin: -5px;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
}
/* /Components/Pages/General/ReportBuilder/Components/Shared/FontColorPresets.razor.rz.scp.css */
.fc-presets[b-cw7ntc44t9] {
    position: relative;
    display: inline-flex;
}

.fc-presets-trigger[b-cw7ntc44t9] {
    height: 28px;
    width: 30px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: linear-gradient(135deg, #009DC9 0%, #163E9F 55%, #000061 100%);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.fc-presets-caret[b-cw7ntc44t9] {
    font-size: 0.7rem;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* Full-screen catcher so clicking anywhere else closes the popover. */
.fc-presets-backdrop[b-cw7ntc44t9] {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.fc-presets-panel[b-cw7ntc44t9] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 61;
    display: grid;
    grid-template-columns: repeat(4, 22px);
    gap: 5px;
    padding: 7px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.fc-swatch[b-cw7ntc44t9] {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    padding: 0;
}

    .fc-swatch:hover[b-cw7ntc44t9] {
        outline: 2px solid #163E9F;
        outline-offset: 1px;
    }
/* /Components/Pages/General/ReportBuilder/Components/Shared/RichTextEditor.razor.rz.scp.css */
.rte-wrap[b-ovrasv9xk0] {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.rte-toolbar[b-ovrasv9xk0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.rte-btn[b-ovrasv9xk0] {
    min-width: 26px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #374151;
    font-size: 0.8rem;
    cursor: pointer;
    line-height: 1;
}

.rte-btn:hover[b-ovrasv9xk0] { background: #eef2ff; }
.rte-clear[b-ovrasv9xk0] { color: #9ca3af; }
.rte-btn-active[b-ovrasv9xk0] { background: #e0e7ff; border-color: #7c3aed; }
.rte-btn:disabled[b-ovrasv9xk0] { opacity: 0.4; cursor: default; }
.rte-btn:disabled:hover[b-ovrasv9xk0] { background: #fff; }

/* Hyperlink input bar, shown under the toolbar when the link button is pressed. */
.rte-linkbar[b-ovrasv9xk0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    background: #f3f4ff;
    border-bottom: 1px solid #e5e7eb;
}

.rte-linkinput[b-ovrasv9xk0] {
    flex: 1;
    min-width: 0;
    height: 24px;
    padding: 0 8px;
    border: 1px solid #c7d2fe;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #374151;
}

    .rte-linkinput:focus[b-ovrasv9xk0] {
        outline: none;
        border-color: #7c3aed;
    }

.rte-sep[b-ovrasv9xk0] {
    width: 1px;
    height: 18px;
    background: #e5e7eb;
    margin: 0 2px;
}

.rte-color[b-ovrasv9xk0] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.rte-color-a[b-ovrasv9xk0] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    pointer-events: none;
}

/* Native colour input sits invisibly over the swatch */
.rte-color input[type="color"][b-ovrasv9xk0] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    cursor: pointer;
}

.rte-editor[b-ovrasv9xk0] {
    padding: 8px 10px;
    font-size: 0.85rem;
    text-align: justify;
    color: #374151;
    outline: none;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.rte-editor.rte-single[b-ovrasv9xk0] {
    min-height: 0;
    white-space: nowrap;
    overflow-x: auto;
}

/* Multi-level bullet / numbered lists. ::deep because the ul/ol/li are created dynamically inside
   the contenteditable (they don't carry Blazor's scope attribute). Markers/indent are set explicitly
   because CSS resets zero list padding. Mirrored in the PDF <style> block in ReportsMain.razor. */
.rte-editor[b-ovrasv9xk0]  ul,
.rte-editor[b-ovrasv9xk0]  ol { margin: 4px 0; padding-left: 1.5em; white-space: normal; }
.rte-editor[b-ovrasv9xk0]  li { margin: 2px 0; }
.rte-editor[b-ovrasv9xk0]  ul { list-style: disc; }
.rte-editor[b-ovrasv9xk0]  ul ul { list-style: circle; }
.rte-editor[b-ovrasv9xk0]  ul ul ul { list-style: square; }
.rte-editor[b-ovrasv9xk0]  ol { list-style: decimal; }
.rte-editor[b-ovrasv9xk0]  ol ol { list-style: lower-alpha; }
.rte-editor[b-ovrasv9xk0]  ol ol ol { list-style: lower-roman; }

/* Placeholder when empty */
.rte-editor:empty[b-ovrasv9xk0]::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    font-style: italic;
    pointer-events: none;
}

/* ── Inline mode (Inline="true") ───────────────────────────────────────────────
   For hosts that own the typography and the geometry — the Dry Bulk Forecaster's
   printed sheet, where the editable regions are the report itself. Nothing is drawn
   around the editor and everything is inherited, so the text occupies exactly the
   space it would as static markup. The toolbar is taken out of the flow and shown
   only while the editor has focus, which is why the wrapper cannot clip overflow. */
.rte-inline[b-ovrasv9xk0] {
    position: relative;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.rte-inline .rte-toolbar[b-ovrasv9xk0] {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 30;
    margin-bottom: 3px;
    /* Plain white, unlike the docked toolbar: floating over the page, the grey strip read
       as part of the report rather than as a control. */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
}

.rte-inline:focus-within .rte-toolbar[b-ovrasv9xk0] {
    opacity: 1;
    visibility: visible;
}

/* Inherit rather than override: the host's class on an ancestor is what sets the type. */
.rte-inline .rte-editor[b-ovrasv9xk0] {
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    white-space: normal;
    overflow: visible;
}
/* /Components/Pages/General/ReportBuilder/Components/Stack/ReportStack.razor.rz.scp.css */
/* ── Palette card (template mode) ── */
.report-component-card[b-f7wwq5ua4t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-f7wwq5ua4t] {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stack-icon[b-f7wwq5ua4t] { background: #f97316; }

.stack-icon-box[b-f7wwq5ua4t] {
    width: 16px;
    height: 16px;
    border: 2px dotted rgba(255,255,255,0.9);
    border-radius: 2px;
}

.component-label[b-f7wwq5ua4t] { font-size: 0.8rem; font-weight: 500; }

/* ── Child component-tab — bottom-left for regular children, top-left for nested stacks ── */
.component-tab[b-f7wwq5ua4t] {
    position: absolute;
    bottom: 4px;
    left: 4px;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,97,.85);
    border-radius: 4px;
    padding: 0 8px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, visibility 0.12s;
    z-index: 50;
    white-space: nowrap;
}

.stack-child:hover .component-tab[b-f7wwq5ua4t] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Always-visible tab for child stacks — repositioned to top-left so it doesn't clash */
.stack-child .component-tab-always[b-f7wwq5ua4t] {
    visibility: visible;
    opacity: 0.8;
    pointer-events: auto;
    bottom: auto;
    top: 4px;
}

.stack-child:hover .component-tab-always[b-f7wwq5ua4t] {
    opacity: 1;
}

.stack-child-edit:hover .component-content[b-f7wwq5ua4t] {
    outline: 1px dashed #d1d5db;
    border-radius: 2px;
}

.tab-label[b-f7wwq5ua4t] {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    margin-right: 4px;
}

.tab-btn[b-f7wwq5ua4t] {
    background: rgba(255,255,255,.15);
    border: none;
    color: white;
    border-radius: 3px;
    padding: 2px 9px;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.6;
    transition: background 0.1s;
}

    .tab-btn:hover[b-f7wwq5ua4t] { background: rgba(255,255,255,.28); }

    .tab-btn.tab-unstack[b-f7wwq5ua4t] { background: rgba(234,88,12,.75); }

        .tab-btn.tab-unstack:hover[b-f7wwq5ua4t] { background: rgba(234,88,12,1); }

    .tab-btn.tab-delete[b-f7wwq5ua4t] { background: rgba(185,28,28,.7); }

        .tab-btn.tab-delete:hover[b-f7wwq5ua4t] { background: rgba(185,28,28,.9); }

/* ── Stack body ── */
.stack-body[b-f7wwq5ua4t] {
    box-sizing: border-box;
}

/* Subtle always-on outline so nested stacks are visible in edit mode */
.stack-body.stack-edit-mode[b-f7wwq5ua4t] {
    outline: 1px dashed rgba(249, 115, 22, 0.35);
    outline-offset: -1px;
    border-radius: 2px;
}

.stack-empty-hint[b-f7wwq5ua4t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 60px;
    border: 2px dashed #d1d5db;
    border-radius: 4px;
    color: #9ca3af;
    font-size: 0.8rem;
    pointer-events: none;
}

.stack-child[b-f7wwq5ua4t] {
    box-sizing: border-box;
    width: 100%;
}

.stack-child-edit[b-f7wwq5ua4t] {
    cursor: grab;
}

    .stack-child-edit:active[b-f7wwq5ua4t] {
        cursor: grabbing;
    }

/* Style mode: a per-date override hides this child — ghost it so it can be unhidden. */
.stack-child-style-hidden[b-f7wwq5ua4t] {
    opacity: 0.35;
    outline: 1px dashed #9ca3af;
}

    .stack-child-edit .component-content[b-f7wwq5ua4t] {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

/* ── Stack drop-target highlight (shown while dragging from palette) ── */
.stack-body.stack-drop-target[b-f7wwq5ua4t] {
    outline: 2px dashed #f97316;
    outline-offset: -2px;
    border-radius: 3px;
}

/* ── Per-child width resize handle (right edge, always in edit mode) ── */
.stack-child-w-resize[b-f7wwq5ua4t] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 20;
}

    .stack-child-w-resize:hover[b-f7wwq5ua4t] {
        background: rgba(0, 0, 97, 0.12);
    }

/* ── Per-child height resize handle (bottom edge, Table/Graph/Image only) ── */
.stack-child-h-resize[b-f7wwq5ua4t] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 20;
}

    .stack-child-h-resize:hover[b-f7wwq5ua4t] {
        background: rgba(0, 0, 97, 0.12);
    }

.stack-fill-label[b-f7wwq5ua4t] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    padding: 2px 6px;
    background: rgba(255,255,255,.1);
    border-radius: 3px;
}

    .stack-fill-label input[type="checkbox"][b-f7wwq5ua4t] {
        margin: 0;
        cursor: pointer;
    }
/* /Components/Pages/General/ReportBuilder/Components/Stack/ReportStackEditModal.razor.rz.scp.css */
/* ── Shared layout ── */
.edit-modal-body[b-m3v45qdzgq] { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }

.edit-section-label[b-m3v45qdzgq] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 8px 0 4px;
}

.edit-row[b-m3v45qdzgq] { display: flex; align-items: center; gap: 12px; }

.edit-label[b-m3v45qdzgq] {
    width: 100px;
    font-size: 0.8rem;
    color: #374151;
    flex-shrink: 0;
}

.edit-input[b-m3v45qdzgq], .edit-select[b-m3v45qdzgq] {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    box-sizing: border-box;
}

.edit-input:focus[b-m3v45qdzgq], .edit-select:focus[b-m3v45qdzgq] {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 2px rgba(0,0,97,.1);
}

.edit-divider[b-m3v45qdzgq] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }

/* ── Child order list ── */
.child-order-list[b-m3v45qdzgq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 4px;
}

.child-order-list.child-order-row[b-m3v45qdzgq] {
    flex-direction: row;
    flex-wrap: wrap;
}

.child-order-item[b-m3v45qdzgq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: grab;
    user-select: none;
    font-size: 0.78rem;
    color: #374151;
    transition: background 0.1s, border-color 0.1s;
}

    .child-order-item:active[b-m3v45qdzgq] { cursor: grabbing; }

    .child-order-item.child-order-drag-over[b-m3v45qdzgq] {
        border-color: #000061;
        background: #eff6ff;
    }

.child-order-grip[b-m3v45qdzgq] {
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.child-order-label[b-m3v45qdzgq] { flex: 1; font-weight: 500; }

.child-order-num[b-m3v45qdzgq] {
    font-size: 0.7rem;
    color: #9ca3af;
    background: #f3f4f6;
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
}

/* Direction toggle buttons */
.fmt-btn[b-m3v45qdzgq] {
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

    .fmt-btn:hover[b-m3v45qdzgq] { background: #f3f4f6; border-color: #9ca3af; }

.fmt-btn-active[b-m3v45qdzgq] {
    background: #000061;
    border-color: #000061;
    color: #ffffff;
}

    .fmt-btn-active:hover[b-m3v45qdzgq] { background: #000080; border-color: #000080; }
/* /Components/Pages/General/ReportBuilder/Components/StylePanel/ReportStylePanel.razor.rz.scp.css */
/* Style-mode panel — all classes rsp- prefixed (page-scoped CSS rule). */

.rsp-panel[b-c7sr5gh55f] {
    width: 300px;
    flex-shrink: 0;
    background: white;
    border-left: 1px solid #e5e7eb;
    padding: 14px 12px;
    overflow-y: auto;
    font-size: 0.82rem;
}

.rsp-heading[b-c7sr5gh55f] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px;
}

.rsp-subtext[b-c7sr5gh55f] {
    font-size: 0.74rem;
    color: #6b7280;
    margin: 0 0 12px;
}

/* Pronounced page separator with an inline "Hide page" toggle. */
.rsp-page-head[b-c7sr5gh55f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 0 6px;
    padding: 5px 9px;
    background: #eef1f8;
    border-left: 3px solid #000061;
    border-radius: 4px;
}

.rsp-page-label[b-c7sr5gh55f] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #000061;
}

.rsp-page-hide[b-c7sr5gh55f] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
}

    .rsp-page-hide input[b-c7sr5gh55f] { cursor: pointer; }

/* Whole page hidden for this date — mute the separator to match the greyed-out components. */
.rsp-page-hidden .rsp-page-head[b-c7sr5gh55f] {
    background: #f3f4f6;
    border-left-color: #9ca3af;
}

    .rsp-page-hidden .rsp-page-label[b-c7sr5gh55f] { color: #9ca3af; }

.rsp-item[b-c7sr5gh55f] {
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    margin-bottom: 6px;
    background: #fafafa;
}

.rsp-item-selected[b-c7sr5gh55f] {
    border-color: #7c3aed;
    background: white;
}

.rsp-item-hidden[b-c7sr5gh55f] {
    opacity: 0.65;
}

.rsp-item-head[b-c7sr5gh55f] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    padding: 7px 9px;
    cursor: pointer;
    text-align: left;
}

.rsp-item-type[b-c7sr5gh55f] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #000061;
}

.rsp-item-desc[b-c7sr5gh55f] {
    font-size: 0.72rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.rsp-hidden-badge[b-c7sr5gh55f] {
    font-size: 0.64rem;
    font-weight: 600;
    color: #b91c1c;
    background: #fee2e2;
    border-radius: 3px;
    padding: 1px 5px;
}

.rsp-controls[b-c7sr5gh55f] {
    padding: 4px 9px 10px;
    border-top: 1px solid #f3f4f6;
}

.rsp-check[b-c7sr5gh55f] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: #374151;
    margin: 6px 0 8px;
    cursor: pointer;
}

.rsp-grid[b-c7sr5gh55f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    margin-bottom: 6px;
}

.rsp-field[b-c7sr5gh55f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .rsp-field span[b-c7sr5gh55f] {
        font-size: 0.68rem;
        color: #6b7280;
    }

    .rsp-field input[b-c7sr5gh55f] {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        padding: 3px 6px;
        font-size: 0.78rem;
        box-sizing: border-box;
    }

.rsp-hint[b-c7sr5gh55f] {
    font-size: 0.68rem;
    color: #9ca3af;
    margin: 2px 0 6px;
}

.rsp-note[b-c7sr5gh55f] {
    font-size: 0.74rem;
    color: #b45309;
    background: #fef3c7;
    border-radius: 4px;
    padding: 6px 8px;
    margin: 6px 9px 10px;
}

.rsp-reset-btn[b-c7sr5gh55f] {
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #374151;
    font-size: 0.72rem;
    padding: 3px 9px;
    cursor: pointer;
}

    .rsp-reset-btn:hover[b-c7sr5gh55f] {
        background: #f3f4f6;
    }
/* /Components/Pages/General/ReportBuilder/Components/Table/ReportTable.razor.rz.scp.css */
.report-component-card[b-dg541wduoh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-dg541wduoh] {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.table-icon[b-dg541wduoh] { background: #10b981; }

.table-icon-grid[b-dg541wduoh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    width: 16px;
    height: 16px;
}

    .table-icon-grid span[b-dg541wduoh] {
        background: white;
        border-radius: 1px;
    }

.component-label[b-dg541wduoh] { font-size: 0.8rem; font-weight: 500; }

.report-table[b-dg541wduoh] {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.data-table[b-dg541wduoh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.data-table th[b-dg541wduoh],
.data-table td[b-dg541wduoh] {
    border: none;
    padding: 3px 6px;
    text-align: left;
}

.data-table th[b-dg541wduoh] { font-weight: 600; }
.data-table td[b-dg541wduoh] { color: #000000; }
.data-table td.price-col[b-dg541wduoh] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.empty-placeholder[b-dg541wduoh] {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.8rem;
    margin: 8px 0 0 0;
    text-align: center;
}

/* ── Table resize support ── */
.table-resize-wrap[b-dg541wduoh] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Fixed column widths when per-column widths have been set by the user */
.data-table.table-fixed-cols[b-dg541wduoh] {
    table-layout: fixed;
}

/* Column resize handle — invisible vertical strip on interior column borders */
.col-resize-handle[b-dg541wduoh] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    margin-left: -3px;   /* centre the hit zone on the border */
    cursor: col-resize;
    z-index: 15;
}

/* Row resize handle — invisible horizontal strip on interior row borders */
.row-resize-handle[b-dg541wduoh] {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    margin-top: -3px;    /* centre the hit zone on the border */
    cursor: row-resize;
    z-index: 15;
}

.col-resize-handle:hover[b-dg541wduoh],
.row-resize-handle:hover[b-dg541wduoh] {
    background: rgba(0, 0, 97, 0.12);
}

/* Hovering anywhere on the table (edit mode only — the handles only exist then) reveals a thin
   guide line at every resizable divider so the user can see where to grab. */
.table-resize-wrap:hover .col-resize-handle[b-dg541wduoh]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0, 0, 97, 0.25);
    pointer-events: none;
}

.table-resize-wrap:hover .row-resize-handle[b-dg541wduoh]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 97, 0.25);
    pointer-events: none;
}

/* Stronger line on the specific handle being hovered. */
.col-resize-handle:hover[b-dg541wduoh]::before { background: rgba(0, 0, 97, 0.55); width: 2px; }
.row-resize-handle:hover[b-dg541wduoh]::before { background: rgba(0, 0, 97, 0.55); height: 2px; }
/* /Components/Pages/General/ReportBuilder/Components/Table/ReportTableEditModal.razor.rz.scp.css */
.edit-modal-body[b-y7cnbjc68q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.edit-section-label[b-y7cnbjc68q] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 12px 0 4px;
}

.preview-date[b-y7cnbjc68q] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #9ca3af;
}

.edit-row[b-y7cnbjc68q] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-label[b-y7cnbjc68q] {
    width: 120px;
    font-size: 0.8rem;
    color: #374151;
    flex-shrink: 0;
}

.edit-input[b-y7cnbjc68q] {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    width: 100%;
    box-sizing: border-box;
}

.edit-input:focus[b-y7cnbjc68q] {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 2px rgba(0,0,97,.1);
}

.size-input[b-y7cnbjc68q] { max-width: 80px; flex: none; }

.size-input-text[b-y7cnbjc68q] {
    width: 46px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
    text-align: right;
}
.size-input-text:focus[b-y7cnbjc68q] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

/* ── Cell grid ── */
.cell-grid[b-y7cnbjc68q] {
    display: grid;
    gap: 4px;
    margin-top: 4px;
}

/* ── Row / column drag handles ── */
.cell-handle-corner[b-y7cnbjc68q] {
    /* empty top-left corner */
}

.cell-col-handle[b-y7cnbjc68q] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border-bottom: 1px dashed #e5e7eb;
    min-height: 18px;
}

.cell-row-handle[b-y7cnbjc68q] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border-right: 1px dashed #e5e7eb;
}

.cell-drag-handle[b-y7cnbjc68q] {
    display: inline-block;
    color: #d1d5db;
    font-size: 0.72rem;
    cursor: grab;
    user-select: none;
    padding: 2px 3px;
    border-radius: 3px;
    line-height: 1;
}

.cell-drag-handle:hover[b-y7cnbjc68q] {
    color: #6b7280;
    background: #f3f4f6;
}

.cell-drag-handle:active[b-y7cnbjc68q] {
    cursor: grabbing;
}

.cell-drag-over[b-y7cnbjc68q] {
    background: #eff6ff !important;
    outline: 1px solid #93c5fd;
    outline-offset: -1px;
    border-radius: 3px;
}

.cell-tile-drag-over[b-y7cnbjc68q] {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
}

.cell-tile[b-y7cnbjc68q] {
    position: relative;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 5px 7px;
    font-size: 0.72rem;
    color: #374151;
    background: #f9fafb;
    cursor: pointer;
    min-height: 32px;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color 0.1s, background 0.1s;
    user-select: none;
}

.cell-tile:hover[b-y7cnbjc68q] { border-color: #9ca3af; background: #f3f4f6; }

.cell-tile-selected[b-y7cnbjc68q] {
    border-color: #000061 !important;
    background: #eff6ff !important;
    color: #000061;
}

.cell-tile-header[b-y7cnbjc68q] { background: #f3f4f6; font-weight: 600; }
.cell-tile-header.cell-tile-selected[b-y7cnbjc68q] { background: #dbeafe !important; }

/* ── Copy cell → paste onto a selection ── */
.cell-tile-paste-source[b-y7cnbjc68q] {
    border-color: #000061 !important;
    background: #e0e7ff !important;
    outline: 2px dashed #000061;
    outline-offset: -3px;
}

.cell-tile-paste-target[b-y7cnbjc68q] {
    border-color: #16a34a !important;
    background: #dcfce7 !important;
    color: #166534;
}

/* Excel-style range selection + fill preview + corner fill handle */
.cell-tile-range[b-y7cnbjc68q] {
    border-color: #000061 !important;
    background: #e0e7ff !important;
}

.cell-tile-fill[b-y7cnbjc68q] {
    border-color: #000061 !important;
    background: #eef2ff !important;
    outline: 1px dashed #000061;
    outline-offset: -2px;
}

.cell-fill-handle[b-y7cnbjc68q] {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 8px;
    height: 8px;
    background: #000061;
    border: 1px solid #fff;
    border-radius: 1px;
    cursor: crosshair;
    z-index: 3;
}

.cell-paste-bar[b-y7cnbjc68q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid #86efac;
    border-radius: 6px;
    background: #f0fdf4;
}

.cell-paste-info[b-y7cnbjc68q] { font-size: 0.75rem; color: #374151; }

.cell-paste-actions[b-y7cnbjc68q] { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.cell-paste-apply[b-y7cnbjc68q] {
    padding: 4px 10px;
    border: 1px solid #000061;
    border-radius: 4px;
    background: #000061;
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
}
.cell-paste-apply:disabled[b-y7cnbjc68q] { opacity: 0.5; cursor: default; }
.cell-paste-apply:hover:not(:disabled)[b-y7cnbjc68q] { background: #000a80; }

.cell-tile-text[b-y7cnbjc68q] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* ── Skeleton paste box (above the cell grid) ── */
.tbl-skel-paste[b-y7cnbjc68q] {
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 8px;
    background: #f9fafb;
    margin-bottom: 4px;
}

.tbl-skel-textarea[b-y7cnbjc68q] {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.78rem;
    font-family: monospace;
    color: #374151;
}

.tbl-skel-status[b-y7cnbjc68q] {
    font-size: 0.72rem;
    margin-top: 6px;
    padding: 3px 6px;
    border-radius: 4px;
}

.tbl-skel-ok[b-y7cnbjc68q]   { color: #065f46; background: #ecfdf5; }
.tbl-skel-warn[b-y7cnbjc68q] { color: #92400e; background: #fffbeb; }

.tbl-skel-actions[b-y7cnbjc68q] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.tbl-skel-summary[b-y7cnbjc68q] { font-size: 0.72rem; color: #065f46; }

/* Inline quick free-text box shown when a cell is double-clicked. */
.cell-inline-input[b-y7cnbjc68q] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #009DC9;
    border-radius: 3px;
    padding: 1px 3px;
    font-size: 0.72rem;
    color: #111827;
    outline: none;
}

/* ── size-select matches edit-input ── */
.size-select[b-y7cnbjc68q] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    box-sizing: border-box;
}
.size-select:focus[b-y7cnbjc68q] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

/* ── Cell editor panel ── */
.cell-editor[b-y7cnbjc68q] {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    background: #fafafa;
    margin-top: 4px;
}

.type-toggle[b-y7cnbjc68q] { display: flex; gap: 6px; margin-top: 6px; }

.type-btn[b-y7cnbjc68q] {
    padding: 5px 14px;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}

.type-btn:hover[b-y7cnbjc68q] { border-color: #9ca3af; }
.type-btn-active[b-y7cnbjc68q] { background: #000061; color: white; border-color: #000061; }

/* DoD change arrow/value order — draggable chips */
.dod-order[b-y7cnbjc68q] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dod-chip[b-y7cnbjc68q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 0.76rem;
    color: #374151;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    cursor: grab;
    user-select: none;
}

    .dod-chip:active[b-y7cnbjc68q] { cursor: grabbing; }
    .dod-chip:hover[b-y7cnbjc68q]  { border-color: #000061; }

.dod-grip[b-y7cnbjc68q] {
    color: #9ca3af;
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: -2px;
}

/* ── Division buttons ── */
.division-row[b-y7cnbjc68q] { display: flex; gap: 6px; flex-wrap: wrap; }

.div-btn[b-y7cnbjc68q] {
    padding: 4px 12px;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}

.div-btn:hover[b-y7cnbjc68q] { border-color: #9ca3af; }
.div-btn-active[b-y7cnbjc68q] { background: #000061; color: white; border-color: #000061; }

/* ── Route search dropdown ── */
.search-wrapper[b-y7cnbjc68q] { position: relative; }

.group-dropdown[b-y7cnbjc68q] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 2px;
}

.group-option[b-y7cnbjc68q] { padding: 7px 10px; font-size: 0.8rem; color: #374151; cursor: pointer; }
.group-option:hover[b-y7cnbjc68q], .group-option.selected[b-y7cnbjc68q] { background: #eff6ff; color: #000061; }

/* ── Date relativity / period ── */
.relativity-row[b-y7cnbjc68q], .period-row[b-y7cnbjc68q] { display: flex; gap: 6px; flex-wrap: wrap; }

.rel-btn[b-y7cnbjc68q] {
    padding: 4px 10px;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}

.rel-btn:hover[b-y7cnbjc68q] { border-color: #9ca3af; }
.rel-btn-active[b-y7cnbjc68q] { background: #000061; color: white; border-color: #000061; }

/* ── Theme swatches ── */
.theme-row[b-y7cnbjc68q] { display: flex; gap: 8px; }

.theme-swatch[b-y7cnbjc68q] {
    width: 52px;
    height: 32px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    outline: 1px solid #e5e7eb;
    transition: outline-color 0.1s, border-color 0.1s;
}

.theme-swatch:hover[b-y7cnbjc68q] { outline-color: #9ca3af; }

.theme-active[b-y7cnbjc68q] {
    border-color: #000061 !important;
    outline-color: #000061 !important;
}

.edit-divider[b-y7cnbjc68q] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }

/* ── Cell type colours ── shared between cell tiles and type buttons */
:root[b-y7cnbjc68q] {
    --cell-color-freetext: #6b7280;
    --cell-color-route:    #2563eb;
    --cell-color-dp:       #16a34a;
}

.cell-type-freetext[b-y7cnbjc68q] { border-left: 3px solid var(--cell-color-freetext) !important; }
.cell-type-route[b-y7cnbjc68q]    { border-left: 3px solid var(--cell-color-route) !important; }
.cell-type-datapoint[b-y7cnbjc68q]{ border-left: 3px solid var(--cell-color-dp) !important; }
.cell-type-date[b-y7cnbjc68q]     { border-left: 3px solid #7c3aed !important; }

.type-btn-freetext:not(.type-btn-active)[b-y7cnbjc68q] { border-color: var(--cell-color-freetext); color: var(--cell-color-freetext); }
.type-btn-route:not(.type-btn-active)[b-y7cnbjc68q]    { border-color: var(--cell-color-route);    color: var(--cell-color-route); }
.type-btn-datapoint:not(.type-btn-active)[b-y7cnbjc68q]{ border-color: var(--cell-color-dp);       color: var(--cell-color-dp); }

/* ── Date format builder ── */
.date-parts-row[b-y7cnbjc68q] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 30px;
    padding: 5px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fafafa;
    align-items: center;
}

.date-parts-empty[b-y7cnbjc68q] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

.date-part-chip[b-y7cnbjc68q] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px 2px 7px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.date-part-text[b-y7cnbjc68q] { line-height: 1.2; }

.date-part-remove[b-y7cnbjc68q] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.5;
    color: inherit;
}
.date-part-remove:hover[b-y7cnbjc68q] { opacity: 1; }

/* Category colours */
.date-part-day[b-y7cnbjc68q]     { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.date-part-weekday[b-y7cnbjc68q] { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.date-part-month[b-y7cnbjc68q]   { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.date-part-year[b-y7cnbjc68q]    { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.date-part-quarter[b-y7cnbjc68q] { background: #fef9c3; color: #854d0e; border-color: #fef08a; }
.date-part-week[b-y7cnbjc68q]    { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.date-part-sep[b-y7cnbjc68q]     { background: #ffffff; color: #6b7280; border-color: #d1d5db; }

.date-preview[b-y7cnbjc68q] {
    font-size: 0.78rem;
    color: #374151;
    margin: 2px 0 0;
}

.date-picker-row[b-y7cnbjc68q] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.date-picker-btn[b-y7cnbjc68q] {
    padding: 4px 10px;
    font-size: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}
.date-picker-btn:hover[b-y7cnbjc68q] { border-color: #9ca3af; }
.date-picker-btn.active[b-y7cnbjc68q] { background: #000061; color: white; border-color: #000061; }

.date-options-row[b-y7cnbjc68q] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin-top: 4px;
}

.date-opt-btn[b-y7cnbjc68q] {
    padding: 4px 12px;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    color: #374151;
    cursor: pointer;
    font-family: monospace;
}
.date-opt-btn:hover[b-y7cnbjc68q] { border-color: #000061; color: #000061; background: #eff6ff; }

/* ── Cell style controls ── */
.clear-style-btn[b-y7cnbjc68q] {
    margin-left: 6px;
    padding: 3px 8px;
    font-size: 0.72rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
}
.clear-style-btn:hover[b-y7cnbjc68q] { border-color: #9ca3af; color: #374151; }

.fmt-btn[b-y7cnbjc68q] {
    width: 42px;
    height: 36px;
    font-size: 0.85rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fmt-btn:hover[b-y7cnbjc68q] { border-color: #9ca3af; }
.fmt-btn-active[b-y7cnbjc68q] { background: #000061; color: white; border-color: #000061; }
/* /Components/Pages/General/ReportBuilder/Components/TextBlock/ReportTextBlock.razor.rz.scp.css */
.report-component-card[b-ejka0k579v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-ejka0k579v] {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.text-icon[b-ejka0k579v] { background: #3b82f6; }

.component-label[b-ejka0k579v] { font-size: 0.8rem; font-weight: 500; }

.tb-header[b-ejka0k579v] {
    padding: 5px 8px;
    font-weight: 600;
    font-size: 0.8em;
    flex-shrink: 0;
    line-height: 1.4;
}

/* Draggable divider under the header band (edit mode only) — set/adjust header height. */
.tb-header-resize[b-ejka0k579v] {
    height: 6px;
    flex-shrink: 0;
    cursor: ns-resize;
    background: #e5e7eb;
    border-top: 1px solid #cbd5e1;
    position: relative;
}

    .tb-header-resize[b-ejka0k579v]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 26px;
        height: 2px;
        border-radius: 2px;
        background: #94a3b8;
    }

    .tb-header-resize:hover[b-ejka0k579v] {
        background: #dbe3ef;
    }

.textblock-body[b-ejka0k579v] {
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-word;
}

.tb-placeholder[b-ejka0k579v] {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.8rem;
}
/* /Components/Pages/General/ReportBuilder/Components/TextBlock/ReportTextBlockEditModal.razor.rz.scp.css */
.edit-modal-body[b-t03yvi1u4s] { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }

.edit-section-label[b-t03yvi1u4s] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 0;
}

.preview-date[b-t03yvi1u4s] { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9ca3af; }

.source-toggle[b-t03yvi1u4s] { display: flex; gap: 4px; }

.src-btn[b-t03yvi1u4s] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.src-btn:hover[b-t03yvi1u4s] { background: #f3f4f6; }
.src-btn.active[b-t03yvi1u4s] { background: #000061; border-color: #000061; color: white; }

.tb-header-toggle[b-t03yvi1u4s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

.theme-swatch[b-t03yvi1u4s] {
    padding: 4px 10px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.1s;
}

    .theme-swatch:hover[b-t03yvi1u4s]  { border-color: #9ca3af; }
    .theme-swatch.theme-active[b-t03yvi1u4s] { border-color: #000061; }

.search-wrapper[b-t03yvi1u4s] { position: relative; }

.edit-input[b-t03yvi1u4s] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    box-sizing: border-box;
}

.edit-input:focus[b-t03yvi1u4s] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.group-dropdown[b-t03yvi1u4s] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    max-height: 180px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 2px;
}

.group-option[b-t03yvi1u4s] { padding: 7px 10px; font-size: 0.8rem; color: #374151; cursor: pointer; }
.group-option:hover[b-t03yvi1u4s], .group-option.selected[b-t03yvi1u4s] { background: #eff6ff; color: #000061; }

.code-list[b-t03yvi1u4s] {
    display: flex;
    flex-direction: column;
    max-height: 140px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

.code-option[b-t03yvi1u4s] {
    padding: 6px 10px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}

.code-option:last-child[b-t03yvi1u4s] { border-bottom: none; }
.code-option:hover[b-t03yvi1u4s] { background: #f9fafb; }
.code-option.selected[b-t03yvi1u4s] { background: #eff6ff; color: #000061; font-weight: 600; }

.loading-text[b-t03yvi1u4s] { font-size: 0.8rem; color: #6b7280; font-style: italic; }

.fetched-preview[b-t03yvi1u4s] {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 0.8rem;
    color: #374151;
    background: #f0fdf4;
    white-space: pre-wrap;
    max-height: 100px;
    overflow-y: auto;
}

.edit-textarea[b-t03yvi1u4s] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 8px;
    font-size: 0.85rem;
    color: #111827;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

.edit-textarea:focus[b-t03yvi1u4s] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.format-row[b-t03yvi1u4s] { display: flex; align-items: center; gap: 12px; }
.format-toolbar[b-t03yvi1u4s] { display: flex; gap: 4px; }

.fmt-btn[b-t03yvi1u4s] {
    width: 32px;
    height: 32px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, border-color 0.1s;
}

.fmt-btn:hover[b-t03yvi1u4s] { background: #f3f4f6; }
.fmt-btn.active[b-t03yvi1u4s] { background: #000061; border-color: #000061; color: white; }
.fmt-btn.active strong[b-t03yvi1u4s], .fmt-btn.active em[b-t03yvi1u4s] { color: white; }

.size-select[b-t03yvi1u4s] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    box-sizing: border-box;
}
.size-select:focus[b-t03yvi1u4s] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.size-input-text[b-t03yvi1u4s] {
    width: 46px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
    text-align: right;
}
.size-input-text:focus[b-t03yvi1u4s] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.edit-divider[b-t03yvi1u4s] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }

.color-picker-wrap[b-t03yvi1u4s] {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 6px;
    background: white;
    cursor: pointer;
}

.color-picker-label[b-t03yvi1u4s] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
    line-height: 1;
    user-select: none;
}

.color-picker-input[b-t03yvi1u4s] {
    width: 22px;
    height: 22px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
}

.preview-strip[b-t03yvi1u4s] {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 10px 12px;
    min-height: 44px;
    background: #fafafa;
    word-break: break-word;
    max-height: 100px;
    overflow-y: auto;
}

.edit-coming-soon[b-t03yvi1u4s] { font-size: 0.75rem; color: #9ca3af; font-style: italic; }
/* /Components/Pages/General/ReportBuilder/Pages/ReportsMain.razor.rz.scp.css */
/* ── Outer layout ── */
.report-builder[b-9hs8nakhuk] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    overflow: hidden;
}

/* ── Three-column body below toolbar ── */
.report-body[b-9hs8nakhuk] {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 24px;
    padding: 24px;
    overflow: hidden;
}

/* ── Toolbar ── */
.report-toolbar[b-9hs8nakhuk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.toolbar-label[b-9hs8nakhuk] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.toolbar-date[b-9hs8nakhuk] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
}

    .toolbar-date:focus[b-9hs8nakhuk] {
        outline: none;
        border-color: #000061;
    }

    /* Blue tint when the selected report date has datapoint values entered — a quick
       "this report has data for this date" cue in the toolbar. */
    .toolbar-date.toolbar-date-hasdata[b-9hs8nakhuk] {
        background: #e6f3fa;
        border-color: #009DC9;
    }

.toolbar-select[b-9hs8nakhuk] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
    max-width: 220px;
}

/* ── Report picker (custom accordion dropdown replacing the native select) ── */
.report-picker[b-9hs8nakhuk] {
    position: relative;
    display: inline-block;
}

.report-picker-btn[b-9hs8nakhuk] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 200px;
    max-width: 260px;
    cursor: pointer;
    text-align: left;
}

    .report-picker-btn:hover[b-9hs8nakhuk] { border-color: #9ca3af; }
    .report-picker-btn.is-open[b-9hs8nakhuk] { border-color: #000061; }

.report-picker-current[b-9hs8nakhuk] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-picker-caret[b-9hs8nakhuk] {
    font-size: 0.6rem;
    color: #6b7280;
    flex-shrink: 0;
}

/* Invisible full-screen catcher so a click anywhere else closes the picker. */
.report-picker-backdrop[b-9hs8nakhuk] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.report-picker-panel[b-9hs8nakhuk] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 41;
    width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.16);
    padding: 4px;
}

/* Picker header row: + New on one side, Live-only toggle on the other. */
.report-picker-head[b-9hs8nakhuk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px 8px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
}

.report-picker-newbtn[b-9hs8nakhuk] {
    padding: 5px 12px;
    border: 1px solid #000061;
    background: #fff;
    color: #000061;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

    .report-picker-newbtn:hover[b-9hs8nakhuk] { background: #000061; color: #fff; }
    .report-picker-newbtn.is-selected[b-9hs8nakhuk] { background: #eef2ff; }

.report-picker-head-label[b-9hs8nakhuk] { font-size: 0.8rem; font-weight: 600; color: #6b7280; }

.report-picker-livewrap[b-9hs8nakhuk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    color: #374151;
}

.report-picker-live[b-9hs8nakhuk] {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #d1d5db;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s;
}

    .report-picker-live.on[b-9hs8nakhuk] { background: #16a34a; }

.report-picker-live-knob[b-9hs8nakhuk] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: left 0.15s;
}

    .report-picker-live.on .report-picker-live-knob[b-9hs8nakhuk] { left: 18px; }

.report-picker-empty[b-9hs8nakhuk] {
    padding: 10px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
}

.report-picker-dept[b-9hs8nakhuk] { border-top: 1px solid #f3f4f6; }
.report-picker-dept:first-child[b-9hs8nakhuk] { border-top: none; }

.report-picker-dept-head[b-9hs8nakhuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    text-align: left;
}

    .report-picker-dept-head:hover[b-9hs8nakhuk] { background: #f9fafb; }
    .report-picker-dept-head.is-open[b-9hs8nakhuk] { color: #000061; }

.report-picker-dept-caret[b-9hs8nakhuk] {
    font-size: 0.7rem;
    color: #9ca3af;
    width: 10px;
    flex-shrink: 0;
}

.report-picker-dept-name[b-9hs8nakhuk] { flex: 1; }

.report-picker-dept-count[b-9hs8nakhuk] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 1px 7px;
}

.report-picker-reports[b-9hs8nakhuk] {
    display: flex;
    flex-direction: column;
    padding: 2px 0 6px 18px;
}

.report-picker-report[b-9hs8nakhuk] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .report-picker-report:hover[b-9hs8nakhuk] { background: #eff6ff; }
    .report-picker-report.is-selected[b-9hs8nakhuk] {
        background: #000061;
        color: white;
    }

.toolbar-btn[b-9hs8nakhuk] {
    padding: 4px 12px;
    border: 1px solid #000061;
    border-radius: 4px;
    background: white;
    color: #000061;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s;
}

    .toolbar-btn:hover[b-9hs8nakhuk] {
        background: #eff6ff;
    }

/* Save Template with no unsaved layout changes — muted until the layout is edited,
   then reverts to the standard .toolbar-btn look. Mirrors the .mode-inactive palette. */
.toolbar-btn.toolbar-btn-dim[b-9hs8nakhuk],
.toolbar-btn.toolbar-btn-dim:hover[b-9hs8nakhuk] {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: default;
}

/* Active/pressed toolbar toggle (e.g. Hide Data engaged). */
.toolbar-btn.toolbar-btn-active[b-9hs8nakhuk] {
    background: #000061;
    border-color: #000061;
    color: white;
}

.toolbar-mode-btn.mode-edit[b-9hs8nakhuk] {
    background: #f0fdf4;
    border-color: #16a34a;
    color: #15803d;
}

.toolbar-mode-btn.mode-view[b-9hs8nakhuk] {
    background: #fff7ed;
    border-color: #ea580c;
    color: #c2410c;
}

.toolbar-mode-btn.mode-data[b-9hs8nakhuk] {
    background: #fff7f0;
    border-color: #f97316;
    color: #c2410c;
}

/* Active button has full colour; inactive buttons are muted */
.toolbar-mode-btn.mode-style[b-9hs8nakhuk] {
    background: #f5f3ff;
    border-color: #7c3aed;
    color: #6d28d9;
}

.toolbar-mode-btn.mode-inactive[b-9hs8nakhuk] {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
}

.toolbar-sep[b-9hs8nakhuk] {
    width: 1px;
    height: 20px;
    background: #d1d5db;
    flex-shrink: 0;
}

/* ── Palette ── */
.component-palette[b-9hs8nakhuk] {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.palette-heading[b-9hs8nakhuk] {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
    margin: 0 0 2px;
}

/* Report Defaults launcher button (replaces the inline Styles list). */
.rd-open-btn[b-9hs8nakhuk] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #000061;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

    .rd-open-btn:hover[b-9hs8nakhuk] { background: #eff6ff; border-color: #9ca3af; }

/* Report Defaults modal — tabs + rows. */
.rd-tabs[b-9hs8nakhuk] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 12px;
}

.rd-tab[b-9hs8nakhuk] {
    padding: 7px 14px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
}

    .rd-tab:hover[b-9hs8nakhuk] { color: #374151; }
    .rd-tab-active[b-9hs8nakhuk] { color: #000061; border-bottom-color: #000061; }

.rd-body[b-9hs8nakhuk] { display: flex; flex-direction: column; gap: 8px; min-width: 320px; }

.rd-row[b-9hs8nakhuk] { display: flex; align-items: center; gap: 8px; }

.rd-label[b-9hs8nakhuk] { width: 96px; flex-shrink: 0; font-size: 0.82rem; color: #374151; }

.rd-num[b-9hs8nakhuk] {
    width: 70px;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.82rem;
}

.rd-select[b-9hs8nakhuk] {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.82rem;
    background: #fff;
}

.rd-unit[b-9hs8nakhuk] { font-size: 0.75rem; color: #9ca3af; }

.rd-hint[b-9hs8nakhuk] { margin: 6px 0 0; font-size: 0.75rem; color: #9ca3af; font-style: italic; }

.rd-toggle[b-9hs8nakhuk] { display: flex; gap: 6px; }

.rd-toggle-btn[b-9hs8nakhuk] {
    padding: 5px 12px;
    font-size: 0.82rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}

    .rd-toggle-btn:hover[b-9hs8nakhuk] { border-color: #9ca3af; }
    .rd-toggle-active[b-9hs8nakhuk] { background: #000061; color: #fff; border-color: #000061; }

.palette-styles[b-9hs8nakhuk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
}

.palette-style-row[b-9hs8nakhuk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: #374151;
    cursor: pointer;
}

    .palette-style-row > span:first-child[b-9hs8nakhuk] { flex: 1; }

    .palette-style-row input[type="number"][b-9hs8nakhuk] {
        width: 52px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        padding: 4px 6px;
        font-size: 0.78rem;
        color: #374151;
        background: #fff;
        text-align: right;
    }

    .palette-style-row input[type="number"]:focus[b-9hs8nakhuk] {
        outline: none;
        border-color: #000061;
        box-shadow: 0 0 0 2px rgba(0,0,97,.1);
    }

.palette-style-unit[b-9hs8nakhuk] { color: #9ca3af; font-size: 0.72rem; }

.palette-item[b-9hs8nakhuk] {
    position: relative;
    cursor: grab;
    user-select: none;
}

    .palette-item:active[b-9hs8nakhuk] {
        cursor: grabbing;
        opacity: 0.7;
    }

.palette-disabled[b-9hs8nakhuk] {
    opacity: 0.45;
    cursor: not-allowed;
}

.palette-badge[b-9hs8nakhuk] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.62rem;
    background: #000061;
    color: white;
    border-radius: 3px;
    padding: 1px 5px;
    pointer-events: none;
}

/* ── A4 area ── */
.a4-scroll-area[b-9hs8nakhuk] {
    position: relative;
    flex: 1;
    min-height: 0;
    /* Both axes scroll: a zoomed-in (esp. landscape) page overflows horizontally as well as
       vertically, and the .a4-zoom-sizer gives this container the true scaled size to scroll over. */
    overflow: auto;
    background: #e5e7eb;
    border-radius: 8px;
    margin-bottom: 32px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    /* `safe center` centres vertically when the content fits, but falls back to
       `flex-start` when it overflows so every page is reachable via scrolling. */
    justify-content: safe center;
    /* `safe center` on the cross axis too: when a zoomed-in page is wider than the scroll area,
       plain `center` makes the left overflow unreachable (the flexbox overflow-centring bug).
       `safe` falls back to start-alignment on overflow so the whole page can be scrolled to. */
    align-items: safe center;
    gap: 24px;
}

/* Reserves the scaled footprint of the zoomed page so the scroll container's scrollWidth/Height
   include it (a bare transform:scale does not). JS (initZoomSizer) keeps width/height in sync with
   the inner page's offset size × zoom. flex-shrink:0 stops the flex column squeezing it. */
.a4-zoom-sizer[b-9hs8nakhuk] {
    position: relative;
    flex-shrink: 0;
}

.a4-zoom-inner[b-9hs8nakhuk] {
    /* transform + transition are set inline (scale driven by _zoom); origin is top-left so overflow
       goes right/down into the scrollable direction. */
    will-change: transform;
    /* Size to the page's own (fixed) width, NOT the parent. The sizer's width is set by JS from this
       element's offset size × zoom; if this element were width:auto it would stretch to fill that
       explicit sizer width, growing offsetWidth and feeding the observer into a runaway loop. */
    width: max-content;
}

/* Loading placeholder shown over the canvas while a template loads/re-resolves. */
.rb-loading-overlay[b-9hs8nakhuk] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: #e5e7eb;
}

.rb-loading-page[b-9hs8nakhuk] {
    width: 794px;
    max-width: 100%;
    height: 70%;
    min-height: 360px;
}

.a4-page[b-9hs8nakhuk] {
    width: 794px;            /* true A4 width in CSS px @96dpi; the inline style= drives the live value */
    min-height: 1123px;      /* true A4 height @96dpi */
    height: auto;            /* let the page grow with content so the footer stays inside */
    background: white;
/*    box-shadow: 0 4px 24px rgba(0,0,0,.15);*/
    padding: 9.525mm;        /* match the PDF @page margin exactly so editor == PDF content area */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: visible;       /* allow resize handles + drag overflow to render past edges */
    /* Pin the same web-safe font on-screen as we use in the PDF so glyph metrics match. 'Noto Sans SC'
       (self-hosted, PDF-embedded) is the Simplified-Chinese fallback so any text inheriting the page
       font — not just components with an explicit stack — renders CJK instead of tofu boxes. */
    font-family: Arial, Helvetica, 'Noto Sans SC', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #000000;
    margin-bottom: 36px;
}

/* ── Page canvas ── */
.page-canvas[b-9hs8nakhuk] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: visible;       /* show resize-handle / dragged corners outside the page */
}

/* Guide overlay shown while dragging or resizing — helps line up components with the edges */
.page-canvas.rb-guide-active[b-9hs8nakhuk]::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px dashed #d1d5db;
    pointer-events: none;
    z-index: 9999;
}

.drop-hint[b-9hs8nakhuk] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    color: #9ca3af;
    font-size: 0.875rem;
    min-height: 120px;
    margin: 0;
}

.duplicate-page-hint[b-9hs8nakhuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    color: #9ca3af;
    min-height: 120px;
    padding: 24px;
}

.duplicate-page-btn[b-9hs8nakhuk] {
    background: #000061;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s;
}

.duplicate-page-btn:hover[b-9hs8nakhuk] {
    background: #0000a0;
}

.duplicate-page-text[b-9hs8nakhuk] {
    font-size: 0.78rem;
    color: #9ca3af;
}

/* ── Placed items shared ── */
.placed-item[b-9hs8nakhuk] {
    position: relative;
}

/* Raise the hovered component (and its toolbar) above any overlapping siblings, so when you move
   onto the toolbar of a component sitting behind another, that component comes to the front and
   keeps focus rather than the overlapping one stealing the hover. */
.placed-item:hover[b-9hs8nakhuk] {
    z-index: 100;
}

/* Explicit focus: hovering a component's resize triangle latches it to the front (above the hover
   raise) and keeps its toolbar shown, even where another component overlaps it. Set on the triangle's
   mouseenter and cleared on the component's mouseleave (reportBuilder.js focusPlacedItem). */
.placed-item.rb-active[b-9hs8nakhuk] {
    z-index: 200;
}

.placed-item.rb-active .component-tab[b-9hs8nakhuk] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Tab overlays at the top-left of the component — no space pushed above */
.component-tab[b-9hs8nakhuk] {
    position: absolute;
    top: -26px;
    left: 0;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,97,.85);
    border-radius: 4px;
    padding: 0 8px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, visibility 0.12s;
    z-index: 20;
    white-space: nowrap;
}

.placed-item:hover .component-tab[b-9hs8nakhuk] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.placed-item:hover .component-content[b-9hs8nakhuk] {
    outline: 1.5px solid #000061;
    border-radius: 2px;
}

.tab-label[b-9hs8nakhuk] {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    margin-right: 4px;
}

.tab-btn[b-9hs8nakhuk] {
    background: rgba(255,255,255,.15);
    border: none;
    color: white;
    border-radius: 3px;
    padding: 2px 9px;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.6;
    transition: background 0.1s;
}

    .tab-btn:hover[b-9hs8nakhuk] {
        background: rgba(255,255,255,.28);
    }

    .tab-btn.tab-remove[b-9hs8nakhuk] {
        background: rgba(185,28,28,.7);
    }

        .tab-btn.tab-remove:hover[b-9hs8nakhuk] {
            background: rgba(185,28,28,.9);
        }

/* "Page" selector on the component toolbar — styled to match the tab buttons. */
.tab-page-select[b-9hs8nakhuk] {
    -webkit-appearance: none;
    appearance: none;
    height: 22px;
    padding: 0 6px;
}

    .tab-page-select option[b-9hs8nakhuk] {
        color: #111827;
        background: #ffffff;
    }

/* ── Header placed item ── */
.placed-header[b-9hs8nakhuk] {
    margin-top: 4px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* ── Footer placed item ── */
.placed-footer[b-9hs8nakhuk] {
    margin-top: auto;   /* sticks to the bottom of the flex column */
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* ── Body placed items ── */
.placed-body[b-9hs8nakhuk] {
    box-sizing: border-box;
    cursor: grab;
}

    .placed-body:active[b-9hs8nakhuk] {
        cursor: grabbing;
    }

    .placed-body .component-content[b-9hs8nakhuk] {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

/* ── View mode — hide all edit chrome ── */
.view-mode .component-tab[b-9hs8nakhuk] {
    display: none !important;
}

.view-mode .resize-handle[b-9hs8nakhuk] {
    display: none !important;
}

.view-mode .placed-item:hover .component-content[b-9hs8nakhuk] {
    outline: none;
}

.view-mode .placed-body[b-9hs8nakhuk] {
    cursor: default;
}

/* ── Resize handles ── */
.resize-handle[b-9hs8nakhuk] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, #9ca3af 50%);
    border-radius: 0 0 2px 0;
    z-index: 10;
}

/* Single-axis edge handles: a thin strip down the right edge (width) and along the bottom edge
   (height), stopping short of the corner triangle. Invisible until hovered so they don't clutter. */
.resize-handle-e[b-9hs8nakhuk] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 16px;
    width: 8px;
    cursor: ew-resize;
    z-index: 9;
}

.resize-handle-s[b-9hs8nakhuk] {
    position: absolute;
    left: 0;
    right: 16px;
    bottom: 0;
    height: 8px;
    cursor: ns-resize;
    z-index: 9;
}

.resize-handle-e:hover[b-9hs8nakhuk],
.resize-handle-s:hover[b-9hs8nakhuk] {
    background: rgba(0, 157, 201, 0.35);   /* faint SSY-blue tint on hover */
}

.view-mode .resize-handle-e[b-9hs8nakhuk],
.view-mode .resize-handle-s[b-9hs8nakhuk] {
    display: none !important;
}

/* Keyboard-nudge selection: a component clicked in edit/style mode gets a cyan outline; the arrow keys
   then move it 1px per press (10px with Ctrl). Not shown in view mode. */
.placed-item.rb-selected[b-9hs8nakhuk] {
    outline: 2px solid #009DC9;
    outline-offset: 1px;
}

.view-mode .placed-item.rb-selected[b-9hs8nakhuk] {
    outline: none;
}

/* ── Style mode — per-date style overrides ──
   Not view-mode: the JS drag/resize gate checks for .view-mode, so components stay
   draggable/resizable here. Only the Edit chrome (tab buttons) is hidden. */
.style-mode .component-tab[b-9hs8nakhuk] {
    display: none !important;
}

.style-mode .placed-body[b-9hs8nakhuk] {
    cursor: grab;
}

.style-mode .placed-body.style-selected .component-content[b-9hs8nakhuk] {
    outline: 2px dashed #7c3aed !important;
    border-radius: 2px;
}

.style-mode .placed-body:not(.style-selected):hover .component-content[b-9hs8nakhuk] {
    outline: 1px dashed #7c3aed;
    border-radius: 2px;
}

/* A per-date override hides this component — ghost it (only rendered in Style mode). */
.style-mode .rb-style-hidden[b-9hs8nakhuk] {
    opacity: 0.35;
}

/* In Data mode the header has nothing to enter and just intercepts clicks meant for components
   placed on top of it (e.g. a date text block), so make it non-interactive — clicks pass straight
   through to whatever is overlaid. (Edit/Style modes keep it fully interactive.) */
.data-mode .rb-header-item[b-9hs8nakhuk] {
    pointer-events: none;
}

/* ── Data mode canvas interactions ── */
.data-mode .placed-body[b-9hs8nakhuk] {
    cursor: pointer;
    transition: opacity 0.15s;
}

.data-mode .placed-body.data-dimmed[b-9hs8nakhuk] {
    opacity: 0.6;
}

.data-mode .placed-body.data-selected .component-content[b-9hs8nakhuk] {
    outline: 2px dashed #f97316 !important;
    border-radius: 2px;
}

/* Hover hint in data mode (for unselected items) */
.data-mode .placed-body:not(.data-selected):hover .component-content[b-9hs8nakhuk] {
    outline: 1px dashed #f97316;
    border-radius: 2px;
}

/* Data-mode completeness outlines: red = a datapoint is unfilled for the report date,
   orange on hover, #009DC9 when every datapoint is populated. */
.data-mode .placed-body.dp-missing .component-content[b-9hs8nakhuk] {
    outline: 2px solid #dc2626;
    border-radius: 2px;
}

.data-mode .placed-body.dp-missing:hover .component-content[b-9hs8nakhuk] {
    outline: 2px solid #f97316;
}

.data-mode .placed-body.dp-complete .component-content[b-9hs8nakhuk] {
    outline: 2px solid #009DC9;
    border-radius: 2px;
}

.data-mode .placed-body.dp-complete:hover .component-content[b-9hs8nakhuk] {
    outline: 2px solid #009DC9;
}

/* ── Save config form (inside SsyPopup body) ── */
.save-form[b-9hs8nakhuk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.save-label[b-9hs8nakhuk] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
}

.save-input[b-9hs8nakhuk] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 0.85rem;
    color: #374151;
    width: 100%;
    box-sizing: border-box;
}

    .save-input:focus[b-9hs8nakhuk] {
        outline: none;
        border-color: #000061;
        box-shadow: 0 0 0 2px rgba(0,0,97,.1);
    }

.save-btn-confirm[b-9hs8nakhuk] {
    padding: 7px 20px;
    background: #000061;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

    .save-btn-confirm:disabled[b-9hs8nakhuk] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .save-btn-confirm:not(:disabled):hover[b-9hs8nakhuk] {
        background: #0000a0;
    }

/* ── edit-input (used inside Roles modal) ── */
.edit-input[b-9hs8nakhuk] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
    flex: 1;
}

    .edit-input:focus[b-9hs8nakhuk] {
        outline: none;
        border-color: #000061;
    }

/* ── edit-section-label (used inside Roles modal) ── */
.edit-section-label[b-9hs8nakhuk] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #000061;
    margin: 0 0 2px;
}

/* ── Roles modal ── */
.roles-owner[b-9hs8nakhuk] {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0 0 4px;
}

.roles-empty[b-9hs8nakhuk] {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
    margin: 8px 0 0;
}

.roles-chips[b-9hs8nakhuk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    min-height: 28px;
    align-items: center;
}

.roles-chips-empty[b-9hs8nakhuk] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

.role-chip[b-9hs8nakhuk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 500;
}

.role-chip-edit[b-9hs8nakhuk] {
    background: #dbeafe;
    color: #1e3a5f;
}

.role-chip-data[b-9hs8nakhuk] {
    background: #d1fae5;
    color: #065f46;
}

.role-chip-view[b-9hs8nakhuk] {
    background: #f3f4f6;
    color: #374151;
}

.role-chip-remove[b-9hs8nakhuk] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    color: inherit;
    opacity: 0.6;
}

    .role-chip-remove:hover[b-9hs8nakhuk] {
        opacity: 1;
    }

.roles-add-row[b-9hs8nakhuk] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}

.user-search-dropdown[b-9hs8nakhuk] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 999;
    max-height: 220px;
    overflow-y: auto;
}

.user-search-option[b-9hs8nakhuk] {
    padding: 7px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    .user-search-option:hover[b-9hs8nakhuk] {
        background: #f0f4ff;
    }

.user-search-email[b-9hs8nakhuk] {
    font-size: 0.8rem;
    color: #1e3a5f;
    font-weight: 500;
}

.user-search-name[b-9hs8nakhuk] {
    font-size: 0.72rem;
    color: #6b7280;
}

/* ── "Request a report" message (non-DA-team users with no template selected) ── */
.rb-request-report[b-9hs8nakhuk] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.rb-request-card[b-9hs8nakhuk] {
    max-width: 460px;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    padding: 28px 32px;
}

.rb-request-title[b-9hs8nakhuk] {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: #000061;
}

.rb-request-text[b-9hs8nakhuk] {
    margin: 0;
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.5;
}

    .rb-request-text a[b-9hs8nakhuk] { color: #009DC9; }
/* /Components/Pages/LNG/ApiSetup/GasRatesSetup.razor.rz.scp.css */
.gasextractbox[b-7rauy61hb0] {
    border: 1px solid #009DC9;
    height: 85vh;
    overflow-y: scroll;
}

.gasextractdatepicker[b-7rauy61hb0] {
}

.gasextractroutepicker[b-7rauy61hb0] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 10px;
}

.gasextractroutepicker-ul[b-7rauy61hb0] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.gasextractroutepicker-ul .chkbox[b-7rauy61hb0] {
    margin: 0 3px 0 0;
    vertical-align: middle;
}


.gasextractroutepicker-ul li[b-7rauy61hb0] {
    text-decoration: none;
}

.gasextractroutepicker-ul li:hover[b-7rauy61hb0] {
    background-color: #B5CBD6;
}


.deleterow[b-7rauy61hb0], .editapiclient[b-7rauy61hb0] {
    cursor: pointer;
    padding-right: 3px;
}

.deleterow:hover[b-7rauy61hb0] {
    font-weight: 700;
    color: white;
}

.draggablerow[b-7rauy61hb0] {
    cursor: pointer;
}

.editapiclient[b-7rauy61hb0] {
    color: #163E9F;
}


.editapiclient:hover[b-7rauy61hb0] {
    font-weight: 700;
    color: #91A527;
}
/* /Components/Pages/LNG/Reports/Forward/Comps/LngFwdPdf.razor.rz.scp.css */
lng-fwd-hide-pdf[b-37bd8cm608] {
    border: 1px solid black;
    margin-top: 5%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
/* /Components/Pages/LNG/Reports/Forward/LngForward.razor.rz.scp.css */
.lng-fwd-nav[b-8uh2cegfb6] {
    display: block !important;
}

.lng-fwd-pdf[b-8uh2cegfb6]{
    display: none !important;
}

.lng-fwd-refresh-btn[b-8uh2cegfb6] {
    background-color: #000061;
    transition: background-color 0.4s ease;
}

    .lng-fwd-refresh-btn:hover[b-8uh2cegfb6] {
        background-color: navy;
    }
/* /Components/Pages/LNG/Reports/Sonar/SonarAtlantic.razor.rz.scp.css */
.sonar-rpt-area-banner[b-p01jvdh5w5] {
    background-color: #009DC9;
    width: 100%;
    color: white;
    height: 29px;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 400;
    padding-left: 5px;
    display: flex;
    align-items: center;
}

.sonar-atl-page-cont[b-p01jvdh5w5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    --rpt-atl-top-height: calc(0.50* var(--report-height));
    --rpt-atl-bottom-height: calc(var(--report-height) - var(--rpt-atl-top-height));
    --comp-border: 4px solid white;
    font-size: var(--report-font);
}

.sonar-atl-rpt-cont[b-p01jvdh5w5] {
    background: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.sonar-atl-rpt-content[b-p01jvdh5w5] {
    background: white;
    height: var(--report-height);
    width: var(--report-width);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sonar-atl-top-row[b-p01jvdh5w5] {
    border: var(--comp-border);
    width: var(--report-width);
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
}

.sonar-atl-top-left[b-p01jvdh5w5] {
    width: calc(0.31 * var(--report-width));
}
.sonar-atl-top-mid[b-p01jvdh5w5] {
    width: calc(0.38 * var(--report-width));
    justify-content: center;
    align-items: center;
    position: relative;
}

.sonar-atl-top-right[b-p01jvdh5w5] {
    width: calc(0.31 * var(--report-width));
}


.sonar-atl-bottom-row[b-p01jvdh5w5] {
    border: var(--comp-border);
    height: var(--rpt-atl-bottom-height);
    width: var(--report-width);
}

.sonar-atl-footer[b-p01jvdh5w5] {
    color: #A1A1A1;
    font-size: 0.75em
}
/* /Components/Pages/LNG/Reports/Sonar/SonarEast.razor.rz.scp.css */
.sonar-rpt-area-banner[b-re2ftdbtqt] {
    background-color: #009DC9;
    width: 100%;
    color: white;
    height: 29px;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 400;
    padding-left: 5px;
    display: flex;
    align-items: center;
}

.sonar-east-page-cont[b-re2ftdbtqt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    --rpt-east-top-height: calc(0.58* var(--report-height));
    --rpt-east-bottom-height: calc(var(--report-height) - var(--rpt-east-top-height));
    --comp-border: 4px solid white;
    font-size: var(--report-font);
}

.sonar-east-rpt-cont[b-re2ftdbtqt] {
    background: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.sonar-east-rpt-content[b-re2ftdbtqt] {
    background: white;
    height: var(--report-height);
    width: var(--report-width);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
} 

.sonar-east-top-row[b-re2ftdbtqt] {
    border: var(--comp-border);
    height: var(--rpt-east-top-height);
    width: var(--report-width);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 1.05em;
}

.sonar-east-top-left[b-re2ftdbtqt] {
    width: 53%;
    position: relative;
    overflow: hidden;

}
.sonar-east-image[b-re2ftdbtqt] {
    width: 100%;
    border: unset !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sonar-east-mEast-TFDE[b-re2ftdbtqt] {
    position: absolute;
    transform: translateY(25vh) translateX(16vw);
    font-size: 1.2rem;
    font-weight: 600;
}

.sonar-east-mEast-prompt[b-re2ftdbtqt] {
    position: absolute;
    transform: translateY(18vh) translateX(16.4vw);
    font-size: 1.6rem;
}

.sonar-east-fEast-TFDE[b-re2ftdbtqt] {
    position: absolute;
    transform: translateY(14.8vh) translateX(26vw);
    font-size: 1.2rem;
    font-weight: 600;
}

.sonar-east-fEast-indOcean-prompt[b-re2ftdbtqt] {
    position: absolute;
    transform: translateY(24vh) translateX(10.5vw);
    font-size: 1.6rem;
}
.sonar-east-fEast-philSea-prompt[b-re2ftdbtqt] {
    position: absolute;
    transform: translateY(9.1vh) translateX(23vw);
    font-size: 1.6rem;
}

.sonar-east-top-right[b-re2ftdbtqt] {
    height: 100%;
    width: 47%;
}


.sonar-east-bottom-row[b-re2ftdbtqt] {
    border: var(--comp-border);
    height: var(--rpt-east-bottom-height);
    width: var(--report-width);
}

.sonar-east-footer[b-re2ftdbtqt] {
    color: #A1A1A1;
    font-size: 0.75em
}

.sonar-east-indices-nav[b-re2ftdbtqt] {
    display: block;
}
.sonar-east-indices-pdf[b-re2ftdbtqt] {
    display: none;
}
/* /Components/Pages/LNG/Reports/Sonar/SonarReport.razor.rz.scp.css */
/*@media print {
    @page {
        size: A4 landscape !important;
        margin: 2mm;
    }
}*/

.sonar-report-cont[b-g63xyfl823] {
    --report-height: 68vh;
    --report-width: 67vw;
    --report-font: 1em;
    --report-prompt-font: 1.5em;
    --report-tfde-font: 1.6em;
}

.sonar-top-cont[b-g63xyfl823] {
    display: flex; 
    flex-direction: row;
    justify-content: center;
}


.sonar-refresh-btn[b-g63xyfl823] {
    background-color: #000061;
    border-radius: 10px;
}
.sonar-refresh-btn:hover[b-g63xyfl823] {
    background-color: navy;
}

.sonar-section-btn[b-g63xyfl823] {
    background-color: #E9EFF9;
    color: #000061;
    font-size: 14px;
    text-align: center;
    padding: 0.2% 0.8%;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
}

.sonar-pdf-hide[b-g63xyfl823] {
    display: none !important;
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_010_main.razor.rz.scp.css */
/* ============================================================
   LPG Markets Dashboard — shared shell (header, cards, palette)
   Page-specific styles live in the child components.
   ============================================================ */

/* ============ LPG palette
   Brand colours alias the ssy-colour-* tokens from ssyglobal.css.
   LPG-specific neutrals are defined here because no global token exists.
   Children inherit via CSS variable lookup on .lpgdash-dash-wrap. */
.lpgdash-dash-wrap[b-u8jnfbyrlz] {
    /* Brand (mapped to ssy palette) */
    --lpgdash-brand: var(--ssy-colour-main-simpson-blue);    /* #000061 */
    --lpgdash-accent: var(--ssy-colour-main-crystal-blue);   /* #009DC9 */
    --lpgdash-up: var(--ssy-colour-palette-teal-green);      /* #01A39E */
    --lpgdash-down: var(--ssy-colour-palette-vivid-pink);    /* #EB3871 */
    --lpgdash-warn: var(--ssy-colour-palette-crimson-red);   /* #DB303A */

    /* LPG-only neutrals — no ssy equivalent */
    --lpgdash-page-bg: #F5F7FA;
    --lpgdash-text: #1a1a1a;
    --lpgdash-text-dim: #536A75;
    --lpgdash-text-muted: #798E98;
    --lpgdash-divider: #DCE5EB;
    --lpgdash-card-border: #E1E8ED;
    --lpgdash-card-border-soft: #CEDCE4;
    --lpgdash-row-line: #F2F5F8;
    --lpgdash-row-line-soft: #EEF2F5;
    --lpgdash-row-active-bg: #EAF1F5;   /* selected/active stock row */
    --lpgdash-surface: #FFFFFF;

    /* Shared column-tint scale (Overview + Economics arb tables).
       Lightest → darkest neutral, plus one accent. One source of truth
       for every column-group / per-cell background tint. */
    --lpgdash-tint-1: #F8FAFB;
    --lpgdash-tint-2: #F4F7F9;
    --lpgdash-tint-3: #F1F5F8;
    --lpgdash-tint-4: #EAF1F5;
    --lpgdash-tint-5: #E7EEF2;
    --lpgdash-tint-6: #DAE5EB;
    --lpgdash-tint-accent: #C1E4F0;

    /* SsyKpiStrip theme mapping */
    --ssy-kpi-brand:   var(--lpgdash-brand);
    --ssy-kpi-surface: var(--lpgdash-surface);
    --ssy-kpi-border:  var(--lpgdash-card-border);
    --ssy-kpi-text:    var(--lpgdash-text);
    --ssy-kpi-muted:   var(--lpgdash-text-muted);
    --ssy-kpi-up:      var(--lpgdash-up);
    --ssy-kpi-dn:      var(--lpgdash-down);

    /* Shared dashboard-brick theme mapping (SsyCard / SsyChartCard / SsyDataTable /
       SsyAccordionTable / SsyDeltaNumber / SsyStatusDot / SsyBandBar / SsyFilterChips).
       One source of truth so every shared brick inherits the LPG palette. */
    --ssy-dash-surface:     var(--lpgdash-surface);
    --ssy-dash-border:      var(--lpgdash-card-border);
    --ssy-dash-border-soft: var(--lpgdash-card-border-soft);
    --ssy-dash-text:        var(--lpgdash-text);
    --ssy-dash-text-dim:    var(--lpgdash-text-dim);
    --ssy-dash-text-muted:  var(--lpgdash-text-muted);
    --ssy-dash-brand:       var(--lpgdash-brand);
    --ssy-dash-row-line:    var(--lpgdash-row-line);
    --ssy-dash-row-active:  var(--lpgdash-row-active-bg);
    --ssy-dash-row-active-bg: var(--lpgdash-row-active-bg);
    --ssy-dash-up:          var(--lpgdash-up);
    --ssy-dash-down:        var(--lpgdash-down);
    --ssy-dash-caution:     var(--lpgdash-accent);
    --ssy-dash-warn:        var(--lpgdash-warn);
    --ssy-dash-tint-1:      var(--lpgdash-tint-1);
    --ssy-dash-tint-2:      var(--lpgdash-tint-2);
    --ssy-dash-tint-3:      var(--lpgdash-tint-3);
    --ssy-dash-tint-4:      var(--lpgdash-tint-4);
    --ssy-dash-tint-5:      var(--lpgdash-tint-5);
    --ssy-dash-tint-6:      var(--lpgdash-tint-6);
    --ssy-dash-tint-accent: var(--lpgdash-tint-accent);
    --ssy-card-pad-x:       10px;
    --ssy-card-pad-top:     8px;
    --ssy-card-pad-bottom:  6px;

    /* 14px sides, and 14px + the 4px of bottom breathing room that used to be
       gated on a restated copy of the lock breakpoint with an !important. When
       the tab flows instead of pinning, 4px at the bottom of a scrolling page
       is invisible, so the condition bought nothing and cost a second copy of a
       number the grammar says lives in exactly one place.
       NOTE: Dry Bulk's wrapper runs at 0 side padding. The 28px difference
       between the two dashboards is deliberate here (LPG cards sit inset) -
       it is recorded so the next person does not "fix" one to match the other. */
    padding: 0 14px 18px 14px;
    background: var(--lpgdash-page-bg);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--lpgdash-text);
}

/* Viewport-lock shell: when the active TabDef has Fit=true the wrapper gets
   lpgdash-fit-active (dashboard-specific chrome tweaks below) plus the
   shared ssy-fit-shell class - the lock geometry itself (wrapper height, tab
   height, fail-safe) lives in the <style> block of SsyDashboardShell.razor;
   the tab's root element carries ssy-fit-tab and elects its panes with the
   ssy-fit-* classes. The lock's own condition is never restated here. */

/* ============ Generic card chrome (used by child tabs) ============
   These rules need ::deep because cards are rendered inside child
   components (_100_Overview, _200_PanamaCanal, …), not by this shell.
*/
.lpgdash-dash-wrap[b-u8jnfbyrlz]  .lpgdash-card,
.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-card {
    background: var(--lpgdash-surface);
    border: 1px solid var(--lpgdash-card-border);
    border-radius: 4px;
    padding: 8px 10px 6px 10px;
    min-width: 0;
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .lpgdash-card-head,
.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 4px 0;
    gap: 10px;
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .lpgdash-card-title,
.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-card-title {
    margin: 0;
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    color: var(--lpgdash-brand);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    flex: 1;
    min-width: 0;
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .lpgdash-card-desc,
.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-card-desc {
    font-weight: 500;
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.3px;
    text-transform: none;
    margin-left: 6px;
    font-size: var(--ssy-fs-small);
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-chart-card-slot {
    min-width: 0;
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-chart-expand {
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-lg);
    opacity: 0.85;
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-chart-expand:hover {
    opacity: 1;
    color: var(--lpgdash-accent);
}

/* Local aliases for SsyBandBar so LPG keeps the visible range tracks even
   when the shared component is nested several components deep. */
.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-bandbar {
    width: 100%;
    min-width: 0;
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-bandtrack {
    position: relative;
    height: 12px;
    background: #F1F5F8;
    border: 1px solid var(--lpgdash-card-border);
    border-radius: 2px;
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-bandrange {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #9FB7C4;
    opacity: 0.32;
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-bandmark {
    position: absolute;
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-bandmark-baseline {
    top: -1px;
    bottom: -1px;
    border-left: 1px dashed var(--lpgdash-text-muted);
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-bandmark-primary {
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lpgdash-brand);
    border: 1.5px solid var(--lpgdash-surface);
    box-shadow: 0 0 0 1px var(--lpgdash-brand);
    transform: translate(-50%, -50%);
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-bandmark-primary.ssy-hot {
    background: var(--lpgdash-warn);
    box-shadow: 0 0 0 1px var(--lpgdash-warn);
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .ssy-bandmark-primary.ssy-cool {
    background: var(--lpgdash-up);
    box-shadow: 0 0 0 1px var(--lpgdash-up);
}

/* ============ Placeholders (loading / error / no-data) ============ */
.lpgdash-dash-wrap[b-u8jnfbyrlz]  .lpgdash-placeholder {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-md);
    padding: 20px;
    text-align: center;
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .lpgdash-placeholder-error {
    color: var(--lpgdash-warn);
    font-size: var(--ssy-fs-base);
    padding: 8px 10px;
    font-family: monospace;
    white-space: pre-wrap;
    background: #fdf2f2;
    border-radius: 3px;
    margin: 6px;
    border-left: 3px solid var(--lpgdash-warn);
}

.lpgdash-dash-wrap[b-u8jnfbyrlz]  .lpgdash-placeholder-nodata {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-md);
    padding: 20px;
    text-align: center;
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_020_ReleaseStrip.razor.rz.scp.css */
/* ============================================================
   Release strip — horizontal pill row above every LPG tab.
   Scoped under .lpgdash-dash-wrap so the strip's CSS vars (--lpgdash-*)
   resolve from the shell. No new colour literals.

   Layout: [eyebrow] [wrapping rail, clipped to one row] [All N button].
   The rail is the only flexible column, so the button stays anchored right and
   visible at every width. Clipping a wrapped row (rather than scrolling an
   overflowing single row) drops whole pills instead of slicing one in half.
   ============================================================ */

.lpgdash-relstrip[b-c0nw07mq2s] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 0 0 3px 0;
    margin: 0 0 6px 0;
    border-bottom: 1px solid var(--lpgdash-divider);
    font-family: inherit;
}

.lpgdash-relstrip[b-c0nw07mq2s]  .dash-eyebrow {
    margin-right: 2px;
}

/* One row of pills, clipped. --relstrip-row is the pill box height (border-box,
   so min-height 22px is the whole box). Anything that wraps to a second row is
   clipped away whole; keep this in step with the pill's min-height. */
.lpgdash-relstrip-rail[b-c0nw07mq2s] {
    --relstrip-row: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-height: var(--relstrip-row);
    overflow: hidden;
}

.lpgdash-relstrip-pill[b-c0nw07mq2s] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: var(--lpgdash-surface);
    border: 1px solid var(--lpgdash-card-border-soft);
    border-left: 3px solid var(--lpgdash-accent);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-text);
    line-height: 1.35;
    cursor: default;
    flex: 0 0 auto;
    min-height: 22px;
}

.lpgdash-relstrip-official[b-c0nw07mq2s] {
    border-left-color: var(--lpgdash-accent);
}

.lpgdash-relstrip-estimated[b-c0nw07mq2s] {
    border-left-color: var(--lpgdash-up);
}

.lpgdash-relstrip-lowerconfidence[b-c0nw07mq2s] {
    border-left-color: var(--lpgdash-text-muted);
}

/* Country public-holiday pills — distinct warn-coloured left border so the
   broker can visually separate "market data release" pills from "desk closed"
   pills without losing the chronological sort order. Crimson reads clearly
   against the cyan/teal/grey palette used for release-event confidence. */
.lpgdash-relstrip-holiday[b-c0nw07mq2s] {
    border-left-color: var(--lpgdash-warn);
}

.lpgdash-relstrip-name[b-c0nw07mq2s] {
    font-weight: 600;
    color: var(--lpgdash-brand);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.lpgdash-relstrip-when[b-c0nw07mq2s] {
    color: var(--lpgdash-text-dim);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.lpgdash-relstrip-confidence[b-c0nw07mq2s] {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-micro);
    font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Full-schedule popover ---------- */

.lpgdash-relstrip-more[b-c0nw07mq2s] {
    position: relative;
}

.lpgdash-relstrip-all[b-c0nw07mq2s] {
    background: var(--lpgdash-surface);
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 4px;
    padding: 2px 8px;
    /* Match the pill box height so the button does not set the strip's height. */
    min-height: 22px;
    font: inherit;
    font-size: var(--ssy-fs-micro);
    font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: var(--lpgdash-text-dim);
    cursor: pointer;
    white-space: nowrap;
}

.lpgdash-relstrip-all:hover[b-c0nw07mq2s],
.lpgdash-relstrip-all[aria-expanded="true"][b-c0nw07mq2s] {
    color: var(--lpgdash-brand);
    border-color: var(--lpgdash-accent);
}

/* Transparent click-catcher: closes the popover on any outside click without a
   JS module or document-level listener. */
.lpgdash-relstrip-backdrop[b-c0nw07mq2s] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.lpgdash-relstrip-pop[b-c0nw07mq2s] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: max-content;
    min-width: 240px;
    max-width: min(420px, 92vw);
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--lpgdash-surface);
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
}

.lpgdash-relstrip-poprow[b-c0nw07mq2s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 8px;
    padding: 3px 7px;
    border-left: 3px solid var(--lpgdash-accent);
    border-radius: 3px;
    font-size: var(--ssy-fs-small);
    line-height: 1.35;
    color: var(--lpgdash-text);
}

.lpgdash-relstrip-poprow:hover[b-c0nw07mq2s] {
    background: var(--lpgdash-card-border-soft);
}

/* Narrow viewports: the eyebrow costs more than it explains, and the rail needs
   every pixel it can get for one or two pills. */
@media (max-width: 640px) {
    .lpgdash-relstrip[b-c0nw07mq2s] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .lpgdash-relstrip[b-c0nw07mq2s]  .dash-eyebrow {
        display: none;
    }

    /* 22px keeps the strip tight on a desktop monitor but is under the ~30px
       touch-target floor. Vertical space is less contested here than finger
       accuracy, so the button gets its proper size back. */
    .lpgdash-relstrip-all[b-c0nw07mq2s] {
        min-height: 30px;
        padding-inline: 10px;
    }
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_100_Overview.razor.rz.scp.css */
/* Overview tab. Card, table, chart and grid chrome come from
   DashboardComponents_HA; page layout comes from the shared fit grammar
   (SsyDashboardShell.razor), same as the Dry Bulk overview. This file only carries the
   Baltic tape cells, news rail, module cards and arb table detail.

   Nothing here sets display / height / overflow on an element carrying an
   ssy-fit-* class — the grammar owns that. The old max-height caps on the route
   tape and the forward-arb table are gone with it: the tape now flexes and
   scrolls inside its card, and the arb row renders at natural height. */

.lpgdash-overview[b-4c13qtwo8j] {
    /* rows come from ssy-fit-grid on the root */
    gap: 6px;
}

.lpgdash-ov-body[b-4c13qtwo8j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 6px;
    min-width: 0;
}

/* rows come from ssy-fit-grid on the element */
.lpgdash-ov-main[b-4c13qtwo8j] {
    gap: 6px;
    min-width: 0;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-market {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape-card,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-curve-card {
    min-width: 0;
}

/* Curve card sizing comes entirely from the shared pieces: ssy-fit-band flexes
   the card and its chart slot to the market row, and unlocked the slot renders
   at the Height passed to LpgChartCard. */

/* Baltic tape — transposed: routes across the top, metrics down the page.
   Two labelled blocks (Spot / FFA forward curve) keep the dbo.vSpot index and the
   dbo.vSpotFwd forward strip visually separate. */
/* The route tape is the tallest thing on Overview. It carries ssy-fit-scroll-xy,
   so it flexes into the market row and scrolls in place; the full route list
   stays reachable without the page itself scrolling. */

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-col-metric {
    width: 27%;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-col-route {
    width: 24.3%;
}

/* Comfortable row rhythm so the transposed panel fills the card next to the chart. */
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape td,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape th {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Route column headers double as tabs that drive the chart on the right.
   Qualified with `.lpgdash-ov-tape th` to outrank the base SsyDataTable th rule. */
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape th.lpgdash-ov-route-head {
    padding: 5px 12px 6px 6px;
    border-left: 1px solid var(--lpgdash-row-line);
    border-bottom: 2px solid var(--lpgdash-divider);
    text-align: right;
    line-height: 1.15;
    cursor: pointer;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape th.lpgdash-ov-route-head:hover {
    background: var(--lpgdash-tint-1);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-route-head .lpgdash-ov-route-code {
    display: block;
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-md);
    font-weight: 950;
    letter-spacing: 0.3px;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-route-head .lpgdash-ov-route-name {
    display: block;
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-micro);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape th.lpgdash-ov-route-head.is-selected {
    border-bottom-color: var(--lpgdash-accent);
    background: color-mix(in srgb, var(--lpgdash-accent) 13%, #fff);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-route-head.is-selected .lpgdash-ov-route-code {
    color: var(--lpgdash-accent);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-route-head.muted {
    opacity: 0.55;
}

/* Section divider rows (SPOT / FFA FORWARD CURVE). Qualified + !important to beat
   the base right-aligned td rule. */
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape tr.lpgdash-ov-section td {
    padding: 5px 8px 4px;
    background: var(--lpgdash-row-line);
    border-top: 1px solid var(--lpgdash-divider);
    border-bottom: 1px solid var(--lpgdash-divider);
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-tiny);
    font-weight: 950;
    letter-spacing: 0.8px;
    text-align: left !important;
    text-transform: uppercase;
}

/* Metric label column — left-aligned and grounded with a faint header-column tint.
   `td.lpgdash-ov-metric-label` + !important beats the base `td { text-align:right }`. */
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape td.lpgdash-ov-metric-label {
    text-align: left !important;
    padding-left: 8px;
    background: color-mix(in srgb, var(--lpgdash-row-line) 55%, transparent);
    color: var(--lpgdash-text);
    font-weight: 750;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape td.lpgdash-ov-metric-label.is-delta {
    padding-left: 18px;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 600;
}

/* Value cells: right-aligned tabular figures with a thin separator per route column. */
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-tape td.num {
    text-align: right;
    padding-right: 12px;
    border-left: 1px solid var(--lpgdash-row-line);
    font-variant-numeric: tabular-nums;
}

/* Headline rows (Spot $/mt, TCE $/day) read larger than the deltas / forward strip. */
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-headline td {
    padding-top: 4px;
    padding-bottom: 4px;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-headline td.num {
    font-size: var(--ssy-fs-md);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-delta-row td.num {
    font-size: var(--ssy-fs-tiny);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-val {
    color: var(--lpgdash-brand);
    font-weight: 850;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-forward-val {
    color: var(--lpgdash-brand);
    font-weight: 750;
}

/* Selected route column: tint the whole column so it's clear which one the chart shows. */
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-col-selected {
    background: color-mix(in srgb, var(--lpgdash-accent) 9%, transparent);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-na {
    color: var(--lpgdash-text-muted);
    font-weight: 600;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-move-up {
    color: var(--lpgdash-up) !important;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-move-down {
    color: var(--lpgdash-down) !important;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-move-flat {
    color: var(--lpgdash-text-muted) !important;
}

/* News rail */
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-news-link {
    display: block;
    padding: 8px 0 8px 10px;
    border-left: 3px solid var(--lpgdash-card-border-soft);
    border-bottom: 1px solid var(--lpgdash-row-line);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-news-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-base);
    font-weight: 750;
    line-height: 1.24;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-news-meta {
    display: block;
    margin-top: 4px;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 850;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-news-note {
    margin: 8px 0 0 0;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 650;
    line-height: 1.25;
}

/* Dry-style module cards. Not rendered right now — _100_Overview does not place
   _155_Overview_ModulePills while its indices are placeholders. Kept so the row
   comes back styled. */
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-intel {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-intel-card {
    display: grid;
    grid-template-rows: auto auto 44px;
    gap: 3px;
    min-width: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.lpgdash-overview[b-4c13qtwo8j]  button.lpgdash-ov-intel-card {
    appearance: none;
    border: 1px solid var(--lpgdash-card-border);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-intel-card:hover {
    border-color: var(--lpgdash-accent);
    background: var(--lpgdash-tint-1);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-intel-primary {
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-small);
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-intel-secondary {
    margin: 0;
    color: var(--lpgdash-text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--ssy-fs-tiny);
    font-weight: 650;
    line-height: 1.15;
    overflow: hidden;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-mini {
    align-self: stretch;
    overflow: hidden;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-index-mini {
    display: grid;
    align-content: end;
    gap: 5px;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-index-track {
    position: relative;
    display: block;
    height: 12px;
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--lpgdash-down) 22%, #fff) 0%,
        var(--lpgdash-row-active-bg) 48%,
        color-mix(in srgb, var(--lpgdash-up) 24%, #fff) 100%);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-index-track i {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--lpgdash-text-muted);
    box-shadow: 0 0 0 1px var(--lpgdash-card-border-soft);
    transform: translate(-50%, -50%);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-index-up .lpgdash-ov-index-track i {
    background: var(--lpgdash-up);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-index-down .lpgdash-ov-index-track i {
    background: var(--lpgdash-down);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-index-scale {
    display: flex;
    justify-content: space-between;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-micro);
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
}

/* Arbitrage row */
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 2px;
    align-items: stretch;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table-section {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The forward-arb table sits in the `auto` fit row and renders its full strip;
   the route tape above it is the pane that gives up space. */

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-chart-section {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px;
    min-width: 0;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-table-card {
    padding: 10px 12px 8px 12px;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-card-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-input-pair {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-input-pair input {
    width: 60px;
    padding: 3px 6px;
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 3px;
    text-align: right;
    font-size: var(--ssy-fs-md);
    background: var(--lpgdash-surface);
    outline: none;
    color: var(--lpgdash-brand);
    font-weight: 700;
    font-family: inherit;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-input-pair input:focus {
    border-color: var(--lpgdash-accent);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-input-pair .lpgdash-unit {
    color: var(--lpgdash-text-muted);
    font-weight: 500;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ssy-fs-base);
    font-family: "Segoe UI", system-ui, sans-serif;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table thead tr.lpgdash-grp th {
    padding: 4px 5px;
    font-weight: 700;
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-brand);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: 1px solid var(--lpgdash-row-line-soft);
    white-space: nowrap;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table thead tr.lpgdash-sub th {
    padding: 3px 5px 5px 5px;
    font-weight: 500;
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-bottom: 1px solid var(--lpgdash-divider);
    white-space: nowrap;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table th.lpgdash-period-col,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table td.lpgdash-period-col {
    text-align: left;
    padding-left: 6px;
    color: var(--lpgdash-text);
    font-weight: 600;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table td {
    padding: 3px 6px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--lpgdash-row-line);
    color: var(--lpgdash-text);
    line-height: 1.3;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table tbody tr:last-child td {
    border-bottom: 0;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table .lpgdash-th-sub {
    display: block;
    font-size: var(--ssy-fs-tiny);
    font-weight: 500;
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.5px;
    margin-top: 1px;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-grp-export,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-grp-tfee {
    background: var(--lpgdash-tint-2);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-grp-import,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-grp-freight {
    background: var(--lpgdash-tint-4);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-grp-spread {
    background: var(--lpgdash-tint-6);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-mb,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-cp,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-fmt,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-pan {
    background: var(--lpgdash-tint-1);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-fei,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-nwe,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-blpg {
    background: var(--lpgdash-tint-3);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-sprfei,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-sprnwe {
    background: var(--lpgdash-tint-5);
    color: var(--lpgdash-brand);
    font-weight: 700;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-fmt,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-col-pan {
    color: var(--lpgdash-warn);
    font-weight: 500;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table th.lpgdash-col-arbfei-h,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table th.lpgdash-col-arbnwe-h {
    color: var(--lpgdash-brand);
    font-weight: 700;
    text-align: center;
    letter-spacing: 1.2px;
    width: 110px;
    min-width: 110px;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table th.lpgdash-col-arbfei-h {
    background: var(--lpgdash-tint-6);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table th.lpgdash-col-arbnwe-h {
    background: var(--lpgdash-tint-accent);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table td.lpgdash-col-arbfei,
.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table td.lpgdash-col-arbnwe {
    color: var(--lpgdash-surface);
    font-weight: 700;
    font-size: var(--ssy-fs-md);
    padding-right: 14px;
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table td.lpgdash-col-arbfei {
    background: var(--lpgdash-brand);
}

.lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-table td.lpgdash-col-arbnwe {
    background: var(--lpgdash-accent);
}

@media (max-width: 1200px) {
    .lpgdash-ov-body[b-4c13qtwo8j] {
        grid-template-columns: 1fr;
    }

    .lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-market,
    .lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-layout {
        grid-template-columns: 1fr !important;
    }

    .lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-news {
        display: none;
    }

    .lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-intel {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .lpgdash-overview[b-4c13qtwo8j]  .lpgdash-arb-chart-section,
    .lpgdash-overview[b-4c13qtwo8j]  .lpgdash-ov-intel {
        grid-template-columns: 1fr !important;
    }
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_200_PanamaCanal.razor.rz.scp.css */
/* Panama Canal tab — page-specific grid only. Card chrome, placeholders and
   the brand palette come from the shared LpgChartCard / shell. Scoped to the
   feature wrapper per the LPG CSS rules. */

/* Single 2x2 board holding all four charts. The !important pins two columns
   regardless of SsyGrid's auto-fit formula, which is why no MinCol/MaxCols are
   passed — they would be inert. That also means the collapse to one column has
   to be an explicit media query rather than intrinsic wrapping. No
   margin-bottom: this grid is the last thing on the page. */
.lpgpanama-tab .lpgpanama-grid-2[b-1mnytx9sga] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
}

@media (max-width: 1100px) {
    .lpgpanama-tab .lpgpanama-grid-2[b-1mnytx9sga] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_300_UsInventory.razor.rz.scp.css */
/* ============================================================
   _300_UsInventory - scoped layout for the Inventory tab.

   The child components own their data transforms; this file owns the dense
   broker-dashboard layout: selector table, compact numeric tables, shared
   grids, and the small context strips under charts.
   ============================================================ */

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-page {
    display: flex;
    flex-direction: column;
    /* 5px, not 7px. The Snapshot view stacks eight children (sub-tab rail, KPI
       strip, and three eyebrow+section pairs), so each 2px of gap costs 14px
       overall — which was exactly the margin by which this view missed an 889px
       viewport. Still inside the audit's 6px-at-1366 density target. */
    gap: 5px;
    padding: 0;
}

/* NOTE: no gap/align-items overrides on the SsyGrid rows in this tab.
   SsyGrid's auto-fit track formula computes its minimum track width from its own
   5px gap. Overriding the gap to 7px made 4 design columns no longer fit the
   available width, so the 4-chart STEO row silently became 3 + 1 and cost a
   whole extra chart row. align-items: stretch was already SsyGrid's default.
   Change the gap in SsyGrid itself if it ever needs to change. */

/* 3px, not 7px. Each sub-view stacks up to three of these, and the trailing
   margin on the last one is pure waste at the bottom of the view — together that
   was the ~11px by which Snapshot missed an 889px viewport. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-section {
    margin-bottom: 3px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-section:last-child {
    margin-bottom: 0;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-card,
.lpgdash-usinv-scope[b-1g9i8uool6]  .ssy-card {
    padding: 4px 9px 3px 9px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-card-head,
.lpgdash-usinv-scope[b-1g9i8uool6]  .ssy-card-head {
    margin-bottom: 3px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-forecast-table-card {
    margin-top: 7px;
}

/* Sign-coloured delta text. Specificity bumped so it wins over the
   generic `tbody td` colour rule further down — without this, deltas
   inside .lpgdash-usinv-flowtable / -densetable / -stocktable read as
   plain --lpgdash-text. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocktable-card {
    display: flex;
    flex-direction: column;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocktable,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-densetable,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-flowtable {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ssy-fs-small);
    font-variant-numeric: tabular-nums;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocktable thead th,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-densetable thead th,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-flowtable thead th {
    font-size: var(--ssy-fs-micro);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    color: var(--lpgdash-text-muted);
    text-align: right;
    padding: 2px 6px;
    border-bottom: 1px solid var(--lpgdash-divider);
    white-space: nowrap;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocktable thead th:first-child,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-densetable thead th:first-child,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-flowtable thead th:first-child {
    text-align: left;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocktable tbody td,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-densetable tbody td,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-flowtable tbody td {
    padding: 2px 6px;
    text-align: right;
    color: var(--lpgdash-text);
    border-bottom: 1px solid var(--lpgdash-row-line);
    line-height: 1.25;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocktable tbody td:first-child,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-densetable tbody td:first-child,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-flowtable tbody td:first-child {
    text-align: left;
    color: var(--lpgdash-text-dim);
    font-weight: 700;
}

/* Tiny unit chip in column headers — replaces the prose "all flow values kbpd
   - stocks change in MBBL" line that used to sit in the section description. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-unit {
    display: inline-block;
    margin-left: 3px;
    font-size: var(--ssy-fs-micro);
    font-weight: 600;
    letter-spacing: 0.35px;
    color: var(--lpgdash-text-dim);
    text-transform: lowercase;
}

/* Faint vertical divider before the Stock chg column so the kbpd → MBBL
   unit switch reads without a sentence. Applies to header + body cells. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-balancetable th.lpgdash-usinv-unitswitch,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-balancetable td.lpgdash-usinv-unitswitch {
    border-left: 1px solid var(--lpgdash-divider);
    padding-left: 10px;
}

/* STEO forecast table — column-wise heatmap shading.
   Each .lpgdash-usinv-heat cell carries a --heat custom property in [0,1]
   set inline from C# (HeatStyle in _340_Forecasts.razor). color-mix() then
   tints the background. Two palettes:
     -flow  : sequential teal (production, consumption, net exports, inventory)
     -price : sequential blue/accent (MB spot) so the price column is visually
              distinct from the flow columns.
   Cap intensity at 22% so cell text stays comfortably readable.
   Requires color-mix() support — fine on modern Edge/Chrome/Firefox/Safari. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-heat {
    transition: background 120ms linear;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-heat-flow {
    background: color-mix(in srgb, var(--lpgdash-up) calc(var(--heat, 0) * 22%), transparent);
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-heat-price {
    background: color-mix(in srgb, var(--lpgdash-accent) calc(var(--heat, 0) * 22%), transparent);
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stockrow {
    cursor: pointer;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stockrow:hover td {
    background: var(--lpgdash-row-line-soft);
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stockrow.lpgdash-is-active td {
    background: var(--lpgdash-row-active-bg);
    color: var(--lpgdash-brand);
    font-weight: 800;
}

/* ============================================================
   Section 01 (Stocks Snapshot) — hero chart with big-number overlay,
   PADD table with coloured legend dots, 5y-range strip beneath.
   See _320_StocksSeasonality.razor file header for the design intent.
   ============================================================ */

/* Hero chart card needs a relative container so the overlay can absolute-
   position itself top-left over the chart area without colliding with the
   header strip. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocks-chartcard {
    display: flex;
    flex-direction: column;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocks-chartarea {
    position: relative;
    flex: 1;
    height: 220px;
    min-height: 220px;
}

/* Big-number overlay anchored top-left of the chart area. The chart is
   already sparse in its top-left corner (the seasonal fan curves up from
   below) so this overlay doesn't occlude data points. z-index keeps it
   above the chart svg without blocking tooltip pointer events because
   pointer-events:none. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocks-overlay {
    position: absolute;
    top: 4px;
    left: 50px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocks-bignum {
    font-size: var(--ssy-fs-display-xl);
    font-weight: 800;
    color: var(--lpgdash-brand);
    letter-spacing: -0.5px;
    line-height: 0.75;
    font-variant-numeric: tabular-nums;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocks-bignum-unit {
    font-size: var(--ssy-fs-small);
    font-weight: 600;
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-left: 4px;
    vertical-align: 1px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocks-deltas {
    display: flex;
    gap: 12px;
    font-size: var(--ssy-fs-base);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocks-delta {
    display: inline-flex;
    gap: 4px;
    align-items: baseline;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocks-delta-label {
    font-size: var(--ssy-fs-micro);
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.55px;
    font-weight: 800;
}

/* Right card header hint — small "click row to focus chart" prompt that
   sits beside the card title, mirrors the reference screenshot. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-clickhint {
    font-size: var(--ssy-fs-micro);
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.55px;
    font-weight: 700;
    white-space: nowrap;
}

/* Small coloured legend dot in the PADD column. Diameter matches the chart's
   marker dots, so the brain reads them as the same series. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-paddot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* PADD table rows are slightly taller than the default densetable to host
   the legend dot comfortably. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-paddtable tbody td {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* ============ Range strip beneath the PADD table ============
   One horizontal band per region. The band's grey background is the visual
   5y same-week range; the coloured dot is "this week" placed at the
   FiveYearRangePct (0..100) position. Tooltip on the dot reveals the actual
   low–high MBBL values. */
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-rangestrip {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--lpgdash-divider);
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-rangerow {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: center;
    gap: 8px;
    font-size: var(--ssy-fs-small);
    font-variant-numeric: tabular-nums;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-rangerow-label {
    color: var(--lpgdash-text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-pricetable .ssy-bandbar {
    display: inline-block;
    width: min(520px, 100%);
    vertical-align: middle;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-rangerow-val {
    text-align: right;
    color: var(--lpgdash-text);
    font-weight: 700;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-rangestrip-cap {
    margin-top: 4px;
    font-size: var(--ssy-fs-micro);
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.45px;
    font-weight: 600;
    text-align: center;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-is-empty {
    opacity: 0.55;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocknote {
    margin-top: auto;
    padding-top: 7px;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    line-height: 1.35;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-price-name {
    display: block;
    color: var(--lpgdash-brand);
    font-weight: 800;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-price-source {
    display: block;
    margin-top: 1px;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lpgdash-divider);
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-head-label {
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    color: var(--lpgdash-brand);
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-head-month {
    font-size: var(--ssy-fs-display-lg);
    font-weight: 800;
    color: var(--lpgdash-accent);
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-total-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2px 0 6px 0;
    border-bottom: 1px solid var(--lpgdash-divider);
    margin-bottom: 4px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-total-value {
    font-size: var(--ssy-fs-display-xl);
    font-weight: 800;
    color: var(--lpgdash-brand);
    letter-spacing: -0.5px;
    line-height: 1;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-total-label {
    font-size: var(--ssy-fs-tiny);
    font-weight: 700;
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 4px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-total-delta {
    text-align: right;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-total-delta-label {
    font-size: var(--ssy-fs-tiny);
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    margin-bottom: 2px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-total-delta-value {
    font-size: var(--ssy-fs-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-mix-label {
    font-size: var(--ssy-fs-tiny);
    font-weight: 700;
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 0px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-stack {
    display: flex;
    gap: 0;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-stack-segment {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    padding: 0 5px;
    color: #fff;
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0px 1px 4px rgb(0, 0, 0);
    white-space: nowrap;
    overflow: hidden;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-stack-segment-tight {
    justify-content: center;
    padding: 0 2px;
    font-size: var(--ssy-fs-tiny);
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-card {
    border: 1px solid var(--lpgdash-divider);
    border-radius: 4px;
    padding: 6px;
    background: var(--lpgdash-row-line-soft);
    font-size: var(--ssy-fs-small);
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-card-header {
    font-weight: 700;
    color: var(--lpgdash-text-dim);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-card-value {
    font-size: var(--ssy-fs-display-lg);
    font-weight: 700;
    color: var(--lpgdash-brand);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
    line-height: 1.2;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-card-mix {
    color: var(--lpgdash-text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-card-delta {
    font-size: var(--ssy-fs-tiny);
    display: grid;
    gap: 2px;
    justify-items: start;
    line-height: 1;
    margin-bottom: 8px;
    font-weight: 600;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-card-delta .ssy-delta-inline,
.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-total-delta-value .ssy-delta-inline {
    min-width: 0;
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-share-delta {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--lpgdash-text-muted);
}

.lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-card-spark {
    height: 50px;
    margin: 8px -4px -4px -4px;
}

@media (max-width: 1100px) {
    /* Deliberate narrow-viewport degrade - ratio'd design columns cannot wrap intrinsically (SsyGrid MinCol is for uniform grids). */
    .lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-stocks-grid,
    .lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-flows,
    .lpgdash-usinv-scope[b-1g9i8uool6]  .lpgdash-usinv-ngl-grid {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_400_Economics.razor.rz.scp.css */
/* ============================================================
   _400_Economics.razor.css — scoped styles for the Economics tab.

   Every rule is namespaced under `.lpgdash-economics` (the wrapper rendered
   by _400). All deep rules reach into the child sub-components (_410–_440).

   Brand colours come from the --lpgdash-* CSS variables defined on
   .lpgdash-dash-wrap in _010_main.razor.css. Do NOT add hex literals here
   unless they're chart-axis colours (those have to be literal because
   Highcharts JS reads strings).

   Layout:
     .lpgdash-economics
       .lpgeco-switch              (top destination toggle bar)
       .lpgeco-page-grid           (2-col: inputs | result)
         .lpgeco-inputs-card       (LHS detailed inputs from _410, always shown)
         .lpgeco-result            (RHS: sub-tab rail + one result surface)
           .lpgeco-breakdown-card  (TCE waterfall from _420)
           .lpgeco-arb-card        (forward arb table from _430)
           .lpgeco-charts-strip    (2-up chart grid from _440)
   ============================================================ */

/* ============ Destination switch ============ */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px 0;
    padding: 6px 10px;
    background: var(--lpgdash-surface);
    border: 1px solid var(--lpgdash-card-border);
    border-radius: 4px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-switch-label {
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    color: var(--lpgdash-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 4px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-switch-btn {
    background: transparent;
    border: 1px solid var(--lpgdash-card-border-soft);
    color: var(--lpgdash-text-dim);
    font-family: inherit;
    font-size: var(--ssy-fs-md);
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.4px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-switch-btn.lpgeco-switch-active {
    background: var(--lpgdash-brand);
    color: #FFFFFF;
    border-color: var(--lpgdash-brand);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-switch-meta {
    margin-left: auto;
    font-size: var(--ssy-fs-base);
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.3px;
}

/* ============ Page grid (inputs | result) ============
   Inputs are dense vertical lists, so 300px is enough; the result surface takes
   everything else. Was a 3-column grid (inputs | breakdown | charts) until the
   chart column's vertical stack made the page 1468px tall — see the _440
   section for that story. */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-page-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 10px;
    /* No margin-bottom: the grid is now the last thing on the page (the arb table
       moved inside it), and that trailing 10px was the difference between
       fitting an 889px viewport and overflowing it by 10px. */
    /* Do not stretch: the row should be as tall as its tallest real content,
       not as tall as the tallest column forced to match a sibling. */
    align-items: start;
}

/* Result column: sub-tab rail above whichever result surface is selected. */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Narrow viewports: inputs stop being a fixed sidebar and the charts go 1-up.
   (The chart strip's own layout lives in the "_440" section below.) */
@media (max-width: 1100px) {
    .lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-page-grid {
        grid-template-columns: 1fr !important;
    }
    .lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-charts-strip {
        grid-template-columns: 1fr;
    }
}

/* ============ Vessel metadata strip (top of inputs card) ============
   Compact 3-line stack of free-text inputs. No math impact — pure broker
   record-keeping so a screenshot of this page can stand in for a fixture
   broker note. Lives above the .lpgeco-inputs-head divider. */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-vessel-strip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-vessel-input {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 3px;
    font-family: inherit;
    font-size: var(--ssy-fs-base);
    color: var(--lpgdash-brand);
    background: var(--lpgdash-page-bg);
    outline: none;
    font-weight: 500;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-vessel-input::placeholder {
    color: var(--lpgdash-text-muted);
    font-weight: 400;
    letter-spacing: 0.3px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-vessel-input:focus {
    border-color: var(--lpgdash-accent);
    background: var(--lpgdash-surface);
}

/* ============ Inputs card (_410) ============ */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-inputs-card {
    background: var(--lpgdash-surface);
    border: 1px solid var(--lpgdash-card-border);
    border-radius: 4px;
    padding: 8px 12px 10px 12px;
    min-width: 0;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-inputs-head {
    margin: 0 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--lpgdash-divider);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-inputs-head h3 {
    margin: 0;
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    color: var(--lpgdash-brand);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-inputs-sub {
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.3px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-section {
    margin-top: 10px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-section h4,
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-section-head h4 {
    margin: 0 0 4px 0;
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    color: var(--lpgdash-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

/* Section-header chevron button. Renders inside the h4 so the whole label
   line is clickable; the rendered ▾/▸ glyph signals open/closed state. */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-section-toggle {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 2px 0;
    width: 100%;
    text-align: left;
    letter-spacing: inherit;
    text-transform: inherit;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-section-toggle:hover {
    color: var(--lpgdash-brand);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-sub {
    color: var(--lpgdash-text-muted);
    font-weight: 500;
    text-transform: none;
    margin-left: 4px;
    font-size: var(--ssy-fs-tiny);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 22px;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: var(--ssy-fs-base);
    color: var(--lpgdash-text);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-row label {
    color: var(--lpgdash-text-dim);
    font-weight: 500;
    letter-spacing: 0.2px;
    min-width: 0;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-row input {
    padding: 2px 6px;
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 3px;
    text-align: right;
    font-size: var(--ssy-fs-md);
    background: var(--lpgdash-surface);
    outline: none;
    color: var(--lpgdash-brand);
    font-weight: 700;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-row input:focus {
    border-color: var(--lpgdash-accent);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-label-unit {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 500;
    letter-spacing: 0.2px;
    margin-left: 3px;
    text-transform: none;
    white-space: nowrap;
}

/* Overridden rows get a subtle goldenrod accent so the broker can see at a
   glance which fields are no longer at their feed / Baltic-basis default.
   Both .lpgeco-input-row (single-input rows) and .lpgeco-port-row (cost+days
   pair) use the same .lpgeco-overridden tell. For port rows only the cost
   <input> reflects the override — the days field isn't part of the Baltic
   basis-vessel reset, so it stays at the normal palette. */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-row.lpgeco-overridden input,
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-port-row.lpgeco-overridden input:first-of-type {
    background: #FFF8E1;
    color: var(--lpgdash-warn);
}

/* Read-only output rows (the "solved-for" side of the freight/TCE toggle).
   Greyed background + muted weight signals "this is the calc's answer". */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-row.lpgeco-readonly input {
    background: var(--lpgdash-page-bg);
    color: var(--lpgdash-text-dim);
    font-weight: 600;
    cursor: not-allowed;
    border-style: dashed;
}

/* Solve-for row uses the full input width for the toggle button group. */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-row.lpgeco-solve-row {
    grid-template-columns: 1fr auto;
}

/* Smaller variant of the segmented control — used by the solve-for toggle
   inline in the cargo section + the Full/Eco speed-preset chips, so they
   don't dominate the panel and line up with the tightened input rows. */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-segmented-sm .lpgeco-seg-btn {
    padding: 1px 10px;
    font-size: var(--ssy-fs-small);
    line-height: 1.4;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-foot {
    margin: 6px 0 0 0;
    font-size: var(--ssy-fs-tiny);
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.2px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-mini-icon {
    background: transparent;
    border: 0;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-md);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    line-height: 1;
    width: 20px;
    height: 20px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-mini-icon:hover {
    color: var(--lpgdash-accent);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-reset-spacer {
    width: 20px;
    height: 20px;
}

/* Segmented route picker */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-segmented {
    display: flex;
    gap: 4px;
    margin-bottom: 2px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-seg-btn {
    background: transparent;
    border: 1px solid var(--lpgdash-card-border-soft);
    color: var(--lpgdash-text-dim);
    font-family: inherit;
    font-size: var(--ssy-fs-base);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    flex: 1;
    letter-spacing: 0.3px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-seg-btn.lpgeco-seg-active {
    background: var(--lpgdash-accent);
    color: #FFFFFF;
    border-color: var(--lpgdash-accent);
}

/* ============ Breakdown card (_420) ============ */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-breakdown-card {
    padding: 10px 14px 12px 14px;
    min-width: 0;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-breakdown-card .ssy-card-head {
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--lpgdash-divider);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-breakdown-card .ssy-card-title {
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    color: var(--lpgdash-brand);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-breakdown-card .ssy-card-desc {
    margin-left: auto;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
}

/* Headline numbers */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline {
    background: var(--lpgdash-page-bg);
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 3px;
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-main {
    flex: 0 0 auto;
    padding-right: 14px;
    border-right: 1px solid var(--lpgdash-card-border-soft);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-secondary {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-label {
    display: block;
    font-size: var(--ssy-fs-tiny);
    font-weight: 600;
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-value {
    display: block;
    font-size: var(--ssy-fs-display-xl);
    font-weight: 800;
    color: var(--lpgdash-brand);
    letter-spacing: -0.4px;
    line-height: 1.1;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-value .ssy-metric {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-value-sm {
    display: block;
    font-size: var(--ssy-fs-lg);
    font-weight: 700;
    color: var(--lpgdash-brand);
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-unit {
    font-size: var(--ssy-fs-base);
    font-weight: 500;
    color: var(--lpgdash-text-muted);
    margin-left: 2px;
    letter-spacing: 0;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-value.lpgeco-up,
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-value-sm.lpgeco-up { color: var(--lpgdash-up); }

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-value.lpgeco-down,
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-headline-value-sm.lpgeco-down { color: var(--lpgdash-down); }

/* Waterfall sections */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-breakdown-section {
    margin-top: 10px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-breakdown-section h4 {
    margin: 0 0 4px 0;
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    color: var(--lpgdash-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-breakdown-row {
    display: grid;
    grid-template-columns: 160px 1fr 120px;
    gap: 8px;
    align-items: baseline;
    padding: 3px 0;
    font-size: var(--ssy-fs-base);
    color: var(--lpgdash-text);
    border-bottom: 1px solid var(--lpgdash-row-line-soft);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-breakdown-row:last-child { border-bottom: 0; }

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-bd-detail {
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.2px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-bd-val {
    text-align: right;
    font-weight: 700;
    color: var(--lpgdash-text);
    font-variant-numeric: tabular-nums;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-bd-subtotal {
    border-top: 1px solid var(--lpgdash-divider);
    margin-top: 4px;
    padding-top: 5px;
    font-weight: 700;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-bd-subtotal .lpgeco-bd-val {
    color: var(--lpgdash-brand);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-bd-net {
    background: var(--lpgdash-page-bg);
    padding: 6px 8px;
    border-radius: 3px;
    border-bottom: 0;
    margin-top: 4px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-bd-net.lpgeco-up .lpgeco-bd-val { color: var(--lpgdash-up); }
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-bd-net.lpgeco-down .lpgeco-bd-val { color: var(--lpgdash-down); }

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-bd-placeholder {
    color: var(--lpgdash-text-muted);
    font-style: italic;
    grid-template-columns: 1fr;
}

/* ============ Chart strip (_440) ============
   2-up, not a single column. As the third column of the old 3-col grid this was
   a vertical stack of five 220px cards = 1100px, which set the height of the
   whole page row. The charts sub-view now owns the full result width, so two
   columns give three short rows instead. */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-charts-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-charts-strip .ssy-card { padding: 8px 10px 6px 10px; }

/* ============ Arb table (_430) ============ */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-card { padding: 10px 14px 10px 14px; }

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ssy-fs-base);
    font-family: "Segoe UI", system-ui, sans-serif;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table thead tr.lpgeco-grp th {
    padding: 4px 5px;
    font-weight: 700;
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-brand);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: 1px solid var(--lpgdash-row-line-soft);
    white-space: nowrap;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table thead tr.lpgeco-sub th {
    padding: 3px 5px 5px 5px;
    font-weight: 500;
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-bottom: 1px solid var(--lpgdash-divider);
    white-space: nowrap;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table th.lpgeco-period-col,
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table td.lpgeco-period-col {
    text-align: left;
    padding-left: 6px;
    color: var(--lpgdash-text);
    font-weight: 600;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table td {
    padding: 4px 6px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--lpgdash-row-line);
    color: var(--lpgdash-text);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table tbody tr:last-child td { border-bottom: 0; }

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table .lpgeco-th-sub {
    display: block;
    font-size: var(--ssy-fs-tiny);
    font-weight: 500;
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.5px;
    margin-top: 1px;
}

/* Column group tints (subtle so the arb cell pops) */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-grp-cargo   { background: var(--ssy-dash-tint-2); }
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-grp-cp      { background: var(--ssy-dash-tint-1); }
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-grp-spread  { background: var(--ssy-dash-tint-4); color: var(--lpgdash-brand); font-weight: 700; }
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-grp-freight { background: var(--ssy-dash-tint-4); }
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-grp-tfee    { background: var(--ssy-dash-tint-2); }
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-grp-overage { background: var(--ssy-dash-tint-1); color: var(--lpgdash-warn); font-weight: 600; }
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table td.lpgeco-overage-cell { background: var(--ssy-dash-tint-1); color: var(--lpgdash-warn); font-weight: 600; }

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table .lpgeco-spread-cell { background: var(--ssy-dash-tint-5); color: var(--lpgdash-brand); font-weight: 700; }
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table .lpgeco-voyage-cell { background: var(--ssy-dash-tint-6); color: var(--lpgdash-brand); font-weight: 700; }
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table .lpgeco-tfee        { background: var(--ssy-dash-tint-1); color: var(--lpgdash-warn); font-weight: 500; }

/* The single arb column — high-contrast like in _130 */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table th.lpgeco-arb-col-h {
    background: var(--ssy-dash-tint-6);
    color: var(--lpgdash-brand);
    font-weight: 700;
    text-align: center;
    letter-spacing: 1.2px;
    width: 110px;
    min-width: 110px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table td.lpgeco-arb-cell {
    background: var(--ssy-dash-tint-6);
    color: var(--lpgdash-brand);
    font-weight: 700;
    font-size: var(--ssy-fs-md);
    padding-right: 14px;
}

/* TCE column (v1.5): per-row implied $/day with same styling treatment as arb.
   Width matches the arb column for visual symmetry. */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table th.lpgeco-tce-col-h {
    background: var(--ssy-dash-tint-accent);
    color: var(--lpgdash-brand);
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    width: 100px;
    min-width: 100px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table td.lpgeco-tce-cell {
    background: var(--ssy-dash-tint-accent);
    color: var(--lpgdash-brand);
    font-weight: 700;
    font-size: var(--ssy-fs-md);
    padding-right: 14px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table td.lpgeco-arb-cell .ssy-delta-inline,
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table td.lpgeco-tce-cell .ssy-delta-inline {
    width: 100%;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table td.lpgeco-arb-cell .ssy-delta-inline span,
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table td.lpgeco-tce-cell .ssy-delta-inline strong,
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-table td.lpgeco-tce-cell .ssy-delta-inline span {
    font-size: var(--ssy-fs-md);
    font-weight: 800;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-empty {
    text-align: center;
    color: var(--lpgdash-text-muted);
    font-style: italic;
    padding: 14px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-arb-foot {
    margin: 6px 0 0 0;
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.2px;
}

/* ============================================================
   v2.0 Primary/Advanced inputs layout
   ============================================================
   .lpgeco-inputs-head reuses the existing flex (justify: space-between)
   so the Reset-to-Baltic button sits on the right. The h3 + caption
   wrap inside .lpgeco-inputs-head-text so they don't get split by the
   flex gap.
   .lpgeco-input-group replaces the old .lpgeco-input-section: no toggle,
   just a small inline grey label above each cluster of rows.
   .lpgeco-advanced is a native <details> accordion holding everything
   the broker rarely touches per-fixture. */

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-inputs-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-reset-baltic-btn {
    background: transparent;
    border: 1px solid var(--lpgdash-divider);
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-small);
    letter-spacing: 0.4px;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-reset-baltic-btn:hover {
    color: var(--lpgdash-brand);
    border-color: var(--lpgdash-brand);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-input-group {
    margin-top: 6px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-group-label {
    display: block;
    margin: 0 0 2px 0;
    font-size: var(--ssy-fs-tiny);
    font-weight: 600;
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-advanced {
    margin-top: 8px;
    border-top: 1px solid var(--lpgdash-divider);
    padding-top: 6px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-advanced-summary {
    cursor: pointer;
    user-select: none;
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    color: var(--lpgdash-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 2px 0;
    list-style: revert;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-advanced-summary:hover {
    color: var(--lpgdash-brand);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-advanced[open] > .lpgeco-advanced-summary {
    margin-bottom: 4px;
}

/* Port rows — 4-column grid: label | cost input | days input | reset icon.
   Fixed-width input columns so "Cost $" / "Days" headers align exactly. */
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-port-header,
.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-port-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 48px 22px;
    gap: 4px;
    align-items: center;
    margin-bottom: 3px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-port-col-label {
    font-size: var(--ssy-fs-tiny);
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: right;
    padding-right: 4px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-port-row > label {
    font-size: var(--ssy-fs-base);
    color: var(--lpgdash-text-dim);
    font-weight: 500;
    letter-spacing: 0.2px;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-port-row > input {
    padding: 2px 6px;
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 3px;
    text-align: right;
    font-size: var(--ssy-fs-md);
    background: var(--lpgdash-surface);
    color: var(--lpgdash-brand);
    font-weight: 700;
    font-family: inherit;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    outline: none;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-port-row > input:focus {
    border-color: var(--lpgdash-accent);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-port-row-opt > label {
    color: var(--lpgdash-text-muted);
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-port-add-btn {
    background: transparent;
    border: 0;
    color: var(--lpgdash-accent);
    font-size: var(--ssy-fs-small);
    font-family: inherit;
    cursor: pointer;
    padding: 1px 0 4px 0;
    text-align: left;
    letter-spacing: 0.3px;
    display: block;
}

.lpgdash-economics[b-3i2nfp8ybg]  .lpgeco-port-add-btn:hover {
    color: var(--lpgdash-brand);
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_500_Calendar.razor.rz.scp.css */
/* ============================================================
   Country holiday calendar tab.
   Scoped under .lpgdash-dash-wrap so the shell owns palette variables.
   ============================================================ */

.lpgdash-dash-wrap .lpgdash-cal[b-pftapqpsii] {
    display: grid;
    gap: 7px;
    font-family: inherit;
}

/* Single controls row: title + month nav + additional-holidays toggle. */
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-controls[b-pftapqpsii] {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--lpgdash-divider);
    padding: 2px 0 7px 0;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-controls > .lpgdash-cal-title[b-pftapqpsii] {
    margin: 0;
    flex: 1 1 auto;
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-lg);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-toggle[b-pftapqpsii] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lpgdash-text-dim);
    cursor: pointer;
    font-size: var(--ssy-fs-base);
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail[b-pftapqpsii] {
    min-width: 0;
    background: var(--lpgdash-surface);
    border: 1px solid var(--lpgdash-card-border);
    border-radius: 4px;
    padding: 6px 8px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-date[b-pftapqpsii] {
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-small);
    font-variant-numeric: tabular-nums;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-muted[b-pftapqpsii] {
    margin: 0;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-monthbar[b-pftapqpsii] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}

/* Chevron / Today buttons grouped as one segmented control. */
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-nav[b-pftapqpsii] {
    border: 1px solid var(--lpgdash-card-border-soft);
    background: var(--lpgdash-surface);
    color: var(--lpgdash-brand);
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--ssy-fs-lg);
    font-weight: 600;
    line-height: 1;
    min-width: 28px;
    padding: 5px 9px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-nav:first-child[b-pftapqpsii] {
    border-radius: 3px 0 0 3px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-nav:last-child[b-pftapqpsii] {
    border-radius: 0 3px 3px 0;
    margin-left: -1px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-nav-today[b-pftapqpsii] {
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-base);
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-left: -1px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-nav:hover[b-pftapqpsii] {
    border-color: var(--lpgdash-accent);
    position: relative;
    z-index: 1;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-board[b-pftapqpsii] {
    display: grid;
    grid-template-columns: minmax(820px, 1fr) minmax(280px, 0.31fr);
    gap: 14px;
    align-items: start;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-months[b-pftapqpsii] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-monthpanel[b-pftapqpsii] {
    min-width: 0;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-monthname[b-pftapqpsii] {
    margin: 0 0 6px 0;
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-lg);
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-grid[b-pftapqpsii] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: var(--lpgdash-divider);
    border: 1px solid var(--lpgdash-divider);
    border-radius: 4px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-dow[b-pftapqpsii] {
    background: var(--lpgdash-row-active-bg);
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-tiny);
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 4px 2px;
    text-align: center;
    text-transform: uppercase;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-day[b-pftapqpsii] {
    display: grid;
    align-content: start;
    gap: 3px;
    min-height: 52px;
    min-width: 0;
    border: 0;
    background: var(--lpgdash-surface);
    color: var(--lpgdash-text);
    cursor: pointer;
    font-family: inherit;
    padding: 4px;
    text-align: left;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-day:hover[b-pftapqpsii] {
    background: var(--lpgdash-row-active-bg);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-empty[b-pftapqpsii] {
    cursor: default;
    opacity: 0.5;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-daynum[b-pftapqpsii] {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-has-holiday .lpgdash-cal-daynum[b-pftapqpsii] {
    color: var(--lpgdash-text);
}

/* Today: filled accent tint + brand-coloured day number — the broker's anchor
   point, should be unmissable at a glance. */
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-is-today[b-pftapqpsii] {
    background: var(--lpgdash-row-active-bg);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-is-today .lpgdash-cal-daynum[b-pftapqpsii] {
    color: var(--lpgdash-brand);
    font-weight: 800;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-is-selected[b-pftapqpsii] {
    outline: 2px solid var(--lpgdash-accent);
    outline-offset: -2px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-has-holiday[b-pftapqpsii] {
    box-shadow: inset 3px 0 0 var(--lpgdash-accent);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-markers[b-pftapqpsii] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    line-height: 1.1;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-marker[b-pftapqpsii] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    min-height: 16px;
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 3px;
    background: var(--lpgdash-surface);
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-tiny);
    font-weight: 700;
    line-height: 1;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-marker-additional[b-pftapqpsii] {
    border-style: dashed;
    color: var(--lpgdash-text-muted);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-marker-more[b-pftapqpsii] {
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-tiny);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail[b-pftapqpsii] {
    position: sticky;
    top: 8px;
    display: grid;
    align-items: start;
    gap: 5px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-card-head[b-pftapqpsii] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 1px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail-list[b-pftapqpsii],
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-holidays[b-pftapqpsii],
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-notes[b-pftapqpsii] {
    display: grid;
    gap: 3px;
}

/* Selected Day rows: country code as a small chip on the left, country name +
   holiday reason flow inline next to it. Reads as "SG Singapore - Vesak Day". */
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail-row[b-pftapqpsii] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 8px;
    row-gap: 0;
    border-bottom: 1px solid var(--lpgdash-row-line);
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-base);
    padding: 4px 0;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail-row strong[b-pftapqpsii] {
    grid-row: 1;
    grid-column: 1;
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    letter-spacing: 0.4px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail-row span:nth-of-type(1)[b-pftapqpsii] {
    grid-row: 1;
    grid-column: 2;
    color: var(--lpgdash-text);
    font-weight: 600;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail-row span:last-child[b-pftapqpsii] {
    grid-row: 2;
    grid-column: 2;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail-row strong[b-pftapqpsii],
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-holidays strong[b-pftapqpsii],
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-notes strong[b-pftapqpsii] {
    color: var(--lpgdash-brand);
    font-weight: 700;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-holidays[b-pftapqpsii],
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-notes[b-pftapqpsii] {
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-small);
    line-height: 1.35;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-holidays em[b-pftapqpsii] {
    color: var(--lpgdash-text-muted);
    font-style: normal;
    margin-left: 4px;
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 1200px) {
    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-board[b-pftapqpsii] {
        grid-template-columns: 1fr;
    }

    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail[b-pftapqpsii] {
        position: static;
    }
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 900px) {
    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-months[b-pftapqpsii] {
        grid-template-columns: 1fr;
    }
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 640px) {
    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-controls[b-pftapqpsii] {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-grid[b-pftapqpsii] {
        overflow-x: auto;
    }

    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-dow[b-pftapqpsii],
    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-day[b-pftapqpsii] {
        min-width: 54px;
    }
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_600_Weather.razor.rz.scp.css */
/* ============================================================
   LPG weather tab. Scoped under the dashboard wrapper and the
   lpgweather prefix so this tab stays isolated from sibling tabs.
   Dense Bloomberg-style matrix: one row per port, now + 48h
   per metric, exception colouring (only caution/alert cells tint).
   ============================================================ */

.lpgdash-dash-wrap .lpgweather-tab[b-l873sh1jcx] {
    display: grid;
    gap: 12px;
}

/* --- Top bar: storm watch + counts + freshness --- */

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-top[b-l873sh1jcx] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    justify-content: space-between;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-storms[b-l873sh1jcx] {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    border: 1px solid var(--lpgdash-card-border);
    border-left: 3px solid var(--lpgdash-accent);
    border-radius: 4px;
    background: var(--lpgdash-surface);
    padding: 8px 10px;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-group-title[b-l873sh1jcx] {
    margin: 0;
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

/* Basin-coverage qualifier next to "Storm watch" — the NHC feed is
   Atlantic/E. Pacific only, so the label keeps the W. Pacific gap honest. */
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-coverage[b-l873sh1jcx] {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 600;
    white-space: nowrap;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-storm-pill[b-l873sh1jcx] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 4px;
    background: var(--lpgdash-row-active-bg);
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-base);
    font-weight: 600;
    line-height: 1.2;
    padding: 5px 8px;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-counts[b-l873sh1jcx] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    margin-left: auto;
}

/* Interactive status filters are now the shared <SsyFilterChips>; only the
   non-interactive "all calm" pill still uses .lpgweather-count(-calm). */
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-count[b-l873sh1jcx] {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 4px 8px;
    text-transform: uppercase;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-count-calm[b-l873sh1jcx] {
    border: 1px solid var(--lpgdash-card-border-soft);
    background: var(--lpgdash-row-active-bg);
    color: var(--lpgdash-up);
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-top[b-l873sh1jcx]  .dash-freshness-pill {
    flex: 0 0 auto;
}

/* --- Board: matrix + sticky detail rail --- */

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-board[b-l873sh1jcx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-wrap[b-l873sh1jcx] {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--lpgdash-card-border);
    border-radius: 4px;
    background: var(--lpgdash-surface);
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix[b-l873sh1jcx] {
    width: 100%;
    border-collapse: collapse;
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-md);
    font-variant-numeric: tabular-nums;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix thead th[b-l873sh1jcx] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--lpgdash-surface);
    color: var(--lpgdash-brand);
    font-weight: 800;
    white-space: nowrap;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-grouphead th[b-l873sh1jcx] {
    border-bottom: 1px solid var(--lpgdash-card-border-soft);
    font-size: var(--ssy-fs-base);
    letter-spacing: 0.4px;
    padding: 7px 8px 3px;
    text-align: center;
    text-transform: uppercase;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-subhead th[b-l873sh1jcx] {
    border-bottom: 2px solid var(--lpgdash-card-border);
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0 8px 5px;
    text-align: right;
    text-transform: uppercase;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-grouphead .lpgweather-col-port[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-subhead .lpgweather-col-port[b-l873sh1jcx] {
    text-align: left;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-region td[b-l873sh1jcx] {
    background: var(--lpgdash-row-active-bg);
    border-top: 1px solid var(--lpgdash-card-border-soft);
    border-bottom: 1px solid var(--lpgdash-card-border-soft);
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    text-transform: uppercase;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-row[b-l873sh1jcx] {
    border-bottom: 1px solid var(--lpgdash-row-line-soft);
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-row:hover[b-l873sh1jcx] {
    background: var(--lpgdash-row-active-bg);
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-row.lpgweather-selected[b-l873sh1jcx] {
    background: var(--lpgdash-row-active-bg);
    box-shadow: inset 3px 0 0 var(--lpgdash-accent);
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-row td[b-l873sh1jcx] {
    padding: 2px 8px;
    line-height: 1.25;
    white-space: nowrap;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-cell-dot[b-l873sh1jcx] {
    text-align: center;
    width: 22px;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-col-port[b-l873sh1jcx] {
    color: var(--lpgdash-brand);
    font-weight: 700;
    text-align: left;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-port-select[b-l873sh1jcx] {
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-port-select:focus-visible[b-l873sh1jcx] {
    outline: 2px solid var(--lpgdash-accent);
    outline-offset: 2px;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-flag[b-l873sh1jcx] {
    margin-right: 6px;
    font-size: var(--ssy-fs-lg);
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-num[b-l873sh1jcx] {
    text-align: right;
    font-weight: 700;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-ts[b-l873sh1jcx] {
    text-align: center;
    width: 26px;
}

/* Vertical separators between metric groups so each now/48h pair
   reads clearly under its header. */
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-grouphead th:nth-child(2)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-grouphead th:nth-child(3)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-grouphead th:nth-child(4)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-grouphead th:nth-child(5)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-grouphead th:nth-child(6)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-subhead th:nth-child(2)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-subhead th:nth-child(4)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-subhead th:nth-child(6)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-subhead th:nth-child(8)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-matrix-subhead th:nth-child(10)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-row td:nth-child(2)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-row td:nth-child(4)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-row td:nth-child(6)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-row td:nth-child(8)[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-row td:nth-child(10)[b-l873sh1jcx] {
    border-right: 1px solid var(--lpgdash-card-border-soft);
}

/* --- Exception cell tints: only caution/alert paint --- */

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-cell-caution[b-l873sh1jcx] {
    background: color-mix(in srgb, var(--lpgdash-accent) 16%, transparent);
    color: var(--lpgdash-brand);
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-cell-alert[b-l873sh1jcx] {
    background: color-mix(in srgb, var(--lpgdash-warn) 18%, transparent);
    color: var(--lpgdash-warn);
    font-weight: 800;
}

/* Status dots are now the shared <SsyStatusDot> (legend + per-row), themed via
   the --ssy-dash-up/-caution/-warn vars on .lpgdash-dash-wrap. */

/* --- Sticky detail rail --- */

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-detail[b-l873sh1jcx] {
    position: sticky;
    top: 8px;
    min-width: 0;
}
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-context[b-l873sh1jcx]{display:flex;align-items:center;gap:9px;padding:5px 7px;border:1px solid var(--lpgdash-card-border);border-bottom:0;background:var(--lpgdash-surface);color:var(--lpgdash-text-muted);font-size:9px}.lpgdash-dash-wrap .lpgweather-tab .lpgweather-context strong[b-l873sh1jcx]{color:var(--lpgdash-brand);text-transform:uppercase}.lpgdash-dash-wrap .lpgweather-tab .lpgweather-context span:last-child[b-l873sh1jcx]{margin-left:auto}

/* --- Ventusky map --- */

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map[b-l873sh1jcx] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-head[b-l873sh1jcx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-buttons[b-l873sh1jcx] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-note[b-l873sh1jcx] {
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-small);
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-tools[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-official-links[b-l873sh1jcx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-tools[b-l873sh1jcx] { justify-content: space-between; }
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-official-links[b-l873sh1jcx] { flex-wrap: wrap; justify-content: flex-end; font-size: var(--ssy-fs-small); }
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-official-links a[b-l873sh1jcx] { color: var(--lpgdash-brand); font-weight: 750; text-decoration: none; }
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-official-links a:hover[b-l873sh1jcx] { text-decoration: underline; }

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-button[b-l873sh1jcx] {
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 0;
    background: var(--lpgdash-surface);
    color: var(--lpgdash-brand);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    min-width: 54px;
    padding: 6px 10px;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-button:first-child[b-l873sh1jcx] {
    border-radius: 4px 0 0 4px;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-button:last-child[b-l873sh1jcx] {
    border-radius: 0 4px 4px 0;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-button + .lpgweather-map-button[b-l873sh1jcx] {
    margin-left: -1px;
}

.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-button:hover[b-l873sh1jcx],
.lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-button.lpgweather-selected[b-l873sh1jcx] {
    border-color: var(--lpgdash-accent);
    background: var(--lpgdash-row-active-bg);
    position: relative;
    z-index: 1;
}

.lpgdash-dash-wrap .lpgweather-tab iframe[b-l873sh1jcx] {
    width: 100%;
    height: clamp(380px, calc(100vh - 430px), 560px);
    border: 1px solid var(--lpgdash-card-border);
    border-radius: 4px;
    background: var(--lpgdash-brand);
}

/* --- Responsive --- */

/* Deliberate narrow-viewport degrade. */
@media (max-width: 1280px) {
    .lpgdash-dash-wrap .lpgweather-tab .lpgweather-board[b-l873sh1jcx] {
        grid-template-columns: 1fr;
    }

    .lpgdash-dash-wrap .lpgweather-tab .lpgweather-detail[b-l873sh1jcx] {
        position: static;
    }
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 680px) {
    .lpgdash-dash-wrap .lpgweather-tab .lpgweather-top[b-l873sh1jcx],
    .lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-head[b-l873sh1jcx] {
        align-items: flex-start;
        flex-direction: column;
    }

    .lpgdash-dash-wrap .lpgweather-tab .lpgweather-map-tools[b-l873sh1jcx] {
        align-items: flex-start;
        flex-direction: column;
    }

    .lpgdash-dash-wrap .lpgweather-tab .lpgweather-official-links[b-l873sh1jcx] { justify-content: flex-start; }

    .lpgdash-dash-wrap .lpgweather-tab .lpgweather-top[b-l873sh1jcx]  .dash-freshness-pill {
        width: 100%;
    }
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_700_Bunkers.razor.rz.scp.css */
/* Scoped styles for the Bunkers tab. */

.lpgdash-bunkers[b-f882t3vtyr] {
    display: grid;
    gap: 8px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgdash-card,
.lpgdash-bunkers[b-f882t3vtyr]  .ssy-card {
    padding: 5px 7px 4px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ssy-fs-base);
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-table th {
    padding: 2px 5px;
    text-align: right;
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
    color: var(--lpgdash-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--lpgdash-divider);
    white-space: nowrap;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-table td {
    height: 22px;
    padding: 0 5px;
    text-align: right;
    vertical-align: middle;
    border-bottom: 1px solid var(--lpgdash-row-line);
    color: var(--lpgdash-text);
    white-space: nowrap;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-table tbody tr:last-child td {
    border-bottom: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-table .lpgbunk-col-port {
    text-align: left;
    padding-left: 2px;
    color: var(--lpgdash-brand);
    font-weight: 700;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-num {
    font-weight: 800;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-cost-dn {
    color: var(--lpgdash-up);
    font-weight: 800;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-cost-up {
    color: var(--lpgdash-down);
    font-weight: 800;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-flat {
    color: var(--lpgdash-text-muted);
    font-weight: 800;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-board-card,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-spreads,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-fuelchoice,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-hist-zone,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-eua,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-lift,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrubber,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg {
    min-width: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-stamp {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrubber-toggle,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrubber-toggle input,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-check input {
    margin: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-stale-marker {
    display: inline-block;
    margin-left: 5px;
    border: 1px solid var(--lpgdash-divider);
    border-radius: 4px;
    color: var(--lpgdash-down);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
    line-height: 1;
    padding: 2px 4px;
    text-transform: uppercase;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-outlier-badge {
    color: var(--lpgdash-down);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
    margin-left: 3px;
    vertical-align: 1px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-hi5 {
    color: var(--lpgdash-accent);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-fwd-cell {
    padding: 0 2px;
    min-width: 64px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-fwd-head,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-fwd-sub {
    display: block;
    line-height: 1.05;
    white-space: nowrap;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-fwd-head {
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-fwd-sub {
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-fwd-empty {
    color: var(--lpgdash-text-muted);
    font-weight: 700;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-spreads-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 8px;
    align-items: stretch;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-spreads-table-wrap {
    min-width: 0;
    overflow-x: auto;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-status-pill {
    display: inline-block;
    min-width: 34px;
    border-radius: 4px;
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
    line-height: 1;
    padding: 4px 5px;
    text-align: center;
    text-transform: uppercase;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-status-in {
    background: var(--lpgdash-row-line-soft);
    color: var(--lpgdash-up);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-status-out {
    background: var(--lpgdash-row-line-soft);
    color: var(--lpgdash-text-muted);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-hist-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 6px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-hist-control,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-fx,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-reg-controls label {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-hist-control span,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-fx span,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-reg-controls label span {
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-hist-select,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-select,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-fx input,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-reg-controls input {
    width: 100%;
    min-width: 0;
    height: 26px;
    border: 1px solid var(--lpgdash-divider);
    border-radius: 4px;
    background: var(--lpgdash-surface);
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    outline: none;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-select {
    margin-left: auto;
    width: auto;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-hist-chart {
    height: 176px;
    min-width: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-eua-chart {
    height: 102px;
    min-width: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-eua-cross-chart {
    height: 112px;
    margin-top: 4px;
    min-width: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-eua-head {
    align-items: flex-start;
    gap: 8px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-eua-latest {
    margin-left: auto;
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage {
    min-height: 184px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
    gap: 6px 8px;
    align-items: start;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-main,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-inputs {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-inputs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-stat {
    min-width: 0;
    min-height: 74px;
    border: 1px solid var(--lpgdash-divider);
    border-radius: 4px;
    background: var(--lpgdash-surface);
    padding: 6px 8px;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-label {
    display: block;
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.1;
    text-transform: uppercase;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-stat strong {
    display: block;
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-display-lg);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-sub,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-ets {
    display: block;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-ets {
    font-size: var(--ssy-fs-tiny);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-input strong {
    font-size: var(--ssy-fs-lg);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-delta {
    background: var(--lpgdash-row-line-soft);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-good {
    border-color: var(--lpgdash-up);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-good strong,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-good .lpgbunk-voyage-sub,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-good-text {
    color: var(--lpgdash-up);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-bad {
    border-color: var(--lpgdash-down);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-bad strong,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-bad .lpgbunk-voyage-sub,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-bad-text {
    color: var(--lpgdash-down);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-flat strong,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-flat .lpgbunk-voyage-sub {
    color: var(--lpgdash-text-muted);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-disabled {
    background: var(--lpgdash-row-line-soft);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-disabled strong,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-disabled-text {
    color: var(--lpgdash-text-muted) !important;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-reg-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
    min-height: 46px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-reg-controls .lpgbunk-voyage-check {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-reg-controls .lpgbunk-voyage-check input {
    width: auto;
    height: auto;
    padding: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-assumptions {
    grid-column: 1 / -1;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 700;
    line-height: 1.2;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-lift-list,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-list,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-list {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-lift,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrubber {
    height: 100%;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-lift-row {
    display: grid;
    grid-template-columns: minmax(auto, 0.5fr) minmax(0, 3fr) minmax(42px, auto);
    gap: 0px;
    align-items: center;
    min-height: 30px;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-lift-port {
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-lift-track,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-track {
    min-width: 0;
    border-radius: 4px;
    background: var(--lpgdash-row-line-soft);
    overflow: hidden;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-lift-bar {
    display: flex;
    justify-content: flex-end;
    min-width: 42px;
    border-radius: 4px;
    background: var(--lpgdash-brand);
    color: var(--lpgdash-surface);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    line-height: 1;
    padding: 5px 6px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-lift-move {
    justify-self: end;
    font-size: var(--ssy-fs-small);
    font-weight: 800;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-hero {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-hero strong {
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-display-xl);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-hero span {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 800;
    text-transform: uppercase;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-gauge {
    margin: 9px 0 6px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-track {
    position: relative;
    height: 9px;
    border-radius: 999px;
    background: var(--lpgdash-row-line-soft);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-pay,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-now {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-pay i {
    display: block;
    width: 2px;
    height: 18px;
    background: var(--lpgdash-accent);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-pay em {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-now {
    width: 13px;
    height: 13px;
    border: 2px solid var(--lpgdash-surface);
    border-radius: 999px;
    background: var(--lpgdash-up);
    box-shadow: 0 0 0 1px var(--lpgdash-up);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-scale,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-row,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-head,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-scale {
    margin-top: 1px;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-row {
    min-height: 22px;
    border-bottom: 1px solid var(--lpgdash-row-line);
    font-size: var(--ssy-fs-base);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-row strong {
    min-width: 44px;
    font-size: var(--ssy-fs-base);
    font-weight: 800;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-row:last-child {
    border-bottom: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-scrub-row span,
.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-head strong {
    color: var(--lpgdash-brand);
    font-weight: 800;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-panel-note {
    margin: 6px 0 0;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 700;
    line-height: 1.25;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-row {
    display: grid;
    gap: 3px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--lpgdash-row-line);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-head {
    font-size: var(--ssy-fs-base);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-bars {
    display: grid;
    gap: 3px;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-line {
    display: grid;
    grid-template-columns: minmax(78px, 0.9fr) minmax(0, 3fr);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-line > span {
    color: var(--lpgdash-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-bar {
    min-width: 44px;
    border-radius: 4px;
    color: var(--lpgdash-surface);
    font-size: var(--ssy-fs-tiny);
    font-weight: 800;
    line-height: 1;
    padding: 4px 5px;
    text-align: right;
    white-space: nowrap;
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-ets {
    background: var(--lpgdash-accent);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-surplus {
    background: var(--lpgdash-up);
}

.lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-reg-penalty {
    background: var(--lpgdash-down);
}

/* Deliberate narrow-viewport degrade - ratio'd design columns cannot wrap intrinsically (SsyGrid MinCol is for uniform grids). */
@media (max-width: 1400px) {
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-row-spot-spreads,
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-row-fuel-reg {
        grid-template-columns: 1fr;
    }
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 980px) {
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-hist-controls,
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-main,
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-inputs,
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-reg-controls {
        grid-template-columns: 1fr 1fr;
    }

    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-layout,
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-spreads-layout {
        grid-template-columns: 1fr;
    }
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 640px) {
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-hist-controls,
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-main,
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-inputs,
    .lpgdash-bunkers[b-f882t3vtyr]  .lpgbunk-voyage-reg-controls {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Maintenance/Data/AzureLoad.razor.rz.scp.css */
.tab-bar[b-p8zzbzq4yc] {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 18px;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    overflow-x: auto;
}

.tab-btn[b-p8zzbzq4yc] {
    padding: 12px 32px;
    font-size: 1.08em;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    color: #444;
    font-weight: 500;
    transition: background 0.12s, border-bottom 0.12s, color 0.12s;
    outline: none;
    margin-right: 2px;
    border-radius: 8px 8px 0 0;
}

.tab-btn.active[b-p8zzbzq4yc] {
    border-bottom: 3px solid #0078d4;
    background: #fff;
    color: #0078d4;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tab-btn:not(.active):hover[b-p8zzbzq4yc] {
    background: #eaf3fb;
    color: #222;
}

.tab-content[b-p8zzbzq4yc] {
    padding: 0;
    min-height: 0;
    height: 100%;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.file-list[b-p8zzbzq4yc] {
    height: calc(100vh - 120px);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.container-card[b-p8zzbzq4yc] {
    background: #fafdff;
    border-radius: 8px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
}

.container-summary[b-p8zzbzq4yc] {
    font-weight: 600;
    position: sticky;
    top: 0;
    background: #fafdff;
    z-index: 2;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 6px;
}

.blob-badge[b-p8zzbzq4yc] {
    background: #0078d4;
    color: white;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.95em;
    margin-left: 4px;
    font-weight: 600;
}

.file-list[b-p8zzbzq4yc]  .search-box {
    margin-bottom: 12px;
    width: 100%;
    max-width: 320px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 2px solid #b5c6d6;
    font-size: 1em;
    background: #fafdff;
    transition: border 0.15s;
}

.file-list[b-p8zzbzq4yc]  .search-box:focus {
    border: 2px solid #0078d4;
    outline: none;
}

#button-group button[b-p8zzbzq4yc],
.blob-list button[b-p8zzbzq4yc] {
    background-color: #F7A506;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 70px;
    padding: 2px 10px;
    margin: 1px;
    font-size: 0.95em;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}

#button-group button:hover[b-p8zzbzq4yc],
.blob-list button:hover[b-p8zzbzq4yc] {
    background-color: #0078d4;
    color: #fff;
}

.blob-list button[style*="color:#a00"][b-p8zzbzq4yc] {
    background: #ffe7e7 !important;
    color: #a00 !important;
}

.blob-list button[style*="color:#007800"][b-p8zzbzq4yc] {
    background: #e7ffe7 !important;
    color: #007800 !important;
}

.blob-list button[style*="color:#004080"][b-p8zzbzq4yc] {
    background: #e7f0ff !important;
    color: #004080 !important;
}

.blob-preview-callout[b-p8zzbzq4yc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30, 32, 38, 0.75);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-p8zzbzq4yc 0.2s;
}

@keyframes fadeIn-b-p8zzbzq4yc {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }

.blob-preview-content[b-p8zzbzq4yc] {
    background: #fff;
    border-radius: 16px;
    padding: 24px 24px 18px 24px;
    max-width: 98vw;
    max-height: 96vh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1.5px solid #e0e0e0;
    min-width: 350px;
    overflow: auto;
}

.blob-preview-embed[b-p8zzbzq4yc] {
    max-width: 95vw;
    max-height: 90vh;
    min-width: 400px;
    min-height: 400px;
    width: 80vw;
    height: 85vh;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    border: 1px solid #e0e0e0;
    background: #fafbfc;
    display: block;
    margin: 0 auto;
}

.blob-preview-img[b-p8zzbzq4yc] {
    max-width: 95vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    border: 1px solid #e0e0e0;
    background: #fafbfc;
    object-fit: contain;
    margin: 0 auto;
}

.blob-preview-loading[b-p8zzbzq4yc] {
    color: #888;
    font-size: 1.1em;
    margin: 40px 0;
}

.blob-preview-unsupported[b-p8zzbzq4yc] {
    color: #c00;
    font-size: 1.05em;
    margin: 40px 0;
}

.tab-upload-form[b-p8zzbzq4yc] {
    margin-bottom: 18px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px 18px 10px 18px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.file-list table[b-p8zzbzq4yc] {
    background: #fafdff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.file-list th[b-p8zzbzq4yc], .file-list td[b-p8zzbzq4yc] {
    padding: 8px 12px;
}

.file-list th[b-p8zzbzq4yc] {
    background: #eaf3fb;
    color: #0078d4;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
}

.file-list tr:nth-child(even)[b-p8zzbzq4yc] {
    background: #f3f8fc;
}

.file-list tr:hover[b-p8zzbzq4yc] {
    background: #eaf3fb;
}
/* /Components/Pages/Maintenance/Data/RouteFormulaUpdate.razor.rz.scp.css */

/* Force height of accordion-bodies */
.formula-content[b-lvrj5hz2n6]  .accordion-body {
    max-height: 70vh;
    overflow-y: auto;
}
.formula-content[b-lvrj5hz2n6]  .text-column {
    text-overflow: ellipsis;
    width: 22%;
}

.formula-content[b-lvrj5hz2n6]  .text-column code {
    color: inherit;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.formula-content[b-lvrj5hz2n6]  .date-column{
    width: 5%;
}

.formula-content[b-lvrj5hz2n6]  .type-column{
    width: 12%;
}

.formula-content[b-lvrj5hz2n6]  .btn-column {
    width: 10%;
}

@media (max-width: 1300px) {
    .formula-content[b-lvrj5hz2n6]  .hide-mobile {
        display: none;
    }

}

/* modal form additions */
[b-lvrj5hz2n6] #EditFormulaForm .form-floating button.ssy-btn-green,
[b-lvrj5hz2n6] #EditFormulaForm .form-floating button.ssy-btn-yellow,
[b-lvrj5hz2n6] #EditFormulaForm .form-floating button.ssy-btn-red {
    width: 100%;
    height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    border-radius: var(--bs-border-radius);
}

[b-lvrj5hz2n6] #EditFormulaForm .form-floating button.ssy-btn-green {
    background-color: #FFFFFF;
    color: #91A527;
    border: 1px solid #91A527;
}
[b-lvrj5hz2n6] #EditFormulaForm.form-floating button.ssy-btn-green:hover {
    background-color: #91A527;
    color: #FFFFFF;
    border: 1px solid #91A527;
}

[b-lvrj5hz2n6] #EditFormulaForm .form-floating button.ssy-btn-yellow {
    background-color: #FFFFFF;
    color: #F7A506;
    border: 1px solid #F7A506;
}
[b-lvrj5hz2n6] #EditFormulaForm .form-floating button.ssy-btn-yellow:hover {
    background-color: #F7A506;
    color: #FFFFFF;
    border: 1px solid #F7A506;
}

[b-lvrj5hz2n6] #EditFormulaForm .form-floating button.ssy-btn-red {
    background-color: #FFFFFF;
    color: #DB303A;
    border: 1px solid #DB303A;
}
[b-lvrj5hz2n6] #EditFormulaForm .form-floating button.ssy-btn-red:hover {
    background-color: #DB303A;
    color: #FFFFFF;
    border: 1px solid #DB303A;
}

[b-lvrj5hz2n6] #EditFormulaForm fieldset {
    border-top: 1px dashed lightgrey;
    border-bottom: 1px dashed lightgrey;
}

[b-lvrj5hz2n6] #EditFormulaForm fieldset legend {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1.25rem;
}

[b-lvrj5hz2n6] #EditFormulaForm fieldset code {
    font-size: 1.1rem;
    padding: 0.7rem 0.25rem;
    display: inline-block;
    color: inherit;
    border-bottom: 1px dotted black;
    background-color: lightgray;
}
/* /Components/Pages/Maintenance/Data/RouteGroups/RouteDataCheckTable.razor.rz.scp.css */
/* Hide the browser's default checkbox */
.rt-grp-main[b-rumpnruh7t]  .custom-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.rt-grp-main[b-rumpnruh7t]  .custom-checkbox-container .custom-checkbox-checkmark {
    height: 15px;
    width: 15px;
    border-radius: 3px;
    background-color: #E7EEF2;
}

/* On mouse-over, add a grey background color */
.rt-grp-main[b-rumpnruh7t]  .custom-checkbox-container:hover input ~ .custom-checkbox-checkmark {
    background-color: #CEDCE4;
}

/.rt-grp-main[b-rumpnruh7t]  .custom-checkbox-container input:checked ~ .custom-checkbox-checkmark {
    background-color: #000061;
}
/* /Components/Pages/Maintenance/Data/RouteGroups/RouteGroups.razor.rz.scp.css */
@media only screen and (max-width: 780px) {
    .rgm-hide-mobile[b-gdve6099wm] {
        display: none !important;
    }
    .rgm-page[b-gdve6099wm] {
        display: flex !important;
        flex-direction: column !important;
    }
    .rgm-choose-group-inputs[b-gdve6099wm] {
        flex-direction: column !important;
        align-items: unset !important;
    }
    .rgm-scroll-table[b-gdve6099wm] {
        height: unset !important;
        width: unset !important;
    }
}

@scope (.rgm-page) {
    :scope[b-gdve6099wm] {
        height: 40vh;
        width: 100%;
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: 40vh 40vh;
        gap: 35px;
    }

    .rgm-choose-group[b-gdve6099wm], .rgm-group-tree[b-gdve6099wm], .rgm-group-content[b-gdve6099wm], .rgm-add-group[b-gdve6099wm] {
        display: flex;
    }

    .rgm-scroll-table[b-gdve6099wm] {
        height: 100%;
        width: 100%;
        text-align: center;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #000061 transparent;
        scrollbar-gutter: stable;
        margin-top: 1%;
    }

    .rgm-input[b-gdve6099wm] {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        height: 30px;
        width: 100px;
        padding-left: 5px;
    }

    table[b-gdve6099wm] {
        height: 100%;
        width: 100%;
    }

    thead tr[b-gdve6099wm] {
        width: 100%;
        border: 1px solid #000061;
        background-color: #000061;
        color: white;
    }

    tbody[b-gdve6099wm] {
        /*overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #000061 transparent;
    scrollbar-gutter: stable;*/
    }

        tbody tr[b-gdve6099wm] {
            border-bottom: 1px solid #000061;
        }

            tbody tr:hover[b-gdve6099wm] {
                background-color: #ddebf8 !important;
            }

    td[b-gdve6099wm] {
        border: 1px solid #000061;
        padding: 6px;
    }

        td input[b-gdve6099wm] {
            width: 100%;
            /*border-radius: 10px;
        border: 1px solid navy;
        padding: 0 5px;*/
        }
}

.rgm-hide-mobile[b-gdve6099wm] {
    display: content;
}

.rgm-choose-group[b-gdve6099wm] {
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
}
.rgm-choose-group-inputs[b-gdve6099wm] {
    display: flex;
    flex-direction: row;
    gap:2rem;
    /* justify-content: space-between;*/
}

.rgm-group-list[b-gdve6099wm] {
    display: flex;
    flex-direction: column;
    height: 98%;
    padding: 15px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: navy transparent;
    scrollbar-gutter: stable;
}


.rgm-group-tree[b-gdve6099wm] {
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
}

.rgm-group-tree-children[b-gdve6099wm] {
    width: 80%;
    /*    margin-top: 30px;*/
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}




.rgm-group-content[b-gdve6099wm] {
    height: 100%;
    width: 100%;
    flex-direction: column;
    position: relative;
}

.rgm-group-content-header[b-gdve6099wm] {
    display: flex;
    flex-direction: row;
    background-color: #000061;
    color: white;
    font-weight: 500;
    height: 7%;
}

.rgm-add-group[b-gdve6099wm] {
    flex-direction: column;
}





/* ==========================================================================
   Popup edit forms (Add/Edit Route Group, Add/Edit Route Group Content,
   Delete confirmation).

   Replaces the old .rgm-modal-edit-table Field/Value grid. The Description
   and AdditionalInfo columns are varchar(max) and routinely hold multi-line
   JSON, so those fields are 6-row textareas rather than single-line inputs.

   Colours are the SSY scheme throughout: Simpson blue #000061 for structure,
   crystal blue #009DC9 for focus/accent, #ddebf8 for tints.
   ========================================================================== */
@scope (.rgm-form) {
    :scope[b-gdve6099wm] {
        --rgm-navy: #000061;
        --rgm-crystal: #009DC9;
        --rgm-tint: #ddebf8;
        --rgm-line: #dde3ec;
        --rgm-muted: #5a6b80;

        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 4px 2px;
    }

    /* Small caps section divider - replaces the old navy table header row */
    .rgm-form-section[b-gdve6099wm] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 4px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--rgm-navy);
    }

    .rgm-form-section[b-gdve6099wm]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, var(--rgm-tint), transparent);
    }

    .rgm-form-section:first-child[b-gdve6099wm] {
        margin-top: 0;
    }

    .rgm-form-row[b-gdve6099wm] {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }

    /* Two fields side by side (Id/Name, RouteId/SortOrder, From/To) */
    .rgm-form-pair[b-gdve6099wm] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .rgm-form-label[b-gdve6099wm] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--rgm-navy);
    }

    .rgm-form-hint[b-gdve6099wm] {
        font-size: 0.68rem;
        font-weight: 400;
        font-style: italic;
        color: var(--rgm-muted);
    }

    .rgm-field[b-gdve6099wm] {
        width: 100%;
        box-sizing: border-box;
        padding: 7px 10px;
        font-family: inherit;
        font-size: 0.85rem;
        color: #1b2333;
        background-color: #fbfcfe;
        border: 1px solid var(--rgm-line);
        border-radius: 6px;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
    }

    .rgm-field:hover[b-gdve6099wm] {
        border-color: #b9c6d8;
        background-color: #ffffff;
    }

    .rgm-field:focus[b-gdve6099wm] {
        outline: none;
        background-color: #ffffff;
        border-color: var(--rgm-crystal);
        box-shadow: 0 0 0 3px rgba(0, 157, 201, 0.18);
    }

    .rgm-field[b-gdve6099wm]::placeholder {
        color: #9aa8bb;
    }

    /* Six visible rows, resizable, scrolls beyond that */
    .rgm-textarea[b-gdve6099wm] {
        min-height: calc(6 * 1.45em + 16px);
        line-height: 1.45;
        resize: vertical;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--rgm-navy) transparent;
    }

    /* JSON / delimited payloads read far better monospaced */
    .rgm-textarea-code[b-gdve6099wm] {
        font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
        font-size: 0.8rem;
        white-space: pre-wrap;
        word-break: break-word;
        tab-size: 2;
    }

    select.rgm-field[b-gdve6099wm] {
        appearance: none;
        padding-right: 28px;
        background-image: linear-gradient(45deg, transparent 50%, var(--rgm-navy) 50%), linear-gradient(135deg, var(--rgm-navy) 50%, transparent 50%);
        background-position: calc(100% - 15px) center, calc(100% - 10px) center;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    /* Read-only value display, used by the delete confirmation */
    .rgm-readonly[b-gdve6099wm] {
        padding: 7px 10px;
        font-size: 0.85rem;
        color: #1b2333;
        background-color: #f4f7fb;
        border: 1px solid var(--rgm-line);
        border-left: 3px solid var(--rgm-crystal);
        border-radius: 6px;
    }

    .rgm-readonly-code[b-gdve6099wm] {
        max-height: calc(6 * 1.45em + 16px);
        overflow-y: auto;
        font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
        font-size: 0.8rem;
        line-height: 1.45;
        white-space: pre-wrap;
        word-break: break-word;
        scrollbar-width: thin;
        scrollbar-color: var(--rgm-navy) transparent;
    }

    .rgm-confirm-lead[b-gdve6099wm] {
        font-size: 0.9rem;
        color: #1b2333;
    }

    @media only screen and (max-width: 780px) {
        .rgm-form-pair[b-gdve6099wm] {
            grid-template-columns: 1fr;
        }
    }
}

/* Inert Confirm button while required fields are empty */
.rgm-btn-disabled[b-gdve6099wm] {
    color: #6d7480;
    background-color: #e6eaf0;
    border-color: #c7cfda;
    pointer-events: none;
}



.rgm-route-data[b-gdve6099wm] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
/* /Components/Pages/Maintenance/Data/Routes.razor.rz.scp.css */
#filters[b-et89gwx32g] {
    background-color: rgba(134, 119, 84, 0.1);
    border-radius: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    transition: height 0.25s ease-out;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}

#routes-table[b-et89gwx32g] {
    width: 100%;
    margin-top: 1.5rem;
    table-layout: fixed;
}

#routes-table thead[b-et89gwx32g] {
    font-weight: bold;
    border-right: 1px solid #009DC9;
    border-left: 1px solid #009DC9;
    text-align: center;
}

#routes-table thead th[b-et89gwx32g] {
    padding: 0.5rem 0;
}

#routes-table td[b-et89gwx32g] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    border-left: 1px solid black;
}

#routes-table td:first-child[b-et89gwx32g] {
    border-left: 1px solid black;
}

#routes-table td:last-child[b-et89gwx32g] {
    border-right: 1px solid black;
}

#routes-table th.text-column[b-et89gwx32g],
#routes-table td.text-column[b-et89gwx32g]{
    text-align: left;
    padding-left: 0.25rem;
}

.edit-column[b-et89gwx32g]{
    width: 35px;
}

.small-column[b-et89gwx32g] {
    width: 60px;
}

.medium-column[b-et89gwx32g] {
    width: 80px;
}

.pointer[b-et89gwx32g] {
    cursor: pointer;
}

.edit[b-et89gwx32g] {
    text-align: center;
    background: none;
    color: inherit;
    border: none;
    padding: 0.2rem;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.editIcon1[b-et89gwx32g], .arrowIcon1[b-et89gwx32g] {
    vertical-align: middle;
}

#edit-route[b-et89gwx32g] {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: 1fr 2fr;
    row-gap: 5px;
    padding: 10px;
}
/* /Components/Pages/Maintenance/Data/SsyDataInputs/SsyProcessAdd.razor.rz.scp.css */
@scope (.pr-add-page) {
    :scope[b-3qe133b144] {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 75vh;
    }

    div[b-3qe133b144] {
        width: 100%;
/*        border: 1px solid orange;*/
    }
}

.pr-add-content[b-3qe133b144] {
    height: 84%;
}
.pr-add-name[b-3qe133b144] {
    margin-top: 1%;
}
.pr-add-process[b-3qe133b144] {
    height: 90%;
}

.pr-add-routes[b-3qe133b144] {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 50%;
    width: 100%;
}

.pr-add-routes-single[b-3qe133b144] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    width: 47%;
}
.pr-add-routes-group[b-3qe133b144] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
    width: 47%;
}
.pr-add-routes-show[b-3qe133b144] {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 50%;
    width: 100%;
}

.pr-add-datatypes[b-3qe133b144]{
    height: 100%;
}

.pr-add-dtypes-table[b-3qe133b144] {
    height: 90%;
    width: 70%;
    text-align: center;
    padding: 5px;
    border: 1px solid lightblue;
    cursor: pointer;
}

.pr-add-dtypes-table-cell[b-3qe133b144] {
    width: 5vw;
    border: 1px solid lightblue;
}
.pr-add-dtypes-table-cell:hover[b-3qe133b144] {
    background: lightgray !important;
    color: black;
}


.pr-add-freq-default[b-3qe133b144] {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pr-add-confirm-table[b-3qe133b144] {
    height: 100%;

}



.pr-add-footer button[b-3qe133b144] {
    float: right;
}
/* /Components/Pages/Maintenance/Email/EmailDistrib/DistributionLists.razor.rz.scp.css */

.distrib-page-container[b-ji3lc1zyge] {
    height: 1vh;
    display: grid;
    grid-template-columns: 200px 1fr;
}

    .distrib-page-container input[type="search"][b-ji3lc1zyge],
    .distrib-page-container input[type="text"][b-ji3lc1zyge],
    .distrib-page-container input[type="number"][b-ji3lc1zyge],
    .distrib-page-container input[type="select"][b-ji3lc1zyge],
    .distrib-page-container input[type="email"][b-ji3lc1zyge],
    .distrib-page-container select[b-ji3lc1zyge] {
        border-radius: 10px;
        border: 1px solid #1AA3E8;
        margin: 0 10px 10px 0;
        height: 25px;
        padding: 0 5px;
    }
    .distrib-page-container-input[b-ji3lc1zyge] {
        border-radius: 10px;
        border: 1px solid #1AA3E8;
        margin: 0 10px 10px 0;
        height: 25px;
        padding: 0 5px;
    }

        .distrib-page-container input:focus[b-ji3lc1zyge],
        .distrib-page-container select:focus[b-ji3lc1zyge] {
            outline-width: 0;
            box-shadow: 0 0 5px #1AA3E8;
        }

    .distrib-page-container table[b-ji3lc1zyge] {
        table-layout: fixed;
        width: 100%;
        background-color: #FAFAFA;
    }

        .distrib-page-container table tbody tr[b-ji3lc1zyge] {
        }
            .distrib-page-container table tbody tr:hover[b-ji3lc1zyge] {
                cursor: pointer;
                background-color: #DEDEDE;
            }

        .distrib-page-container table tr[b-ji3lc1zyge] {
            background-color: #FAFAFA;
            vertical-align: top;
        }

        .distrib-page-container table thead[b-ji3lc1zyge] {
            position: sticky;
            top: 0;
            background-color: #FAFAFA;
        }

.distrib-sidebar[b-ji3lc1zyge] {
    height: 100%;
    width: 200px;
    background-color: #F3F1EE;
    border-radius: 5px;
    padding: 10px;
}




.distrib-page-container .table-container[b-ji3lc1zyge] {
    height: 700px;
    width: 100%;
    overflow-y: scroll;
    border: 1px solid #DEDEDE;
}

.button-container[b-ji3lc1zyge] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.checkbox-container[b-ji3lc1zyge] {
    display: grid;
    grid-template-columns: 150px min-content;
    grid-template-rows: repeat(2, 20px);
    align-items: baseline;
}

.ssy-btn-main[b-ji3lc1zyge] {
    width: 160px;
    white-space: nowrap;
}

    .ssy-btn-main.selected[b-ji3lc1zyge] {
        background-color: #000061 !important;
    }

.vertical-text[b-ji3lc1zyge] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: end;
    vertical-align: baseline;
    width: 60px;
    height: 200px;
}

.break-word[b-ji3lc1zyge] {
    overflow-wrap: break-word;
}

.align-right[b-ji3lc1zyge] {
    text-align: right;
}

.user-grid[b-ji3lc1zyge] {
    display: grid;
    grid-template-rows: 50px repeat(6, minmax(30px, min-content));
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    border: 2px solid #F3F1EE;
}

.user-tab .tab-container[b-ji3lc1zyge] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.small-icon[b-ji3lc1zyge] {
    height: 20px;
}

.distrib-page-container table .icon[b-ji3lc1zyge] {
    width: 25px;
    text-align: center;
}

.distrib-page-container table tr.selected[b-ji3lc1zyge] {
    background-color: #FF6961;
}

.distrib-page-container table td.remove:hover[b-ji3lc1zyge] {
    background-color: #FF6961;
}

.distrib-page-container table td.add:hover[b-ji3lc1zyge] {
    background-color: #FF6961;
}



.user-row[b-ji3lc1zyge] {
    height: 30px;
}

    .user-row *[b-ji3lc1zyge] {
        vertical-align: middle;
    }


.top-tab[b-ji3lc1zyge] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    width: 100%;
    /*overflow-wrap: normal;*/
}

.company-suggestions[b-ji3lc1zyge] {
    width: auto;
    /*z-index: 10;
    position: absolute;
    top: 23%;*/
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

    .company-suggestions p[b-ji3lc1zyge] {
        margin: 5px 0;
        cursor: pointer;
        color: #007bff;
    }

        .company-suggestions p:hover[b-ji3lc1zyge] {
            text-decoration: underline;
        }


.desktop-add-user-modal[b-ji3lc1zyge] {
    display: flex;
    flex-direction: row;
    width: 50%;
    align-items: baseline;
}
@media only screen and (max-width: 992px) {
    .top-tab[b-ji3lc1zyge] {
        flex-direction: column;
    }
    .desktop-add-user-modal[b-ji3lc1zyge] {
        margin-top: 3%;
        flex-direction: column;
    }

    /*.desktop-add-user-modal {
        display: none;
    }
    .mobile-add-user-modal {
        display: flex;
        z-index: 1;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 20%;
        left: 15%;
        height: 60%;
        width: 70%;
        padding-top: 10%;
        background-color: gainsboro;
        border: 2px solid gray;
        border-radius: 25px;
    }*/
}

.blockout-confirm-button[b-ji3lc1zyge] {
    background-color: lightgray;
    border-radius: 999px;
    cursor: default;
}

/* /Components/Pages/Maintenance/Email/EmailDistrib/EmailDistrib.razor.rz.scp.css */

.distrib-page-container[b-ava3j2p23s] {
    height: 1vh;

   /* display: grid;
    grid-template-columns: 200px 1fr;*/
}

    .distrib-page-container input[type="search"][b-ava3j2p23s],
    .distrib-page-container input[type="text"][b-ava3j2p23s],
    .distrib-page-container input[type="number"][b-ava3j2p23s],
    .distrib-page-container input[type="select"][b-ava3j2p23s],
    .distrib-page-container select[b-ava3j2p23s] {
        border-radius: 10px;
        border: 1px solid #1AA3E8;
        margin: 0 10px 10px 0;
        height: 25px;
        padding: 0 5px;
    }

        .distrib-page-container input:focus[b-ava3j2p23s],
        .distrib-page-container select:focus[b-ava3j2p23s] {
            outline-width: 0;
            box-shadow: 0 0 5px #1AA3E8;
        }

    .distrib-page-container table[b-ava3j2p23s] {
        table-layout: fixed;
        width: 100%;
        background-color: #FAFAFA;
    }

        .distrib-page-container table tbody tr:hover[b-ava3j2p23s] {
            border-top: 1px solid #DEDEDE;
            border-bottom: 1px solid #DEDEDE;
            cursor: pointer;
        }

        .distrib-page-container table tr[b-ava3j2p23s] {
            background-color: #FAFAFA;
            vertical-align: top;
        }

        .distrib-page-container table thead[b-ava3j2p23s] {
            position: sticky;
            top: 0;
            background-color: #FAFAFA;
        }

.distrib-sidebar[b-ava3j2p23s] {
    height: 100%;
    width: 200px;
    background-color: #F3F1EE;
    border-radius: 5px;
    padding: 10px;
}

.tab[b-ava3j2p23s] {
    height: 100%;
}

.tab-container[b-ava3j2p23s] {
    border: 2px solid #F3F1EE;
    width: 100%;
    padding: 10px;
    gap: 10px;
}

.distrib-page-container .table-container[b-ava3j2p23s] {
    height: 700px;
    width: 100%;
    overflow-y: scroll;
    border: 1px solid #DEDEDE;
}

.button-container[b-ava3j2p23s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.checkbox-container[b-ava3j2p23s] {
    display: grid;
    grid-template-columns: 150px min-content;
    grid-template-rows: repeat(2, 20px);
    align-items: baseline;
}

.ssy-btn-main[b-ava3j2p23s] {
    width: 160px;
    white-space: nowrap;
}

    .ssy-btn-main.selected[b-ava3j2p23s] {
        background-color: #000061 !important;
    }

.vertical-text[b-ava3j2p23s] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: end;
    vertical-align: baseline;
    width: 60px;
    height: 200px;
}

.break-word[b-ava3j2p23s] {
    overflow-wrap: break-word;
}

.align-right[b-ava3j2p23s] {
    text-align: right;
}

.user-grid[b-ava3j2p23s] {
    display: grid;
    grid-template-rows: 50px repeat(6, minmax(30px, min-content));
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    border: 2px solid #F3F1EE;
}

.user-tab .tab-container[b-ava3j2p23s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.small-icon[b-ava3j2p23s] {
    height: 20px;
}

.distrib-page-container table .icon[b-ava3j2p23s] {
    width: 25px;
    text-align: center;
}

.distrib-page-container table tr.selected[b-ava3j2p23s] {
    background-color: #FF6961;
}

.distrib-page-container table td.remove:hover[b-ava3j2p23s] {
    background-color: #FF6961;
}

.distrib-page-container table td.add:hover[b-ava3j2p23s] {
    background-color: #FF6961;
}

.initial[b-ava3j2p23s] {
    color: #0366d6;
    font-size: 16px;
    text-decoration: underline;
    margin: 0 3px;
    cursor: pointer;
}

.user-row[b-ava3j2p23s] {
    height: 30px;
}

.user-row *[b-ava3j2p23s] {
    vertical-align: middle;
}
/* /Components/Pages/Maintenance/Email/EmailEditor.razor.rz.scp.css */
/*have to explicity set all the h1 rules to avoid override from email's css*/
.h1-override[b-6c2mmk2n9o] {
    text-align: center;
    font-size: 2.5rem;
    font-weight: normal;
    color: black;
    margin: 0 0 10px 0;
    padding: 0;
    line-height: initial;
    vertical-align: initial;
}

h2[b-6c2mmk2n9o] {
    text-align: center;
}

.page-container[b-6c2mmk2n9o] {
    position: relative
}

.select-container[b-6c2mmk2n9o] {
    margin: 1rem auto;
    background-color: #F3F1EE;
    box-shadow: 2px 2px 10px grey;
    padding: 0 10px 10px 10px;
    border-radius: 5px;
    position: relative;
}

.select-container.select-option-container[b-6c2mmk2n9o] {
    height: 230px;
    max-width: 500px;
}

.select-container.email-service-container[b-6c2mmk2n9o],
.select-container.email-service-log-container[b-6c2mmk2n9o] {
    height: 265px;
}

.select-container.email-service-container h2[b-6c2mmk2n9o],
.select-container.email-service-log-container h2[b-6c2mmk2n9o] {
    background: #F3F1EE;
    padding-top: 10px;
    padding-bottom: 0.5rem;
    /*width: 100vw;*/
    top: 0;
    z-index: 2;
    position: sticky;
}

.select-container.email-service-container[b-6c2mmk2n9o] {
    max-width: 850px;
}

.select-container.email-service-container > table[b-6c2mmk2n9o] {
    margin: auto;
}

.select-container.email-service-log-container > table[b-6c2mmk2n9o] {
    width: 100%;
    table-layout: fixed;
}

.select-container.email-service-log-container > table > thead[b-6c2mmk2n9o] {
    position: sticky;
    top: 3rem;
    z-index: 2;
}

.select-container.email-service-log-container > table td[b-6c2mmk2n9o] {
    overflow: hidden;
    /*white-space: nowrap;*/
    text-overflow: ellipsis;
}

/* For screens smaller than 600px */
@media (max-width: 600px) {
    .select-container.select-option[b-6c2mmk2n9o] {
        max-width: 100%; /* Full width on small screens */
        height: auto; /* Auto height on small screens */
    }
}

@media only screen and (max-width: 775px) {
    .not-on-mobile[b-6c2mmk2n9o] {
        display: none;
    }
}

.button-container[b-6c2mmk2n9o] {
    display: flex;
    align-content: center;
    flex-direction: column;
    gap: 10px;
    height: 50%;
}

.select-button:first-child[b-6c2mmk2n9o] {
    margin-top: 25px;
}

.select-button[b-6c2mmk2n9o] {
    width: 50%;
    margin: 0 auto;
}

.id-input[b-6c2mmk2n9o] {
    display: flex;
    justify-content: space-around;
}

.metadata[b-6c2mmk2n9o] {
    position: absolute;
    top: 0;
    right: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.value[b-6c2mmk2n9o] {
    text-align: right;
}

[b-6c2mmk2n9o] .build-container {
    display: grid;
    grid-template-rows: min-content 630px min-content;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    height: 70vh;
}

.build-form-container[b-6c2mmk2n9o] {
    display: flex;
    justify-content: space-around;
    grid-column: 1/3;
}

.page-container input[b-6c2mmk2n9o] {
    width: 200px;
}

.html-box[b-6c2mmk2n9o] {
    position: relative;
    display: grid;
    grid-template-rows: min-content 1fr;
}

.editor[b-6c2mmk2n9o] {
    resize: none;
}

[b-6c2mmk2n9o] .dist-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 1fr;
    gap: 5px;
    height: 70vh;
    justify-items: center;
    padding-top: 10px;
}

.display-container[b-6c2mmk2n9o] {
    padding: 10px;
    border: 1px solid #4F4F4F;
    background: white;
    overflow-y: auto;
    scrollbar-gutter: stable;
    width: 100%;
}

.review-container[b-6c2mmk2n9o] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 700px 1fr;
    gap: 10px;
    height: 70vh;
}

.review-info-container[b-6c2mmk2n9o] {
    display: grid;
    margin-top: 17px;
    grid-template-columns: 125px 1fr;
    grid-template-rows: repeat(6, min-content);
}

.review-info-container > *[b-6c2mmk2n9o] {
    margin: 10px 0;
    padding: 5px;
}

.review-info-container > *:nth-child(even)[b-6c2mmk2n9o] {
    border: transparent;
    background-color: #F3F1EE;
    border-radius: 5px;
}

.copy-html[b-6c2mmk2n9o] {
    position: absolute;
    top: 33px;
    right: 7px;
}

.arrow-container[b-6c2mmk2n9o] {
    display: flex;
    justify-content: space-between;
    grid-column: 1/3;
    align-items: end;
    width: 100%;
}

.form-button:hover[b-6c2mmk2n9o] {
    cursor: pointer;
    background-color: #F3F1EE;
    border-radius: 5px;
}

.item-row .form-button:hover[b-6c2mmk2n9o] {
    background-color: #FE908F;
}

.clear-button-style[b-6c2mmk2n9o],
.clear-button-style:focus[b-6c2mmk2n9o] {
    border: none;
    background: none;
    outline: none;
}

.height-fit-content[b-6c2mmk2n9o] {
    height: fit-content;
}

.small-button[b-6c2mmk2n9o] {
    height: 20px;
}

.item-row[b-6c2mmk2n9o] {
    border-bottom: 1px solid #F3F1EE;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
}

.item-row:hover[b-6c2mmk2n9o] {
    background-color: #F3F1EE;
    border-radius: 5px;
}

.warning[b-6c2mmk2n9o] {
    display: none;
    background-color: #FE908F;
    padding: 0 6px;
}

input[type='file'][b-6c2mmk2n9o] {
    color: transparent;
}

#input-file-name[b-6c2mmk2n9o] {
    height: 20px;
}

#file-name[b-6c2mmk2n9o] {
    cursor: pointer;
}

.send[b-6c2mmk2n9o] {
    position: absolute;
    top: 3px;
    right: 185px;
}

.remove-all[b-6c2mmk2n9o] {
    grid-column: 2;
    justify-self: end;
    background-color: #F3F1EE;
    height: max-content;
    padding: 5px;
    border-radius: 5px;
}

.remove-all:hover[b-6c2mmk2n9o] {
    background-color: #FE908F;
    text-decoration: underline;
    cursor: pointer;
}

.popup[b-6c2mmk2n9o] {
    height: 250px;
    width: 500px;
    padding: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

.popup .button-container[b-6c2mmk2n9o] {
    display: flex;
    justify-content: end;
    gap: 10px;
    flex-direction: row;
    margin-top: 10px;
    height: 33px;
}

.popup input[b-6c2mmk2n9o] {
    width: initial;
}

.email-table[b-6c2mmk2n9o] {
    width: 100%;
    border-collapse: collapse;
}

.email-table th[b-6c2mmk2n9o], .email-table td[b-6c2mmk2n9o] {
    border: 1px solid #ddd;
    padding: 8px;
}

.email-table th[b-6c2mmk2n9o] {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #0079c1;
    color: white;
}
/* /Components/Pages/Maintenance/MaintenanceLandingPage.razor.rz.scp.css */
/* MaintenanceLandingPage — log-file links section. All classes prefixed ml- (MaintenanceLanding). */

/* ---- Links / Debug tools tab bar ---- */
.ml-tabs[b-fsi38bte3s] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e1e5ef;
    margin-bottom: 1rem;
}

.ml-tab[b-fsi38bte3s] {
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 18px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    margin-bottom: -2px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ml-tab:hover:not(.ml-tab-active)[b-fsi38bte3s] {
    background: #f7f9fc;
    color: #000061;
}

.ml-tab-active[b-fsi38bte3s] {
    color: #000061;
    background: #fff;
    border-color: #e1e5ef;
    border-bottom: 2px solid #009DC9;
}

/* ---- Cache-size panel ---- */
/* One group heading per feature, its rows indented under it, then an overall total. Twenty-odd
   rows read as a wall of text without the grouping. */
.ml-cache-group[b-fsi38bte3s] {
    margin: 0.5rem 0 0.15rem;
    padding: 0 0.4rem;
    font-size: 0.85rem;
    color: #000061;
    border-bottom: 1px solid #e1e5ef;
}

.ml-cache-group span[b-fsi38bte3s] {
    color: #6b7280;
    font-weight: 400;
}

.ml-cache-row[b-fsi38bte3s] {
    margin: 0;
    padding: 0.1rem 0.4rem 0.1rem 1.1rem;
    font-size: 0.85rem;
}

.ml-cache-total[b-fsi38bte3s] {
    margin: 0.4rem 0 0.2rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    border-top: 2px solid #009DC9;
}

.ml-log-host[b-fsi38bte3s] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
}

.ml-log-host-note[b-fsi38bte3s] {
    color: #6b7280;
    margin-left: 0.4rem;
}

/* ---- single-line date stepper ( ‹  2026-06-23  › ) ---- */
.ml-log-datebar[b-fsi38bte3s] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 14px;
    max-width: 720px;
}

.ml-date-step[b-fsi38bte3s] {
    flex: 0 0 auto;
    width: 40px;
    border: 1px solid #c3cad8;
    background: #fff;
    color: #000061;
    font-size: 20px;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ml-date-step:hover:not(:disabled)[b-fsi38bte3s] {
    background: #000061;
    border-color: #000061;
    color: #fff;
}

.ml-date-step:disabled[b-fsi38bte3s] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ml-date-input[b-fsi38bte3s] {
    flex: 1 1 auto;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #000061;
    border: 1px solid #c3cad8;
    border-radius: 8px;
    padding: 6px 10px;
    background: #fff;
}

.ml-date-input:focus[b-fsi38bte3s] {
    outline: none;
    border-color: #009DC9;
    box-shadow: 0 0 0 3px rgba(0, 157, 201, 0.18);
}

.ml-log-links[b-fsi38bte3s] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 720px;
}

.ml-log-group[b-fsi38bte3s] {
    margin-top: 10px;
    margin-bottom: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #000061;
}

.ml-log-group:first-child[b-fsi38bte3s] {
    margin-top: 0;
}

.ml-log-link[b-fsi38bte3s] {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border: 1px solid #e1e5ef;
    border-left: 3px solid #009DC9;
    border-radius: 8px;
    background: #f7f9fc;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ml-log-link:hover[b-fsi38bte3s] {
    background: #eef6fb;
    transform: translateX(2px);
    box-shadow: 0 4px 14px rgba(0, 157, 201, 0.18);
}

.ml-log-link .ml-log-name[b-fsi38bte3s] {
    font-weight: 600;
    color: #000061;
    font-size: 0.9rem;
}

.ml-log-link .ml-log-sub[b-fsi38bte3s] {
    font-size: 0.72rem;
    color: #6b7280;
    font-family: 'Courier New', monospace;
    margin-top: 1px;
}

.ml-log-tip[b-fsi38bte3s] {
    margin: 4px 0 2px;
    font-size: 0.72rem;
    color: #6b7280;
    line-height: 1.35;
}

.ml-log-tip code[b-fsi38bte3s] {
    background: #eef1f6;
    padding: 0 4px;
    border-radius: 4px;
}

.ml-log-warn[b-fsi38bte3s] {
    margin: 6px 0 2px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #8a5a00;
    background: #fff6e6;
    border-left: 3px solid #F7A506;
    border-radius: 6px;
    padding: 6px 10px;
}

.ml-log-warn code[b-fsi38bte3s] {
    background: #fdeccd;
    padding: 0 4px;
    border-radius: 4px;
}

.ml-log-paste[b-fsi38bte3s] {
    margin-top: 1.25rem;
    max-width: 720px;
}

.ml-log-paste-label[b-fsi38bte3s] {
    display: block;
    font-size: 0.8rem;
    color: #374151;
    margin-bottom: 6px;
}

.ml-log-paste-box[b-fsi38bte3s] {
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 8px 10px;
    border: 1px solid #cbd2e0;
    border-radius: 8px;
    resize: vertical;
}

.ml-log-paste-btn[b-fsi38bte3s] {
    margin-top: 8px;
}

.ml-log-pasted[b-fsi38bte3s] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e1e5ef;
    border-radius: 8px;
}

.ml-log-pasted li[b-fsi38bte3s] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 6px 12px;
    border-bottom: 1px solid #eef1f6;
}

.ml-log-pasted li:last-child[b-fsi38bte3s] {
    border-bottom: none;
}

.ml-log-pasted li:nth-child(odd)[b-fsi38bte3s] {
    background: #f7f9fc;
}

.ml-log-pasted a[b-fsi38bte3s] {
    color: #009DC9;
    text-decoration: none;
    font-size: 0.82rem;
    word-break: break-all;
}

.ml-log-pasted a:hover[b-fsi38bte3s] {
    text-decoration: underline;
}

.ml-log-mtime[b-fsi38bte3s] {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/BasicView/Comps/GkPackages.razor.rz.scp.css */
body[b-7bzfprh825] {
}
/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/BasicView/Comps/GkRequests.razor.rz.scp.css */
.gk-section-btn[b-ak4rehov24] {
    cursor: pointer;
    margin-left: 1%;
    border-radius: 16px;
    padding: 8px 0;
    width: 25%;
    text-align: center;
    font-size: 1.05em;
    background-color: #F0F0F0;
    border: 1px solid lightgray;
    transition: background-color 0.4s ease;
    user-select: none;
}
    .gk-section-btn:hover[b-ak4rehov24] {
        background-color: #C2E7F2;
        color: black;
    }

.selected[b-ak4rehov24] {
    background-color: #000061 !important;
    color: white !important;
    border: 1px solid navy !important;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/BasicView/Comps/GkUserInfo.razor.rz.scp.css */
body[b-kzxtk8obvg] {
}
/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/BasicView/GkBasicView.razor.rz.scp.css */
/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/Comps/GkAddUserMob.razor.rz.scp.css */
.gk-action-btn[b-i84ppycbnh] {
    height: 25px;
    width: 25px;
    margin: 5% 0;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/Comps/GkFullView.razor.rz.scp.css */
info-box[b-87xwqr9myg] {
    height: 90%;
    border: 1px solid #000061;
    border-radius: 5px;
    padding: 1%;
    margin: 1%;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/Comps/MenuDisplay.razor.rz.scp.css */
/* styles of menu items when editing */
.not-permd[b-hlcejfsiqp] {
    opacity: 0.6;
    cursor: pointer;
}

.permd[b-hlcejfsiqp] {
    cursor: pointer;
}

.child-permd[b-hlcejfsiqp] {
    color: #3030a9;
    /*    font-style: italic;*/
    pointer-events: none;
}
.always-permd[b-hlcejfsiqp] {
    color: darkgreen;
    font-weight: 500;
    pointer-events: none;
}


/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/Comps/RoleGroupMng.razor.rz.scp.css */
/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/Gatekeeper.razor.rz.scp.css */
.gk-main[b-5u83hzwn41] {
    display: flex;
    flex-direction: column;
    height: 88vh;
    width: 98%;
    margin: 0.5% 1%;
}

.info-box[b-5u83hzwn41] {
    height: 90%;
    border: 1px solid #000061;
    border-radius: 5px;
    padding: 1%;
    margin: 1%;
}
.gk-web-view[b-5u83hzwn41] {
    display: flex !important;
}

.gk-mob-view[b-5u83hzwn41] {
    display: none !important;
}

@media only screen and (max-width: 780px) {
    .gk-web-view[b-5u83hzwn41] {
        display: none !important;
    }

    .gk-mob-view[b-5u83hzwn41] {
        display: flex !important;
    }
}

.gk-main[b-5u83hzwn41]  .custom-checkbox-container {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .gk-main[b-5u83hzwn41]  .custom-checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    .gk-main[b-5u83hzwn41]  .custom-checkbox-container .custom-checkbox-checkmark {
        height: 15px;
        width: 15px;
        border-radius: 3px;
        background-color: #E7EEF2;
    }

    /* On mouse-over, add a grey background color */
    .gk-main[b-5u83hzwn41]  .custom-checkbox-container:hover input ~ .custom-checkbox-checkmark {
        background-color: #CEDCE4;
    }

    /* When the checkbox is checked, add a blue background */
    .gk-main[b-5u83hzwn41]  .custom-checkbox-container input:checked ~ .custom-checkbox-checkmark {
        background-color: #000061;
    }
/* /Components/Pages/Maintenance/MenuAndPermissions/MenuManager.razor.rz.scp.css */
.page-cont[b-puwo639tj7] {
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    font-size: 1.2rem;
}

.contr-cont[b-puwo639tj7] {
    width: 9%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.confirm-changes-modal[b-puwo639tj7] {
    z-index: 10;
    position: fixed;
    background-color: white;
    border: 2px solid #000061;
    border-radius: 10px;
    width: fit-content;
    max-width: 25%;
    top: 33.5%;
    left: 20.5%;
    transform: translate(-50%, -50%);
    margin-top: 1%;
    padding: 2%;
    display: flex;
    flex-direction: column;
}

.changes-list[b-puwo639tj7] {
    margin: 5% 0 5% 0;
    height: 30vh;
    width: 17vw;
    overflow-y: scroll;
    border: 2px solid navy;
    border-radius: 10px;
    padding: 3%;
}

.edit-btn[b-puwo639tj7] {
    margin-top: 10%;
    height: 4vh;
    width: 80%;
    border-radius: 15px;
    background-color: #000061;
    border: 2px solid #000061;
    color: white;
}

.edit-btn:hover[b-puwo639tj7] {
    background-color: white;
    color: #000061;
}

.no-changes-btn[b-puwo639tj7] {
    opacity: 0.4;
    margin-top: 10%;
    height: 4vh;
    width: 80%;
    border-radius: 15px;
    background-color: #000061;
    border: 2px solid #000061;
    color: white;
    cursor: default;
    text-align: center;
    align-content: center;
}

.menu-page-cont[b-puwo639tj7] {
    border: 2px solid #000061;
    width: 90%;
}

.undo-btn[b-puwo639tj7] {
    margin-left: 10%;
    background: white !important;
    border: 1px solid lightgray !important;
    border-radius: 10px !important;
}

.undo-btn:hover[b-puwo639tj7] {
    background-color: gray !important;
    color: white;
}

.changes-btn[b-puwo639tj7] {
    background: #000061 !important;
    border: 1px solid #000061 !important;
    border-radius: 10px !important;
    color: white;
}

.changes-btn:hover[b-puwo639tj7] {
    background-color: white !important;
    color: black;
}

.headers-cont[b-puwo639tj7] {
    display: flex;
    flex-direction: row;
    justify-content: right;
    background-color: #000061;
    padding: 0.5% 0 0.5% 0;
    height: 5vh;
}

.headers-cont .headers-cont-container[b-puwo639tj7]{
    align-content: center;
    border-right: 2px solid white;
}
.headers-cont .headers-cont-container:last-child[b-puwo639tj7]{
    border-right: none;
}

.header-btn[b-puwo639tj7] {
    align-content: center;
    text-align: center;
    color: white;
    font-size: 1.2rem;
    margin: 0 1rem;
}

.header-btn:hover[b-puwo639tj7] {
    cursor: pointer;
    border-bottom: 1px solid white;
    transition: all 1s ease-in-out;
}

.hover-menu-cont[b-puwo639tj7] {
    z-index: 10;
    display: flex;
    flex-direction: column;
    position: absolute;
    background: white;
    border: 2px solid #000061;
    border-radius: 20px;
    padding: 0.5%;
    height: 30vh;
    width: 18vw;
    overflow-y: scroll;
}

.hover-menu-cont button[b-puwo639tj7] {
    width: 99%;
    border: none;
    background: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}

.hover-menu-cont button:hover[b-puwo639tj7] {
    background-color: #F7F6F6;
}

.menu-items-cont[b-puwo639tj7] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 82vh;
}

.menu-cont[b-puwo639tj7] {
    display: flex;
    flex-direction: column;
    margin: 0 0.5% 0 0.5%;
    padding-bottom: 0.5%;
    padding-right: 0.5%;
    width: 16vw;
    border-right: 2px solid #000061;
}

.menu-cont button[b-puwo639tj7] {
    width: 99%;
    border: none;
    background: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}

.menu-cont button:hover[b-puwo639tj7] {
    background-color: #F7F6F6;
}

.add-menu-cont[b-puwo639tj7] {
}

.add-menu-cont button[b-puwo639tj7] {
    border-radius: 20px;
    width: 100%;
    margin-bottom: 2%;
    background-color: #000061;
    color: #FCFCFC;
    border: 2px solid #000061;
}

.add-menu-cont button:hover[b-puwo639tj7] {
    color: #000061;
    background-color: white;
}

.add-menu-selections[b-puwo639tj7] {
    background-color: navy;
    border-radius: 5px;
    padding: 2% 3% 3% 3%;
    color: white;
}

.add-menu-selections button[b-puwo639tj7] {
    margin-top: 5%;
    background-color: #EAEAEA;
    color: black;
}

.unused-cont[b-puwo639tj7] {
    display: flex;
    flex-direction: column;
    width: 20vw;
    background-color: #000079;
    border-radius: 15px;
    margin: 1%;
    padding: 1%;
    overflow: hidden;
}

.unused-table[b-puwo639tj7] {
    height: 31vh;
    overflow-y: auto;
    margin-top: 1vh;
    background-color: white;
    border: 2px solid #000061;
    /* border-radius: 8px; */
    padding: 1%;
}

.unused-table button[b-puwo639tj7] {
    width: 100%;
    border: none;
    background: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}

.unused-table button:hover[b-puwo639tj7] {
    background: lightgray;
    border-radius: 5px;
}

.selected-cont[b-puwo639tj7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    border-left: 2px solid #000061;
    width: 30vw;
    padding-top: 1%;
    padding-bottom: 2%;
}

.selected-item-cont[b-puwo639tj7] {
    width: 23vw;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/RoleRouteAccess.razor.rz.scp.css */
.first-level-container[b-5iujuotzv5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.first-level-container > button[b-5iujuotzv5] {
    width: 140px;
}

.second-level-container[b-5iujuotzv5] {
    padding-top: 0.5rem;
    display: flex;
    justify-content: space-between;
}
.second-level-container .second-level-filters[b-5iujuotzv5] {
    display: flex;
    align-items: center;
}
.second-level-container .second-level-filters.order-div-1[b-5iujuotzv5] {
    width: 100%;
    justify-content: center;
}
.second-level-container .second-level-filters > div[b-5iujuotzv5] {
    min-width: 200px;
}
.second-level-container .second-level-filters > div:not(:last-child)[b-5iujuotzv5] {
    margin-right: 0.5rem;
}
.order-div-0[b-5iujuotzv5] {
    order: 0;
}
.order-div-1[b-5iujuotzv5] {
    order: 1;
}
.order-div-2[b-5iujuotzv5] {
    order: 2;
}

.content-container[b-5iujuotzv5] {
    padding-top: 0.5rem;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1fr 2fr;
}
.content-container > .table-container[b-5iujuotzv5]{
    height: calc(100vh - 250px);
    border: 1px solid #DEDEDE;
}
.content-container > .table-container:not(:first-child):not(:last-child)[b-5iujuotzv5] {
    border-left: none;
    border-right: none;
    scrollbar-gutter: stable both-edges;
}

.content-container > .table-container table[b-5iujuotzv5] {
    table-layout: fixed;
    width: 100%;
}
.content-container > .table-container table thead[b-5iujuotzv5] {
    position: sticky;
    top: 0;
    background-color: #FAFAFA;
    z-index: 2;
}
.content-container > .table-container table tbody tr[b-5iujuotzv5] {
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
}
.content-container > .table-container table tbody tr:hover[b-5iujuotzv5] {
    background: #DEDEDE;
    cursor: pointer;
}
.content-container > .table-container table tr[b-5iujuotzv5] {
    background-color: #FAFAFA;
    vertical-align: top;
}
.table-container table tr.selected[b-5iujuotzv5] {
    background-color: #DEDEDE;
}
.table-container table .break-word[b-5iujuotzv5] {
    overflow-wrap: break-word;
}
.table-container table .icon[b-5iujuotzv5] {
    width: 35px;
    text-align: center;
    position: relative;
}
.table-container.order-div-0 table .icon[b-5iujuotzv5] {
    display: none;
}
.table-container table .icon[b-5iujuotzv5]  svg {
    vertical-align: middle;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.table-container table .group[b-5iujuotzv5] {
    width: 100px;
}
.table-container table td.remove:hover[b-5iujuotzv5] {
    background-color: #FF6961;
}
.table-container table td.add:hover[b-5iujuotzv5] {
    background-color: #8CD47E;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/UrlComp/UrlCompManager_00.razor.rz.scp.css */
.url-comp-manager[b-4dq6hwrio0]  .title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.url-comp-manager[b-4dq6hwrio0]  .title-container > .title-outer-section {
    width: 500px;
}

.url-comp-manager[b-4dq6hwrio0]  .title-container > .title-outer-section.title-explaination {
    display: inline-flex;
    justify-content: end;
}

.url-comp-manager[b-4dq6hwrio0]  .tabs-container {
    border-top: 1px solid #DEDEDE;
    padding-top: 0.5rem;
    margin: 0.5rem 0;
}

.url-comp-manager[b-4dq6hwrio0]  .first-level-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.url-comp-manager[b-4dq6hwrio0]  .first-level-container > div {
    display: inline-flex;
    align-items: center;
}
.url-comp-manager[b-4dq6hwrio0]  .first-level-container > div > button {
    width: 140px;
}
.url-comp-manager[b-4dq6hwrio0]  .first-level-container > div > button:not(:last-child) {
    margin-right: 0.5rem;
}

.url-comp-manager[b-4dq6hwrio0]  .second-level-container {
    padding-top: 0.5rem;
    display: flex;
    justify-content: space-between;
}
.url-comp-manager[b-4dq6hwrio0]  .second-level-container .second-level-filters {
    display: flex;
    align-items: center;
}
.url-comp-manager[b-4dq6hwrio0]  .second-level-container .second-level-filters > div {
    margin-right: 0.5rem;
    min-width: 200px;
}
.url-comp-manager[b-4dq6hwrio0]  .order-div-0 {
    order: 0;
}
.url-comp-manager[b-4dq6hwrio0]  .order-div-1 {
    order: 1;
}
.url-comp-manager[b-4dq6hwrio0]  .order-div-2 {
    order: 2;
}

.url-comp-manager[b-4dq6hwrio0]  .content-container {
    padding-top: 0.5rem;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1fr 2fr;
}
.url-comp-manager[b-4dq6hwrio0]  .content-container > .table-container{
    height: calc(100vh - 250px);
    border: 1px solid #DEDEDE;
}
.url-comp-manager[b-4dq6hwrio0]  .content-container > .table-container:not(:first-child):not(:last-child) {
    border-left: none;
    border-right: none;
    scrollbar-gutter: stable both-edges;
}

.url-comp-manager[b-4dq6hwrio0]  .content-container > .table-container table {
    table-layout: fixed;
    width: 100%;
}

.url-comp-manager[b-4dq6hwrio0]  .content-container > .table-container table thead {
    position: sticky;
    top: 0;
    background-color: #FAFAFA;
    z-index: 2;
}

.url-comp-manager[b-4dq6hwrio0]  .content-container > .table-container table tbody tr {
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
}
.url-comp-manager[b-4dq6hwrio0]  .content-container > .table-container table tbody tr:hover {
    background: #DEDEDE;
    cursor: pointer;
}

.url-comp-manager[b-4dq6hwrio0]  .content-container > .table-container table tr {
    background-color: #FAFAFA;
    vertical-align: top;
}

.url-comp-manager[b-4dq6hwrio0]  .table-container table tr.selected {
    background-color: #DEDEDE;
}

.url-comp-manager[b-4dq6hwrio0]  .table-container table .break-word {
    overflow-wrap: break-word;
}

.url-comp-manager[b-4dq6hwrio0]  .table-container table .icon {
    width: 35px;
    text-align: center;
    position: relative;
}

.url-comp-manager[b-4dq6hwrio0]  .table-container.order-div-0 table .icon {
    display: none;
}

.url-comp-manager[b-4dq6hwrio0]  .table-container table .icon ::deep svg {
    vertical-align: middle;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.url-comp-manager[b-4dq6hwrio0]  .table-container table .group {
    width: 100px;
}

.url-comp-manager[b-4dq6hwrio0]  .table-container table td.remove:hover {
    background-color: #FF6961;
}

.url-comp-manager[b-4dq6hwrio0]  .table-container table td.add:hover {
    background-color: #8CD47E;
}

/* fix form styling */
.url-comp-manager[b-4dq6hwrio0]  .form-floating > .autocomplete > .input-group {
    margin-left: 0;
}

.url-comp-manager[b-4dq6hwrio0]  .form-floating > .autocomplete > .input-group > input.form-control {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
    padding-left: .75rem;
    /* --bs-border-width: 1px; */
    height: calc(3.5rem + calc(1px * 2));
    min-height: calc(3.5rem + calc(1px * 2));
    line-height: 1.25;
}

.url-comp-manager[b-4dq6hwrio0]  .form-floating > .autocomplete:has(.input-group > .form-control:not(:placeholder-shown))~label{
    /* --bs-body-color-rgb: 33, 37, 41; */
    color: rgba(33, 37, 41, .65);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.url-comp-manager[b-4dq6hwrio0]  .form-floating > .autocomplete > .input-group > button {
    top: 50% !important;
    transform: translateX(-5%) translateY(-50%);
    background-color: unset;
}

.url-comp-manager[b-4dq6hwrio0]  .form-floating > .autocomplete > .input-group > button:hover {
    color: #DB303A;
}

/* fix footer */
.url-comp-manager[b-4dq6hwrio0]  .modal-footer:has(> button):has(.d-flex) {
    justify-content: space-between;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/UrlComp/UrlCompManager_40_DefaultUrlRole.razor.rz.scp.css */
.edit[b-y8ud8le6k4] {
    text-align: center;
    background: none;
    color: inherit;
    border: none;
    padding: 0.2rem;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.editIcon1[b-y8ud8le6k4], .arrowIcon1[b-y8ud8le6k4] {
    vertical-align: middle;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/UserRoles/UserRoles.razor.rz.scp.css */
/* =============================== */
/*             TAB LIST            */
/* =============================== */
.user-roles-manager[b-jala9zzcpo]  .title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #DEDEDE;
    margin-bottom: 0.5rem;
}
.user-roles-manager[b-jala9zzcpo]  .title-container > .title-outer-section {
    width: 550px;
}

.user-roles-manager .tab-container[b-jala9zzcpo] {
    padding: 0 0.25rem;
}

/* =============================== */
/*  Grouped-role (package) badges   */
/* =============================== */
.user-roles-manager[b-jala9zzcpo]  .ur-package-badge,
.user-roles-manager[b-jala9zzcpo]  .ur-viagroup-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 0.7rem;
    line-height: 1.4;
    color: #ffffff;
    vertical-align: middle;
    white-space: nowrap;
}
.user-roles-manager[b-jala9zzcpo]  .ur-package-badge {
    background-color: #000061; /* navy - a package the user is a member of */
    font-weight: 600;
}
.user-roles-manager[b-jala9zzcpo]  .ur-viagroup-badge {
    background-color: #009CDC; /* blue - role granted via a package (matches Gatekeeper) */
    font-weight: 500;
}

/* =============================== */
/*   General                        */
/* =============================== */
.user-roles-manager[b-jala9zzcpo]  input[type="search"],
.user-roles-manager[b-jala9zzcpo]  input[type="text"],
.user-roles-manager[b-jala9zzcpo]  input[type="number"],
.user-roles-manager[b-jala9zzcpo]  input[type="select"],
.user-roles-manager[b-jala9zzcpo]  select {
    border-radius: 10px;
    border: 1px solid #1AA3E8;
    height: 25px;
    padding: 0 5px;
    max-width: 200px;
    background: white;
}

.user-roles-manager[b-jala9zzcpo]  input:focus,
.user-roles-manager[b-jala9zzcpo]  select:focus {
    outline-width: 0;
    box-shadow: 0 0 5px #1AA3E8;
}

/* stupid lastpass */
.user-roles-manager[b-jala9zzcpo]  div[data-lastpass-icon-root]{
    display: none !important;
}

.is-ssy[b-jala9zzcpo], .red[b-jala9zzcpo] {
    padding: 0 5px;
    font-weight: bold;
    color: black;
}

.is-ssy[b-jala9zzcpo] {
    background-color: #8CD47E;
}

.red[b-jala9zzcpo] {
    background-color: #FF6961;
}

.small-icon[b-jala9zzcpo] {
    height: 20px;
}
.user-roles-manager[b-jala9zzcpo]  .icon {
    text-align: center;
}
.break-word[b-jala9zzcpo] {
    overflow-wrap: break-word;
}

[b-jala9zzcpo] .form-check-input[data-ssy-disabled="true"],
[b-jala9zzcpo] input.form-control[data-ssy-disabled="true"] {
    pointer-events: none;
}

/* =============================== */
/*   Layout                         */
/* =============================== */
.user-roles-manager .first-level-container[b-jala9zzcpo],
.user-roles-manager .second-level-container[b-jala9zzcpo] {
    height: 40px;
    display: grid;
}

.user-roles-manager .users-tab .first-level-container[b-jala9zzcpo],
.user-roles-manager .users-tab .second-level-container[b-jala9zzcpo] {
    grid-template-columns: 2fr 2fr 3fr;
}
.user-roles-manager .roles-tab .first-level-container[b-jala9zzcpo],
.user-roles-manager .roles-tab .second-level-container[b-jala9zzcpo] {
    grid-template-columns: 3fr 2fr 2fr;
}

.user-roles-manager .departmental-tab .first-level-container[b-jala9zzcpo],
.user-roles-manager .departmental-tab .second-level-container[b-jala9zzcpo] {
    grid-template-columns: 2fr 3fr 2fr;
}

.user-roles-manager .claims-tab .first-level-container[b-jala9zzcpo],
.user-roles-manager .claims-tab .second-level-container[b-jala9zzcpo] {
    grid-template-columns: 2fr 5fr;
}

.user-roles-manager .first-level-container .user-title-container[b-jala9zzcpo] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-roles-manager .first-level-container .checkbox-stack-container[b-jala9zzcpo],
.user-roles-manager .second-level-container .checkbox-stack-container[b-jala9zzcpo]{
    display: flex;
    flex-direction: column;
    align-items: start;
}

.user-roles-manager .first-level-container .actions-container[b-jala9zzcpo], 
.user-roles-manager .second-level-container .actions-container[b-jala9zzcpo]
{
    display: flex;
    justify-self: flex-start;
    justify-content: center;
    align-items: center;
    margin: 0;
}
.user-roles-manager .first-level-container .actions-container figcaption[b-jala9zzcpo],
.user-roles-manager .second-level-container .actions-container figcaption[b-jala9zzcpo] {
    font-weight: bold;
    font-size: 1.1rem;
}
.user-roles-manager .first-level-container .actions-container ul[b-jala9zzcpo],
.user-roles-manager .second-level-container .actions-container ul[b-jala9zzcpo] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.user-roles-manager .first-level-container .actions-container ul li[b-jala9zzcpo],
.user-roles-manager .second-level-container .actions-container ul li[b-jala9zzcpo] {
    padding-left: 5px;
}

.user-roles-manager .second-level-container .filters-container[b-jala9zzcpo] {
    display: flex;
    align-items: center;
    gap: 5px;
}
.user-roles-manager .second-level-container .filters-container:last-child[b-jala9zzcpo] {
    justify-content: flex-end;
}

.user-roles-manager .departmental-tab .second-level-container .selected-container[b-jala9zzcpo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =============================== */
/*  Content containers              */
/* =============================== */
.user-roles-manager .users-tab .content-container[b-jala9zzcpo],
.user-roles-manager .roles-tab .content-container[b-jala9zzcpo],
.user-roles-manager .claims-tab .content-container[b-jala9zzcpo]
{
    display: grid;
}

.user-roles-manager .users-tab .content-container[b-jala9zzcpo] {
    grid-template-columns: 2fr 2fr 3fr;
}
.user-roles-manager .roles-tab .content-container[b-jala9zzcpo] {
    grid-template-columns: 3fr 2fr 2fr;
}
.user-roles-manager .claims-tab .content-container[b-jala9zzcpo] {
    grid-template-columns: 2fr 5fr;
}

.user-roles-manager .table-container[b-jala9zzcpo] {
    height: calc(100vh - 200px);
    border: 1px solid #DEDEDE;
    position: relative;
}

.user-roles-manager .content-container .table-container:nth-child(2)[b-jala9zzcpo] {
    border-left: none;
    border-right: none;
    scrollbar-gutter: stable both-edges;
}

/* =============================== */
/*  Tables  Styling                */
/* =============================== */
.user-roles-manager .table-caption[b-jala9zzcpo] {
    font-weight: normal;
    background-color: #000061;
    color: white;
}

.user-roles-manager table[b-jala9zzcpo] {
    table-layout: fixed;
    width: 100%;
    background-color: #FAFAFA;
}

.user-roles-manager table thead[b-jala9zzcpo] {
    position: sticky;
    top: 0;
    background-color: #FAFAFA;
}

.user-roles-manager table tr:not(.red)[b-jala9zzcpo] {
    background-color: #FAFAFA;
    vertical-align: top;
}

.user-roles-manager[b-jala9zzcpo]  table.quickgrid[theme=ssy-table-dw] tbody tr:has(span.selected) {
    background-color: #DEDEDE;
    font-weight: bold;
}

.user-roles-manager[b-jala9zzcpo]  table tbody tr:hover {
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
}
.user-roles-manager .content-container .table-container:first-child[b-jala9zzcpo]  table tbody tr:hover td,
.user-roles-manager .content-container .table-container:not(:first-child)[b-jala9zzcpo]  table tbody td:has(.icon):hover {
    cursor: pointer;
}

/* Row action buttons (pencil + cross) in "Selected User's Roles".
   The cell no longer floods with colour on hover - each button tints on its own. */
.user-roles-manager[b-jala9zzcpo]  .ur-row-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: flex-start;
}

.user-roles-manager[b-jala9zzcpo]  .ur-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: unset;
    border-radius: 4px;
    background: unset;
    cursor: pointer;
    transition: background-color .12s ease-in-out;
}

.user-roles-manager[b-jala9zzcpo]  .ur-icon-remove:hover {
    background-color: #ffd9d6;
}

.user-roles-manager[b-jala9zzcpo]  .ur-icon-edit:hover {
    background-color: #ddebf8;
}

.user-roles-manager[b-jala9zzcpo]  table .remove:hover {
    background-color: #FF6961;
}

.user-roles-manager[b-jala9zzcpo]  table .add:hover {
    background-color: #8CD47E;
}

.user-roles-manager[b-jala9zzcpo]  table .edit:hover
{
    background-color: #F7A506;
}

.user-roles-manager[b-jala9zzcpo]  table[theme="ssy-table-dw"] tr th > .col-header-content > span,
.user-roles-manager[b-jala9zzcpo]  table[theme="ssy-table-dw"] tr td > span:not(.cover-area) {
    width: 100%;
    height: 100%;
    display: inline-block;
}

/* force names to be correct width important for virtualization */
.user-roles-manager .departmental-tab[b-jala9zzcpo]  table[theme="ssy-table-dw"] tr td > span.departmental-name {
    width: 250px;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
}

/* custom sticky table */
.user-roles-manager .departmental-tab[b-jala9zzcpo]  table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.user-roles-manager .departmental-tab[b-jala9zzcpo]  table .sticky-col {
    position: sticky;
    left: 252px;
    width: 252px;
    z-index: 1;
    background: inherit;
}

.user-roles-manager .departmental-tab[b-jala9zzcpo]  table thead .sticky-col {
    z-index: 3;
    background: #000061;
}

.user-roles-manager .departmental-tab[b-jala9zzcpo]  table .sticky-col:first-child {
    left: 0;
}

.user-roles-manager .departmental-tab[b-jala9zzcpo]  th button.col-title{
    border: none;
    background: none;
    position: relative;
    cursor: pointer;
}
.user-roles-manager .users-tab[b-jala9zzcpo]  th .col-header-content,
.user-roles-manager .users-tab[b-jala9zzcpo]  th .col-header-content .col-title,
.user-roles-manager .roles-tab[b-jala9zzcpo]  th .col-header-content,
.user-roles-manager .roles-tab[b-jala9zzcpo]  th .col-header-content .col-title,
.user-roles-manager .departmental-tab[b-jala9zzcpo]  th .col-header-content,
.user-roles-manager .departmental-tab[b-jala9zzcpo]  th .col-header-content .col-title,
.user-roles-manager .claims-tab[b-jala9zzcpo]  th .col-header-content,
.user-roles-manager .claims-tab[b-jala9zzcpo]  th .col-header-content .col-title {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.user-roles-manager .users-tab[b-jala9zzcpo]  th .col-header-content,
.user-roles-manager .users-tab[b-jala9zzcpo]  th .col-header-content .col-title,
.user-roles-manager .roles-tab[b-jala9zzcpo]  th .col-header-content,
.user-roles-manager .roles-tab[b-jala9zzcpo]  th .col-header-content .col-title,
.user-roles-manager .claims-tab[b-jala9zzcpo]  th .col-header-content,
.user-roles-manager .claims-tab[b-jala9zzcpo]  th .col-header-content .col-title{
    justify-content: flex-start;
}

.user-roles-manager .departmental-tab[b-jala9zzcpo]  th .col-header-content,
.user-roles-manager .departmental-tab[b-jala9zzcpo]  th .col-header-content .col-title {
    height: 150px;
    width: 100%;
    align-items: end;
}

.user-roles-manager .users-tab[b-jala9zzcpo]  th .col-header-content .col-title .sort-indicator,
.user-roles-manager .roles-tab[b-jala9zzcpo]  th .col-header-content .col-title .sort-indicator,
.user-roles-manager .claims-tab[b-jala9zzcpo]  th .col-header-content .col-title .sort-indicator,
.user-roles-manager .departmental-tab[b-jala9zzcpo]  th:not(.department-vertical-text) .col-header-content .col-title .sort-indicator {
    align-self: end;
}

.user-roles-manager .departmental-tab[b-jala9zzcpo]  th.department-vertical-text .col-header-content .col-title {
    flex-direction: column;
    justify-content: flex-end;
}

/* force names to be correct width, and vertical. important for virtualization */
.user-roles-manager .departmental-tab[b-jala9zzcpo]  th.department-vertical-text .col-title-text {
    writing-mode: sideways-lr;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-height: calc(150px - 1rem);
}

.user-roles-manager[b-jala9zzcpo]  table[theme="ssy-table-dw"] tr {
    position: relative;
}

.user-roles-manager[b-jala9zzcpo]  table[theme="ssy-table-dw"] tr .cover-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.user-roles-manager .departmental-tab[b-jala9zzcpo]  td .ssy-custom-checkbox-container .ssy-custom-checkbox-checkmark {
    background-color: #FFFFFF;
    border: 1px solid #000061;
    margin-top: 1px;
    margin-bottom: 1px;
}

.user-roles-manager .departmental-tab[b-jala9zzcpo]  td .ssy-custom-checkbox-container input:disabled ~ .ssy-custom-checkbox-checkmark,
.user-roles-manager .departmental-tab[b-jala9zzcpo]  td .ssy-custom-checkbox-container:hover input ~ .ssy-custom-checkbox-checkmark {
    background-color: #F4F7F9;
    border: 1px solid #F4F7F9;
}

.user-roles-manager .departmental-tab[b-jala9zzcpo]  td .ssy-custom-checkbox-container input:checked ~ .ssy-custom-checkbox-checkmark {
    background-color: #000061;
    border: 1px solid #000061;
}

.user-roles-manager .departmental-tab[b-jala9zzcpo]  .paginator {
    position: sticky;
    width: 100%;
    left: 0.25rem;
    margin-left: 0.25rem;
}

/* ==========================================================================
   "Edit Role Assignment" popup form.

   Notes on [blazor].[NetUser_Role] is free text, so it gets a 6-row textarea
   rather than a single-line input. Same visual language as the Route Group
   Manager popups: SSY Simpson blue #000061 for structure, crystal blue
   #009DC9 for focus/accent, #ddebf8 for tints.

   Scoped rather than ::deep because the popups sit outside .user-roles-manager.
   ========================================================================== */
@scope (.ur-form) {
    :scope[b-jala9zzcpo] {
        --ur-navy: #000061;
        --ur-crystal: #009DC9;
        --ur-tint: #ddebf8;
        --ur-line: #dde3ec;
        --ur-muted: #5a6b80;

        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 4px 2px;
    }

    .ur-form-section[b-jala9zzcpo] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 4px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ur-navy);
    }

    .ur-form-section[b-jala9zzcpo]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, var(--ur-tint), transparent);
    }

    .ur-form-section:first-child[b-jala9zzcpo] {
        margin-top: 0;
    }

    .ur-form-row[b-jala9zzcpo] {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }

    .ur-form-pair[b-jala9zzcpo] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .ur-form-label[b-jala9zzcpo] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--ur-navy);
    }

    .ur-form-hint[b-jala9zzcpo] {
        font-size: 0.68rem;
        font-weight: 400;
        font-style: italic;
        color: var(--ur-muted);
    }

    .ur-field[b-jala9zzcpo] {
        width: 100%;
        box-sizing: border-box;
        padding: 7px 10px;
        font-family: inherit;
        font-size: 0.85rem;
        color: #1b2333;
        background-color: #fbfcfe;
        border: 1px solid var(--ur-line);
        border-radius: 6px;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
    }

    .ur-field:hover[b-jala9zzcpo] {
        border-color: #b9c6d8;
        background-color: #ffffff;
    }

    .ur-field:focus[b-jala9zzcpo] {
        outline: none;
        background-color: #ffffff;
        border-color: var(--ur-crystal);
        box-shadow: 0 0 0 3px rgba(0, 157, 201, 0.18);
    }

    .ur-field[b-jala9zzcpo]::placeholder {
        color: #9aa8bb;
    }

    /* Six visible rows, resizable, scrolls beyond that */
    .ur-textarea[b-jala9zzcpo] {
        min-height: calc(6 * 1.45em + 16px);
        line-height: 1.45;
        resize: vertical;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--ur-navy) transparent;
    }

    /* Read-only context (which user, which role) */
    .ur-readonly[b-jala9zzcpo] {
        padding: 7px 10px;
        font-size: 0.85rem;
        color: #1b2333;
        background-color: #f4f7fb;
        border: 1px solid var(--ur-line);
        border-left: 3px solid var(--ur-crystal);
        border-radius: 6px;
        overflow-wrap: break-word;
    }

    .ur-form-warning[b-jala9zzcpo] {
        padding: 7px 10px;
        font-size: 0.78rem;
        color: #8a2f18;
        background-color: #fdf1ec;
        border: 1px solid #f3c9ba;
        border-left: 3px solid #FF670F;
        border-radius: 6px;
    }

    @media only screen and (max-width: 780px) {
        .ur-form-pair[b-jala9zzcpo] {
            grid-template-columns: 1fr;
        }
    }
}
/* /Components/Pages/Maintenance/Status/VolumeMonitor.razor.rz.scp.css */
/* All selectors are prefixed vm- (vm = VolumeMonitor) so this page never defines or overrides
   generic/global class names. Keep shared classes (ssy-*, BlazorBootstrap) out of this file. */

.vm-grid[b-qshob3umoi] {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 50px;
    column-gap: 10%;
    /*grid-auto-columns: 650px;*/
}

@media (max-width: 1300px) {
    .vm-grid[b-qshob3umoi] {
        grid-template-columns: auto;
    }
}

.vm-flex[b-qshob3umoi] {
    display: flex;
    flex-direction: row;
    gap: 5rem;
    align-items: flex-start;
}

.vm-flex.vm-big-gap[b-qshob3umoi] {
    gap: 1.5rem;
}

.vm-flex-col[b-qshob3umoi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* scoped to this page's headings (no bare h2/h3 selector) */
.vm-grid h2[b-qshob3umoi],
.vm-grid h3[b-qshob3umoi] {
    margin-bottom: 0.5rem;
}

.vm-status-list[b-qshob3umoi] {
    list-style-type: none;
    max-height: 250px;
    overflow-y: auto;
    padding-left: 0;
    font-family: sans-serif;
    font-size: 0.9rem;
}

.vm-margin-0[b-qshob3umoi] {
    margin-bottom: 0;
}

.vm-grey[b-qshob3umoi] {
    color: #6c757d;
}

.vm-red[b-qshob3umoi] {
    color: red;
}

.vm-green[b-qshob3umoi] {
    color: green;
}

.vm-orange[b-qshob3umoi] {
    color: orange;
}

.vm-date-selector[b-qshob3umoi] {
    display: grid;
    grid-template-columns: 2em 9em 2em;
    text-align: center;
}

/* "External / non-prod Navigator" alert banner shown at the top of the page - styled as an error
   so it's hard to miss. */
.vm-warning-bar[b-qshob3umoi] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1.15rem;
    background: linear-gradient(180deg, #fdecec 0%, #f8d4d4 100%);
    border: 1px solid #e0524b;
    border-left: 6px solid #d12c22;
    border-radius: 8px;
    color: #8a1c17;
    box-shadow: 0 2px 6px rgba(193, 41, 41, 0.2);
    font-size: 0.97rem;
    font-weight: 500;
}

.vm-warning-icon[b-qshob3umoi] {
    font-size: 1.55rem;
    line-height: 1;
    color: #c62222;
    flex: 0 0 auto;
}

.vm-warning-text[b-qshob3umoi] {
    line-height: 1.35;
}

.vm-warning-text b[b-qshob3umoi] {
    color: #6e1310;
}
/* /Components/Pages/Maintenance/User/ComponentSettingsUpdate.razor.rz.scp.css */
.component-settings-content[b-l3544ao3pb]  .type-column span {
    max-width: 200px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.component-settings-content[b-l3544ao3pb]  .text-column code {
    color: inherit;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    max-height: 4rem;
    max-width: 80rem;
    display: block;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #000061 transparent;
}

@media (max-width: 1300px) {
    .component-settings-content[b-l3544ao3pb]  .hide-mobile {
        display: none;
    }

}

/* modal form additions */
[b-l3544ao3pb] #EditComponentSettingForm .form-floating textarea {
    height: calc(15rem + 2px);
}
/* /Components/Pages/Maintenance/User/RegisterUser/RegisterUser.razor.rz.scp.css */
.form-signup[b-ez3s5l1mjl] {
    overflow: hidden;
    padding: 20px 20px;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    min-height: 500px;
    margin: 0 auto;
    border: #867754;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #000061;
    margin-top: 2%;
}

[b-ez3s5l1mjl] .form-grid {
    display: grid;
    grid-template-columns:auto auto;
    grid-row-gap: 1em;
}

/* Request details popup styling */
[b-ez3s5l1mjl] .request-details-container {
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

[b-ez3s5l1mjl] .request-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

[b-ez3s5l1mjl] .request-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

[b-ez3s5l1mjl] .request-field {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

[b-ez3s5l1mjl] .request-field:last-child {
    margin-bottom: 0;
}

[b-ez3s5l1mjl] .field-label {
    flex: 0 0 160px;
    font-weight: 600;
    color: #495057;
    position: relative;
    padding-left: 28px;
}

[b-ez3s5l1mjl] .field-value {
    flex: 1;
    padding-left: 1rem;
    color: #212529;
}

[b-ez3s5l1mjl] .field-icon {
    position: absolute;
    left: 0;
    top: 2px;
    color: #000061;
    font-size: 18px;
}

[b-ez3s5l1mjl] .request-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

[b-ez3s5l1mjl] .request-list-item {
    padding: 0.75rem 1rem;
    background-color: white;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    border-left: 3px solid #000061;
}

[b-ez3s5l1mjl] .request-list-item:last-child {
    margin-bottom: 0;
}

[b-ez3s5l1mjl] .section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000061;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

[b-ez3s5l1mjl] .actions-section {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

[b-ez3s5l1mjl] .close-button {
    background-color: #000061;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

[b-ez3s5l1mjl] .close-button:hover {
    background-color: #00004d;
}
/* /Components/Pages/Maintenance/User/RegisterUser/RegisterUserRoleSelect.razor.rz.scp.css */
figcaption[b-jxomhpqbs3] {
    margin-bottom: 0.5rem;
}
small b[b-jxomhpqbs3] {
    font-size: 1.5em;
    line-height: 1;
}
ul[b-jxomhpqbs3] {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 350px;
    background-color: #FFFFFF;
    color: #000061;
    outline: 1px solid #000061;
}

ul > li[b-jxomhpqbs3] {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0 0;
}

ul > li > hr[b-jxomhpqbs3] {
    width: 100%;
}

.small-form-flex[b-jxomhpqbs3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

select[b-jxomhpqbs3] {
    border-radius: 3px;
    border: 1px solid #1AA3E8;
    height: 20px;
    padding: 0 5px;
    background: white;
}

.small-icon[b-jxomhpqbs3] {
    height: 20px;
    width: 20px;
}
.remove:hover[b-jxomhpqbs3] {
    background-color: #FF6961;
}

.add:hover[b-jxomhpqbs3] {
    background-color: #8CD47E;
}

/* /Components/Pages/Maintenance/User/Usage/Usage_010_Main.razor.rz.scp.css */
.usg-main[b-ppeqarl9as] {
    padding: 1rem 1.25rem;
}

/* ---- Page tabs (left aligned) ---- */
.usg-tabs[b-ppeqarl9as] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #E3E3E8;
}

.usg-tab[b-ppeqarl9as] {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.55rem 1.05rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #5a6071;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    transition: color .15s, background .15s, border-color .15s;
}

.usg-tab:hover[b-ppeqarl9as] {
    color: #000061;
    background: #F2F5FB;
}

.usg-tab.active[b-ppeqarl9as] {
    color: #000061;
    font-weight: 600;
    border-bottom-color: #000061;
}

/* ---- Toolbar ---- */
.usg-toolbar[b-ppeqarl9as] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0 0.5rem;
}

.usg-toolbar-filters[b-ppeqarl9as] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.usg-search input[b-ppeqarl9as] {
    width: 16rem;
    border-radius: 18px;
}

/* ---- Modern single-line date range ---- */
.usg-daterange[b-ppeqarl9as] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.usg-date[b-ppeqarl9as] {
    border: 1px solid #D5D9E2;
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    font-size: 0.9rem;
    color: #1c2436;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.usg-date:focus[b-ppeqarl9as] {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 3px rgba(0, 0, 97, 0.12);
}

.usg-daterange-arrow[b-ppeqarl9as] {
    color: #9aa1b1;
    font-size: 0.95rem;
}

.usg-presets[b-ppeqarl9as] {
    display: inline-flex;
    gap: 0.2rem;
    margin-left: 0.35rem;
}

.usg-preset-btn[b-ppeqarl9as] {
    border: 1px solid #D5D9E2;
    background: #fff;
    color: #5a6071;
    border-radius: 14px;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

.usg-preset-btn:hover[b-ppeqarl9as] {
    border-color: #000061;
    color: #000061;
}

.usg-preset-btn.active[b-ppeqarl9as] {
    background: #000061;
    border-color: #000061;
    color: #fff;
}

.usg-panels[b-ppeqarl9as] {
    padding-top: 0.5rem;
}

.usg-muted[b-ppeqarl9as] {
    color: #6c727f;
    font-size: 0.85rem;
}

.usg-domain-add[b-ppeqarl9as] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.usg-chip-list[b-ppeqarl9as] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.usg-chip[b-ppeqarl9as] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #E9EFF9;
    color: #000061;
    border-radius: 14px;
    padding: 0.15rem 0.6rem;
    font-size: 0.85rem;
}

.usg-chip-x[b-ppeqarl9as] {
    border: none;
    background: transparent;
    color: #000061;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.usg-chip-x:hover[b-ppeqarl9as] {
    color: #DB303A;
}

/* ---- Child tab content (reached via ::deep) ---- */
.usg-main[b-ppeqarl9as]  .usg-tab {
    padding-top: 0.4rem;
}

.usg-main[b-ppeqarl9as]  .usg-tab-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.usg-main[b-ppeqarl9as]  .usg-col-filter {
    width: 16rem;
    border-radius: 6px;
}

.usg-main[b-ppeqarl9as]  .usg-count {
    color: #6c727f;
    font-size: 0.85rem;
}

.usg-main[b-ppeqarl9as]  .usg-muted {
    color: #6c727f;
    font-size: 0.85rem;
}

.usg-main[b-ppeqarl9as]  .usg-row-btn {
    padding: 0.1rem 0.5rem;
    font-size: 0.78rem;
    margin: 0 0.1rem;
}

.usg-main[b-ppeqarl9as]  .usg-periods {
    display: inline-flex;
    gap: 0.35rem;
}

.usg-main[b-ppeqarl9as]  .usg-period-btn.active {
    background: #000061;
    color: #fff;
}

.usg-main[b-ppeqarl9as]  .usg-pill {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 10px;
    font-size: 0.78rem;
    background: #E9EFF9;
    color: #000061;
}

.usg-main[b-ppeqarl9as]  .usg-pill-warn {
    background: #FCEFD6;
    color: #8a5a00;
}

.usg-main[b-ppeqarl9as]  .usg-pill-danger {
    background: #FBDDDD;
    color: #a11;
}
/* /Components/Pages/Maintenance/User/Usage/Usage_050_Lookup.razor.rz.scp.css */
/* Lookup tab — page code "lk-". All rules scoped under .lk-lookup. */

.lk-lookup[b-cwcmm6lyuv] {
    padding-top: 0.4rem;
}

.lk-muted[b-cwcmm6lyuv] {
    color: #6c727f;
    font-size: 0.82rem;
}

.lk-pad[b-cwcmm6lyuv] {
    padding: 0.6rem 0.2rem;
}

/* ---- Search bar ---- */
.lk-searchbar[b-cwcmm6lyuv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.lk-search-input[b-cwcmm6lyuv] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lk-search-input input[b-cwcmm6lyuv] {
    width: 22rem;
    border-radius: 18px;
}

.lk-hint[b-cwcmm6lyuv] {
    color: #5a6071;
    background: #F2F5FB;
    border: 1px dashed #D5D9E2;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    font-size: 0.9rem;
}

.lk-hint-detail[b-cwcmm6lyuv] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ---- Body split ---- */
.lk-body[b-cwcmm6lyuv] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.lk-lists[b-cwcmm6lyuv] {
    flex: 1 1 480px;
    min-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lk-detail[b-cwcmm6lyuv] {
    flex: 2 1 620px;
    min-width: 520px;
}

/* ---- User list tables ---- */
.lk-list-block[b-cwcmm6lyuv] {
    border: 1px solid #E3E3E8;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.lk-list-title[b-cwcmm6lyuv] {
    background: #F2F5FB;
    color: #000061;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #E3E3E8;
}

.lk-utable[b-cwcmm6lyuv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.lk-utable th[b-cwcmm6lyuv] {
    text-align: left;
    color: #6c727f;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid #EEE;
    white-space: nowrap;
}

.lk-utable td[b-cwcmm6lyuv] {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid #F1F1F4;
    vertical-align: top;
    white-space: nowrap;
}

.lk-urow[b-cwcmm6lyuv] {
    cursor: pointer;
    transition: background .12s;
}

.lk-urow:hover[b-cwcmm6lyuv] {
    background: #F6F9FE;
}

.lk-urow.lk-sel[b-cwcmm6lyuv] {
    background: #E9EFF9;
}

.lk-urow.lk-sel td[b-cwcmm6lyuv] {
    border-color: #D3DEF3;
}

.lk-uname[b-cwcmm6lyuv] {
    display: block;
    font-weight: 600;
    color: #1c2436;
}

.lk-uemail[b-cwcmm6lyuv] {
    display: block;
    color: #6c727f;
    font-size: 0.74rem;
}

.lk-uby[b-cwcmm6lyuv] {
    color: #5a6071;
    font-size: 0.76rem;
}

.lk-urow-del .lk-uname[b-cwcmm6lyuv] {
    color: #a11;
}

/* ---- Detail header ---- */
.lk-detail-head[b-cwcmm6lyuv] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.lk-dt-name[b-cwcmm6lyuv] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #000061;
}

.lk-dt-email[b-cwcmm6lyuv] {
    color: #6c727f;
    font-size: 0.85rem;
    margin-left: 0.4rem;
}

/* ---- Panels ---- */
.lk-panels[b-cwcmm6lyuv] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.lk-card[b-cwcmm6lyuv] {
    border: 1px solid #E3E3E8;
    border-radius: 10px;
    background: #fff;
    padding: 0.8rem 0.9rem;
}

.lk-card-activity[b-cwcmm6lyuv] {
    /*flex: 3 1 560px;
    min-width: 360px;*/
    width: 50rem;
}

.lk-card-history[b-cwcmm6lyuv] {
    flex: 2 1 420px;
    min-width: 340px;
}

.lk-card-roles[b-cwcmm6lyuv] {
    flex: 1 1 240px;
    min-width: 220px;
}

.lk-card-h[b-cwcmm6lyuv] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #000061;
    margin: 0 0 0.15rem;
}

.lk-card-sub[b-cwcmm6lyuv] {
    color: #6c727f;
    font-size: 0.76rem;
    margin: 0 0 0.6rem;
}

/* ---- Activity summary table ---- */
.lk-actscroll[b-cwcmm6lyuv],
.lk-histscroll[b-cwcmm6lyuv] {
    overflow-x: auto;
}

.lk-acttable[b-cwcmm6lyuv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    table-layout: fixed;            /* stable columns regardless of client content */
}

/* Period columns are a fixed width; the activity-name column absorbs the slack,
   so the grid looks identical no matter which client (or how long their activity
   names) is selected. */
.lk-acttable col.lk-col-per[b-cwcmm6lyuv] { width: 2.6rem; }

.lk-acttable th[b-cwcmm6lyuv],
.lk-acttable td[b-cwcmm6lyuv] {
    padding: 0.28rem 0.3rem;
    border-bottom: 1px solid #F1F1F4;
    text-align: center;
}

.lk-acttable .lk-actname[b-cwcmm6lyuv] {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lk-grouprow th.lk-group[b-cwcmm6lyuv] {
    color: #000061;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #E3E3E8;
    background: #F7F9FD;
}

.lk-acttable th.lk-per[b-cwcmm6lyuv] {
    color: #6c727f;
    font-weight: 600;
    font-size: 0.68rem;
    white-space: normal;
    line-height: 1.05;
    width: 2.6rem;
    min-width: 2.6rem;
    cursor: help;
}

.lk-actpager[b-cwcmm6lyuv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.2rem 0;
    font-size: 0.75rem;
}

.lk-acttable tr.lk-sec td[b-cwcmm6lyuv] {
    text-align: left;
    background: #F2F5FB;
    color: #000061;
    font-weight: 600;
    font-size: 0.76rem;
    padding: 0.32rem 0.5rem;
}

.lk-num[b-cwcmm6lyuv] {
    font-variant-numeric: tabular-nums;
    color: #1c2436;
    border-radius: 4px;
}

/* Heat scale — busier periods read darker at a glance. */
.lk-num.lk-c0[b-cwcmm6lyuv] { color: #cfd3db; }
.lk-num.lk-c1[b-cwcmm6lyuv] { background: #EAF1FB; }
.lk-num.lk-c2[b-cwcmm6lyuv] { background: #CFE0F6; }
.lk-num.lk-c3[b-cwcmm6lyuv] { background: #9FC0EC; color: #10233f; }
.lk-num.lk-c4[b-cwcmm6lyuv] { background: #5B8AD6; color: #fff; font-weight: 600; }

/* ---- History table ---- */
.lk-histtable[b-cwcmm6lyuv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.lk-histtable th[b-cwcmm6lyuv] {
    text-align: left;
    color: #6c727f;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid #EEE;
    white-space: nowrap;
}

.lk-histtable td[b-cwcmm6lyuv] {
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid #F1F1F4;
    vertical-align: top;
}

.lk-histscroll[b-cwcmm6lyuv] {
    max-height: 30rem;
    overflow-y: auto;
}

.lk-when[b-cwcmm6lyuv] {
    white-space: nowrap;
    color: #5a6071;
}

.lk-what[b-cwcmm6lyuv] {
    display: block;
    font-weight: 600;
    color: #1c2436;
}

.lk-what-raw[b-cwcmm6lyuv] {
    display: block;
    color: #9aa1b1;
    font-size: 0.7rem;
}

.lk-fromto .lk-old[b-cwcmm6lyuv] {
    color: #a11;
}

.lk-fromto .lk-new[b-cwcmm6lyuv] {
    color: #1a7a3d;
}

.lk-fromto .lk-arrow[b-cwcmm6lyuv] {
    color: #9aa1b1;
    margin: 0 0.25rem;
}

/* ---- Roles ---- */
.lk-roletype[b-cwcmm6lyuv] {
    color: #000061;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0.6rem 0 0.25rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #E3E3E8;
}

.lk-rolelist[b-cwcmm6lyuv] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.4rem;
}

.lk-rolelist li[b-cwcmm6lyuv] {
    padding: 0.28rem 0.1rem;
    border-bottom: 1px solid #F5F5F7;
}

.lk-role-disp[b-cwcmm6lyuv] {
    display: block;
    font-weight: 600;
    color: #1c2436;
    font-size: 0.82rem;
}

.lk-role-name[b-cwcmm6lyuv] {
    display: block;
    color: #9aa1b1;
    font-size: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lk-role-exp .lk-role-disp[b-cwcmm6lyuv] {
    color: #9aa1b1;
    text-decoration: line-through;
}

.lk-role-badge[b-cwcmm6lyuv] {
    display: inline-block;
    margin-top: 0.1rem;
    background: #FBDDDD;
    color: #a11;
    border-radius: 8px;
    padding: 0.02rem 0.4rem;
    font-size: 0.66rem;
}
/* /Components/Pages/Maintenance/User/Usage/Usage_100_Activity.razor.rz.scp.css */
.dd-table[b-wr5qnz238n] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.dd-table th[b-wr5qnz238n], .dd-table td[b-wr5qnz238n] {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid #F1F1F4;
    text-align: left;
    white-space: nowrap;
}

.dd-table td.dd-num[b-wr5qnz238n], .dd-table th.dd-num[b-wr5qnz238n] { text-align: right; }

.dd-filterrow th[b-wr5qnz238n] {
    padding: 2px 3px;
    background: #F7F9FD;
    border-bottom: 1px solid #E3E3E8;
}

.dd-filterrow input[b-wr5qnz238n] {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.72rem;
    padding: 1px 4px;
    border: 1px solid #d7dbe3;
    border-radius: 3px;
}

.dd-titlerow th[b-wr5qnz238n] {
    cursor: pointer;
    background: #000061;
    color: #fff;
    font-weight: 600;
    user-select: none;
}

.dd-titlerow th:hover[b-wr5qnz238n] { background: #1a1a7a; }

.dd-pager[b-wr5qnz238n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    font-size: 0.75rem;
}
/* /Components/Pages/Public/MarketPost/ManageSubscriptions.razor.rz.scp.css */
/* ManageSubscriptions — scoped component styles (sub-).
   Font stack matches the SSY brand font declared on html/body in ssyglobal.css
   ('Soehne', 'Franklin Gothic Book', Arial, sans-serif) — this page is reached
   anonymously from an unsubscribe link, so the font is set explicitly rather
   than relying on inheritance from the app shell. */

.sub-page[b-6mm28dhzku] {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 24px;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    color: #333;
    text-align: center;
}

.sub-logo[b-6mm28dhzku] {
    width: 120px;
    margin-bottom: 15px;
}

.sub-title[b-6mm28dhzku] {
    font-size: 1.4rem;
}

.sub-hint[b-6mm28dhzku] {
    color: #888;
    font-size: 0.85rem;
}

.sub-email[b-6mm28dhzku] {
    color: #555;
}

.sub-intro[b-6mm28dhzku] {
    margin-bottom: 0;
}

/* Shown when the registrations couldn't be read or the preferences couldn't be saved. */
.sub-error[b-6mm28dhzku] {
    color: #b3261e;
    font-size: 0.9rem;
    margin-top: 16px;
}
.sub-explain[b-6mm28dhzku] {
    margin-bottom: 20px;
}

.sub-rows[b-6mm28dhzku] {
    text-align: left;
    display: inline-block;
    min-width: 320px;
}

/* One channel: post-type name + a single checkbox. */
.sub-row[b-6mm28dhzku] {
    display: grid;
    grid-template-columns: 1fr 72px;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid #eee;
}

/* Two channels: post-type name + Email + WhatsApp columns. */
.sub-rows-dual .sub-row[b-6mm28dhzku] {
    grid-template-columns: 1fr 72px 90px;
}

.sub-name[b-6mm28dhzku] {
    cursor: default;
}

.sub-ch[b-6mm28dhzku] {
    text-align: center;
}

.sub-ch input[b-6mm28dhzku] {
    cursor: pointer;
}

.sub-head[b-6mm28dhzku] {
    border-bottom: 2px solid #ddd;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sub-actions[b-6mm28dhzku] {
    margin-top: 28px;
}

.sub-confirm-btn[b-6mm28dhzku] {
    padding: 10px 28px;
    font-size: 1rem;
}
/* /Components/Pages/Public/MarketPost/ViewPostFile.razor.rz.scp.css */
/* ViewPostFile — scoped component styles (vpf-).
   Font stack matches the SSY brand font declared on html/body in ssyglobal.css
   ('Soehne', 'Franklin Gothic Book', Arial, sans-serif) — this page is reached
   anonymously from an email/WhatsApp link, so the font is set explicitly rather
   than relying on inheritance from the app shell. */

.vpf-page[b-6zamrgjxne] {
    height: calc(100vh - 60px);
    margin: 0 auto;
    padding: 5px 10px 0 10px;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    color: #333;
}

.vpf-state[b-6zamrgjxne] {
    text-align: center;
    padding: 48px 0;
}

.vpf-logo[b-6zamrgjxne] {
    width: 240px;
    margin-bottom: 40px;
}

.vpf-title[b-6zamrgjxne] {
    font-size: 1.4rem;
}

.vpf-hint[b-6zamrgjxne] {
    color: #888;
    font-size: 0.85rem;
}

.vpf-loading-text[b-6zamrgjxne] {
    color: #888;
    font-size: 0.9rem;
}
/* /Components/Pages/Public/Redirects.razor.rz.scp.css */
.loading-container[b-xgvuakq1bf] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
}

.loading-spinner[b-xgvuakq1bf] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000061;
    border-radius: 50%;
    animation: spinner-b-xgvuakq1bf 1.5s linear infinite;
    margin-bottom: 15px;
}

@keyframes spinner-b-xgvuakq1bf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Components/Pages/Public/UraniumPublicDashboard.razor.rz.scp.css */
/* Public Uranium Dashboard layout (pud-).
   Three columns 2fr / 2fr / 3fr; collapses to a single column on mobile. */

/* ── Dark theme (SSY Navigator "Trade Tracker" palette) ──────────────────
   All colour overrides live here in the page's scoped CSS. The child
   components (ubp-/uoc-/urc-/ulc-) keep their own light-mode CSS untouched;
   we re-skin them from the dashboard using ::deep so the public page reads
   as a dark trading screen. The palette is declared on .pud-grid so it
   inherits into every descendant (including child components) and is reached
   from the ::deep rules below. */
.pud-grid[b-jlulg9v6qr] {
    --bg: #14142d;
    --panel: #1A2432; /*#1d263b;*/
    --panel-2: #202035;
    --text: #e0e0e0;
    --muted: #8888aa;
    --accent: #0087cb;
    --accent-2: #009dc9;
    --accent-3: #00e2fd;
    --warning: #6ab0e0;
    --success: #00ff7f;
    --danger: #ff7777;
    --grid: #2a2a45;
    --navbar: #0d0d1a;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.pud-grid[b-jlulg9v6qr] {
    display: grid;
    grid-template-columns: 2fr 2fr 3fr;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
    align-items: stretch;
    /* Dark page background — fill the viewport below the fixed navbar so no
       light gutter shows around the grid. */
    background: var(--bg);
    color: var(--text);
    min-height: calc(100vh - 50px);
}

.pud-col[b-jlulg9v6qr] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0; /* allow charts to shrink within the grid track */
}

/* Chart cells stretch to share the column height; the floor keeps charts legible. */
.pud-cell[b-jlulg9v6qr] {
    flex: 1 1 0;
    min-height: 340px;
}

/* Mobile: collapse to a single column (everything stacked). */
@media (max-width: 1100px) {
    .pud-grid[b-jlulg9v6qr] {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   Dark-mode colour overrides for the child components.
   Reached with ::deep (scoped to .pud-grid only — these rules never affect
   the same components on the authenticated internal pages). Layout/spacing
   in the components is left as-is; we only repaint colours.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Broker Price Index quote (ubp-) ─────────────────────────────────── */
.pud-grid[b-jlulg9v6qr]  .ssy-h2 { color: var(--accent-3); }
.pud-grid[b-jlulg9v6qr]  .uranium-bpi-price-value { color: var(--text); }
.pud-grid[b-jlulg9v6qr]  .uranium-bpi-price-label { color: var(--text); }
.pud-grid[b-jlulg9v6qr]  .uranium-bpi-divider { color: var(--text); }
.pud-grid[b-jlulg9v6qr]  .uranium-bpi-asof { color: var(--text); }
.pud-grid[b-jlulg9v6qr]  .uranium-price-up { color: var(--success); }
.pud-grid[b-jlulg9v6qr]  .uranium-price-down { color: var(--danger); }
.pud-grid[b-jlulg9v6qr]  .uranium-price-flat { color: var(--muted); }

/* ── BPI & Options & % Return calculator cards (uoc- / urc-) ───────────────── */
.pud-grid[b-jlulg9v6qr]  .ubp-card,
.pud-grid[b-jlulg9v6qr]  .uoc-card,
.pud-grid[b-jlulg9v6qr]  .urc-card {
    background: var(--panel);
    border-color: var(--grid);
    color: var(--text);
    box-shadow: var(--shadow);
}

.pud-grid[b-jlulg9v6qr]  .uoc-title,
.pud-grid[b-jlulg9v6qr]  .urc-title { color: var(--accent-3); }

.pud-grid[b-jlulg9v6qr]  .uoc-price-value,
.pud-grid[b-jlulg9v6qr]  .urc-return-value { color: var(--accent-3); }

.pud-grid[b-jlulg9v6qr]  .uoc-greek-value,
.pud-grid[b-jlulg9v6qr]  .urc-annual-value { color: var(--accent-2); }

.pud-grid[b-jlulg9v6qr]  .uoc-result-label,
.pud-grid[b-jlulg9v6qr]  .urc-result-label,
.pud-grid[b-jlulg9v6qr]  .uoc-label,
.pud-grid[b-jlulg9v6qr]  .urc-label,
.pud-grid[b-jlulg9v6qr]  .uoc-note,
.pud-grid[b-jlulg9v6qr]  .urc-note { color: var(--text); }

.pud-grid[b-jlulg9v6qr]  .urc-days { color: var(--accent-3); }

.pud-grid[b-jlulg9v6qr]  .uoc-divider,
.pud-grid[b-jlulg9v6qr]  .urc-divider { border-top-color: var(--grid); }

/* Directional return colours */
.pud-grid[b-jlulg9v6qr]  .urc-pos { color: var(--success); }
.pud-grid[b-jlulg9v6qr]  .urc-neg { color: var(--danger); }

/* Inputs */
.pud-grid[b-jlulg9v6qr]  .uoc-input,
.pud-grid[b-jlulg9v6qr]  .urc-input {
    background: var(--panel-2);
    border-color: var(--grid);
    color: var(--text);
}

.pud-grid[b-jlulg9v6qr]  .uoc-input:focus,
.pud-grid[b-jlulg9v6qr]  .urc-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 135, 203, 0.35);
}

/* date-picker calendar icon → light so it shows on the dark input */
.pud-grid[b-jlulg9v6qr]  .uoc-input::-webkit-calendar-picker-indicator,
.pud-grid[b-jlulg9v6qr]  .urc-input::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
}

/* Greeks toggle */
.pud-grid[b-jlulg9v6qr]  .uoc-greeks-toggle { color: var(--text); }
.pud-grid[b-jlulg9v6qr]  .uoc-greeks-toggle input { accent-color: var(--accent); }

/* Call / Put pill toggle */
.pud-grid[b-jlulg9v6qr]  .uoc-toggle-btn {
    background: var(--panel-2);
    color: var(--text);
    border-color: var(--accent);
}
.pud-grid[b-jlulg9v6qr]  .uoc-toggle-btn:hover {
    background: rgba(0, 135, 203, 0.18);
}
.pud-grid[b-jlulg9v6qr]  .uoc-toggle-active,
.pud-grid[b-jlulg9v6qr]  .uoc-toggle-active:hover {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

/* ── Live U3O8 curve table (ulc-) ────────────────────────────────────── */
.pud-grid[b-jlulg9v6qr]  .ulc-wrap {
    background: var(--panel);
    border-color: var(--grid);
    color: var(--text);
}
.pud-grid[b-jlulg9v6qr]  .ulc-title { color: var(--accent-3); }
.pud-grid[b-jlulg9v6qr]  .ulc-th {
    color: var(--text);
    border-bottom-color: var(--grid);
}
.pud-grid[b-jlulg9v6qr]  .ulc-row td { border-bottom-color: rgba(42, 42, 69, 0.6); }
.pud-grid[b-jlulg9v6qr]  .ulc-row:hover td { background: rgba(0, 135, 203, 0.15); }
.pud-grid[b-jlulg9v6qr]  .ulc-row td.ulc-period { color: var(--accent-3); }
.pud-grid[b-jlulg9v6qr]  .ulc-row td.ulc-loc { color: var(--text); }
.pud-grid[b-jlulg9v6qr]  .ulc-row td.ulc-bid { color: var(--success); }
.pud-grid[b-jlulg9v6qr]  .ulc-row td.ulc-indic { color: var(--text); }
.pud-grid[b-jlulg9v6qr]  .ulc-row td.ulc-ask { color: var(--danger); }
.pud-grid[b-jlulg9v6qr]  .ulc-up { color: var(--success); }
.pud-grid[b-jlulg9v6qr]  .ulc-down { color: var(--danger); }
.pud-grid[b-jlulg9v6qr]  .ulc-flat { color: var(--muted); }
.pud-grid[b-jlulg9v6qr]  .ulc-asof  { color: var(--text); }
.pud-grid[b-jlulg9v6qr]  .ulc-empty { color: var(--muted); }
/* /Components/Pages/SNP/ApiSetup/SNPRatesSetup.razor.rz.scp.css */
.snpextractbox[b-28rc2pypl5] {
    border: 1px solid #009DC9;
    height: 85vh;
    overflow-y: scroll;
}

.snpextractdatepicker[b-28rc2pypl5] {
}

.snpextractroutepicker[b-28rc2pypl5] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 10px;
}

.snpextractroutepicker-ul[b-28rc2pypl5] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.snpextractroutepicker-ul .chkbox[b-28rc2pypl5] {
    margin: 0 3px 0 0;
    vertical-align: middle;
}


.snpextractroutepicker-ul li[b-28rc2pypl5] {
    text-decoration: none;
}

.snpextractroutepicker-ul li:hover[b-28rc2pypl5] {
    background-color: #B5CBD6;
}


.deleterow[b-28rc2pypl5], .editapiclient[b-28rc2pypl5] {
    cursor: pointer;
    padding-right: 3px;
}

.deleterow:hover[b-28rc2pypl5] {
    font-weight: 700;
    color: white;
}

.draggablerow[b-28rc2pypl5] {
    cursor: pointer;
}

.editapiclient[b-28rc2pypl5] {
    color: #163E9F;
}


.editapiclient:hover[b-28rc2pypl5] {
    font-weight: 700;
    color: #91A527;
}
/* /Components/Pages/SNP/Dashboards/VesselAffordability/VesselAffordability.razor.rz.scp.css */
.va-dashboard[b-9z3vuu9dv5] {
    padding: 16px 20px 32px;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
}

.va-header[b-9z3vuu9dv5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 16px;
}

.va-title[b-9z3vuu9dv5] {
    color: #000061;
    font-size: 2.2rem;
    font-weight: 600;
    margin: 0;
}

.va-empty[b-9z3vuu9dv5] {
    text-align: center;
    color: #555;
    margin-top: 40px;
}

/* ── Vessel-type filter (segmented radio group) ──────────────────────── */
.va-tabs[b-9z3vuu9dv5] {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid #009DC9;
    border-radius: 6px;
    overflow: hidden;
}

.va-tab[b-9z3vuu9dv5] {
    margin: 0;
    padding: 7px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #009DC9;
    cursor: pointer;
    user-select: none;
    border-right: 1px solid #b9e0ee;
    transition: background 0.15s ease, color 0.15s ease;
}

.va-tab:last-child[b-9z3vuu9dv5] {
    border-right: none;
}

/* Hide the native radio control - the label IS the button. */
.va-tab input[b-9z3vuu9dv5] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.va-tab:hover[b-9z3vuu9dv5] {
    background: #e6f4f9;
}

.va-tab-active[b-9z3vuu9dv5] {
    background: #009DC9;
    color: #fff;
}

/* Keyboard focus ring for accessibility */
.va-tab:focus-within[b-9z3vuu9dv5] {
    outline: 2px solid #163E9F;
    outline-offset: -2px;
}

/* ── Dashboard grid ──────────────────────────────────────────────────── */
.va-grid[b-9z3vuu9dv5] {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr;
    grid-auto-rows: min-content;
    gap: 16px;
}

.va-panel[b-9z3vuu9dv5] {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Allow the panel to shrink below its content width so the grid never
       overflows the viewport (grid/flex items default to min-width: auto). */
    min-width: 0;
}

.va-panel-title[b-9z3vuu9dv5] {
    color: #009DC9;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.va-panel-sub[b-9z3vuu9dv5] {
    color: #7a8a96;
    font-size: 0.8rem;
    margin: 2px 0 8px;
}

.va-asof[b-9z3vuu9dv5] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #009DC9;
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
}

/* ── Charts ──────────────────────────────────────────────────────────── */
.va-chart[b-9z3vuu9dv5] {
    height: 260px;
    width: 100%;
    min-width: 0;
}

.va-chart-tall[b-9z3vuu9dv5] {
    height: 340px;
}

/* ── Market Snapshot tables ──────────────────────────────────────────── */
.va-snapshot-tables[b-9z3vuu9dv5] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.va-snapshot-block[b-9z3vuu9dv5] {
    flex: 1 1 200px;
    min-width: 0;
}

.va-table[b-9z3vuu9dv5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.va-table th[b-9z3vuu9dv5],
.va-table td[b-9z3vuu9dv5] {
    padding: 4px 8px;
    text-align: right;
}

.va-table thead tr:first-child th[b-9z3vuu9dv5] {
    background: #000061;
    color: #fff;
    font-weight: 600;
}

.va-table .va-th-left[b-9z3vuu9dv5] {
    text-align: left;
}

.va-table .va-subhead th[b-9z3vuu9dv5] {
    background: #f1f4f8;
    color: #7a8a96;
    font-weight: 500;
    font-size: 0.75rem;
}

.va-table tbody tr:nth-child(even)[b-9z3vuu9dv5] {
    background: #f7f9fb;
}

.va-td-empty[b-9z3vuu9dv5] {
    text-align: center;
    color: #999;
    padding: 10px;
}

.va-neg[b-9z3vuu9dv5] {
    color: #DB303A;
}

.va-pos[b-9z3vuu9dv5] {
    color: #91A527;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Tablet / narrow desktop: drop to a single column and let the selector
   span the full width with evenly-sized, wrapping segments. */
@media (max-width: 1100px) {
    .va-grid[b-9z3vuu9dv5] {
        grid-template-columns: 1fr;
    }

    .va-header[b-9z3vuu9dv5] {
        justify-content: flex-start;
    }

    .va-tabs[b-9z3vuu9dv5] {
        width: 100%;
    }

    .va-tab[b-9z3vuu9dv5] {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Phone: tighten the title, selector and chart heights so everything fits. */
@media (max-width: 600px) {
    .va-dashboard[b-9z3vuu9dv5] {
        padding: 12px 12px 24px;
    }

    .va-title[b-9z3vuu9dv5] {
        font-size: 1.6rem;
    }

    .va-tab[b-9z3vuu9dv5] {
        flex: 1 1 33%;
        padding: 9px 8px;
        font-size: 0.85rem;
        /* Even wrapped rows read as a grid rather than one long strip. */
        border-bottom: 1px solid #b9e0ee;
    }

    .va-chart[b-9z3vuu9dv5] {
        height: 240px;
    }

    .va-chart-tall[b-9z3vuu9dv5] {
        height: 280px;
    }

    .va-snapshot-tables[b-9z3vuu9dv5] {
        gap: 12px;
    }
}
/* /Components/Pages/SNP/Reports/FleetChanges/Components/FleetTable.razor.rz.scp.css */
.fleet-summary-pdf-font[b-ivjx8myn7p] {
    font-size: 1em !important;
}
/* /Components/Pages/SNP/Reports/FleetChanges/Components/OrderBook.razor.rz.scp.css */
.fleet-summary-pdf-font[b-f4x2l7nnhc] {
    font-size: 1em !important;
}
/* /Components/Pages/SNP/Reports/FleetChanges/FleetSummary.razor.rz.scp.css */
.fleet-summary-pdf-footer[b-1gyc738vfa] {
    height: 7% !important;
    font-size: 0.8em !important;
}
.fleet-summary-pdf-main[b-1gyc738vfa] {
    height: 83% !important;
    font-size: 0.85em !important;
}
.fleet-summary-pdf-msg[b-1gyc738vfa] {
    margin-top: 1% !important;
    font-size: 0.8em !important;
}
/* /Components/Pages/SNP/Reports/FleetChanges/FleetSummaryMain.razor.rz.scp.css */
.vessel-search-box[b-f827ah6p23] {
    height: 88%;
    width: 95%;
    border: 2px solid lightgray;
    border-radius: 10px;
    margin: 1%;
    padding: 0.5% 1.5%;
}

.vessel-search-item[b-f827ah6p23] {
    width: 100%;
    margin: 1% 0;
    padding: 1% 2%;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
    .vessel-search-item:hover[b-f827ah6p23] {
        background-color: #B6EBFD;
    }
/* /Components/Pages/SNP/Reports/NewBuild/NewBuild.razor.rz.scp.css */
.snp-nb-no-pdf[b-gvvyehvtrt] {
    font-size: 1em !important;
}
/* /Components/Pages/SNP/Reports/NewBuild/NewBuildContractPopup.razor.rz.scp.css */
/* Paste-from-Excel panel on the Add Contracts popup. Prefix: nbc- */

.nbc-paste-wrap[b-l9w2l1ogjn] {
    margin-bottom: 8px;
}

.nbc-paste-toggle[b-l9w2l1ogjn] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 2px;
    background: none;
    border: none;
    font-size: 0.78rem;
    font-weight: 600;
    color: #000061;
    cursor: pointer;
    text-align: left;
}

.nbc-paste-caret[b-l9w2l1ogjn] {
    display: inline-block;
    width: 10px;
    font-size: 0.7rem;
}

.nbc-paste-zone[b-l9w2l1ogjn] {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nbc-paste-label[b-l9w2l1ogjn] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
}

.nbc-paste-hint[b-l9w2l1ogjn] {
    font-weight: 400;
    color: #9ca3af;
}

.nbc-paste-textarea[b-l9w2l1ogjn] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 5px 7px;
    font-size: 0.72rem;
    font-family: monospace;
    color: #374151;
    resize: vertical;
    background: white;
}

    .nbc-paste-textarea:focus[b-l9w2l1ogjn] {
        outline: none;
        border-color: #000061;
    }

.nbc-paste-status[b-l9w2l1ogjn] {
    font-size: 0.7rem;
    border-radius: 3px;
    padding: 3px 6px;
}

.nbc-paste-ok[b-l9w2l1ogjn] {
    background: #f0fdf4;
    color: #15803d;
}

.nbc-paste-warn[b-l9w2l1ogjn] {
    background: #fef2f2;
    color: #b91c1c;
}

.nbc-paste-actions[b-l9w2l1ogjn] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.nbc-apply-btn[b-l9w2l1ogjn],
.nbc-clear-btn[b-l9w2l1ogjn] {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.nbc-apply-btn[b-l9w2l1ogjn] {
    background: #000061;
    color: white;
}

    .nbc-apply-btn:hover:not(:disabled)[b-l9w2l1ogjn] {
        background: #0000a0;
    }

.nbc-clear-btn[b-l9w2l1ogjn] {
    background: #e5e7eb;
    color: #374151;
}

    .nbc-clear-btn:hover:not(:disabled)[b-l9w2l1ogjn] {
        background: #d1d5db;
    }

.nbc-apply-btn:disabled[b-l9w2l1ogjn],
.nbc-clear-btn:disabled[b-l9w2l1ogjn] {
    opacity: 0.4;
    cursor: not-allowed;
}

.nbc-paste-check[b-l9w2l1ogjn] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #374151;
    margin: 0;
    cursor: pointer;
}

.nbc-paste-summary[b-l9w2l1ogjn] {
    font-size: 0.68rem;
    color: #15803d;
}
/* /Components/Pages/SNP/Reports/NewBuild/NewBuildPricingPopup.razor.rz.scp.css */
[b-o7u2andfg2] .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    /*        width: 100%;*/
}

[b-o7u2andfg2] .stalePrice {
    background-color: LightYellow;
}
/* /Components/Pages/SubscriptionsManager/Subscriptions.razor.rz.scp.css */
/* Layout */
.layout-container[b-wmc4o5e3mk] {
    display: flex;
    height: calc(100vh - 180px);  /* Reduced height */
    overflow: hidden;
}

/* Sidebar */
.select-list[b-wmc4o5e3mk] {
    width: 280px;
    position: fixed;
    top: 180px;  /* Adjusted top position */
    bottom: 20px;  /* Added bottom margin */
    left: 0;
    background: white;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    padding: 1rem;
}

/* Main Content Area */
.main-content[b-wmc4o5e3mk] {
    margin-left: 280px;
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    max-height: calc(100vh - 180px);  /* Added max-height */
}

/* Subscription Items */
.subscription-item[b-wmc4o5e3mk] {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 8px;
    background: white;
}

.subscription-item:hover[b-wmc4o5e3mk] {
    transform: translateX(2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-color: #000061;
}

.subscription-title[b-wmc4o5e3mk] {
    font-family: 'Soehne Breit', 'Franklin Gothic Book', Arial, sans-serif;
    font-weight: 600;
    margin-bottom: 6px;
    color: #000061;
    font-size: 1.1rem;
}

/* Status Indicators */
.subscription-item-active[b-wmc4o5e3mk] { border-left: 4px solid #91A527; }
.subscription-item-expiring[b-wmc4o5e3mk] { border-left: 4px solid #FF9800; }
.subscription-item-expired[b-wmc4o5e3mk] { border-left: 4px solid #DC3545; }
.subscription-item-inactive[b-wmc4o5e3mk] {
    border-left: 4px solid #6c757d;
    opacity: 0.8;
}

/* Active State Styles */
.subscription-item.active[b-wmc4o5e3mk] {
    background-color: #000061;
    color: white;
    border-color: #000061;
    border-left-width: 4px !important;
}

.subscription-item.active.subscription-item-active[b-wmc4o5e3mk] { border-left-color: #91A527 !important; }
.subscription-item.active.subscription-item-expiring[b-wmc4o5e3mk] { border-left-color: #FF9800 !important; }
.subscription-item.active.subscription-item-expired[b-wmc4o5e3mk] { border-left-color: #DC3545 !important; }
.subscription-item.active.subscription-item-inactive[b-wmc4o5e3mk] { border-left-color: #6c757d !important; }

/* Card Styles */
.card[b-wmc4o5e3mk] {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-header[b-wmc4o5e3mk] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.75rem 1rem;
}

/* Table Styles */
.billing-table[b-wmc4o5e3mk] {
    width: 100%;
    border-collapse: collapse;
}

.billing-table th[b-wmc4o5e3mk] {
    background: #f5f5f5;
    padding: 0.75rem;
    text-align: left;
    border-bottom: 2px solid #000061;
}

.billing-table td[b-wmc4o5e3mk] {
    padding: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
}

.amount-cell[b-wmc4o5e3mk] {
    font-family: monospace;
}

.status-cell[b-wmc4o5e3mk] {
    width: 100px;
}

.container[b-wmc4o5e3mk] {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 120px);
    gap: 1rem;
    padding: 0 1rem;
}

.subscription-item-active[b-wmc4o5e3mk] {
    border-left: 4px solid #91A527;
}

.subscription-item-expiring[b-wmc4o5e3mk] {
    border-left: 4px solid #FF9800;
}

.subscription-item-expired[b-wmc4o5e3mk] {
    border-left: 4px solid #DC3545;
}

.subscription-item-inactive[b-wmc4o5e3mk] {
    border-left: 4px solid #6c757d;
    opacity: 0.8;
}

.subscription-item.active .text-muted[b-wmc4o5e3mk] {
    color: rgba(255,255,255,0.7) !important;
}

.subscription-info[b-wmc4o5e3mk] {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.subscription-status[b-wmc4o5e3mk] {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(0,0,0,0.05);
    font-weight: 500;
}

.subscription-item.active .subscription-title[b-wmc4o5e3mk] {
    color: white;
}

.details[b-wmc4o5e3mk] {
    width: 70%;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.details-header[b-wmc4o5e3mk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #000061;
}

.details-header h3[b-wmc4o5e3mk] {
    font-family: 'Soehne Breit', 'Franklin Gothic Book', Arial, sans-serif;
    color: #000061;
    font-size: 1.5rem;
    margin: 0;
}

.details-content[b-wmc4o5e3mk] {
    padding: 1rem 0;
}

.billing-list[b-wmc4o5e3mk] {
    list-style: none;
    padding: 0;
}

.billing-item[b-wmc4o5e3mk] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
    align-items: center;
}

.actions-bar[b-wmc4o5e3mk] {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

.card-header h6[b-wmc4o5e3mk] {
    font-family: 'Soehne Breit', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1rem;
    color: #000061;
}

.card-body[b-wmc4o5e3mk] {
    padding: 1rem;
}

.table-sm[b-wmc4o5e3mk] {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
}

.table-sm td[b-wmc4o5e3mk] {
    padding: 0.6rem 0.5rem;
    vertical-align: middle;
}

.table-sm td strong[b-wmc4o5e3mk] {
    color: #000061;
    font-weight: 600;
}

.badge[b-wmc4o5e3mk] {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-weight: 500;
    padding: 0.4em 0.8em;
}

.text-muted[b-wmc4o5e3mk] {
    color: #6c757d !important;
    font-weight: 400;
}

.input-group .btn-outline-secondary[b-wmc4o5e3mk] {
    border-color: #ced4da;
    color: #000061;
}

.input-group .btn-outline-secondary:hover[b-wmc4o5e3mk] {
    background-color: #f8f9fa;
    color: #000061;
}

.filter-card[b-wmc4o5e3mk] {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-color: #e0e0e0;
}

.tab-buttons[b-wmc4o5e3mk],
.tab-button[b-wmc4o5e3mk],
.tab-button.active[b-wmc4o5e3mk] {
    display: none;
}

[b-wmc4o5e3mk] .nav-tabs {
    margin-bottom: 1rem;
    border-bottom: 2px solid #000061;
}

[b-wmc4o5e3mk] .nav-tabs .nav-link.active {
    color: #000061;
    font-weight: 600;
    border-bottom: 2px solid #000061;
}

.related-approvals[b-wmc4o5e3mk] {
    padding: 0.5rem;
    margin: 0.5rem 0;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #000061;
}

.related-approvals h6[b-wmc4o5e3mk] {
    color: #000061;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.related-approvals .table[b-wmc4o5e3mk] {
    margin-bottom: 0;
}

.approval-count[b-wmc4o5e3mk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: #000061;
    color: white;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.approval-progress[b-wmc4o5e3mk] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.approval-step[b-wmc4o5e3mk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.75rem;
    background: #f0f0f0;
}

.approval-step.pending[b-wmc4o5e3mk] {
    background: #fff3cd;
    color: #856404;
}

.approval-step.approved[b-wmc4o5e3mk] {
    background: #d4edda;
    color: #155724;
}

.approval-step.rejected[b-wmc4o5e3mk] {
    background: #f8d7da;
    color: #721c24;
}

.step-number[b-wmc4o5e3mk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    font-size: 0.7rem;
}

.step-approver[b-wmc4o5e3mk] {
    font-weight: 500;
}

/* Workflow Status Styles */
.workflow-status[b-wmc4o5e3mk] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.workflow-step[b-wmc4o5e3mk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 500;
    background: #f0f0f0;
    cursor: help;
}

.workflow-step.pending[b-wmc4o5e3mk] {
    background: #fff3cd;
    color: #856404;
}

.workflow-step.approved[b-wmc4o5e3mk] {
    background: #d4edda;
    color: #155724;
}

.workflow-step.rejected[b-wmc4o5e3mk] {
    background: #f8d7da;
    color: #721c24;
}

/* Button Group Styles */
.btn-group[b-wmc4o5e3mk] {
    display: flex;
    gap: 4px;
}

.btn-group .ssy-btn-light[b-wmc4o5e3mk],
.btn-group .ssy-btn-red[b-wmc4o5e3mk] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.description-box[b-wmc4o5e3mk] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #000061;
    margin-bottom: 1.5rem;
}

.description-box :deep(h1)[b-wmc4o5e3mk], 
.description-box :deep(h2)[b-wmc4o5e3mk], 
.description-box :deep(h3)[b-wmc4o5e3mk], 
.description-box :deep(h4)[b-wmc4o5e3mk] {
    color: #000061;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.description-box :deep(p)[b-wmc4o5e3mk] {
    margin-bottom: 0.75rem;
}

.description-box :deep(ul)[b-wmc4o5e3mk], 
.description-box :deep(ol)[b-wmc4o5e3mk] {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .layout-container[b-wmc4o5e3mk] {
        flex-direction: column;
        height: calc(100vh - 140px);
    }

    .select-list[b-wmc4o5e3mk] {
        position: fixed;
        width: 100%;
        left: -100%;
        top: 140px;
        bottom: 0;
        z-index: 1000;
        background: white;
        transition: left 0.3s ease;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

    .select-list.open[b-wmc4o5e3mk] {
        left: 0;
    }

    .main-content[b-wmc4o5e3mk] {
        margin-left: 0;
        padding: 0.5rem;
        max-height: calc(100vh - 140px);
        margin-top: 60px;
    }

    .mobile-header[b-wmc4o5e3mk] {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        background: white;
        padding: 0.75rem;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .mobile-toggle[b-wmc4o5e3mk] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 8px;
        border: none;
        background: whitesmoke;
        cursor: pointer;
        z-index: 1001;
        border-radius: 50%;
    }

    .mobile-toggle:hover[b-wmc4o5e3mk] {
        background-color: rgba(0,0,97,0.05);
    }

    .mobile-overlay.open[b-wmc4o5e3mk] {
        display: block;
    }

    .card[b-wmc4o5e3mk] {
        margin-bottom: 1rem;
    }

    .table-responsive-mobile[b-wmc4o5e3mk] {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .col-md-6[b-wmc4o5e3mk] {
        width: 100%;
    }

    [b-wmc4o5e3mk] .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .billing-table-wrapper[b-wmc4o5e3mk] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }
}

.mobile-overlay[b-wmc4o5e3mk] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

@media (max-width: 768px) {
    .mobile-overlay.open[b-wmc4o5e3mk] {
        display: block;
    }
}

/* Matrix mode styles */
.layout-container.matrix-mode[b-wmc4o5e3mk] {
    padding: 0;
    height: calc(100vh - 120px);
    overflow: hidden;
}

.layout-container.matrix-mode .main-content[b-wmc4o5e3mk] {
    margin-left: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.layout-container.matrix-mode .card[b-wmc4o5e3mk] {
    margin: 0;
    border: none;
    border-radius: 0;
    height: 100%;
}

.layout-container.matrix-mode .card-body[b-wmc4o5e3mk] {
    height: 100%;
}

/* Adjust matrix container in full screen mode */
.layout-container.matrix-mode .matrix-container[b-wmc4o5e3mk] {
    height: calc(100vh - 180px);
    max-height: none;
}

.top-left-clear[b-wmc4o5e3mk] {
    position: absolute;
    top: calc(55px + 32px);
    left: 15px;
}
/* /Components/Pages/SubscriptionsManager/SubscriptionsManagerManageUser.razor.rz.scp.css */
:global(.autocomplete-list-fts)[b-n7x2v7ss4h],
:global(.dropdown-menu.autocomplete-list-fts)[b-n7x2v7ss4h],
:global(.dropdown-menu[class*='autocomplete-list'])[b-n7x2v7ss4h],
:global(ul[class*='autocomplete-list'])[b-n7x2v7ss4h] {
    border: 3px solid red !important;
    border-radius: 0.3rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    background: #fff !important;
    margin-top: 2px !important;
    padding: 0 !important;
    z-index: 1002 !important;
    min-width: 220px;
    max-width: 100%;
    outline: none !important;
    transition: border-color 0.18s;
}


:global(.autocomplete-list-fts)[b-n7x2v7ss4h],
:global(.dropdown-menu.autocomplete-list-fts)[b-n7x2v7ss4h] {
    border: 2px solid #2563eb !important;
    border-radius: 0.3rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
    background: #fff !important;
    margin-top: 2px !important;
    padding: 0 !important;
    z-index: 1002 !important;
    min-width: 220px;
    max-width: 100%;
    outline: none !important;
    transition: border-color 0.18s;
}

.autocomplete-list-fts .dropdown-item[b-n7x2v7ss4h] {
    border-left: 3px solid transparent;
    padding: 0.6rem 1rem;
    font-size: 0.98rem;
    background: none;
    border-radius: 0 !important;
    transition: background 0.15s, border-color 0.15s;
}

.autocomplete-list-fts .dropdown-item:hover[b-n7x2v7ss4h],
.autocomplete-list-fts .dropdown-item:focus[b-n7x2v7ss4h] {
    background-color: #eff6ff !important;
    border-left: 3px solid #2563eb !important;
}

.autocomplete-list-fts .dropdown-item.active[b-n7x2v7ss4h] {
    background-color: #eff6ff !important;
    border-left: 3px solid #2563eb !important;
    color: #2563eb !important;
}

/* SSYFTS-inspired search bar styles */
:root[b-n7x2v7ss4h] {
    --border-color: #d1d5db;
    --header-bg: #f3f4f6;
    --highlight-color: #2563eb;
    --highlight-bg: #eff6ff;
    --accent-color: #000061;
}

.search-container[b-n7x2v7ss4h] {
    width: 100%;
    border-radius: 0.5rem;
    padding: 3px;
    background-color: #f0f4ff;
    box-shadow: 0 2px 6px rgba(0, 0, 97, 0.1);
}

.search-bar-container .input-group[b-n7x2v7ss4h] {
    margin: 0;
    position: relative;
}

.search-bar.form-control[b-n7x2v7ss4h] {
    padding: 0.4rem;
    padding-right: 1.5rem !important;
    font-size: 0.9rem;
    line-height: 1.1;
    border-radius: 0.3rem;
    border: 2px solid #2563eb;
    background-color: white;
    color: black;
    height: 42px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.search-bar.form-control[b-n7x2v7ss4h]::placeholder {
    color: #999999;
}

.search-bar.form-control:focus[b-n7x2v7ss4h] {
    color: black;
    background-color: white;
    border-color: #000061;
    border-width: 2px;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 97, 0.25);
    outline: none;
}

.search-bar.form-control:focus-visible[b-n7x2v7ss4h] {
    outline: black auto 1px;
}

.input-group > button.btn[b-n7x2v7ss4h] {
    padding: 0.2rem;
    font-size: 0.8rem;
    background: transparent;
    color: var(--accent-color) !important;
    right: 0.3rem !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    z-index: 2;
}

.input-group > ul.dropdown-menu.autocomplete-list[b-n7x2v7ss4h] {
    width: 100%;
    transform: translate(0, 2.8rem) !important;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) transparent;
    inset: inherit !important;
    border-radius: 0.4rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    border: 2px solid #2563eb !important;
    padding: 0;
    position: absolute;
    left: 0;
    z-index: 10;
    background: #fff;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 2px;
    transition: box-shadow 0.18s, border-color 0.18s;
}

.dropdown-item[b-n7x2v7ss4h] {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
}

.dropdown-item:hover[b-n7x2v7ss4h],
.dropdown-item:focus[b-n7x2v7ss4h] {
    background-color: var(--highlight-bg);
    border-left: 3px solid var(--highlight-color);
}

.dropdown-item.active[b-n7x2v7ss4h] {
    background-color: var(--highlight-bg);
    border-left: 3px solid var(--highlight-color);
    color: var(--highlight-color);
}

/* User information card */
.card[b-n7x2v7ss4h] {
    border-radius: 0 !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.card-header[b-n7x2v7ss4h] {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
}

.card-body[b-n7x2v7ss4h] {
    padding: 1.5rem;
}

/* Definition list styling */
dl.row[b-n7x2v7ss4h] {
    margin-bottom: 0;
}

dt[b-n7x2v7ss4h] {
    font-weight: 600;
    color: #4b5563;
}

dd[b-n7x2v7ss4h] {
    margin-bottom: 0.75rem;
}

/* Department selection styles */
.form-select[b-n7x2v7ss4h] {
    height: 46px;
    padding: 0.625rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0.3rem;
    background-position: right 0.75rem center;
    transition: border-color 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-select:focus[b-n7x2v7ss4h] {
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

.btn-primary[b-n7x2v7ss4h] {
    height: 46px;
    padding: 0.625rem 1.5rem;
    background-color: #2563eb;
    border: none;
    border-radius: 0.3rem;
    font-weight: 500;
    color: white !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.btn-primary:hover:not(:disabled)[b-n7x2v7ss4h] {
    background-color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.btn-primary:disabled[b-n7x2v7ss4h] {
    background-color: #93c5fd;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Alert styling */
.alert[b-n7x2v7ss4h] {
    border-radius: 0;
    border-left: 4px solid #60a5fa;
    background-color: #f0f9ff;
    color: #0369a1;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.alert-warning[b-n7x2v7ss4h] {
    border-left: 4px solid #eab308;
    background-color: #fefce8;
    color: #854d0e;
}

/* Table styling */
.user-table-container[b-n7x2v7ss4h] {
    overflow-x: auto;
    margin-bottom: 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
}

.user-table[b-n7x2v7ss4h] {
    min-width: 700px;
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.user-table th[b-n7x2v7ss4h], .user-table td[b-n7x2v7ss4h] {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.user-table th[b-n7x2v7ss4h] {
    background-color: var(--header-bg);
    font-weight: 600;
    color: #374151;
    position: sticky;
    top: 0;
    z-index: 1;
}

.user-table th:not(:last-child)[b-n7x2v7ss4h],
.user-table td:not(:last-child)[b-n7x2v7ss4h] {
    border-right: 1px solid #f3f4f6;
}

.user-table tbody tr:last-child td[b-n7x2v7ss4h] {
    border-bottom: none;
}

.user-table tbody tr:hover[b-n7x2v7ss4h] {
    background-color: #fafafa;
}

.user-table tbody tr:nth-child(even)[b-n7x2v7ss4h] {
    background-color: #fcfcfc;
}

/* Checkbox styling */
input[type="checkbox"][b-n7x2v7ss4h] {
    width: 16px;
    height: 16px;
    cursor: not-allowed;
}

/* Department assignment section */
.department-assignment[b-n7x2v7ss4h] {
    background-color: #f0f7ff;
    border: 2px solid #2563eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    margin-bottom: 2rem;
}

/* Department assignment card styling */
.department-assignment-card[b-n7x2v7ss4h] {
    padding: 1.25rem;
    background-color: #f0f7ff;
    border: 1px solid var(--highlight-color);
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
}

.department-assignment-card h5[b-n7x2v7ss4h] {
    color: var(--highlight-color);
    font-weight: 600;
    font-size: 1.1rem;
}

/* Permission toggle styling */
.permission-toggle[b-n7x2v7ss4h] {
    height: 1.5rem;
    width: 3rem;
    cursor: pointer !important;
    background-color: #ccc;
    border-color: #aaa;
    transition: all 0.2s;
    position: relative;
    opacity: 1 !important;
    pointer-events: all !important;
}

.permission-toggle:checked[b-n7x2v7ss4h] {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
}

.permission-toggle:focus[b-n7x2v7ss4h] {
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
    border-color: #2563eb !important;
}

.form-check-label[b-n7x2v7ss4h] {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    transition: all 0.2s;
}

@media (max-width: 900px) {
    .user-table th[b-n7x2v7ss4h], .user-table td[b-n7x2v7ss4h] {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .user-table[b-n7x2v7ss4h] {
        min-width: 600px;
    }

    .card-body[b-n7x2v7ss4h] {
        padding: 1rem;
    }
}

@media (max-width: 600px) {
    .user-table th[b-n7x2v7ss4h], .user-table td[b-n7x2v7ss4h] {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .user-table[b-n7x2v7ss4h] {
        min-width: 450px;
    }

    dt[b-n7x2v7ss4h] {
        margin-bottom: 0.25rem;
    }
}

/* Enhanced department field styling */
.department-field[b-n7x2v7ss4h] {
    position: relative;
}

.department-select[b-n7x2v7ss4h] {
    min-width: 200px;
    transition: all 0.2s ease;
}

.department-select:focus + .save-department-btn[b-n7x2v7ss4h] {
    opacity: 1;
}

.save-department-btn[b-n7x2v7ss4h] {
    height: auto;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.save-department-btn:hover[b-n7x2v7ss4h] {
    transform: translateY(-1px);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

/* Make checkboxes in the table a bit nicer */
.user-table input[type="checkbox"][b-n7x2v7ss4h] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    border: 2px solid #cbd5e1;
    border-radius: 3px;
}

/* Department Assignment Section */
.department-assignment-section[b-n7x2v7ss4h] {
    background-color: #f0f7ff;
    border-top: 1px solid #d1e0ff;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-radius: 0.375rem;
    padding: 1.5rem;
}

.department-assignment-section h5[b-n7x2v7ss4h] {
    color: #2563eb;
    font-weight: 600;
    font-size: 1.1rem;
}

.department-assign-button[b-n7x2v7ss4h] {
    white-space: nowrap;
    min-width: 160px;
}

.department-assign-button:disabled[b-n7x2v7ss4h] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* General card improvements */
.card[b-n7x2v7ss4h] {
    border-radius: 0.375rem !important;
    overflow: hidden;
}

.card-header[b-n7x2v7ss4h] {
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
}

/* Make form-select look more like the screenshot */
.form-select[b-n7x2v7ss4h] {
    height: 38px;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    background-color: #fff;
    flex: 1;
    min-width: 200px;
}

/* Combined form styling */
form[b-n7x2v7ss4h] {
    position: relative;
}

/* Save all button styling */
.save-all-button[b-n7x2v7ss4h] {
    min-width: 140px;
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    background-color: #2563eb;
    border-color: #1d4ed8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.save-all-button:hover:not(:disabled)[b-n7x2v7ss4h] {
    background-color: #1d4ed8;
    border-color: #1e40af;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.save-all-button:disabled[b-n7x2v7ss4h] {
    background-color: #93c5fd;
    border-color: #60a5fa;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Unified form styling */
.department-field[b-n7x2v7ss4h] {
    position: relative;
    width: 100%;
}

.department-field .form-select[b-n7x2v7ss4h] {
    margin-bottom: 0.3rem;
    border-color: #d1d5db;
    border-radius: 0.25rem;
    height: 38px;
}

.department-field .form-select:focus[b-n7x2v7ss4h] {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

/* Make alert nicer */
.alert-success[b-n7x2v7ss4h] {
    background-color: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    animation: fadeIn-b-n7x2v7ss4h 0.5s;
}

@keyframes fadeIn-b-n7x2v7ss4h {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Make form sections more organized */
h5[b-n7x2v7ss4h] {
    color: #4b5563;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.card-body dl[b-n7x2v7ss4h] {
    margin-bottom: 0;
}

.card-body dt[b-n7x2v7ss4h] {
    color: #4b5563;
    font-weight: 600;
}

/* Form actions styling */
.form-actions[b-n7x2v7ss4h] {
    border-top: 1px solid #e5e7eb;
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.save-all-button[b-n7x2v7ss4h] {
    background-color: #2563eb;
    border-color: #1d4ed8;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    min-width: 150px;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.save-all-button:hover:not(:disabled)[b-n7x2v7ss4h] {
    background-color: #1d4ed8;
    border-color: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

.save-all-button:disabled[b-n7x2v7ss4h] {
    opacity: 0.65;
    cursor: not-allowed;
    background-color: #93c5fd;
    border-color: #60a5fa;
}

/* Status message container */
.status-message-container[b-n7x2v7ss4h] {
    min-height: 76px; /* Height of the alert + margins */
}

/* /Components/Pages/Tankers/ApiSetup/TankerRatesSetup.razor.rz.scp.css */

/* /Components/Pages/Tankers/BrokerDashboard/BrokerDashboard_00.razor.rz.scp.css */
.container-fluid[b-66a1v0wo46] {
    width: calc(100% - 4rem);
}
@media (max-width: 576px) {
    .container-fluid[b-66a1v0wo46] {
        width: 100%;
    }
}

.broker-dashboard-container .vessel-tab-quick-links-container[b-66a1v0wo46]  .quick-links-component {
    background: #000061;
    height: 100%;
}

.vessel-tab-load-container[b-66a1v0wo46],
.vessel-tab-fundamentals-container[b-66a1v0wo46] {
    background: white;
    border: 1px solid #009DC9;
}

.vessel-tab-load-container[b-66a1v0wo46] {
    min-height: 430px;
}

.vessel-tab-fundamentals-container[b-66a1v0wo46] {
    min-height: 350px;
}

.vessel-tab-load-container > .ssy-colour-lw[b-66a1v0wo46],
.vessel-tab-fundamentals-container > .ssy-colour-lw[b-66a1v0wo46]  {
    max-height: fit-content;
}

.vessel-tab-load-container .fcicon[b-66a1v0wo46],
.vessel-tab-ffa-container .fcicon[b-66a1v0wo46],
.vessel-tab-fundamentals-container .fcicon[b-66a1v0wo46] {
    width: 1.5em;
}

.vessel-tab-load-container .fcdesc[b-66a1v0wo46],
.vessel-tab-ffa-container .fcdesc[b-66a1v0wo46],
.vessel-tab-fundamentals-container .fcdesc[b-66a1v0wo46] {
    text-align: left;
    width: 12em;
    padding: 5px 15px 5px 5px;
}

.vessel-tab-load-container .fcprice[b-66a1v0wo46],
.vessel-tab-ffa-container .fcprice[b-66a1v0wo46],
.vessel-tab-fundamentals-container .fcprice[b-66a1v0wo46] {
    text-align: right;
    width: 8em;
    padding: 5px 15px 5px 5px;
}

.vessel-tab-load-container .negNum[b-66a1v0wo46],
.vessel-tab-ffa-container .negNum[b-66a1v0wo46],
.vessel-tab-fundamentals-container .negNum[b-66a1v0wo46] {
    color: red;
}

.vessel-tab-load-container .posNum[b-66a1v0wo46],
.vessel-tab-ffa-container .posNum[b-66a1v0wo46],
.vessel-tab-fundamentals-container .posNum[b-66a1v0wo46] {
    color: darkgreen;
}

.vessel-tab-ffa-container[b-66a1v0wo46]  h2,
.vessel-tab-quick-links-container[b-66a1v0wo46]  h2 {
    padding-top: 0.5rem;
}

.vessel-tab-ffa-container h2[b-66a1v0wo46] {
    /* needed for now can be removed later*/
    text-align: center;
}

.vessel-tab-ffa-container .ssy-radio-main.radio-btns[b-66a1v0wo46] {
    margin: 0.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
    gap: 0;
    align-items: center;
}

.vessel-tab-ffa-container .ssy-radio-main.radio-btns > div[b-66a1v0wo46] {
    display: flex;
    justify-content: center;
}

.vessel-tab-ffa-container .ssy-radio-main.radio-btns .radio-label[b-66a1v0wo46] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 7.2vw;
    height: 35px;
    margin: 0;
}

.vessel-tab-ffa-container .ssy-radio-main input:checked + label[b-66a1v0wo46]{
    background-color: #000061;
}

.vessel-tab-fundamentals-container .market-commentary p[b-66a1v0wo46] {
    margin: 0 0.5rem 0.25rem 0.5rem;
    font-size: 0.95rem;
}
.vessel-tab-fundamentals-container .market-commentary p:first-child[b-66a1v0wo46] {
    /*margin-top: 0.5rem;*/
    margin-bottom: 0.5rem;
}

.vessel-tab-quick-links-container[b-66a1v0wo46]  h2 {
    color: white;
}

.ssy-radio-main[b-66a1v0wo46] {
    display: inline-flex;
    overflow: initial;
    margin-bottom: 0;
}

.loading-container[b-66a1v0wo46] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
}

.loading-spinner[b-66a1v0wo46] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000061;
    border-radius: 50%;
    animation: spinner-b-66a1v0wo46 1.5s linear infinite;
    margin-bottom: 15px;
}

@keyframes spinner-b-66a1v0wo46 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Components/Pages/Tankers/Reports/TankerWeekly/SnP.razor.rz.scp.css */
/* /Components/Pages/Tankers/TankerFwdPrices.razor.rz.scp.css */
/* Date Selector */
[b-li3qsaemrt] .ssy-date-selector {
    font-size: 1.5em;
    color: #009DC9;
}
[b-li3qsaemrt] .ssy-date-selector time {
    font-weight: 600;
}

/* Table style */
.positive[b-li3qsaemrt] {
    color: mediumseagreen !important;
}

.negative[b-li3qsaemrt] {
    color: crimson !important;
}
.ssy-table-lw td[b-li3qsaemrt], .ssy-table-lw th[b-li3qsaemrt] {
    padding: .25rem;
}
.cursor-pointer[b-li3qsaemrt] {
    cursor: pointer;
}
.tanker-fwd-prices[b-li3qsaemrt]  .text-bold,
.text-bold[b-li3qsaemrt] {
    font-weight: bold;
}

/* settings modal */
.tanker-fwd-prices[b-li3qsaemrt]  .displayed-routes,
.tanker-fwd-prices[b-li3qsaemrt]  .hidden-routes{
    min-height: 35px;
}
.tanker-fwd-prices[b-li3qsaemrt]  .displayed-routes > div,
.tanker-fwd-prices[b-li3qsaemrt]  .hidden-routes > div {
    background: #009DC9;
    color: white;
    border-left: 1px solid white;
    border-top: 1px solid white;
}
.tanker-fwd-prices[b-li3qsaemrt]  .hidden-routes > div {
    background: #000061;
}



/* staff export popup */
.tanker-fwd-prices[b-li3qsaemrt]  .tfp-export-note {
    margin-bottom: .75rem;
}
.tanker-fwd-prices[b-li3qsaemrt]  .tfp-export-routes {
    max-height: 280px;
    overflow-y: auto;
}
.tanker-fwd-prices[b-li3qsaemrt]  .tfp-export-route {
    display: flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
}

/* loading style */
.loading-container[b-li3qsaemrt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
}

.loading-spinner[b-li3qsaemrt] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000061;
    border-radius: 50%;
    animation: spinner-b-li3qsaemrt 1.5s linear infinite;
    margin-bottom: 15px;
}

@keyframes spinner-b-li3qsaemrt {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Components/Pages/Tankers/TankerPriceExtractor/TankerPriceExtractor.razor.rz.scp.css */
.tankerextractPageLayout[b-evuffx5o7g] {
    display: grid;
    grid-template-columns: 320px auto;
    gap: 20px;
}

.tankerextractbox[b-evuffx5o7g] {
    border: 1px solid #009DC9;
}

.tankerextractdatepicker[b-evuffx5o7g] {
}

.tankerextractroutepicker[b-evuffx5o7g] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 20px;
}

.tankerextractroutepicker-ul[b-evuffx5o7g] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    .tankerextractroutepicker-ul .chkbox[b-evuffx5o7g] {
        margin: 0 3px 0 0;
        vertical-align: middle;
    }


    .tankerextractroutepicker-ul li[b-evuffx5o7g] {
        text-decoration: none;
    }

        .tankerextractroutepicker-ul li:hover[b-evuffx5o7g] {
            background-color: #B5CBD6;
        }

.tankerextractroutepicker-tbl tr:hover[b-evuffx5o7g] {
    background-color: #B5CBD6;
}

.tankerextractroutepicker-tbl td[b-evuffx5o7g] {
    padding-right: 30px;
}

.tankerextractroutepicker-tbl .delete[b-evuffx5o7g] {
    cursor: pointer;
    padding-right: 3px;
}

    .tankerextractroutepicker-tbl .delete:hover[b-evuffx5o7g] {
        font-weight: 700;
        color: white;
    }

.tankerextractoutput-tbl th:not(:first-child)[b-evuffx5o7g] {
    text-align: center;
    border: 1px solid #B5CBD6;
}

.tankerextractoutput-tbl[b-evuffx5o7g] {
    text-align: right;
}

    .tankerextractoutput-tbl tr:hover[b-evuffx5o7g] {
        background-color: #B5CBD6;
    }

    .tankerextractoutput-tbl td:first-child[b-evuffx5o7g], .tankerextractoutput-tbl th:first-child[b-evuffx5o7g] {
        text-align: left;
    }

    .tankerextractoutput-tbl th label[b-evuffx5o7g] {
        font-size: 0.8rem;
        font-weight: normal;
        color: #163E9F;
        font-style: italic;
    }

.tankerextractoutpup-btn-text[b-evuffx5o7g] {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 300px auto;
    align-items: center;
}

.tankerextractoutput-c3y[b-evuffx5o7g] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.disclaimer-accordion[b-evuffx5o7g] {
    background-color: #B5CBD6;
    color: #000061;
    cursor: pointer;
    padding: 2px 0 2px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 0.8rem;
    transition: 0.4s;
}

    .disclaimer-accordion:hover[b-evuffx5o7g] {
        background-color: #405864;
        color: white;
    }
/* /Components/Pages/Towage/Representation.razor.rz.scp.css */
/* /Components/Shared/ExpandableText.razor.rz.scp.css */
.expandable-text[b-2prj5d1wwy] {
    position: relative;
    padding: 1rem;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #000061;
}

.expandable-text h3[b-2prj5d1wwy] {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #000061;
    font-size: 1.25rem;
}

.truncated-text[b-2prj5d1wwy], .full-text[b-2prj5d1wwy] {
    line-height: 1.6;
    color: #333;
}

.expand-button[b-2prj5d1wwy] {
    background: none;
    border: none;
    color: #000061;
    padding: 0;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
}

.expand-button:hover[b-2prj5d1wwy] {
    color: #000033;
}

[b-2prj5d1wwy] h1, [b-2prj5d1wwy] h2, [b-2prj5d1wwy] h3, [b-2prj5d1wwy] h4 {
    color: #000061;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

[b-2prj5d1wwy] p {
    margin-bottom: 0.75rem;
}

[b-2prj5d1wwy] ul, [b-2prj5d1wwy] ol {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

[b-2prj5d1wwy] code {
    background: #eee;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.9em;
}

[b-2prj5d1wwy] blockquote {
    border-left: 2px solid #ccc;
    margin-left: 0;
    padding-left: 1rem;
    color: #666;
}