@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.mnccjmrpdk.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-dajl1j24wi]{
    height: calc(4.5rem + 2px);
    min-height: calc(4.5rem + 2px);
    display: flex;
}

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

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

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

#two-factor-code[b-dajl1j24wi] {
    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-n9sradxpfo] {
    width: 100%;
}
@media (min-width: 1000px) {
    .custom-claims-table[b-n9sradxpfo] {
        min-width: 35%;
        max-width: 50%;
    }
}
.select-btn.add:hover[b-n9sradxpfo] {
    background-color: #8CD47E;
    font-weight: normal;
}
.select-btn.edit:hover[b-n9sradxpfo] {
    background-color: #F7A506;
    font-weight: normal;
}
.select-btn.remove:hover[b-n9sradxpfo] {
    background-color: #FF6961;
    font-weight: normal;
}
/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
/* ── App shell ──────────────────────────────────────── */

.shop-front-container[b-uvyuqb6ygb] {
    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-uvyuqb6ygb] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ssy-navbar-container[b-uvyuqb6ygb]{
    /*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-uvyuqb6ygb] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}
.ssy-navbar-title .ssy-nav-Logo[b-uvyuqb6ygb] {
    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-uvyuqb6ygb] {
    animation: nav-ssyLogo-colorWave 6s ease-in-out infinite alternate;
}

.ssy-navbar-title .navigator-text[b-uvyuqb6ygb]{
    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-uvyuqb6ygb] {
    animation: nav-ssyLogo-colorWave 6s ease-in-out infinite alternate;
}

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

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

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

.ssy-navbar-container .ssy-navbar-links ul[b-uvyuqb6ygb] {
    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-uvyuqb6ygb]{
    display: flex;
    flex-direction: row;
}

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

.ssy-navbar-container .ssy-navbar-links .ssy-btn-theme[b-uvyuqb6ygb],
.ssy-navbar-container .ssy-navbar-links .ssy-btn-ssyglobal[b-uvyuqb6ygb] {
    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-uvyuqb6ygb] {
    height: 20px;
}

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

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

.acc-login-panel[b-uvyuqb6ygb] {
    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-uvyuqb6ygb]::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-uvyuqb6ygb] {
    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-uvyuqb6ygb] {
    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-uvyuqb6ygb 0.8s ease both;
    z-index: 1;
}

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

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

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

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

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

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

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

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

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

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

[b-uvyuqb6ygb] .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-uvyuqb6ygb] .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-uvyuqb6ygb] .acc-body-slot .form-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #4a6080;
    font-weight: 600;
}

[b-uvyuqb6ygb] .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-uvyuqb6ygb] .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-uvyuqb6ygb] .acc-body-slot a {
    color: #1a6fc4;
    font-size: 11.5px;
}

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

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

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

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

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

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

@keyframes accCompassSpin-b-uvyuqb6ygb {
    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-uvyuqb6ygb] { grid-template-columns: 1fr 320px; }
}

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

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

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

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

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

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

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

.mtg-body[b-6wf6iczy3n] {
    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-6wf6iczy3n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    min-width: 0;
}

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

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

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

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

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

.mtg-card[b-6wf6iczy3n] {
    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-6wf6iczy3n 0.5s ease both;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.mtg-card:hover[b-6wf6iczy3n] {
    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-6wf6iczy3n {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mtg-card-title[b-6wf6iczy3n] {
    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-6wf6iczy3n]::before {
    content: '';
    width: 3px;
    height: 11px;
    background: #1a6fc4;
    border-radius: 2px;
    flex-shrink: 0;
}

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

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

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

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

.mtg-subtitle-card p[b-6wf6iczy3n] {
    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-6wf6iczy3n] {
    font-weight: 600;
    color: #ffffff;
}

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

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

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

.mtg-table thead th[b-6wf6iczy3n] {
    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-6wf6iczy3n] {
    text-align: right;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mtg-news-item[b-6wf6iczy3n] {
    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-6wf6iczy3n] {
    background: #dbeafe;
    border-color: rgba(30, 58, 138, 0.2);
}

.mtg-news-date[b-6wf6iczy3n] {
    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-6wf6iczy3n] {
    display: block;
    font-size: 15px;
    color: #1e3a8a;
    font-weight: 700;
    line-height: 1.1;
}

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

.mtg-news-body h4[b-6wf6iczy3n] {
    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-6wf6iczy3n] {
    font-size: 10.5px;
    color: #4a6080;
    line-height: 1.4;
    font-family: 'DM Sans', sans-serif;
}

.mtg-news-author[b-6wf6iczy3n] {
    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-6wf6iczy3n] { padding: 12px 16px 12px 18px; gap: 10px; }
}

@media (max-width: 1050px) {
    .mtg-body[b-6wf6iczy3n] { flex-direction: column; overflow-y: auto; }
    .mtg-left-col[b-6wf6iczy3n], .mtg-right-col[b-6wf6iczy3n] { flex: none; }
    .mtg-curves-grid[b-6wf6iczy3n] { grid-template-rows: repeat(3, auto); }
    .mtg-chart-card[b-6wf6iczy3n] { min-height: 200px; }
    .mtg-news-card[b-6wf6iczy3n]  { min-height: 220px; }
}
/* /Components/Account/Shared/OldAccountLayout.razor.rz.scp.css */
.login-main[b-7fehws0b3v]{
    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-7fehws0b3v] {
        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-7fehws0b3v] {
        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-7fehws0b3v] {
    background-color: rgb(181, 203, 214, 0.88);
    border-radius: 1rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

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

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

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

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

.marquee[b-7fehws0b3v] {
    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-7fehws0b3v] {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    width: auto;
    left: 0;
    animation: marqueeAnim-b-7fehws0b3v 90s linear infinite; /* Increased from 60s to 90s to make it slower */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


.selected-year[b-ldgbq1jdpt] {
    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-n4k7oc1bjs] {
    padding-left: 2rem;
    display: flex;
    gap: 2rem;
    justify-content: flex-start;
    margin-bottom: 5px;
}

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.dash-alert-chip-row[b-07iifwtl39]  .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: 700;
    line-height: 1.2;
    padding: 5px 8px;
}

.dash-alert-chip-row[b-07iifwtl39]  .dash-alert-chip strong {
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
    font-weight: 900;
}
/* /Components/Common/DashboardComponents_HA/DashboardDiagPanel.razor.rz.scp.css */
.ssy-diag-panel[b-dy3mqxv71f] {
    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-dy3mqxv71f] {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgb(0 0 0 / 28%);
    cursor: pointer;
}

.ssy-diag-panel .ssy-diag-panel__drawer[b-dy3mqxv71f] {
    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-dy3mqxv71f] {
    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-dy3mqxv71f],
.ssy-diag-panel h3[b-dy3mqxv71f],
.ssy-diag-panel p[b-dy3mqxv71f] {
    margin: 0;
}

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

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

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

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

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

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

.ssy-diag-panel .ssy-diag-panel__tab[b-dy3mqxv71f] {
    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-dy3mqxv71f],
.ssy-diag-panel .ssy-diag-panel__tab--active[b-dy3mqxv71f] {
    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-dy3mqxv71f],
.ssy-diag-panel .ssy-diag-panel__row-btn[b-dy3mqxv71f] {
    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: 900;
    padding: 5px 8px;
    text-transform: uppercase;
}

.ssy-diag-panel .ssy-diag-panel__reload-all:hover[b-dy3mqxv71f],
.ssy-diag-panel .ssy-diag-panel__row-btn:hover[b-dy3mqxv71f],
.ssy-diag-panel .ssy-diag-panel__close:hover[b-dy3mqxv71f],
.ssy-diag-panel .ssy-diag-panel__expand:hover[b-dy3mqxv71f] {
    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-dy3mqxv71f],
.ssy-diag-panel .ssy-diag-panel__expand[b-dy3mqxv71f] {
    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-dy3mqxv71f] {
    min-width: 0;
    overflow-x: auto;
}

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

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

.ssy-diag-panel .ssy-diag-panel__error[b-dy3mqxv71f] {
    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__error-preview[b-dy3mqxv71f] {
    white-space: pre-wrap;
}

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

    .ssy-diag-panel .ssy-diag-panel__head[b-dy3mqxv71f] {
        flex-direction: column;
    }
}
/* /Components/Common/DashboardComponents_HA/DashCongestion.razor.rz.scp.css */
/* Shared Congestion tab. The Port Ledger renders through SsyTable and shared cell
   components, so this stylesheet owns only page layout and header tools. */

.dash-congestion[b-z1syn74o3m] {
    /* layout (grid + row template) comes from ssy-fit-grid on the root */
    gap: 6px;
}

.dash-congestion[b-z1syn74o3m]  .dashcong-port-ledger {
    min-width: 0;
}

/* The table wrapper stays within its box (the detail grid's one-column phone layout is shared);
   SsyTable owns the scrolling. */
.dash-congestion[b-z1syn74o3m]  .dashcong-ledger-table-wrap {
    min-width: 0;
}

.dash-congestion[b-z1syn74o3m]  .ssy-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* layout-lint: allow internal cells */
}

/* --- ledger header tools (HeaderActions) --- */
/* Toggle, legend and stats on one line; nothing inside shrinks. The card header puts the
   whole group under the title when it does not fit beside it. */
.dash-congestion[b-z1syn74o3m]  .dashcong-ledger-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.dash-congestion[b-z1syn74o3m]  .dashcong-ledger-tools > * {
    flex: 0 0 auto;
}

.dash-congestion[b-z1syn74o3m]  .dashcong-ledger-tools > span {
    color: var(--ssy-dash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.dash-congestion[b-z1syn74o3m]  .dashcong-legend-hot {
    color: var(--ssy-dash-warn);
}

.dash-congestion[b-z1syn74o3m]  .dashcong-legend-cool {
    color: var(--ssy-dash-up);
}
/* /Components/Common/DashboardComponents_HA/DashContextLine.razor.rz.scp.css */
.dash-context-line[b-pgy6m9nte1] {
    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-pgy6m9nte1] {
    justify-content: space-between;
}

.dash-context-line[b-pgy6m9nte1]  .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-wswazga6l9] {
    margin: 0;
    text-transform: uppercase;
}

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

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

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

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

.dash-eyebrow-base[b-wswazga6l9] {
    font-size: var(--ssy-fs-base);
}
/* /Components/Common/DashboardComponents_HA/DashFreshnessPill.razor.rz.scp.css */
/* One freshness look everywhere, matching SsyCard's Period: quiet muted text, no chip, so
   spot / curve / fetched / as-of stamps read as one kind of thing. The bare and pill class
   names are both kept for callers and render identically. */
.dash-freshness[b-dh87fc0e20],
.dash-freshness-bare[b-dh87fc0e20],
.dash-freshness-pill[b-dh87fc0e20] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--ssy-dash-text-muted, #798E98) 75%, #fff);
    font-size: var(--ssy-fs-tiny);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

/* 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-dh87fc0e20] {
    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: 900;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* /Components/Common/DashboardComponents_HA/DashHeatCell.razor.rz.scp.css */
.ssy-heat-cell[b-1u4fno69i6] {
    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-pdmun0y46z] {
    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-pdmun0y46z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

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

.dash-legend-note[b-pdmun0y46z] {
    color: var(--ssy-dash-text-muted, #798E98);
    font-weight: 700;
    font-style: italic;
}
/* /Components/Common/DashboardComponents_HA/DashMacro.razor.rz.scp.css */
/* ============================================================
   Macro tab (shared by the Dry Bulk and LPG dashboards). Console-tight: dense
   grids, small type, minimal whitespace. All selectors scoped to .dash-macro;
   palette from the host shell's --ssy-dash-* vars. Child-component
   internals (SsyGrid / SsyCard) are reached with ::deep.
   ============================================================ */

.dash-macro[b-96ktnsgifg] {
    /* layout (flex column) comes from the root's ssy-fit-flex class */
    gap: 7px;
}

/* ---- direction colours (shared chip classes) ---- */
.dash-macro[b-96ktnsgifg]  .dash-macro-up { color: var(--ssy-dash-up); }
.dash-macro[b-96ktnsgifg]  .dash-macro-dn { color: var(--ssy-dash-down); }

/* ---- command bar controls ---- */
.dash-macro .dash-macro-method-btn[b-96ktnsgifg] {
    margin-left: 0;
}

/* anchor scroll target offset so the sticky toolbar doesn't cover section heads */
.dash-macro [id^="macro-"][b-96ktnsgifg] { scroll-margin-top: 34px; }

/* ---- methodology dialog body (the dialog itself is SsyModal) ---- */
.dash-macro .dash-macro-method-body p[b-96ktnsgifg] { margin: 6px 0; }
.dash-macro .dash-macro-method-body ul[b-96ktnsgifg] { margin: 4px 0; padding-left: 16px; }
.dash-macro .dash-macro-method-body li[b-96ktnsgifg] { margin: 2px 0; }
.dash-macro .dash-macro-method-src[b-96ktnsgifg] { color: var(--ssy-dash-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 ---- */
.dash-macro .dash-macro-recency[b-96ktnsgifg] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}
.dash-macro .dash-macro-recchip[b-96ktnsgifg] {
    border: 1px solid var(--ssy-dash-border);
    border-radius: 3px;
    padding: 0 4px;
}
.dash-macro .dash-macro-recchip em[b-96ktnsgifg] {
    font-style: normal;
    font-weight: 700;
    color: var(--ssy-dash-text-dim);
}

/* ---- sections (layout from ssy-fit-col ssy-fit-fill on the element) ---- */
.dash-macro .dash-macro-sec[b-96ktnsgifg] {
    gap: 5px;
}
.dash-macro .dash-macro-sechead[b-96ktnsgifg] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 2px 1px;
    border-top: 1px solid var(--ssy-dash-divider);
}
.dash-macro .dash-macro-sechead h2[b-96ktnsgifg] {
    margin: 0;
    font-size: var(--ssy-fs-base);
    font-weight: 900;
    color: var(--ssy-dash-brand);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.dash-macro .dash-macro-sechead h2 span[b-96ktnsgifg] {
    font-size: var(--ssy-fs-small);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ssy-dash-text-dim);
}
.dash-macro .dash-macro-breadth-tally[b-96ktnsgifg] {
    margin-left: auto;
    font-size: var(--ssy-fs-small);
    color: var(--ssy-dash-text-dim);
}
.dash-macro .dash-macro-breadth-tally b[b-96ktnsgifg] { font-weight: 900; }

/* SsyGrid is a child component -> reach its root via ::deep */
.dash-macro[b-96ktnsgifg]  .dash-macro-grid {
    gap: 6px;
}

.dash-macro .dash-macro-gap[b-96ktnsgifg] {
    color: var(--ssy-dash-text-muted);
    font-style: italic;
}

/* ---- cycle quadrant key ---- */

/* ---- footer ---- */
.dash-macro .dash-macro-foot[b-96ktnsgifg] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 5px 2px 2px;
    border-top: 1px solid var(--ssy-dash-divider);
    font-size: var(--ssy-fs-tiny);
    color: var(--ssy-dash-text-muted);
}
.dash-macro .dash-macro-foot b[b-96ktnsgifg] { color: var(--ssy-dash-text-dim); }
/* /Components/Common/DashboardComponents_HA/DashMacroHeatGrid.razor.rz.scp.css */
.dash-macro-heatgrid[b-whw2o9urx1] {
    width: 100%;
}
/* /Components/Common/DashboardComponents_HA/DashMacroPmiBreadth.razor.rz.scp.css */
/* PMI breadth: layout and legend only; the table is SsyTable. */

.dash-macro-breadth[b-qbiemrqtdx] {
    width: 100%;
}

.dash-macro-heat-legend[b-qbiemrqtdx] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--ssy-fs-tiny);
    color: var(--ssy-dash-text-muted);
}
.dash-macro-heat-scale[b-qbiemrqtdx] {
    width: 64px;
    height: 8px; /* layout-lint: allow inside card: heat scale bar */
    border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ssy-dash-down, #EB3871) 55%, transparent), transparent, color-mix(in srgb, var(--ssy-dash-up, #01A39E) 55%, transparent));
}
.dash-macro-heat-note[b-qbiemrqtdx] {
    margin-left: auto;
    font-style: italic;
}
/* /Components/Common/DashboardComponents_HA/DashTransits.razor.rz.scp.css */
/* Routes & Transits tab shell (shared by both dashboards). The 32px command bar is
   SsyCommandBar - structure, ticker slots, controls, guide/readout and subtabs all
   live in its scoped css. Root/workspace layout belongs to the ssy-fit-* grammar
   (SsyDashboardShell.razor) - only gaps and typography live here. */

.dash-transits[b-h50mh4lypk] { gap:4px; font-variant-numeric:tabular-nums; color:var(--ssy-dash-text); }
.dash-transits .dash-transits-workspace[b-h50mh4lypk] { gap:4px; }
.dash-transits[b-h50mh4lypk]  button:focus-visible { outline:2px solid var(--ssy-dash-accent); outline-offset:-2px; }
/* /Components/Common/DashboardComponents_HA/DashTransitsChokepoints.razor.rz.scp.css */
/* Chokepoint Transits workspace: viewport-fit grid (seven gates plus the segment
   matrix over the gate monitor, corridors and diverted vessels). 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
   (.dash-transits-chokepoints); a scoped selector without ::deep can
   never match a child component's root element (e.g. an SsyGrid div). */

.dash-transits-chokepoints[b-ib0b67y5gv] { min-width:0; gap:4px; }
.dash-transits-chokepoints[b-ib0b67y5gv]  .ssy-card { min-width:0; min-height:0; }
.dash-transits-chokepoints[b-ib0b67y5gv]  .dash-transits-focus { box-shadow:inset 0 0 0 2px var(--ssy-dash-brand); }
.dash-transits-chokepoints[b-ib0b67y5gv]  .dash-transits-focus .ssy-card-head { background:color-mix(in srgb,var(--ssy-dash-brand) 5%,var(--ssy-dash-surface)); }

/* Table wrappers retain their card width and scroll layout. */
.dash-transits-chokepoints[b-ib0b67y5gv]  .dash-transits-tablewrap,
.dash-transits-chokepoints[b-ib0b67y5gv]  .dash-transits-matrix { width:100%; min-width:0; }
.dash-transits-chokepoints[b-ib0b67y5gv]  .dash-transits-empty { padding:10px 8px; color:var(--ssy-dash-text-muted); font-size:var(--ssy-fs-tiny); }
/* /Components/Common/DashboardComponents_HA/SsyBadge.razor.rz.scp.css */
.ssy-badge[b-qzt1lkgjfw] {
    --ssy-badge-colour: var(--ssy-dash-text-muted, #798E98);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 16px;
    padding: 0 5px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--ssy-badge-colour) 45%, transparent);
    border-radius: 2px;
    background: transparent;
    color: var(--ssy-badge-colour);
    font-size: var(--ssy-fs-micro, 8px);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.ssy-badge.is-info[b-qzt1lkgjfw] { --ssy-badge-colour: var(--ssy-colour-main-crystal-blue, #009DC9); }
.ssy-badge.is-caution[b-qzt1lkgjfw] { --ssy-badge-colour: var(--ssy-colour-palette-golden-yellow, #F7A506); }
.ssy-badge.is-alert[b-qzt1lkgjfw] { --ssy-badge-colour: var(--ssy-colour-palette-crimson-red, #DB303A); }
.ssy-badge.is-positive[b-qzt1lkgjfw] { --ssy-badge-colour: var(--ssy-colour-palette-teal-green, #01A39E); }
.ssy-badge.is-brand[b-qzt1lkgjfw] { --ssy-badge-colour: var(--ssy-colour-main-simpson-blue, #000061); }

.ssy-badge.is-filled[b-qzt1lkgjfw] {
    border-color: var(--ssy-badge-colour);
    background: var(--ssy-badge-colour);
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
}
/* /Components/Common/DashboardComponents_HA/SsyBalticClock.razor.rz.scp.css */
/* Ported from DryBulkDashboard_900_Ffa.razor.css, where these rules lived as
   page-scoped ::deep overrides. They are the component's own now, so the
   wrappers are gone. Colours resolve through the --ssy-dash-* contract the
   host wrapper sets (see .drybulkdash-dash-wrap), never hex literals.

   The clock sits inline in the header like the tabs, with no plate or border of its own:
   times on the left, day track on the right (the track keeps its hairline). */

.ssy-baltic-clock[b-va36y1xjrl] {
    --ssy-baltic-cape: var(--ssy-colour-palette-royal-purple);
    --ssy-baltic-asia: var(--ssy-colour-palette-golden-yellow);
    /* Capped and right-aligned by the host (see __band): the band column is the
       header's slack, and letting the clock eat all of it crowds the tab rail.
       Shrink-only, so a narrow header squeezes the clock rather than the tabs. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    /* Vertical padding is 1px on purpose. The header is budgeted at 38px and the
       tab buttons already stand 34px in it; the clock has to fit that, not raise
       it. Every Dry Bulk tab pays the difference. */
    padding: 1px 0;
    font-variant-numeric: tabular-nums;
}

/* Two columns so the times line up under each other however wide the city
   labels render - a ragged right edge here is the first thing the eye catches. */
.ssy-baltic-clock__zones[b-va36y1xjrl] {
    display: grid;
    grid-template-columns: auto auto;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 0 5px;
    /* 3 rows x 10px = 30px, which with the 1px padding and 1px border lands the
       clock at 34px - the same height as a tab button. Fixed px, not a ratio:
       the row budget is the constraint, so it is the thing to state. */
    line-height: 10px;
    font-size: 9px;
    white-space: nowrap;
}

.ssy-baltic-clock__zones b[b-va36y1xjrl] {
    color: var(--ssy-dash-text-muted, #798e98);
    font-weight: 700;
    letter-spacing: .06em;
}

.ssy-baltic-clock__zones span[b-va36y1xjrl] {
    color: var(--ssy-dash-brand, #000061);
    font-weight: 750;
    text-align: right;
}

/* Wide enough that CAPE and P/S/H do not collide, narrow enough to leave the
   tab rail room. Below ~1180px the label row goes and this can compress further. */
.ssy-baltic-clock__body[b-va36y1xjrl] {
    display: grid;
    grid-template-rows: 15px 10px;
    flex: 0 1 auto;
    width: clamp(230px, 22vw, 400px);
    gap: 1px;
    min-width: 0;
}

.ssy-baltic-clock__track[b-va36y1xjrl] {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ssy-dash-border, #e1e8ed);
    border-radius: 3px;
    background: var(--ssy-dash-surface, #fff);
}

.ssy-baltic-clock__desk[b-va36y1xjrl] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 33.333%;
    width: 41.667%;
    border-left: 1px solid var(--ssy-dash-border-soft, #cedce4);
    border-right: 1px solid var(--ssy-dash-border-soft, #cedce4);
    /* The plain row-active tint is too close to the white track to read as
       structure at 15px tall; the brand wash gives the desk hours an edge. */
    background: color-mix(in srgb, var(--ssy-dash-brand, #000061) 7%, transparent);
}

.ssy-baltic-clock__window[b-va36y1xjrl] {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 4px;
    background: color-mix(in srgb, var(--ssy-dash-accent, #41b6e6) 42%, transparent);
}

/* The 1px surface ring is what keeps a marker legible where it sits on top of
   the desk band or a reporting window. */
.ssy-baltic-clock__mark[b-va36y1xjrl] {
    position: absolute;
    top: 2px;
    bottom: 2px;
    z-index: 2;
    width: 3px;
    border-radius: 2px;
    background: var(--ssy-dash-brand, #000061);
    box-shadow: 0 0 0 1px var(--ssy-dash-surface, #fff);
}

.ssy-baltic-clock__mark.is-cape[b-va36y1xjrl] { background: var(--ssy-baltic-cape); }
.ssy-baltic-clock__mark.is-dry[b-va36y1xjrl] { background: var(--ssy-dash-accent, #41b6e6); }
.ssy-baltic-clock__mark.is-bfa[b-va36y1xjrl] { background: var(--ssy-dash-brand, #000061); }
.ssy-baltic-clock__mark.is-asia[b-va36y1xjrl] { background: var(--ssy-baltic-asia); }

.ssy-baltic-clock__now[b-va36y1xjrl] {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: 2px;
    background: var(--ssy-dash-down, #e4007c);
}

.ssy-baltic-clock__now[b-va36y1xjrl]::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--ssy-dash-down, #e4007c);
    box-shadow: 0 0 0 1.5px var(--ssy-dash-surface, #fff);
}

.ssy-baltic-clock__labels[b-va36y1xjrl] {
    position: relative;
    color: var(--ssy-dash-text-muted, #798e98);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 10px;
    white-space: nowrap;
}

.ssy-baltic-clock__labels span[b-va36y1xjrl] { position: absolute; transform: translateX(-50%); }
.ssy-baltic-clock__labels span:first-child[b-va36y1xjrl] { transform: none; }
/* Left-aligned on the band's own start, not centred on it - centring pushed the
   caption back under ASIA, which is the collision this row was rebuilt to fix. */
.ssy-baltic-clock__labels .is-desk[b-va36y1xjrl] { transform: none; }
.ssy-baltic-clock__labels .is-end[b-va36y1xjrl] { transform: translateX(-100%); }
.ssy-baltic-clock__labels .is-cape[b-va36y1xjrl] { color: var(--ssy-baltic-cape); }
.ssy-baltic-clock__labels .is-dry[b-va36y1xjrl] { color: var(--ssy-dash-accent, #41b6e6); }
.ssy-baltic-clock__labels .is-bfa[b-va36y1xjrl] { color: var(--ssy-dash-brand, #000061); }
.ssy-baltic-clock__labels .is-asia[b-va36y1xjrl] { color: var(--ssy-baltic-asia); }

/* Below this there is no header width for a track anyone could read. The clock is
   context, not a control - nothing depends on it - so it goes rather than degrade
   into a stub or start competing with the tab rail for space. */
@container ssy-dashboard (max-width: 1180px) {
    .ssy-baltic-clock[b-va36y1xjrl] { display: none; }
}
/* /Components/Common/DashboardComponents_HA/SsyBandBar.razor.rz.scp.css */
.ssy-bandbar[b-0cpsvy43vo] {
    width: 100%;
    min-width: 0;
}

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

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

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

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

/* filled "now" dot, coloured by trend */
.ssy-bandmark-primary[b-0cpsvy43vo] {
    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-0cpsvy43vo] {
    background: var(--ssy-dash-down, var(--ssy-colour-palette-vivid-pink, #EB3871));
    box-shadow: 0 0 0 1px var(--ssy-dash-down, var(--ssy-colour-palette-vivid-pink, #EB3871));
}

.ssy-bandmark-primary.ssy-cool[b-0cpsvy43vo] {
    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-0cpsvy43vo] {
    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-0cpsvy43vo] {
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ssy-dash-text-muted, #798E98);
    transform: translate(-50%, -50%);
}
/* /Components/Common/DashboardComponents_HA/SsyBunkerMatrix.razor.rz.scp.css */
.ssy-bunkmatrix[b-vot6o8rbu6] {
    --ssy-bunkmatrix-accent: var(--ssy-colour-main-simpson-blue, #000061);
    --ssy-bunkmatrix-border: #E1E8ED;
    --ssy-bunkmatrix-up: var(--ssy-colour-palette-teal-green, #01A39E);
    --ssy-bunkmatrix-down: var(--ssy-colour-palette-vivid-pink, #EB3871);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The card fills its grid cell so it ends level with the card beside it; the table takes the rest. */
.ssy-bunkmatrix[b-vot6o8rbu6]  .ssy-bunkmatrix-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.ssy-bunkmatrix[b-vot6o8rbu6]  .ssy-bunkmatrix-wrap > .ssyt-wrap {
    height: 100%;
}

.ssy-bunkmatrix[b-vot6o8rbu6]  .ssy-bunkmatrix-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
}

.ssy-bunkmatrix[b-vot6o8rbu6] {
    --ssy-bunkmatrix-col-floor: 46px;
    --ssy-bunkmatrix-port-floor: 128px;
}

/* The shared table sizes itself; it scrolls only when its content really is wider than the card.
   (A pre-migration min-width of 29 x 46px sat on the wrapper and pushed the card off screen.) */
.ssy-bunkmatrix[b-vot6o8rbu6]  .ssy-bunkmatrix-table {
    width: 100%;
}

.ssy-bunkmatrix[b-vot6o8rbu6]  .ssy-bunkmatrix-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    min-width: 0;
    font-size: 9px;
}

.ssy-bunkmatrix[b-vot6o8rbu6]  .ssy-bunkmatrix-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.8;
}

.ssy-bunkmatrix[b-vot6o8rbu6]  .ssy-bunkmatrix-legend-sw {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.ssy-bunkmatrix[b-vot6o8rbu6]  .ssy-bunkmatrix-legend-sw.ssy-bunkmatrix-heat-high {
    background: color-mix(in srgb, var(--ssy-bunkmatrix-down) 55%, transparent);
}

.ssy-bunkmatrix[b-vot6o8rbu6]  .ssy-bunkmatrix-legend-sw.ssy-bunkmatrix-heat-low {
    background: color-mix(in srgb, var(--ssy-bunkmatrix-up) 55%, transparent);
}

.ssy-bunkmatrix-tape[b-vot6o8rbu6] {
    --ssy-bunkmatrix-col-floor: 38px;
    --ssy-bunkmatrix-port-floor: 128px;
}

@media (max-width: 1400px) {
    .ssy-bunkmatrix[b-vot6o8rbu6] {
        --ssy-bunkmatrix-col-floor: 42px;
    }

    .ssy-bunkmatrix-tape[b-vot6o8rbu6] {
        --ssy-bunkmatrix-col-floor: 35px;
    }
}

@media (max-width: 900px) {
    .ssy-bunkmatrix[b-vot6o8rbu6],
    .ssy-bunkmatrix-tape[b-vot6o8rbu6] {
        --ssy-bunkmatrix-col-floor: 33px;
        --ssy-bunkmatrix-port-floor: 116px;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyButton.razor.rz.scp.css */
.ssy-button[b-6cu21g8uc6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* Same height as a compact field box, so a button beside inputs lines up with them. */
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    border-radius: 3px;
    background: var(--ssy-dash-surface, #FFFFFF);
    color: var(--ssy-colour-main-simpson-blue, #000061);
    font: inherit;
    font-size: var(--ssy-fs-small, 10px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.ssy-button.is-regular[b-6cu21g8uc6] {
    height: 28px;
    padding: 0 12px;
    font-size: var(--ssy-fs-base, 11px);
}

.ssy-button:hover:not(:disabled)[b-6cu21g8uc6] {
    border-color: var(--ssy-colour-main-simpson-blue, #000061);
    background: var(--ssy-dash-tint-2, #F4F7F9);
}

.ssy-button.is-primary[b-6cu21g8uc6] {
    border-color: var(--ssy-colour-main-simpson-blue, #000061);
    background: var(--ssy-colour-main-simpson-blue, #000061);
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
}

.ssy-button.is-primary:hover:not(:disabled)[b-6cu21g8uc6] {
    background: color-mix(in srgb, var(--ssy-colour-main-simpson-blue, #000061) 85%, #FFFFFF);
}

.ssy-button.is-quiet[b-6cu21g8uc6] {
    border-color: transparent;
    background: transparent;
}

.ssy-button.is-quiet:hover:not(:disabled)[b-6cu21g8uc6] {
    border-color: transparent;
    background: var(--ssy-dash-tint-2, #F4F7F9);
}

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

.ssy-button:focus-visible[b-6cu21g8uc6] {
    outline: 2px solid var(--ssy-dash-accent, #009DC9);
    outline-offset: 1px;
}

/* Loading: the label keeps its width (so the row does not move), the spinner sits over it. */
.ssy-button.is-loading .ssy-button__label[b-6cu21g8uc6] { visibility: hidden; }

.ssy-button__spinner[b-6cu21g8uc6] {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ssy-button-spin-b-6cu21g8uc6 .8s linear infinite;
}

@keyframes ssy-button-spin-b-6cu21g8uc6 { to { transform: rotate(1turn); } }

/* Inside the navy command bar (but not in a popover panel opened from it, which is white)
   a button takes the bar's tone (tokens from SsyCommandBar), as SsyToggleGroup does: a white
   button on the bar was the recurring "white buttons" fault on every page that put an action
   there. Primary reads as the bar's pressed state, quiet has no border. */
.ssy-cmdbar .ssy-button:not(.ssy-popover__panel *)[b-6cu21g8uc6] {
    height: 20px;
    padding: 0 7px;
    border-color: var(--ssy-bar-line);
    background: transparent;
    color: var(--ssy-bar-text);
    font-size: var(--ssy-fs-micro, 8px);
}
.ssy-cmdbar .ssy-button:not(.ssy-popover__panel *):hover:not(:disabled)[b-6cu21g8uc6] { background: var(--ssy-bar-hover); color: var(--ssy-bar-ink); }
.ssy-cmdbar .ssy-button:not(.ssy-popover__panel *).is-primary[b-6cu21g8uc6] { border-color: rgba(255, 255, 255, .5); background: var(--ssy-bar-on); color: var(--ssy-bar-ink); }
.ssy-cmdbar .ssy-button:not(.ssy-popover__panel *).is-quiet[b-6cu21g8uc6] { border-color: transparent; }
.ssy-cmdbar .ssy-button:not(.ssy-popover__panel *):focus-visible[b-6cu21g8uc6] { outline-color: var(--ssy-bar-ink); }

/* Last, so the touch target also wins over the bar's 20px. */
@media (pointer: coarse) {
    .ssy-button[b-6cu21g8uc6], .ssy-cmdbar .ssy-button:not(.ssy-popover__panel *)[b-6cu21g8uc6] { height: 28px; }
}
/* /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-5vycvze5dn] {
    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, 4px)
        var(--ssy-card-pad-bottom, 6px);
    min-width: 0;
    /* A column, so a table or chart inside can take whatever height the card has left. */
    display: flex;
    flex-direction: column;
}

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

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

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

.ssy-card-title[b-5vycvze5dn] {
    margin: 0;
    /* DESIGN.md card title: navy bold 12px, title case as written (no forced capitals). */
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    flex: 1;
    min-width: 0;
}

/* Optional subtitle after an en dash: grey 11px; wraps under the title when there is no room. */
.ssy-card-desc[b-5vycvze5dn] {
    display: inline-block;
    color: #7F7F7F;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.ssy-card-desc[b-5vycvze5dn]::before {
    content: "\00a0\2013\00a0";
}

.ssy-card-period[b-5vycvze5dn] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--ssy-dash-text-muted, #798E98) 75%, #fff);
    font-size: var(--ssy-fs-tiny);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.ssy-card-title-link[b-5vycvze5dn] {
    all: unset;
    cursor: pointer;
}

.ssy-card-title-link:hover[b-5vycvze5dn],
.ssy-card-title-link:focus-visible[b-5vycvze5dn] {
    text-decoration: underline;
}

.ssy-card-title-link:focus-visible[b-5vycvze5dn] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ssy-card-head-supplement[b-5vycvze5dn] {
    margin: -1px 0 2px;
}

/* Narrow box: the title keeps at least 12rem (or the whole row). Extras - legends, pills,
   toggles - that do not fit beside it wrap onto the next row, left-aligned, instead of
   squeezing the title into a column or spilling past the card's edge. A small extra (the
   expand icon) still sits beside the title. */
@container (max-width: 760px) {
    .ssy-card-head[b-5vycvze5dn] {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 3px;
        column-gap: 6px;
    }

    /* Basis 12rem, not auto: a long title wraps its own text instead of pushing the
       expand icon onto a row of its own. */
    .ssy-card-title[b-5vycvze5dn] {
        flex: 1 1 12rem;
        min-width: min(100%, 12rem);
    }

    .ssy-card-period[b-5vycvze5dn] {
        max-width: 100%;
        white-space: normal;
        line-height: 1.2;
    }
}
/* /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-skfr1ftg04] {
    position: relative;
    height: 100%;
    width: 100%;
}

.ssy-chart-host[data-ssy-select][b-skfr1ftg04]  .highcharts-point {
    cursor: pointer;
}

/* Phone: no chart taller than 260px. A host whose parent gives it no height fell back to
   Highcharts' 400px default, so one chart filled the whole screen. The cap is the box the
   chart reflows into (ObserveResize), so it redraws at the capped height, not clipped. */
@container (max-width: 760px) {
    .ssy-chart-host[b-skfr1ftg04] {
        max-height: var(--ssy-chart-narrow-cap, 260px); /* set by SsyChartCard: taller for stock charts */
    }
}
/* /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-qtjwqz5x4q] {
    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-qtjwqz5x4q] {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.ssy-chart-expand[b-qtjwqz5x4q] {
    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-qtjwqz5x4q] {
    opacity: 1;
}

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

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

/* The narrow-screen chart cap: 260px, or 420px for a stock chart, whose panes and navigator
   cannot share 260px (FFA TECH drew four panes as strips). A rule by chart kind, not per page. */
.ssy-chart-card-slot[b-qtjwqz5x4q] { --ssy-chart-narrow-cap: 260px; }
.ssy-chart-card-slot.is-stock[b-qtjwqz5x4q] { --ssy-chart-narrow-cap: 420px; }

/* 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-qtjwqz5x4q] {
        min-width: 0;
        --ssy-chart-slot-min-h: min(var(--ssy-chart-slot-h, 220px), var(--ssy-chart-narrow-cap));
        height: min(var(--ssy-chart-slot-h, 220px), var(--ssy-chart-narrow-cap));
        contain: layout;
    }
}

/* Phone: the authored design height is a desktop number. Cap the slot (and its floor) at
   var(--ssy-chart-narrow-cap) so a tall desktop chart does not take a whole phone screen. */
@container (max-width: 760px) {
    .ssy-chart-card-slot[b-qtjwqz5x4q] {
        max-height: var(--ssy-chart-narrow-cap);
        min-height: min(var(--ssy-chart-slot-min-h, 0px), var(--ssy-chart-narrow-cap));
    }
}

.ssy-chart-card-actions[b-qtjwqz5x4q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
}
/* /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-yeeqtadwuq] {
    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-yeeqtadwuq] {
    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-yeeqtadwuq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex: 0 0 auto;
}

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

.ssy-chart-expand-dl[b-yeeqtadwuq] {
    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-yeeqtadwuq] {
    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-yeeqtadwuq] {
    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-yeeqtadwuq] {
    margin: 0;
    font-size: var(--ssy-fs-lg);
    font-weight: 900;
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
}

.ssy-chart-expand-chart[b-yeeqtadwuq] {
    flex: 1 1 auto;
    min-height: 0;
}

/* Export editor: physical chart layout is independent of preview zoom. */
.ssy-chart-expand-chart[hidden][b-yeeqtadwuq], .ssy-chart-export-host[hidden][b-yeeqtadwuq] { display: none; }
.ssy-chart-export-host[b-yeeqtadwuq] { display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: 36px minmax(0, 1fr); gap: 0 20px; flex: 1; min-height: 0; color: #243447; }
.ssy-chart-export-host[b-yeeqtadwuq]  button { font: inherit; cursor: pointer; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-toolbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid #E1E8ED; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-toolbar-title { font-size: 13px; color: #536A75; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-back { border: 0; background: transparent; color: #000061; padding: 4px 0; font-size: 13px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-reset { margin-left: auto; font-size: 12px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-sidebar { display: flex; flex-direction: column; min-height: 0; position: relative; border-right: 1px solid #E1E8ED; padding-right: 20px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-controls { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-right: 3px; scrollbar-width: thin; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-section { padding: 8px 0; flex: none; border-bottom: 1px solid #E1E8ED; }
.ssy-chart-export-host[b-yeeqtadwuq]  h4 { margin: 0 0 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #798E98; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-field { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 11px; font-weight: 600; color: #536A75; }
.ssy-chart-export-host[b-yeeqtadwuq]  input, .ssy-chart-export-host[b-yeeqtadwuq]  select { box-sizing: border-box; width: 100%; height: 24px; margin: 0; padding: 2px 6px; min-width: 0; border: 1px solid #D3DFE6; border-radius: 3px; font-size: 12px; color: #243447; background: #fff; font-family: inherit; font-size: 13px; font-weight: 400; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-field-caption { display: none; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-layout-fields { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 8px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-layout-fields .ssy-export-field { display: block; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-layout-fields select { margin-top: 3px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-palettes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 0; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-palette { display: flex; align-items: center; gap: 5px; width: 100%; border: 1px solid #DCE5EB; border-radius: 4px; background: #fff; padding: 4px; color: #405864; font-size: 11px; text-align: left; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-palette[aria-pressed="true"] { border-color: #000061; background: #F2F5F8; color: #000061; box-shadow: inset 3px 0 #000061; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-palette-strip { display: flex; flex: 1; height: 16px; overflow: hidden; border-radius: 2px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-palette-strip i { flex: 1; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-axis-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-axis-row .ssy-export-field { font-size: 11px; white-space: nowrap; gap: 4px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-axis-row select, .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-axis-row input { flex: 1; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-axis-row > .ssy-export-field:only-child { grid-column: 1 / -1; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-axis-bounds { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-axis-hint { margin: 1px 0 3px; font-size: 11px; color: #536A75; line-height: 1.3; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-field-error { grid-column: 1 / -1; color: #A3233F; font-size: 11px; line-height: 1.3; }
.ssy-chart-export-host[b-yeeqtadwuq]  [aria-invalid="true"] { border-color: #A3233F; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-text-fields > .ssy-export-field { display: grid; grid-template-columns: 105px minmax(0,1fr); }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-title-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-title-fields .ssy-export-field { display: grid; grid-template-columns: 58px minmax(0,1fr); font-size: 11px; }
.ssy-chart-export-host.ssy-export-multi-axis[b-yeeqtadwuq]  .ssy-export-title-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ssy-chart-export-host.ssy-export-multi-axis[b-yeeqtadwuq]  .ssy-export-title-fields .ssy-export-field { grid-template-columns: 40px minmax(0,1fr); gap: 3px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-source-row { display: grid; grid-template-columns: 105px minmax(0,1fr); align-items: center; gap: 6px; margin-top: 2px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-source-row label { display: flex; gap: 4px; margin: 0; align-items: center; font-size: 11px; color: #405864; font-weight: 700; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-source-row input[type="checkbox"] { appearance: auto; width: 14px; height: 14px; margin: 0; padding: 0; accent-color: #000061; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-source-row input:disabled { background: #F2F5F8; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series-section { flex: none; display: flex; flex-direction: column; padding-bottom: 0; border-bottom: 0; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series-rows { }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series { height: 28px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-area-series { height: 66px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series-line { display: flex; align-items: center; gap: 4px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series-line input { min-width: 0; flex: 1; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series-line input.ssy-export-series-shown { appearance: auto; flex: 0 0 13px; width: 13px; height: 13px; margin: 0 2px 0 0; padding: 0; accent-color: #000061; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series-line select.ssy-export-series-type { flex: 0 0 54px; width: 54px; padding: 2px 3px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series-style-gap { flex: 0 0 18px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-fill-controls { display: flex; align-items: center; gap: 6px; padding: 3px 0 3px 40px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-fill-controls span { font-size: 12px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-fill-controls select { width: auto; flex: 1; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-colour-trigger { display: flex; flex: 0 0 18px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 3px; background: #fff; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-colour-chip { width: 100%; height: 100%; border-radius: 2px; }
.ssy-chart-export-host[b-yeeqtadwuq]  :is(.ssy-export-order-up,.ssy-export-order-down,.ssy-export-series-style) { flex: 0 0 18px; height: 24px; border: 0; border-radius: 3px; background: transparent; color: #536A75; padding: 0; font-size: 13px; }
.ssy-chart-export-host[b-yeeqtadwuq]  :is(.ssy-export-order-up,.ssy-export-order-down,.ssy-export-series-style):hover:not(:disabled) { background: #F2F5F8; color: #000061; }
.ssy-chart-export-host[b-yeeqtadwuq]  :is(.ssy-export-order-up,.ssy-export-order-down):disabled { opacity: .25; cursor: default; }
.ssy-chart-export-host[b-yeeqtadwuq]  :is(.ssy-export-swatch-picker,.ssy-export-style-picker) { position: absolute; z-index: 3; width: 240px; box-sizing: border-box; gap: 8px; padding: 12px; box-shadow: 0 5px 20px rgba(0,0,0,.18); border: 1px solid #DCE5EB; border-radius: 5px; background: #F2F5F8; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-swatch-picker { display: grid; grid-template-columns: repeat(5,1fr); }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-style-picker { display: flex; flex-direction: column; font-size: 13px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-style-picker .ssy-export-field { display: grid; grid-template-columns: 50px 1fr; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-popover-done { align-self: flex-end; padding: 4px 10px; border: 1px solid #B5CBD6; border-radius: 3px; color: #000061; background: #fff; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-swatch { position: relative; height: 30px; border: 2px solid transparent; border-radius: 3px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-swatch[aria-pressed="true"] { outline: 2px solid #000061; outline-offset: 2px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-swatch[aria-pressed="true"]::after { content: '\2713'; display: grid; place-items: center; position: absolute; inset: 3px; color: #fff; background: rgba(0,0,0,.25); border-radius: 2px; font-size: 17px; }
.ssy-chart-export-host[b-yeeqtadwuq]  :is(button,input,select):focus-visible { outline: 2px solid #0087CB; outline-offset: 3px; }
.ssy-chart-export-host[b-yeeqtadwuq]  button:disabled { opacity: .5; cursor: default; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-pager { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 5px; font-size: 11px; height: 28px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-pager button, .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-retry { border: 1px solid #B5CBD6; border-radius: 3px; padding: 3px 6px; color: #000061; background: #fff; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-footer { flex: none; padding-top: 7px; background: #fff; border-top: 1px solid #E1E8ED; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-quality { display: block; font-size: 11px; color: #536A75; margin-bottom: 7px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-output-actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: 7px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-download, .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-copy { padding: 10px; border: 1px solid #000061; border-radius: 4px; font-size: 13px; font-weight: 700; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-download { background: #000061; color: #fff; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-copy { background: #fff; color: #000061; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-download:hover:not(:disabled) { background: #163E9F; border-color: #163E9F; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-copy:hover:not(:disabled) { background: #F2F5F8; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-message { margin: 5px 0 0; min-height: 15px; font-size: 11px; color: #536A75; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-error { margin: 4px 0; font-size: 11px; color: #A3233F; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px; font-size: 11px; color: #536A75; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-preview-bar > span:first-child { letter-spacing: 1px; font-weight: 700; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-dimensions { font-size: 12px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-notices { margin: 0 4px 8px; font-size: 12px; color: #536A75; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-viewport { display: flex; flex: 1; justify-content: center; align-items: center; min-width: 0; min-height: 0; overflow: hidden; background: #F2F5F8; border-radius: 5px; }
.ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-frame { flex: none; box-shadow: 0 3px 18px rgba(36,52,71,.08); }
.ssy-chart-export-host[b-yeeqtadwuq]  [hidden] { display: none; }
@media (min-width: 801px) and (max-height: 900px) { .ssy-chart-expand-card[b-yeeqtadwuq] { height: 94vh; } }
@media (max-width: 800px) and (min-width: 601px) {
 .ssy-chart-export-host[b-yeeqtadwuq] { grid-template-columns: 340px minmax(0,1fr); gap: 0 12px; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-sidebar { padding-right: 12px; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-controls { overflow: auto; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series-section { flex: none; height: 190px; }
}

.ssy-chart-expand-note[b-yeeqtadwuq] {
    flex: 0 0 auto;
    margin: 0 0 6px;
    color: var(--ssy-dash-text-muted, #536A75);
    font-size: var(--ssy-fs-small, 12px);
}
@media (max-width: 600px) {
 .ssy-chart-expand-card[b-yeeqtadwuq] { height: 94vh; width: 96vw; padding: 8px; }
 .ssy-chart-export-host[b-yeeqtadwuq] { grid-template-columns: 1fr; grid-template-rows: 36px minmax(150px,.85fr) minmax(0,1.15fr); gap: 0; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-toolbar-title { display: none; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-preview { grid-row: 2; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-preview-bar { padding: 8px 2px; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-sidebar { grid-row: 3; padding: 0; border: 0; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-controls { overflow: auto; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series-section { flex: none; height: 190px; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-quality { display: none; }
 .ssy-chart-export-host[b-yeeqtadwuq]  input, .ssy-chart-export-host[b-yeeqtadwuq]  select { height: 36px; font-size: 14px; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-series { height: 42px; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-area-series { height: 82px; }
 .ssy-chart-export-host[b-yeeqtadwuq]  :is(.ssy-export-colour-trigger,.ssy-export-order-up,.ssy-export-order-down,.ssy-export-series-style) { min-width: 32px; height: 36px; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-swatch { height: 36px; }
 .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-download, .ssy-chart-export-host[b-yeeqtadwuq]  .ssy-export-copy { min-height: 44px; }
}
/* /Components/Common/DashboardComponents_HA/SsyCheckbox.razor.rz.scp.css */
.ssy-checkbox[b-bp7yft1db0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ssy-dash-text, #1A1A1A);
    font-size: var(--ssy-fs-small, 10px);
    white-space: nowrap;
    cursor: pointer;
}

.ssy-checkbox input[b-bp7yft1db0] {
    width: auto;
    margin: 0;
    accent-color: var(--ssy-colour-main-simpson-blue, #000061);
    cursor: inherit;
}

.ssy-checkbox.is-disabled[b-bp7yft1db0] { opacity: .45; cursor: not-allowed; }

/* On the navy command bar the caption takes the bar's text tone. */
.ssy-cmdbar .ssy-checkbox:not(.ssy-popover__panel *)[b-bp7yft1db0] { color: var(--ssy-bar-text); font-size: var(--ssy-fs-micro, 8px); }
/* /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-u9fsdd84i3] {
    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-cmdbar-accent, var(--ssy-colour-palette-golden-yellow, #F7A506));
    box-shadow: 0 1px 3px rgba(0, 32, 91, .22);
    /* The bar's palette, defined once. SsyButton, SsyToggleGroup and the fields below read
       these, so every control on the navy bar shares one line / text / hover / pressed tone. */
    --ssy-bar-line: rgba(255, 255, 255, .22);
    --ssy-bar-text: rgba(255, 255, 255, .78);
    --ssy-bar-hover: rgba(255, 255, 255, .08);
    --ssy-bar-on: rgba(255, 255, 255, .16);
    --ssy-bar-ink: #FFFFFF;
}

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

.ssy-cmdbar-left[b-u9fsdd84i3] {
    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-u9fsdd84i3] {
    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-u9fsdd84i3] {
    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-u9fsdd84i3]::-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-u9fsdd84i3] {
    position: relative;
    flex: 0 0 auto;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    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-u9fsdd84i3],
.ssy-cmdbar-section:focus-visible[b-u9fsdd84i3] {
    color: var(--ssy-bar-ink);
    background: var(--ssy-bar-hover);
    outline: none;
}

.ssy-cmdbar-section.is-active[b-u9fsdd84i3] {
    color: var(--ssy-bar-ink);
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 -2px 0 var(--ssy-cmdbar-accent, var(--ssy-colour-palette-golden-yellow, #F7A506));
}

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

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

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

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

.ssy-cmdbar[b-u9fsdd84i3]  .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-u9fsdd84i3]  .ssy-cmdbar-slot strong { font-weight: 750; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-slot:hover, .ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-slot:focus-visible { background: rgba(255, 255, 255, .1); color: var(--ssy-bar-ink); outline: none; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-slot.ssy-cmdbar-on { color: var(--ssy-bar-ink); background: var(--ssy-bar-hover); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-slot.ssy-cmdbar-on::after { content: ""; position: absolute; right: 4px; bottom: 0; left: 4px; height: 2px; background: var(--ssy-cmdbar-accent, var(--ssy-colour-palette-golden-yellow, #F7A506)); }

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

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

.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-controls { display: inline-flex; align-items: center; align-self: center; gap: 1px; min-width: 0; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-controls button { height: 20px; border: 1px solid var(--ssy-bar-line); background: transparent; color: var(--ssy-bar-text); font: inherit; font-size: var(--ssy-fs-micro); cursor: pointer; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-controls button.on { background: var(--ssy-bar-on); color: var(--ssy-bar-ink); }
.ssy-cmdbar[b-u9fsdd84i3]  .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-u9fsdd84i3]  .ssy-cmdbar-controls select { height: 20px; border: 1px solid var(--ssy-bar-line); background: transparent; color: var(--ssy-bar-text); font: inherit; font-size: var(--ssy-fs-micro); cursor: pointer; padding: 0 2px; outline: none; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-controls select:hover { color: var(--ssy-bar-ink); 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-u9fsdd84i3]  .ssy-cmdbar-controls select.on { background: var(--ssy-bar-on); color: var(--ssy-bar-ink); }
/* 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-u9fsdd84i3]  .ssy-cmdbar-controls select option { color: var(--ssy-dash-text, #333); background: var(--ssy-dash-surface, #fff); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-controls select:disabled { opacity: .38; cursor: not-allowed; }
/* A shared select-like field (SsySelectField; SsyMultiSelect, whose trigger takes the popover-trigger
   look below) anywhere in the bar drops its light form frame and reads as the bar's own select above: the bar owns how controls look inside it. Every
   rule guards its subject so a popover panel opened from the bar keeps the light form look. */
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field:is(:has(select), .ssy-multiselect .ssy-field):not(.ssy-popover__panel *) { gap: 0; align-self: center; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field:is(:has(select), .ssy-multiselect .ssy-field) > .ssy-field__head:not(.ssy-popover__panel *) { display: none; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field:is(:has(select), .ssy-multiselect .ssy-field) > .ssy-field__box:not(.ssy-popover__panel *) { height: 20px; border: 0; outline: 0; background: transparent; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field__box select:not(.ssy-popover__panel *) { width: auto; height: 20px; padding: 0 2px; border: 1px solid var(--ssy-bar-line); background: transparent; color: var(--ssy-bar-text); font: inherit; font-size: var(--ssy-fs-micro); }
/* A native select is as wide as its LONGEST option, so one long entry (a WASDE reliability table)
   widened the closed control to ~350px and pushed the sub-tabs into truncation. On the bar a select
   sizes to the value it shows, capped; the open list still shows every option in full. Selects that
   set an explicit width (date, contract) keep it - their rules are more specific. */
.ssy-cmdbar[b-u9fsdd84i3]  :is(select, .ssy-multiselect__trigger):not(.ssy-popover__panel *) { field-sizing: content; max-width: 14rem; text-overflow: ellipsis; }
/* The select's text is white on the bar; its open list is not, so options reset to page colours
   (white-on-white dropdowns otherwise). */
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field__box select :is(option, optgroup) { color: var(--ssy-dash-text, #333); background: var(--ssy-dash-surface, #fff); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field__box select:hover:not(.ssy-popover__panel *) { color: var(--ssy-bar-ink); border-color: rgba(255, 255, 255, .38); }
/* Inline captions keep a filter identifiable while sharing the compact rail chrome. */
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field.is-label-inside > .ssy-field__box:not(.ssy-popover__panel *) { height: 20px; border: 1px solid var(--ssy-bar-line); background: transparent; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field.is-invalid > .ssy-field__box:not(.ssy-popover__panel *) { border-color: var(--ssy-colour-palette-crimson-red, #DB303A); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field.is-label-inside :is(.ssy-field__prefix, .ssy-field__unit):not(.ssy-popover__panel *),
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field.is-label-inside input:not(.ssy-popover__panel *)::placeholder { color: var(--ssy-bar-text); font-size: var(--ssy-fs-micro); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field.is-label-inside :is(select, .ssy-popover__trigger):not(.ssy-popover__panel *) { border: 0; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-field.is-label-inside input:not(.ssy-popover__panel *) { width: 5ch; flex: 0 1 auto; color: var(--ssy-bar-ink); font-size: var(--ssy-fs-micro); }
/* A popover trigger on the bar (SsyPopover without TriggerVariant) reads as a bar button, so pages
   do not hand-copy the chrome onto their TriggerClass. */
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-popover__trigger:not(.ssy-popover__panel *) { height: 20px; padding: 0 6px; border: 1px solid var(--ssy-bar-line); background: transparent; color: var(--ssy-bar-text); font: inherit; font-size: var(--ssy-fs-micro); cursor: pointer; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-popover__trigger:not(.ssy-popover__panel *):hover:not(:disabled) { background: var(--ssy-bar-hover); color: var(--ssy-bar-ink); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-popover__trigger[aria-expanded=true]:not(.ssy-popover__panel *) { background: var(--ssy-bar-on); color: var(--ssy-bar-ink); }
/* The date control's shared field sits inside its own framed pill, borderless. */
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date .ssy-field { gap: 0; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date .ssy-field__head { display: none; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date .ssy-field__prefix { color: rgba(255, 255, 255, .6); font-size: var(--ssy-fs-micro); font-weight: 700; text-transform: uppercase; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date .ssy-field__box { height: 20px; border: 0; outline: 0; border-left: 1px solid rgba(255, 255, 255, .28); background: transparent; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date .ssy-field__box input { width: 108px; height: 20px; padding: 0 4px; border: 0; background: transparent; color: var(--ssy-bar-ink); font: inherit; font-size: var(--ssy-fs-micro); font-weight: 700; color-scheme: dark; }

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

@keyframes ssy-cmdbar-pulse-b-u9fsdd84i3 {
    50% { background: var(--ssy-cmdbar-accent, var(--ssy-colour-palette-golden-yellow, #F7A506)); box-shadow: 0 0 0 3px var(--ssy-bar-line); }
}

/* 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-u9fsdd84i3]  .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: var(--ssy-bar-hover); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-contract select { width: 132px; height: 20px; padding: 0 3px; border: 0; outline: none; background: transparent; color: var(--ssy-bar-ink); font: inherit; font-size: var(--ssy-fs-micro); font-weight: 700; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-contract select option { color: var(--ssy-dash-text, #333); background: var(--ssy-dash-surface, #fff); font-weight: 700; }
/* Group headings carry the Months / Quarters / Calendars split, so they must not read as options. */
.ssy-cmdbar[b-u9fsdd84i3]  .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-u9fsdd84i3]  .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: var(--ssy-bar-hover); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date button, .ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date select { height: 20px; border: 0; background: transparent; color: var(--ssy-bar-ink); font: inherit; font-size: var(--ssy-fs-micro); font-weight: 700; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date button { width: 20px; padding: 0; cursor: pointer; font-size: 15px; line-height: 18px; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date select { width: 126px; padding: 0 3px; outline: none; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date select option { color: var(--ssy-dash-text, #333); background: var(--ssy-dash-surface, #fff); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date button:disabled, .ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-date select:disabled { opacity: .38; cursor: not-allowed; }

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

/* ---- placement slots, reset, switch ---- */

/* The measure slot's wrapper adds no box: its control sits in the rail like any other. */
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-measure { display: contents; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-count { display: none; }

/* Reset leads the filters and exists only while one is active. The rail is right-aligned, so
   it appearing extends the rail leftwards and no filter moves under the pointer. */
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-reset { display: inline-flex; align-items: center; align-self: center; gap: 2px; height: 20px; padding: 0 5px; border: 1px solid var(--ssy-cmdbar-accent, var(--ssy-colour-palette-golden-yellow, #F7A506)); border-radius: 3px; background: transparent; color: var(--ssy-cmdbar-accent, var(--ssy-colour-palette-golden-yellow, #F7A506)); font: inherit; font-size: var(--ssy-fs-micro); font-weight: 750; line-height: 1; cursor: pointer; white-space: nowrap; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-reset:hover { background: var(--ssy-cmdbar-accent, var(--ssy-colour-palette-golden-yellow, #F7A506)); color: var(--ssy-dash-brand, #000061); }

/* One on/off option. Same chrome as a toggle option; pressed reads like a selected one. */
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-switch { align-self: center; height: 20px; padding: 0 6px; border: 1px solid var(--ssy-bar-line); border-radius: 3px; background: transparent; color: var(--ssy-bar-text); font: inherit; font-size: var(--ssy-fs-micro); white-space: nowrap; cursor: pointer; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-switch:hover:not(:disabled) { background: var(--ssy-bar-hover); color: var(--ssy-bar-ink); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-switch.is-on { background: var(--ssy-bar-on); color: var(--ssy-bar-ink); box-shadow: inset 0 -2px 0 var(--ssy-cmdbar-accent, var(--ssy-colour-palette-golden-yellow, #F7A506)); }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-switch:disabled { opacity: .38; cursor: not-allowed; }
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-controls .ssy-cmdbar-switch { border-radius: 0; }

/* Folded-filter summary and the fold button are phone-only. */
.ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-summary,
.ssy-cmdbar-fold[b-u9fsdd84i3] { display: none; }

/* ---- fit steps (set by the script while the bar overflows; see SsyCommandBar.razor.js) ---- */

.ssy-cmdbar[data-fit~="notes"][b-u9fsdd84i3]  .ssy-cmdbar-note { display: none; }
.ssy-cmdbar[data-fit~="tickers"][b-u9fsdd84i3]  .ssy-cmdbar-slot > :not(strong) { display: none; }
.ssy-cmdbar[data-fit~="readout"][b-u9fsdd84i3]  .ssy-cmdbar-readout { display: none; }

/* ---- sub-tab strip edges ---- */

.ssy-cmdbar-center[b-u9fsdd84i3] { position: relative; }
.ssy-cmdbar-sections[b-u9fsdd84i3] { position: relative; }
.ssy-cmdbar-edge[b-u9fsdd84i3] { display: none; position: absolute; top: 0; bottom: 0; z-index: 1; align-items: center; justify-content: center; width: 14px; color: var(--ssy-bar-ink); font-size: 14px; font-weight: 750; cursor: pointer; }
.ssy-cmdbar-edge.is-start[b-u9fsdd84i3] { left: 0; }
.ssy-cmdbar-edge.is-end[b-u9fsdd84i3] { right: 0; }
.ssy-cmdbar-edge:hover[b-u9fsdd84i3] { color: var(--ssy-cmdbar-accent, var(--ssy-colour-palette-golden-yellow, #F7A506)); }
.ssy-cmdbar-center.is-clip-start .ssy-cmdbar-edge.is-start[b-u9fsdd84i3],
.ssy-cmdbar-center.is-clip-end .ssy-cmdbar-edge.is-end[b-u9fsdd84i3] { display: flex; }
.ssy-cmdbar-center.is-clip-end .ssy-cmdbar-sections[b-u9fsdd84i3] { mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent calc(100% - 8px)); }
.ssy-cmdbar-center.is-clip-start .ssy-cmdbar-sections[b-u9fsdd84i3] { mask-image: linear-gradient(to right, transparent 8px, #000 30px); }
.ssy-cmdbar-center.is-clip-start.is-clip-end .ssy-cmdbar-sections[b-u9fsdd84i3] { mask-image: linear-gradient(to right, transparent 8px, #000 30px, #000 calc(100% - 30px), transparent calc(100% - 8px)); }

/* Medium: preserve the terminal rail and let it scroll instead of inventing
   a tall second toolbar. Both size rules ask the nearest container (the dashboard
   shell) rather than the viewport, same as the grid, table and shell chrome. */
@container (min-width: 761px) and (max-width: 1100px) {
    .ssy-cmdbar.has-left.has-right[b-u9fsdd84i3] {
        grid-template-columns: auto auto minmax(360px, 1fr);
        overflow-x: auto;
        overflow-y: hidden;
        position: sticky;
        scrollbar-width: thin;
    }


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

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

/* Narrow (phone): two parts. The section tabs on their own row first, then every control from
   both rails flowing together in as few rows as fit, the "latest" readout at the end. The rails
   dissolve (display: contents) so their controls share rows instead of each starting a new one.
   The ticker quotes are hidden: the tiles and tables below already carry those numbers. */
@container (max-width: 760px) {
    .ssy-cmdbar[b-u9fsdd84i3] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        min-height: 0;
        padding: 3px 4px;
        overflow: visible;
        position: static;
    }

    .ssy-cmdbar-center[b-u9fsdd84i3] {
        order: -1;
        flex: 1 1 100%;
        min-width: 0;
        height: auto;
        overflow: visible;
    }

    .ssy-cmdbar-left[b-u9fsdd84i3],
    .ssy-cmdbar-right[b-u9fsdd84i3] {
        display: contents;
    }

    .ssy-cmdbar-sections[b-u9fsdd84i3] {
        flex-wrap: wrap;
        overflow: visible;
    }

    .ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-slot,
    .ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-note {
        display: none;
    }

    .ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-controls {
        flex-wrap: wrap;
    }

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

    .ssy-cmdbar-edge[b-u9fsdd84i3] { display: none !important; }

    /* A busy right rail folds behind one Filters button (the script marks it is-foldable). The
       measure, date and contract pieces stay out, so the bar still shows what it is showing; the
       rest opens as a tray that wraps under the bar. */
    .ssy-cmdbar-right.is-foldable + .ssy-cmdbar-fold[b-u9fsdd84i3] {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        height: 20px;
        padding: 0 6px;
        border: 1px solid var(--ssy-bar-line);
        border-radius: 3px;
        background: transparent;
        color: var(--ssy-bar-ink);
        font: inherit;
        font-size: var(--ssy-fs-micro);
        font-weight: 750;
        cursor: pointer;
    }
    .ssy-cmdbar-fold[b-u9fsdd84i3]::after { content: "\25BE"; }
    .ssy-cmdbar-fold[data-count][b-u9fsdd84i3]::before { content: attr(data-count); order: 1; min-width: 12px; padding: 0 3px; border-radius: 6px; background: var(--ssy-cmdbar-accent, var(--ssy-colour-palette-golden-yellow, #F7A506)); color: var(--ssy-dash-brand, #000061); text-align: center; line-height: 12px; }
    .ssy-cmdbar.is-tray-open .ssy-cmdbar-fold[b-u9fsdd84i3] { background: var(--ssy-bar-on); }
    .ssy-cmdbar.is-tray-open .ssy-cmdbar-fold[b-u9fsdd84i3]::after { content: "\25B4"; order: 2; }
    .ssy-cmdbar:not(.is-tray-open) .ssy-cmdbar-right.is-foldable[b-u9fsdd84i3]  > :not(.ssy-cmdbar-measure, .ssy-cmdbar-summary, .ssy-cmdbar-date, .ssy-cmdbar-contract, .ssy-cmdbar-guide, .ssy-cmdbar-readout) { display: none; }
    .ssy-cmdbar.is-tray-open .ssy-cmdbar-right.is-foldable[b-u9fsdd84i3]  > :not(.ssy-cmdbar-measure, .ssy-cmdbar-summary, .ssy-cmdbar-date, .ssy-cmdbar-contract, .ssy-cmdbar-guide, .ssy-cmdbar-readout) { order: 2; }
    .ssy-cmdbar:not(.is-tray-open) .ssy-cmdbar-right.is-foldable[b-u9fsdd84i3]  > .ssy-cmdbar-summary { display: inline; order: 2; max-width: 40vw; overflow: hidden; color: var(--ssy-bar-text); font-size: var(--ssy-fs-micro); text-overflow: ellipsis; white-space: nowrap; }
    .ssy-cmdbar-fold[b-u9fsdd84i3] { order: 1; }

    .ssy-cmdbar[b-u9fsdd84i3]  .ssy-cmdbar-readout {
        margin-left: auto;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyControlStrip.razor.rz.scp.css */
/* One row, one height, labels on the left. The strip owns how controls sit inside it. */
.ssy-strip[b-kf9dmw5dvi] {
    --ssy-strip-h: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    min-width: 0;
    font-size: var(--ssy-fs-small, 10px);
}

/* Any grouping element: its items sit tight together, aligned on the same line. */
.ssy-strip[b-kf9dmw5dvi] >  *:not(.ssy-field):not(.ssy-toggle) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Fields: label beside the box, not above it. */
.ssy-strip[b-kf9dmw5dvi]  .ssy-field { flex-direction: row; align-items: center; gap: 5px; }
.ssy-strip[b-kf9dmw5dvi]  .ssy-field__head { flex: 0 0 auto; }
.ssy-strip[b-kf9dmw5dvi]  .ssy-field__label,
.ssy-strip[b-kf9dmw5dvi]  .ssy-toggle__label,
.ssy-strip[b-kf9dmw5dvi]  .ssy-strip-tag {
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-micro, 8px);
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.ssy-strip[b-kf9dmw5dvi]  .ssy-strip-tag { color: var(--ssy-dash-brand, #000061); font-weight: 900; }
.ssy-strip[b-kf9dmw5dvi]  .ssy-field__box { height: var(--ssy-strip-h); }
.ssy-strip[b-kf9dmw5dvi]  .ssy-field__box input { width: 5.5em; }
.ssy-strip[b-kf9dmw5dvi]  .ssy-field__box select { width: auto; }

/* Toggle groups: same outer height as a field box. */
.ssy-strip[b-kf9dmw5dvi]  .ssy-toggle__items { height: var(--ssy-strip-h); box-sizing: border-box; }
.ssy-strip[b-kf9dmw5dvi]  .ssy-toggle__item { height: 100%; }

/* Plain text beside a control (a unit, a transit). */
.ssy-strip[b-kf9dmw5dvi]  .ssy-strip-note { color: var(--ssy-dash-text-muted, #798E98); white-space: nowrap; }
/* /Components/Common/DashboardComponents_HA/SsyDashboardPanel.razor.rz.scp.css */
.ssy-dashboard-panel[b-tftbuw52j9] {
    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-tftbuw52j9] {
    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-tftbuw52j9],
.ssy-dashboard-panel__header p[b-tftbuw52j9] {
    margin: 0;
}

.ssy-dashboard-panel__freshness[b-tftbuw52j9] {
    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-tftbuw52j9] {
    color: var(--ssy-dash-warn, #a96900);
    font-size: .56rem;
}

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

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

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

.is-compact .ssy-dashboard-panel__body[b-tftbuw52j9] { padding: 4px; }
.scroll-y .ssy-dashboard-panel__body[b-tftbuw52j9] { overflow-y: auto; scrollbar-gutter: stable; }
.scroll-x .ssy-dashboard-panel__body[b-tftbuw52j9] { overflow-x: auto; }
.is-stale[b-tftbuw52j9] { border-color: var(--ssy-dash-warn, #c88400); }
.is-partial[b-tftbuw52j9] { border-left: 3px solid var(--ssy-dash-warn, #c88400); }
/* /Components/Common/DashboardComponents_HA/SsyDashboardShell.razor.rz.scp.css */
.ssy-dashboard-shell[b-urceoohz1w] {
    /* 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: 2px;
    --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-urceoohz1w] {
    display: grid;
    /* identity | tabs | band | selector | status | actions. The band is the only
       flexible column: the tab rail sizes to its content and the band eats the
       slack, so adding the clock cannot squeeze the tabs. */
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    min-width: 0;
    min-height: 38px;
    /* Never shrink. On a tall screen the shell gets a fixed height as a flex column, and an
       explicit min-height replaces the auto minimum - so the header could squeeze to 38px
       and the tab content slid up over the stacked phone header (the section picker). */
    flex-shrink: 0;
    gap: 8px;
    border-bottom: 1px solid var(--ssy-dash-divider, #dce5eb);
}

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

.ssy-dashboard-shell__eyebrow[b-urceoohz1w] {
    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;
}

/* The dashboard's own sans, not the site-wide h1 serif (ssyglobal.css): the title is one
   label in a row of sans tabs and widgets, so a display face there reads as a mistake. */
.ssy-dashboard-shell__title[b-urceoohz1w] {
    margin: 0;
    font-family: inherit;
    color: var(--ssy-dash-text, #1a1a1a);
    /* The title carries the page's top-level weight, so the tab rail can stay small. */
    font-size: 15px;
    font-weight: 900;
    line-height: 1.1;
}

/* Stretched to the header's full height, so the active tab's underline lands on the header's
   bottom divider instead of floating 2px above it. */
.ssy-dashboard-shell__tabs[b-urceoohz1w] {
    display: flex;
    align-self: stretch;
    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-urceoohz1w] {
    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-urceoohz1w] {
    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-urceoohz1w] {
    border-bottom-color: var(--ssy-colour-main-simpson-blue, #000061);
    color: var(--ssy-colour-main-simpson-blue, #000061);
}

/* Header icon buttons: one size and one colour on every tab. They used to follow
   --ssy-dash-brand, which some tabs remap, so the same icon changed colour per tab. */
.ssy-dashboard-shell__actions[b-urceoohz1w]  .ssy-icon-button {
    width: 22px;
    height: 22px;
    color: var(--ssy-dash-text-dim, #536A75);
    font-size: 12px;
    line-height: 1;
}

.ssy-dashboard-shell__actions[b-urceoohz1w]  .ssy-icon-button:hover:not(:disabled) {
    color: var(--ssy-colour-main-simpson-blue, #000061);
}

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

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

.ssy-dashboard-shell__band[b-urceoohz1w] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    overflow: hidden;
}

/* Fixed columns, so a shell without a band keeps the selector on the right instead of the
   selector falling into the band's flexible column. */
.ssy-dashboard-shell__band[b-urceoohz1w] { grid-column: 3; }
.ssy-dashboard-shell__selector[b-urceoohz1w] { grid-column: 4; }
.ssy-dashboard-shell__header > .ssy-dashboard-shell__status[b-urceoohz1w] { grid-column: 5; }
.ssy-dashboard-shell__actions[b-urceoohz1w] { grid-column: 6; }

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

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

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

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

.ssy-dashboard-shell__mobile-tab[b-urceoohz1w] {
    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. */

/* Narrow header: plain wrapping rows, no grid-row placement. Row 1 is title + actions;
   the section picker, the tab's selector and the status each take a full row below.
   It was a grid with explicit grid-row numbers, and with optional slots (band, selector,
   status) present or absent per tab the rows collided: the picker rendered under the
   next row and showed as an empty or half-cut box on both dashboards. */
@container ssy-dashboard (max-width: 760px) {
    .ssy-dashboard-shell__header[b-urceoohz1w] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 4px;
        padding-block: 3px;
    }

    /* Title and the i / reload icons share row 1: the icons come last in the markup,
       so without an order they wrapped onto a row of their own. */
    .ssy-dashboard-shell__identity[b-urceoohz1w] {
        order: -2;
        flex: 1 1 auto;
        min-width: 0;
    }

    .ssy-dashboard-shell__actions[b-urceoohz1w] {
        order: -1;
        flex: 0 0 auto;
    }

    .ssy-dashboard-shell__tabs[b-urceoohz1w],
    .ssy-dashboard-shell__band[b-urceoohz1w] {
        display: none;
    }

    .ssy-dashboard-shell__mobile-tab[b-urceoohz1w],
    .ssy-dashboard-shell__selector[b-urceoohz1w],
    .ssy-dashboard-shell__status[b-urceoohz1w] {
        flex: 1 0 100%;
        min-width: 0;
    }

    .ssy-dashboard-shell__mobile-tab[b-urceoohz1w] {
        display: block;
    }

    /* Explicit height and line-height so a site-wide select rule cannot shrink it. */
    .ssy-dashboard-shell__mobile-tab select[b-urceoohz1w] {
        box-sizing: border-box;
        width: 100%;
        height: 38px;
        min-height: 38px;
        padding: 0 10px;
        line-height: normal;
        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-size: var(--ssy-fs-lg, 13px);
        font-weight: 750;
    }

    .ssy-dashboard-shell__selector[b-urceoohz1w] {
        overflow-x: auto;
    }

    .ssy-dashboard-shell__status[b-urceoohz1w] {
        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-urceoohz1w] {
        align-items: stretch;
        flex-direction: column;
    }

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

@media (forced-colors: active) {
    .ssy-dashboard-shell__tab.is-active[b-urceoohz1w] {
        border-bottom-color: Highlight;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyDeltaNumber.razor.rz.scp.css */
.ssy-delta[b-pi64ceve5t] {
    display: grid;
    gap: 0;
    justify-items: end;
    min-width: 42px;
    font-variant-numeric: tabular-nums;
}

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

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

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

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

.ssy-delta .ssy-hot[b-pi64ceve5t],
.ssy-delta strong.ssy-hot[b-pi64ceve5t] {
    color: var(--ssy-dash-down, var(--ssy-colour-palette-vivid-pink, #EB3871));
}

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

.ssy-delta-nodata[b-pi64ceve5t] {
    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-5pb7lhlfga] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Narrow box: one panel per row. */
@container (max-width: 760px) {
    .ssy-detail-grid[b-5pb7lhlfga] { grid-template-columns: minmax(0, 1fr); }
}

.ssy-detail-grid[b-5pb7lhlfga]  .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-5pb7lhlfga]  .ssy-detail-head,
.ssy-detail-grid[b-5pb7lhlfga]  .ssy-detail-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ssy-detail-grid[b-5pb7lhlfga]  .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-5pb7lhlfga]  .ssy-detail-head span,
.ssy-detail-grid[b-5pb7lhlfga]  .ssy-detail-foot span {
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
}

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

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

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

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

.ssy-detail-grid[b-5pb7lhlfga]  .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: 900;
    font-variant-numeric: tabular-nums;
}

.ssy-detail-grid[b-5pb7lhlfga]  .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: 900;
}

@media (max-width: 760px) {
    .ssy-detail-grid[b-5pb7lhlfga] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyEmptyState.razor.rz.scp.css */
/* ============================================================
   SsyEmptyState - one quiet line, centred in its slot: glyph, message, hint.
   A dense board should spend a line, not a card, saying there is nothing here.
   ============================================================ */

.ssy-empty[b-vpq9qkboda] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 6px;
    min-height: 100%;
    padding: 6px 10px;
    box-sizing: border-box;
    text-align: center;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-small, 10px);
}

.ssy-empty-icon[b-vpq9qkboda] {
    font-size: var(--ssy-fs-md, 12px);
    line-height: 1;
    opacity: .5;
}

.ssy-empty-msg[b-vpq9qkboda] { font-weight: 700; }

.ssy-empty-hint[b-vpq9qkboda] { font-weight: 400; }

.ssy-empty-hint[b-vpq9qkboda]::before { content: "\00B7\00A0"; }
/* /Components/Common/DashboardComponents_HA/SsyErrorPanel.razor.rz.scp.css */
/* ============================================================
   SsyErrorPanel - one compact row: a red rule, the title, the error on the same
   line (full text on hover), Retry at the end. Normal type: the message is read
   by a broker, not debugged.
   ============================================================ */

.ssy-errp[b-tn4q79qmhy] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 6px 4px 8px;
    border-left: 2px solid var(--ssy-colour-palette-crimson-red, #DB303A);
    border-radius: 2px;
    background: color-mix(in srgb, var(--ssy-colour-palette-crimson-red, #DB303A) 5%, var(--ssy-dash-surface, #FFFFFF));
    font-size: var(--ssy-fs-small, 10px);
}

.ssy-errp-icon[b-tn4q79qmhy] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--ssy-colour-palette-crimson-red, #DB303A);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
}

.ssy-errp-body[b-tn4q79qmhy] {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.ssy-errp-title[b-tn4q79qmhy] {
    flex: 0 0 auto;
    color: var(--ssy-colour-palette-crimson-red, #DB303A);
    font-weight: 900;
    white-space: nowrap;
}

.ssy-errp-msg[b-tn4q79qmhy] {
    min-width: 0;
    overflow: hidden;
    color: var(--ssy-dash-text-dim, #536A75);
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* /Components/Common/DashboardComponents_HA/SsyExceptionLedger.razor.rz.scp.css */
.ssy-exception-ledger__content[b-gn2wwk9oci] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

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

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

@media (min-width: 1024px) {
    .ssy-exception-ledger__detail[b-gn2wwk9oci] {
        position: sticky;
        bottom: 0;
        background: var(--ssy-dash-surface, #fff);
    }
}
/* /Components/Common/DashboardComponents_HA/SsyFieldFrame.razor.rz.scp.css */
.ssy-field[b-mt99ule0b0] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ssy-field__head[b-mt99ule0b0] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

/* Captions never wrap: a ragged caption row shifts every input below it. The full caption
   stays readable on the field's tooltip when it is cut. */
.ssy-field__label[b-mt99ule0b0] {
    min-width: 0;
    overflow: hidden;
    color: var(--ssy-dash-text-dim, #536A75);
    font-size: var(--ssy-fs-small, 10px);
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ssy-field__edited[b-mt99ule0b0] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ssy-dash-accent, #009DC9);
    font: inherit;
    font-size: var(--ssy-fs-micro, 8px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
}

.ssy-field__edited:hover:not(:disabled)[b-mt99ule0b0] { text-decoration: underline; }
.ssy-field__edited:disabled[b-mt99ule0b0] { cursor: default; }

/* The box carries the border so the unit suffix sits inside it and focus rings the pair. */
.ssy-field__box[b-mt99ule0b0] {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 24px;
    box-sizing: border-box;
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    border-radius: 3px;
    background: var(--ssy-dash-surface, #FFFFFF);
}

.is-regular .ssy-field__box[b-mt99ule0b0] { height: 28px; }

.ssy-field__box:focus-within[b-mt99ule0b0] {
    border-color: var(--ssy-dash-accent, #009DC9);
    outline: 1px solid var(--ssy-dash-accent, #009DC9);
}

.ssy-field__box[b-mt99ule0b0]  input,
.ssy-field__box[b-mt99ule0b0]  select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--ssy-dash-text, #1A1A1A);
    font: inherit;
    font-size: var(--ssy-fs-md, 12px);
    outline: none;
}

.ssy-field__box[b-mt99ule0b0]  input.is-number { text-align: right; font-variant-numeric: tabular-nums; }

.ssy-field__box[b-mt99ule0b0]  select { padding-right: 2px; cursor: pointer; }

/* A placeholder is a default the calculation will use, not a typed value: lighter and italic
   so the two can never be mistaken for each other. */
.ssy-field__box[b-mt99ule0b0]  input::placeholder {
    color: var(--ssy-dash-text-muted, #798E98);
    font-style: italic;
    opacity: .75;
}

.ssy-field__unit[b-mt99ule0b0] {
    flex: 0 0 auto;
    padding: 0 6px 0 2px;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-tiny, 9px);
    font-weight: 700;
    white-space: nowrap;
}

/* Caption inside: the field sizes to its value, in toolbar type, so it sits in a row of
   toggles instead of taking one of its own. */
.ssy-field.is-label-inside[b-mt99ule0b0] { flex: 0 0 auto; }
.ssy-field.is-label-inside .ssy-field__box[b-mt99ule0b0]  input,
.ssy-field.is-label-inside .ssy-field__box[b-mt99ule0b0]  select { padding: 0 4px; font-size: var(--ssy-fs-small, 10px); }
.ssy-field.is-label-inside .ssy-field__box[b-mt99ule0b0]  input[type=date] { flex: 0 0 auto; width: 84px; padding: 0 2px 0 4px; }

.ssy-field__prefix[b-mt99ule0b0] {
    flex: 0 0 auto;
    padding: 0 0 0 6px;
    color: var(--ssy-dash-text-dim, #536A75);
    font-size: var(--ssy-fs-small, 10px);
    font-weight: 700;
    white-space: nowrap;
}

.is-disabled .ssy-field__box[b-mt99ule0b0] {
    background: var(--ssy-dash-row-active-bg, #EAF1F5);
}

.is-disabled .ssy-field__box[b-mt99ule0b0]  input,
.is-disabled .ssy-field__box[b-mt99ule0b0]  select {
    color: var(--ssy-dash-text-muted, #798E98);
    cursor: default;
}

.is-invalid .ssy-field__box[b-mt99ule0b0] { border-color: var(--ssy-colour-palette-crimson-red, #DB303A); }

/* Floats under the box and takes no space, so a message never moves the row it sits in.
   The red border is the signal; the text is the explanation. */
.ssy-field__error[b-mt99ule0b0] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    margin-top: 1px;
    white-space: nowrap;
    color: var(--ssy-colour-palette-crimson-red, #DB303A);
    font-size: var(--ssy-fs-tiny, 9px);
    font-weight: 700;
    line-height: 1.2;
}

@media (pointer: coarse) {
    .ssy-field__box[b-mt99ule0b0] { height: 28px; }
}
/* /Components/Common/DashboardComponents_HA/SsyGrid.razor.rz.scp.css */
.ssy-grid[b-2tkext2rgc] {
    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-2tkext2rgc] {
    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));
}

/* Grid items may shrink below their content; a wide table inside then scrolls in
   its own wrapper instead of pushing the card past the grid track. */
.ssy-grid[b-2tkext2rgc]  > * {
    min-width: 0;
}

/* Design columns hold only while every track can be at least 280px wide. Below that the
   grid releases its design template and packs uniform 280px-minimum columns, so a 3-up row
   becomes 2-up on a tablet and 1-up on a phone, with no page CSS and no viewport numbers.
   The question is "is MY BOX wide enough", asked of the nearest container (the dashboard
   shell). Thresholds are n x 280px + (n - 1) x 5px gap; container queries cannot read a
   var, so they are literals tied to the 280px below - change both together.
   While pinned, ssy-fit-band out-ranks this and restores the design columns. */
@container (max-width: 565px) {
    .ssy-grid-n2[b-2tkext2rgc] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}
@container (max-width: 850px) {
    .ssy-grid-n3[b-2tkext2rgc] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}
@container (max-width: 1135px) {
    .ssy-grid-n4[b-2tkext2rgc] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}
@container (max-width: 1420px) {
    .ssy-grid-n5[b-2tkext2rgc] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}
@container (max-width: 1705px) {
    .ssy-grid-n6[b-2tkext2rgc] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}

/* LastFills: a lone last card on a two-column row spans the row. */
.ssy-grid-last-fills:not(.ssy-grid-last-fills-3)[b-2tkext2rgc]  > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* LastFills on three columns: six half-tracks (published on --ssy-grid-cols, so a pinned
   ssy-fit-band keeps them), each card spans two; a short last row spans the rest - one leftover
   takes the row, two leftovers take three half-tracks each. Below the n3 threshold every card
   takes the full row. */
.ssy-grid-last-fills-3[b-2tkext2rgc]  > * { grid-column: span 2; }
.ssy-grid-last-fills-3[b-2tkext2rgc]  > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.ssy-grid-last-fills-3[b-2tkext2rgc]  > :nth-last-child(2):nth-child(3n+1),
.ssy-grid-last-fills-3[b-2tkext2rgc]  > :last-child:nth-child(3n+2) { grid-column: span 3; }
@container (max-width: 850px) {
    .ssy-grid-last-fills-3[b-2tkext2rgc]  > *,
    .ssy-grid-last-fills-3[b-2tkext2rgc]  > :nth-last-child(2):nth-child(3n+1),
    .ssy-grid-last-fills-3[b-2tkext2rgc]  > :last-child:nth-child(3n+2) { grid-column: 1 / -1; }
}

/* StickyLast: the last card (a rail or detail pane) stays in view while the page scrolls. */
.ssy-grid-sticky-last[b-2tkext2rgc]  > :last-child { position: sticky; top: 0; align-self: start; }

/* Stack: one column once the grid's own box is narrower than the chosen width. Literals,
   because container queries cannot read a var; keep them in step with SsyGridStack. */
@container (max-width: 760px) {
    .ssy-grid-stack-narrow[b-2tkext2rgc] { grid-template-columns: minmax(0, 1fr); }
    .ssy-grid-stack-narrow.ssy-grid-sticky-last[b-2tkext2rgc]  > :last-child { position: static; }
}
@container (max-width: 1100px) {
    .ssy-grid-stack-medium[b-2tkext2rgc] { grid-template-columns: minmax(0, 1fr); }
    .ssy-grid-stack-medium.ssy-grid-sticky-last[b-2tkext2rgc]  > :last-child { position: static; }
}
/* /Components/Common/DashboardComponents_HA/SsyIconButton.razor.rz.scp.css */
.ssy-icon-button[b-9c3npebbs1] {
    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-9c3npebbs1] {
    width: 20px;
    height: 20px;
    border-color: transparent;
    font-size: 11px;
}

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .ssy-icon-button__spinner[b-9c3npebbs1] { 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 ---------- */
/* Tiles pack by the strip's own width: one row of N tiles when every tile gets its
   even share of at least --ssy-kpi-min, otherwise as many per row as fit and the rest
   wrap. --ssy-kpi-n (tile count) is published inline by the component; the minimum is
   a var a host can set. No viewport queries - a strip in a side card behaves exactly
   like a strip on a phone.

   Flex-wrap, not a grid, so the LAST row always fills: 5 tiles at 2 per row end with
   one full-width tile, at 3 per row with two half-width tiles - never a blank cell.
   The basis is the even share less half a pixel, so N shares plus gaps never round
   over 100% and push the last tile onto its own row. */
.ssy-kpi-strip[b-t1oixobcym] {
    --ssy-kpi-gap: 0px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-kpi-gap);
    position: relative;
}
.ssy-kpi-strip > .ssy-kpi-tile[b-t1oixobcym] {
    flex: 1 1 min(100%, max(var(--ssy-kpi-min, 160px), calc((100% - (var(--ssy-kpi-n, 1) - 1) * var(--ssy-kpi-gap)) / var(--ssy-kpi-n, 1) - 0.5px)));
}

/* Strip variant: one shared card. Tile dividers are right + bottom shadows; the
   strip clips its outer edge, so whichever tiles end a row or sit on the last row
   lose the stray line without the CSS knowing how the tiles wrapped. */
.ssy-kpi-strip.ssy-kpi-strip[b-t1oixobcym] {
    background: var(--ssy-kpi-surface, #fff);
    border: 1px solid var(--ssy-kpi-border, #E1E8ED);
    border-radius: 4px;
    overflow: hidden;
}
.ssy-kpi-strip.ssy-kpi-strip .ssy-kpi-tile[b-t1oixobcym] {
    box-shadow: 1px 0 0 var(--ssy-kpi-border, #E1E8ED), 0 1px 0 var(--ssy-kpi-border, #E1E8ED);
}

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

/* ---------- tile ---------- */
/* Each tile is its own width container: type scales with the tile (cqi below) and
   the layout switches on the tile's width, not the screen's. */
.ssy-kpi-tile[b-t1oixobcym] {
    container: ssy-kpi-tile / inline-size;
    padding: 5px 12px 3px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

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

.ssy-kpi-name[b-t1oixobcym] {
    font-size: clamp(9px, 5.5cqi, 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-t1oixobcym] {
    font-size: var(--ssy-fs-small);
    color: var(--ssy-kpi-muted, #798E98);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- big value ---------- */
/* Spare tile height goes under the value, so deltas + spark sit on the tile's bottom
   edge in every tile of a row - a tile whose name/unit wraps no longer lifts its spark
   above its neighbours'. */
.ssy-kpi-mid[b-t1oixobcym] {
    display: flex;
    align-items: baseline;
    margin-bottom: auto;
}

.ssy-kpi-val[b-t1oixobcym] {
    font-size: clamp(16px, 11cqi, 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-t1oixobcym] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-top: 20px;
    font-size: clamp(8px, 5cqi, var(--ssy-fs-small));
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}

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

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

.ssy-kpi-deltas .ssy-kpi-up[b-t1oixobcym],
.ssy-kpi-deltas .ssy-kpi-dn[b-t1oixobcym] {
    font-size: inherit;
    font-weight: 900;
    letter-spacing: -0.5px;
}

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

/* ---------- period tag (fallback when no deltas) ---------- */
.ssy-kpi-tag[b-t1oixobcym] {
    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-t1oixobcym] {
    gap: 9px;
    justify-content: center;
    min-height: 84px;
}

/* ---------- whole-strip error / empty state ---------- */
.ssy-kpi-panel-state[b-t1oixobcym] {
    flex: 1 0 100%;
}

/* ---------- sparkline ---------- */
.ssy-kpi-spark[b-t1oixobcym] {
    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-t1oixobcym] {
    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: 900;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

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

/* Narrow tile: the sparkline stays layered behind the value and deltas, as on desktop -
   it is the backdrop, not a row of its own. What changes is the text: a long name wraps
   beside the unit, and at most two deltas show. */
@container ssy-kpi-tile (max-width: 230px) {
    /* The unit always holds the tile's top-right corner; a long name wraps beside it
       instead of pushing the unit onto its own line (which put YOY in two different places
       on neighbouring tiles). */
    .ssy-kpi-top[b-t1oixobcym] {
        align-items: flex-start;
        column-gap: 6px;
    }

    .ssy-kpi-name[b-t1oixobcym] {
        min-width: 0;
        white-space: normal;
        overflow: visible;
    }

    .ssy-kpi-unit[b-t1oixobcym] {
        flex: 0 0 auto;
    }

    .ssy-kpi-deltas[b-t1oixobcym] {
        flex-wrap: wrap;
        gap: 2px 8px;
    }

    /* Two moves at most on a narrow tile, so they stay on one line over the spark. The
       rest are in the tile's tooltip. */
    .ssy-kpi-deltas > span:nth-child(n + 3)[b-t1oixobcym] {
        display: none;
    }

    /* The spark is a trend shape here; its date labels were crowded and the first one
       sat under the fade. */
    .ssy-kpi-spark[b-t1oixobcym]  .highcharts-axis-labels {
        display: none;
    }

    /* Reclaim the band the hidden labels left, so the line meets the tile's bottom. */
    .ssy-kpi-spark[b-t1oixobcym] {
        margin-bottom: -12px;
    }
}

/* ---------- live-update flash ---------- */
/* Opt-in per tile (KpiTile.FlashOnChange). The value element is keyed on its own
   text, so Blazor replaces it whenever the number changes and the animation
   restarts. Without this a tile refreshing in place looks identical to a static
   one, and a broker has no way to tell a five-minute-old number from a new one. */

.ssy-kpi-val-flash[b-t1oixobcym] {
    animation: ssy-kpi-flash-b-t1oixobcym 1100ms ease-out;
    border-radius: 3px;
}

@keyframes ssy-kpi-flash-b-t1oixobcym {
    0%   { background: var(--ssy-kpi-flash-bg, rgba(1, 163, 158, 0.28)); box-shadow: 0 0 0 4px var(--ssy-kpi-flash-bg, rgba(1, 163, 158, 0.28)); }
    60%  { background: var(--ssy-kpi-flash-bg, rgba(1, 163, 158, 0.28)); box-shadow: 0 0 0 4px var(--ssy-kpi-flash-bg, rgba(1, 163, 158, 0.28)); }
    100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}

/* A flashing number is decoration, not information - the value and its delta
   already carry the change. Anyone who has asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
    .ssy-kpi-val-flash[b-t1oixobcym] {
        animation: none;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyLegendKey.razor.rz.scp.css */
.ssy-legend-key[b-olccs8c193] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-tiny, 9px);
}

.ssy-legend-key-title[b-olccs8c193] {
    font-weight: 700;
}

.ssy-legend-key-item[b-olccs8c193] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ssy-legend-key-item i[b-olccs8c193] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}
/* /Components/Common/DashboardComponents_HA/SsyMetricCell.razor.rz.scp.css */
.ssy-metric[b-jbvqkn47s7] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Components/Common/DashboardComponents_HA/SsyModal.razor.rz.scp.css */
/* One layer for every app-level dialog, above the dashboard shell and its sticky bars. */
.ssy-modal[b-651foihreb] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 7vh 16px 16px;
    background: color-mix(in srgb, var(--ssy-colour-main-simpson-blue, #000061) 40%, transparent);
}

.ssy-modal__card[b-651foihreb] {
    display: flex;
    flex-direction: column;
    width: min(var(--ssy-modal-w, 560px), 100%);
    max-height: calc(100vh - 7vh - 16px);
    overflow: hidden;
    border-top: 3px solid var(--ssy-dash-accent, #009DC9);
    border-radius: 4px;
    background: var(--ssy-dash-surface, #FFFFFF);
    color: var(--ssy-dash-text, #1A1A1A);
    box-shadow: 0 16px 48px color-mix(in srgb, var(--ssy-colour-main-simpson-blue, #000061) 28%, transparent);
    outline: none;
}

.ssy-modal__head[b-651foihreb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--ssy-dash-border, #E1E8ED);
}

.ssy-modal__titles[b-651foihreb] { min-width: 0; }

.ssy-modal__eyebrow[b-651foihreb] {
    display: block;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-micro, 8px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ssy-modal__title[b-651foihreb] {
    margin: 2px 0 0;
    color: var(--ssy-colour-main-simpson-blue, #000061);
    font-size: var(--ssy-fs-display-lg, 18px);
    font-weight: 900;
    line-height: 1.2;
}

.ssy-modal__close[b-651foihreb] {
    flex: 0 0 auto;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.ssy-modal__close:hover[b-651foihreb] { color: var(--ssy-dash-text, #1A1A1A); }

.ssy-modal__close:focus-visible[b-651foihreb] {
    outline: 2px solid var(--ssy-dash-accent, #009DC9);
    outline-offset: 2px;
}

.ssy-modal__body[b-651foihreb] {
    min-height: 0;
    overflow: auto;
    padding: 12px 16px 16px;
    font-size: var(--ssy-fs-base, 11px);
    line-height: 1.45;
}

@media (max-width: 700px) {
    .ssy-modal[b-651foihreb] { padding: 8px; }
    .ssy-modal__card[b-651foihreb] { max-height: calc(100vh - 16px); }
}
/* /Components/Common/DashboardComponents_HA/SsyMultiSelect.razor.rz.scp.css */
/* The trigger reads as a field box: same height, hairline and type as SsySelectField. */
.ssy-multiselect[b-lnlen6pl29] { min-width: 0; }
.ssy-multiselect[b-lnlen6pl29]  .ssy-popover { display: block; flex: 1 1 auto; align-self: stretch; min-width: 0; }

.ssy-multiselect[b-lnlen6pl29]  .ssy-multiselect__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 6px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ssy-multiselect[b-lnlen6pl29]  .ssy-multiselect__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ssy-multiselect[b-lnlen6pl29]  .ssy-multiselect__panel { display: grid; gap: 6px; }

.ssy-multiselect[b-lnlen6pl29]  .ssy-multiselect__tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto; /* layout-lint: allow search box beside two actions */
    gap: 4px;
    align-items: center;
}

.ssy-multiselect[b-lnlen6pl29]  .ssy-multiselect__list {
    display: grid;
    max-height: 260px;
    overflow-y: auto;
}

.ssy-multiselect[b-lnlen6pl29]  .ssy-multiselect__list label {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    padding: 2px 0;
    font-size: var(--ssy-fs-small, 10px);
    cursor: pointer;
}

.ssy-multiselect[b-lnlen6pl29]  .ssy-multiselect__none {
    color: var(--ssy-dash-text-dim, #536A75);
    font-size: var(--ssy-fs-small, 10px);
}

.ssy-multiselect[b-lnlen6pl29]  .ssy-multiselect__list input { flex: 0 0 auto; width: auto; margin: 0; }
/* /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-nclsdacy0e] {
    position: absolute;
    inset: 0;
    z-index: 20;
    padding: 16px;
    background: rgb(255 255 255 / 92%);
}

.ssy-overlay-dialog-card[b-nclsdacy0e] {
    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-nclsdacy0e] {
    position: sticky;
    top: 0;
    float: right;
}

/* The panel is reference material read at a glance, not body copy. */
.ssy-overlay-dialog-card p[b-nclsdacy0e] {
    font-size: 11px;
}
/* /Components/Common/DashboardComponents_HA/SsyPopover.razor.rz.scp.css */
.ssy-popover[b-bp94etzift] {
    position: relative;
    display: inline-block;
}

/* Transparent full-screen catcher: an outside click closes the panel without a JS listener. */
.ssy-popover__catcher[b-bp94etzift] {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.ssy-popover__panel[b-bp94etzift] {
    position: absolute;
    top: calc(100% + 4px);
    z-index: 901;
    box-sizing: border-box;
    width: max-content;
    max-width: min(420px, 92vw);
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--ssy-dash-border, #E1E8ED);
    border-radius: 4px;
    background: var(--ssy-dash-surface, #FFFFFF);
    color: var(--ssy-dash-text, #1A1A1A);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ssy-colour-main-simpson-blue, #000061) 18%, transparent);
    text-align: left;
    white-space: normal;
}
/* /Components/Common/DashboardComponents_HA/SsyPortRiskMap.razor.rz.scp.css */
.ssy-port-risk-map-shell[b-ugf4314t9p]{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-ugf4314t9p]{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-ugf4314t9p]{color:#000061;font-size:11px;text-transform:uppercase}.ssy-port-risk-map-shell header button[b-ugf4314t9p]{margin-left:auto;border:1px solid #b9c5d0;background:#fff;color:#000061;font-size:8px;font-weight:900;cursor:pointer}.ssy-port-risk-map[b-ugf4314t9p]{min-height:0}.ssy-port-risk-map-shell footer[b-ugf4314t9p]{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-ugf4314t9p]{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:3px}.ssy-port-risk-map-shell footer .risk-calm[b-ugf4314t9p]{background:#01a39e}.ssy-port-risk-map-shell footer .risk-caution[b-ugf4314t9p]{background:#009dc9}.ssy-port-risk-map-shell footer .risk-alert[b-ugf4314t9p]{background:#db303a}.ssy-port-risk-map-shell footer .risk-track[b-ugf4314t9p]{width:12px;height:0;border-radius:0;border-top:2px dashed #e75113}.storm-state[b-ugf4314t9p]{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-ugf4314t9p]{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-ugf4314t9p]{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-ugf4314t9p]{color:#000061}.ssy-port-risk-popup button[b-ugf4314t9p]{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-keiu1fquu8] {
    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-keiu1fquu8] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 7px;
    border-bottom: 1px solid #edf0f5;
}

.ssy-risk-matrix-search[b-keiu1fquu8]  .ssy-field {
    flex: 1;
    min-width: 0;
}

.ssy-risk-matrix-search .regions-toggle[b-keiu1fquu8] {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #000061;
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
}

/* A metric cell is one line: reading on the left, its band filling the rest. */
.ssy-risk-matrix[b-keiu1fquu8]  .ssy-risk-metric { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ssy-risk-matrix[b-keiu1fquu8]  .ssy-risk-metric strong { flex: 0 0 2.6em; text-align: right; }
.ssy-risk-matrix[b-keiu1fquu8]  .ssy-risk-metric > :last-child:not(strong) { flex: 1 1 auto; min-width: 40px; }
.ssy-risk-matrix[b-keiu1fquu8]  .ssy-risk-metric-na { color: var(--ssy-dash-text-muted, #798E98); font-size: var(--ssy-fs-micro, 8px); }
/* /Components/Common/DashboardComponents_HA/SsyPortRiskSummary.razor.rz.scp.css */
.ssy-risk-summary[b-dzhf40l8rr]{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-dzhf40l8rr]{display:grid;gap:2px;min-width:0;padding:6px 8px;background:#fff}.ssy-risk-summary span[b-dzhf40l8rr]{color:#61708a;font-size:8px;font-weight:900;text-transform:uppercase}.ssy-risk-summary strong[b-dzhf40l8rr]{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-dzhf40l8rr]{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:680px){.ssy-risk-summary[b-dzhf40l8rr]{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* /Components/Common/DashboardComponents_HA/SsySeasonalWeatherOutlook.razor.rz.scp.css */
.ssy-seasonal[b-f8uc5f2jn4] {
    display: grid;
    gap: 8px;
}


.ssy-seasonal-figure[b-f8uc5f2jn4] {
    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-f8uc5f2jn4] {
    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: 900;
    text-transform: uppercase;
}

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

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

.ssy-seasonal-image[b-f8uc5f2jn4] { 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-f8uc5f2jn4] { color:#61708a;font-size:10px;font-weight:750; }
.ssy-seasonal-image > span.failed[b-f8uc5f2jn4] { color:#a52a18; }
.ssy-seasonal-figure img[b-f8uc5f2jn4] {
    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-f8uc5f2jn4] { opacity:1; }

@media (max-width: 680px) {
    .ssy-seasonal-figure img[b-f8uc5f2jn4] { max-height: none; }
}
/* /Components/Common/DashboardComponents_HA/SsySegmentControl.razor.rz.scp.css */
/* No plate: the control sits inline in the shell header, square-cornered so it meets the tab
   rail flush. The active state is a direct fill (a sliding glider cannot cross the All rule). */
.ssy-segctl[b-gv8otbxch5] {
    display: flex;
    align-items: stretch;
    align-self: center;
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 0;
    gap: 1px;
}

.ssy-segctl-split[b-gv8otbxch5] {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 1px 3px;
    background: var(--ssy-dash-border-soft);
}

.ssy-segctl-btn[b-gv8otbxch5] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 3px 10px 2px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: var(--ssy-dash-text);
    transition: background-color .16s ease, color .16s ease;
}

.ssy-segctl-btn:hover[b-gv8otbxch5] {
    background: var(--ssy-dash-row-active-bg);
    color: var(--ssy-dash-brand);
}

.ssy-segctl-on[b-gv8otbxch5],
.ssy-segctl-on:hover[b-gv8otbxch5] {
    background: var(--ssy-dash-brand);
    color: var(--ssy-colour-main-pure-white);
}

.ssy-segctl-label[b-gv8otbxch5] {
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.15;
}

.ssy-segctl-on .ssy-segctl-label[b-gv8otbxch5] {
    font-weight: 750;
}

/* Not opacity: it multiplies against whichever fill is behind it. */
.ssy-segctl-sub[b-gv8otbxch5] {
    color: var(--ssy-dash-text-muted);
    font-size: var(--ssy-fs-micro);
    font-weight: 650;
    letter-spacing: .3px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ssy-segctl-on .ssy-segctl-sub[b-gv8otbxch5] {
    color: color-mix(in srgb, var(--ssy-colour-main-pure-white) 72%, transparent);
}

@media (max-width: 767px) { /* layout-lint: allow inside card: segmented control buttons */
    .ssy-segctl[b-gv8otbxch5] {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .ssy-segctl-btn[b-gv8otbxch5] {
        flex: 1 1 0;
        min-width: 0;
    }
}
/* /Components/Common/DashboardComponents_HA/SsySelectionChipRow.razor.rz.scp.css */
.ssy-selection-chip-row[b-qzf63ty22h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ssy-selection-chip[b-qzf63ty22h] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    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: 700;
    line-height: 1.2;
    padding: 3px 5px 3px 8px;
}

.ssy-selection-chip__remove[b-qzf63ty22h] {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
    font: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.ssy-selection-chip__remove:hover:not(:disabled)[b-qzf63ty22h],
.ssy-selection-chip__remove:focus-visible[b-qzf63ty22h] {
    background: var(--ssy-dash-border-soft, #CEDCE4);
    outline: 2px solid var(--ssy-dash-brand, #000061);
    outline-offset: 1px;
}

.ssy-selection-chip__remove:disabled[b-qzf63ty22h] {
    opacity: .5;
    cursor: default;
}
/* /Components/Common/DashboardComponents_HA/SsySkeleton.razor.rz.scp.css */
/* ============================================================
   SsySkeleton — shimmer placeholder for the shared components that have no real
   markup to blank yet (chart slots, KPI tiles, table rows). Same square corners,
   pale tint and 1.6s linear sweep as SsyStateSlot, so both read as one loading state. Honours
   prefers-reduced-motion. Keyframe name is global on purpose (ssy-shimmer)
   so every skeleton on the page sweeps in sync.
   ============================================================ */

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

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

.ssy-skel-bar[b-0yzqydh2a7] {
    display: block;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        var(--ssy-skel-base, var(--ssy-dash-tint-3, #F1F5F8)) 25%,
        var(--ssy-skel-hi, var(--ssy-dash-surface, #FFFFFF)) 37%,
        var(--ssy-skel-base, var(--ssy-dash-tint-3, #F1F5F8)) 63%);
    background-size: 400% 100%;
    animation: ssy-shimmer-b-0yzqydh2a7 1.6s linear infinite;
}

.ssy-skel-fill[b-0yzqydh2a7] {
    height: 100%;
    border-radius: 2px;
}

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

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

.ssy-skel-col[b-0yzqydh2a7] {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(
        90deg,
        var(--ssy-skel-base, var(--ssy-dash-tint-3, #F1F5F8)) 25%,
        var(--ssy-skel-hi, var(--ssy-dash-surface, #FFFFFF)) 37%,
        var(--ssy-skel-base, var(--ssy-dash-tint-3, #F1F5F8)) 63%);
    background-size: 400% 100%;
    animation: ssy-shimmer-b-0yzqydh2a7 1.6s linear infinite;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .ssy-skel-bar[b-0yzqydh2a7],
    .ssy-skel-col[b-0yzqydh2a7] { animation: none; }
}
/* /Components/Common/DashboardComponents_HA/SsySourceNote.razor.rz.scp.css */
.ssy-source-note[b-bfe04iskzv] {
    margin: 6px 0 0;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-tiny, 9px);
    line-height: 1.3;
}

.ssy-source-note span + span[b-bfe04iskzv] {
    margin-left: .35em;
}
/* /Components/Common/DashboardComponents_HA/SsySparkline.razor.rz.scp.css */
.ssy-spark-wrap[b-7bhs4sd15i] {
    display: inline-block;
    vertical-align: middle;
    cursor: crosshair;
}

.ssy-spark-wrap:has(.ssy-spark-tall)[b-7bhs4sd15i] {
    display: block;
    width: 100%;
}

.ssy-spark[b-7bhs4sd15i] {
    display: block;
    width: 92px;
    height: 22px;
}

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

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

.ssy-spark path[b-7bhs4sd15i] {
    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 path.ssy-spark-line[b-7bhs4sd15i] {
    stroke: var(--ssy-dash-down, var(--ssy-colour-palette-vivid-pink, #EB3871));
}

.ssy-spark.ssy-cool path.ssy-spark-line[b-7bhs4sd15i] {
    stroke: var(--ssy-dash-up, var(--ssy-colour-palette-teal-green, #01A39E));
}

.ssy-spark path.ssy-spark-compare[b-7bhs4sd15i] {
    stroke: var(--ssy-dash-text-muted, #798E98);
    stroke-dasharray: 2 2;
    opacity: 0.7;
}

.ssy-spark path.ssy-spark-clip[b-7bhs4sd15i] {
    stroke: var(--ssy-dash-text-muted, #798E98);
    stroke-width: 1.2;
}
/* /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-5zyqo6qz2m] {
    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-5zyqo6qz2m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ssy-spinner[b-5zyqo6qz2m] {
    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-5zyqo6qz2m 0.7s linear infinite;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .ssy-spinner[b-5zyqo6qz2m] { animation-duration: 1.6s; }
}
/* /Components/Common/DashboardComponents_HA/SsyStateSlot.razor.rz.scp.css */
.ssy-state-slot[b-u6wq8m4dwq] {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.ssy-state-slot.is-passthrough[b-u6wq8m4dwq] {
    display: contents;
}

/* The content wrapper takes no part in layout, so the authored markup sits exactly where it
   would without the slot: its children lay out against the slot's own box. */
.ssy-state-slot__content[b-u6wq8m4dwq] {
    display: contents;
}

/* A slot placed in a fit-to-pane chain passes the height through: as a flex column its children's
   ssy-fit-fill / ssy-fit-flex classes grow into it, as they did against the old direct parent. */
.ssy-state-slot:is(.ssy-fit-fill, .ssy-fit-flex, .ssy-fit-col, .ssy-fit-scroll)[b-u6wq8m4dwq] {
    display: flex;
    flex-direction: column;
}

.ssy-state-slot.is-loading .ssy-state-slot__content[b-u6wq8m4dwq] {
    pointer-events: none;
}

/* The live markup owns every dimension. Blanking text and graphics preserves its
   rows, cards and chart slots, while the shimmer follows their existing surfaces. */
.ssy-state-slot.is-loading .ssy-state-slot__content[b-u6wq8m4dwq]  * {
    color: transparent !important;
    text-shadow: none !important;
    caret-color: transparent !important;
}

.ssy-state-slot.is-loading .ssy-state-slot__content[b-u6wq8m4dwq]  :is(svg, canvas, img) {
    visibility: hidden;
}

.ssy-state-slot.is-loading .ssy-state-slot__content[b-u6wq8m4dwq]  :is(.ssy-card, .ssy-kpi-tile, .cape-card, td, th, button) {
    background-image: linear-gradient(100deg, transparent 20%, rgba(128, 144, 170, .2) 45%, transparent 70%);
    background-size: 220% 100%;
    animation: ssy-state-slot-shimmer-b-u6wq8m4dwq 1.6s linear infinite;
}

@keyframes ssy-state-slot-shimmer-b-u6wq8m4dwq {
    to { background-position-x: -220%; }
}

@media (prefers-reduced-motion: reduce) {
    .ssy-state-slot.is-loading .ssy-state-slot__content[b-u6wq8m4dwq]  :is(.ssy-card, .ssy-kpi-tile, .cape-card, td, th, button) {
        animation: none;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyStatusDot.razor.rz.scp.css */
.ssy-statusdot[b-pu219sp92t] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ssy-dash-text-muted, #798E98);
}

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

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

.ssy-statusdot-alert[b-pu219sp92t] {
    background: var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red, #DB303A));
}
/* /Components/Common/DashboardComponents_HA/SsyTable.razor.rz.scp.css */
/* ============================================================
   SsyTable - every visual rule for dashboard tables lives here.
   Theme vars are the --ssy-dash-* set used by the rest of the kit.
   ============================================================ */

.ssyt-search[b-pwwknaitib] {
    max-width: 16rem;
    margin-bottom: 4px;
}

.ssyt-wrap[b-pwwknaitib] {
    position: relative;
    overflow: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    overscroll-behavior-inline: contain;
}

/* The scroll box never has side padding. A pinned column sticks to the inside of the padding,
   so a consumer's padding left a strip where scrolled columns showed through to the left of
   the row labels. Triple class so a host's ::deep padding rule cannot out-rank it. */
.ssyt-wrap.ssyt-wrap.ssyt-wrap[b-pwwknaitib] {
    padding-inline: 0;
}

/* Scroll cue: while columns are hidden off the right edge (class set by SsyTable.razor.js),
   the last 28px of the box fade out, so a cut column reads as "more this way". A mask, not a
   shadow: cells paint opaque backgrounds over anything drawn on the wrapper, but a mask sits
   on the box itself and stays put while the content scrolls under it. */
.ssyt-wrap.ssyt-more-right[b-pwwknaitib] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), rgba(0, 0, 0, 0.15));
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), rgba(0, 0, 0, 0.15));
}

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

/* Type and cell padding scale with the box: 10px / 4px at desktop widths, down to
   9px / 2px on a phone, so a narrow table shows more columns before it scrolls. */
.ssyt[b-pwwknaitib] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: clamp(9px, calc(8px + 0.25cqi), var(--ssy-fs-small));
    font-variant-numeric: tabular-nums;
}

/* ---- header ---- */
/* The whole head sticks as one block, not each th with its own top offset. Per-row
   offsets assumed a one-line group row; once headers could wrap, the column row slid
   under the group row while scrolling. */
.ssyt thead[b-pwwknaitib] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.ssyt th[b-pwwknaitib] {
    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-transform: uppercase;
    white-space: nowrap;
}

/* Grouped header: the group row sits on top, the column row sticks just below it. */
.ssyt thead tr.ssyt-grouprow th[b-pwwknaitib] {
    border-bottom: 2px solid var(--ssy-dash-border, #E1E8ED);
    color: var(--ssy-dash-text, #1a1a1a);
    text-align: center;
}


.ssyt-headbtn[b-pwwknaitib] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.ssyt-headbtn:focus-visible[b-pwwknaitib] {
    outline: 2px solid var(--ssy-dash-focus, #1688c9);
    outline-offset: 1px;
}

/* ---- cells ---- */
.ssyt td[b-pwwknaitib] {
    height: 17px;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px clamp(2px, 0.5cqi, 4px);
    line-height: 1.2;
    border-bottom: 1px solid var(--ssy-dash-row-line, #F2F5F8);
    color: var(--ssy-dash-text, #1a1a1a);
    vertical-align: middle;
    white-space: nowrap;
}

.ssyt .ssyt-text[b-pwwknaitib] { text-align: left; }

/* Every cell is on the table surface. Without it a table on a tinted canvas let the canvas
   show through plain cells, which read as shading. :where() keeps this at zero weight so
   heat, selection, hover and highlight all paint over it. */
.ssyt :where(td)[b-pwwknaitib] { background-color: var(--ssy-dash-surface, #fff); }

/* Authored column Width arrives as --ssyt-w (a var, so the narrow rule can release it). */
.ssyt :is(th, td)[b-pwwknaitib] { width: var(--ssyt-w, auto); }

.ssyt .ssyt-num[b-pwwknaitib] {
    text-align: right;
}

.ssyt td.ssyt-first[b-pwwknaitib] {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ssy-dash-brand, var(--ssy-colour-main-simpson-blue, #000061));
    font-weight: 700;
}

.ssyt .ssyt-narrow-only[b-pwwknaitib] { display: none; }

/* A sparkline in a cell spans the cell (its SVG stretches, preserveAspectRatio=none), so
   a column wider than 92px has no dead space after the trace. 60px keeps it readable. */
.ssyt td[b-pwwknaitib]  .ssy-spark-wrap { display: block; width: 100%; } /* fill the column, not the 60px floor */
.ssyt td[b-pwwknaitib]  .ssy-spark:not(.ssy-spark-tall) { width: 100%; min-width: 60px; }

/* Cell content never sets the row height: sparklines, badges and band bars fit the 17px row. */
.ssyt td[b-pwwknaitib]  .ssy-spark:not(.ssy-spark-tall) { height: 14px; }
.ssyt td[b-pwwknaitib]  .ssy-badge { height: 14px; line-height: 1; }

.ssyt td.ssyt-up[b-pwwknaitib] { color: var(--ssy-dash-up, #01A39E); }
.ssyt td.ssyt-dn[b-pwwknaitib] { color: var(--ssy-dash-down, #EB3871); }
/* A strong move is bold, not tinted: fills are reserved for heat, so a busy table stays calm. */
.ssyt td.ssyt-strong[b-pwwknaitib] { font-weight: 700; }

/* Value and its change in one cell: the change sits tight to the number, smaller, in its own colour. */
.ssyt .ssyt-delta[b-pwwknaitib] {
    display: inline-block;
    min-width: 2.6em;
    margin-left: 3px;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-micro, 8px);
    font-weight: 700;
    text-align: left;
}
.ssyt .ssyt-delta.ssyt-up[b-pwwknaitib] { color: var(--ssy-dash-up, #01A39E); }
.ssyt .ssyt-delta.ssyt-dn[b-pwwknaitib] { color: var(--ssy-dash-down, #EB3871); }
.ssyt .ssyt-delta.ssyt-delta-strong[b-pwwknaitib] { font-weight: 900; }

/* Cell marks: what the number is, not what it says. */
/* Fades are text colour, not opacity: opacity also faded the cell's borders, so column and group
   lines went pale and broken on every stale row. */
.ssyt tbody td.ssyt-mark-stale[b-pwwknaitib],
.ssyt tbody td.ssyt-mark-stale .ssyt-delta[b-pwwknaitib] { color: var(--ssy-dash-text-muted, #798E98); }
.ssyt tbody td.ssyt-mark-old[b-pwwknaitib],
.ssyt tbody td.ssyt-mark-old .ssyt-delta[b-pwwknaitib] { color: color-mix(in srgb, var(--ssy-dash-text-muted, #798E98) 55%, transparent); }
/* Reference columns (frequency, source): readable, quiet, never competing with the numbers. */
.ssyt tbody td.ssyt-quiet[b-pwwknaitib] { color: var(--ssy-dash-text-muted, #798E98); font-weight: 400; }
.ssyt td.ssyt-mark-derived[b-pwwknaitib] { text-decoration: underline dotted; text-underline-offset: 2px; }
.ssyt td.ssyt-mark-fallback[b-pwwknaitib] { color: var(--ssy-dash-text-muted, #798E98); font-style: italic; }

.ssyt .ssyt-chevron[b-pwwknaitib] {
    display: inline-block;
    width: 0.9em;
    color: var(--ssy-dash-text-muted, #798E98);
}

/* Heat is an image layer, so row states (hover, selected, highlight) tint underneath instead of erasing it. */
.ssyt td.ssyt-heat-up[b-pwwknaitib] { --ssyt-heat-c: color-mix(in srgb, var(--ssy-dash-up, #01A39E) calc(var(--ssyt-heat) * 0.4), transparent); }
.ssyt td.ssyt-heat-dn[b-pwwknaitib] { --ssyt-heat-c: color-mix(in srgb, var(--ssy-dash-down, #EB3871) calc(var(--ssyt-heat) * 0.4), transparent); }
.ssyt td.ssyt-heat-up[b-pwwknaitib],
.ssyt td.ssyt-heat-dn[b-pwwknaitib] { background-image: linear-gradient(var(--ssyt-heat-c), var(--ssyt-heat-c)); }
/* On a heated cell the fill carries the direction; the text stays dark and bold so it reads on the colour. */
.ssyt td.ssyt-heat-up[b-pwwknaitib],
.ssyt td.ssyt-heat-dn[b-pwwknaitib] { color: var(--ssy-dash-text, #1a1a1a); font-weight: 700; }

.ssyt .ssyt-colsel[b-pwwknaitib] { background: var(--ssy-dash-row-active, #EAF1F5); }
.ssyt th.ssyt-colsel[b-pwwknaitib] { color: var(--ssy-dash-brand, #000061); }

/* ---- pinned row label ---- */
/* The first column is always sticky: with no sideways scroll it does nothing, and when
   the table scrolls the row label stays. :where() keeps it at the lowest specificity
   so hover, selection and heat states still paint over it. */
.ssyt :where(td.ssyt-first:not(.ssyt-frozen))[b-pwwknaitib],
.ssyt :where(thead tr:not(.ssyt-grouprow) th:first-child:not(.ssyt-frozen))[b-pwwknaitib] {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--ssy-dash-surface, #fff);
}
.ssyt thead tr:not(.ssyt-grouprow) th:first-child:not(.ssyt-frozen)[b-pwwknaitib] { z-index: 3; }

/* ---- frozen columns ---- */
.ssyt .ssyt-frozen[b-pwwknaitib] {
    position: sticky;
    z-index: 1;
    background: var(--ssy-dash-surface, #fff);
}

.ssyt th.ssyt-frozen[b-pwwknaitib] { z-index: 3; }

/* A frozen column's Width arrives as --ssyt-fw: the next frozen column's left offset is
   computed from it, so it must hold exactly. */
.ssyt .ssyt-frozen[b-pwwknaitib] { width: var(--ssyt-fw, auto); min-width: var(--ssyt-fw, 0); max-width: var(--ssyt-fw, none); }

.ssyt .ssyt-frozen-last[b-pwwknaitib] { border-right: 1px solid var(--ssy-dash-border, #E1E8ED); }
/* The frozen edge already draws the line; the next cell's own left rule would double it. */
.ssyt .ssyt-frozen-last + :is(td, th)[b-pwwknaitib] { border-left-width: 0 !important; }

/* ---- rows ---- */
.ssyt tbody tr:last-child td[b-pwwknaitib] { border-bottom: 0; }

.ssyt tbody tr:hover td[b-pwwknaitib],
.ssyt tbody tr.ssyt-row-hot td[b-pwwknaitib] { background-color: var(--ssy-dash-row-active, #EAF1F5); }

.ssyt tr.ssyt-row-group td[b-pwwknaitib] {
    padding-top: 5px;
    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: left;
    text-transform: uppercase;
}

.ssyt tr.ssyt-row-total td[b-pwwknaitib] {
    border-top: 1px solid var(--ssy-dash-border, #E1E8ED);
    font-weight: 700;
}

.ssyt tr.ssyt-row-muted td[b-pwwknaitib] { color: var(--ssy-dash-text-muted, #798E98); }

.ssyt tr.ssyt-row-highlight td[b-pwwknaitib] { background-color: var(--ssy-dash-surface-soft, #F4F7F9); font-weight: 700; }

.ssyt tr.ssyt-row-selectable[b-pwwknaitib] { cursor: pointer; }

.ssyt tr.ssyt-row-selectable:focus-visible[b-pwwknaitib] {
    outline: 2px solid var(--ssy-dash-focus, #1688c9);
    outline-offset: -2px;
}

.ssyt tr.ssyt-row-selected td[b-pwwknaitib] {
    background-color: var(--ssy-dash-row-active, #EAF1F5);
    box-shadow: inset 0 -1px 0 var(--ssy-dash-brand, #000061);
}

.ssyt tr.ssyt-row-selected td.ssyt-first[b-pwwknaitib] { box-shadow: inset 2px -1px 0 var(--ssy-dash-brand, #000061); }

/* Narrow box: fit flush first. Headers wrap onto two lines so a long column or group
   title no longer sets the column width - the numbers do. Only a table whose numbers
   themselves are wider than the box scrolls, inside its wrapper, with the row label pinned.
   Asked of the nearest container (the dashboard shell), not the viewport. */
@container (max-width: 760px) {
    .ssyt th[b-pwwknaitib] { white-space: normal; }
    .ssyt .ssyt-narrow-hide[b-pwwknaitib],
    .ssyt .ssyt-wide-only[b-pwwknaitib] { display: none; }
    .ssyt .ssyt-narrow-only[b-pwwknaitib] { display: table-cell; }
    /* Hidden columns leave the frozen offsets (see FrozenStyle). */
    .ssyt[b-pwwknaitib] { --ssyt-nh: 0; }
    /* RowEdge: the row's status as a 3px edge on its first cell (the badge column is hidden). */
    .ssyt tr[class*="ssyt-edge-"] > td:first-child[b-pwwknaitib] { box-shadow: inset 3px 0 0 var(--ssyt-edge); }
    .ssyt tr.ssyt-edge-caution[b-pwwknaitib] { --ssyt-edge: var(--ssy-colour-palette-golden-yellow, #F7A506); }
    .ssyt tr.ssyt-edge-alert[b-pwwknaitib] { --ssyt-edge: var(--ssy-colour-palette-crimson-red, #DB303A); }
    .ssyt tr.ssyt-edge-positive[b-pwwknaitib] { --ssyt-edge: var(--ssy-colour-palette-teal-green, #01A39E); }
    .ssyt tr.ssyt-edge-info[b-pwwknaitib] { --ssyt-edge: var(--ssy-colour-main-crystal-blue, #009DC9); }
    .ssyt tr.ssyt-edge-brand[b-pwwknaitib] { --ssyt-edge: var(--ssy-colour-main-simpson-blue, #000061); }
    .ssyt tr.ssyt-edge-neutral[b-pwwknaitib] { --ssyt-edge: var(--ssy-dash-border-soft, #CEDCE4); }
    /* One move per cell in a narrow box: the second delta (e.g. 1D beside 30D) goes. */
    .ssyt .ssyt-delta2[b-pwwknaitib] { display: none; }
    /* An authored Width is a desktop design width; narrow, the content sizes the column. */
    .ssyt :is(th, td):not(.ssyt-frozen)[b-pwwknaitib] { width: auto; }
    /* The LAST frozen column's width feeds no offset, so in a narrow box it fits its labels
       too (capped like the plain first column) instead of holding its desktop width. */
    .ssyt .ssyt-frozen-last[b-pwwknaitib] { width: auto; min-width: 0; max-width: 9rem; }
    .ssyt td.ssyt-first[b-pwwknaitib] { max-width: 9rem; }
}

.ssyt tr.ssyt-row-detail td[b-pwwknaitib] {
    padding: 4px 6px 6px;
    white-space: normal;
    background: var(--ssy-dash-surface-soft, #F8FAFB);
}

/* Dense boards: many rows on screen at once. */
.ssyt.ssyt-dense td[b-pwwknaitib] { height: 14px; padding-block: 0; line-height: 12px; }
.ssyt.ssyt-dense td[b-pwwknaitib]  .ssy-spark:not(.ssy-spark-tall) { height: 11px; }

/* Visual grouping: a rule where a column group starts, and where a row block (BreakBy) changes. */
/* A group starts with a solid line down the whole column: group header, column header and every row.
   Real borders, not inset shadows: a shadow paints inside the cell, so every row border cut a gap in it. */
.ssyt th.ssyt-group-start[b-pwwknaitib],
.ssyt td.ssyt-group-start[b-pwwknaitib] { border-left: 1px solid color-mix(in srgb, var(--ssy-dash-brand, #000061) 22%, transparent); }
.ssyt tr.ssyt-row-break > :is(td, th)[b-pwwknaitib] { border-top: 2px solid var(--ssy-dash-border, #E1E8ED); }

.ssyt td.ssyt-cell-click[b-pwwknaitib] { cursor: pointer; }
.ssyt td.ssyt-cell-click:hover[b-pwwknaitib] { box-shadow: inset 0 0 0 1px var(--ssy-dash-brand, #000061); }
.ssyt td.ssyt-cell-click:focus-visible[b-pwwknaitib] { outline: 2px solid var(--ssy-dash-focus, #1688c9); outline-offset: -2px; }

/* The wrapper takes the height its card or cell has left. The table keeps natural row heights
   unless the page opts into Fill, where the body rows share any spare height. */
.ssyt-wrap[b-pwwknaitib] { flex: 1 1 auto; display: flex; flex-direction: column; }
.ssyt-wrap > .ssyt[b-pwwknaitib] { flex: 0 0 auto; }
.ssyt-wrap.ssyt-fill > .ssyt[b-pwwknaitib] { flex: 1 1 auto; }
.ssyt thead th[b-pwwknaitib] { height: 1px; }

/* Column lines: a light rule between every column; group starts keep the stronger rule. */
.ssyt.ssyt-lines td + td[b-pwwknaitib],
.ssyt.ssyt-lines tr:not(.ssyt-grouprow) th + th[b-pwwknaitib] { border-left: 1px solid var(--ssy-dash-border, #E1E8ED); }
/* With column lines on, a group boundary must out-rank them: 2px instead of 1px, band row included. */
.ssyt.ssyt-lines td.ssyt-group-start[b-pwwknaitib],
.ssyt.ssyt-lines th.ssyt-group-start[b-pwwknaitib] { border-left: 2px solid color-mix(in srgb, var(--ssy-dash-brand, #000061) 35%, transparent); }

/* Merged row-group label (GroupLabel): one cell down the side of its block. */
.ssyt th.ssyt-span[b-pwwknaitib] {
    vertical-align: top;
    padding-top: 3px;
    text-align: left;
    white-space: normal;
    background-color: 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-transform: uppercase;
    border-bottom: 1px solid var(--ssy-dash-border, #E1E8ED);
}
/* Hovering a row must not repaint the shared label of its block. */
.ssyt tbody tr:hover th.ssyt-span[b-pwwknaitib] { background-color: var(--ssy-dash-surface, #fff); }

/* Footer rows: same column boxes as the body, a rule above the block. */
.ssyt tbody.ssyt-foot tr:first-child td[b-pwwknaitib] { border-top: 2px solid var(--ssy-dash-border, #E1E8ED); }
.ssyt tbody.ssyt-foot td.ssyt-first[b-pwwknaitib] { color: var(--ssy-dash-text, #1a1a1a); }

/* Fixed layout (opt-in): widths come from the colgroup and are exact. A table whose widths add up to
   more than the box scrolls inside its wrapper rather than squashing. */
.ssyt.ssyt-fixed[b-pwwknaitib] { table-layout: fixed; }
.ssyt.ssyt-fixed col[b-pwwknaitib] { width: var(--ssyt-w, auto); }
@container (max-width: 760px) {
    .ssyt.ssyt-fixed[b-pwwknaitib] { table-layout: auto; }
    .ssyt.ssyt-fixed col[b-pwwknaitib] { width: auto; }
}


/* Compact: the table is as wide as its columns, so two numbers are not spread over a whole panel. */
.ssyt.ssyt-compact[b-pwwknaitib] { width: auto; }
.ssyt-wrap > .ssyt.ssyt-compact[b-pwwknaitib] { align-self: flex-start; }
/* /Components/Common/DashboardComponents_HA/SsyToggleGroup.razor.rz.scp.css */
.ssy-toggle[b-4x5ebqnqhx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.ssy-toggle__label[b-4x5ebqnqhx] {
    flex: 0 0 auto;
    color: var(--ssy-dash-text-dim, #536A75);
    font-size: var(--ssy-fs-small, 10px);
    font-weight: 700;
    white-space: nowrap;
}

/* One bordered strip, options divided by hairlines. Scrolls sideways rather than wrapping,
   so a long group never changes the height of the bar it sits in. */
.ssy-toggle__items[b-4x5ebqnqhx] {
    display: inline-flex;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    border-radius: 3px;
    background: var(--ssy-dash-surface, #FFFFFF);
}

.ssy-toggle__items[b-4x5ebqnqhx]::-webkit-scrollbar { display: none; }

.ssy-toggle__item[b-4x5ebqnqhx] {
    flex: 0 0 auto;
    height: 20px;
    padding: 0 8px;
    border: 0;
    border-right: 1px solid var(--ssy-dash-border-soft, #CEDCE4);
    background: transparent;
    color: var(--ssy-dash-text-muted, #798E98);
    font: inherit;
    font-size: var(--ssy-fs-tiny, 9px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.ssy-toggle__item:last-child[b-4x5ebqnqhx] { border-right: 0; }

/* Columns: a grid of options. Each option draws its own hairline ring into the 1px gap, so
   an unfilled last cell stays plain surface instead of a grey block. */
.ssy-toggle.is-grid .ssy-toggle__items[b-4x5ebqnqhx] {
    display: inline-grid;
    grid-template-columns: repeat(var(--ssy-toggle-cols), auto);
    gap: 1px;
    overflow: visible;
}

.ssy-toggle.is-grid .ssy-toggle__item[b-4x5ebqnqhx] {
    border-right: 0;
    box-shadow: 0 0 0 1px var(--ssy-dash-border-soft, #CEDCE4);
}

/* Narrow box: tighter buttons, so a group fits beside its neighbours instead of being
   squeezed into its own scroller and clipped mid-label. */
@container (max-width: 760px) {
    .ssy-toggle__item[b-4x5ebqnqhx] { padding: 0 5px; }
    .is-regular .ssy-toggle__item[b-4x5ebqnqhx] { padding: 0 7px; }
}

.is-regular .ssy-toggle__item[b-4x5ebqnqhx] {
    height: 24px;
    padding: 0 10px;
    font-size: var(--ssy-fs-small, 10px);
}

.ssy-toggle__item:hover:not(:disabled):not(.is-on)[b-4x5ebqnqhx] {
    background: var(--ssy-dash-tint-2, #F4F7F9);
    color: var(--ssy-dash-text, #1A1A1A);
}

.ssy-toggle__item.is-on[b-4x5ebqnqhx] {
    background: var(--ssy-colour-main-simpson-blue, #000061);
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
}

.ssy-toggle__item:disabled[b-4x5ebqnqhx] { opacity: .4; cursor: not-allowed; }

.ssy-toggle__item:focus-visible[b-4x5ebqnqhx] {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--ssy-dash-accent, #009DC9);
    outline-offset: -2px;
}

/* Dark: explicitly, or automatically inside the navy command bar, whose --ssy-bar-* tokens it
   reads. An explicit Dark tone off the bar carries the same tokens itself. Same metrics as the
   bar's original .ssy-cmdbar-controls buttons (micro type, regular weight, 6px sides). */
.ssy-toggle.is-dark:not(.ssy-cmdbar *)[b-4x5ebqnqhx] {
    --ssy-bar-line: rgba(255, 255, 255, .22);
    --ssy-bar-text: rgba(255, 255, 255, .78);
    --ssy-bar-hover: rgba(255, 255, 255, .08);
    --ssy-bar-on: rgba(255, 255, 255, .16);
    --ssy-bar-ink: #FFFFFF;
}

.ssy-toggle:is(.is-dark, .ssy-cmdbar :not(.is-light):not(.ssy-popover__panel *)) .ssy-toggle__label[b-4x5ebqnqhx] { color: var(--ssy-bar-text); }
.ssy-toggle:is(.is-dark, .ssy-cmdbar :not(.is-light):not(.ssy-popover__panel *)) .ssy-toggle__items[b-4x5ebqnqhx] { border-color: var(--ssy-bar-line); background: transparent; }
.ssy-toggle:is(.is-dark, .ssy-cmdbar :not(.is-light):not(.ssy-popover__panel *)) .ssy-toggle__item[b-4x5ebqnqhx] { padding: 0 6px; border-right-color: var(--ssy-bar-line); color: var(--ssy-bar-text); font-size: var(--ssy-fs-micro, 8px); font-weight: inherit; }
.ssy-toggle:is(.is-dark, .ssy-cmdbar :not(.is-light):not(.ssy-popover__panel *)) .ssy-toggle__item:hover:not(:disabled):not(.is-on)[b-4x5ebqnqhx] { background: var(--ssy-bar-hover); color: var(--ssy-bar-ink); }
.ssy-toggle:is(.is-dark, .ssy-cmdbar :not(.is-light):not(.ssy-popover__panel *)) .ssy-toggle__item.is-on[b-4x5ebqnqhx] { background: var(--ssy-bar-on); color: var(--ssy-bar-ink); }
.ssy-toggle:is(.is-dark, .ssy-cmdbar :not(.is-light):not(.ssy-popover__panel *)) .ssy-toggle__item:focus-visible[b-4x5ebqnqhx] { outline-color: var(--ssy-bar-ink); }

/* Taller targets on touch, except on the command bar, which stays tight. */
@media (pointer: coarse) {
    .ssy-toggle__item:not(.ssy-cmdbar *)[b-4x5ebqnqhx] { height: 28px; }
}

/* Bar compaction (see the component header). Off the bar both stay hidden. */
.ssy-toggle__flip[b-4x5ebqnqhx],
.ssy-toggle__select[b-4x5ebqnqhx] { display: none; }

.ssy-cmdbar .ssy-toggle.has-flip .ssy-toggle__items[b-4x5ebqnqhx] { display: none; }
.ssy-cmdbar .ssy-toggle__flip[b-4x5ebqnqhx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 6px;
    border: 1px solid var(--ssy-bar-line);
    border-radius: 3px;
    background: var(--ssy-bar-on);
    color: var(--ssy-bar-ink);
    font: inherit;
    font-size: var(--ssy-fs-micro, 8px);
    white-space: nowrap;
    cursor: pointer;
}
.ssy-cmdbar .ssy-toggle__flip i[b-4x5ebqnqhx] { color: var(--ssy-bar-text); font-style: normal; opacity: .7; }
.ssy-cmdbar .ssy-toggle__flip:hover:not(:disabled) i[b-4x5ebqnqhx] { color: var(--ssy-cmdbar-accent, #F7A506); opacity: 1; }
.ssy-cmdbar .ssy-toggle__flip:disabled[b-4x5ebqnqhx] { opacity: .4; cursor: not-allowed; }

/* Select form: when the bar's fit script runs out of room (data-fit "selects"), and on phones. */
.ssy-cmdbar[data-fit~="selects"] .ssy-toggle.has-select .ssy-toggle__items[b-4x5ebqnqhx] { display: none; }
.ssy-cmdbar[data-fit~="selects"] .ssy-toggle__select[b-4x5ebqnqhx] { display: inline-block; }

@container (max-width: 760px) {
    .ssy-cmdbar .ssy-toggle.has-select .ssy-toggle__items[b-4x5ebqnqhx] { display: none; }
    .ssy-cmdbar .ssy-toggle__select[b-4x5ebqnqhx] { display: inline-block; }
}

.ssy-cmdbar .ssy-toggle__select[b-4x5ebqnqhx] {
    height: 20px;
    max-width: 12rem;
    padding: 0 2px;
    border: 1px solid var(--ssy-bar-line);
    border-radius: 3px;
    outline: none;
    background: var(--ssy-bar-on);
    color: var(--ssy-bar-ink);
    font: inherit;
    font-size: var(--ssy-fs-micro, 8px);
    field-sizing: content;
    cursor: pointer;
}
.ssy-cmdbar .ssy-toggle__select option[b-4x5ebqnqhx] { color: var(--ssy-dash-text, #333); background: var(--ssy-dash-surface, #fff); }
/* /Components/Common/DashboardComponents_HA/SsyTreemap.razor.rz.scp.css */
.ssy-treemap[b-2p4g0ezxwr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #262931;
}

.ssy-treemap-plot[b-2p4g0ezxwr] {
    flex: 1 1 auto;
    min-height: 0;
}

/* Finviz's legend: seven fixed swatches, bottom right. */
.ssy-treemap-legend[b-2p4g0ezxwr] {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    padding: 4px;
}

.ssy-treemap-legend > span[b-2p4g0ezxwr] {
    min-width: 48px;
    padding: 2px 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.ssy-treemap[b-2p4g0ezxwr]  .ssy-treemap-muted {
    opacity: 0.45;
}
/* /Components/Common/DashboardComponents_HA/SsyVolumeLedger.razor.rz.scp.css */
/* The ledger's frame, the same on every Volumes tab. display: contents keeps the page's own
   grid/fit rules on the table wrapper, as if this div were not there. */
.ssyvl[b-gcd39ueww8] { display: contents; }
.ssyvl[b-gcd39ueww8]  .ssyt-wrap {
    background: var(--ssy-dash-surface, #fff);
    border: 1px solid var(--ssy-dash-border, #E1E8ED);
    border-radius: 4px;
    padding: 2px 3px 3px;
}
.ssyvl[b-gcd39ueww8]  .ssyvl-na { color: var(--ssy-dash-text-muted, #798E98); }
/* /Components/Common/DashboardComponents_HA/SsyVolumeMetric.razor.rz.scp.css */
.ssyvm[b-rlqs7icip2] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 2px 1px;
    white-space: nowrap;
}
.ssyvm[b-rlqs7icip2]  .ssy-delta-inline strong {
    font-size: var(--ssy-fs-base);
    font-weight: 750;
    color: var(--ssy-colour-main-simpson-blue, #000061);
    font-variant-numeric: tabular-nums;
}
.ssyvm[b-rlqs7icip2]  .ssy-delta-inline span {
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
}
/* /Components/Common/DashboardComponents_HA/SsyVolumeTab.razor.rz.scp.css */
/* ============================================================
   SsyVolumeTab - layout shared by every Volumes tab. The page's markup sits in ChildContent,
   so every rule below reaches it with ::deep. Light-terminal idiom: hairline rules, tabular
   figures, colour only on deltas / band position.
   ============================================================ */

.ssyvol[b-ub7930dr1t] {
    /* layout (flex column) comes from ssy-fit-flex on the root */
    gap: 6px;
    --ssy-dash-warn: var(--ssy-dash-down, #EB3871);
}

/* Content-sized rows, not shares of the panel's fixed height: each child takes the height it
   needs and the panel scrolls (ssy-fit-scroll). An auto row divided the fixed height and starved
   the board when footnotes were added below it. */
.ssyvol[b-ub7930dr1t]  .ssyvol-panel {
    display: grid;
    gap: 6px;
    align-content: start;
    grid-auto-rows: max-content;
}

/* Ledger + ONE total chart, subordinate cards below. Rows are max-content: a section can carry
   42 cards and the panel scrolls. */
.ssyvol[b-ub7930dr1t]  .ssyvol-section {
    display: grid;
    grid-auto-rows: max-content;
    gap: 6px;
    min-width: 0;
}

.ssyvol[b-ub7930dr1t]  .ssyvol-hero {
    display: grid;
    --ssy-grid-cols: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-columns: var(--ssy-grid-cols);
    gap: 6px;
    min-width: 0;
}

.ssyvol[b-ub7930dr1t]  .ssyvol-cardgrid {
    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 cannot push the
   total chart off the top of the page. */
.ssyvol[b-ub7930dr1t]  .ssyvol-hero .ssyvol-summary-wrap {
    height: 100%;
    overflow-y: auto;
}

.ssyvol[b-ub7930dr1t]  .ssyvol-summary-wrap {
    height: auto;
    min-height: 100%;
    overflow: auto;
}

/* ---- chart cards: hover halo, shared with the ledger row (SsyVolumeHover) ---- */
.ssyvol[b-ub7930dr1t]  .ssyvol-cardwrap {
    min-width: 0;
    border-radius: 4px;
    transition: box-shadow 0.15s ease;
}
.ssyvol[b-ub7930dr1t]  .ssyvol-cardwrap:hover,
.ssyvol[b-ub7930dr1t]  .ssyvol-cardwrap.ssyvol-hot {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ssy-colour-main-simpson-blue, #000061) 25%, transparent);
}
.ssyvol[b-ub7930dr1t]  .ssyvol-cardwrap .ssy-card { height: 100%; }

/* ---- footnotes ---- */
.ssyvol[b-ub7930dr1t]  .ssyvol-attrib {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}
.ssyvol[b-ub7930dr1t]  .ssyvol-attrib-foot {
    font-size: var(--ssy-fs-small);
    line-height: 1.4;
    color: var(--ssy-dash-text-muted, #798E98);
    background: color-mix(in srgb, var(--ssy-colour-palette-golden-yellow, #F7A506) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ssy-colour-palette-golden-yellow, #F7A506) 35%, transparent);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 0;
}
.ssyvol[b-ub7930dr1t]  .ssyvol-attrib-foot b { color: var(--ssy-dash-down, #EB3871); }

/* A clean bill of health reads calm; same shape either way so the eye finds it in one place. */
.ssyvol[b-ub7930dr1t]  .ssyvol-attrib-foot.ok {
    background: color-mix(in srgb, var(--ssy-colour-main-simpson-blue, #000061) 4%, transparent);
    border-color: var(--ssy-dash-border, #E1E8ED);
}
.ssyvol[b-ub7930dr1t]  .ssyvol-attrib-foot.ok b { color: var(--ssy-dash-text, #1a1a1a); }

/* ---- footer ---- */
.ssyvol[b-ub7930dr1t]  .ssyvol-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 4px 2px 2px;
    border-top: 1px solid var(--ssy-dash-border, #E1E8ED);
    font-size: var(--ssy-fs-small);
    color: var(--ssy-dash-text-muted, #798E98);
}
.ssyvol[b-ub7930dr1t]  .ssyvol-gap { font-style: italic; }
/* The scope line closes the footer, pushed right: a record of the controls, not a caveat. */
.ssyvol[b-ub7930dr1t]  .ssyvol-scope { margin-left: auto; }

@media (max-width: 1100px), (max-height: 768px) {
    /* Narrow or short: both bands collapse to one column, total chart under the ledger. */
    .ssyvol[b-ub7930dr1t]  .ssyvol-hero,
    .ssyvol[b-ub7930dr1t]  .ssyvol-cardgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the ledger takes its natural height and the page scrolls. */
    .ssyvol[b-ub7930dr1t]  .ssyvol-hero .ssyvol-summary-wrap {
        height: auto;
        overflow-y: visible;
    }

    .ssyvol[b-ub7930dr1t]  .ssyvol-cardwrap,
    .ssyvol[b-ub7930dr1t]  .ssyvol-cardwrap .ssy-card,
    .ssyvol[b-ub7930dr1t]  .ssyvol-cardwrap .ssy-chart-card-slot {
        width: 100%;
        max-width: 100%;
    }

    .ssyvol[b-ub7930dr1t]  .ssyvol-summary-wrap {
        overflow-x: auto;
    }
}
/* /Components/Common/DashboardComponents_HA/SsyWeatherTab.razor.rz.scp.css */
.ssy-weather-tab[b-jcvmxz1phu] {
    display: grid;
    gap: 12px;
}

/* The detail pane stays in view while the matrix scrolls past it. */
.ssy-weather-tab[b-jcvmxz1phu]  .ssy-weather-detail {
    position: sticky;
    top: 8px;
    min-width: 0;
}

.ssy-weather-tab[b-jcvmxz1phu]  .ssy-weather-context {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 7px;
    border: 1px solid var(--ssy-dash-border, #E1E8ED);
    border-bottom: 0;
    background: var(--ssy-dash-surface, #FFFFFF);
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-tiny, 9px);
}

.ssy-weather-tab[b-jcvmxz1phu]  .ssy-weather-context strong {
    color: var(--ssy-colour-main-simpson-blue, #000061);
    text-transform: uppercase;
}

.ssy-weather-tab[b-jcvmxz1phu]  .ssy-weather-context span:last-child { margin-left: auto; }

/* Once the board wraps to one column (SsyGrid MinCol), a sticky pane would cover the matrix. */
@media (max-width: 1280px) {
    .ssy-weather-tab[b-jcvmxz1phu]  .ssy-weather-detail { position: static; }
}
/* /Components/Common/DropZone.razor.rz.scp.css */
.file-drop-zone[b-qf59m3pkt6] {
    position: relative;
    border: dashed 2px transparent;
    border-radius: 6px;
    transition: border linear 0.2s;
    min-height: 100px;
}

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

.file-drop-zone[b-qf59m3pkt6]::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-qf59m3pkt6]::after {
    opacity: 1;  /* Changed from 0.8 to 1 for better visibility */
}

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

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

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

.comp-gauge-input[b-0rwzj6lq3p]  .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-0rwzj6lq3p]  .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-0rwzj6lq3p]  .fcdesc {
    text-align: left;
    padding-left: 5px;
    width: 12em;
}

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

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

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

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

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

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

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

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

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

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

.saved-calc-load[b-385pznh297] {
    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-385pznh297] {
    text-decoration: underline;
}

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

.saved-calc-delete[b-385pznh297] {
    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-385pznh297] {
    color: #d9534f;
}
/* /Components/Common/Intraday/IntradayCurveTable.razor.rz.scp.css */
.intraday-curve-table-container[b-o5mppalyl0] {
    /* 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-o5mppalyl0] {
    background: conic-gradient(#0087CB 0deg, #0087CB 90deg, #F4F7F9 90deg, #F4F7F9 270deg, #0087CB 270deg);
    border: 1px solid #0087CB;
}

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

/* Copy Styling */
/* ============ */
.intraday-copy-as-image-logo[b-o5mppalyl0] {
    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-o5mppalyl0] {
    width: 20rem;
    padding-bottom: 10px;
    align-content: center;
    text-align: center;
}
/* Table styling */
/* ============= */
.intraday-curve-table-container[b-o5mppalyl0]  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-o5mppalyl0]  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-o5mppalyl0]  table.myssy-table-lw caption {
    background-color: #0087CB;
}

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

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

.intraday-curve-table-container[b-o5mppalyl0]  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-o5mppalyl0]  table.myssy-table-lw thead tr.intraday-th-price-row th {
    background-color: #F4F7F9;
    color: #000000;  
}

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

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

.intraday-curve-table-container[b-o5mppalyl0]  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-o5mppalyl0]  table.myssy-table-lw tbody tr td {
    background-color: #F4F7F9;
    border-bottom: 1px solid #0087CB;
    color: #000000;  
}


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

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

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

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

}

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

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

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

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

.intraday-curve-table-container[b-o5mppalyl0]  table.myssy-table-lw tbody tr.intraday-history-tooltip-row,
.intraday-curve-table-container[b-o5mppalyl0]  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-o5mppalyl0]{
    animation-name: copyFadeInOut-b-o5mppalyl0;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}


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

.intraday-curve-table-container .intraday-history-tooltip .intraday-history-tooltip-content[b-o5mppalyl0] {
    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-o5mppalyl0] {
    background-color: #0087CB;
    color: #000000;
    border: 1px solid #0087CB;
}

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

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

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

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

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

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Upgrade button styling */
/* ===================== */
.intraday-curve-table-container .myssy-upgrade-button[b-o5mppalyl0] {
    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-o5mppalyl0] {
    background: #0087CB;
    color: #FFFFFF;
}

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

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

.intraday-curve-table-container .myssy-upgrade-button:disabled[b-o5mppalyl0] {
    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-o5mppalyl0] {
    color: #22C55E;
}

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

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

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

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

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

.intraday-curve-table-container table.myssy-table-lw tbody tr td.intraday-up-pulse[b-o5mppalyl0] {
    animation-name: pulse-intraday-up-b-o5mppalyl0;
    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-o5mppalyl0] {
    animation-name: pulse-intraday-up-light-b-o5mppalyl0;    
}

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

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

.intraday-curve-table-container table.myssy-table-lw tbody tr td.intraday-down-pulse[b-o5mppalyl0] {
    animation-name: pulse-intraday-down-b-o5mppalyl0;
    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-o5mppalyl0] {
    animation-name: pulse-intraday-down-light-b-o5mppalyl0;    
}

@keyframes pulse-intraday-up-b-o5mppalyl0 {
    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-o5mppalyl0 {
    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-o5mppalyl0 {
    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-o5mppalyl0 {
    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-uj8e5u74ar] {
    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-uj8e5u74ar] {
    background: conic-gradient(#0087CB 0deg, #0087CB 90deg, #F4F7F9 90deg, #F4F7F9 270deg, #0087CB 270deg);
    border: 1px solid #0087CB;
}

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

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

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

.intraday-chart-header h3[b-uj8e5u74ar] {
    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-9neizi8m3y]{
    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-9neizi8m3y 0.3s ease-in-out;
}

.intraday-info-container:hover[b-9neizi8m3y] {
    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-9neizi8m3y] {
    font-size: 14px;
    color: light-dark(#000000, #FFFFFF);
    font-weight: 600;
    margin-bottom: 0.25em;
}

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

@keyframes CardIn-b-9neizi8m3y {
    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-btwq9to8ax] {
    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-btwq9to8ax] {
    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-btwq9to8ax] {
    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-btwq9to8ax] {
    font-family: inherit;
    font-size: 1.25em;
    color: #fff;
}

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


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

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

.intraday-news-feed-container .myssy-radio-main label[b-btwq9to8ax] {
    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-btwq9to8ax] {
    background: #0087CB;
    color: #FFFFFF;
}


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

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

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

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

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

.intraday-news-feed-container .intraday-news-feed-items-container[b-btwq9to8ax] {
    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-btwq9to8ax] {
    scrollbar-color: #000061 transparent;
    background: #F4F7F9;
}

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

.intraday-news-feed-container .intraday-news-feed-item[b-btwq9to8ax] {
    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-btwq9to8ax] {
    background: #F4F7F9;
    color: #1e293b;
}

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

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

.intraday-news-feed-container .intraday-news-feed-item > div[b-btwq9to8ax] {
    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-btwq9to8ax] {
    color: #475569;
}

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

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

.intraday-news-feed-container .intraday-news-feed-item p[b-btwq9to8ax] {
    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-btwq9to8ax] {
    display: block;
    padding-bottom: 0.5em;
}

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

.intraday-news-feed-container .intraday-news-feed-item[b-btwq9to8ax]  .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-btwq9to8ax]  .tagsshow-sub {
    border: 1px solid rgb(34, 211, 238);
}
/* /Components/Common/LandingPage/ClickThroughLinks.razor.rz.scp.css */
.click-through-links h2[b-ipk1559xra]{
    align-self: center;
}

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

.click-through-links .click-through-links ul[b-ipk1559xra] {
    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-ipk1559xra] {
    justify-content: start;
}
.click-through-links .click-through-links div:last-child ul li:not(:last-child)[b-ipk1559xra] {
    margin-right: 10px;
}
.click-through-links .click-through-links div:first-child ul li:not(:first-child)[b-ipk1559xra] {
    margin-left: 10px;
}

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

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


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

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

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

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

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

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

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

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

/* Update sidebar styles */
.sidebar-container[b-uccmaqgz1d] {
    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-uccmaqgz1d] {
    /* 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-uccmaqgz1d] {
    cursor: default;
}

.sidebar-item a[b-uccmaqgz1d] {
    color: #000061;
}
.active-item[b-uccmaqgz1d] {
    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-uccmaqgz1d] {
        display: none !important;
        height: 300px !important;
        margin-bottom: 1rem;
    }

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

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

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

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

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

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

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

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

.managementPanelToggle[b-uccmaqgz1d] {
    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-uccmaqgz1d] {
    background-color: white;
    color: #000061;
}

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

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

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

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

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

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

.carousel figure figcaption[b-uccmaqgz1d] {
    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-uccmaqgz1d]{
    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-uccmaqgz1d]{
    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-4wrlclrmmm] {
    display: grid;
    grid-template-columns: 1fr 450px;
    grid-template-rows: calc(100vh - 50px);
}
.dashboard-container.container-fluid[b-4wrlclrmmm]{
    --bs-gutter-x: 0;
}

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

/* deep goes through to child components*/
.mid-container[b-4wrlclrmmm]  h2,
.mid-container[b-4wrlclrmmm]  .h1Grey,
.mid-container[b-4wrlclrmmm]  .h2Grey,
.mid-container[b-4wrlclrmmm]  .markets-graphs-container .table-grid-item-chart a,
.mid-container[b-4wrlclrmmm]  .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-4wrlclrmmm]  .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-4wrlclrmmm]  .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-4wrlclrmmm] {
    padding: 0.75rem 0.5rem 0 0.5rem;
}


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

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

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

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

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

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

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

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

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

.report-card[b-dxnuwqq34h] {
    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-dxnuwqq34h] {
    display: block;
}

.report-card-left[b-dxnuwqq34h] {
    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-dxnuwqq34h] {
    overflow: hidden;
    height: var(--card-image-height);
}

.report-card-right[b-dxnuwqq34h] {
    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-dxnuwqq34h] {
    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-dxnuwqq34h] {
    height: initial;
    
}

.report-view-button-div[b-dxnuwqq34h] {
    height: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*margin: 5% 0 5% 0*/
}
.report-card-view-image[b-dxnuwqq34h] {
    display: none;
    height: var(--card-image-height);
    width: var(--card-image-width);
    z-index: 0;
}
.report-view-time-cont[b-dxnuwqq34h] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.report-view-button[b-dxnuwqq34h] {
    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-dxnuwqq34h] {
    background: white;
    color: #000061;
    border: 2px solid #000061;
}

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

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

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

    .report-card[b-dxnuwqq34h] {
        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-dxnuwqq34h] {
        display: none;
    }
    .report-view-button-div[b-dxnuwqq34h] {
        height: 100%;
        margin: unset;
        position: relative;
        overflow: hidden;
    }
    .report-card-view-image[b-dxnuwqq34h] {
        display: block;
        overflow: hidden;
    }
    .report-card-view-image img[b-dxnuwqq34h] {
        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-dxnuwqq34h] {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

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

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

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

    .lastUpdatedSmall[b-dxnuwqq34h] {

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

}

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

    .cards-container[b-dxnuwqq34h] {
        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-dxnuwqq34h] {
        max-height: unset;
        height: 3rem;
        width: 100%;
    }

    .report-card-view-image img[b-dxnuwqq34h] {
        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-dxnuwqq34h] {
        --grid-cols: 2;
        gap: calc(0.15 * var(--card-image-height)) calc(0.08 * var(--card-image-width));
    }

    .report-card-right[b-dxnuwqq34h] {
        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-kr3ja7kvl1]{
    align-self: center;
}

.main-rates-graph .graph-container[b-kr3ja7kvl1] {
    /* 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-kr3ja7kvl1] {
    height: 30px;
}
.main-rates-graph .graph-container h3[b-kr3ja7kvl1] {
    color: white;
    text-align: center;
}

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

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

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

.radio-label[b-97d4vlyf0y] {
    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-97d4vlyf0y] {
        width: 120px;
    }
}@media only screen and (max-width: 1400px) {
    .radio-label[b-97d4vlyf0y] {
        width: 110px;
    }
}
@media only screen and (max-width: 1200px) {
    .radio-label[b-97d4vlyf0y] {
        width: 130px;
    }
    .not-on-mobile[b-97d4vlyf0y] {
        display: none;
    }
}
@media only screen and (max-width: 990px) {
    .radio-label[b-97d4vlyf0y] {
        width: 130px;
    }
    .not-on-mobile[b-97d4vlyf0y] {
        display: none;
    }
}
@media only screen and (max-width: 780px) {
    .radio-label[b-97d4vlyf0y] {
        width: 130px;
    }
    .not-on-mobile[b-97d4vlyf0y] {
        display: none;
    }
}
/* /Components/Common/LandingPage/MarketsClosingSpotPrices.razor.rz.scp.css */
.positive[b-c13207g274] {
    color: mediumseagreen !important;
}

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

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

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


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


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

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

.loading-overlay[b-vvwkvrkeic] {
    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-vvwkvrkeic]::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-48mez7juod] {
    display: grid;
    grid-template-columns: repeat(4, 125px);
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

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

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

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

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

.grid-item-structure[b-48mez7juod] {
    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-48mez7juod]{
    color: inherit;
}

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

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

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

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

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

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

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

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

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

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

.ssy-modelTable.ssy-modelJoin thead[b-v9cnbk0f33] {
    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-v9cnbk0f33] {
    border-top: 1px solid transparent;
}

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

.ssy-modelTable.ssy-modelJoin td[b-v9cnbk0f33] {
    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-v9cnbk0f33] {
    padding: 0.25rem;
}

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

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

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

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

.ssy-modelTable thead[b-essjvk60w6] {
    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-essjvk60w6] {
    border-top: 1px solid transparent;
}

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

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

.ssy-modelTable td[b-essjvk60w6] {
    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-essjvk60w6] {
    padding: 0.25rem;
    width:auto;
}
.ssy-modelTable .pointer[b-essjvk60w6] {
    cursor: pointer;
}
/* /Components/Common/PriceInput/EodPrices_Input_Fwd.razor.rz.scp.css */
.enterPrices table[b-kc8e9dpbwt] {
    width: 100%;
}


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

.enterPrices table > tbody > tr[b-kc8e9dpbwt] {
    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-kc8e9dpbwt] {
    font-weight: bold;
    background-color: #000061;
    color: white;
    font-size: 120%;
    padding: 0 0 0 5px;
    align-content: center;
    height: 1.9em;
}

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

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

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

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

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

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

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

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

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

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

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

.calculatedprice[b-kc8e9dpbwt] {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    width: 100%;
    background-color: lightgray;
    padding-right: 5px;
}

.formulatooltip[b-kc8e9dpbwt] {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.formulatooltip .formulatooltiptext[b-kc8e9dpbwt] {
    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-kc8e9dpbwt] {
    visibility: visible;
}


.localtooltip[b-kc8e9dpbwt] {
    /*        position: relative;*/
    cursor: pointer;
}


.localtooltip .tooltiptext[b-kc8e9dpbwt] {
    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-kc8e9dpbwt]::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-kc8e9dpbwt] {
    visibility: visible;
    transition: .25s all ease;
    transition-delay: 1.5s;
    opacity: 1;
}

@media screen and (max-width: 600px) {

    .hideOnSmallScreens[b-kc8e9dpbwt] {
        display: none;
    }
}

/* The database rejected the save (EodAndDailyData.UploadPricesAsync returned an ERROR result) */
.epi-save-error[b-kc8e9dpbwt] {
    color: #c00000;
    font-weight: 600;
    margin: 4px 0;
}
/* /Components/Common/PriceInput/EodPrices_Input_GroupFwd.razor.rz.scp.css */
table.enterPrices > thead > tr[b-q8iq0icrs4], table.enterPrices tr.tableHeader[b-q8iq0icrs4] {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

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

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

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

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

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

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

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

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

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

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

[b-q8iq0icrs4] .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
}

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

.calculatedprice[b-q8iq0icrs4] {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    width: 100%;
    background-color: lightgray;
    padding-right: 5px;
}

.formulatooltip[b-q8iq0icrs4] {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.formulatooltip .formulatooltiptext[b-q8iq0icrs4] {
    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-q8iq0icrs4] {
    visibility: visible;
}

.hideOnSmallScreens[b-q8iq0icrs4] {
    display: table-cell;
}

@media screen and (max-width: 768px) {
    .hideOnSmallScreens[b-q8iq0icrs4] {
        display: none;
    }
}

/* The database rejected the save (EodAndDailyData.UploadPricesAsync returned an ERROR result) */
.epi-save-error[b-q8iq0icrs4] {
    color: #c00000;
    font-weight: 600;
    margin: 4px 0;
}
/* /Components/Common/PriceInput/EodPrices_Input_Spot.razor.rz.scp.css */
table.enterPrices[b-92puxt4ds5] {
    width: 100%;
}

table.enterPrices > thead > tr[b-92puxt4ds5] {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

table.enterPrices > tbody > tr[b-92puxt4ds5] {
    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-92puxt4ds5] {
    text-align: left;
    padding-left: 5px;
    width: 12em;
}

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

.negNum[b-92puxt4ds5] {
    color: red;
}

.posNum[b-92puxt4ds5] {
    color: darkgreen;
}

.percMove1[b-92puxt4ds5] {
    background-color: lemonChiffon;
}

.percMove2[b-92puxt4ds5] {
    background-color: gold;
}

.percMove3[b-92puxt4ds5] {
    background-color: orange;
}

.percMove4[b-92puxt4ds5] {
    background-color: red;
    color: white;
}

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

[b-92puxt4ds5] .staleprice {
    background-color: LightYellow;
}

.calculatedprice[b-92puxt4ds5] {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    width: 100%;
    background-color: lightgray;
    padding-right: 5px;
}

.formulatooltip[b-92puxt4ds5] {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.formulatooltip .formulatooltiptext[b-92puxt4ds5] {
    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-92puxt4ds5] {
    visibility: visible;
}

/* The database rejected the save (EodAndDailyData.UploadPricesAsync returned an ERROR result) */
.epi-save-error[b-92puxt4ds5] {
    color: #c00000;
    font-weight: 600;
    margin: 4px 0;
}
/* /Components/Common/PriceInput/IntradayPrice_Input_Fwd.razor.rz.scp.css */
.enterPrices table[b-5knssdzkfg] {
    width: 100%;
}

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

.enterPrices table > tbody > tr[b-5knssdzkfg] {
    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-5knssdzkfg] {
    font-weight: bold;
    background-color: #000061;
    color: white;
    font-size: 120%;
    padding: 0 0 0 5px;
    align-content: center;
    height: 1.9em;
}

.fcdesc[b-5knssdzkfg] {
    text-align: left;
    padding-left: 5px;
    width: 12em;
    cursor: pointer;
}

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

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

.negNum[b-5knssdzkfg] {
    color: red;
}

.posNum[b-5knssdzkfg] {
    color: darkgreen;
}

.percMove1[b-5knssdzkfg] {
    background-color: lemonChiffon;
}

.percMove2[b-5knssdzkfg] {
    background-color: gold;
}

.percMove3[b-5knssdzkfg] {
    background-color: orange;
}

.percMove4[b-5knssdzkfg] {
    background-color: red;
    color: white;
}

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

[b-5knssdzkfg] .staleprice {
    background-color: LightYellow;
}

.calculatedprice[b-5knssdzkfg] {
    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-5knssdzkfg] {
        display: none;
    }
}
/* /Components/Common/PriceInput/Uranium_ClientCurve_Input_Fwd.razor.rz.scp.css */
.enterPrices table[b-rfkywm4qsz] {
    width: 100%;
}

.tableHeader[b-rfkywm4qsz] {
    background-color: #009DC9;
    color: white;
    border-color: #009DC9;
}

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

.fcdesc[b-rfkywm4qsz] {
    text-align: left;
    padding-left: 5px;
    width: 9em;
}

.fcprice[b-rfkywm4qsz] {
    text-align: right;
    width: 14em;
}

.location-header[b-rfkywm4qsz] {
    text-align: center;
}

.bid-offer-cell[b-rfkywm4qsz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    white-space: nowrap;
}

.separator[b-rfkywm4qsz] {
    color: #666;
    font-size: 0.9em;
}

.copy-col[b-rfkywm4qsz] {
    width: 2rem;
    text-align: center;
    padding: 0 4px;
}

.copy-btn[b-rfkywm4qsz] {
    cursor: pointer;
    opacity: 0.4;
    display: inline-flex;
    align-items: center;
}

.copy-btn:hover[b-rfkywm4qsz] {
    opacity: 1;
}

.localtooltip[b-rfkywm4qsz] {
    position: relative;
    cursor: pointer;
}

.localtooltip .tooltiptext[b-rfkywm4qsz] {
    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-rfkywm4qsz] {
    visibility: visible;
    transition: .25s all ease;
    transition-delay: 1.5s;
    opacity: 1;
}

.enterPrices[b-rfkywm4qsz]  .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 4rem;
    max-width: 6rem;
}

.enterPrices[b-rfkywm4qsz]  .staleprice {
    background-color: LightYellow;
}

.prev-price[b-rfkywm4qsz] {
    font-size: 0.72em;
    color: #aaa;
    text-align: right;
    white-space: nowrap;
}

.volume-row[b-rfkywm4qsz] {
    background-color: #f5f5f5;
}

.price-row[b-rfkywm4qsz] {
    border-top: 1px solid #d0d8e0;
}

tr.row-alt[b-rfkywm4qsz] {
    background-color: #eef4f9;
}

tr.volume-row.row-alt[b-rfkywm4qsz] {
    background-color: #e5edf5;
}

.volume-row-collapsed td[b-rfkywm4qsz] {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

.vol-ref[b-rfkywm4qsz] {
    font-size: 0.72em;
    color: #7a9eb5;
    text-align: right;
    white-space: nowrap;
    font-style: italic;
}

.vol-label[b-rfkywm4qsz] {
    font-size: 0.75em;
    color: #666;
    font-style: italic;
}

[b-rfkywm4qsz] .vol-input {
    text-align: right;
    font-size: 13px;
    min-width: 4rem;
    max-width: 6rem;
    color: #444;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}

[b-rfkywm4qsz] .units-input {
    text-align: left;
    font-size: 13px;
    min-width: 2.5rem;
    max-width: 4rem;
    color: #444;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}

.ucc-swap-flag[b-rfkywm4qsz] {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    font-size: 0.75em;
    font-weight: bold;
    line-height: 1.4;
    border-radius: 3px;
    background-color: #c26a00;
    color: #ffffff;
    vertical-align: middle;
}

.ucc-swap-btn[b-rfkywm4qsz] {
    font-size: 13px;
    line-height: 1;
    padding: 1px 4px;
    color: #000061;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    cursor: pointer;
}

.ucc-swap-btn:hover[b-rfkywm4qsz] {
    background-color: #e0e8f0;
}

.ucc-swap-btn.ucc-swap-btn-on[b-rfkywm4qsz] {
    background-color: #c26a00;
    border-color: #c26a00;
    color: #ffffff;
}
/* /Components/Common/Report/ReportEodSpotPrices_Plus.razor.rz.scp.css */
@media only screen and (max-width: 700px) {

    .not-on-mobile[b-o64zf2lylv] {
        display: none;
    }
}
/* /Components/Common/SavedSettings/SavedSettingsList.razor.rz.scp.css */
/* ====================================================
   Slender saved-settings list
   ==================================================== */

.saved-settings-wrap[b-8p0sy6ak6y] {
    font-size: 0.85rem;
}

/* ---------- Toolbar (save row) ---------- */
.saved-settings-toolbar[b-8p0sy6ak6y] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.saved-settings-name[b-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    background-color: #009DC9;
}

.saved-settings-btn-save:disabled[b-8p0sy6ak6y] {
    background-color: #B5CBD6;
    cursor: not-allowed;
}

.saved-settings-btn-save.replace[b-8p0sy6ak6y] {
    background-color: #FF670F;
}

.saved-settings-btn-save.replace:hover:not(:disabled)[b-8p0sy6ak6y] {
    background-color: #DB303A;
}

/* ---------- Sort + filter row ---------- */
.saved-settings-controls[b-8p0sy6ak6y] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.saved-settings-sort-label[b-8p0sy6ak6y] {
    color: #405864;
    margin-right: 2px;
    font-size: 0.8rem;
}

.saved-settings-pill[b-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    background-color: #163E9F;
    color: white;
    border-color: #163E9F;
}

.saved-settings-filter[b-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    border-top: none;
}

.saved-settings-row[b-8p0sy6ak6y] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #E9EFF9;
    min-height: 22px;
}

.saved-settings-row:last-child[b-8p0sy6ak6y] {
    border-bottom: none;
}

.saved-settings-row:hover[b-8p0sy6ak6y] {
    background-color: #F5F7FA;
}

.saved-settings-load[b-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    text-decoration: underline;
}

.saved-settings-row-name[b-8p0sy6ak6y] {
    flex: 1 1 auto;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.saved-settings-row-date[b-8p0sy6ak6y] {
    flex: 0 0 auto;
    color: #808896;
    font-size: 0.72rem;
    font-weight: normal;
    white-space: nowrap;
}

.saved-settings-delete[b-8p0sy6ak6y] {
    background: none;
    border: none;
    color: #DB303A;
    padding: 0 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
}

.saved-settings-delete:hover[b-8p0sy6ak6y] {
    background-color: #DB303A;
    color: white;
}

.saved-settings-row-confirm[b-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    background-color: #DB303A;
    color: white;
    border: none;
    padding: 1px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
}

.saved-settings-confirm-no[b-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    color: #808896;
    font-size: 0.85rem;
    margin: 6px 0;
    font-style: italic;
}

/* ---------- Modal ---------- */
.saved-settings-modal-backdrop[b-8p0sy6ak6y] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

.saved-settings-modal[b-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    background: none;
    border: none;
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.saved-settings-modal-body[b-8p0sy6ak6y] {
    padding: 12px 16px;
    max-height: 70vh;
    overflow-y: auto;
}

.saved-settings-modal-help[b-8p0sy6ak6y] {
    margin: 0 0 10px 0;
    color: #405864;
    font-size: 0.85rem;
}

.saved-settings-modal-date-block[b-8p0sy6ak6y] {
    border: 1px solid #B5CBD6;
    border-radius: 4px;
    padding: 6px 10px 8px 10px;
    margin-bottom: 10px;
}

.saved-settings-modal-date-block legend[b-8p0sy6ak6y] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #163E9F;
    padding: 0 4px;
    width: auto;
}

.saved-settings-modal-radio-row[b-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    margin-right: 4px;
}

.saved-settings-modal-num[b-8p0sy6ak6y] {
    width: 4rem;
    padding: 2px 4px;
    border: 1px solid #B5CBD6;
    border-radius: 3px;
    text-align: right;
}

.saved-settings-modal-period[b-8p0sy6ak6y] {
    padding: 2px 4px;
    border: 1px solid #B5CBD6;
    border-radius: 3px;
}

.saved-settings-modal-footer[b-8p0sy6ak6y] {
    padding: 8px 14px;
    border-top: 1px solid #E9EFF9;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.saved-settings-btn-cancel[b-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    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-8p0sy6ak6y] {
    background-color: #009DC9;
}
/* /Components/Common/SsyAutoComplete.razor.rz.scp.css */
.ssy-autocomplete[b-4o7h5tlar1] {
    position: relative;
    width: 100%;
}

.ssy-autocomplete .ssy-autocomplete-input[b-4o7h5tlar1] {
    padding-right: 2.75rem;
}

.ssy-autocomplete > .ssy-autocomplete-clear-btn[b-4o7h5tlar1] {
    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-4o7h5tlar1] {
    color: #DB303A;
}

.ssy-autocomplete:hover .ssy-autocomplete-clear-btn[b-4o7h5tlar1] {
    display: inline-block;
}


.ssy-autocomplete > .ssy-autocomplete-dropdown[b-4o7h5tlar1] {
    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-4o7h5tlar1],
.ssy-autocomplete:focus > .ssy-autocomplete-dropdown[b-4o7h5tlar1] {
    display: block;
}

.ssy-autocomplete > .ssy-autocomplete-dropdown li:not(.ssy-autocomplete-non-clickable):hover[b-4o7h5tlar1] {
    cursor: pointer;
    color: #212529;
    background-color: #f8f9fa;
}
/* /Components/Common/SsyBlobStorageUpdate.razor.rz.scp.css */
.blobupload-customhover[b-qr0kt8akf3] {
    border: 1px solid #000097;
    border-radius: 4px;
}


.blobupload-container[b-qr0kt8akf3] {
    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-qr0kt8akf3] .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-qr0kt8akf3] .edit-form-input, [b-qr0kt8akf3] .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-qr0kt8akf3] .edit-form-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

[b-qr0kt8akf3] .upload-modal-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

[b-qr0kt8akf3] .upload-modal-header {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

[b-qr0kt8akf3] .upload-modal-body {
    padding: 10px;
}

[b-qr0kt8akf3] .upload-modal-select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

[b-qr0kt8akf3] .upload-modal-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

[b-qr0kt8akf3] .upload-modal-footer {
    text-align: center;
    margin-top: 20px;
}



[b-qr0kt8akf3] .validation-summary {
    color: red;
    list-style-type: none;
    padding: 0;
}

/* reset disabled styling cause ugly */
[b-qr0kt8akf3] .form-control:disabled, .form-control[readonly][b-qr0kt8akf3] {
    color: #212529;
    background-color: #e9ecef;
}

/* email modal */
[b-qr0kt8akf3] .role-select-btn:hover {
    font-weight: bold;
}
[b-qr0kt8akf3] .role-select-btn.add:hover {
    background-color: #8CD47E;
    font-weight: normal;
}
[b-qr0kt8akf3] .role-select-btn.remove:hover {
    background-color: #FF6961;
    font-weight: normal;
}
[b-qr0kt8akf3] .selected-role {
    font-weight: bold;
    text-decoration: underline;
}
/* /Components/Common/SSYFTS.razor.rz.scp.css */
/* DESKTOP SEARCH */
/* ================ */
.search-bar-container[b-p1qhtyns72]  .input-group{
    margin: 0;
}
/* search bar input */
.search-bar-container[b-p1qhtyns72]  .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-p1qhtyns72]  .input-group > .search-bar.form-control::placeholder {
    color: #999999;
}

.search-bar-container[b-p1qhtyns72]  .input-group > .search-bar.form-control:focus{
    color: black;
    background-color: white;
    
}
.search-bar-container[b-p1qhtyns72]  .input-group > .search-bar.form-control:focus-visible {
    outline: black auto 1px;
}
/* cancel button */
.search-bar-container[b-p1qhtyns72]  .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-p1qhtyns72]  .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-p1qhtyns72] {
    width: 100%;
    height: 48px;
}
/* search bar input */
.mobile-menu-search .search-bar-container[b-p1qhtyns72]  .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-p1qhtyns72]  .input-group > .search-bar.form-control::placeholder {
    color: #000061;
}

.mobile-menu-search .search-bar-container[b-p1qhtyns72]  .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-p1qhtyns72]  .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-p1qhtyns72]  .input-group > ul.dropdown-menu.autocomplete-list {
    width: 98%;
    transform: translate(0,3.7rem) !important;
    inset: inherit !important;
    scrollbar-width: auto;
}
/* /Components/Common/SsyQuickGrid.razor.rz.scp.css */
/* CSS for SsyQuickGrid component */
.ssyquickgrid-component .ssyquickgrid-scroll[b-w8jyn1df0f] {
	overflow-y: auto;
	margin-top: 0.5rem;
}

.ssyquickgrid-component .ssyquickgrid-picker-item[b-w8jyn1df0f] {
	display: block;
	padding: 2px 12px;
	white-space: nowrap;
}

.ssyquickgrid-component[b-w8jyn1df0f]  .quickgrid{
	width:100%;
}

.ssyquickgrid-component[b-w8jyn1df0f]  thead {
	position: sticky;
	top: 0;
	z-index: 1;
}

.ssyquickgrid-component[b-w8jyn1df0f]  .quickgrid td {
	border: 1px solid var(--ssy-colour-palette-light-bluegray);
}
.ssyquickgrid-component .ssyquickgrid-header[b-w8jyn1df0f] {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.ssyquickgrid-component .ssyquickgrid-sort-asc[b-w8jyn1df0f],
.ssyquickgrid-component .ssyquickgrid-sort-desc[b-w8jyn1df0f]{
	display: none;
}

.ssyquickgrid-component[b-w8jyn1df0f]  th.col-sort-asc .ssyquickgrid-sort-none{
	display: none;
}

.ssyquickgrid-component[b-w8jyn1df0f]  th.col-sort-asc .ssyquickgrid-sort-asc{
	display: inline;
}

.ssyquickgrid-component[b-w8jyn1df0f]  th.col-sort-desc .ssyquickgrid-sort-none{
	display: none;
}

.ssyquickgrid-component[b-w8jyn1df0f]  th.col-sort-desc .ssyquickgrid-sort-desc{
	display: inline;
}
.ssyquickgrid-component[b-w8jyn1df0f]  tbody tr:not([aria-rowindex]) {
	display: none;
}
/* /Components/Common/SsyRichText_Adv.razor.rz.scp.css */
.ssy-rich-text-adv-container[b-6prw5e4fm6] {
    height: 100%;
    width: 100%;
}

.ssy-rich-text-adv-container[b-6prw5e4fm6]  .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-6prw5e4fm6]  .ssy-rich-text-adv-character-count {
    padding: 4px 8px;
    font-size: 0.85em;
    color: #666;
    text-align: right;
}

.ssy-rich-text-adv-container[b-6prw5e4fm6]  .ssy-rich-text-adv-character-count.over-limit {
    color: #dc3545;
    font-weight: bold;
}

.ssy-rich-text-adv-container[b-6prw5e4fm6]  .elementToFadeOutAndIn {
    -webkit-animation: fade-in-out 2s linear forwards;
    animation: fade-in-out-b-6prw5e4fm6 2s linear forwards;
}

.ssy-rich-text-adv-container[b-6prw5e4fm6]  aia {
     background-color: #AAFF00;
 }

.ssy-rich-text-adv-container[b-6prw5e4fm6]  aix {
    background-color: #FFD025;
    text-decoration: line-through;
}

.ssy-rich-text-adv-container[b-6prw5e4fm6]  .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-6prw5e4fm6 {
    0%, 100% {
        opacity: 1;
    }

    10% {
        opacity: 0;
    }
}

@media only screen and (max-width: 1000px) {
    .ssy-rich-text-adv-container[b-6prw5e4fm6]  .ql-container {
        height: calc(100% - 64px); /* 100% - height of 'ql-toolbar' */
    }
}

@media only screen and (max-width: 600px) {
    .ssy-rich-text-adv-container[b-6prw5e4fm6]  .ql-container {
        height: calc(100% - 84px); /* 100% - height of 'ql-toolbar' */
    }
}

@media only screen and (max-width: 488px) {
    .ssy-rich-text-adv-container[b-6prw5e4fm6]  .ql-container {
        height: calc(100% - 120px); /* 100% - height of 'ql-toolbar' */
    }
}

.ssy-rich-text-adv-container[b-6prw5e4fm6]  .ssy-ai-compliance-form {
    margin: 0;
    padding: 0;
}

.ssy-rich-text-adv-container[b-6prw5e4fm6]  .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-6prw5e4fm6]  .ssy-ai-compliance-text {
    font-size: 1.1rem;
    margin-bottom: 12px;
    text-align: center;
}

.ssy-rich-text-adv-container[b-6prw5e4fm6]  .ssy-ai-compliance-fineprint {
    color: #888;
    font-size: 0.92rem;
    margin-bottom: 20px;
    text-align: center;
}

.ssy-rich-text-adv-container[b-6prw5e4fm6]  .ssy-ai-compliance-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    width: 100%;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.grid-main[b-wxm1y5th1a] {
    display: grid;
    grid-template-columns: auto;
}

    .grid-main.grid-main-landing[b-wxm1y5th1a] {
        grid-template-columns: 1fr 5fr;
    }

        .grid-main.grid-main-landing[b-wxm1y5th1a]  nav.sidebar-desktop {
            margin-top: 50px;
            position: static;
        }

    .grid-main .body-main[b-wxm1y5th1a] {
        margin-top: 51px;
        margin-left: 10px;
        padding: 0 1rem;
        overflow-y: auto;
        height: calc(100vh - 51px);
    }

    .grid-main.grid-main-landing .body-main[b-wxm1y5th1a] {
        margin-top: 50px;
        margin-left: 0;
        padding: 0;
        height: calc(100vh - 50px);
        border-left: 3px solid #000061;
    }

#blazor-error-ui[b-wxm1y5th1a] {
    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-wxm1y5th1a] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


@media (max-width: 950px) {
    .grid-main[b-wxm1y5th1a],
    .grid-main.grid-main-landing[b-wxm1y5th1a] {
        grid-template-columns: auto;
    }

        .grid-main .body-main[b-wxm1y5th1a] {
            margin-left: 2px;
            padding: 0;
        }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.ssy-navbar-container[b-wqqks31g8x]{
    /*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-wqqks31g8x] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}
.ssy-navbar-title .ssy-nav-Logo[b-wqqks31g8x] {
    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-wqqks31g8x] {
    animation: nav-ssyLogo-colorWave-b-wqqks31g8x 6s ease-in-out infinite alternate;
}

.ssy-navbar-title .navigator-text[b-wqqks31g8x]{
    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-wqqks31g8x] {
        animation: nav-ssyLogo-colorWave-b-wqqks31g8x 6s ease-in-out infinite alternate;
    }

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

.navigator-notice-text-full[b-wqqks31g8x] {
    display: block;
}

.demo-environment-text[b-wqqks31g8x] {
    background-color: red;
    border-radius: 5px;
    cursor: default;
    align-self: start;
    margin-top: 1.5%;
}

.ssy-navbar-title .navigator-environment[b-wqqks31g8x]{
    margin: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
}

.ssy-navbar-title .navigator-environment  > span[b-wqqks31g8x]{
    line-height: 1;
    font-weight: bold;
    color: #24DEBD;
}

.ssy-navbar-title .navigator-environment  > span:last-child[b-wqqks31g8x]{
    color: #00E2FD;
}


/* Always show by default */
.ssy-navbar-desktop[b-wqqks31g8x] {
    display: flex !important;
}

/* Hide below 1000px */
/* Hide desktop navbar below 950px */
@media (max-width: 950px) {
    .ssy-navbar-desktop[b-wqqks31g8x] {
        display: none !important;
    }
}

/* Hamburger button visibility */
@media (min-width: 951px) {
    .ssy-navbar-mobile[b-wqqks31g8x] {
        display: none !important;
    }
}

@media (max-width: 950px) {
    .ssy-navbar-mobile[b-wqqks31g8x] {
        display: inline-block !important;
    }
}

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

/* ssy-navbar */
.ssy-navbar[b-wqqks31g8x]{
    display: inline-flex;
    align-items: center;
}

/* mobile - animated hamburger / X */
.ssy-navbar .ssy-navbar-mobile[b-wqqks31g8x] {
    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-wqqks31g8x],
.ssy-navbar .ssy-navbar-mobile:focus-visible[b-wqqks31g8x] {
    background-color: rgba(255,255,255,0.08);
    outline: none;
}
.ssy-navbar .ssy-navbar-mobile.is-open[b-wqqks31g8x] {
    background-color: rgba(0,226,253,0.12);
}

.ssy-navbar .ssy-navbar-mobile .hamburger-bars[b-wqqks31g8x] {
    position: relative;
    width: 22px;
    height: 16px;
    display: inline-block;
}
.ssy-navbar .ssy-navbar-mobile .hamburger-bars > span[b-wqqks31g8x] {
    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-wqqks31g8x] { top: 0; }
.ssy-navbar .ssy-navbar-mobile .hamburger-bars > span:nth-child(2)[b-wqqks31g8x] { top: 7px; }
.ssy-navbar .ssy-navbar-mobile .hamburger-bars > span:nth-child(3)[b-wqqks31g8x] { top: 14px; }

/* Open state - morph to X */
.ssy-navbar .ssy-navbar-mobile.is-open .hamburger-bars > span[b-wqqks31g8x] {
    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-wqqks31g8x] {
    top: 7px;
    transform: rotate(45deg);
}
.ssy-navbar .ssy-navbar-mobile.is-open .hamburger-bars > span:nth-child(2)[b-wqqks31g8x] {
    opacity: 0;
}
.ssy-navbar .ssy-navbar-mobile.is-open .hamburger-bars > span:nth-child(3)[b-wqqks31g8x] {
    top: 7px;
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .ssy-navbar .ssy-navbar-mobile .hamburger-bars > span[b-wqqks31g8x] {
        transition: none;
    }
}

/* desktop */
.ssy-navbar .ssy-navbar-desktop[b-wqqks31g8x]{
    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-wqqks31g8x] {
        font-size: 9pt !important;
    }
}

@media (max-width: 1200px) {
    .ssy-navbar-desktop[b-wqqks31g8x] {
        font-size: 8.5pt !important;
    }
}

@media (max-width: 1050px) {
    .navigator-text-half[b-wqqks31g8x] {
        font-size: 8pt !important;
    }

    .navigator-environment[b-wqqks31g8x] {
        display: none !important;
    }
}


/* Nav Items */
/* Deep needed here as Nav-link is a different component */
.ssy-navbar .ssy-navbar-desktop[b-wqqks31g8x]  .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-wqqks31g8x]  .ssy-nav-link[data-ssy-disabled="true"] {
    pointer-events: none;
    color: #B5CBD6;
}

.ssy-navbar .ssy-navbar-desktop[b-wqqks31g8x]  .ssy-nav-link.ssy-nav-link-icon {
    width: 2.5rem;
}

.ssy-navbar .ssy-navbar-desktop[b-wqqks31g8x]  .ssy-nav-link.ssy-nav-link-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ssy-navbar .ssy-navbar-desktop[b-wqqks31g8x]  .ssy-nav-link:not(.ssy-nav-link-fts).ssy-nav-link-active,
.ssy-navbar .ssy-navbar-desktop[b-wqqks31g8x]  .ssy-nav-link:not(.ssy-nav-link-fts):focus,
.ssy-navbar .ssy-navbar-desktop[b-wqqks31g8x]  .ssy-nav-link:not(.ssy-nav-link-fts):active,
.ssy-navbar .ssy-navbar-desktop[b-wqqks31g8x]  .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-wqqks31g8x]  .search-container {
        display: none;
    }
    .ssy-navbar .ssy-navbar-desktop .nav-divider[b-wqqks31g8x] {
        display: none;
    }
}


/* ANIMATIONS */
@keyframes nav-ssyLogo-colorWave-b-wqqks31g8x {
    /* 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-wqqks31g8x {
    /* 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-wqqks31g8x {
    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-wqqks31g8x {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
        color: red;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.navigator-text.pulse[b-wqqks31g8x]
{
    animation: pulse-b-wqqks31g8x 3s infinite;
}
.navigator-notice-text-full[b-wqqks31g8x]{
    animation: pulse-small-text-b-wqqks31g8x 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-wqqks31g8x] {
    position: relative;
}

.ssy-notification-item .ssy-notification-delete[b-wqqks31g8x] {
    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-wqqks31g8x],
.ssy-notification-item .ssy-notification-delete:focus-visible[b-wqqks31g8x] {
    opacity: 1;
}

/* Keep the subject clear of the x. */
.ssy-notification-item .alert-heading[b-wqqks31g8x] {
    padding-right: 2rem;
}
/* /Components/Layout/NavSidebarDesktop.razor.rz.scp.css */
/* CONTAINER */
nav.sidebar-desktop[b-z0r6isapq0] {
    position: fixed;
    top: 50px;
    height: calc(100vh - 50px);
    max-width: 350px;
    display: none;
    flex-direction: row;
    z-index: 950;
}

nav.sidebar-desktop-landing[b-z0r6isapq0]{
    height: calc(100vh - 50px);
    max-width: 350px;
    display: flex;
    flex-direction: row;
    margin-top: 50px;
}

@media (max-width: 950px) {
    nav.sidebar-desktop[b-z0r6isapq0],
    nav.sidebar-desktop-landing[b-z0r6isapq0] {
        display: none !important;
    }
}

.sidebar-menu[b-z0r6isapq0] {
    background-color: #fdfdfd;
    height: calc(100vh - 50px);
}

.collapsed-menu[b-z0r6isapq0] {
    width: 0;
    visibility: hidden;
    transition: visibility 50ms linear 75ms, width 250ms linear 50ms ; /* Add transition for smooth movement */
}

.expanded-menu[b-z0r6isapq0] {
    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-z0r6isapq0] {
    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-z0r6isapq0]::-webkit-scrollbar-track {
        background: transparent; /* The transparent background for the scrollbar track */
    }

    .expanded-menu[b-z0r6isapq0]::-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-z0r6isapq0] {
    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-z0r6isapq0] {
    width: 100%;
    color: #000061;
    text-decoration: none;
}

/* list styling */
.sidebar-menu ul[b-z0r6isapq0] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu[b-z0r6isapq0]  ul {
    list-style: none;
    margin-bottom: 0.5rem;
}

.sidebar-menu[b-z0r6isapq0]  ul > li.nav-item-header-container,
.sidebar-menu[b-z0r6isapq0]  ul.sidebar-desktop-child {
    padding-left: 0;
}

.sidebar-menu[b-z0r6isapq0]  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-z0r6isapq0]  li.sidebar-desktop-child-icon-collapse-container > ul {
    padding-left: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 2rem auto;
}

.sidebar-menu[b-z0r6isapq0]  li.sidebar-desktop-child-icon-collapse-container li.sidebar-desktop-child-icon-collapse.collapse-main {
    order: 0;
}
.sidebar-menu[b-z0r6isapq0]  li.sidebar-desktop-child-icon-collapse-container li.sidebar-desktop-child-icon-collapse.collapse-main {
    order: 1;
}

/* headers */
.sidebar-menu[b-z0r6isapq0]  .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-z0r6isapq0]  > .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-z0r6isapq0]  .nav-item-header-closed::after,
.sidebar-menu[b-z0r6isapq0]  .nav-item-header-open::after{
    position: absolute;
    right: 0;
    color: #163E9F50;
    margin-right: 1rem;
}

.sidebar-menu[b-z0r6isapq0]  .nav-item-header-closed::after{
    content: "▽";

}

.sidebar-menu[b-z0r6isapq0]  .nav-item-header-open::after {
    content: "△";
}

/* only display list section if there is children */
.sidebar-menu[b-z0r6isapq0]  li.nav-item-header-container:has(button:not(.nav-item-header-closed)){
    display: none;
}

.sidebar-menu[b-z0r6isapq0]  li.nav-item-header-container:has(li:not(.nav-item-header-container)){
    display: block;
}

/* child links */
.sidebar-menu[b-z0r6isapq0]  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-z0r6isapq0]  li.sidebar-desktop-child-icon-collapse.collapse-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidebar-menu[b-z0r6isapq0]  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-z0r6isapq0]  a.ssy-nav-link svg {
    display: none;
}

.sidebar-menu[b-z0r6isapq0]  a.ssy-nav-link:hover,
.sidebar-menu[b-z0r6isapq0]  a.ssy-nav-link:focus{
    color: #000061;
    background-color: #f0eeeb;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #f0eeeb;
}

.sidebar-menu[b-z0r6isapq0]  li.sidebar-desktop-child-icon-collapse-container:hover a.ssy-nav-link svg,
.sidebar-menu[b-z0r6isapq0]  li:not(.sidebar-desktop-child-icon-collapse-container) a.ssy-nav-link:hover svg,
.sidebar-menu[b-z0r6isapq0]  li.sidebar-desktop-child-icon-collapse-container:focus a.ssy-nav-link svg,
.sidebar-menu[b-z0r6isapq0]  li:not(.sidebar-desktop-child-icon-collapse-container) a.ssy-nav-link:focus svg {
    display: block;
}

.sidebar-menu[b-z0r6isapq0]  .ssy-nav-link:active,
.sidebar-menu[b-z0r6isapq0]  .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-z0r6isapq0]  .ssy-nav-link:active svg,
.sidebar-menu[b-z0r6isapq0]  .ssy-nav-link-active svg {
    display: block;
    padding-right: 2px;
}

.sidebar-menu[b-z0r6isapq0]  .ssy-nav-link[data-ssy-disabled="true"] {
    pointer-events: none;
    color: #B5CBD6;
}

/* Collapse Button Styling */
.nav-collapse-bar[b-z0r6isapq0] {
    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-z0r6isapq0] {
    background-color: transparent;
    color: white;
    border-left: 3px solid #000061;
    border-right: 0;
    width:3px;
}

.nav-collapse-bar-expanded .semi-circle[b-z0r6isapq0] {
    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-z0r6isapq0],
.nav-collapse-bar-expanded .semi-circle:focus[b-z0r6isapq0]{
    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-dvl49u9jn5] { 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-dvl49u9jn5] {
        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-dvl49u9jn5] {
        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-dvl49u9jn5] {
        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-dvl49u9jn5] {
        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-dvl49u9jn5] {
        transform: translateX(0);
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-menu-backdrop[b-dvl49u9jn5],
        .mobile-menu-drawer[b-dvl49u9jn5] {
            transition: none;
        }
    }

    /* ---------- Header: notification button + search ---------- */
    .mobile-menu-drawer .mobile-menu-header[b-dvl49u9jn5] {
        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-dvl49u9jn5] {
        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-dvl49u9jn5],
    .mobile-menu-drawer .mobile-menu-icon-btn:focus-visible[b-dvl49u9jn5] {
        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-dvl49u9jn5]  .mobile-menu-search {
        flex: 1;
        min-width: 0;
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  .mobile-menu-search .form-control,
    .mobile-menu-drawer[b-dvl49u9jn5]  .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-dvl49u9jn5]  .mobile-menu-search input::placeholder,
    .mobile-menu-drawer[b-dvl49u9jn5]  .mobile-menu-search .form-control::placeholder {
        color: rgba(255, 255, 255, 0.55);
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  .mobile-menu-search .form-control:focus,
    .mobile-menu-drawer[b-dvl49u9jn5]  .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-dvl49u9jn5] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.25rem 0 1rem;
    }
    .mobile-menu-drawer .mobile-menu-body[b-dvl49u9jn5]::-webkit-scrollbar { width: 4px; }
    .mobile-menu-drawer .mobile-menu-body[b-dvl49u9jn5]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.18);
        border-radius: 4px;
    }

    /* ---------- Accordion: override Bootstrap defaults ---------- */
    .mobile-menu-drawer[b-dvl49u9jn5]  ul.accordion,
    .mobile-menu-drawer[b-dvl49u9jn5]  ul.accordion-collapse {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  .accordion-item {
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  .accordion-item:last-child { border-bottom: 0; }

    .mobile-menu-drawer[b-dvl49u9jn5]  .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-dvl49u9jn5]  .accordion-button:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  .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-dvl49u9jn5]  .mobile-menu-accordion > .accordion-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  .mobile-menu-accordion > .accordion-item:last-child {
        border-bottom: 0;
    }

    /* Bolder, slightly larger, uppercase top-level button text */
    .mobile-menu-drawer[b-dvl49u9jn5]  .mobile-menu-accordion > .accordion-item > .accordion-header > .accordion-button,
    .mobile-menu-drawer[b-dvl49u9jn5]  .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-dvl49u9jn5]  .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-dvl49u9jn5]  .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-dvl49u9jn5]  .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-dvl49u9jn5]  .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-dvl49u9jn5]  .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-dvl49u9jn5]  .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-dvl49u9jn5]  .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-dvl49u9jn5]  .accordion-item-child.accordion-item-level1 a:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  .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-dvl49u9jn5]  .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-dvl49u9jn5]  .accordion-body {
        padding: 0.125rem 0.5rem 0.5rem 1rem;
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  .accordion-collapse .accordion-item {
        border-bottom: 0;
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  .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-dvl49u9jn5]  a.nav-link,
    .mobile-menu-drawer[b-dvl49u9jn5]  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-dvl49u9jn5]  a.nav-link:hover,
    .mobile-menu-drawer[b-dvl49u9jn5]  a.ssy-nav-link:hover {
        background-color: rgba(255, 255, 255, 0.06);
        color: #fff;
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  a.ssy-nav-link.ssy-nav-link-active {
        background-color: rgba(0, 226, 253, 0.12);
        color: #00E2FD;
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  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-dvl49u9jn5]  .accordion-item:not(.accordion-item-child) {
        display: none;
    }
    .mobile-menu-drawer[b-dvl49u9jn5]  .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-0hli4yeu2c] {
    /*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-0hli4yeu2c] {
    padding-top: 50px;
}

/* pl-navbar-title */
.pl-navbar-title[b-0hli4yeu2c] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.pl-navbar-title .pl-nav-Logo[b-0hli4yeu2c] {
    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-0hli4yeu2c] {
    animation: pl-ssyLogo-colorWave-b-0hli4yeu2c 6s ease-in-out infinite alternate;
}

.pl-navbar-title .pl-navigator-text[b-0hli4yeu2c] {
    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-0hli4yeu2c] {
        animation: pl-ssyLogo-colorWave-b-0hli4yeu2c 6s ease-in-out infinite alternate;
    }

.pl-navbar-title .pl-navigator-text .pl-navigator-text-half[b-0hli4yeu2c] {
    display: none;
}

.pl-navbar-title .pl-navigator-text .pl-navigator-text-full[b-0hli4yeu2c] {
    display: block;
}

.pl-navbar-title .pl-navigator-environment[b-0hli4yeu2c] {
    margin: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
}

.pl-navbar-title .pl-navigator-environment > span[b-0hli4yeu2c] {
    line-height: 1;
    font-weight: bold;
    color: #24DEBD;
}

.pl-navbar-title .pl-navigator-environment > span:last-child[b-0hli4yeu2c] {
    color: #00E2FD;
}

/* Page-supplied actions: pushed to the right, ahead of the links when those are shown. */
.pl-navbar-actions[b-0hli4yeu2c] {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 10px;
}

.pl-navbar-actions:not(:empty) + .ssy-navbar-links[b-0hli4yeu2c] {
    margin-left: 15px;
}

/* pl-navbar (right-hand links) */
.ssy-navbar-links[b-0hli4yeu2c] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

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

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

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

.ssy-navbar-links .ssy-btn-theme[b-0hli4yeu2c],
.ssy-navbar-links .ssy-btn-ssyglobal[b-0hli4yeu2c] {
    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-0hli4yeu2c] {
    background: #000061;
    color: white;
    border: 1px solid white;
}

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

.ssy-navbar-links ul li a:not(.ssy-btn-ssyglobal):hover img[b-0hli4yeu2c] {
    filter: drop-shadow(0 0 12px rgb(255, 255, 255, 0.8));
}

.ssy-navbar-links ul li a.theme:hover[b-0hli4yeu2c],
.ssy-navbar-links ul li a.ssy-btn-ssyglobal:hover[b-0hli4yeu2c] {
    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-0hli4yeu2c] {
        font-size: 1.3rem;
        margin-left: -10px;
        margin-top: 5px;
        display: block;
    }
    .pl-navbar-title .pl-navigator-text .pl-navigator-text-half[b-0hli4yeu2c] {
        display: block;
    }
    .pl-navbar-title .pl-navigator-text .pl-navigator-text-full[b-0hli4yeu2c] {
        display: none;
    }
}

@media (max-width: 1050px) {
    .pl-navigator-text-half[b-0hli4yeu2c] {
        font-size: 8pt !important;
    }

    .pl-navigator-environment[b-0hli4yeu2c] {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .ssy-navbar-links ul[b-0hli4yeu2c] {
        gap: 10px;
    }
}

/* ANIMATIONS */
@keyframes pl-ssyLogo-colorWave-b-0hli4yeu2c {
    /* 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-9l5yx7qjzt],
.components-reconnect-repeated-attempt-visible[b-9l5yx7qjzt],
.components-reconnect-failed-visible[b-9l5yx7qjzt],
.components-pause-visible[b-9l5yx7qjzt],
.components-resume-failed-visible[b-9l5yx7qjzt],
.components-rejoining-animation[b-9l5yx7qjzt] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-9l5yx7qjzt],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-9l5yx7qjzt],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-9l5yx7qjzt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-9l5yx7qjzt],
#components-reconnect-modal.components-reconnect-retrying[b-9l5yx7qjzt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9l5yx7qjzt],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-9l5yx7qjzt],
#components-reconnect-modal.components-reconnect-failed[b-9l5yx7qjzt],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-9l5yx7qjzt] {
    display: block;
}


#components-reconnect-modal[b-9l5yx7qjzt] {
    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-9l5yx7qjzt 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-9l5yx7qjzt 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-9l5yx7qjzt 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-9l5yx7qjzt]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-9l5yx7qjzt 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-9l5yx7qjzt {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-9l5yx7qjzt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-9l5yx7qjzt {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-9l5yx7qjzt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-9l5yx7qjzt] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-9l5yx7qjzt] {
    color: #FFFFFF;
    background-color: #000061;
    border: 1px solid #000061;
    padding: 4px 24px;
    border-radius: 4px;
}

#components-reconnect-modal button:hover[b-9l5yx7qjzt], 
#components-reconnect-modal button:active[b-9l5yx7qjzt] {
    color: #000061;
    background-color: #FFFFFF;
    border: 1px solid #000061;
}

.components-rejoining-animation[b-9l5yx7qjzt] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-9l5yx7qjzt] {
        position: absolute;
        border: 3px solid #00E2FD;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-9l5yx7qjzt 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-9l5yx7qjzt] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-9l5yx7qjzt {
    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-n7jasifzkq] {
    font-size: 1.3em;
}

.api-container[b-n7jasifzkq] {
    margin-left: 1rem;
    margin-right: 1rem;
}

.api-container[b-n7jasifzkq]  .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-n7jasifzkq]  .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-n7jasifzkq]  .code-block__title {
    color: #000000;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.api-container[b-n7jasifzkq]  .code-block__copy {
    border-radius: 6px;
    flex-shrink: 0;
}

.api-container[b-n7jasifzkq]  .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-n7jasifzkq]  .code-block__surface code {
    display: block;
    white-space: pre;
}

.api-container[b-n7jasifzkq]  .token-keyword {
    color: #0000ff;
}

.api-container[b-n7jasifzkq]  .token-string {
    color: #A31515;
}

.api-container[b-n7jasifzkq]  .token-comment {
    color: #008000;
}

.api-container[b-n7jasifzkq]  .token-punctuation {
    color: #95a8bd;
}

.api-container[b-n7jasifzkq]  .token-function {
    color: #CF8B05;
}

@media (max-width: 640px) {
    .api-container[b-n7jasifzkq]  .code-block__header {
        align-items: stretch;
        flex-direction: column;
    }

    .api-container[b-n7jasifzkq]  .code-block__copy {
        width: 100%;
    }
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-n7jasifzkq] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/ApiDocsLandingPage.razor.rz.scp.css */
.code[b-posng9zrx7] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-posng9zrx7] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-posng9zrx7] {
    color: #405864;
}

.property[b-posng9zrx7] {
    color: #01A39E;
}

.value[b-posng9zrx7] {
    color: #163E9F;
}
.api-container[b-posng9zrx7] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-posng9zrx7] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Bulkers/DryBulkRates.razor.rz.scp.css */
.code[b-d9peddtp58] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-d9peddtp58] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-d9peddtp58] {
    color: #405864;
}

.property[b-d9peddtp58] {
    color: #01A39E;
}

.value[b-d9peddtp58] {
    color: #163E9F;
}

.api-container[b-d9peddtp58] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-d9peddtp58] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Futures/FuturesCommentary.razor.rz.scp.css */
.code[b-z31wvzvobd] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-z31wvzvobd] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-z31wvzvobd] {
    color: #405864;
}

.property[b-z31wvzvobd] {
    color: #01A39E;
}

.value[b-z31wvzvobd] {
    color: #163E9F;
}

.api-container[b-z31wvzvobd] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-z31wvzvobd] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Futures/FuturesFfaIntraday.razor.rz.scp.css */
.code[b-jvx9d7lraj] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-jvx9d7lraj] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-jvx9d7lraj] {
    color: #405864;
}

.property[b-jvx9d7lraj] {
    color: #01A39E;
}

.value[b-jvx9d7lraj] {
    color: #163E9F;
}

.api-container[b-jvx9d7lraj] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-jvx9d7lraj] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Futures/FuturesPricesFwdEod.razor.rz.scp.css */
.code[b-zfm7x1n7ds] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-zfm7x1n7ds] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-zfm7x1n7ds] {
    color: #405864;
}

.property[b-zfm7x1n7ds] {
    color: #01A39E;
}

.value[b-zfm7x1n7ds] {
    color: #163E9F;
}

.api-container[b-zfm7x1n7ds] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-zfm7x1n7ds] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Futures/FuturesTradeSummary.razor.rz.scp.css */
.code[b-ni4tp3ymqy] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-ni4tp3ymqy] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-ni4tp3ymqy] {
    color: #405864;
}

.property[b-ni4tp3ymqy] {
    color: #01A39E;
}

.value[b-ni4tp3ymqy] {
    color: #163E9F;
}

.api-container[b-ni4tp3ymqy] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-ni4tp3ymqy] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Gas/GasRates.razor.rz.scp.css */
.code[b-nv3hijogou] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-nv3hijogou] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-nv3hijogou] {
    color: #405864;
}

.property[b-nv3hijogou] {
    color: #01A39E;
}

.value[b-nv3hijogou] {
    color: #163E9F;
}

.api-container[b-nv3hijogou] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-nv3hijogou] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/SNP/SNPRates.razor.rz.scp.css */
.code[b-ao5yf220bl] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-ao5yf220bl] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-ao5yf220bl] {
    color: #405864;
}

.property[b-ao5yf220bl] {
    color: #01A39E;
}

.value[b-ao5yf220bl] {
    color: #163E9F;
}

.api-container[b-ao5yf220bl] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-ao5yf220bl] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/ApiDocs/Tankers/TankerRates.razor.rz.scp.css */
.code[b-r835e9k16i] {
    background-color: #E9EFF9;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1rem;
    height: calc(100% - 4rem);
}

code[b-r835e9k16i] {
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    color: #FFFFFF;
}

.punctuation[b-r835e9k16i] {
    color: #405864;
}

.property[b-r835e9k16i] {
    color: #01A39E;
}

.value[b-r835e9k16i] {
    color: #163E9F;
}

.api-container[b-r835e9k16i] {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*Visible at lg*/
@media (min-width: 950px) {
    .api-container[b-r835e9k16i] {
        width: 75%;
        max-width: 1100px;
    }
}
/* /Components/Pages/Bulkers/ApiSetup/DryBulkRatesSetup.razor.rz.scp.css */
.drybulkextractbox[b-a1u13cg3km] {
    border: 1px solid #009DC9;
    height: 85vh;
    overflow-y: scroll;
}

.drybulkextractdatepicker[b-a1u13cg3km] {
}

.drybulkextractroutepicker[b-a1u13cg3km] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 10px;
}

.drybulkextractroutepicker-ul[b-a1u13cg3km] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.drybulkextractroutepicker-ul .chkbox[b-a1u13cg3km] {
    margin: 0 3px 0 0;
    vertical-align: middle;
}


.drybulkextractroutepicker-ul li[b-a1u13cg3km] {
    text-decoration: none;
}

.drybulkextractroutepicker-ul li:hover[b-a1u13cg3km] {
    background-color: #B5CBD6;
}


.deleterow[b-a1u13cg3km], .editapiclient[b-a1u13cg3km] {
    cursor: pointer;
    padding-right: 3px;
}

.deleterow:hover[b-a1u13cg3km] {
    font-weight: 700;
    color: white;
}

.draggablerow[b-a1u13cg3km] {
    cursor: pointer;
}

.editapiclient[b-a1u13cg3km] {
    color: #163E9F;
}


.editapiclient:hover[b-a1u13cg3km] {
    font-weight: 700;
    color: #91A527;
}
/* /Components/Pages/Bulkers/CapeList/Capelist_40_SearchSelect.razor.rz.scp.css */
.capelist-search-select[b-jk6b5na1yf] {
    position: relative;
}

.capelist-search-select-list[b-jk6b5na1yf] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 0.25rem 0;
    list-style: none;
    background: white;
    border: 1px solid #ccc;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.capelist-search-select-list li[b-jk6b5na1yf] {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

.capelist-search-select-list li small[b-jk6b5na1yf] {
    color: #6b6b6b;
    font-size: 0.8rem;
}

.capelist-search-select-list li.capelist-search-select-active[b-jk6b5na1yf] {
    background: #e7f1ff;
}

.capelist-search-select-list li.capelist-search-select-chosen[b-jk6b5na1yf] {
    font-weight: 600;
}

/* A rule between "All brokers" / "Unassigned" and the names. */
.capelist-search-select-list li.capelist-search-select-pinned + li:not(.capelist-search-select-pinned)[b-jk6b5na1yf] {
    border-top: 1px solid #e5e5e5;
}

.capelist-search-select-list li.capelist-search-select-empty[b-jk6b5na1yf] {
    color: #6b6b6b;
    cursor: default;
}

/* A bigger tap target on a phone. */
@media (max-width: 768px) {
    .capelist-search-select-list li[b-jk6b5na1yf] {
        padding: 0.5rem 0.75rem;
    }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_010_main.razor.rz.scp.css */
/* ============================================================
   Dry Bulk Dashboard - shell wrapper. The palette, card padding and page
   geometry come from the shared ssy-dash-theme class (SsyDashTheme.razor);
   the --drybulkdash-* names the tabs use are aliases of its tokens.
   ============================================================ */

.drybulkdash-dash-wrap[b-9syww0bmck] {
    --drybulkdash-blue: var(--ssy-dash-brand);
    --drybulkdash-accent: var(--ssy-dash-accent);
    --drybulkdash-up: var(--ssy-dash-up);
    --drybulkdash-down: var(--ssy-dash-down);
    --drybulkdash-warn: var(--ssy-dash-warn);
    --drybulkdash-page-bg: var(--ssy-dash-page-bg);
    --drybulkdash-text: var(--ssy-dash-text);
    --drybulkdash-text-dim: var(--ssy-dash-text-dim);
    --drybulkdash-text-muted: var(--ssy-dash-text-muted);
    --drybulkdash-divider: var(--ssy-dash-divider);
    --drybulkdash-card-border: var(--ssy-dash-border);
    --drybulkdash-card-border-soft: var(--ssy-dash-border-soft);
    --drybulkdash-row-line: var(--ssy-dash-row-line);
    --drybulkdash-row-active-bg: var(--ssy-dash-row-active-bg);
    --drybulkdash-surface: var(--ssy-dash-surface);
    --drybulkdash-tint-1: var(--ssy-dash-tint-1);
    --drybulkdash-tint-2: var(--ssy-dash-tint-2);
    --drybulkdash-tint-3: var(--ssy-dash-tint-3);
    --drybulkdash-tint-4: var(--ssy-dash-tint-4);
    --drybulkdash-tint-5: var(--ssy-dash-tint-5);
    --drybulkdash-tint-6: var(--ssy-dash-tint-6);
    --drybulkdash-tint-accent: var(--ssy-dash-tint-accent);
}

[b-9syww0bmck] .drybulkdash-shell .ssy-dashboard-shell__selector {
    max-width: min(410px, 32vw);
}

.drybulkdash-shell-selector[b-9syww0bmck],
.drybulkdash-shell-band[b-9syww0bmck] {
    background: transparent;
}

/* The band wrapper exists only to carry the --drybulkdash-* / --ssy-dash-* vars
   into the shell header; it must add neither width nor height of its own. The
   padding reset is load-bearing: the theme gives the wrapper a 4px bottom
   padding for page content, which here pushed the header past its 38px budget.
   Compound selector so it wins over the theme rule. */
.drybulkdash-dash-wrap.drybulkdash-shell-band[b-9syww0bmck] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    min-width: 0;
    width: 100%;
}

@media (max-width: 767px) { /* layout-lint: allow inside card: dashboard shell tab selector at phone width */
    [b-9syww0bmck] .drybulkdash-shell .ssy-dashboard-shell__selector {
        max-width: 100%;
        width: 100%;
    }
}

/* Card padding is driven entirely by the --ssy-card-pad-* vars on the theme
   (consumed by the shared .ssy-card rule) - no per-card override needed. */
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_100_Overview.razor.rz.scp.css */
/* Overview tab. Card / table / grid chrome comes from SsyCard, SsyTable
   and SsyGrid; only the rate table, forward strip, and news rail live here. */

.drybulk-overview[b-qk4cge5vtx] {
    /* 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-qk4cge5vtx]  .drybulk-ov-tape-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* row template comes from ssy-fit-grid on the element */
.drybulk-ov-main[b-qk4cge5vtx] {
    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-qk4cge5vtx]  .drybulk-ov-tape-card,
.drybulk-overview[b-qk4cge5vtx]  .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 layout ---- */
.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-tape-wrap {
    overflow-x: auto;
}


/* ---- 7TC forward ladder strip (benchmark curve, full width) ---- */
.drybulk-overview[b-qk4cge5vtx]  .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-qk4cge5vtx]  .drybulk-ov-ladder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); /* layout-lint: allow inside card: overview ladder cells */
    gap: 3px;
    min-width: 0;
}

.drybulk-overview[b-qk4cge5vtx]  .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-qk4cge5vtx]  .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-qk4cge5vtx]  .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-qk4cge5vtx]  .drybulk-ov-ladder-delta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 2px;
}

.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-ladder-dpair {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
    line-height: 1.15;
}

.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-ladder-delta .ssy-delta-inline {
    width: auto;
}

.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-ladder-delta .ssy-delta-inline span {
    font-size: var(--ssy-fs-micro);
    font-weight: 850;
}

.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-ladder-dtag,
.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-ladder-dna {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-micro);
    font-weight: 900;
}

.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-ladder-rung.is-spot {
    background: var(--drybulkdash-row-active-bg);
    border-color: var(--drybulkdash-blue);
}

.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-ladder-rung.is-premium {
    background: color-mix(in srgb, var(--drybulkdash-up) 13%, var(--ssy-dash-surface, #FFFFFF));
}

.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-ladder-rung.is-discount {
    background: color-mix(in srgb, var(--drybulkdash-down) 10%, var(--ssy-dash-surface, #FFFFFF));
}

/* ---- Tab workbench cards ---- */
.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-intel-card {
    display: grid;
    grid-template-rows: auto auto; /* layout-lint: allow inside card: intel card internal rows */
    gap: 3px;
    min-width: 0;
}

.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-intel-signal {
    display: grid;
    gap: 3px;
}

.drybulk-overview[b-qk4cge5vtx]  .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-qk4cge5vtx]  .drybulk-ov-intel-nosig {
    opacity: 0.5;
}

.drybulk-overview[b-qk4cge5vtx]  .drybulk-ov-intel-nosig .drybulk-ov-intel-caption {
    font-style: italic;
    font-weight: 750;
}

.drybulk-overview[b-qk4cge5vtx]  .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-qk4cge5vtx]  .freight-ov-news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 7px;
}

.drybulk-overview[b-qk4cge5vtx]  .freight-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: 900;
    cursor: pointer;
}

.drybulk-overview[b-qk4cge5vtx]  .freight-ov-news-filter:hover {
    color: var(--drybulkdash-blue);
}

.drybulk-overview[b-qk4cge5vtx]  .freight-ov-news-filter-on,
.drybulk-overview[b-qk4cge5vtx]  .freight-ov-news-filter-on:hover {
    background: var(--drybulkdash-blue);
    border-color: var(--drybulkdash-blue);
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
}

.drybulk-overview[b-qk4cge5vtx]  .freight-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-qk4cge5vtx]  .freight-ov-news-link.freight-news-up {
    border-left-color: var(--drybulkdash-up);
}

.drybulk-overview[b-qk4cge5vtx]  .freight-ov-news-link.freight-news-down {
    border-left-color: var(--drybulkdash-down);
}

.drybulk-overview[b-qk4cge5vtx]  .freight-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-qk4cge5vtx]  .freight-ov-news-link:hover .freight-ov-news-title {
    color: var(--drybulkdash-blue);
}

.drybulk-overview[b-qk4cge5vtx]  .freight-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-qk4cge5vtx]  .freight-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-qk4cge5vtx]  .freight-ov-news-skeleton {
    padding: 11px 0;
    border-bottom: 1px solid var(--drybulkdash-row-line);
}

/* 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-qk4cge5vtx] {
    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-qk4cge5vtx] {
    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-qk4cge5vtx] {
    flex: 0 0 auto;
    height: 20px; /* layout-lint: allow inside card: unavailable retry button */
    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-qk4cge5vtx] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_210_Weather_ChinaHydro.razor.rz.scp.css */
/* Weather > China hydro. Dense: small type, tight gaps. Palette from the shell vars. */

.drybulkdash-hydro[b-v7m236s49w] {
    --hy-up2: #0057A8;
    --hy-up1: #7FB8E0;
    --hy-flat: #B8C6CE;
    --hy-dn1: #F0A0A8;
    --hy-dn2: #C8102E;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--ssy-fs-small, 11px);
}

/* ---- day slider (on the command bar) ---- */
.drybulkdash-hydro-day[b-v7m236s49w] { width: 200px; }

/* ---- five-step change colours: SVG nodes (the legend reads the same vars) ---- */
.drybulkdash-hydro circle.hy-up2[b-v7m236s49w] { fill: var(--hy-up2); }
.drybulkdash-hydro circle.hy-up1[b-v7m236s49w] { fill: var(--hy-up1); }
.drybulkdash-hydro circle.hy-flat[b-v7m236s49w] { fill: var(--hy-flat); }
.drybulkdash-hydro circle.hy-dn1[b-v7m236s49w] { fill: var(--hy-dn1); }
.drybulkdash-hydro circle.hy-dn2[b-v7m236s49w] { fill: var(--hy-dn2); }
.drybulkdash-hydro circle.hy-na[b-v7m236s49w] { fill: #fff; stroke: var(--hy-flat); stroke-dasharray: 2 2; }
.drybulkdash-hydro text.hy-up2[b-v7m236s49w] { fill: var(--hy-up2); font-weight: 700; }
.drybulkdash-hydro text.hy-up1[b-v7m236s49w] { fill: var(--hy-up2); }
.drybulkdash-hydro text.hy-dn1[b-v7m236s49w] { fill: var(--hy-dn2); }
.drybulkdash-hydro text.hy-dn2[b-v7m236s49w] { fill: var(--hy-dn2); font-weight: 700; }
.drybulkdash-hydro text.hy-na[b-v7m236s49w], .drybulkdash-hydro text.hy-flat[b-v7m236s49w] { fill: var(--drybulkdash-text-muted); }

.drybulkdash-hydro .drybulkdash-hydro-net[b-v7m236s49w] { width: 100%; height: auto; display: block; font-family: inherit; }
.drybulkdash-hydro .hy-edge[b-v7m236s49w] { stroke: #7FB8E0; stroke-linecap: round; opacity: 0.75; }
.drybulkdash-hydro .hy-trib[b-v7m236s49w] { stroke: #A6CFEA; }
.drybulkdash-hydro .hy-node[b-v7m236s49w] { stroke: #fff; stroke-width: 1.5; }
.drybulkdash-hydro .hy-name[b-v7m236s49w] { font-size: var(--ssy-fs-small); font-weight: 700; fill: #00205B; text-anchor: middle; }
.drybulkdash-hydro .hy-flow[b-v7m236s49w] { font-size: 8.5px; fill: var(--drybulkdash-text-muted); text-anchor: middle; }
.drybulkdash-hydro .hy-val[b-v7m236s49w] { font-size: var(--ssy-fs-small); font-weight: 700; fill: var(--drybulkdash-text); text-anchor: middle; }
.drybulkdash-hydro .hy-d[b-v7m236s49w], .drybulkdash-hydro .hy-d7[b-v7m236s49w] { font-size: 8.5px; text-anchor: middle; }
.drybulkdash-hydro .hy-d7[b-v7m236s49w] { fill: var(--drybulkdash-text-muted); }
.drybulkdash-hydro .hy-small[b-v7m236s49w] { font-size: var(--ssy-fs-micro); fill: var(--drybulkdash-text-muted); }
.drybulkdash-hydro .hy-tg-frame[b-v7m236s49w] { fill: #F1F5F8; stroke: #CEDCE4; }
.drybulkdash-hydro .hy-tg-fill[b-v7m236s49w] { fill: #009DC9; }
.drybulkdash-hydro .hy-tg-ly[b-v7m236s49w] { stroke: #F7A506; stroke-width: 2; }
.drybulkdash-hydro .hy-box rect[b-v7m236s49w] { fill: #FAFCFD; stroke: #E1E8ED; }
.drybulkdash-hydro .hy-boxhead[b-v7m236s49w] { font-size: 9.5px; font-weight: 700; fill: #00205B; }
.drybulkdash-hydro .hy-boxrow[b-v7m236s49w] { font-size: var(--ssy-fs-tiny); fill: var(--drybulkdash-text-dim); }
.drybulkdash-hydro .hy-r[b-v7m236s49w] { text-anchor: end; }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_500_Bunkers.razor.rz.scp.css */
.drybulk-bunkers[b-w59x03xk2i] {
    --drybulk-bunk-gutter-x: 1px;
    --drybulk-bunk-gutter-y: 3px;
    display: grid;
    gap: 5px;
}

.drybulk-bunkers[b-w59x03xk2i]  .ssy-card {
    padding: var(--drybulk-bunk-gutter-y) var(--drybulk-bunk-gutter-x);
}

.drybulk-bunkers[b-w59x03xk2i]  .ssy-card-head {
    min-height: 18px; /* layout-lint: allow inside card: bunkers card head */
    margin-bottom: 3px;
    padding-inline: 0;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-route-wrap {
    overflow: auto;
    border-top: 1px solid var(--drybulkdash-card-border-soft);
    scrollbar-width: thin;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-cost-dn {
    color: var(--drybulkdash-up);
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-cost-up {
    color: var(--drybulkdash-down);
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-flat {
    color: var(--drybulkdash-text-muted);
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-head-tools,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-legend,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-stale,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-outlier {
    display: inline-flex;
    align-items: center;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-feed {
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 4px;
    background: var(--drybulkdash-row-active-bg);
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-clickable {
    cursor: pointer;
}

.drybulk-bunkers[b-w59x03xk2i]  tr:hover .drybulk-bunk-clickable,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-stem-row.drybulk-bunk-clickable:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.drybulk-bunkers[b-w59x03xk2i]  tr.drybulk-bunk-row-selected td,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-stem-row.drybulk-bunk-row-selected,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-stem-row.drybulk-bunk-clickable:hover {
    background: var(--drybulkdash-row-active-bg);
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-top-grid {
    align-items: stretch;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-top-grid > .ssy-card,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-route-card,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-stem-card,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-spreads-card,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-demand {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-demand {
    padding-bottom: 5px;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-tape-card .drybulk-bunk-table-wrap,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-route-card .drybulk-bunk-route-wrap,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-stem-bars,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-history-chart,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-demand-chart,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-spreads-body,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-spreads-chart {
    flex: 1;
    min-height: 0;
}

.drybulk-bunkers[b-w59x03xk2i]  .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-w59x03xk2i]  .drybulk-bunk-stem-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 34px; /* layout-lint: allow inside card: stem row cells */
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.drybulk-bunkers[b-w59x03xk2i]  .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-w59x03xk2i]  .drybulk-bunk-bar-track {
    overflow: hidden;
    height: 25px; /* layout-lint: allow inside card: bar track */
    border: 1px solid var(--drybulkdash-card-border-soft);
    border-radius: 3px;
    background: var(--drybulkdash-row-active-bg);
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 46px;
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
    padding-right: 4px;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-bar b,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-stem-row i {
    font-size: var(--ssy-fs-tiny);
    font-weight: 950;
    line-height: 1;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-stem-row i {
    font-style: normal;
    text-align: right;
}

/* Stat tiles and history selects size themselves: four across while each gets 140px,
   2x2 on a phone - no viewport rule. */
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-demand-grid,
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); /* layout-lint: allow inside card: bunkers controls row */
    gap: 4px;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-demand-grid {
    padding: 0 var(--drybulk-bunk-gutter-x) 5px;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-demand-grid div {
    display: grid;
    gap: 2px;
    min-width: 0;
    min-height: 49px; /* layout-lint: allow inside card: demand grid cell */
    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-w59x03xk2i]  .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-w59x03xk2i]  .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-w59x03xk2i]  .drybulk-bunk-controls {
    margin-bottom: 4px;
}

/* Table and chart side by side while the chart gets 260px; below that it drops under the
   table at full width instead of becoming a tall sliver. (Its basis is a WIDTH here: the
   spreads body is a row; the shared flex:1 rule above is for column flexes.) */
.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-spreads-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-spreads-body > .drybulk-bunk-spreads-chart {
    flex: 1 1 260px;
    min-width: 0;
}

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunk-spreads-table {
    flex: 0 0 auto;
    align-self: flex-start;
}

/* 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. */

.drybulk-bunkers[b-w59x03xk2i]  .drybulk-bunkports-card .drybulk-bunk-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
}

/* THE TYPE HIERARCHY, which is the whole readability of this grid.
   Three ranks, and nothing competes within a rank:
     1. prices  - spot and the forward months. Dark, tabular, full size.
     2. changes - 1D, 30D and the curve steps. Smaller, lighter, coloured.
     3. chrome  - region titles, headings, Hi5.
   Before this, a price and its change were the same size and weight, so forty
   rows x nine numbers read as one undifferentiated field of digits. */
.drybulk-bunkers[b-w59x03xk2i]  table.drybulk-bunkports-table td.drybulk-bunk-num {
    font-variant-numeric: tabular-nums;
    padding-inline: 5px;
}

/* The port column anchors the row across 26 columns, so it stays put when the
   board scrolls sideways at narrow widths. */
.drybulk-bunkers[b-w59x03xk2i]  table.drybulk-bunkports-table td.drybulk-bunk-col-port,
.drybulk-bunkers[b-w59x03xk2i]  table.drybulk-bunkports-table th.drybulk-bunk-col-port {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--drybulkdash-card-bg, #fff);
    padding-right: 8px;
}

/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_600_Commodities.razor.rz.scp.css */
.drybulkdash-commodities[b-bee8e88if0] {
    min-width: 0;
}

.drybulkdash-commodities .drybulkdash-commodities-workspace[b-bee8e88if0] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.drybulkdash-commodities .drybulkdash-commodities-status[b-bee8e88if0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ssy-space-2);
    min-height: 20px; /* layout-lint: allow inside card: commodities status strip */
    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-bee8e88if0] {
    color: var(--ssy-dash-warning, #9a6700);
    font-weight: 700;
}

.drybulkdash-commodities .drybulkdash-commodities-status .ssy-link-button[b-bee8e88if0] {
    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-bee8e88if0] {
    display: inline-flex;
    align-items: end;
    gap: 2px;
    height: 18px; /* layout-lint: allow inside card: pressure meter */
    padding-inline: var(--ssy-space-2);
    opacity: .45;
}

.drybulkdash-commodities .drybulkdash-commodities-pressure i[b-bee8e88if0] {
    display: block;
    width: 3px;
    background: currentColor;
}

.drybulkdash-commodities .drybulkdash-commodities-pressure i:nth-child(1)[b-bee8e88if0],
.drybulkdash-commodities .drybulkdash-commodities-pressure i:nth-child(5)[b-bee8e88if0] { height: 4px; } /* layout-lint: allow inside card: pressure meter bar */
.drybulkdash-commodities .drybulkdash-commodities-pressure i:nth-child(2)[b-bee8e88if0],
.drybulkdash-commodities .drybulkdash-commodities-pressure i:nth-child(4)[b-bee8e88if0] { height: 8px; } /* layout-lint: allow inside card: pressure meter bar */
.drybulkdash-commodities .drybulkdash-commodities-pressure i:nth-child(3)[b-bee8e88if0] { height: 13px; } /* layout-lint: allow inside card: pressure meter bar */

.drybulkdash-commodities .drybulkdash-commodities-loading[b-bee8e88if0] {
    display: grid;
    gap: var(--ssy-space-2);
    padding: var(--ssy-space-2);
}

@media (max-width: 720px) { /* layout-lint: allow inside card: command bar + status strip */
    /* Owner's choice: on phones this bar stays ONE row that scrolls sideways (the shared phone
       bar wraps sections and controls instead). */
    .drybulkdash-commodities[b-bee8e88if0]  .ssy-cmdbar.has-left.has-right {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .drybulkdash-commodities[b-bee8e88if0]  .ssy-cmdbar.has-left.has-right > *,
    .drybulkdash-commodities[b-bee8e88if0]  .ssy-cmdbar.has-left.has-right > .ssy-cmdbar-left > *,
    .drybulkdash-commodities[b-bee8e88if0]  .ssy-cmdbar.has-left.has-right > .ssy-cmdbar-right > *,
    .drybulkdash-commodities[b-bee8e88if0]  .ssy-cmdbar.has-left.has-right .ssy-cmdbar-sections {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .drybulkdash-commodities .drybulkdash-commodities-status[b-bee8e88if0] {
        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-sj843acwqz] {
    gap: var(--ssy-space-2);
    min-width: 0;
    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-sj843acwqz] {
    min-width: 0;
    padding: var(--ssy-space-1) var(--ssy-space-2) var(--ssy-space-2);
}

.drybulkdash-commodities-board[b-sj843acwqz]  .drybulkdash-commodities-grid {
    gap: var(--ssy-space-2);
}

/* Charts fill their cards rather than forcing a design height. */
.drybulkdash-commodities-board[b-sj843acwqz]  .drybulkdash-commodities-grid .ssy-chart-card-slot {
    height: 100%;
}

.drybulkdash-commodities-board[b-sj843acwqz]  .drybulkdash-commodities-grid > .ssy-card {
    min-height: 0;
}

/* Dense chart descriptions stay on one line so the expand affordance and plot remain clear. */
.drybulkdash-commodities-board[b-sj843acwqz]  .drybulkdash-commodities-grid .ssy-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dense arb charts use the legend as their series-identification surface. */
.drybulkdash-commodities-board[b-sj843acwqz]  .highcharts-series-label {
    display: none;
}

/* Keep rotated producer labels within the cost-curve plot. */
.drybulkdash-commodities-board[b-sj843acwqz]  .drybulkdash-supply-curve .highcharts-container,
.drybulkdash-commodities-board[b-sj843acwqz]  .drybulkdash-supply-curve .highcharts-root {
    overflow: hidden !important;
}

/* The table wrapper only controls how the SsyTable fits in its grid band. */
.drybulkdash-commodities-hero-table[b-sj843acwqz] {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

@media (max-width: 1100px) { /* layout-lint: allow padding only, not layout */
    .drybulkdash-commodities-bands[b-sj843acwqz] {
        padding-inline: var(--ssy-space-1);
    }
}


/* /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-pmh3bi4ihj] { gap: 4px; position: relative; }

.drybulkdash-assumptions-method[b-pmh3bi4ihj] { margin-top: 6px; }
.drybulkdash-assumptions-method summary[b-pmh3bi4ihj] { cursor: pointer; font-weight: 700; }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_6E0_Commodities_Freight_Differentials.razor.rz.scp.css */
/* The shared SsyTable owns table chrome and row states. These rules own the context strip layout. */

.drybulkdash-freightdiff[b-mshyl63aro] { gap: 10px; min-height: 0; }

/* The context strip: anchor, TCE, bunkers, forward curve. */
.drybulkdash-freightdiff-head[b-mshyl63aro] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); /* layout-lint: allow inside card: freight diff head picker grid */
    gap: 1px;
    background: var(--ssy-dash-border-soft);
    border: 1px solid var(--ssy-dash-border-soft);
    border-radius: 3px;
    overflow: hidden;
}
.drybulkdash-freightdiff-head > div[b-mshyl63aro] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    background: var(--ssy-dash-surface);
}
.drybulkdash-freightdiff-head span[b-mshyl63aro] {
    color: var(--ssy-dash-text-muted);
    font-size: var(--ssy-fs-tiny);
    letter-spacing: .05em;
}
.drybulkdash-freightdiff-head strong[b-mshyl63aro] {
    color: var(--ssy-dash-brand);
    font-size: var(--ssy-fs-lg);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.drybulkdash-freightdiff-head small[b-mshyl63aro] {
    color: var(--ssy-dash-text-muted);
    font-size: var(--ssy-fs-tiny);
}

.drybulkdash-freightdiff-table-wrap[b-mshyl63aro] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
}

/* Anchor: value and picker on one line. */
.drybulkdash-freightdiff-anchorbox[b-mshyl63aro] { grid-column: span 2; } /* layout-lint: allow inside card: anchor box span in head */
.drybulkdash-freightdiff-pickrow[b-mshyl63aro] { display: flex; align-items: center; gap: 10px; }
.drybulkdash-freightdiff-pick[b-mshyl63aro] { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.drybulkdash-freightdiff-anchor-custom[b-mshyl63aro] { width: 64px; }

/* FFA box: one line per contract - label, $/t, 1D, TCE. */
.drybulkdash-freightdiff-fwd > div[b-mshyl63aro] {
    display: grid;
    grid-template-columns: 48px auto 52px 1fr; /* layout-lint: allow inside card: forward row cells */
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.drybulkdash-freightdiff-fwd b[b-mshyl63aro] { font-size: var(--ssy-fs-tiny); color: var(--ssy-dash-text-muted); }
.drybulkdash-freightdiff-fwd strong[b-mshyl63aro] { font-size: var(--ssy-fs-md, 1rem); }
.drybulkdash-freightdiff-fwd em[b-mshyl63aro] { font-style: normal; font-size: var(--ssy-fs-tiny); }

/* The anchor is the row every other number is measured from, so it reads as the reference rather
   than as the first of sixteen equals. */
/* Below the anchor is the case worth spotting, and a minus sign alone does not carry across a
   thirteen-column row. */
.drybulkdash-freightdiff-under[b-mshyl63aro] { color: var(--ssy-dash-warn); font-weight: 700; }

/* Basis switch. Two buttons, not a dropdown: there are exactly two benchmarks and which one is
   showing has to be readable without a click, because the two grids look alike. */
.drybulkdash-freightdiff-basis[b-mshyl63aro] { display: flex; gap: 6px; align-items: stretch; }
.drybulkdash-freightdiff-paper[b-mshyl63aro] { display: flex; align-items: flex-end; gap: 6px; margin-left: auto; }
.drybulkdash-freightdiff-paper > button[b-mshyl63aro] {
    padding: 3px 9px;
    border: 1px solid var(--ssy-dash-border, #E1E8ED);
    border-radius: 3px;
    background: var(--ssy-dash-surface, #FFFFFF);
    color: var(--ssy-dash-text-dim, #536A75);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
}
.drybulkdash-freightdiff-paper > button.is-on[b-mshyl63aro] { background: var(--ssy-colour-main-simpson-blue, #000061); border-color: var(--ssy-colour-main-simpson-blue, #000061); color: var(--ssy-colour-main-pure-white, #FFFFFF); }
.drybulkdash-freightdiff-laycan[b-mshyl63aro] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ssy-dash-text-muted, #798E98);
}
.drybulkdash-freightdiff-basis button[b-mshyl63aro] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 4px 10px;
    border: 1px solid var(--ssy-dash-border, #E1E8ED);
    border-radius: 3px;
    background: var(--ssy-dash-surface, #FFFFFF);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ssy-dash-text-dim, #536A75);
}

.drybulkdash-freightdiff-basis button small[b-mshyl63aro] {
    font-size: .6rem;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--ssy-dash-text-muted, #798E98);
}

.drybulkdash-freightdiff-basis button.is-on[b-mshyl63aro] {
    background: var(--ssy-colour-main-simpson-blue, #000061);
    border-color: var(--ssy-colour-main-simpson-blue, #000061);
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
    cursor: default;
}

.drybulkdash-freightdiff-basis button.is-on small[b-mshyl63aro] { color: #b9c0e8; }

/* Phone: the anchor box spans two tracks, which forces a second implicit column past the box
   when only one fits; the table wrapper is a child component's root, so it needs ::deep. */
@container ssy-dashboard (max-width: 760px) { /* layout-lint: allow inside card: freight diff head + table wrap */
    .drybulkdash-freightdiff[b-mshyl63aro] { min-width: 0; }
    .drybulkdash-freightdiff-head[b-mshyl63aro] { grid-template-columns: minmax(0, 1fr); } /* layout-lint: allow inside card: freight diff head one column */
    .drybulkdash-freightdiff-anchorbox[b-mshyl63aro] { grid-column: auto; } /* layout-lint: allow inside card: anchor box placement */
    .drybulkdash-freightdiff[b-mshyl63aro]  .drybulkdash-freightdiff-table-wrap { min-width: 0; max-width: 100%; }
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_6F0_Commodities_CoalCost.razor.rz.scp.css */
.drybulkdash-dash-wrap .drybulkdash-coalcost[b-cj5mrtthu5] { gap: 4px; }
.drybulkdash-dash-wrap .drybulkdash-coalcost-body[b-cj5mrtthu5] { gap: 6px; }
.drybulkdash-dash-wrap .drybulkdash-coalcost-body > .ssy-fit-col[b-cj5mrtthu5] { gap: 6px; }
/* /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-arpwmxxwms] {
    /* row template comes from ssy-fit-grid on the root */
    gap: 10px;
    align-content: start;
}

/* The same page component is hosted by LPG. Resolve its established palette
   tokens against the LPG shell so no page styles or layout fork is needed. */
.drybulkdash-news-sentiment.lpgdash-news-sentiment[b-arpwmxxwms] {
    --drybulkdash-blue: var(--lpgdash-brand);
    --drybulkdash-accent: var(--lpgdash-accent);
    --drybulkdash-up: var(--lpgdash-up);
    --drybulkdash-down: var(--lpgdash-down);
    --drybulkdash-warn: var(--lpgdash-warn);
    --drybulkdash-text: var(--lpgdash-text);
    --drybulkdash-text-dim: var(--lpgdash-text-dim);
    --drybulkdash-text-muted: var(--lpgdash-text-muted);
    --drybulkdash-divider: var(--lpgdash-divider);
    --drybulkdash-card-border: var(--lpgdash-card-border);
    --drybulkdash-card-border-soft: var(--lpgdash-card-border-soft);
    --drybulkdash-row-line: var(--lpgdash-row-line);
    --drybulkdash-row-active-bg: var(--lpgdash-row-active-bg);
    --drybulkdash-surface: var(--lpgdash-surface);
    --drybulkdash-tint-1: var(--lpgdash-tint-1);
    --drybulkdash-tint-2: var(--lpgdash-tint-2);
    --drybulkdash-tint-3: var(--lpgdash-tint-3);
    --drybulkdash-tint-4: var(--lpgdash-tint-4);
    --drybulkdash-tint-5: var(--lpgdash-tint-5);
    --drybulkdash-tint-6: var(--lpgdash-tint-6);
    --drybulkdash-tint-accent: var(--lpgdash-tint-accent);
}


.drybulkdash-news-sentiment .drybulkdash-news-main[b-arpwmxxwms] {
    min-width: 0;
}

/* rail: grid content; scroll behaviour from ssy-fit-scroll on the element */
.drybulkdash-news-sentiment .drybulkdash-news-rail[b-arpwmxxwms] {
    display: grid;
    gap: 8px;
    align-content: start;
    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-arpwmxxwms] {
    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-arpwmxxwms] {
    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-arpwmxxwms] {
    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-arpwmxxwms] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 3px;
}

.drybulkdash-news-sentiment .drybulkdash-news-kpiname[b-arpwmxxwms] {
    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-arpwmxxwms] {
    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-arpwmxxwms] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 9px;
}

.drybulkdash-news-sentiment .drybulkdash-news-kpival[b-arpwmxxwms] {
    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-arpwmxxwms] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    text-transform: capitalize;
}

.drybulkdash-news-sentiment .drybulkdash-news-wow[b-arpwmxxwms] {
    margin-left: auto;
    align-self: baseline;
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.drybulkdash-news-sentiment .drybulkdash-news-moodbar[b-arpwmxxwms] {
    position: relative;
    height: 8px; /* layout-lint: allow inside card: mood bar */
    margin-top: auto;
    border-radius: 999px;
    /* fixed zones: bearish red / neutral grey (40–60% = ±20) / bullish green */
    background: linear-gradient(to right,
        var(--drybulkdash-down) 0%, var(--drybulkdash-down) 40%,
        var(--drybulkdash-card-border-soft) 40%, var(--drybulkdash-card-border-soft) 60%,
        var(--drybulkdash-up) 60%, var(--drybulkdash-up) 100%);
}

.drybulkdash-news-sentiment .drybulkdash-news-moodmarker[b-arpwmxxwms] {
    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-arpwmxxwms] {
    color: var(--drybulkdash-text);
    font-weight: 900;
    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-arpwmxxwms] {
    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-arpwmxxwms] {
    font-weight: 900;
    margin-left: 3px;
}

.drybulkdash-news-sentiment .drybulkdash-news-momsub .drybulkdash-news-up[b-arpwmxxwms] { color: var(--drybulkdash-up); }
.drybulkdash-news-sentiment .drybulkdash-news-momsub .drybulkdash-news-down[b-arpwmxxwms] { color: var(--drybulkdash-down); }
.drybulkdash-news-sentiment .drybulkdash-news-momsub .drybulkdash-news-flat[b-arpwmxxwms] { 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-arpwmxxwms] {
    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-arpwmxxwms] {
    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-arpwmxxwms] { color: var(--drybulkdash-up); }
.drybulkdash-news-sentiment .drybulkdash-news-splitnums .drybulkdash-news-down strong[b-arpwmxxwms] { color: var(--drybulkdash-down); }
.drybulkdash-news-sentiment .drybulkdash-news-splitneutral strong[b-arpwmxxwms] { color: var(--drybulkdash-text-dim); }

.drybulkdash-news-sentiment .drybulkdash-news-splitbar[b-arpwmxxwms] {
    display: flex;
    height: 8px; /* layout-lint: allow inside card: split bar */
    margin-top: auto;
    border-radius: 999px;
    overflow: hidden;
    background: var(--drybulkdash-row-active-bg);
}

.drybulkdash-news-sentiment .drybulkdash-news-splitseg[b-arpwmxxwms] { height: 100%; }
.drybulkdash-news-sentiment .drybulkdash-news-splitbull[b-arpwmxxwms] { background: var(--drybulkdash-up); }
.drybulkdash-news-sentiment .drybulkdash-news-splitneu[b-arpwmxxwms] { background: var(--drybulkdash-card-border-soft); }
.drybulkdash-news-sentiment .drybulkdash-news-splitbear[b-arpwmxxwms] { background: var(--drybulkdash-down); }

.drybulkdash-news-sentiment .drybulkdash-news-kpival.drybulkdash-news-up[b-arpwmxxwms] { color: var(--drybulkdash-up); }
.drybulkdash-news-sentiment .drybulkdash-news-kpival.drybulkdash-news-down[b-arpwmxxwms] { color: var(--drybulkdash-down); }
.drybulkdash-news-sentiment .drybulkdash-news-kpival.drybulkdash-news-flat[b-arpwmxxwms] { color: var(--drybulkdash-text); }
.drybulkdash-news-sentiment .drybulkdash-news-wow .drybulkdash-news-up[b-arpwmxxwms] { color: var(--drybulkdash-up); }
.drybulkdash-news-sentiment .drybulkdash-news-wow .drybulkdash-news-down[b-arpwmxxwms] { color: var(--drybulkdash-down); }
.drybulkdash-news-sentiment .drybulkdash-news-wow .drybulkdash-news-flat[b-arpwmxxwms] { color: var(--drybulkdash-text-muted); }

/* --- state --- */
.drybulkdash-news-sentiment .drybulkdash-news-statebox[b-arpwmxxwms] {
    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-arpwmxxwms] {
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-xl);
}

/* --- card header tools --- */
.drybulkdash-news-sentiment .drybulkdash-news-headtools[b-arpwmxxwms] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.drybulkdash-news-sentiment .drybulkdash-news-iconbtn[b-arpwmxxwms] {
    border: 1px solid var(--drybulkdash-card-border-soft);
    background: var(--drybulkdash-surface);
    color: var(--drybulkdash-text-dim);
    border-radius: 6px;
    width: 24px;
    height: 24px; /* layout-lint: allow inside card: icon button */
    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-arpwmxxwms] {
    color: var(--drybulkdash-blue);
}

.drybulkdash-news-sentiment .drybulkdash-spin[b-arpwmxxwms] {
    display: inline-block;
    animation: drybulkdash-spin-b-arpwmxxwms 0.8s linear infinite;
}

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

/* --- filters --- */
.drybulkdash-news-sentiment .drybulkdash-news-tools[b-arpwmxxwms] {
    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-arpwmxxwms] {
    flex: 0 1 210px;
    min-width: 0;
}

.drybulkdash-news-sentiment .drybulkdash-news-chips[b-arpwmxxwms] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.drybulkdash-news-sentiment .drybulkdash-news-chip[b-arpwmxxwms] {
    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-arpwmxxwms] {
    flex-basis: 100%;
    min-width: 0;
}

.drybulkdash-news-sentiment .drybulkdash-news-advanced summary[b-arpwmxxwms] {
    width: max-content;
    color: var(--drybulkdash-blue);
    font-size: var(--ssy-fs-base);
    font-weight: 900;
    cursor: pointer;
    list-style-position: inside;
}

.drybulkdash-news-sentiment .drybulkdash-news-advanced-grid[b-arpwmxxwms] {
    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-arpwmxxwms] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr); /* layout-lint: allow inside card: filter group label grid */
    align-items: start;
    gap: 8px;
}

.drybulkdash-news-sentiment .drybulkdash-news-filtergroup > span[b-arpwmxxwms] {
    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-arpwmxxwms] {
    color: var(--drybulkdash-blue);
}

.drybulkdash-news-sentiment .drybulkdash-news-chip-on[b-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-news-chip-on:hover[b-arpwmxxwms] {
    background: var(--drybulkdash-blue);
    border-color: var(--drybulkdash-blue);
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
}

.drybulkdash-news-sentiment .drybulkdash-news-cnt[b-arpwmxxwms] {
    margin-left: 5px;
    opacity: 0.7;
    font-size: var(--ssy-fs-small);
}

.drybulkdash-news-sentiment .drybulkdash-news-clear[b-arpwmxxwms] {
    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-arpwmxxwms] {
    margin: 9px 0 3px 0;
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.drybulkdash-news-sentiment .drybulkdash-news-item[b-arpwmxxwms] {
    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-arpwmxxwms] {
    background: var(--drybulkdash-row-active-bg);
}

.drybulkdash-news-sentiment .drybulkdash-news-up[b-arpwmxxwms] {
    border-left-color: var(--drybulkdash-up);
}

.drybulkdash-news-sentiment .drybulkdash-news-down[b-arpwmxxwms] {
    border-left-color: var(--drybulkdash-down);
}

/* Single-line row: score | headline (truncates) | meta (holds its width). */
.drybulkdash-news-sentiment .drybulkdash-news-item-top[b-arpwmxxwms] {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 8px;
}

.drybulkdash-news-sentiment .drybulkdash-news-score[b-arpwmxxwms] {
    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-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-news-pill.drybulkdash-news-up[b-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-tb-val.drybulkdash-news-up[b-arpwmxxwms] {
    color: var(--drybulkdash-up);
}

.drybulkdash-news-sentiment .drybulkdash-news-down .drybulkdash-news-score[b-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-news-pill.drybulkdash-news-down[b-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-tb-val.drybulkdash-news-down[b-arpwmxxwms] {
    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-arpwmxxwms] {
    margin: 0 0 3px 0;
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-md);
    font-weight: 900;
    line-height: 1.25;
}

.drybulkdash-news-sentiment .drybulkdash-news-title[b-arpwmxxwms] {
    color: var(--drybulkdash-text);
    font-size: var(--ssy-fs-md);
    font-weight: 700;
    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-arpwmxxwms] {
    color: var(--drybulkdash-blue);
    text-decoration: underline;
}

.drybulkdash-news-sentiment .drybulkdash-news-snippet[b-arpwmxxwms] {
    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-arpwmxxwms] {
    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-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-news-tag[b-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-news-driver[b-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-news-detailchip[b-arpwmxxwms] {
    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-arpwmxxwms] {
    font-variant-numeric: tabular-nums;
}

.drybulkdash-news-sentiment .drybulkdash-news-materiality-high[b-arpwmxxwms] {
    color: var(--drybulkdash-down);
}

.drybulkdash-news-sentiment .drybulkdash-news-materiality-medium[b-arpwmxxwms] {
    color: var(--drybulkdash-warn);
}

.drybulkdash-news-sentiment .drybulkdash-news-materiality-low[b-arpwmxxwms] {
    color: var(--drybulkdash-text-muted);
}

.drybulkdash-news-sentiment .drybulkdash-news-theme[b-arpwmxxwms] {
    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-arpwmxxwms] {
    color: var(--drybulkdash-blue);
}

.drybulkdash-news-sentiment .drybulkdash-news-srcdot[b-arpwmxxwms] {
    display: inline-block;
    width: 7px;
    height: 7px; /* layout-lint: allow inside card: source dot */
    border-radius: 50%;
    margin-right: 2px;
    flex: 0 0 auto;
}

.drybulkdash-news-sentiment .drybulkdash-news-source[b-arpwmxxwms] {
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-base);
    font-weight: 700;
}

.drybulkdash-news-sentiment .drybulkdash-news-dot[b-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-news-time[b-arpwmxxwms] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-base);
    font-variant-numeric: tabular-nums;
}

.drybulkdash-news-sentiment .drybulkdash-news-driver[b-arpwmxxwms] {
    color: var(--drybulkdash-blue);
}

.drybulkdash-news-sentiment .drybulkdash-news-detail[b-arpwmxxwms] {
    margin-top: 7px;
    padding: 7px 9px;
    background: var(--drybulkdash-row-active-bg);
    border-radius: 6px;
}

.drybulkdash-news-sentiment .drybulkdash-news-detail p[b-arpwmxxwms] {
    margin: 0 0 6px 0;
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-md);
    line-height: 1.45;
}

/* Every tag is one unbroken pill: inline text with a border split long tags across lines. */
.drybulkdash-news-sentiment .drybulkdash-news-tag[b-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-news-driver[b-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-news-detailchip[b-arpwmxxwms] {
    display: inline-block;
    max-width: 100%;
    margin: 0 4px 4px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
}

.drybulkdash-news-sentiment .drybulkdash-news-more[b-arpwmxxwms] {
    display: flex;
    justify-content: center;
    padding: 12px 0 2px 0;
}

.drybulkdash-news-sentiment .drybulkdash-news-more button[b-arpwmxxwms] {
    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-arpwmxxwms] {
    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-arpwmxxwms] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drybulkdash-news-sentiment .drybulkdash-themebar[b-arpwmxxwms] {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 40px; /* layout-lint: allow inside card: theme bar row */
    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-arpwmxxwms],
.drybulkdash-news-sentiment .drybulkdash-themebar-on[b-arpwmxxwms] {
    background: var(--drybulkdash-row-active-bg);
}

.drybulkdash-news-sentiment .drybulkdash-themebar-on[b-arpwmxxwms] {
    box-shadow: inset 2px 0 0 var(--drybulkdash-blue);
}

.drybulkdash-news-sentiment .drybulkdash-tb-label[b-arpwmxxwms] {
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    color: var(--drybulkdash-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drybulkdash-news-sentiment .drybulkdash-tb-count[b-arpwmxxwms] {
    color: var(--drybulkdash-text-muted);
    font-weight: 700;
    font-size: var(--ssy-fs-small);
}

.drybulkdash-news-sentiment .drybulkdash-tb-track[b-arpwmxxwms] {
    position: relative;
    height: 8px; /* layout-lint: allow inside card: theme bar track */
    background: var(--drybulkdash-row-active-bg);
    border-radius: 3px;
}

.drybulkdash-news-sentiment .drybulkdash-tb-mid[b-arpwmxxwms] {
    position: absolute;
    left: 50%;
    top: -1px;
    bottom: -1px;
    width: 1px;
    background: var(--drybulkdash-card-border-soft);
}

.drybulkdash-news-sentiment .drybulkdash-tb-fill[b-arpwmxxwms] {
    position: absolute;
    top: 0;
    height: 8px; /* layout-lint: allow inside card: theme bar fill */
    border-radius: 2px;
}

.drybulkdash-news-sentiment .drybulkdash-tb-up[b-arpwmxxwms] {
    background: var(--drybulkdash-up);
}

.drybulkdash-news-sentiment .drybulkdash-tb-dn[b-arpwmxxwms] {
    background: var(--drybulkdash-down);
}

.drybulkdash-news-sentiment .drybulkdash-tb-val[b-arpwmxxwms] {
    text-align: right;
    font-size: var(--ssy-fs-base);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* --- leaders --- */
.drybulkdash-news-sentiment .drybulkdash-news-leaders[b-arpwmxxwms] {
    display: grid;
    gap: 8px;
}

.drybulkdash-news-sentiment .drybulkdash-news-leaders h4[b-arpwmxxwms] {
    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-arpwmxxwms] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px; /* layout-lint: allow inside card: leader row */
    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-arpwmxxwms] {
    color: var(--drybulkdash-text-dim);
    font-size: var(--ssy-fs-base);
    line-height: 1.25;
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.drybulkdash-news-sentiment .drybulkdash-news-leader strong[b-arpwmxxwms] {
    text-align: right;
    font-size: var(--ssy-fs-base);
    font-variant-numeric: tabular-nums;
}

.drybulkdash-news-sentiment .drybulkdash-news-leader:hover span[b-arpwmxxwms] {
    color: var(--drybulkdash-blue);
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 1100px) { /* layout-lint: allow inside card: KPI strip width */
    .drybulkdash-news-sentiment .drybulkdash-news-kpis[b-arpwmxxwms] {
        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) { /* layout-lint: allow inside card: kpis, splitbar, themebar, item rows */
    .drybulkdash-news-sentiment .drybulkdash-news-kpis[b-arpwmxxwms] {
        flex-direction: column;
        width: auto;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-kpitile + .drybulkdash-news-kpitile[b-arpwmxxwms] {
        border-left: 0;
        border-top: 1px solid var(--drybulkdash-card-border-soft);
    }

    .drybulkdash-news-sentiment .drybulkdash-news-splitbar[b-arpwmxxwms] {
        min-width: 0;
    }

    .drybulkdash-news-sentiment .drybulkdash-themebar[b-arpwmxxwms] {
        grid-template-columns: 110px minmax(0, 1fr) 36px; /* layout-lint: allow inside card: theme bar row */
    }

    /* Score and headline on the first line, the meta on a second line under the headline:
       one fixed-width meta beside the headline left the headline a few letters. */
    .drybulkdash-news-sentiment .drybulkdash-news-item-top[b-arpwmxxwms] {
        flex-wrap: wrap;
        gap: 2px 7px;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-title[b-arpwmxxwms] {
        flex: 1 1 0;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-meta[b-arpwmxxwms] {
        flex: 1 1 100%;
        min-width: 0;
        padding-left: 45px;
        overflow: hidden;
    }

    /* Pill, category and time hold together; only the source name gives way. */
    .drybulkdash-news-sentiment .drybulkdash-news-meta > *[b-arpwmxxwms] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-meta > .drybulkdash-news-source[b-arpwmxxwms] {
        flex: 0 1 auto;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-source[b-arpwmxxwms] {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-score[b-arpwmxxwms] {
        min-width: 38px;
    }

    .drybulkdash-news-sentiment .drybulkdash-news-search[b-arpwmxxwms] {
        flex-basis: 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-5l35xsqeit] { 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-5l35xsqeit] { min-width:0; min-height:0; display:grid; gap:4px; align-content:start; overflow:auto; scrollbar-gutter:stable; }
.drybulkdash-ffa-mode-board .drybulkdash-ffa-workspace > *[b-5l35xsqeit] { min-height:0; }
.drybulkdash-ffa[b-5l35xsqeit]  .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); }
/* A module's one column is its box, not its widest child's min-content (TECH's toolbar pushed the card past a phone). */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-module > * { min-width:0; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-module > header { display:flex; align-items:center; justify-content:space-between; gap:8px; 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; } /* layout-lint: allow inside card: module header */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-module > header strong { color:var(--drybulkdash-text); font-weight:750; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-matrix-wrap { overflow:auto; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-tape-wrap { height:100%; overflow:auto; scrollbar-gutter:stable; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-stamp { margin-left:auto; color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); letter-spacing:.04em; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-tape-layout { min-height:0; height:100%; display:block; overflow:hidden; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-flow-positioning { min-height:0; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-model-score { 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-5l35xsqeit]  .drybulkdash-ffa-model-score > strong { color:var(--drybulkdash-blue); font-size:var(--ssy-fs-small); }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-model-factors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; } /* layout-lint: allow internal cells */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-model-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; min-height:72px; } /* layout-lint: allow internal cells */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-model-factors article,.drybulkdash-ffa[b-5l35xsqeit]  .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); } /* layout-lint: allow inside card: model factor articles */
.drybulkdash-ffa[b-5l35xsqeit]  .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); } /* layout-lint: allow inside card: model regime row */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-model-regime span { color:var(--drybulkdash-text-muted); }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-model-reliability { display:grid; gap:3px; }
.drybulkdash-ffa[b-5l35xsqeit]  .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); } /* layout-lint: allow internal cells */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-model-reliability span { color:var(--drybulkdash-text-muted); text-align:right; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-vol-mini-stack { display:grid; gap:4px; align-items:start; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-options-ledger { display:grid; grid-template-rows:20px minmax(0,1fr); border:1px solid var(--drybulkdash-card-border); } /* layout-lint: allow inside card: ledger header row + table */
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ffa-options-ledger > header strong { color:var(--drybulkdash-blue); }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-range { display:inline-flex; gap:1px; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  details { border-top:1px solid var(--drybulkdash-divider); padding-top:3px; font-size:var(--ssy-fs-micro); }

/* Wide tables and the options ledger scroll inside their own box. */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-matrix-wrap,
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-tape-wrap,
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-options-ledger { max-width:100%; overflow:auto; overscroll-behavior-inline:contain; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide { position:fixed; inset:0; z-index:1000; cursor:pointer; outline:none; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,30,.5); }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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:var(--ssy-colour-main-pure-white, #FFFFFF); font-size:var(--ssy-fs-micro); line-height:1.25; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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:var(--ssy-colour-main-pure-white, #FFFFFF); }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide-note > header strong { flex:1; font-size:var(--ssy-fs-md); }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide-note > header span { font-size:var(--ssy-fs-micro); opacity:.75; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide-note > header button { border:1px solid color-mix(in srgb, var(--ssy-colour-main-pure-white, #FFFFFF) 25%, transparent); background:transparent; color:var(--ssy-colour-main-pure-white, #FFFFFF); cursor:pointer; line-height:1; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ffa-guide-note .drybulkdash-ffa-guide-first-title { color:var(--drybulkdash-accent); }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide-note .drybulkdash-ffa-guide-first { font-size:calc(var(--ssy-fs-base) + 1px); line-height:1.48; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide-note p,.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide-note li { margin:0 0 3px; font-size:var(--ssy-fs-base); line-height:1.4; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide-note ul { margin:0; padding-left:16px; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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; } /* layout-lint: allow inside card: guide live label grid */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide-live b { color:var(--drybulkdash-text); }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ffa-guide-axis b { color:var(--drybulkdash-text); font-family:inherit; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-guide-key { margin-top:-2px; color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-small); }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ffa-guide-terms b { color:var(--drybulkdash-text); }
.drybulkdash-ffa[b-5l35xsqeit]  .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); }

/* Shared fields keep their own input treatment. These rules place the date and
   contract field frames inside the command bar's compact, dark controls. */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-datejump { width:108px; align-self:center; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-datejump .ssy-field__box,
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-contract .ssy-field__box { height:20px; border:0; border-radius:0; background:transparent; } /* layout-lint: allow inside card: contract field box */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-datejump .ssy-field__box { border-left:1px solid color-mix(in srgb, var(--ssy-colour-main-pure-white, #FFFFFF) 28%, transparent); }
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-cmdbar-date .drybulkdash-ffa-datejump input,
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-cmdbar-contract .drybulkdash-ffa-contract select { color:var(--ssy-colour-main-pure-white, #FFFFFF); font-size:var(--ssy-fs-micro); font-weight:700; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-datejump input::-webkit-calendar-picker-indicator { filter:invert(1); opacity:.7; cursor:pointer; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-datejump.is-disabled { opacity:.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-5l35xsqeit]  .highcharts-stocktools-wrapper *,
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-bindings-wrapper * { box-sizing:border-box; }
.drybulkdash-ffa[b-5l35xsqeit]  .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); } /* layout-lint: allow inside card: highcharts stocktools button */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-stocktools-toolbar li:hover { border-color:var(--drybulkdash-card-border); background:var(--drybulkdash-tint-2); }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-stocktools-toolbar li.highcharts-active { border-color:var(--drybulkdash-blue); background:var(--drybulkdash-row-active-bg); }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-stocktools-toolbar li.highcharts-separator { height:7px; margin:0; border:0; background:none; pointer-events:none; } /* layout-lint: allow inside card: stocktools separator */
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-submenu-wrapper,
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-submenu-item-arrow,
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-arrow-wrapper { display:none !important; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-hide { display:none; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-draw-mode { cursor:crosshair; }

/* --- collapse / expand toggle (the rail starts collapsed) ----------------- */

/* --- button icons -------------------------------------------------------- */
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-fibonacci .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'%3E%3Cpath d='M3 5h18'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M3 14h18'/%3E%3Cpath d='M3 19h18'/%3E%3Cpath d='M5 21L19 3' stroke-width='1.4' stroke-dasharray='2.5 2'/%3E%3C/svg%3E") !important; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .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 color-mix(in srgb, var(--ssy-colour-main-simpson-blue, #000061) 26%, transparent), 0 0 0 100vmax rgba(20,32,46,.4); color:var(--drybulkdash-text); font-size:var(--ssy-fs-micro); }
.drybulkdash-ffa[b-5l35xsqeit]  .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 color-mix(in srgb, var(--ssy-colour-main-simpson-blue, #000061) 26%, transparent); 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-5l35xsqeit]  .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 color-mix(in srgb, var(--ssy-colour-main-simpson-blue, #000061) 20%, transparent); }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup { overflow:hidden; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-main-title,
.drybulkdash-ffa[b-5l35xsqeit]  .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; } /* layout-lint: allow inside card: annotation popup header */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-close,
.drybulkdash-ffa[b-5l35xsqeit]  .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; } /* layout-lint: allow inside card: annotation popup close */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-close:hover,
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-close:hover { color:var(--drybulkdash-accent); }
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-body { padding:5px 6px; overflow:auto; min-height:0; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-lhs-col,
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-rhs-col { padding:5px 6px; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-lhs-col { border-right:1px solid var(--drybulkdash-divider); }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-lhs-full { width:100%; border-right:0; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-field,
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-field { display:grid; grid-template-columns:minmax(0,1fr) 96px; align-items:center; gap:3px 6px; margin:0 0 3px; } /* layout-lint: allow inside card: annotation popup field */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup label,
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup label { color:var(--drybulkdash-text-muted); text-transform:uppercase; letter-spacing:.25px; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup input,
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup select,
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup input,
.drybulkdash-ffa[b-5l35xsqeit]  .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); } /* layout-lint: allow inside card: annotation popup select */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup input[type=checkbox],
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-input-search-indicators { margin:0 0 4px; }
.drybulkdash-ffa[b-5l35xsqeit]  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-5l35xsqeit]  li.highcharts-indicator-list { border:0; margin:0; padding:0; list-style:none; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-indicator-list-item:hover { background:var(--drybulkdash-tint-2); }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-tab-item-content { display:none; padding:4px 0 0; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-tab-item-content.highcharts-tab-item-show { display:block; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-tab-disabled { opacity:.45; pointer-events:none; }
/* Buttons: Highcharts' own bottom row and the SSY popups' button rows. */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-bottom-row,
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-popup-bottom-row button,
.drybulkdash-ffa[b-5l35xsqeit]  .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; } /* layout-lint: allow inside card: annotation popup button */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-bottom-row button:hover,
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-btnrow button:hover { border-color:var(--drybulkdash-blue); color:var(--drybulkdash-blue); }
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-delete,
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-clearall { margin-right:auto; }
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-delete:hover,
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-clearall:hover { border-color:var(--drybulkdash-accent) !important; color:var(--drybulkdash-accent) !important; }
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-save,
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .ssy-annpopup-swatches,
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-colrow { display:flex; flex-wrap:wrap; gap:3px; }
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-swatch,
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-swatch-custom { width:15px; height:15px; border:1px solid var(--drybulkdash-card-border); padding:0; cursor:pointer; } /* layout-lint: allow inside card: annotation swatch */
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-objects-list { margin:0; padding:0; max-height:170px; overflow-y:auto; list-style:none; } /* layout-lint: allow inside card: annotation objects list */
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .ssy-annpopup-objects-remove { width:16px; height:16px; border:0; background:transparent; color:var(--drybulkdash-text-muted); cursor:pointer; } /* layout-lint: allow inside card: annotation remove button */
.drybulkdash-ffa[b-5l35xsqeit]  .ssy-annpopup-objects-remove:hover { color:var(--drybulkdash-accent); }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-annotation-toolbar { display:flex; align-items:center; gap:4px; width:auto; min-width:0; padding:2px 4px; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ffa-tech-controls { display:inline-flex; align-items:center; gap:6px; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ffa-tech-reset:hover:not(:disabled) { color:var(--drybulkdash-accent); }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-tech-reset:disabled { opacity:.35; cursor:default; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-tech-fib { border:1px solid var(--drybulkdash-divider); border-radius:3px; padding:0 5px; background:var(--drybulkdash-surface); color:var(--drybulkdash-text-muted); font:inherit; font-size:var(--ssy-fs-micro); letter-spacing:.3px; cursor:pointer; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-tech-fib:hover:not(:disabled) { border-color:var(--drybulkdash-blue); color:var(--drybulkdash-blue); }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-tech-fib:disabled { opacity:.35; cursor:default; }
/* Says WHICH swing the last fit used, so a grid drawn three range-changes ago cannot be
   mistaken for one measuring what is currently on screen. */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-tech-fibnote { color:var(--drybulkdash-text-muted); font-size:var(--ssy-fs-micro); white-space:nowrap; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ffa-tech-fibnote b { color:var(--drybulkdash-text); font-weight:700; }

/* 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-5l35xsqeit]  .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; } /* layout-lint: allow inside card: highcharts popup tab grid */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-lhs-col-wrapper,
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-rhs-col-wrapper { min-width:0; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup-lhs-full { grid-column:1 / -1; } /* layout-lint: allow inside card: highcharts popup field */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-popup .highcharts-popup-main-title { grid-column:1 / -1; } /* layout-lint: allow inside card: highcharts popup title */
/* The search box is a bare input inside the list column. */
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-popup { padding-top:1px; }
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-tab-item { margin:0; border-radius:0; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-popup h3,
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-stocktools-wrapper,
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-bindings-wrapper { position:absolute; top:0; left:0; right:0; width:auto; height:26px !important; z-index:6; background:transparent; pointer-events:none; } /* layout-lint: allow inside card: highcharts bindings wrapper */
.drybulkdash-ffa[b-5l35xsqeit]  .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; } /* layout-lint: allow inside card: highcharts menu wrapper */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-stocktools-wrapper ul,
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-bindings-wrapper ul,
.drybulkdash-ffa[b-5l35xsqeit]  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; } /* layout-lint: allow inside card: stocktools toolbar */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-stocktools-toolbar li { flex:0 0 auto; width:24px; height:22px; margin:0; } /* layout-lint: allow inside card: stocktools button */
/* Separators become vertical dividers between tool groups. */
.drybulkdash-ffa[b-5l35xsqeit]  .highcharts-stocktools-toolbar li.highcharts-separator { width:1px; height:14px; margin:0 4px; border-left:1px solid var(--drybulkdash-divider); background:none; } /* layout-lint: allow inside card: stocktools separator */
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .highcharts-toggle-toolbar { display:none !important; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  svg.highcharts-root > text:not([class]) { fill:var(--drybulkdash-text) !important; font-size:var(--ssy-fs-tiny) !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-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ta .ssy-chart-card-overlay { top:0; left:0; right:0; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-readout { display:inline-flex; flex-wrap:nowrap; align-items:baseline; gap:9px; overflow:hidden; width:max-content; max-width:calc(100% - 16px); margin:30px 0 0 8px; padding:2px 7px; background:var(--ssy-dash-surface, #FFFFFF); border:1px solid var(--drybulkdash-border); border-radius:2px; 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-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ta-readout-cell > i { color:var(--drybulkdash-text-muted); font-style:normal; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ta-readout-up > b { color:var(--ssy-colour-palette-teal-green, #01A39E); }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-readout-down > b { color:var(--ssy-colour-palette-vivid-pink, #EB3871); }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ta-readout-study > b { font-weight:700; }

/* 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-5l35xsqeit]  .drybulkdash-ta .highcharts-container { cursor:crosshair; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta .highcharts-stocktools-wrapper, .drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta .highcharts-legend-item { cursor:default; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ta-fact { display:inline-flex; align-items:baseline; gap:4px; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-fact > i { color:var(--drybulkdash-text-muted); font-style:normal; font-weight:700; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-fact > b { color:var(--drybulkdash-text); font-weight:750; font-variant-numeric:tabular-nums; text-transform:none; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-fact > em { color:var(--drybulkdash-text-muted); font-style:normal; font-weight:400; 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-5l35xsqeit]  .drybulkdash-ta-fact > b.ssy-hot { color:var(--ssy-colour-palette-vivid-pink, #EB3871); }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-fact > b.ssy-cool { color:var(--ssy-colour-palette-teal-green, #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-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ta > header > strong { flex:0 0 auto; }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ta-poll { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; } /* layout-lint: allow inside card: TA poll button */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-poll svg { width:16px; height:16px; transform:rotate(-90deg); overflow:visible; } /* layout-lint: allow inside card: TA poll icon */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-poll circle { fill:none; stroke-width:2; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-poll-track { stroke:var(--drybulkdash-divider); }
.drybulkdash-ffa[b-5l35xsqeit]  .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-5l35xsqeit]  .drybulkdash-ta-drain-a { animation:drybulkdash-ta-drain-a-b-5l35xsqeit 60s linear forwards; }
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-drain-b { animation:drybulkdash-ta-drain-b-b-5l35xsqeit 60s linear forwards; }
@keyframes drybulkdash-ta-drain-a-b-5l35xsqeit { from { stroke-dashoffset:0; } to { stroke-dashoffset:34.56; } }
@keyframes drybulkdash-ta-drain-b-b-5l35xsqeit { 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-5l35xsqeit]  .drybulkdash-ta-poll-fill { animation:none; stroke-dashoffset:0; } }
/* Not interactive - no hover or focus affordance, because there is nothing to click. */


/* ---- Chart event marks ---------------------------------------------------------------
   EVENTS covers every mark drawn over the price: each venue's open and close plus the Baltic
   index print on intraday (VenueSessionLinesJson), and the ROLL markers and the splice label
   on daily. All four carry ssy-event-line, so one class on the section hides the lot.
   The last-price line is deliberately NOT tagged - it says where the market is, which the
   reader needs whether or not they want the annotations.
   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. */
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-noevents .highcharts-plot-line.ssy-event-line,
.drybulkdash-ffa[b-5l35xsqeit]  .drybulkdash-ta-noevents .highcharts-plot-line-label.ssy-event-line { display:none; }

/* FFA board: carried-over (stale) cells fade to 25% so live session values stand out (owner 2026-10-21). Shared SsyTable stale tone unchanged elsewhere. */
.drybulkdash-ffa[b-5l35xsqeit]  .ssyt tbody td.ssyt-mark-stale,
.drybulkdash-ffa[b-5l35xsqeit]  .ssyt tbody td.ssyt-mark-stale .ssyt-delta { color: color-mix(in srgb, var(--ssy-dash-text-muted, #798E98) 25%, transparent); }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_946_Ffa_History.razor.rz.scp.css */
.drybulkdash-ffa-history[b-kwgbwyjx5u] { gap:6px; min-height:0; min-width:0; height:100%; overflow:auto; font-variant-numeric:tabular-nums; }
.drybulkdash-ffa-history-swap[b-kwgbwyjx5u] { 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:22px; } /* layout-lint: allow inside card: swap button */
.drybulkdash-ffa-history-pickers[b-kwgbwyjx5u] { display:flex; gap:8px; align-items:stretch; }
.drybulkdash-ffa-history-leg[b-kwgbwyjx5u] { flex:1; min-width:0; margin:0; padding:2px 6px 6px; border:1px solid var(--drybulkdash-divider); background:var(--drybulkdash-surface); }
/* Floated full width: a fieldset otherwise draws its legend on the top border. */
.drybulkdash-ffa-history-leg legend[b-kwgbwyjx5u] { float:left; width:100%; padding:2px 0 3px; font-size:var(--ssy-fs-small); color:var(--drybulkdash-text-muted); margin:0; }
.drybulkdash-ffa-history-leg legend strong[b-kwgbwyjx5u] { color:var(--drybulkdash-blue); margin-left:8px; }
.drybulkdash-ffa-history-leg-controls[b-kwgbwyjx5u] { clear:both; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.drybulkdash-ffa-history-swap[b-kwgbwyjx5u] { align-self:center; white-space:nowrap; }
.drybulkdash-ffa-history-main[b-kwgbwyjx5u],.drybulkdash-ffa-history-support[b-kwgbwyjx5u] { min-width:0; min-height:0; display:flex; }
.drybulkdash-ffa-history-main[b-kwgbwyjx5u]  .ssy-card,.drybulkdash-ffa-history-support[b-kwgbwyjx5u]  .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-kwgbwyjx5u]  .ssy-chart-card-slot,.drybulkdash-ffa-history-support[b-kwgbwyjx5u]  .ssy-chart-card-slot { flex:1; --ssy-chart-slot-min-h:0px; }
.drybulkdash-ffa-history-status[b-kwgbwyjx5u] { font-size:var(--ssy-fs-small); color:var(--drybulkdash-text-muted); }
.drybulkdash-ffa-history button:focus-visible[b-kwgbwyjx5u],.drybulkdash-ffa-history select:focus-visible[b-kwgbwyjx5u],.drybulkdash-ffa-history input:focus-visible[b-kwgbwyjx5u] { outline:2px solid var(--drybulkdash-blue); outline-offset:2px; }
@media(max-width:1200px) { .drybulkdash-ffa-history-pickers[b-kwgbwyjx5u] { flex-wrap:wrap; } .drybulkdash-ffa-history-leg[b-kwgbwyjx5u] { flex-basis:45%; } } /* layout-lint: allow inside card: history pickers + legs wrap */
@media(max-width:850px) { .drybulkdash-ffa-history-leg[b-kwgbwyjx5u] { flex-basis:100%; } } /* layout-lint: allow inside card: history leg pickers */
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_990_Ffa_Voyage.razor.rz.scp.css */
/* Shared fields own their input appearance. These rules place the form groups and
   nested field frames in the voyage layout. */
.cape-voyage[b-fbmwkakkil] { gap:10px; min-height:0; overflow:hidden; color:var(--ssy-dash-text); font-size:var(--ssy-fs-base); container:capevoyage / inline-size; }
/* The tab has a fixed height and no scrolling ancestor, so the pane is laid out to FIT it: the
   form fills the leftover height and hands it to the body grid, which divides it into rows. Any
   panel that still cannot fit its own contents scrolls inside itself rather than pushing the
   page - which it could not do anyway, since the FFA workspace clips instead of scrolling. */
.cape-voyage .cape-voyage-form[b-fbmwkakkil] { flex:1 1 auto; min-height:0; }
.cape-voyage .cape-voyage-actions[b-fbmwkakkil] { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cape-voyage .cape-comparison-actions[b-fbmwkakkil] { margin-bottom:6px; }
.cape-voyage .cape-voyage-form[b-fbmwkakkil] { border:0; padding:0; margin:0; min-width:0; display:grid; gap:10px; }
.cape-voyage button:disabled[b-fbmwkakkil] { opacity:.5; cursor:default; }
.cape-voyage [role=alert][b-fbmwkakkil] { color:var(--ssy-dash-warn); }
.cape-voyage .cape-voyage-hint[b-fbmwkakkil] { margin:0; padding:4px 0 8px; color:var(--ssy-dash-text-muted); font-size:var(--ssy-fs-small); }

.cape-voyage .cape-voyage-actions[b-fbmwkakkil]  select, .cape-voyage .cape-voyage-actions select[b-fbmwkakkil] { width:auto; max-width:280px; }

/* The data menu: three reloads and how stale each source is, behind one affordance. */
.cape-voyage .cape-data-menu-body[b-fbmwkakkil] { display:grid; gap:4px; }
.cape-voyage .cape-data-menu-body[b-fbmwkakkil]  .ssy-button { width:100%; }
.cape-voyage .cape-data-menu-body[b-fbmwkakkil]  .ssy-button__label { display:flex; justify-content:space-between; align-items:baseline; gap:12px; width:100%; }
.cape-voyage .cape-data-menu-body small[b-fbmwkakkil] { color:var(--ssy-dash-text-muted); font-weight:400; }

/* THE TICKET: one line, wraps only when it truly has to. Ends in Calculate. */
.cape-voyage .cape-voyage-ticket[b-fbmwkakkil] { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 10px; padding:9px 10px; border:1px solid var(--ssy-dash-border); border-radius:3px; background:var(--ssy-dash-row-active); }
/* Ports and ship are recognised, not read - they need enough width to identify a name and no
   more. Letting them grow unbounded pushed the freight box, the one field typed every single
   time, a thousand pixels away from its own label. */
.cape-voyage[b-fbmwkakkil]  .cape-t-port { flex:0 1 190px; min-width:120px; }
.cape-voyage[b-fbmwkakkil]  .cape-t-ship { flex:0 1 210px; min-width:130px; }
.cape-voyage[b-fbmwkakkil]  .cape-t-money { flex:0 1 120px; min-width:95px; }
.cape-voyage[b-fbmwkakkil]  .cape-t-bid { margin-left:auto; }
.cape-voyage[b-fbmwkakkil]  .cape-t-bid .ssy-field__box { border-left:3px solid var(--ssy-dash-accent); }
.cape-voyage[b-fbmwkakkil]  .cape-t-offer .ssy-field__box { border-left:3px solid var(--ssy-dash-up, var(--ssy-colour-palette-teal-green)); }
.cape-voyage[b-fbmwkakkil]  .cape-t-date { flex:0 1 145px; min-width:135px; }
.cape-voyage .cape-t-arrow[b-fbmwkakkil] { align-self:center; padding-bottom:6px; color:var(--ssy-dash-text-muted); }
/* The number typed on every calculation should not look like the stowage factor. */
.cape-voyage[b-fbmwkakkil]  .cape-t-money input { font-size:var(--ssy-fs-lg); font-weight:700; }
.cape-voyage[b-fbmwkakkil]  .cape-t-go { align-self:flex-end; }

/* Below the ticket: a rail that answers down the left, and every assumption group placed on a
   three-by-three that divides the remaining height. Nothing is collapsed, because everything
   fits, and nothing scrolls except a panel that overflows its own cell. */
.cape-voyage .cape-voyage-body[b-fbmwkakkil] { min-height:0; }
.cape-voyage .cape-rail[b-fbmwkakkil] { gap:10px; min-width:0; min-height:0; }
.cape-voyage .cape-voyage-panels[b-fbmwkakkil] { gap:10px; min-width:0; min-height:0; }
.cape-voyage .cape-rail-block[b-fbmwkakkil] { padding:9px 10px; border:1px solid var(--ssy-dash-border); border-radius:3px; background:var(--ssy-dash-surface); min-height:0; overflow:auto; }
.cape-voyage .cape-panel-head[b-fbmwkakkil] { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; padding:6px 0 3px; color:var(--ssy-dash-brand); font-size:var(--ssy-fs-md); }
.cape-voyage .cape-panel-head span[b-fbmwkakkil] { color:var(--ssy-dash-text-muted); font-size:var(--ssy-fs-small); font-weight:400; }
/* THE RESET IS AN ICON IN THE HEADER CORNER, not a bar of its own at the foot of the panel. Four
   panels each ended in a full-width button, and on Port terms it held a whole grid column open by
   itself - between them a row of height on a pane that has none, spent on a chore nobody performs
   twice. In the header corner it costs nothing: the row already exists, and what is being reset is
   the panel it sits on, so the glyph needs no word beside it. The full phrase is its tooltip and
   its aria-label, which is also the only thing a screen reader gets. */
.cape-voyage .cape-panel-head .cape-panel-reset[b-fbmwkakkil] { margin-left:auto; align-self:center; display:inline-flex; padding:2px; border:0; border-radius:3px; background:none; color:var(--ssy-dash-text-muted); font-size:var(--ssy-fs-md); line-height:1; cursor:pointer; }
.cape-voyage .cape-panel-head .cape-panel-reset:hover:not(:disabled)[b-fbmwkakkil] { color:var(--ssy-dash-accent); background:var(--ssy-dash-row-active); }
.cape-voyage .cape-panel-head .cape-panel-reset:disabled[b-fbmwkakkil] { opacity:.3; cursor:default; }

/* THE ANSWER: two numbers, then a context line. */
.cape-voyage .cape-voyage-answer[b-fbmwkakkil] { padding:10px; border:1px solid var(--ssy-dash-border); border-radius:3px; background:var(--ssy-dash-surface); }
.cape-voyage .cape-voyage-answer[data-state=ready][b-fbmwkakkil] { border-color:var(--ssy-dash-accent); }
.cape-voyage .cape-voyage-answer[data-state=stale][b-fbmwkakkil] { border-style:dashed; }
.cape-voyage .cape-voyage-answer[data-state=stale] .cape-answer-value[b-fbmwkakkil] { opacity:.45; }
.cape-voyage .cape-answer-stale[b-fbmwkakkil] { color:var(--ssy-dash-warn); font-weight:700; }
/* Bid | Offer | Curve. Freight on top, TCE as the big number, vs-curve under it. */
.cape-voyage .cape-answer-cards[b-fbmwkakkil] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } /* layout-lint: allow internal cells */
.cape-voyage .cape-card[b-fbmwkakkil] { padding:6px 8px; border:1px solid var(--ssy-dash-border-soft); border-left-width:4px; border-radius:3px; min-width:0; }
.cape-voyage .cape-card-bid[b-fbmwkakkil] { border-left-color:var(--ssy-dash-accent); }
.cape-voyage .cape-card-offer[b-fbmwkakkil] { border-left-color:var(--ssy-dash-up, var(--ssy-colour-palette-teal-green)); }
.cape-voyage .cape-card-curve[b-fbmwkakkil] { border-left-color:var(--ssy-dash-text-muted); background:var(--ssy-dash-row-active); }
.cape-voyage .cape-card-k[b-fbmwkakkil] { color:var(--ssy-dash-text-muted); font-size:var(--ssy-fs-tiny); font-weight:700; letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cape-voyage .cape-card-f[b-fbmwkakkil] { font-size:var(--ssy-fs-lg); font-weight:700; color:var(--ssy-dash-brand); font-variant-numeric:tabular-nums; }
.cape-voyage .cape-card small[b-fbmwkakkil] { font-size:var(--ssy-fs-tiny); font-weight:400; color:var(--ssy-dash-text-muted); }
.cape-voyage .cape-card-vs[b-fbmwkakkil] { font-size:var(--ssy-fs-small); font-weight:700; color:var(--ssy-dash-text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cape-voyage .cape-answer-facts[b-fbmwkakkil] { display:flex; flex-wrap:wrap; gap:2px 12px; margin-top:6px; padding-top:6px; border-top:1px solid var(--ssy-dash-border); font-size:var(--ssy-fs-small); color:var(--ssy-dash-brand); font-variant-numeric:tabular-nums; }
.cape-voyage .cape-answer-facts b[b-fbmwkakkil] { color:var(--ssy-dash-text-muted); font-weight:700; }
.cape-voyage .cape-rail-head[b-fbmwkakkil] { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cape-voyage .cape-answer-value[b-fbmwkakkil] { font-size:var(--ssy-fs-display-lg); font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--ssy-dash-brand); }
.cape-voyage .cape-answer-label[b-fbmwkakkil] { padding-top:2px; color:var(--ssy-dash-text-muted); font-size:var(--ssy-fs-tiny); letter-spacing:.05em; }
.cape-voyage .cape-answer-void[b-fbmwkakkil] { color:var(--ssy-dash-text-muted); font-weight:700; }
.cape-voyage .cape-up[b-fbmwkakkil] { color:var(--ssy-dash-up, var(--ssy-colour-palette-teal-green)); }
.cape-voyage .cape-down[b-fbmwkakkil] { color:var(--ssy-dash-warn, var(--ssy-colour-palette-crimson-red)); }
/* One fact per line in a narrow rail; a wrapping inline run is unreadable at this width. */
.cape-voyage .cape-answer-context[b-fbmwkakkil] { display:grid; gap:1px; padding-top:4px; color:var(--ssy-dash-text-muted); font-size:var(--ssy-fs-small); }
.cape-voyage .cape-answer-context span[b-fbmwkakkil] { font-variant-numeric:tabular-nums; }
.cape-voyage .cape-answer-log[b-fbmwkakkil] { color:var(--ssy-dash-text-dim); font-weight:700; }
/* Notes qualify the result; they are not failures. Errors are what stop a calculation. */
.cape-voyage .cape-answer-note[b-fbmwkakkil] { color:var(--ssy-dash-text-dim); font-style:italic; }
.cape-voyage .cape-answer-errors[b-fbmwkakkil] { display:grid; gap:2px; padding-top:8px; font-size:var(--ssy-fs-small); }

.cape-voyage .cape-panel[b-fbmwkakkil] { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:auto; border:1px solid var(--ssy-dash-border-soft); border-radius:3px; padding:0 8px 4px; background:var(--ssy-dash-surface); }
.cape-voyage .cape-voyage-results[b-fbmwkakkil] { min-width:0; display:grid; gap:10px; align-content:start; padding-top:10px; }
.cape-voyage .cape-voyage-inputs[b-fbmwkakkil] { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,86px),1fr)); gap:4px 8px; padding:3px 0; } /* layout-lint: allow inside card: voyage form inputs grid */
/* Port terms as stacks - load, discharge, cargo - the way the terms are quoted. Capped: a DA box
   gains nothing from being four hundred pixels wide. */
.cape-voyage .cape-voyage-legs[b-fbmwkakkil] { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; padding:3px 0; } /* layout-lint: allow inside card: voyage legs grid */
/* One row per leg, the way the terms are quoted: load reads across, discharge reads across under
   it. As three vertical stacks the row's height came off the two longest legs while the cargo
   stack sat almost empty beside them. */
.cape-voyage .cape-leg[b-fbmwkakkil] { display:grid; gap:2px; min-width:0; }
.cape-voyage .cape-leg-row[b-fbmwkakkil] { display:grid; grid-template-columns:1.6fr .7fr 1fr .9fr; align-items:end; gap:6px; } /* layout-lint: allow inside card: leg row inputs */
/* The rate and its unit are one control; 1.6fr/1fr across a full-row panel put 200px between the
   number and the units it is quoted in. */
.cape-voyage .cape-voyage-porttime[b-fbmwkakkil] { display:grid; grid-template-columns:minmax(0,1fr) 62px; gap:3px; align-items:end; } /* layout-lint: allow inside card: port time input */
/* The unit select needs no caption: its own options read t/day and days. */
.cape-voyage .cape-unit[b-fbmwkakkil] { gap:0; }
.cape-voyage .cape-voyage-route[b-fbmwkakkil] { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; padding:3px 0; font-size:var(--ssy-fs-small); color:var(--ssy-dash-text-muted); }

/* Disclosures. */
.cape-voyage details[b-fbmwkakkil] { border-bottom:0; }
.cape-voyage summary[b-fbmwkakkil] { cursor:pointer; padding:9px 0; color:var(--ssy-dash-brand); font-size:var(--ssy-fs-md); }
.cape-voyage summary span[b-fbmwkakkil] { display:block; color:var(--ssy-dash-text-muted); font-size:var(--ssy-fs-small); padding-top:2px; font-weight:400; }
.cape-voyage .cape-panel > summary[b-fbmwkakkil] { border-bottom:0; }

.cape-voyage[b-fbmwkakkil]  .cape-draft { display:grid; gap:4px; min-width:0; }
.cape-voyage[b-fbmwkakkil]  .cape-draft-detail { display:grid; gap:2px; color:var(--ssy-dash-text-muted); font-size:var(--ssy-fs-tiny); }

.cape-voyage .cape-assumption-comparison > summary[b-fbmwkakkil] { cursor:pointer; color:var(--ssy-dash-brand); }
/* The intake as one sum, each term with its own small name. */
.cape-voyage .cape-intake-line[b-fbmwkakkil] { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; padding:4px 0 0; font-size:var(--ssy-fs-small); color:var(--ssy-dash-brand); font-variant-numeric:tabular-nums; }
.cape-voyage .cape-intake-line small[b-fbmwkakkil] { color:var(--ssy-dash-text-muted); font-size:var(--ssy-fs-micro); font-weight:700; text-transform:uppercase; }

/* Narrow pane: the money fields drop their push to the right of the ticket line. The panel
   layout itself stacks through SsyGrid Stack. */
@container capevoyage (max-width:1000px) { /* layout-lint: allow inside card: ticket field spacing */
    .cape-voyage[b-fbmwkakkil]  .cape-t-money { margin-left:0; }
}

/* Cargo & draft on ONE line: two berth drafts, SF + unit, five ship particulars, the stem cap. */
.cape-voyage .cape-panel-intake .cape-voyage-inputs[b-fbmwkakkil] { grid-template-columns:1.5fr 1.5fr 1.2fr .55fr 45px .95fr .95fr .6fr .75fr .55fr .85fr; gap:4px 6px; } /* layout-lint: allow inside card: intake inputs columns */
.cape-voyage .cape-panel-intake[b-fbmwkakkil]  .cape-draft-row { grid-template-columns:minmax(0,1fr) 52px; } /* layout-lint: allow inside card: draft row columns */
.cape-voyage[b-fbmwkakkil]  .cape-t-terms { flex:0 1 150px; min-width:110px; }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_993_CapeDraft.razor.rz.scp.css */
.cape-draft[b-m3sjt993og] { position:relative; display:grid; gap:3px; min-width:0; font-size:var(--ssy-fs-small); color:var(--ssy-dash-text-dim); }
.cape-draft .cape-draft-cap[b-m3sjt993og] { font-weight:700; white-space:nowrap; }
.cape-draft[b-m3sjt993og]  .cape-draft-info { border:0; padding:0 2px; background:none; color:var(--ssy-dash-accent); cursor:pointer; line-height:1; }
.cape-draft .cape-draft-row[b-m3sjt993og] { display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:4px; } /* layout-lint: allow inside card: draft row input grid */
.cape-draft .cape-draft-pop[b-m3sjt993og] { display:grid; gap:3px; font-weight:400; font-size:var(--ssy-fs-tiny); line-height:1.4; color:var(--ssy-dash-text-muted); }
.cape-draft .cape-draft-pop strong[b-m3sjt993og] { color:var(--ssy-dash-brand); }
.cape-draft a[b-m3sjt993og] { color:var(--ssy-dash-brand); }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_A15_Transits_Methodology.razor.rz.scp.css */
.drybulkdash-transits-method-body[b-h7c0fprgqq] { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; } /* layout-lint: allow inside card: methodology text layout */
.drybulkdash-transits-method-body h3[b-h7c0fprgqq] { margin:0 0 8px; color:var(--drybulkdash-blue); font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
.drybulkdash-transits-method-body p[b-h7c0fprgqq],.drybulkdash-transits-method-body li[b-h7c0fprgqq],.drybulkdash-transits-method-body dd[b-h7c0fprgqq] { font-size:12px; line-height:1.5; }
.drybulkdash-transits-method-body p[b-h7c0fprgqq] { margin:0 0 8px; }
.drybulkdash-transits-method-body ul[b-h7c0fprgqq] { margin:0; padding-left:18px; }
.drybulkdash-transits-method-body dl[b-h7c0fprgqq] { margin:0; }
.drybulkdash-transits-method-body dl div[b-h7c0fprgqq] { display:grid; grid-template-columns:110px 1fr; gap:8px; padding:5px 0; border-bottom:1px solid var(--drybulkdash-border); } /* layout-lint: allow inside card: definition list row */
.drybulkdash-transits-method-body dt[b-h7c0fprgqq] { font-size:var(--ssy-fs-base); font-weight:700; }
.drybulkdash-transits-method-body dd[b-h7c0fprgqq] { margin:0; }
.drybulkdash-transits-method-meta[b-h7c0fprgqq] { grid-column:1 / -1; } /* layout-lint: allow inside card: methodology text layout */
.drybulkdash-transits-method-meta dl[b-h7c0fprgqq] { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; } /* layout-lint: allow inside card: meta definition list */
@media (max-width:700px) { .drybulkdash-transits-method-body[b-h7c0fprgqq] { grid-template-columns:1fr; } .drybulkdash-transits-method-meta[b-h7c0fprgqq] { grid-column:auto; } .drybulkdash-transits-method-meta dl[b-h7c0fprgqq] { grid-template-columns:1fr; } } /* layout-lint: allow inside card: methodology text layout */
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_A20_Transits_RouteVolumes.razor.rz.scp.css */
.drybulkdash-rv[b-4o1vcnhroc] {
    gap: 4px;
    min-width: 0;
}

.drybulkdash-rv .drybulkdash-rv-tablewrap[b-4o1vcnhroc] {
    height: 100%;
    min-height: 0;
}

.drybulkdash-rv .drybulkdash-rv-note[b-4o1vcnhroc] {
    color: var(--drybulkdash-text-muted);
    font-size: var(--ssy-fs-tiny);
}

.drybulkdash-rv .drybulkdash-rv-note[b-4o1vcnhroc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drybulkdash-rv[b-4o1vcnhroc]  .ssy-card {
    min-width: 0;
    min-height: 0;
}

.drybulkdash-rv[b-4o1vcnhroc]  .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-mhl1azmnke] {
    min-width: 0;
    gap: 4px;
}

.drybulkdash-br[b-mhl1azmnke]  .ssy-card {
    min-width: 0;
    min-height: 0;
}

.drybulkdash-br[b-mhl1azmnke]  .drybulkdash-br-kpi .ssy-kpi-strip {
    height: 100%;
}

.drybulkdash-br[b-mhl1azmnke]  .drybulkdash-br-kpi .ssy-kpi-tile {
    border-top: 2px solid transparent;
}

.drybulkdash-br[b-mhl1azmnke]  .drybulkdash-br-kpi .ssy-kpi-tile:nth-child(1),
.drybulkdash-br[b-mhl1azmnke]  .drybulkdash-br-kpi .ssy-kpi-tile:nth-child(2) {
    border-top-color: var(--drybulkdash-accent);
}

.drybulkdash-br[b-mhl1azmnke]  .drybulkdash-br-kpi .ssy-kpi-tile:nth-child(3),
.drybulkdash-br[b-mhl1azmnke]  .drybulkdash-br-kpi .ssy-kpi-tile:nth-child(4) {
    border-top-color: var(--drybulkdash-blue);
}
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_B00_Freight.razor.rz.scp.css */
/* Root layout (command bar + workspace rows) comes from ssy-fit-grid + --ssy-fit-rows. */
.drybulkdash-freight[b-51ctyziipt] { min-height:0; gap:4px; font-variant-numeric:tabular-nums; color:var(--drybulkdash-text); }
.drybulkdash-freight .drybulkdash-freight-workspace[b-51ctyziipt] { min-width:0; min-height:0; display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr); overflow:hidden; } /* layout-lint: allow inside card: the one workspace fills the tab */
/* The grid is a long table; it scrolls inside the workspace rather than pushing the page. */
.drybulkdash-freight-mode-diff .drybulkdash-freight-workspace[b-51ctyziipt] { overflow:auto; scrollbar-gutter:stable; }
/* TCE under the print, same weight as the FFA slot delta. */
.drybulkdash-freight[b-51ctyziipt]  .ssy-cmdbar-slot small { opacity:.7; font-size:.85em; }
/* The track is pinned to the box at every width: an implicit column sized to the differentials
   table's min-content (840px), so the table's own wrapper never had to scroll. */
.drybulkdash-freight .drybulkdash-freight-workspace[b-51ctyziipt]  > * { min-width:0; }
/* /Components/Pages/Bulkers/DryBulkDashboard/DryBulkDashboard_C00_Usda.razor.rz.scp.css */
.usda-group-form-wrap[b-gwjv65chid]  .usda-group-name {
    flex: 0 1 210px;
    min-width: 170px;
}

.usda-group-form-wrap[b-gwjv65chid]  .usda-group-members {
    flex: 0 1 520px;
    min-width: min(100%, 280px);
    max-width: min(100%, 620px);
}

.usda-group-form-wrap[b-gwjv65chid]  .usda-group-name .ssy-field__box,
.usda-group-form-wrap[b-gwjv65chid]  .usda-group-members .ssy-field__box {
    flex: 1 1 auto;
}

.usda-group-form-wrap[b-gwjv65chid]  .usda-group-members .ssy-field__box input {
    width: 100%;
}

.usda-group-list[b-gwjv65chid] {
    margin-top: 4px;
}

.usda-selection-summary-label[b-gwjv65chid] {
    align-self: center;
    color: var(--ssy-dash-text-muted, #798E98);
    font-size: var(--ssy-fs-micro, 8px);
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}
/* /Components/Pages/Bulkers/MacroMonthly/MacroMonthly.razor.rz.scp.css */
/* Macro Monthly. The palette, card padding and page geometry come from the shared
   ssy-dash-theme class on each wrapper; the vessel-size control is SsySegmentControl. */

.macromonthly-selector[b-1tp22syryy] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
}

/* Flow tabs: a section per report block, titled like a deck slide. */
.macromonthly-dash-wrap[b-1tp22syryy]  .macromonthly-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 8px;
}

.macromonthly-dash-wrap[b-1tp22syryy]  .macromonthly-section-title {
    margin: 0;
    color: var(--ssy-dash-brand);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

/* Small print sits tight under the charts, flush with the cards. */
.macromonthly-dash-wrap[b-1tp22syryy]  .macromonthly-section > .ssy-source-note {
    margin: 0;
    padding: 0 2px;
}

/* Print view (Export PDF): the deck under a toolbar. */
.macromonthly-print[b-1tp22syryy] {
    min-width: 13.333in;
}

.macromonthly-print-bar[b-1tp22syryy] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--ssy-dash-surface);
    border-bottom: 1px solid var(--ssy-dash-border);
}

.macromonthly-print-bar span[b-1tp22syryy] {
    flex: 1 1 auto;
}

@media print {
    .macromonthly-print-bar[b-1tp22syryy] {
        display: none;
    }
}
/* /Components/Pages/Bulkers/MacroMonthly/MacroMonthly_300_Congestion.razor.rz.scp.css */
.macromonthly-congestion[b-bcu68n0m05] {
    gap: 6px;
}
/* /Components/Pages/Bulkers/MacroMonthly/MacroMonthly_900_Deck.razor.rz.scp.css */
/* The PDF deck. On screen the pages sit on a grey desk with a gap and shadow, at print size so
   charts lay out once at the size they print; in print they run edge to edge, one per sheet.
   Cover and back cover follow the master's title and "Thank You" layouts (positions in inches). */
.macromonthly-deck[b-9o9zl4fru0] {
    counter-reset: macromonthly-page;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25in;
    padding: 0.25in 0;
    background: #E6E9EC;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.macromonthly-deck > *[b-9o9zl4fru0],
.macromonthly-deck[b-9o9zl4fru0]  .macromonthly-deck-page {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.macromonthly-deck-cover[b-9o9zl4fru0],
.macromonthly-deck-back[b-9o9zl4fru0] {
    position: relative;
    flex: 0 0 auto;
    width: 13.333in;
    height: 7.5in;
    overflow: hidden;
    break-after: page;
    break-inside: avoid;
}

/* The back cover is the last sheet: a break after it printed an empty page. */
.macromonthly-deck-back[b-9o9zl4fru0] {
    break-after: auto;
}

/* Cover: page 1 of the numbering, though it shows no number. */
.macromonthly-deck-cover[b-9o9zl4fru0] {
    counter-increment: macromonthly-page;
    background: var(--ssy-colour-main-pure-white);
}

.macromonthly-deck-cover-wave[b-9o9zl4fru0] {
    position: absolute;
    left: 0;
    top: 0.85in;
    width: 13.333in;
    height: 3.95in;
}

.macromonthly-deck-cover-logo[b-9o9zl4fru0] {
    position: absolute;
    left: 0.36in;
    top: 0.358in;
    width: 1.498in;
    height: 1.03in;
}

.macromonthly-deck-cover-title[b-9o9zl4fru0] {
    position: absolute;
    left: 0.36in;
    top: 4.85in;
    margin: 0;
    color: var(--ssy-colour-main-simpson-blue);
    font-family: "Times New Roman", Times, serif;
    font-size: 44pt;
    font-weight: 400;
    line-height: 1;
}

.macromonthly-deck-cover-date[b-9o9zl4fru0] {
    position: absolute;
    left: 0.36in;
    top: 6.896in;
    margin: 0;
    color: var(--ssy-colour-main-bright-blue);
    font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;
    font-size: 12pt;
}

/* Disclaimer: a thin blue box, centred, Arial as in the deck. */
.macromonthly-deck-disclaimer[b-9o9zl4fru0] {
    width: 6in;
    margin: -0.2in auto 0;
    padding: 0.15in 0.2in;
    border: 1px solid var(--ssy-colour-main-bright-blue);
    color: var(--ssy-colour-main-pure-black);
    font-family: Arial, sans-serif;
    font-size: 14pt;
    line-height: 1.35;
    text-align: justify;
}

.macromonthly-deck-disclaimer p[b-9o9zl4fru0] {
    margin: 0 0 0.15in;
}

.macromonthly-deck-disclaimer p:first-child[b-9o9zl4fru0] {
    margin: 0;
    font-family: Calibri, Arial, sans-serif;
    font-size: 12pt;
}

.macromonthly-deck-disclaimer-terms[b-9o9zl4fru0] {
    font-size: 12.5pt;
    text-align: left;
}

/* Back cover: navy, white logo and tagline centred. */
.macromonthly-deck-back[b-9o9zl4fru0] {
    background: var(--ssy-colour-main-simpson-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3in;
}

.macromonthly-deck-back-logo[b-9o9zl4fru0] {
    width: 2.1in;
    margin-top: -0.4in;
}

.macromonthly-deck-back-tagline[b-9o9zl4fru0] {
    margin: 0;
    color: var(--ssy-colour-main-pure-white);
    font-family: "Times New Roman", Times, serif;
    font-size: 24pt;
}

@media print {
    .macromonthly-deck[b-9o9zl4fru0] {
        display: block;
        padding: 0;
        background: none;
    }

    .macromonthly-deck > *[b-9o9zl4fru0],
    .macromonthly-deck[b-9o9zl4fru0]  .macromonthly-deck-page {
        box-shadow: none;
    }

    /* A chart under the mouse when printing kept its hover marker (a fat dot), tooltip and
       faded neighbours; none of that belongs on paper. */
    .macromonthly-deck[b-9o9zl4fru0]  .highcharts-point-hover,
    .macromonthly-deck[b-9o9zl4fru0]  .highcharts-halo,
    .macromonthly-deck[b-9o9zl4fru0]  .highcharts-tooltip,
    .macromonthly-deck[b-9o9zl4fru0]  .highcharts-crosshair {
        display: none;
    }

    .macromonthly-deck[b-9o9zl4fru0]  .highcharts-series-inactive {
        opacity: 1 !important;
    }
}
/* /Components/Pages/Bulkers/MacroMonthly/MacroMonthly_Slide.razor.rz.scp.css */
/* Deck page (PDF view): the Tata Monthly slide master, 13.333 x 7.5 in. Positions are the
   master's, in inches; fonts are its Times New Roman / Franklin Gothic, colours its navy
   (#000061), blue (#0087CB) and source grey (#898989). Pages number themselves with the
   macromonthly-page counter (reset on the deck wrapper in MacroMonthly_900_Deck). */
.macromonthly-deck-page[b-ecwwb16qpg] {
    position: relative;
    width: 13.333in;
    height: 7.5in;
    overflow: hidden;
    background: var(--ssy-colour-main-pure-white);
    color: var(--ssy-colour-main-pure-black);
    font-family: "Franklin Gothic Book", "Franklin Gothic", "Libre Franklin", Arial, sans-serif;
    counter-increment: macromonthly-page;
    break-after: page;
    break-inside: avoid;
}

.macromonthly-deck-title[b-ecwwb16qpg] {
    position: absolute;
    left: 0.354in;
    top: 0.36in;
    right: 1.6in;
    margin: 0;
    color: var(--ssy-colour-main-simpson-blue);
    font-family: "Times New Roman", Times, serif;
    font-size: 36pt;
    font-weight: 400;
    line-height: 1.1;
}

.macromonthly-deck-subtitle[b-ecwwb16qpg] {
    position: absolute;
    left: 0.354in;
    top: 1.08in;
    margin: 0;
    color: var(--ssy-colour-main-bright-blue);
    font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;
    font-size: 16pt;
}

.macromonthly-deck-logo[b-ecwwb16qpg] {
    position: absolute;
    left: 12.008in;
    top: 0.374in;
    width: 0.963in;
    height: 0.662in;
}

/* Chart area: from under the title to above the source line. */
.macromonthly-deck-body[b-ecwwb16qpg] {
    position: absolute;
    left: 0.353in;
    right: 0.35in;
    top: 1.45in;
    /* Room for a two-line source note above the footer. */
    bottom: 0.86in;
}

.macromonthly-deck-body.has-subtitle[b-ecwwb16qpg] {
    top: 1.55in;
}

/* Anchored by its bottom (where the master's single line ends), so a long note wraps upward
   into the chart margin instead of down over the footer rule. */
.macromonthly-deck-source[b-ecwwb16qpg] {
    position: absolute;
    left: 0.353in;
    right: 0.35in;
    bottom: 0.52in;
    margin: 0;
    line-height: 1.25;
    color: #898989;
    font-size: 8pt;
}

.macromonthly-deck-note[b-ecwwb16qpg] {
    margin-left: 1.5em;
}

/* Thin navy rules: 3.01 in on the left, 0.87 in on the right, at 7.04 in. */
.macromonthly-deck-footer[b-ecwwb16qpg] {
    position: absolute;
    left: 0.353in;
    right: 0.333in;
    top: 7.037in;
    height: 0.236in;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ssy-colour-main-simpson-blue);
    font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;
    font-size: 8pt;
    border-top: 0;
}

.macromonthly-deck-footer[b-ecwwb16qpg]::before,
.macromonthly-deck-footer[b-ecwwb16qpg]::after {
    content: "";
    position: absolute;
    top: 0;
    border-top: 0.25pt solid var(--ssy-colour-main-simpson-blue);
}

.macromonthly-deck-footer[b-ecwwb16qpg]::before {
    left: 0;
    width: 3.012in;
}

.macromonthly-deck-footer[b-ecwwb16qpg]::after {
    right: 0;
    width: 0.865in;
}

.macromonthly-deck-pageno[b-ecwwb16qpg]::after {
    content: counter(macromonthly-page);
}

/* --- the tab's own content, restyled as deck charts --- */

/* The grid fills the chart area: Cols columns, rows share the height. */
.macromonthly-deck-body[b-ecwwb16qpg]  .ssy-grid {
    height: 100%;
    grid-template-columns: repeat(var(--macromonthly-deck-cols, 2), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 0.12in 0.4in;
}

/* Cards lose their panel: a navy chart title over a chart that takes the rest of the cell. */
.macromonthly-deck-body[b-ecwwb16qpg]  .ssy-card {
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.macromonthly-deck-body[b-ecwwb16qpg]  .ssy-card-head {
    margin: 0 0 0.06in;
}

.macromonthly-deck-body[b-ecwwb16qpg]  .ssy-card-title {
    color: var(--ssy-colour-main-simpson-blue);
    font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;
    font-size: 12pt;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* The deck's chart titles stand alone: no description, period pill or expand button. */
.macromonthly-deck-body[b-ecwwb16qpg]  .ssy-card-desc,
.macromonthly-deck-body[b-ecwwb16qpg]  .ssy-card-period,
.macromonthly-deck-body[b-ecwwb16qpg]  .ssy-chart-card-actions {
    display: none;
}

.macromonthly-deck-body[b-ecwwb16qpg]  .ssy-chart-card-slot {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
}

/* Highcharts sets its font on the root svg inline; the deck's charts are in Franklin Gothic
   Book, so this one rule needs !important to win over that inline style. */
.macromonthly-deck-body[b-ecwwb16qpg]  .highcharts-root {
    font-family: "Franklin Gothic Book", "Franklin Gothic", "Libre Franklin", Arial, sans-serif !important;
}
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_010_Main.razor.rz.scp.css */
/* Period Calculator page.  Brand colours come from the --ssy-colour-* variables in ssyglobal.css, aliased here
   so the sub-components (config popup, forward curve) inherit them.  Stripe is the table stripe the page already used. */
.periodcalculator-pagelayout[b-wx2bzn3gb4] {
    --periodcalculator-navy: var(--ssy-colour-main-simpson-blue);
    --periodcalculator-blue: var(--ssy-colour-main-crystal-blue);
    --periodcalculator-border: var(--ssy-colour-palette-light-bluegray);
    --periodcalculator-stripe: #EEF3FA;
    --periodcalculator-muted: var(--ssy-colour-palette-slate-gray);
    /* The card that owns the open sidebar.  Bright green on purpose: the palette's teal-green is too close to the card's blue */
    --periodcalculator-active: #00C853;
    /* Card size, and the card sidebar (PeriodCalculator_120).  Sidebar top = height of the Navigator top nav (MainLayout .body-main margin-top).
       --periodcalculator-shift (px, unitless) is set inline by the page when the sidebar opens. */
    --periodcalculator-card-width: 23rem;
    --periodcalculator-card-gap: 1rem;
    --periodcalculator-sidebar-width: 24rem;   /* tablets; see the screen-size steps further down */
    --periodcalculator-sidebar-top: 51px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--periodcalculator-navy);
}

/* Shared input look for this page and every child component (port select, popup, forward curve).
   One height everywhere: the forward curve's Mths box sets it. */
.periodcalculator-pagelayout[b-wx2bzn3gb4]  .periodcalculator-input {
    width: 100%;
    height: 1.4rem;
    padding: 0 0.3rem;
    color: var(--periodcalculator-navy);
    border: 1px solid var(--periodcalculator-border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.8rem;
}

    .periodcalculator-pagelayout[b-wx2bzn3gb4]  .periodcalculator-input:focus {
        outline: none;
        border-color: var(--periodcalculator-blue);
        box-shadow: 0 0 0 2px rgba(0, 157, 201, 0.2);
    }

.periodcalculator-pagelayout[b-wx2bzn3gb4]  input[type="number"].periodcalculator-input {
    text-align: right;
}

/* Toolbar */
.periodcalculator-pagelayout .periodcalculator-toolbar[b-wx2bzn3gb4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--periodcalculator-border);
}

    /* overflow visible: .ssy-radio-main's overflow:auto showed a scrollbar for the last tab's 1px border
       (labels use margin-right: -1px).  Tabs wrap instead of scrolling when space runs out. */
    .periodcalculator-pagelayout .periodcalculator-toolbar .ssy-radio-main[b-wx2bzn3gb4] {
        margin: 0;
        overflow: visible;
    }

.periodcalculator-pagelayout .periodcalculator-toolbar-tabs[b-wx2bzn3gb4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Vessel name quick add: same height as the tabs and the Add vessel button */
.periodcalculator-pagelayout .periodcalculator-toolbar-tabs .periodcalculator-quickadd[b-wx2bzn3gb4] {
    width: 13rem;
    height: 32px;
    font-size: 14px;
}

/* Same height as the .ssy-radio-main tabs beside it (14px text, line-height 1, 8px padding), wider padding */
.periodcalculator-pagelayout .periodcalculator-addvessel[b-wx2bzn3gb4] {
    padding: 8px 1.5rem;
    font-size: 14px;
    line-height: 1;
}

.periodcalculator-pagelayout .periodcalculator-live[b-wx2bzn3gb4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--periodcalculator-muted);
}

.periodcalculator-pagelayout .periodcalculator-live-dot[b-wx2bzn3gb4] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--ssy-colour-palette-teal-green);
}

.periodcalculator-pagelayout .periodcalculator-empty[b-wx2bzn3gb4] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--periodcalculator-muted);
    border: 1px dashed var(--periodcalculator-border);
    border-radius: 8px;
}

/* Card grid: as many 23rem cards as fit (the forward curve needs the width; "Premium %" must not wrap) */
.periodcalculator-pagelayout .periodcalculator-grid[b-wx2bzn3gb4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--periodcalculator-card-width), 100%), 1fr));   /* min(): one full-width card on a phone */
    gap: var(--periodcalculator-card-gap);
}

.periodcalculator-pagelayout .periodcalculator-card[b-wx2bzn3gb4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background-color: white;
    border: 1px solid var(--periodcalculator-border);
    border-top: 3px solid var(--periodcalculator-blue);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 97, 0.08);
}

    /* Owns the open sidebar: green all round (the 1px ring makes the sides as easy to see as the 3px top) */
    .periodcalculator-pagelayout .periodcalculator-card.periodcalculator-card-active[b-wx2bzn3gb4] {
        border-color: var(--periodcalculator-active);
        box-shadow: 0 0 0 1px var(--periodcalculator-active), 0 1px 3px rgba(0, 0, 97, 0.08);
    }

/* Row 1: name | icons.  Row 2: subtitle across the full width.  minmax(0, ...) lets the long text shrink and ellipsis */
.periodcalculator-pagelayout .periodcalculator-card-header[b-wx2bzn3gb4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
}

.periodcalculator-pagelayout .periodcalculator-card-title[b-wx2bzn3gb4],
.periodcalculator-pagelayout .periodcalculator-card-subtitle[b-wx2bzn3gb4] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.periodcalculator-pagelayout .periodcalculator-card-title[b-wx2bzn3gb4] {
    font-size: 1.15rem;
    font-weight: 600;
}

/* DWT · Built · yard under the name */
.periodcalculator-pagelayout .periodcalculator-card-subtitle[b-wx2bzn3gb4] {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: var(--periodcalculator-muted);
}

/* Scrubber line: on / off switch then the split.  Light blue while the scrubber is in use */
.periodcalculator-pagelayout .periodcalculator-card-scrubber[b-wx2bzn3gb4] {
    margin: 0;
    cursor: pointer;
}

    .periodcalculator-pagelayout .periodcalculator-card-scrubber input[b-wx2bzn3gb4] {
        margin: 0 0.35rem 0 0;
        font-size: 0.9rem;   /* the switch is sized in em */
    }

.periodcalculator-pagelayout .periodcalculator-card-scrubber.periodcalculator-card-scrubber-on[b-wx2bzn3gb4] {
    color: var(--periodcalculator-blue);
}

/* Star | cog | cross */
.periodcalculator-pagelayout .periodcalculator-card-icons[b-wx2bzn3gb4] {
    display: flex;
    flex-shrink: 0;
}

/* ::deep so the sidebar's close button gets the same look */
.periodcalculator-pagelayout[b-wx2bzn3gb4]  .periodcalculator-iconbtn {
    display: inline-flex;
    padding: 0.25rem;
    border-radius: 4px;
    color: var(--periodcalculator-muted);
}

    .periodcalculator-pagelayout[b-wx2bzn3gb4]  .periodcalculator-iconbtn:hover {
        color: var(--periodcalculator-navy);
        background-color: var(--periodcalculator-stripe);
    }

.periodcalculator-pagelayout .periodcalculator-card-fields[b-wx2bzn3gb4] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.75rem;
    align-items: center;
    font-size: 0.85rem;
}

/* BOD: two or three boxes (IFO with the scrubber in use) sharing the field column */
.periodcalculator-pagelayout .periodcalculator-card-bod[b-wx2bzn3gb4] {
    display: flex;
    gap: 0.4rem;
}

/* Labels on one line ("Scrubber chrt %"): the label column fits its text and the grid takes half the card's side padding */
.periodcalculator-pagelayout .periodcalculator-card-prices[b-wx2bzn3gb4] {
    display: grid;
    grid-template-columns: max-content repeat(3, minmax(0, 1fr));
    margin-inline: -0.5rem;
    white-space: nowrap;
    gap: 0.3rem;
    align-items: center;
    font-size: 0.85rem;
}

.periodcalculator-pagelayout .periodcalculator-colhead[b-wx2bzn3gb4] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--periodcalculator-muted);
    text-transform: uppercase;
}

/* Value $/day (read only, follows the curve).  Padding + 1px matches the inputs either side so the numbers line up. */
.periodcalculator-pagelayout .periodcalculator-rate[b-wx2bzn3gb4] {
    padding: 0 calc(0.3rem + 1px);
    font-size: 0.8rem;   /* same as the inputs, so the numbers sit on one line */
    text-align: right;
}

/* Bid / Offer typed over the curve default */
/* ::deep so the sidebar's typed-over bunker prices get the same look */
.periodcalculator-pagelayout[b-wx2bzn3gb4]  .periodcalculator-input.periodcalculator-input-overridden {
    font-weight: 600;
    border-color: var(--periodcalculator-blue);
}

/* Derived premium row, highlighted as the result */
.periodcalculator-pagelayout .periodcalculator-premium[b-wx2bzn3gb4] {
    padding: 0.35rem calc(0.3rem + 1px);
    white-space: nowrap;
    background-color: var(--periodcalculator-stripe);
    font-weight: 600;
    text-align: right;
}

    .periodcalculator-pagelayout .periodcalculator-premium.periodcalculator-premium-label[b-wx2bzn3gb4] {
        text-align: left;
    }

/* Bid / Offer Index value: an input inside the highlighted cell */
.periodcalculator-pagelayout .periodcalculator-premium:has(.periodcalculator-index-input)[b-wx2bzn3gb4] {
    padding: 0.15rem 0;
}

.periodcalculator-pagelayout .periodcalculator-premium .periodcalculator-index-input[b-wx2bzn3gb4] {
    font-weight: 600;
}


/* Sidebar icon: outline when off; navy with the panel filled while its card owns the open sidebar */
.periodcalculator-pagelayout .periodcalculator-sidebarbtn[aria-pressed="true"][b-wx2bzn3gb4] {
    color: var(--periodcalculator-navy);
}

    .periodcalculator-pagelayout .periodcalculator-sidebarbtn[aria-pressed="true"] path[b-wx2bzn3gb4] {
        fill: currentColor;
    }

/* ---- Card sidebar open ----
   The sidebar slides over the page; the cards keep their size and layout.  Wide screens: if the starred card
   would be under the sidebar, every group slides left by --periodcalculator-shift px (measured by the page)
   so it is clear; cards pushed past the left edge are clipped (no horizontal scrollbar).
   Small screens: the sidebar simply covers the page at full width. */
.periodcalculator-pagelayout .periodcalculator-group[b-wx2bzn3gb4] {
    transition: translate 0.25s ease;
}

@media (min-width: 768px) {
    .periodcalculator-pagelayout.periodcalculator-sidebar-open[b-wx2bzn3gb4] {
        overflow-x: clip;
    }

        .periodcalculator-pagelayout.periodcalculator-sidebar-open .periodcalculator-group[b-wx2bzn3gb4] {
            translate: calc(-1px * var(--periodcalculator-shift, 0));
        }
}

/* Sidebar width by screen size: wide enough for the Calc results tables (route + 6 numbers), widest 32rem (512px) on
   big screens.  Phones (below 768px) get the full width (further down). */
@media (min-width: 1200px) {
    .periodcalculator-pagelayout[b-wx2bzn3gb4] {
        --periodcalculator-sidebar-width: 28rem;   /* 448px: laptops */
    }
}

@media (min-width: 1600px) {
    .periodcalculator-pagelayout[b-wx2bzn3gb4] {
        --periodcalculator-sidebar-width: 30rem;   /* 480px: 1600-1919 */
    }
}

@media (min-width: 1920px) {
    .periodcalculator-pagelayout[b-wx2bzn3gb4] {
        --periodcalculator-sidebar-width: 32rem;   /* 512px: full HD and up - the widest it gets */
    }
}

@media (max-width: 767.98px) {
    .periodcalculator-pagelayout[b-wx2bzn3gb4] {
        --periodcalculator-sidebar-width: 100%;
    }
}

/* Phones / tablets: 16px inputs so iOS does not zoom the page on every tap, and a little taller for fingers */
@media (max-width: 767.98px) and (pointer: coarse) {
    .periodcalculator-pagelayout[b-wx2bzn3gb4]  .periodcalculator-input {
        height: 2rem;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .periodcalculator-pagelayout .periodcalculator-group[b-wx2bzn3gb4] {
        transition: none;
    }
}

/* Styles the old page-level <style> block provided to popups this page hosts but does not own (Bootstrap modal, VoyageCalculator_320). */
.periodcalculator-pagelayout[b-wx2bzn3gb4]  .modal-footer {
    border-top: none;
}

.periodcalculator-pagelayout[b-wx2bzn3gb4]  .voycalc-hr-action:hover {
    background-color: var(--ssy-colour-palette-lemon-yellow);
    cursor: pointer;
    color: black;
}
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_110_ForwardCurve.razor.rz.scp.css */
/* Forward curve inside a vessel card.  Colours come from the custom properties on .periodcalculator-pagelayout. */

.periodcalculator-curve[b-1ggbd6swhh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.periodcalculator-curve .periodcalculator-curve-head[b-1ggbd6swhh] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.periodcalculator-curve .periodcalculator-curve-title[b-1ggbd6swhh] {
    font-weight: 600;
    font-size: 0.85rem;
}

.periodcalculator-curve .periodcalculator-curve-links[b-1ggbd6swhh] {
    display: flex;
    gap: 0.75rem;
}

/* "15 Jan 27 · 8-12 ABT/ABT" under the heading */
.periodcalculator-curve .periodcalculator-curve-description[b-1ggbd6swhh] {
    margin-top: -0.35rem;
    font-size: 0.75rem;
    color: var(--periodcalculator-muted);
}

/* ---- Vessel text ---- */
.periodcalculator-curve .periodcalculator-curve-terms[b-1ggbd6swhh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;   /* "Availability date" on one line */
}

    .periodcalculator-curve .periodcalculator-curve-terms .periodcalculator-curve-date[b-1ggbd6swhh] {
        width: 8.5rem;
    }

/* Bid | Offer, one bordered box each */
.periodcalculator-curve .periodcalculator-curve-sides[b-1ggbd6swhh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.periodcalculator-curve .periodcalculator-curve-side[b-1ggbd6swhh] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
    padding: 0.25rem 0.5rem 0.5rem;
    border: 1px solid var(--periodcalculator-border);
    border-radius: 6px;
}

    .periodcalculator-curve .periodcalculator-curve-side legend[b-1ggbd6swhh] {
        float: none;   /* undo Bootstrap's global legend float so it sits in the border */
        width: auto;
        margin: 0;
        padding: 0 0.25rem;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--periodcalculator-muted);
    }

.periodcalculator-curve .periodcalculator-curve-months[b-1ggbd6swhh] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    /* Small boxes: months are 1-2 digits */
    .periodcalculator-curve .periodcalculator-curve-months input[b-1ggbd6swhh] {
        width: 2.75rem;
    }

.periodcalculator-curve .periodcalculator-curve-unit[b-1ggbd6swhh] {
    color: var(--periodcalculator-muted);
}

/* Terms dropdown: as wide as the from - to boxes above it */
.periodcalculator-curve .periodcalculator-curve-side .periodcalculator-curve-termselect[b-1ggbd6swhh] {
    width: 6rem;
    text-align: left;
}

/* Vessel text / Periods switches: bold + underlined while showing, muted while hidden */
.periodcalculator-curve .periodcalculator-curve-switch[aria-pressed="false"][b-1ggbd6swhh] {
    color: var(--periodcalculator-muted);
}

.periodcalculator-curve .periodcalculator-curve-switch[aria-pressed="true"][b-1ggbd6swhh] {
    font-weight: 600;
    text-decoration: underline;
}

.periodcalculator-curve .periodcalculator-curve-toggle[b-1ggbd6swhh] {
    font-size: 0.75rem;
    color: var(--periodcalculator-blue);
}

    .periodcalculator-curve .periodcalculator-curve-toggle:hover[b-1ggbd6swhh] {
        text-decoration: underline;
    }

/* ---- Table ---- */
.periodcalculator-curve .periodcalculator-curve-table[b-1ggbd6swhh] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.periodcalculator-curve .periodcalculator-curve-col-period[b-1ggbd6swhh] {
    width: 4.2rem;
}

.periodcalculator-curve .periodcalculator-curve-col-mths[b-1ggbd6swhh] {
    width: 3rem;
}

.periodcalculator-curve .periodcalculator-curve-col-incl[b-1ggbd6swhh] {
    width: 1.6rem;
}

    .periodcalculator-curve .periodcalculator-curve-table th[b-1ggbd6swhh] {
        padding: 0.15rem 0.3rem;
        font-weight: normal;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--periodcalculator-muted);
        border-bottom: 1px solid var(--periodcalculator-border);
    }

    .periodcalculator-curve .periodcalculator-curve-table td[b-1ggbd6swhh] {
        padding: 0.1rem 0.3rem;
        color: var(--periodcalculator-muted);
    }

    .periodcalculator-curve .periodcalculator-curve-table th:first-child[b-1ggbd6swhh],
    .periodcalculator-curve .periodcalculator-curve-table td:first-child[b-1ggbd6swhh] {
        padding-left: 0.2rem;
        text-align: left;
    }

    .periodcalculator-curve .periodcalculator-curve-table th:last-child[b-1ggbd6swhh],
    .periodcalculator-curve .periodcalculator-curve-table td:last-child[b-1ggbd6swhh] {
        text-align: center;
    }

    /* Selected periods are the ones that price the vessel */
    .periodcalculator-curve .periodcalculator-curve-table tr.periodcalculator-curve-included td[b-1ggbd6swhh] {
        color: var(--periodcalculator-navy);
        background-color: var(--periodcalculator-stripe);
    }

    .periodcalculator-curve .periodcalculator-curve-table tfoot td[b-1ggbd6swhh] {
        padding-top: 0.25rem;
        border-top: 1px solid var(--periodcalculator-border);
        color: var(--periodcalculator-navy);
        font-weight: 600;
    }

/* Expander: the list's last row, full width, opens / folds the unselected periods in place */
.periodcalculator-curve .periodcalculator-curve-table tbody tr.periodcalculator-curve-more td[b-1ggbd6swhh] {
    padding: 0;
    text-align: center;
    border-top: 1px dashed var(--periodcalculator-border);
}

    .periodcalculator-curve .periodcalculator-curve-table tr.periodcalculator-curve-more button[b-1ggbd6swhh] {
        width: 100%;
        padding: 0.15rem 0;
        font-size: 0.75rem;
        color: var(--periodcalculator-blue);
    }

        .periodcalculator-curve .periodcalculator-curve-table tr.periodcalculator-curve-more button:hover[b-1ggbd6swhh] {
            background-color: var(--periodcalculator-stripe);
        }

.periodcalculator-curve .periodcalculator-curve-chevron[b-1ggbd6swhh] {
    margin-right: 0.25rem;
}

/* ---- Bid / Avg / Offer pick: header and Weighted total are clickable, the selected column is highlighted ---- */
.periodcalculator-curve .periodcalculator-curve-table .periodcalculator-curve-pick[b-1ggbd6swhh] {
    cursor: pointer;
}

    .periodcalculator-curve .periodcalculator-curve-table .periodcalculator-curve-pick:hover[b-1ggbd6swhh] {
        color: var(--periodcalculator-navy);
        text-decoration: underline;
    }

.periodcalculator-curve .periodcalculator-curve-table tr td.periodcalculator-curve-selected[b-1ggbd6swhh] {
    color: var(--periodcalculator-navy);
    font-weight: 600;
    box-shadow: inset 1px 0 0 var(--periodcalculator-border), inset -1px 0 0 var(--periodcalculator-border);
}

.periodcalculator-curve .periodcalculator-curve-table tr th.periodcalculator-curve-selected[b-1ggbd6swhh] {
    color: white;
    background-color: var(--ssy-colour-main-deep-blue);
    border-radius: 4px 4px 0 0;
}

.periodcalculator-curve .periodcalculator-curve-table tfoot tr td.periodcalculator-curve-selected[b-1ggbd6swhh] {
    color: white;
    background-color: var(--ssy-colour-main-deep-blue);
    border-radius: 0 0 4px 4px;
    text-decoration: none;
}

/* Direction of the latest live price tick (listed last so it wins over the included / selected colours) */
.periodcalculator-curve .periodcalculator-curve-table tbody tr td.periodcalculator-curve-up[b-1ggbd6swhh] {
    color: var(--ssy-colour-palette-teal-green);
}

.periodcalculator-curve .periodcalculator-curve-table tbody tr td.periodcalculator-curve-down[b-1ggbd6swhh] {
    color: var(--ssy-colour-palette-crimson-red);
}

/* ---- Adjustment ledger: label | input | running total ----
   Label column is left as wide as possible so "Adjust monthly average" stays on one line and every row lines up. */
.periodcalculator-curve .periodcalculator-curve-ledger[b-1ggbd6swhh] {
    display: grid;
    grid-template-columns: 1fr 4rem 4.5rem;
    gap: 0.25rem 0.5rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--periodcalculator-border);
    border-radius: 6px;
}

.periodcalculator-curve .periodcalculator-curve-ledger-total[b-1ggbd6swhh] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* "VLSFO +5.00%" under Premium %: bunkers changed from live, in the typed-over (delinked) colour */
.periodcalculator-curve .periodcalculator-curve-ledger-note[b-1ggbd6swhh] {
    grid-column: 1 / -1;
    margin-top: -0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--periodcalculator-blue);
}

.periodcalculator-curve .periodcalculator-curve-ledger-final[b-1ggbd6swhh] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    padding-top: 0.3rem;
    border-top: 1px solid var(--periodcalculator-border);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Features % label: the "list" link opens the card sidebar on Settings > Features */
.periodcalculator-curve .periodcalculator-curve-featuresbtn[b-1ggbd6swhh] {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    text-decoration: underline;
    color: var(--periodcalculator-blue);
}
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_120_Sidebar.razor.rz.scp.css */
/* Card sidebar (Settings / Price impacts / Calc results).  Width / top / colours come from the custom properties on .periodcalculator-pagelayout;
   it slides in when the page puts .periodcalculator-sidebar-open on that wrapper. */

.periodcalculator-sidebar[b-k4kioot6qo] {
    position: fixed;
    top: var(--periodcalculator-sidebar-top);
    right: 0;
    bottom: 0;
    z-index: 20;   /* over the cards, under Bootstrap modals (1055) */
    width: var(--periodcalculator-sidebar-width);
    padding: 1rem;
    overflow-y: auto;
    background-color: white;
    border-left: 1px solid var(--periodcalculator-border);
    box-shadow: -4px 0 12px rgba(0, 0, 97, 0.12);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.periodcalculator-sidebar-open .periodcalculator-sidebar[b-k4kioot6qo] {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
}

.periodcalculator-sidebar .periodcalculator-sidebar-header[b-k4kioot6qo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

/* Tabs: the global .ssy-tablist-main look.  Four tabs share the sidebar width on one line (less side padding than the
   global 16px so they fit a laptop-width sidebar; they wrap on a tablet) */
.periodcalculator-sidebar .periodcalculator-sidebar-tabs[b-k4kioot6qo] {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

    .periodcalculator-sidebar .periodcalculator-sidebar-tabs > button.ssy-btn[b-k4kioot6qo] {
        flex: 1 1 auto;
        padding-inline: 0.5rem;
        white-space: nowrap;
    }

.periodcalculator-sidebar .periodcalculator-sidebar-title[b-k4kioot6qo] {
    font-weight: 600;
}

.periodcalculator-sidebar .periodcalculator-sidebar-note[b-k4kioot6qo] {
    font-size: 0.8rem;
    color: var(--periodcalculator-muted);
}

/* label | field pairs */
.periodcalculator-sidebar .periodcalculator-sidebar-form[b-k4kioot6qo] {
    display: grid;
    grid-template-columns: 1fr 7rem;
    gap: 0.5rem 1rem;
    align-items: center;
    font-size: 0.85rem;
}

.periodcalculator-sidebar .periodcalculator-sidebar-note[b-k4kioot6qo] {
    margin: 0.4rem 0 0;
}

.periodcalculator-sidebar .periodcalculator-sidebar-section[b-k4kioot6qo] {
    margin: 1.25rem 0 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--periodcalculator-border);
    font-size: 0.85rem;
    font-weight: 600;
}

    /* First section of a tab sits straight under the tabs: no rule above it */
    .periodcalculator-sidebar .periodcalculator-sidebar-section.periodcalculator-sidebar-section-first[b-k4kioot6qo] {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

/* Scenario sliders: label (left) and result (right) above a full-width slider */
.periodcalculator-sidebar .periodcalculator-sidebar-sliders[b-k4kioot6qo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.periodcalculator-sidebar .periodcalculator-sidebar-slider-head[b-k4kioot6qo] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

    .periodcalculator-sidebar .periodcalculator-sidebar-slider-head span[b-k4kioot6qo] {
        margin: 0;
    }

.periodcalculator-sidebar .periodcalculator-sidebar-slider input[type="range"][b-k4kioot6qo] {
    display: block;
    width: 100%;
    margin: 0;
    accent-color: var(--periodcalculator-blue);
}

.periodcalculator-sidebar .periodcalculator-sidebar-perc[b-k4kioot6qo] {
    font-weight: 600;
    color: var(--periodcalculator-navy);
}

/* Bunker price box + link icon */
.periodcalculator-sidebar .periodcalculator-sidebar-bunker[b-k4kioot6qo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .periodcalculator-sidebar .periodcalculator-sidebar-bunker input[b-k4kioot6qo] {
        flex: 1;
        min-width: 0;
    }

/* Fuel name as an expander: chevron (CSS, no icon) points right closed, down open */
.periodcalculator-sidebar .periodcalculator-sidebar-expander[b-k4kioot6qo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

    .periodcalculator-sidebar .periodcalculator-sidebar-expander[b-k4kioot6qo]::before {
        content: "";
        width: 0.4rem;
        height: 0.4rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(-45deg);
        transition: transform 0.15s ease;
    }

    .periodcalculator-sidebar .periodcalculator-sidebar-expander-open[b-k4kioot6qo]::before {
        transform: rotate(45deg);
    }

/* Monthly prices behind a fuel's average: spans both form columns */
.periodcalculator-sidebar .periodcalculator-sidebar-months[b-k4kioot6qo] {
    grid-column: 1 / -1;
    width: 100%;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
}

    .periodcalculator-sidebar .periodcalculator-sidebar-months th[b-k4kioot6qo],
    .periodcalculator-sidebar .periodcalculator-sidebar-months td[b-k4kioot6qo] {
        padding: 0.15rem 0.25rem;
        text-align: right;
    }

        .periodcalculator-sidebar .periodcalculator-sidebar-months th:first-child[b-k4kioot6qo],
        .periodcalculator-sidebar .periodcalculator-sidebar-months td:first-child[b-k4kioot6qo] {
            text-align: left;
        }

    .periodcalculator-sidebar .periodcalculator-sidebar-months th[b-k4kioot6qo] {
        font-weight: 400;
        color: var(--periodcalculator-muted);
        border-bottom: 1px solid var(--periodcalculator-border);
    }

    .periodcalculator-sidebar .periodcalculator-sidebar-months tfoot td[b-k4kioot6qo] {
        font-weight: 600;
        border-top: 1px solid var(--periodcalculator-border);
    }

.periodcalculator-sidebar .periodcalculator-sidebar-months-note[b-k4kioot6qo] {
    grid-column: 1 / -1;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .periodcalculator-sidebar .periodcalculator-sidebar-expander[b-k4kioot6qo]::before {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .periodcalculator-sidebar[b-k4kioot6qo],
    .periodcalculator-sidebar-open .periodcalculator-sidebar[b-k4kioot6qo] {
        transition: none;
    }
}

/* Settings > Features: heading with the list total on the right, "Use this value" under it */
.periodcalculator-sidebar .periodcalculator-sidebar-section.periodcalculator-sidebar-features-head[b-k4kioot6qo] {
    display: flex;
    justify-content: space-between;
}

.periodcalculator-sidebar .periodcalculator-sidebar-features-use[b-k4kioot6qo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Every feature, three columns: name (unit in brackets) | Has it: the switch or the value | % (narrow: xx.xx, blank when none) */
.periodcalculator-sidebar .periodcalculator-sidebar-features[b-k4kioot6qo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.5rem 4.25rem;
    gap: 0.35rem 0.75rem;
    align-items: center;
    font-size: 0.85rem;
}

    .periodcalculator-sidebar .periodcalculator-sidebar-features > .periodcalculator-sidebar-note[b-k4kioot6qo] {
        margin: 0;
    }

/* A % that does not count (the ship does not have the feature): kept, but faded */
.periodcalculator-sidebar .periodcalculator-sidebar-features-notcounted[b-k4kioot6qo] {
    opacity: 0.45;
}

.periodcalculator-sidebar .periodcalculator-sidebar-error[b-k4kioot6qo] {
    color: var(--ssy-colour-palette-crimson-red);
}

/* Has it: three-way switch.  Yes = knob right, teal; No = knob left, slate; Unknown = knob centred, grey */
.periodcalculator-sidebar .periodcalculator-tristate[b-k4kioot6qo] {
    justify-self: start;   /* not stretched to the Has it column */
    position: relative;
    width: 2.2rem;
    height: 1.1rem;
    border-radius: 1rem;
    background-color: var(--periodcalculator-border);
    transition: background-color 0.15s linear;
}

    .periodcalculator-sidebar .periodcalculator-tristate[b-k4kioot6qo]::before {
        content: "";
        position: absolute;
        top: 0.15rem;
        left: 0.15rem;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        background-color: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: transform 0.15s linear;
    }

    .periodcalculator-sidebar .periodcalculator-tristate.periodcalculator-tristate-unknown[b-k4kioot6qo]::before {
        transform: translateX(0.55rem);
    }

    .periodcalculator-sidebar .periodcalculator-tristate.periodcalculator-tristate-yes[b-k4kioot6qo] {
        background-color: var(--ssy-colour-palette-teal-green);
    }

        .periodcalculator-sidebar .periodcalculator-tristate.periodcalculator-tristate-yes[b-k4kioot6qo]::before {
            transform: translateX(1.1rem);
        }

    .periodcalculator-sidebar .periodcalculator-tristate.periodcalculator-tristate-no[b-k4kioot6qo] {
        background-color: var(--periodcalculator-muted);
    }

    .periodcalculator-sidebar .periodcalculator-tristate:disabled[b-k4kioot6qo] {
        opacity: 0.5;
        cursor: default;
    }

    .periodcalculator-sidebar .periodcalculator-tristate:focus-visible[b-k4kioot6qo] {
        outline: 2px solid var(--periodcalculator-blue);
        outline-offset: 1px;
    }

@media (prefers-reduced-motion: reduce) {
    .periodcalculator-sidebar .periodcalculator-tristate[b-k4kioot6qo],
    .periodcalculator-sidebar .periodcalculator-tristate[b-k4kioot6qo]::before {
        transition: none;
    }
}
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_122_SidebarCalcResults.razor.rz.scp.css */
/* Sidebar > Calc results.  Colours come from the custom properties on .periodcalculator-pagelayout.
   ::deep so the Scenario under the main calc (PeriodCalculator_305_RouteScenario) gets the same table, heading and
   buttons without a stylesheet of its own.  Compact (7 columns in the sidebar): tight cell padding, small text. */

.periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-headrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-bottom: 0.4rem;
}

.periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

/* The Scenario starts as a new section, like the sidebar's own sections */
.periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-scenario {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--periodcalculator-border);
}

.periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-routes {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

    .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-routes th,
    .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-routes td {
        padding: 0.2rem 0.3rem;
        white-space: nowrap;
    }

    .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-routes th:first-child,
    .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-routes td:first-child {
        padding-left: 0;
        text-align: left;
    }

    .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-routes th {
        font-weight: 400;
        color: var(--periodcalculator-muted);
    }

    .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-routes thead tr:first-child th {
        text-align: center;
        color: inherit;
        font-weight: 600;
        border-bottom: 1px solid var(--periodcalculator-border);
    }

    .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-routes tbody tr:nth-of-type(even) {
        background-color: var(--periodcalculator-stripe);
    }

    .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-routes tfoot tr:first-child td {
        border-top: 1px solid var(--periodcalculator-border);
    }

    .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-routes tfoot td {
        font-weight: 600;
    }

/* Route name: its basket weight is the hover text */
.periodcalculator-calcresults .periodcalculator-calcresults-route[b-ieni8t1dhp] {
    cursor: help;
}

.periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-muted {
    color: var(--periodcalculator-muted);
}

.periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-note {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--periodcalculator-muted);
}

.periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
}

    /* "All primary / All Beans ..." on the Scenario heading line: small pills */
    .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-headrow .periodcalculator-calcresults-actions {
        gap: 0.3rem;
        margin: 0;
    }

        .periodcalculator-calcresults[b-ieni8t1dhp]  .periodcalculator-calcresults-headrow .periodcalculator-calcresults-actions button {
            padding: 0.15rem 0.6rem;
            font-size: 0.75rem;
        }

/* Scenario route picker: the page's input look (.periodcalculator-input sets height, border, font), sized to its text.
   On a variant it is outlined in the page blue, so a row off its primary stands out.  Chevron colour = --ssy-colour-palette-slate-gray
   (a data: url cannot read a CSS variable). */
.periodcalculator-calcresults[b-ieni8t1dhp]  select.periodcalculator-calcresults-select {
    width: auto;
    max-width: 8.5rem;
    padding: 0 1.1rem 0 0.3rem;
    appearance: none;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23405864' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.35rem center / 0.55rem;
    cursor: pointer;
}

    .periodcalculator-calcresults[b-ieni8t1dhp]  select.periodcalculator-calcresults-select.periodcalculator-calcresults-variant {
        font-weight: 600;
        border-color: var(--periodcalculator-blue);
    }

/* ---- Scrubber benefit ---- a section of its own, like the Scenario */
.periodcalculator-calcresults .periodcalculator-calcresults-scrubber[b-ieni8t1dhp] {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--periodcalculator-border);
}

    .periodcalculator-calcresults .periodcalculator-calcresults-scrubber .periodcalculator-calcresults-note[b-ieni8t1dhp] {
        margin: 0 0 0.5rem;
    }

/* Label | Bid | Offer tables: the label column takes the room, the two sides share the rest */
.periodcalculator-calcresults .periodcalculator-calcresults-sides th:not(:first-child)[b-ieni8t1dhp],
.periodcalculator-calcresults .periodcalculator-calcresults-sides td:not(:first-child)[b-ieni8t1dhp] {
    width: 22%;
}

/* One route: the summary line shows its premium points (bid / offer); opens to the figures behind them */
.periodcalculator-calcresults .periodcalculator-calcresults-details[b-ieni8t1dhp] {
    border-top: 1px solid var(--periodcalculator-border);
    font-size: 0.8rem;
}

    .periodcalculator-calcresults .periodcalculator-calcresults-details summary[b-ieni8t1dhp] {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.3rem 0;
        cursor: pointer;
    }

    .periodcalculator-calcresults .periodcalculator-calcresults-details[open] summary[b-ieni8t1dhp] {
        font-weight: 600;
    }

    /* flex drops the browser's marker, so draw the chevron: right closed, down open */
    .periodcalculator-calcresults .periodcalculator-calcresults-details summary > span:first-child[b-ieni8t1dhp]::before {
        content: "\25B8";
        display: inline-block;
        width: 0.9rem;
        color: var(--periodcalculator-muted);
    }

    .periodcalculator-calcresults .periodcalculator-calcresults-details[open] summary > span:first-child[b-ieni8t1dhp]::before {
        content: "\25BE";
    }

    .periodcalculator-calcresults .periodcalculator-calcresults-details .periodcalculator-calcresults-note[b-ieni8t1dhp] {
        white-space: normal;
    }
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_124_SidebarCalcOverview.razor.rz.scp.css */
/* Sidebar > Calc overview.  Colours come from the custom properties on .periodcalculator-pagelayout; the inputs use the
   page's shared .periodcalculator-input look.  Compact tables (route + up to 8 numbers in the sidebar): small text, tight
   cells, and a horizontal scroll inside the table box if a card buys more fuel types than fit. */

.periodcalculator-overview[b-y0szi2vfpq] {
    font-size: 0.8rem;
}

/* Side | Highlight over: one line of label + field pairs */
.periodcalculator-overview .periodcalculator-overview-controls[b-y0szi2vfpq],
.periodcalculator-overview .periodcalculator-overview-prices[b-y0szi2vfpq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-bottom: 0.75rem;
}

    .periodcalculator-overview .periodcalculator-overview-controls label[b-y0szi2vfpq],
    .periodcalculator-overview .periodcalculator-overview-prices label[b-y0szi2vfpq] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin: 0;
        white-space: nowrap;
    }

.periodcalculator-overview .periodcalculator-overview-controls select[b-y0szi2vfpq] {
    width: auto;
}

.periodcalculator-overview .periodcalculator-overview-narrow[b-y0szi2vfpq] {
    width: 4.5rem;
}

/* Section heading line: heading, then its own options */
.periodcalculator-overview .periodcalculator-overview-headrow[b-y0szi2vfpq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin: 1.25rem 0 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--periodcalculator-border);
}

    .periodcalculator-overview .periodcalculator-overview-headrow label[b-y0szi2vfpq] {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        margin: 0;
    }

.periodcalculator-overview .periodcalculator-overview-heading[b-y0szi2vfpq] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.periodcalculator-overview .periodcalculator-overview-mode[b-y0szi2vfpq] {
    width: auto;
}

.periodcalculator-overview .periodcalculator-overview-scroll[b-y0szi2vfpq] {
    overflow-x: auto;
}

.periodcalculator-overview .periodcalculator-overview-table[b-y0szi2vfpq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

    .periodcalculator-overview .periodcalculator-overview-table th[b-y0szi2vfpq],
    .periodcalculator-overview .periodcalculator-overview-table td[b-y0szi2vfpq] {
        padding: 0.15rem 0.3rem;
    }

    .periodcalculator-overview .periodcalculator-overview-table th[b-y0szi2vfpq] {
        font-weight: 400;
        color: var(--periodcalculator-muted);
    }

    .periodcalculator-overview .periodcalculator-overview-table tbody tr:nth-of-type(even)[b-y0szi2vfpq] {
        background-color: var(--periodcalculator-stripe);
    }

    .periodcalculator-overview .periodcalculator-overview-table tfoot td[b-y0szi2vfpq] {
        font-weight: 600;
        border-top: 1px solid var(--periodcalculator-border);
    }

/* Vessel / Baseline group headings, and a rule before each group's first column */
.periodcalculator-overview .periodcalculator-overview-table th.periodcalculator-overview-group[b-y0szi2vfpq] {
    text-align: center;
    font-weight: 600;
    color: inherit;
    border-bottom: 1px solid var(--periodcalculator-border);
}

.periodcalculator-overview .periodcalculator-overview-table .periodcalculator-overview-first[b-y0szi2vfpq] {
    border-left: 1px solid var(--periodcalculator-border);
}

/* Route and port columns read left to right */
.periodcalculator-overview .periodcalculator-overview-table th:first-child[b-y0szi2vfpq],
.periodcalculator-overview .periodcalculator-overview-table td:first-child[b-y0szi2vfpq],
.periodcalculator-overview .periodcalculator-overview-port[b-y0szi2vfpq] {
    text-align: left;
}

.periodcalculator-overview .periodcalculator-overview-route[b-y0szi2vfpq] {
    cursor: help;
}

.periodcalculator-overview .periodcalculator-overview-table tr.periodcalculator-overview-subtotal td[b-y0szi2vfpq] {
    font-weight: 600;
}

/* A difference over the highlight %: the brand bright orange, softened so the number stays readable */
.periodcalculator-overview .periodcalculator-overview-table td.periodcalculator-overview-hi[b-y0szi2vfpq] {
    background-color: color-mix(in srgb, var(--ssy-colour-palette-bright-orange) 25%, transparent);
    font-weight: 600;
}

.periodcalculator-overview .periodcalculator-overview-note[b-y0szi2vfpq] {
    margin: 0.4rem 0 0;
    color: var(--periodcalculator-muted);
    white-space: normal;
}
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_130_CopyOut.razor.rz.scp.css */
/* Copy-out menu on a vessel card.  Colours come from the custom properties on .periodcalculator-pagelayout;
   the icon button look comes from the page's .periodcalculator-iconbtn. */

.periodcalculator-copy[b-rhhmv4bdqm] {
    position: relative;
    display: inline-flex;
}

.periodcalculator-copy .periodcalculator-copy-menu[b-rhhmv4bdqm] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    min-width: 11rem;
    padding: 0.25rem 0;
    background-color: white;
    border: 1px solid var(--periodcalculator-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 97, 0.15);
    font-size: 0.85rem;
    font-weight: normal;
}

/* Open: tapped / clicked open (touch screens have no hover), hovered with a mouse, or keyboard focus inside */
.periodcalculator-copy.periodcalculator-copy-open .periodcalculator-copy-menu[b-rhhmv4bdqm],
.periodcalculator-copy:has(:focus-visible) .periodcalculator-copy-menu[b-rhhmv4bdqm] {
    display: flex;
}

@media (hover: hover) {
    .periodcalculator-copy:hover .periodcalculator-copy-menu[b-rhhmv4bdqm] {
        display: flex;
    }
}

.periodcalculator-copy .periodcalculator-copy-item[b-rhhmv4bdqm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;   /* finger-sized on phones */
    text-align: left;
    white-space: nowrap;
    color: var(--periodcalculator-navy);
}

    .periodcalculator-copy .periodcalculator-copy-item:hover[b-rhhmv4bdqm],
    .periodcalculator-copy .periodcalculator-copy-item:focus-visible[b-rhhmv4bdqm] {
        background-color: var(--periodcalculator-stripe);
    }

/* "Copied for WhatsApp" under the icon: shown after the menu closes */
.periodcalculator-copy .periodcalculator-copy-feedback[b-rhhmv4bdqm] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 6;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: normal;
    color: white;
    background-color: var(--ssy-colour-palette-teal-green);
    border-radius: 4px;
}

    .periodcalculator-copy .periodcalculator-copy-feedback.periodcalculator-copy-feedback-error[b-rhhmv4bdqm] {
        background-color: var(--ssy-colour-palette-crimson-red);
    }
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_140_LinkToggle.razor.rz.scp.css */
/* Link toggle: teal while linked to live, muted with a strike when fixed.  Sized to sit beside a column heading. */
.periodcalculator-link[b-tfki79cdkz] {
    display: inline-flex;
    vertical-align: middle;
    padding: 0.1rem;
    border-radius: 3px;
    color: var(--ssy-colour-palette-teal-green);
}

    .periodcalculator-link svg[b-tfki79cdkz] {
        width: 0.9rem;
        height: 0.9rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .periodcalculator-link.periodcalculator-link-off[b-tfki79cdkz] {
        color: var(--periodcalculator-muted);
    }

    .periodcalculator-link:hover[b-tfki79cdkz] {
        background-color: var(--periodcalculator-stripe);
    }
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_150_ScenarioChart.razor.rz.scp.css */
/* Scenario chart in the card sidebar (Price impacts).  Colours come from the custom properties on .periodcalculator-pagelayout. */
.periodcalculator-scenario .periodcalculator-scenario-head[b-9u0ru3sxtq] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.periodcalculator-scenario .periodcalculator-scenario-rebuild[b-9u0ru3sxtq] {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--periodcalculator-blue);
}

    .periodcalculator-scenario .periodcalculator-scenario-rebuild:hover:not(:disabled)[b-9u0ru3sxtq] {
        text-decoration: underline;
    }

/* Highcharts fills this */
.periodcalculator-scenario .periodcalculator-scenario-chart[b-9u0ru3sxtq] {
    height: 260px;
}

.periodcalculator-scenario .periodcalculator-scenario-note[b-9u0ru3sxtq] {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: var(--periodcalculator-muted);
}

/* Second chart sits under the first */
.periodcalculator-scenario + .periodcalculator-scenario[b-9u0ru3sxtq] {
    margin-top: 1rem;
}

/* "Bunkers up / down ... +-10%" above a full-width slider */
.periodcalculator-scenario .periodcalculator-scenario-slider[b-9u0ru3sxtq] {
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
}

.periodcalculator-scenario .periodcalculator-scenario-slider-head[b-9u0ru3sxtq] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

    .periodcalculator-scenario .periodcalculator-scenario-slider-head span[b-9u0ru3sxtq] {
        font-weight: 600;
    }

.periodcalculator-scenario .periodcalculator-scenario-slider input[type="range"][b-9u0ru3sxtq] {
    display: block;
    width: 100%;
    margin: 0;
    accent-color: var(--periodcalculator-blue);
}
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_160_SinceMark.razor.rz.scp.css */
/* Impact panel at the bottom of a card: same columns as the card's prices (label | bid | avg paper | offer). */
.periodcalculator-impact[b-k8vbd4tmeq] {
    display: grid;
    grid-template-columns: 6rem repeat(3, 1fr);
    gap: 0.15rem 0.3rem;
    align-items: baseline;
    padding-top: 0.5rem;
    border-top: 1px solid var(--periodcalculator-border);
    font-size: 0.8rem;
    white-space: nowrap;   /* labels ("Current value") stay on one line */
    color: var(--periodcalculator-muted);
}

.periodcalculator-impact .periodcalculator-impact-title[b-k8vbd4tmeq] {
    grid-column: 1 / -1;
    margin-bottom: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--periodcalculator-navy);
}

/* Column heads: "Bid" / "Offer" with the mark time underneath */
.periodcalculator-impact .periodcalculator-impact-head[b-k8vbd4tmeq] {
    flex-direction: column;
    align-items: flex-end;
    font-weight: 600;
    color: var(--periodcalculator-navy);
}

    .periodcalculator-impact .periodcalculator-impact-head small[b-k8vbd4tmeq] {
        font-size: 0.7rem;
        font-weight: normal;
        color: var(--periodcalculator-muted);
    }

/* "At mark" / "Now" / "Result": a thin sub-heading across the panel */
.periodcalculator-impact .periodcalculator-impact-group[b-k8vbd4tmeq] {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
    border-bottom: 1px dotted var(--periodcalculator-border);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--periodcalculator-navy);
}

/* Numbers line up on the right with the price inputs above (same right padding).  Never wrap: anything wider than
   the column spills LEFT into the empty space beside it (flex-end + min-width 0), so the right edge stays put. */
.periodcalculator-impact .periodcalculator-impact-value[b-k8vbd4tmeq] {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    padding: 0 calc(0.3rem + 1px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.periodcalculator-impact .periodcalculator-impact-worth[b-k8vbd4tmeq] {
    font-weight: 600;
    color: var(--periodcalculator-navy);
}

.periodcalculator-impact .periodcalculator-impact-up[b-k8vbd4tmeq] {
    color: var(--ssy-colour-palette-teal-green);
}

.periodcalculator-impact .periodcalculator-impact-down[b-k8vbd4tmeq] {
    color: var(--ssy-colour-palette-crimson-red);
}

.periodcalculator-impact .periodcalculator-impact-actions[b-k8vbd4tmeq] {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    white-space: nowrap;
    gap: 0.5rem;
    padding: 0 calc(0.3rem + 1px);
    font-size: 0.75rem;
}

    .periodcalculator-impact .periodcalculator-impact-actions button[b-k8vbd4tmeq] {
        font-size: inherit;
        color: var(--periodcalculator-blue);
    }

        .periodcalculator-impact .periodcalculator-impact-actions button:hover[b-k8vbd4tmeq] {
            text-decoration: underline;
        }

/* Bunkers: one line across the bid, avg paper and offer columns */
.periodcalculator-impact .periodcalculator-impact-wide[b-k8vbd4tmeq] {
    grid-column: 2 / -1;
}
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_300_PopupVesselConfig.razor.rz.scp.css */
/* Tabs use the global .ssy-tablist-main styling; this file only lays out the panel.
   (The route breakdown tables moved to the card sidebar: PeriodCalculator_122_SidebarCalcResults.razor.css.) */

.periodcalculator-config .periodcalculator-config-panel[b-l63wutz4np] {
    padding-top: 1rem;
    overflow-x: auto;   /* wide tables scroll inside the popup on a phone */
}
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_310_SisterShips.razor.rz.scp.css */
/* Sister ships tab.  Colours come from the custom properties on .periodcalculator-pagelayout. */

.periodcalculator-sisters[b-d30mqyenfc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.periodcalculator-sisters .periodcalculator-sisters-note[b-d30mqyenfc] {
    margin: 0;
    color: var(--periodcalculator-muted);
}

/* Filter box + "n of m sisters" */
.periodcalculator-sisters .periodcalculator-sisters-tools[b-d30mqyenfc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

    .periodcalculator-sisters .periodcalculator-sisters-tools input[b-d30mqyenfc] {
        width: min(18rem, 100%);
    }

    /* "Built ± n yrs": room for two digits */
    .periodcalculator-sisters .periodcalculator-sisters-tools input.periodcalculator-sisters-years[b-d30mqyenfc] {
        width: 3.5rem;
    }

/* Sortable headings: the button fills the cell so the whole heading is clickable */
.periodcalculator-sisters .periodcalculator-sisters-sort[b-d30mqyenfc] {
    font: inherit;
    font-weight: 600;
    color: inherit;
}

.periodcalculator-sisters .periodcalculator-sisters-sortarrow[b-d30mqyenfc] {
    display: inline-block;
    width: 1em;
    font-size: 0.7em;
}

.periodcalculator-sisters .periodcalculator-sisters-table[b-d30mqyenfc] {
    border-collapse: collapse;
}

    .periodcalculator-sisters .periodcalculator-sisters-table th[b-d30mqyenfc],
    .periodcalculator-sisters .periodcalculator-sisters-table td[b-d30mqyenfc] {
        padding: 0.25rem 0.75rem;
        border-bottom: 1px solid var(--periodcalculator-border);
    }

    .periodcalculator-sisters .periodcalculator-sisters-table tr.periodcalculator-sisters-main td[b-d30mqyenfc] {
        font-weight: 600;
    }

    /* Not in the voyage estimator: cannot be priced or averaged */
    .periodcalculator-sisters .periodcalculator-sisters-table tr.periodcalculator-sisters-missing td[b-d30mqyenfc] {
        color: var(--periodcalculator-muted);
    }

.periodcalculator-sisters .periodcalculator-sisters-actions[b-d30mqyenfc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_400_PopupAdmin.razor.rz.scp.css */
/* Admin popup layout only: the table uses the global ssy-table-lw / ssy-table-padding / table-stickyheader styles.
   Colours come from the custom properties set on .periodcalculator-pagelayout. */

.periodcalculator-admin[b-b73pqv400u] {
    display: grid;
    gap: 1rem;
}

    /* Access tab: people on the left (takes the spare width), role explanations on the right */
    .periodcalculator-admin .periodcalculator-admin-access[b-b73pqv400u] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 16rem;
        gap: 2rem;
        align-items: start;
    }

    .periodcalculator-admin .periodcalculator-admin-people[b-b73pqv400u] {
        display: grid;
        gap: 0.5rem;
    }

    .periodcalculator-admin .periodcalculator-admin-toolbar[b-b73pqv400u] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }

    .periodcalculator-admin .periodcalculator-admin-toolbar input[type=text][b-b73pqv400u] {
        flex: 1 1 18rem;
    }

    .periodcalculator-admin .periodcalculator-admin-list[b-b73pqv400u] {
        max-height: 50vh;
        overflow-y: auto;
    }

        .periodcalculator-admin .periodcalculator-admin-list table[b-b73pqv400u] {
            width: 100%;
        }

    .periodcalculator-admin .periodcalculator-admin-tick[b-b73pqv400u] {
        text-align: center;
        width: 5rem;
    }

    .periodcalculator-admin .periodcalculator-admin-roles[b-b73pqv400u] {
        display: grid;
        gap: 1.25rem;
        padding-left: 1.5rem;
        border-left: 1px solid var(--periodcalculator-border);
    }

        .periodcalculator-admin .periodcalculator-admin-roles h6[b-b73pqv400u] {
            margin: 0;
            font-weight: bold;
        }

        .periodcalculator-admin .periodcalculator-admin-roles p[b-b73pqv400u] {
            margin: 0.25rem 0 0;
        }

    /* The role's database name under each heading: plain and light grey */
    .periodcalculator-admin .periodcalculator-admin-rolecode[b-b73pqv400u] {
        font-size: 0.8rem;
        color: color-mix(in srgb, var(--periodcalculator-muted) 55%, white);
    }

    .periodcalculator-admin .periodcalculator-admin-muted[b-b73pqv400u] {
        color: var(--periodcalculator-muted);
        font-size: 0.85rem;
    }

    .periodcalculator-admin .periodcalculator-admin-error[b-b73pqv400u] {
        color: var(--ssy-colour-palette-crimson-red);
    }

/* Narrow (the popup goes full screen): stack the roles under the list */
@media (max-width: 992px) {
    .periodcalculator-admin .periodcalculator-admin-access[b-b73pqv400u] {
        grid-template-columns: 1fr;
    }

    .periodcalculator-admin .periodcalculator-admin-roles[b-b73pqv400u] {
        padding-left: 0;
        border-left: none;
    }
}
/* /Components/Pages/Bulkers/PeriodCalculator/PeriodCalculator_410_RunLog.razor.rz.scp.css */
/* Run log page layout only: the table uses the global ssy-table-lw / table-stickyheader styles.
   Its own page, so not inside .periodcalculator-pagelayout: colours come from the ssy palette. */

.periodcalculator-runlog[b-dbb6xls7k2] {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    font-size: 0.9rem;
}

    .periodcalculator-runlog .periodcalculator-runlog-tools[b-dbb6xls7k2] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .periodcalculator-runlog .periodcalculator-runlog-tools input[type="text"][b-dbb6xls7k2] {
        width: 7.5rem;
    }

    .periodcalculator-runlog .periodcalculator-runlog-muted[b-dbb6xls7k2] {
        color: var(--ssy-colour-palette-slate-gray);
    }

    .periodcalculator-runlog .periodcalculator-runlog-sort[b-dbb6xls7k2] {
        font: inherit;
        font-weight: 600;
        color: inherit;
        white-space: nowrap;
    }
/* /Components/Pages/Bulkers/PmxList/PmxList_000_ParentPage.razor.rz.scp.css */
.pmxlist-admin-wrap[b-m0a7dom6ow] {
    margin-top: 1rem;
}

.pmxlist-admin-panel[b-m0a7dom6ow] {
    width: min(100%, 100rem);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e6eb;
}

/* Shared across all PmxList tabs: light grey vertical lines between table columns.
   Add class="pmxlist-table-dividers" to any ssy-table-dw / ssy-table-lw table. */
.pmxlist-page[b-m0a7dom6ow]  .pmxlist-table-dividers th,
.pmxlist-page[b-m0a7dom6ow]  .pmxlist-table-dividers td {
    border-right: 1px solid #ccc;
}

.pmxlist-page[b-m0a7dom6ow]  .pmxlist-table-dividers th:last-child,
.pmxlist-page[b-m0a7dom6ow]  .pmxlist-table-dividers td:last-child {
    border-right: none; /* No border on the very last column */
}

/* Shared section header above a PmxList table: big title, then a small black count.
   <div class="pmxlist-region-row"> <div class="pmxlist-region-title"><h4>..</h4></div> <div class="pmxlist-region-count">..</div> </div>
   Add pmxlist-region-row--empty + pmxlist-region-count--muted when the section has nothing in it. */
.pmxlist-page[b-m0a7dom6ow]  .pmxlist-region-row {
    border-top: 1px solid #E7EEF2;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.pmxlist-page[b-m0a7dom6ow]  .pmxlist-region-row--empty {
    opacity: 0.85;
}

.pmxlist-page[b-m0a7dom6ow]  .pmxlist-region-title {
    min-width: 10em;
}

.pmxlist-page[b-m0a7dom6ow]  .pmxlist-region-count {
    font-weight: 500;
    font-size: 1rem;
    color: #000;
}

.pmxlist-page[b-m0a7dom6ow]  .pmxlist-region-count--muted {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ssy-colour-palette-slate-gray, #405864);
}

/* Shared: table always fits the page width; on small screens it squeezes (smaller text, tight
   padding, long text wraps anywhere) instead of scrolling sideways. Add class="pmxlist-table-fit".
   "table." prefix keeps these ahead of component rules like .parser-results-table td. */
.pmxlist-page[b-m0a7dom6ow]  table.pmxlist-table-fit {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .pmxlist-page[b-m0a7dom6ow]  table.pmxlist-table-fit {
        font-size: 0.75rem;
    }

    .pmxlist-page[b-m0a7dom6ow]  table.pmxlist-table-fit th,
    .pmxlist-page[b-m0a7dom6ow]  table.pmxlist-table-fit td {
        padding: 2px 4px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* /Components/Pages/Bulkers/PmxList/PmxList_050_HomePage.razor.rz.scp.css */
.pmx-home-stat-card[b-bukitoycqj] {
    border: 1px solid #e0e6eb;
}

.pmx-home-stat-title[b-bukitoycqj] {
    font-weight: 400;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
}

.pmx-home-wip[b-bukitoycqj] {
    min-height: 130px;
}

.pmx-home-wip__stamp[b-bukitoycqj] {
    font-size: 3rem;
    opacity: 0.25;
    pointer-events: none;
    letter-spacing: 0.2em;
}

.pmx-home-wip__actions[b-bukitoycqj] {
    gap: 1rem;
}

.pmx-home-panel[b-bukitoycqj] {
    min-height: 100%;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_100_CargoTonnageList.razor.rz.scp.css */
/* Table responsiveness */
@media (max-width: 768px) {
    .main-table[b-jy0h57xifn] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ssy-table-dw[b-jy0h57xifn] {
        min-width: 1200px; /* Ensure table maintains its width for scrolling */
        font-size: 0.875rem;
    }

    .ssy-table-dw th[b-jy0h57xifn],
    .ssy-table-dw td[b-jy0h57xifn] {
        padding: 0.5rem 0.25rem;
        white-space: nowrap;
    }

    /* Make checkboxes larger for touch */
    .ssy-table-dw input[type="checkbox"][b-jy0h57xifn] {
        transform: scale(1.2);
        margin: 0;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    .btn[b-jy0h57xifn] {
        min-height: 48px;
        min-width: 48px;
    }

    .dropdown-item[b-jy0h57xifn] {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    .form-control[b-jy0h57xifn] {
        min-height: 44px;
        font-size: 1rem;
    }
}

/* Mobile Action Bar */
.mobile-action-bar[b-jy0h57xifn] {
    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-jy0h57xifn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-action-buttons .btn[b-jy0h57xifn] {
    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-jy0h57xifn] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-action-buttons .btn:active[b-jy0h57xifn] {
    transform: scale(0.95);
}

/* Mobile Table Summary */
@media (max-width: 576px) {
    .mobile-table-summary[b-jy0h57xifn] {
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px;
        margin: 8px 0;
        font-size: 0.9rem;
    }

    .mobile-table-summary .summary-header[b-jy0h57xifn] {
        font-weight: 600;
        color: #163E9F;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-table-summary .summary-stats[b-jy0h57xifn] {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .mobile-table-summary .stat-item[b-jy0h57xifn] {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 60px;
    }

    .mobile-table-summary .stat-value[b-jy0h57xifn] {
        font-size: 1.1rem;
        font-weight: 700;
        color: #163E9F;
    }

    .mobile-table-summary .stat-label[b-jy0h57xifn] {
        font-size: 0.8rem;
        color: #666;
        text-align: center;
    }

    .mobile-table-summary .expand-toggle[b-jy0h57xifn] {
        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-jy0h57xifn] {
        background: #163E9F;
        color: white;
    }
}

.pmx-list-table[b-jy0h57xifn] {
    display: flex; 
    flex-direction: row;
    margin: 0 1%;
}

.container-relative[b-jy0h57xifn] {
    position: relative;
    width: 100%;
}

.lookup-panel[b-jy0h57xifn] {
    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-jy0h57xifn] {
    right: 0;
    opacity: 1;
}

.table-wrapper[b-jy0h57xifn] {
    transition: margin-right 0.4s ease;
    margin-right: 0;
}

.table-wrapper.shifted[b-jy0h57xifn] {
    margin-right: 50%; /* match lookup-panel width */
}

.sticky-header[b-jy0h57xifn] {
    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-jy0h57xifn] {
    display: flex;
    width: 100%;
    transition: all 0.3s ease;  
}

.main-table[b-jy0h57xifn] {
    transition: all 0.3s ease;
}

.full-width[b-jy0h57xifn] {
    width: 100%;
}

.half-width[b-jy0h57xifn] {
    width: 40%;
}

.lookup-tab-panel[b-jy0h57xifn] {
    width: 100%;
    transition: all 0.3s ease;
    border-left: 2px solid black;
    
}

.pmxlist-title-row[b-jy0h57xifn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.pmxlist-title[b-jy0h57xifn] {
    margin-bottom: 0.5rem;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
    font-weight: 600;
}

.pmxlist-count[b-jy0h57xifn] {
    font-weight: 400;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    font-size: 1rem;
}

.pmxlist-legend[b-jy0h57xifn] {
    color: var(--ssy-colour-palette-slate-gray, #405864);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}

.pmxlist-filters-row[b-jy0h57xifn] {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e0e6eb;
    padding-bottom: 0.5rem;
    gap: 0.25rem;
}

.pmxlist-search-input[b-jy0h57xifn] {
    width: 250px;
    height: 1.6rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

:global(.pmxlist-compact-btn)[b-jy0h57xifn] {
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

.pmxlist-toolbar-divider[b-jy0h57xifn] {
    align-self: stretch;
    width: 1px;
    margin: 0 0.5rem;
    background-color: #d5dbe1;
}

/* Mobile-only: switches (left) + mode buttons (right), each stacked within its own column.
   These classes only ever render inside the @if (_isMobile) branch, so there's no desktop
   counterpart to fight with -- no media query, no cascade-order tricks needed. */
.pmxlist-mobile-controls[b-jy0h57xifn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.pmxlist-mobile-switches[b-jy0h57xifn] {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
}

.pmxlist-mobile-actions[b-jy0h57xifn] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

.pmxlist-mobile-actions :global(.pmxlist-compact-btn)[b-jy0h57xifn],
.pmxlist-mobile-actions :global(.pmxlist-compact-dropdown-btn)[b-jy0h57xifn],
.pmxlist-mobile-actions :global(.dropdown)[b-jy0h57xifn] {
    width: 100%;
}

.pmxlist-mobile-search-row[b-jy0h57xifn] {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem !important;
}

.pmxlist-mobile-search-row .pmxlist-search-input[b-jy0h57xifn] {
    width: 100%;
    height: 2.25rem;
}

.pmxlist-copy-selection-text[b-jy0h57xifn] {
    display: inline-block;
    min-width: 6rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ssy-colour-palette-slate-gray, #405864);
}

.pmxlist-copy-clear-btn:disabled[b-jy0h57xifn] {
    background-color: #dcdcdc;
    border-color: #dcdcdc;
    color: #8a8a8a;
    cursor: not-allowed;
}

.pmxlist-export-options-count[b-jy0h57xifn] {
    text-align: right;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--ssy-colour-palette-slate-gray, #405864);
}

/* Spreads View max-age filter, sits next to the Refreshed Today switch */
.pmxlist-spreads-maxage[b-jy0h57xifn] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pmxlist-spreads-maxage input[b-jy0h57xifn] {
    width: 60px;
    padding: 1px 4px;
}

.pmxlist-moneymode-selection[b-jy0h57xifn] {
    font-size: 0.85rem;
    color: var(--ssy-colour-palette-slate-gray, #405864);
}

/* ── Money Mode toolbar's "Copy Rows" menu — matches PmxList_122's row-level copy menu ── */
.pmxlist-copyrows-wrap[b-jy0h57xifn] { position: relative; display: inline-block; }

.pmxlist-copyrows-overlay[b-jy0h57xifn] {
    position: fixed;
    inset: 0;
    z-index: 1499;
}

.pmxlist-copyrows-menu[b-jy0h57xifn] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    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;
}

.pmxlist-copyrows-header[b-jy0h57xifn] {
    padding: 4px 12px 2px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.pmxlist-copyrows-section-label[b-jy0h57xifn] {
    padding: 4px 12px 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #163E9F;
}

.pmxlist-copyrows-item[b-jy0h57xifn] {
    display: block;
    width: 100%;
    padding: 5px 18px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 0.83rem;
    white-space: nowrap;
}

.pmxlist-copyrows-item:hover[b-jy0h57xifn] { background: #f0f4ff; }

.pmxlist-copyrows-divider[b-jy0h57xifn] {
    margin: 4px 0;
    border-top: 1px solid #e8e8e8;
}

.pmxlist-iphone-textarea[b-jy0h57xifn] {
    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-jy0h57xifn] {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    /*margin: auto;*/
    display: flex;
    flex-direction: column;
}

.pmxlist-header[b-jy0h57xifn] {
    width: 100%;
    background-color: #F4F7F9;
    padding: 2px 4px 0 4px;
    box-sizing: border-box;
}

.pmxlist-datasection[b-jy0h57xifn] {
    flex: 1;
    display: flex;
    overflow: hidden; /* Prevent parent scroll */
}

.pmxlist-datacolumn[b-jy0h57xifn] {
    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-jy0h57xifn] {
    flex: 1 1 95%;
}
.pmxlist-split-column1[b-jy0h57xifn] {
    flex: 0 0 40%;
}
.pmxlist-split-column2[b-jy0h57xifn] {
    flex: 0 0 60%;
}










/* container that holds table + lookup */
.pmxlist-datasection.pmxlist-vertical[b-jy0h57xifn] {
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-jy0h57xifn] {
flex: 0 0 20%;
min-height: 0;
overflow: auto;         /* table scrolls if content exceeds 25% */
}

/* bottom 3/4 */
.pmxlist-bottom-panel[b-jy0h57xifn] {
flex: 1 1 80%;
min-height: 0;
overflow: auto;         /* lookup scrolls if needed */
}

/* when lookup is off */
.pmxlist-full-panel[b-jy0h57xifn] {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}

.pmxlist-datasection.pmxlist-vertical .pmxlist-bottom-panel[b-jy0h57xifn] {
border-top: 2px solid #111010; /* adjust colour to match your theme */
}

[b-jy0h57xifn] button.pmxlist-compact-dropdown-btn {
    padding: 0.15rem 0.65rem !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    height: auto !important;
}

[b-jy0h57xifn] button.pmxlist-compact-dropdown-btn::after {
    margin-left: 0.35rem;
    vertical-align: middle;
}

[b-jy0h57xifn] .pmxlist-copy-stack button.pmxlist-compact-dropdown-btn {
    width: 100%;
    justify-content: center;
}

.pmxlist-export-btn[b-jy0h57xifn] {
    justify-self: end;
}

.pmxlist-copy-block[b-jy0h57xifn] {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    align-items: center;
    justify-items: center;
}

.pmxlist-copy-stack[b-jy0h57xifn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    align-items: stretch;
    width: 100%;
}

.pmxlist-filter-stack[b-jy0h57xifn] {
    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-jy0h57xifn] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.35rem 0 0.35rem 0;
}

.pmxlist-route-subrow[b-jy0h57xifn] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    padding: 0 0 0.35rem 0;
}

.pmxlist-route-item[b-jy0h57xifn] {
    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-jy0h57xifn]              { background: #f4f4f4; }
.pmxlist-route-item--active[b-jy0h57xifn]            { background: #d4edda; color: #155724; font-weight: 600; }

.pmxlist-route-spacer[b-jy0h57xifn] { flex: 1; min-width: 0; }

/* ── Money Mode: client-side bunker price overwrite ── */
.pmxlist-moneymode-overwrite[b-jy0h57xifn] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pmxlist-moneymode-overwrite-toggle[b-jy0h57xifn] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    margin: 0;
    white-space: nowrap;
}

.pmxlist-moneymode-overwrite input[type="number"][b-jy0h57xifn] {
    width: 70px;
    padding: 0.1rem 0.3rem;
    font-size: 0.8rem;
    text-align: right;
}

.pmxlist-moneymode-overwrite input[type="number"]:disabled[b-jy0h57xifn] {
    background: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

/* Mobile Responsiveness -- title/count/legend (shared markup, both branches) + route bar.
   Gated on .is-mobile (set from the app's own IsMobile/_isMobile flag) rather than a raw
   viewport media query -- a bare @media breakpoint is a second, independent "is this mobile"
   threshold that can disagree with the app's own flag (e.g. a narrow-but-desktop browser
   window). The search/switches/buttons/copy-block region below this has its own genuinely
   separate mobile markup instead (see @if (_isMobile) in the .razor file), so it doesn't need
   any CSS gating here at all. */
.pmxlist-header.is-mobile[b-jy0h57xifn] {
    padding: 6px 8px 4px;
}

.pmxlist-header.is-mobile .pmxlist-title-row[b-jy0h57xifn] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.pmxlist-header.is-mobile .pmxlist-title[b-jy0h57xifn] {
    font-size: 1.15rem;
}

.pmxlist-header.is-mobile .pmxlist-count[b-jy0h57xifn] {
    display: block;
    font-size: 0.85rem;
}

.pmxlist-header.is-mobile .pmxlist-legend[b-jy0h57xifn] {
    gap: 0.5rem !important;
    font-size: 0.75rem;
}

/* Money Mode's route bar -- horizontal scroll strip instead of wrapping */
.pmxlist-header.is-mobile .pmxlist-route-bar[b-jy0h57xifn],
.pmxlist-header.is-mobile .pmxlist-route-subrow[b-jy0h57xifn] {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pmxlist-header.is-mobile .pmxlist-route-bar :global(.pmxlist-compact-btn)[b-jy0h57xifn],
.pmxlist-header.is-mobile .pmxlist-route-item[b-jy0h57xifn] {
    flex: 0 0 auto;
}

.pmxlist-header.is-mobile .pmxlist-route-spacer[b-jy0h57xifn] {
    display: none;
}

.pmxlist-header.is-mobile .pmxlist-moneymode-overwrite[b-jy0h57xifn] {
    flex-wrap: wrap;
    width: 100%;
}

/* Make touch targets larger */
.pmxlist-header.is-mobile .ssy-checkbox-slider[b-jy0h57xifn] {
    transform: scale(1.15);
    margin-right: 0.4rem;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_110_Header.razor.rz.scp.css */
.panamaxlist-header-form[b-y1jzqglmti] {
    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-y1jzqglmti] {
        width: 100vw;
        margin-left: -1rem;
        padding: 0 1rem;
    }
}

.pmxlist-header-actions[b-y1jzqglmti] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.1rem;
}

.pmxlist-header-actions__filters[b-y1jzqglmti] {
    display: flex;
    gap: 0.5rem;
}

.pmxlist-header-actions__primary[b-y1jzqglmti] {
    display: flex;
}

.pmxlist-field-group[b-y1jzqglmti] {
    min-width: 200px;
}

.pmxlist-muted-text[b-y1jzqglmti] {
    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-y1jzqglmti] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
}

.panamaxlist-header-form textarea[b-y1jzqglmti] {
    height: 32px;
    resize: vertical;
    overflow: hidden;
}

.form-container[b-y1jzqglmti] {
    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-y1jzqglmti] {
    max-height: 2000px;
    opacity: 1;
    transform: scaleY(1);
}


.pmx-duplicate-warning[b-y1jzqglmti] {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #b45309; /* amber-ish */
    display: flex;
    align-items: center;
    gap: 6px;
}

.pmx-duplicate-warning i[b-y1jzqglmti] {
    color: #f59e0b;
}

.pmx-duplicate-details[b-y1jzqglmti] {
    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-w6qlwcxh3r] {
    width: 1%;
    text-align: center;
}

.col-refreshed[b-w6qlwcxh3r] {
    width: 3%;
    text-align: center;
}

.col-account[b-w6qlwcxh3r] {
    width: 4%;
    text-align: left;
    overflow-wrap: anywhere;
}

.col-size[b-w6qlwcxh3r] {
    width: 5%;
}

.col-load[b-w6qlwcxh3r] {
    width: 5%;
}

.col-laycan[b-w6qlwcxh3r] {
    width: 4%;
}

.col-disch[b-w6qlwcxh3r] {
    width: 6%;
}

.col-cargo[b-w6qlwcxh3r] {
    width: 4%;
    text-align: left;
}

.col-comments[b-w6qlwcxh3r] {
    width: 10%;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.col-spreads[b-w6qlwcxh3r] {
    width: 10%;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.spreads-placeholder-btn[b-w6qlwcxh3r] {
    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-w6qlwcxh3r] {
    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-w6qlwcxh3r] {
    opacity: 1;
}

.pmx-source-bubble[b-w6qlwcxh3r] {
    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-w6qlwcxh3r] {
    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-w6qlwcxh3r] {
    border: none;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    opacity: 0.6;
}

.pmx-source-bubble-close:hover[b-w6qlwcxh3r] {
    opacity: 1;
}

.pmx-source-bubble-body[b-w6qlwcxh3r] {
    padding: 8px 10px;
    font-size: 0.85rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
}

/* Source message shown under an automated row while it's being edited (table row + mobile card) */
.pmx-source-inline[b-w6qlwcxh3r] {
    background: #f4f6fa;
    padding: 6px 10px;
}

.pmx-source-inline-label[b-w6qlwcxh3r] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #163E9F;
}

.pmx-source-inline-sender[b-w6qlwcxh3r] {
    font-style: italic;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
    padding-bottom: 2px;
    margin-bottom: 4px;
}

/* pre-wrap lives here, not on the cell, so markup whitespace around it isn't rendered */
.pmx-source-inline-text[b-w6qlwcxh3r] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.col-offmkt[b-w6qlwcxh3r] {
    width: 1.5%;
}

.col-broker[b-w6qlwcxh3r] {
    width: 3%;
    text-align: left;
}

.col-comms[b-w6qlwcxh3r] {
    width: 3%;
}

.col-updated[b-w6qlwcxh3r] {
    width: 5.5%;
}

.col-actions[b-w6qlwcxh3r] {
    width: 1%;
    text-align: center;
}

.d-none[b-w6qlwcxh3r] {
    display: none !important;
}

.selected-lookup-row[b-w6qlwcxh3r] {
    background-color: yellow !important; /* light yellow */
    font-weight: bold;
}

/* Region row / title / count styles are shared -- see PmxList_000_ParentPage.razor.css */
.pmxlist-region-row--clickable[b-w6qlwcxh3r] {
    cursor: pointer;
}

.pmxlist-region-toggle[b-w6qlwcxh3r],
.pmxlist-region-toggle-placeholder[b-w6qlwcxh3r] {
    width: 2.4rem;
    text-align: center;
    font-size: 1.1rem;
    color: var(--ssy-colour-main-bright-blue, #0087CB);
}

.pmxlist-data-table[b-w6qlwcxh3r] {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.pmxlist-cell-textarea[b-w6qlwcxh3r] {
    min-height: 60px;
}

.pmxlist-pnc-label[b-w6qlwcxh3r] {
    color: var(--ssy-colour-palette-crimson-red, #DB303A);
    font-weight: 600;
}

.pmxlist-actions-cell[b-w6qlwcxh3r] {
    white-space: nowrap;
    width: 1%;
}

.pmxlist-warning-indicator[b-w6qlwcxh3r] {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmxlist-warning-icon[b-w6qlwcxh3r] {
    cursor: pointer;
    font-size: 1.2rem;
    color: rgb(255, 145, 0);
}

.pmxlist-updated-text[b-w6qlwcxh3r] {
    font-size: 0.85em;
    color: #888;
    text-align: center;
    margin-top: 2px;
}

.pmxlist-subline[b-w6qlwcxh3r] {
    font-size: 0.85em;
    font-weight: 700;
    color: #6c757d;
    margin-top: 1px;
}

.pmxlist-edit-input-label[b-w6qlwcxh3r] {
    font-size: 9px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 1px;
}

.pmxlist-data-table .form-control[b-w6qlwcxh3r],
.pmxlist-data-table select.form-control[b-w6qlwcxh3r],
.pmxlist-data-table textarea.form-control[b-w6qlwcxh3r] {
    font-size: 14px;
}

.pmxlist-data-table .pmxlist-align-top[b-w6qlwcxh3r] {
    vertical-align: top;
}

.pmxlist-data-table th[b-w6qlwcxh3r] {
    font-weight: 700;
}

.bi-check-lg[b-w6qlwcxh3r], .bi-files[b-w6qlwcxh3r] {
    transition: all 0.3s ease-in-out;
}

.col-bod[b-w6qlwcxh3r] {
    width: 7%;
}

.col-pref[b-w6qlwcxh3r] {
    width: 8%;
}

.col-vessel[b-w6qlwcxh3r] {
    width: 8%;
}

.tight-dropdown .btn[b-w6qlwcxh3r],
.tight-dropdown .dropdown-toggle[b-w6qlwcxh3r] {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.2;
}

.tight-dropdown .dropdown-action-button[b-w6qlwcxh3r],
.tight-dropdown .dropdown-toggle[b-w6qlwcxh3r] {
    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-w6qlwcxh3r] {
    display: block !important;
}

@media (max-width: 767.98px) {
    .pmxlist-desktop-table[b-w6qlwcxh3r] {
        display: none !important;
    }
}

/* Mobile cards - shown on mobile, hidden on md+ */
.pmxlist-mobile-cards[b-w6qlwcxh3r] {
    display: none !important;
}

@media (max-width: 767.98px) {
    .pmxlist-mobile-cards[b-w6qlwcxh3r] {
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.5rem;
    }
}

.pmxlist-card[b-w6qlwcxh3r] {
    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-w6qlwcxh3r] {
    border-left: 4px solid #dc3545;
}

.pmxlist-card.submit-today[b-w6qlwcxh3r] {
    border-left: 4px solid rgb(0, 164, 0);
}

.pmxlist-card.on-subs .pmxlist-card-title[b-w6qlwcxh3r] {
    color: #dc3545 !important;
}

.pmxlist-card.submit-today .pmxlist-card-title[b-w6qlwcxh3r] {
    color: rgb(0, 164, 0) !important;
}

.pmxlist-card.refresh-today[b-w6qlwcxh3r] {
    font-weight: bold;
}

.pmxlist-data-table tbody tr.automated-row[b-w6qlwcxh3r] {
    background-color: #dcdcdc !important;
    font-style: italic;
}

.pmxlist-card-header[b-w6qlwcxh3r] {
    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-w6qlwcxh3r] {
    font-size: 1rem;
}

.pmxlist-card-laycan[b-w6qlwcxh3r] {
    font-size: 0.8rem;
    color: #fff;
    background: #163E9F;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.pmxlist-card-body[b-w6qlwcxh3r] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pmxlist-card-row[b-w6qlwcxh3r] {
    display: flex;
    font-size: 0.875rem;
    line-height: 1.4;
}

.pmxlist-card-label[b-w6qlwcxh3r] {
    font-weight: 500;
    color: #666;
    min-width: 70px;
    flex-shrink: 0;
}

.pmxlist-card-row > span:last-child[b-w6qlwcxh3r] {
    color: #333;
    word-break: break-word;
}

.pmxlist-card-footer[b-w6qlwcxh3r] {
    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-w6qlwcxh3r] {
    font-size: 0.75rem;
    color: #888;
}

.pmxlist-card-actions[b-w6qlwcxh3r] {
    display: flex;
    gap: 0.2rem;
}

.pmxlist-edit-checkboxes-row[b-w6qlwcxh3r] {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.pmxlist-edit-checkboxes-row .form-check[b-w6qlwcxh3r] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pmxlist-offmkt-toggle[b-w6qlwcxh3r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pmxlist-offmkt-option[b-w6qlwcxh3r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.pmxlist-offmkt-radio[b-w6qlwcxh3r] {
    width: 18px;
    height: 18px;
    accent-color: var(--ssy-colour-main-bright-blue, #0087CB);
    cursor: pointer;
}






.pmx-status-badge[b-w6qlwcxh3r] {
    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-w6qlwcxh3r] {
    background: rgba(25, 135, 84, 0.15); /* bootstrap success tint */
    color: #198754;
}

.pmx-status-badge--muted[b-w6qlwcxh3r] {
    background: rgba(108, 117, 125, 0.15); /* bootstrap secondary tint */
    color: #6c757d;
}

/* Spreads Popup formatting */
.spreads-grid[b-w6qlwcxh3r] {
    display: grid;
    grid-template-columns: 25% 1fr 70px; /* Rate | Vessel | PnC */
    gap: 0.75rem;
    align-items: center;
}

.spreads-header[b-w6qlwcxh3r] {
    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-w6qlwcxh3r] {
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.spreads-center[b-w6qlwcxh3r] {
    display: flex;
    justify-content: center;
    align-items: center;
}

 
.pmx-floating-menu[b-w6qlwcxh3r] {
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    margin: 0;
}

.pmx-floating-menu--above[b-w6qlwcxh3r] {
    transform: translateY(-100%);
}

.pmx-floating-menu--left[b-w6qlwcxh3r] {
    transform: translateX(-100%);
}

.pmx-floating-menu--above-left[b-w6qlwcxh3r] {
    transform: translate(-100%, -100%);
}
/* /Components/Pages/Bulkers/PmxList/PmxList_121_RowSpreads.razor.rz.scp.css */
.rs121-wrapper[b-kam07isyd7] {
    display: flex;
    flex-direction: column;
}

.rs121-tabs[b-kam07isyd7] {
    margin-bottom: 1rem;
}

.rs121-input[b-kam07isyd7] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.rs121-num[b-kam07isyd7] {
    text-align: right;
}

.rs121-bkr-cell[b-kam07isyd7] {
    text-align: center;
}

.rs121-muted[b-kam07isyd7] {
    color: #888;
}

.rs121-placeholder[b-kam07isyd7] {
    color: #888;
    font-style: italic;
    margin: 0.5rem 0;
}

.rs121-footer[b-kam07isyd7] {
    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-kam07isyd7] {
    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-kam07isyd7]    { background: #1247b5; }
.rs121-save-all:disabled[b-kam07isyd7] { opacity: 0.55; cursor: default; }

.rs121-error[b-kam07isyd7] {
    color: #c00;
    font-size: 0.75rem;
}

.rs121-specs-warning[b-kam07isyd7] {
    color: #c00;
    font-size: 0.8rem;
    margin: 0 0 0.6rem;
}

.rs121-dist-warn[b-kam07isyd7] {
    color: #f59e0b;
    font-size: 0.75rem;
    margin-right: 0.25rem;
    cursor: default;
}

.ssy-table-dw[b-kam07isyd7] { width: 100%; }

.rs121-group-title[b-kam07isyd7] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #163E9F;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0.9rem 0 0.3rem;
}

.rs121-group-title:first-child[b-kam07isyd7] { margin-top: 0; }

/* Fixed layout + explicit per-column widths so the Route/BKR/Offer/Equiv/Bid columns line
   up across the separate per-market tables, instead of each auto-sizing off its own
   content. Two width sets since Scrubber Split only renders for scrubber-fitted vessels
   (same for every table in a given popup, so no per-table mismatch). */
.rs121-group-table[b-kam07isyd7] { table-layout: fixed; }

.rs121-group-table th:nth-child(1)[b-kam07isyd7], .rs121-group-table td:nth-child(1)[b-kam07isyd7] { width: 10%; }  /* Route */
.rs121-group-table th:nth-child(2)[b-kam07isyd7], .rs121-group-table td:nth-child(2)[b-kam07isyd7] { width: 5%; }   /* BKR */
.rs121-group-table th:nth-child(3)[b-kam07isyd7], .rs121-group-table td:nth-child(3)[b-kam07isyd7] { width: 8%; }   /* Offer */
.rs121-group-table th:nth-child(4)[b-kam07isyd7], .rs121-group-table td:nth-child(4)[b-kam07isyd7] { width: 7%; }   /* BB */
.rs121-group-table th:nth-child(5)[b-kam07isyd7], .rs121-group-table td:nth-child(5)[b-kam07isyd7] { width: 8%; }   /* DOP/APS */
.rs121-group-table th:nth-child(6)[b-kam07isyd7], .rs121-group-table td:nth-child(6)[b-kam07isyd7] { width: 20%; }  /* Offer (BKI Equiv) */
.rs121-group-table th:nth-child(7)[b-kam07isyd7], .rs121-group-table td:nth-child(7)[b-kam07isyd7] { width: 20%; }  /* Bid (BKI Equiv) */
.rs121-group-table th:nth-child(8)[b-kam07isyd7], .rs121-group-table td:nth-child(8)[b-kam07isyd7] { width: 8%; }   /* DOP/APS */
.rs121-group-table th:nth-child(9)[b-kam07isyd7], .rs121-group-table td:nth-child(9)[b-kam07isyd7] { width: 7%; }   /* Bid */
.rs121-group-table th:nth-child(10)[b-kam07isyd7], .rs121-group-table td:nth-child(10)[b-kam07isyd7] { width: 7%; } /* BB */

.rs121-group-table--scrubber th:nth-child(1)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(1)[b-kam07isyd7] { width: 9%; }
.rs121-group-table--scrubber th:nth-child(2)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(2)[b-kam07isyd7] { width: 4%; }
.rs121-group-table--scrubber th:nth-child(3)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(3)[b-kam07isyd7] { width: 7%; }
.rs121-group-table--scrubber th:nth-child(4)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(4)[b-kam07isyd7] { width: 6%; }
.rs121-group-table--scrubber th:nth-child(5)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(5)[b-kam07isyd7] { width: 7%; }
.rs121-group-table--scrubber th:nth-child(6)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(6)[b-kam07isyd7] { width: 17%; }
.rs121-group-table--scrubber th:nth-child(7)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(7)[b-kam07isyd7] { width: 17%; }
.rs121-group-table--scrubber th:nth-child(8)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(8)[b-kam07isyd7] { width: 7%; }
.rs121-group-table--scrubber th:nth-child(9)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(9)[b-kam07isyd7] { width: 8%; }    /* Bid */
.rs121-group-table--scrubber th:nth-child(10)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(10)[b-kam07isyd7] { width: 6%; }  /* BB */
.rs121-group-table--scrubber th:nth-child(11)[b-kam07isyd7], .rs121-group-table--scrubber td:nth-child(11)[b-kam07isyd7] { width: 12%; }  /* Scrubber Split */

.rs121-bonus-input[b-kam07isyd7] {
    width: 100%;
    text-align: center;
    border: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.rs121-aps-select[b-kam07isyd7] {
    width: 100%;
    font-size: 0.78rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
}

.rs121-split-cell[b-kam07isyd7] { white-space: nowrap; padding: 3px 6px; }

.rs121-split-row[b-kam07isyd7] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #555;
}

.rs121-split-input[b-kam07isyd7] {
    width: 38px;
    padding: 1px 3px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 11px;
    text-align: center;
}

.rs121-equiv-header[b-kam07isyd7] {
    text-align: center;
    background: #eef2fb;
    color: #163E9F;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rs121-spreads-field[b-kam07isyd7] {
    margin-top: 0.75rem;
}

.rs121-spreads-field label[b-kam07isyd7] {
    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-bn7ww0x4rr] { padding: 0.25rem 0; }

.rs122-msg[b-bn7ww0x4rr] { color: #888; font-style: italic; margin: 0.5rem 0; }
.rs122-num[b-bn7ww0x4rr] { text-align: center; color: #555; }

/* ── Filter bar ── */
.rs122-filterbar[b-bn7ww0x4rr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.rs122-filter-group[b-bn7ww0x4rr] {
    position: relative;
}

.rs122-filter-btn[b-bn7ww0x4rr] {
    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-bn7ww0x4rr]              { background: #f4f4f4; }
.rs122-filter-btn--active[b-bn7ww0x4rr]            { background: #e6f0ff; border-color: #4a90d9; color: #1a5fa8; }

/* ── Stem size toggle (EAus/Indo routes only) ── */
.rs122-stem-toggle[b-bn7ww0x4rr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.rs122-stem-toggle-label[b-bn7ww0x4rr] {
    font-size: 0.82rem;
    color: #555;
}

.rs122-stem-btn[b-bn7ww0x4rr] {
    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-bn7ww0x4rr]     { background: #f4f4f4; }
.rs122-stem-btn--active[b-bn7ww0x4rr]   { background: #e6f0ff; border-color: #4a90d9; color: #1a5fa8; font-weight: 600; }

.rs122-dropdown[b-bn7ww0x4rr] {
    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-bn7ww0x4rr] {
    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-bn7ww0x4rr]              { background: #f4f4f4; }
.rs122-dropdown-item--selected[b-bn7ww0x4rr]          { background: #e6f0ff; color: #1a5fa8; font-weight: 600; }

/* ── Active-route chip ── */
.rs122-active-chip[b-bn7ww0x4rr] {
    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-bn7ww0x4rr] {
    background: none;
    border: none;
    cursor: pointer;
    color: #4a90d9;
    font-size: 0.72rem;
    padding: 0;
    line-height: 1;
}

.rs122-chip-clear:hover[b-bn7ww0x4rr] { color: #c00; }

/* ── Row state classes ── */
.rs122-fresh[b-bn7ww0x4rr]         { color: #198754; font-weight: 600; }
.rs122-updated-today[b-bn7ww0x4rr] { font-weight: 600; }

.ssy-table-dw[b-bn7ww0x4rr] { width: 100%; }

.rs122-select-cell[b-bn7ww0x4rr] { width: 1%; text-align: center; }

.ssy-table-dw th[b-bn7ww0x4rr] { text-align: center; }

/* ── Editable offer cell ── */
.rs122-offer-cell[b-bn7ww0x4rr] {
    position: relative;
    white-space: nowrap;
}

.rs122-offer-input[b-bn7ww0x4rr] {
    width: 5rem;
    text-align: center;
    border: 1px solid #ccc;
    background: #fff;
    padding: 2px 4px;
    font-size: inherit;
    color: inherit;
    border-radius: 3px;
}

.rs122-offer-input:focus[b-bn7ww0x4rr] {
    border-color: #4a90d9;
    outline: none;
}

.rs122-save-btn[b-bn7ww0x4rr] {
    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-bn7ww0x4rr]    { background: #157347; }
.rs122-save-btn:disabled[b-bn7ww0x4rr] { opacity: 0.55; cursor: default; }

/* ── Ballast bonus (BB) + DOP/APS delivery basis, flanking the Offer/Bid inputs ── */
.rs122-bonus-input[b-bn7ww0x4rr] {
    width: 4rem;
    text-align: center;
    border: 1px solid #ccc;
    background: #fff;
    padding: 2px 4px;
    font-size: inherit;
    color: inherit;
    border-radius: 3px;
}

.rs122-bonus-input:focus[b-bn7ww0x4rr] {
    border-color: #4a90d9;
    outline: none;
}

.rs122-aps-select[b-bn7ww0x4rr] {
    width: 4.2rem;
    font-size: 0.78rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
}

.rs122-save-error[b-bn7ww0x4rr] {
    color: #c00;
    font-weight: 700;
    margin-left: 0.2rem;
    cursor: help;
}

.rs122-sort-th[b-bn7ww0x4rr] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    outline: none;
}

.rs122-sort-th:focus[b-bn7ww0x4rr],
.rs122-sort-th:focus-visible[b-bn7ww0x4rr] { outline: none; }

.rs122-sort-th:hover[b-bn7ww0x4rr] { background: #dde6f8; }

.rs122-sort-active[b-bn7ww0x4rr] { background: #d0ddf5; }

.rs122-sort-icon[b-bn7ww0x4rr] {
    font-size: 0.7rem;
    margin-left: 0.2rem;
    vertical-align: middle;
}

.rs122-sort-icon--dim[b-bn7ww0x4rr] { opacity: 0.3; }

.rs122-equiv-header[b-bn7ww0x4rr] {
    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-bn7ww0x4rr] { text-align: center; padding: 0 4px; white-space: nowrap; }

.rs122-copy-overlay[b-bn7ww0x4rr] {
    position: fixed;
    inset: 0;
    z-index: 1499;
}

.rs122-copy-menu[b-bn7ww0x4rr] {
    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-bn7ww0x4rr] {
    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-bn7ww0x4rr] {
    padding: 4px 12px 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #163E9F;
}

.rs122-copy-item[b-bn7ww0x4rr] {
    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-bn7ww0x4rr] { background: #f0f4ff; }

.rs122-copy-divider[b-bn7ww0x4rr] {
    margin: 4px 0;
    border-top: 1px solid #e8e8e8;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_123_RouteTerms.razor.rz.scp.css */
.rs123-msg[b-xr2oad7qrs] { color: #888; font-style: italic; }

.rs123-trade[b-xr2oad7qrs] { margin-bottom: 1.5rem; }
.rs123-trade + .rs123-trade[b-xr2oad7qrs] { border-top: 1px solid #e5e7eb; padding-top: 1rem; }

.rs123-trade .ssy-table-dw[b-xr2oad7qrs] { width: 100%; }

/* Headers and cells share one alignment */
.rs123-trade .ssy-table-dw th[b-xr2oad7qrs],
.rs123-trade .ssy-table-dw td[b-xr2oad7qrs] { text-align: center; }

.rs123-trade-name[b-xr2oad7qrs] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #163E9F;
    margin-bottom: 0.5rem;
}

/* Copy button under the info line, right-aligned; dropdown opens beneath it */
.rs123-copy[b-xr2oad7qrs] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.rs123-copy-btn[b-xr2oad7qrs] {
    font-size: 0.8rem;
    padding: 2px 10px;
}

.rs123-copy-backdrop[b-xr2oad7qrs] {
    position: fixed;
    inset: 0;
    z-index: 1999;
}

/* Bootstrap dropdown-menu (matches the 120 copy menu); anchored to the button's right edge */
.rs123-copy .rs123-copy-menu[b-xr2oad7qrs] {
    top: 100%;
    right: 0;
    left: auto;
    z-index: 2000;
}

.rs123-meta[b-xr2oad7qrs] {
    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-wo6olq4xe7] { color: #888; font-style: italic; }
.ssy-table-dw[b-wo6olq4xe7] { width: 100%; }
.ssy-table-dw td[b-wo6olq4xe7] { text-align: center; }
/* /Components/Pages/Bulkers/PmxList/PmxList_125_LookupCompact.razor.rz.scp.css */
.pmxlist-lookupcompact[b-cxcisog1yq] {
    height: 100%;
}

.pmxlist-lookupcompact-row[b-cxcisog1yq] {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem;
    height: 100%;
}

.pmxlist-lookupcompact-search[b-cxcisog1yq] {
    flex: 0 0 auto;
    min-width: 260px;
}

.pmxlist-lookupcompact-search-row[b-cxcisog1yq] {
    display: flex;
    gap: 0.4rem;
}

.pmxlist-lookupcompact-search-msg[b-cxcisog1yq] {
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.pmxlist-lookupcompact-table[b-cxcisog1yq] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    table-layout: fixed;
}

.pmxlist-lookupcompact-table td[b-cxcisog1yq] {
    vertical-align: middle;
}

.pmxlist-lookupcompact-table th[b-cxcisog1yq],
.pmxlist-lookupcompact-table td[b-cxcisog1yq] {
    border-right: 1px solid #d9dee3;
}

.pmxlist-lookupcompact-table th:last-child[b-cxcisog1yq],
.pmxlist-lookupcompact-table td:last-child[b-cxcisog1yq] {
    border-right: none;
}

/* Quick BKI check -- same look as the "Value vs. BKI" panel in PmxList_110_Header.razor,
   duplicated here (not shared) because this component must stay self-contained/CSS-isolated so
   it renders correctly even on pages where PmxList_110_Header isn't also present (e.g. Atlantic
   tabs, which render PmxList_111_Header instead). */
.pmxlist-lookupcompact-quickcalc[b-cxcisog1yq] {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 260px;
    padding: 0 0.5rem;
    border-left: 1px solid #e0e6eb;
    border-right: 1px solid #e0e6eb;
}

.pmx-quickcalc-header[b-cxcisog1yq] {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.pmx-quickcalc-placeholder[b-cxcisog1yq] {
    color: #6c757d;
    font-size: 0.9rem;
}

.pmx-quickcalc-warning[b-cxcisog1yq] {
    color: #b02a37;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.pmx-quickcalc-table[b-cxcisog1yq] {
    font-size: 0.85rem;
}

.pmx-quickcalc-pos[b-cxcisog1yq] {
    color: #157347;
    font-weight: 600;
}

.pmx-quickcalc-neg[b-cxcisog1yq] {
    color: #b02a37;
    font-weight: 600;
}
/* /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-hbvq293a4n] {
    border-left: 4px solid #ffc107;
    padding-left: 8px;
    background-color: #fffdf5;
}






.vd140-tags-panel td[b-hbvq293a4n] { vertical-align: middle; }

.tag-left[b-hbvq293a4n] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tag-name[b-hbvq293a4n] {
    font-size: 0.95rem;
    font-weight: 600;
}

.tag-text[b-hbvq293a4n] {
    display: flex;
    flex-direction: column;
}

.tag-context[b-hbvq293a4n] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 2px;
}

.tag-updated[b-hbvq293a4n] {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
    text-align: right;
}

.tag-status[b-hbvq293a4n] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.tag-status.applied[b-hbvq293a4n] {
    background-color: #28a745;
    color: white;
}

.tag-status.not-applied[b-hbvq293a4n] {
    background-color: #dee2e6;
    color: transparent;
}

.tag-editable-row[b-hbvq293a4n] { cursor: pointer; }
.tag-disabled-row[b-hbvq293a4n] { opacity: 0.65; }

/* ── Commercial Details two-column layout ── */
.vd140-desc-layout[b-hbvq293a4n]  { display: flex; gap: 16px; } /* default stretch so the tags divider runs full height */
.vd140-specs-panel[b-hbvq293a4n]  { flex: 0 0 62%; }
.vd140-tags-panel[b-hbvq293a4n]   { flex: 1; min-width: 0; padding-left: 16px; border-left: 1px solid #e5e5e5; } /* faint divider from the specs side */
.vd140-tables-row[b-hbvq293a4n]   { display: flex; gap: 16px; align-items: flex-start; }
.vd140-options-col[b-hbvq293a4n]  { flex: 1; }

.vd140-options-col table[b-hbvq293a4n],
.vd140-tags-panel table[b-hbvq293a4n] { width: 100%; }

/* Aux/Port consumptions as a 2x2 grid (label|value|label|value) instead of 4 stacked
   rows, to save vertical height. */
.vd140-cons-table td:nth-child(1)[b-hbvq293a4n],
.vd140-cons-table td:nth-child(3)[b-hbvq293a4n] {
    white-space: nowrap;
}

.vd140-section-header[b-hbvq293a4n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.vd140-section-title[b-hbvq293a4n] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #555;
}

/* Title + edit/save/cancel buttons sharing the single header cell of the Specs / Consumptions tables */
.vd140-table-title[b-hbvq293a4n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vd140-table-actions[b-hbvq293a4n] { display: flex; gap: 4px; }

.vd140-add-row[b-hbvq293a4n] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
}

.vd140-add-label[b-hbvq293a4n] {
    font-size: 11.5px;
    color: #777;
}

.vd140-oap-cell[b-hbvq293a4n]  { color: #92400e; font-weight: 600; }

.vd140-error[b-hbvq293a4n] {
    color: #b91c1c;
    font-size: 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    padding: 4px 10px;
    margin-bottom: 6px;
}

.vd140-updated[b-hbvq293a4n] { margin-top: 6px; font-size: 11px; color: #999; }
.vd140-empty[b-hbvq293a4n]   { font-size: 12.5px; color: #aaa; }

/* Panel title row ("Vessel Data" / "Commercial Tags"); optional right-aligned meta (last updated) */
.vd140-panel-title[b-hbvq293a4n] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.vd140-specs-updated[b-hbvq293a4n] {
    font-size: 11px;
    font-weight: normal;
    color: #555;
}
.vd140-specs-updated span[b-hbvq293a4n] { color: #777; }
/* /Components/Pages/Bulkers/PmxList/PmxList_210_LookupTab.razor.rz.scp.css */
/* Base .refresh-today style in pmxlist-shared.css */

.ssy-table-dw .submit-today[b-4sin0ps67m] {
    color: rgb(0, 164, 0); /* Turns Cargo Green if Added Today */
    font-weight: bold;
}

.ssy-table-dw .on-subs[b-4sin0ps67m] {
    color: rgb(255, 0, 0); /* Turns Cargo Red if On Subs */
    font-weight: bold;
}

.ssy-table-dw .highlighted-row[b-4sin0ps67m] {
    background-color: #c3e6cb; /* Slightly darker green */
    border-left: 5px solid #28a745; /* Deeper green accent */
}

.ssy-table-dw .within-laycan[b-4sin0ps67m] {
    background-color: #c3e6cb; /* Slightly darker green */
    border-left: 5px solid #28a745; /* Deeper green accent */
}

.ssy-table-dw .within-laycan.on-subs[b-4sin0ps67m] {
    background-color: #c3e6cb;
    border-left: 5px solid #28a745;
    color: rgb(255, 0, 0);
    font-weight: bold;
}

.ssy-table-dw .within-laycan.submit-today[b-4sin0ps67m] {
    background-color: #c3e6cb;
    border-left: 5px solid #28a745;
    color: rgb(0, 164, 0);
    font-weight: bold;
}

.ssy-table-dw .within-laycan.refresh-today[b-4sin0ps67m] {
    background-color: #c3e6cb;
    border-left: 5px solid #28a745;
    font-weight: bold;
}

.pmxlist-btn-hover:hover[b-4sin0ps67m] {
    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-4sin0ps67m] {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

@media (min-width: 768px) {
    .lookup-mobile-cards[b-4sin0ps67m] {
        display: none !important;
    }
}

/* Desktop table - hidden by default, shown on md+ */
.lookup-desktop-table[b-4sin0ps67m] {
    display: none !important;
}

@media (min-width: 768px) {
    .lookup-desktop-table[b-4sin0ps67m] {
        display: table !important;
    }
}

.lookup-card[b-4sin0ps67m] {
    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-4sin0ps67m] {
    background-color: #c3e6cb;
    border-left: 4px solid #28a745;
}

.lookup-card.on-subs[b-4sin0ps67m] {
    border-left: 4px solid #dc3545;
}

.lookup-card.on-subs .lookup-card-title[b-4sin0ps67m] {
    color: #dc3545;
}

.lookup-card.submit-today .lookup-card-title[b-4sin0ps67m] {
    color: rgb(0, 164, 0);
}

.lookup-card.refresh-today[b-4sin0ps67m] {
    font-weight: bold;
}

.lookup-card-header[b-4sin0ps67m] {
    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-4sin0ps67m] {
    font-weight: 600;
    font-size: 1rem;
    color: #000061;
}

.lookup-card-eta[b-4sin0ps67m] {
    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-4sin0ps67m] {
    background: #28a745;
    color: #fff;
}

.lookup-card-body[b-4sin0ps67m] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lookup-card-row[b-4sin0ps67m] {
    display: flex;
    font-size: 0.875rem;
    line-height: 1.4;
}

.lookup-card-label[b-4sin0ps67m] {
    font-weight: 500;
    color: #666;
    min-width: 80px;
    flex-shrink: 0;
}

.lookup-card-row > span:last-child[b-4sin0ps67m] {
    color: #333;
    word-break: break-word;
}

.tight-dropdown .btn[b-4sin0ps67m],
.tight-dropdown .dropdown-toggle[b-4sin0ps67m] {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.2;
}

.tight-dropdown .dropdown-action-button[b-4sin0ps67m],
.tight-dropdown .dropdown-toggle[b-4sin0ps67m] {
    padding-left: 2px;
    padding-right: 2px;
    min-width: unset;
}



.collapse-arrow[b-4sin0ps67m] {
    display: inline-block;
    transition: transform 150ms ease-in-out;
}

.collapse-arrow.collapsed[b-4sin0ps67m] {
    transform: rotate(-180deg);
}



.lookup-title[b-4sin0ps67m] {
    font-size: 16px;
    font-weight: bold;
    font-family: Georgia, serif;
    color: rgb(0, 0, 97);
}

.filter-panel[b-4sin0ps67m] {
    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-4sin0ps67m] {
    flex: 0 0 50%;
    min-width: 0;

    display: flex;
    flex-wrap: wrap;          /* <-- key */
    gap: 2px 3px;
    align-items: center;
}

.filter-right-panel[b-4sin0ps67m] {
    flex: 0 0 50%;
    min-width: 0;

    display: flex;
    flex-wrap: wrap;          /* <-- key */
    gap: 2px 3px;
    align-items: center;
}

.pmxlist-header-actions[b-4sin0ps67m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.pmxlist-header-actions__filters[b-4sin0ps67m] {
    display: flex;
    gap: 0.5rem;
}

.pmxlist-warning-indicator[b-4sin0ps67m] {
    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-4sin0ps67m] {
    font-size: 1.1rem;
    color: rgb(255, 0, 0);
    cursor: pointer;
}

.filter-wrap[b-4sin0ps67m] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: flex-start;
}

.filter-item[b-4sin0ps67m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;     /* hug label content instead of a fixed 260px column */
}

.filter-item label[b-4sin0ps67m] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.2;
}

.lookup-desktop-table tbody td[b-4sin0ps67m] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.lookup-desktop-table tbody tr:last-child td[b-4sin0ps67m] {
    border-bottom: none;
}

.pmxlist-iphone-textarea[b-4sin0ps67m] {
    width: 100%;
    min-height: 20vh;
    border: 1px solid #d9e3ea;
    border-radius: 12px;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_300_FixturesParent.razor.rz.scp.css */
/* Mobile Responsiveness */
@media (max-width: 768px) {
    .pmx-search-input[b-0eby5ecgwf] {
        width: 100% !important;
        max-width: none;
    }

    .pmx-legend[b-0eby5ecgwf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .pmx-copy-text[b-0eby5ecgwf] {
        font-size: 1rem;
        margin-left: 0;
        margin-right: 0;
    }

    .sticky-header[b-0eby5ecgwf] {
        padding: 0.5rem;
    }

    .pmx-title[b-0eby5ecgwf] {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    /* Stack filter controls vertically on mobile */
    .pmx-filters-row .row > .col-md-7[b-0eby5ecgwf],
    .pmx-filters-row .row > .col-md-5[b-0eby5ecgwf] {
        margin-bottom: 0.5rem;
    }

    .pmx-filters-row .row > .col-md-7 .row[b-0eby5ecgwf] {
        flex-direction: column;
        align-items: stretch !important;
    }

    .pmx-filters-row .row > .col-md-7 .col-auto[b-0eby5ecgwf] {
        margin-bottom: 0.5rem;
    }

    /* Make buttons larger for touch */
    .btn[b-0eby5ecgwf] {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-sm[b-0eby5ecgwf] {
        min-height: 36px;
        min-width: 36px;
    }

    /* Improve checkbox labels for touch */
    .ssy-checkbox-slider[b-0eby5ecgwf] {
        transform: scale(1.2);
        margin-right: 0.5rem;
    }

    /* Stack action buttons vertically */
    .pmx-filters-row .row > .col-md-5 .row[b-0eby5ecgwf] {
        flex-direction: column;
        align-items: stretch;
    }

    .pmx-filters-row .row > .col-md-5 .col-auto[b-0eby5ecgwf] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .pmx-filters-row .row > .col-md-5 .col-auto button[b-0eby5ecgwf] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .pmx-title[b-0eby5ecgwf] {
        font-size: 1.1rem;
    }

    .pmx-title-legend[b-0eby5ecgwf] {
        font-size: 0.9rem;
    }

    .sticky-header[b-0eby5ecgwf] {
        padding: 0.25rem;
    }

    /* Hide less critical elements on very small screens */
    .pmx-legend span:not(:first-child)[b-0eby5ecgwf] {
        display: none;
    }

    .pmx-legend span:first-child[b-0eby5ecgwf]::after {
        content: " • *Refreshed Today • *On Subs";
        color: inherit;
    }
}

/* Table responsiveness */
@media (max-width: 768px) {
    .main-table[b-0eby5ecgwf] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ssy-table-dw[b-0eby5ecgwf] {
        min-width: 1200px; /* Ensure table maintains its width for scrolling */
        font-size: 0.875rem;
    }

    .ssy-table-dw th[b-0eby5ecgwf],
    .ssy-table-dw td[b-0eby5ecgwf] {
        padding: 0.5rem 0.25rem;
        white-space: nowrap;
    }

    /* Make checkboxes larger for touch */
    .ssy-table-dw input[type="checkbox"][b-0eby5ecgwf] {
        transform: scale(1.2);
        margin: 0;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    .btn[b-0eby5ecgwf] {
        min-height: 48px;
        min-width: 48px;
    }

    .dropdown-item[b-0eby5ecgwf] {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    .form-control[b-0eby5ecgwf] {
        min-height: 44px;
        font-size: 1rem;
    }
}

/* Mobile Action Bar */
.mobile-action-bar[b-0eby5ecgwf] {
    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-0eby5ecgwf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-action-buttons .btn[b-0eby5ecgwf] {
    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-0eby5ecgwf] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-action-buttons .btn:active[b-0eby5ecgwf] {
    transform: scale(0.95);
}

/* Mobile Table Summary */
@media (max-width: 576px) {
    .mobile-table-summary[b-0eby5ecgwf] {
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px;
        margin: 8px 0;
        font-size: 0.9rem;
    }

    .mobile-table-summary .summary-header[b-0eby5ecgwf] {
        font-weight: 600;
        color: #163E9F;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-table-summary .summary-stats[b-0eby5ecgwf] {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .mobile-table-summary .stat-item[b-0eby5ecgwf] {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 60px;
    }

    .mobile-table-summary .stat-value[b-0eby5ecgwf] {
        font-size: 1.1rem;
        font-weight: 700;
        color: #163E9F;
    }

    .mobile-table-summary .stat-label[b-0eby5ecgwf] {
        font-size: 0.8rem;
        color: #666;
        text-align: center;
    }

    .mobile-table-summary .expand-toggle[b-0eby5ecgwf] {
        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-0eby5ecgwf] {
        background: #163E9F;
        color: white;
    }
}

.pmx-list-table[b-0eby5ecgwf] {
    display: flex; 
    flex-direction: row;
    margin: 0 1%;
}

.container-relative[b-0eby5ecgwf] {
    position: relative;
    width: 100%;
}

.lookup-panel[b-0eby5ecgwf] {
    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-0eby5ecgwf] {
    right: 0;
    opacity: 1;
}

.table-wrapper[b-0eby5ecgwf] {
    transition: margin-right 0.4s ease;
    margin-right: 0;
}

.table-wrapper.shifted[b-0eby5ecgwf] {
    margin-right: 50%; /* match lookup-panel width */
}

.sticky-header[b-0eby5ecgwf] {
    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-0eby5ecgwf] {
    display: flex;
    width: 100%;
    transition: all 0.3s ease;  
}

.main-table[b-0eby5ecgwf] {
    transition: all 0.3s ease;
}

.full-width[b-0eby5ecgwf] {
    width: 100%;
}

.half-width[b-0eby5ecgwf] {
    width: 40%;
}

.lookup-tab-panel[b-0eby5ecgwf] {
    width: 100%;
    transition: all 0.3s ease;
    border-left: 2px solid black;
    
}

.pmxlist-title-row[b-0eby5ecgwf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.pmxlist-title[b-0eby5ecgwf] {
    margin-bottom: 0.5rem;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
    font-weight: 600;
}

.pmxlist-count[b-0eby5ecgwf] {
    font-weight: 400;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    font-size: 1rem;
}

.pmxlist-legend[b-0eby5ecgwf] {
    color: var(--ssy-colour-palette-slate-gray, #405864);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}

.pmxlist-filters-row[b-0eby5ecgwf] {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e0e6eb;
    padding-bottom: 0.5rem;
    gap: 0.25rem;
}

.pmxlist-search-input[b-0eby5ecgwf] {
    width: 250px;
    height: 1.6rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

:global(.pmxlist-compact-btn)[b-0eby5ecgwf] {
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

.pmxlist-copy-label[b-0eby5ecgwf] {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0 0.5rem 0 0.75rem;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
}

.pmxlist-mainsection[b-0eby5ecgwf] {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    /*margin: auto;*/
    display: flex;
    flex-direction: column;
}

.pmxlist-header[b-0eby5ecgwf] {
    width: 100%;
    background-color: #F4F7F9;
    padding: 2px 4px 0 4px;
    box-sizing: border-box;
}

.pmxlist-datasection[b-0eby5ecgwf] {
    flex: 1;
    display: flex;
    overflow: hidden; /* Prevent parent scroll */
}

.pmxlist-datacolumn[b-0eby5ecgwf] {
    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-0eby5ecgwf] {
    flex: 1 1 95%;
}
.pmxlist-split-column1[b-0eby5ecgwf] {
    flex: 0 0 40%;
}
.pmxlist-split-column2[b-0eby5ecgwf] {
    flex: 0 0 60%;
}










/* container that holds table + lookup */
.pmxlist-datasection.pmxlist-vertical[b-0eby5ecgwf] {
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-0eby5ecgwf] {
/* keep your existing behaviour, or nothing if current CSS already handles it */
}

/* top 1/4 */
.pmxlist-top-panel[b-0eby5ecgwf] {
flex: 0 0 20%;
min-height: 0;
overflow: auto;         /* table scrolls if content exceeds 25% */
}

/* bottom 3/4 */
.pmxlist-bottom-panel[b-0eby5ecgwf] {
flex: 1 1 80%;
min-height: 0;
overflow: auto;         /* lookup scrolls if needed */
}

/* when lookup is off */
.pmxlist-full-panel[b-0eby5ecgwf] {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}

.pmxlist-datasection.pmxlist-vertical .pmxlist-bottom-panel[b-0eby5ecgwf] {
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-3v4689mgvj] {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    padding: 0 1rem;
}

@media (max-width: 768px) {
    .panamaxlist-header-form[b-3v4689mgvj] {
        width: 100vw;
        margin-left: -1rem;
        padding: 0 1rem;
    }
}

.fixture-inline-row[b-3v4689mgvj] {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    white-space: nowrap;
}

.fixture-inline-title[b-3v4689mgvj] {
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

.inline-field[b-3v4689mgvj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.inline-field label[b-3v4689mgvj] {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.inline-field .form-control[b-3v4689mgvj],
.inline-field input[b-3v4689mgvj],
.inline-field select[b-3v4689mgvj] {
    width: 220px;
}

.inline-field.details-field .form-control[b-3v4689mgvj],
.inline-field.details-field input[b-3v4689mgvj],
.inline-field.details-field select[b-3v4689mgvj] {
    min-width: 420px;
}

.inline-field.vessel-field .form-control[b-3v4689mgvj],
.inline-field.vessel-field input[b-3v4689mgvj],
.inline-field.vessel-field select[b-3v4689mgvj] {
    width: 260px;
}

.inline-button[b-3v4689mgvj] {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex: 0 0 auto;
}

.inline-button button[b-3v4689mgvj] {
    white-space: nowrap;
}

.validation-row[b-3v4689mgvj] {
    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-szoocq13b9] {
    width: 3%;
    text-align: center;
}

.col-fixed-date[b-szoocq13b9] {
    width: 9%;
    white-space: nowrap;
}

.col-vessel[b-szoocq13b9] {
    width: 11%;
}

.col-details[b-szoocq13b9] {
    width: auto;
}

.col-submarket[b-szoocq13b9] {
    width: 12%;
    white-space: nowrap;
}

.col-pnc[b-szoocq13b9] {
    width: 4%;
    text-align: center;
}

.col-actions[b-szoocq13b9] {
    width: 7%;
    text-align: center;
}

/* Date navigation arrows */
.date-arrows-left[b-szoocq13b9],
.date-arrows-right[b-szoocq13b9] {
    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-szoocq13b9],
.date-arrows-right:hover[b-szoocq13b9] {
    color: #007bff;
}

.date-arrows-left:disabled[b-szoocq13b9],
.date-arrows-right:disabled[b-szoocq13b9] {
    color: #ccc;
    cursor: default;
}

/* Icon dropdown box styles now in pmxlist-shared.css */

.fixtures-toolbar[b-szoocq13b9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.1rem;
    background: #F4F7F9;
    width: 100%;
    padding: 0.2rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    flex-wrap: wrap;
}

.fixtures-toolbar-left[b-szoocq13b9],
.fixtures-toolbar-middle[b-szoocq13b9],
.fixtures-toolbar-right[b-szoocq13b9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fixtures-toolbar-left label[b-szoocq13b9] {
    margin-bottom: 0;
    white-space: nowrap;
}

.fixtures-toolbar-middle[b-szoocq13b9] {
    flex-wrap: wrap;
}

.fixtures-toolbar-right[b-szoocq13b9] {
    margin-left: auto;
}

/* Copy controls: match PmxList_100's selection text / Clear / compact dropdown */
.fixtures-copy-selection-text[b-szoocq13b9] {
    min-width: 6rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ssy-colour-palette-slate-gray, #405864);
}

.fixtures-copy-clear-btn:disabled[b-szoocq13b9] {
    background-color: #dcdcdc;
    border-color: #dcdcdc;
    color: #8a8a8a;
    cursor: not-allowed;
}

.fixtures-toolbar-right[b-szoocq13b9]  button.pmxlist-compact-dropdown-btn {
    padding: 0.15rem 0.65rem !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    height: auto !important;
}

.pmxlist-updated-text[b-szoocq13b9] {
    font-size: 10px;
    color: #888;
    text-align: center;
    margin-top: 2px;
}

.pmxlist-iphone-textarea[b-szoocq13b9] {
    width: 100%;
    min-height: 20vh;
    border: 1px solid #d9e3ea;
    border-radius: 12px;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_401_CargoArchive.razor.rz.scp.css */
.pmx-snapshot-archive .row-today[b-5pzwgg2ay2] {
    font-weight: bold;
}

.pmx-snapshot-archive .archive-banner[b-5pzwgg2ay2] {
    transition: opacity 0.5s ease;
    opacity: 1;
}

.pmx-snapshot-archive .archive-banner.fading[b-5pzwgg2ay2] {
    opacity: 0;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_402_TonnageArchive.razor.rz.scp.css */
/* Styles for the Panamaxlist Table Parser component */

.panamaxlist-parser h3[b-azn38eejre] {
    color: #333;
    margin-bottom: 1.5rem;
}

.panamaxlist-parser textarea[b-azn38eejre] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* Parsed results: colours/striping/hover come from ssy-table-dw, dividers from pmxlist-table-dividers;
   this only adds width, sticky header and padding */
.panamaxlist-parser .parser-results-table[b-azn38eejre] {
    width: 100%;
    margin-top: 1rem;
}

.panamaxlist-parser .parser-results-table thead th[b-azn38eejre] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.panamaxlist-parser .parser-results-table td[b-azn38eejre],
.panamaxlist-parser .parser-results-table th[b-azn38eejre] {
    padding: 4px 8px;
    vertical-align: middle;
}

/* Row whose IMO went Fixed/Deleted/On Subs etc. in the last 36h -- candidate for removal.
   Set on the td so it wins over ssy-table-dw's tr striping. */
.panamaxlist-parser .parser-results-table tr.parser-row-flagged td[b-azn38eejre] {
    background-color: #fff3cd;
}

.panamaxlist-parser input[type="checkbox"][b-azn38eejre] {
    cursor: pointer;
}

.panamaxlist-parser .alert[b-azn38eejre] {
    animation: fadeIn-b-azn38eejre 0.5s;
}

/* Search functionality styles */
.search-container[b-azn38eejre] {
    min-width: 300px;
    margin-left: 1rem;
}

@media (max-width: 767.98px) {
    .search-container[b-azn38eejre] {
        min-width: 0;
        width: 100%;
        margin-left: 0;
    }
}

.search-results-count[b-azn38eejre] {
    text-align: right;
    margin-top: 0.25rem;
    color: #6c757d;
}

.panamaxlist-parser .input-group-append button[b-azn38eejre] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.panamaxlist-parser .input-group-append button span[b-azn38eejre] {
    font-size: 1.5rem;
    line-height: 0.5;
    display: inline-block;
}

/* Upload feedback styles */
.upload-feedback[b-azn38eejre] {
    position: relative;
    padding-bottom: 2rem;
}

.upload-progress[b-azn38eejre] {
    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-azn38eejre] {
    height: 100%;
    width: 0;
    background-color: #17a2b8;
    animation: progress-b-azn38eejre 3s ease-in-out forwards;
}

@keyframes progress-b-azn38eejre {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes fadeIn-b-azn38eejre {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/Bulkers/PmxList/PmxList_403_FixturesArchive.razor.rz.scp.css */
.pmx-fixtures-archive .fixtures-archive-actions[b-sjt6rzy6uc] {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pmx-fixtures-archive .row-today[b-sjt6rzy6uc] {
    font-weight: bold;
}

.pmx-fixtures-archive .fixture-region-heading[b-sjt6rzy6uc] {
    margin: 1rem 0 0.35rem;
}

.pmx-fixtures-archive .fixture-region-table[b-sjt6rzy6uc] {
    margin-bottom: 1rem;
}

.pmx-fixtures-archive .fixture-text-edit[b-sjt6rzy6uc] {
    field-sizing: content;
    resize: vertical;
    font-size: 0.9rem;
}

.pmx-fixtures-archive .archive-banner[b-sjt6rzy6uc] {
    transition: opacity 0.5s ease;
    opacity: 1;
}

.pmx-fixtures-archive .archive-banner.fading[b-sjt6rzy6uc] {
    opacity: 0;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_520_PendingTonnage.razor.rz.scp.css */
/* Styles for the Panamaxlist Table Parser component */

.panamaxlist-parser h3[b-fbschx2u9p] {
    color: #333;
    margin-bottom: 1.5rem;
}

.panamaxlist-parser textarea[b-fbschx2u9p] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.panamaxlist-parser .table[b-fbschx2u9p] {
    margin-top: 1rem;
}

.panamaxlist-parser .table thead th[b-fbschx2u9p] {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.panamaxlist-parser .table td[b-fbschx2u9p], .panamaxlist-parser .table th[b-fbschx2u9p] {
    padding: 0.5rem;
    vertical-align: middle;
}

.panamaxlist-parser input[type="checkbox"][b-fbschx2u9p] {
    cursor: pointer;
}

.panamaxlist-parser .alert[b-fbschx2u9p] {
    animation: fadeIn-b-fbschx2u9p 0.5s;
}

/* Search functionality styles */
.search-container[b-fbschx2u9p] {
    min-width: 300px;
    margin-left: 1rem;
}

.search-results-count[b-fbschx2u9p] {
    text-align: right;
    margin-top: 0.25rem;
    color: #6c757d;
}

.panamaxlist-parser .input-group-append button[b-fbschx2u9p] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.panamaxlist-parser .input-group-append button span[b-fbschx2u9p] {
    font-size: 1.5rem;
    line-height: 0.5;
    display: inline-block;
}

/* Upload feedback styles */
.upload-feedback[b-fbschx2u9p] {
    position: relative;
    padding-bottom: 2rem;
}

.upload-progress[b-fbschx2u9p] {
    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-fbschx2u9p] {
    height: 100%;
    width: 0;
    background-color: #17a2b8;
    animation: progress-b-fbschx2u9p 3s ease-in-out forwards;
}

@keyframes progress-b-fbschx2u9p {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes fadeIn-b-fbschx2u9p {
    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-ns6fiy1kz6] {
    color: #333;
    margin-bottom: 1.5rem;
}

.panamaxlist-parser textarea[b-ns6fiy1kz6] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.panamaxlist-parser .table[b-ns6fiy1kz6] {
    margin-top: 1rem;
}

.panamaxlist-parser .table thead th[b-ns6fiy1kz6] {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.panamaxlist-parser .table td[b-ns6fiy1kz6], .panamaxlist-parser .table th[b-ns6fiy1kz6] {
    padding: 0.5rem;
    vertical-align: middle;
}

.panamaxlist-parser input[type="checkbox"][b-ns6fiy1kz6] {
    cursor: pointer;
}

.panamaxlist-parser .alert[b-ns6fiy1kz6] {
    animation: fadeIn-b-ns6fiy1kz6 0.5s;
}

/* Search functionality styles */
.search-container[b-ns6fiy1kz6] {
    min-width: 300px;
    margin-left: 1rem;
}

.search-results-count[b-ns6fiy1kz6] {
    text-align: right;
    margin-top: 0.25rem;
    color: #6c757d;
}

.panamaxlist-parser .input-group-append button[b-ns6fiy1kz6] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.panamaxlist-parser .input-group-append button span[b-ns6fiy1kz6] {
    font-size: 1.5rem;
    line-height: 0.5;
    display: inline-block;
}

/* Upload feedback styles */
.upload-feedback[b-ns6fiy1kz6] {
    position: relative;
    padding-bottom: 2rem;
}

.upload-progress[b-ns6fiy1kz6] {
    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-ns6fiy1kz6] {
    height: 100%;
    width: 0;
    background-color: #17a2b8;
    animation: progress-b-ns6fiy1kz6 3s ease-in-out forwards;
}

@keyframes progress-b-ns6fiy1kz6 {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes fadeIn-b-ns6fiy1kz6 {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/Bulkers/PmxList/PmxList_598_Verification.razor.rz.scp.css */
.pmxlist-verification-subline[b-hq8pj51x4h] {
    font-size: 0.85em;
    font-weight: 700;
    color: #6c757d;
    margin-top: 1px;
}

.pmxlist-verification-wrap[b-hq8pj51x4h] {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.pmxlist-verification-reason[b-hq8pj51x4h] {
    color: #b02a37;
    font-weight: 600;
}

.pmxlist-verification-source[b-hq8pj51x4h] {
    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-9506olwyzp] {
    color: #333;
    margin-bottom: 1.5rem;
}

.panamaxlist-parser textarea[b-9506olwyzp] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.panamaxlist-parser .table[b-9506olwyzp] {
    margin-top: 1rem;
}

.panamaxlist-parser .table thead th[b-9506olwyzp] {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.panamaxlist-parser .table td[b-9506olwyzp], .panamaxlist-parser .table th[b-9506olwyzp] {
    padding: 0.5rem;
    vertical-align: middle;
}

.panamaxlist-parser input[type="checkbox"][b-9506olwyzp] {
    cursor: pointer;
}

.panamaxlist-parser .alert[b-9506olwyzp] {
    animation: fadeIn-b-9506olwyzp 0.5s;
}

/* Search functionality styles */
.search-container[b-9506olwyzp] {
    min-width: 300px;
    margin-left: 1rem;
}

.search-results-count[b-9506olwyzp] {
    text-align: right;
    margin-top: 0.25rem;
    color: #6c757d;
}

.panamaxlist-parser .input-group-append button[b-9506olwyzp] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.panamaxlist-parser .input-group-append button span[b-9506olwyzp] {
    font-size: 1.5rem;
    line-height: 0.5;
    display: inline-block;
}

/* Upload feedback styles */
.upload-feedback[b-9506olwyzp] {
    position: relative;
    padding-bottom: 2rem;
}

.upload-progress[b-9506olwyzp] {
    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-9506olwyzp] {
    height: 100%;
    width: 0;
    background-color: #17a2b8;
    animation: progress-b-9506olwyzp 3s ease-in-out forwards;
}

@keyframes progress-b-9506olwyzp {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes fadeIn-b-9506olwyzp {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/Bulkers/PmxList/PmxList_600_MarketView.razor.rz.scp.css */
.dashboard-grid[b-ck9mhhyp21] {
    display: flex;
    flex-wrap: wrap;      /* allow boxes to naturally wrap */
    gap: 12px;
}

.dashboard-box[b-ck9mhhyp21] {
    flex: 1 1 calc(25% - 12px); /* 4 per row */
    max-width: calc(25% - 12px);
    min-width: 150px;
}

.dashboard-box[b-ck9mhhyp21] {
    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-ck9mhhyp21] {
    background-color: #000061; /* SSY blue */
    color: white;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.dashboard-box-value[b-ck9mhhyp21] {
    background-color: white;
    color: black;
    padding: 2px 0px;
    font-size: 16px;
    text-align: center;
}

.dashboard-box-value.positive[b-ck9mhhyp21] {
    color: green;
}

.dashboard-box-value.negative[b-ck9mhhyp21] {
    color: red;
}

.container-wrapper[b-ck9mhhyp21] {
    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-ck9mhhyp21] {
    cursor: pointer;
}

.selectable-row.selected[b-ck9mhhyp21] {
    background-color: #049924;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_810_ActivityLog.razor.rz.scp.css */
html[b-gkr2ta4oq2], body[b-gkr2ta4oq2] { height: 100vh; margin: 0; background: #f5f6f8; }

.page-shell[b-gkr2ta4oq2] {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.log-container[b-gkr2ta4oq2] {
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-gkr2ta4oq2] {
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-gkr2ta4oq2] {
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-dw td[b-gkr2ta4oq2] { vertical-align: top; }
.ssy-table-dw td:nth-child(3)[b-gkr2ta4oq2] { white-space: normal; } /* allow details to wrap */
.ssy-table-dw td:not(:nth-child(3))[b-gkr2ta4oq2] { white-space: nowrap; }

.log-date-separator td[b-gkr2ta4oq2] {
    background-color: #f0f0f0;
    font-weight: bold;
    text-align: left;
    padding: 6px 10px;
    border-top: 2px solid #ccc;
}

.date-header[b-gkr2ta4oq2] {
    color: #555;
    font-size: 0.9rem;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_905_MissingData.razor.rz.scp.css */
.pmx905-missingdata .pmx905-subtabs[b-x9lp5ul4ph] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 2px solid #000061;
    padding-bottom: 4px;
}

.pmx905-missingdata .pmx905-subtab[b-x9lp5ul4ph] {
    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-x9lp5ul4ph] {
    background: #e8e8e8;
}

.pmx905-missingdata .pmx905-subtab.active[b-x9lp5ul4ph] {
    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-dlfshzyzlj] {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}

.pmx905specs-wrap .pmx905specs-card-header[b-dlfshzyzlj] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 13px;
}

.pmx905specs-wrap .pmx905specs-imo[b-dlfshzyzlj] {
    font-weight: 400;
    font-size: 12px;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.pmx905specs-wrap .pmx905specs-card-body[b-dlfshzyzlj] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 12px;
}

.pmx905specs-wrap .pmx905specs-panel[b-dlfshzyzlj] {
    flex: 1 1 180px;
    min-width: 160px;
}

.pmx905specs-wrap .pmx905specs-panel-wide[b-dlfshzyzlj] {
    flex: 4 1 360px;
    min-width: 320px;
}

.pmx905specs-wrap .pmx905specs-panel + .pmx905specs-panel[b-dlfshzyzlj] {
    border-left: 1px solid #eee;
    padding-left: 16px;
}

.pmx905specs-wrap .pmx905specs-panel-title-row[b-dlfshzyzlj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.pmx905specs-wrap .pmx905specs-panel-title[b-dlfshzyzlj] {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pmx905specs-wrap .pmx905specs-label[b-dlfshzyzlj] {
    font-size: 11px;
    color: #666;
    margin-bottom: 2px;
}

.pmx905specs-wrap .pmx905specs-editgrid[b-dlfshzyzlj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 6px 14px;
}

.pmx905specs-wrap .pmx905specs-viewgrid[b-dlfshzyzlj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 4px 14px;
    font-size: 13px;
}

.pmx905specs-wrap .pmx905specs-viewgrid > div[b-dlfshzyzlj] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px dotted #eee;
    padding-bottom: 2px;
}

.pmx905specs-wrap .pmx905specs-actions[b-dlfshzyzlj] {
    margin-top: 10px;
    display: flex;
    gap: 6px;
}

.pmx905specs-wrap .pmx905specs-noprofiles[b-dlfshzyzlj] {
    font-size: 12px;
    color: #999;
}

.pmx905specs-wrap .pmx905specs-panel table.ssy-table-lw[b-dlfshzyzlj] {
    width: 100%;
    font-size: 12px;
    margin-bottom: 4px;
}

.pmx905specs-wrap .pmx905specs-nowrap[b-dlfshzyzlj] {
    white-space: nowrap;
}

.pmx905specs-wrap .pmx905specs-addrow[b-dlfshzyzlj] {
    background: #f0f7ff;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_990_Admin.razor.rz.scp.css */
.table-stickyheader thead[b-xkx3sypcdu] {
    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-ir8d3eczg5] {
    background: #fff;
    margin-bottom: 0;
    overflow: hidden;
}

.pmxbkiships-wrap .pmxbkiships-card-header[b-ir8d3eczg5] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 13px;
}

.pmxbkiships-wrap .pmxbkiships-imo[b-ir8d3eczg5] {
    font-weight: 400;
    font-size: 12px;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.pmxbkiships-wrap .pmxbkiships-card-body[b-ir8d3eczg5] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 12px;
}

.pmxbkiships-wrap .pmxbkiships-panel[b-ir8d3eczg5] {
    flex: 1 1 180px;
    min-width: 160px;
}

.pmxbkiships-wrap .pmxbkiships-panel-wide[b-ir8d3eczg5] {
    flex: 4 1 360px;
    min-width: 320px;
}

.pmxbkiships-wrap .pmxbkiships-panel + .pmxbkiships-panel[b-ir8d3eczg5] {
    border-left: 1px solid #eee;
    padding-left: 16px;
}

.pmxbkiships-wrap .pmxbkiships-panel-title-row[b-ir8d3eczg5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.pmxbkiships-wrap .pmxbkiships-panel-title[b-ir8d3eczg5] {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pmxbkiships-wrap .pmxbkiships-label[b-ir8d3eczg5] {
    font-size: 11px;
    color: #666;
    margin-bottom: 2px;
}

.pmxbkiships-wrap .pmxbkiships-editgrid[b-ir8d3eczg5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 6px 14px;
}

.pmxbkiships-wrap .pmxbkiships-viewgrid[b-ir8d3eczg5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 4px 14px;
    font-size: 13px;
}

.pmxbkiships-wrap .pmxbkiships-viewgrid > div[b-ir8d3eczg5] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px dotted #eee;
    padding-bottom: 2px;
}

.pmxbkiships-wrap .pmxbkiships-actions[b-ir8d3eczg5] {
    margin-top: 10px;
    display: flex;
    gap: 6px;
}

.pmxbkiships-wrap .pmxbkiships-noprofiles[b-ir8d3eczg5] {
    font-size: 12px;
    color: #999;
}

.pmxbkiships-wrap .pmxbkiships-panel table.ssy-table-dw[b-ir8d3eczg5] {
    width: 100%;
    font-size: 12px;
    margin-bottom: 4px;
}

.pmxbkiships-wrap .pmxbkiships-nowrap[b-ir8d3eczg5] {
    white-space: nowrap;
}

.pmxbkiships-wrap .pmxbkiships-addrow[b-ir8d3eczg5] {
    background: #f0f7ff;
}
/* /Components/Pages/Bulkers/PmxList/PmxList_Misc_CopyIcon.razor.rz.scp.css */
.pmx-copyicon[b-fdu2gukhpl] {
    margin-right: 6px;
}

/* Third-party brand colours (WhatsApp / Microsoft Teams), not SSY palette */
.pmx-copyicon-wa[b-fdu2gukhpl]    { color: #25D366; }
.pmx-copyicon-teams[b-fdu2gukhpl] { color: #5B5FC7; }
/* /Components/Pages/Bulkers/PmxList/PmxList_Misc_LongPressSelect.razor.rz.scp.css */
/* Selected rows: tint every cell. An inset shadow sits on top of whatever background the table
   already gives the row (striping, flagged yellow...) so no specificity fights with its own CSS. */
.pmxlist-longpress[b-kg51nbi5or]  [data-press-selected="true"] > td {
    box-shadow: inset 0 0 0 9999px rgba(0, 135, 203, 0.18);
}

/* Mobile view (touch screen or mobile-width window): no text highlight / callout menu when long-pressing a row. */
@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
    .pmxlist-longpress[b-kg51nbi5or]  [data-press-index] {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}
/* /Components/Pages/Bulkers/Reports/Capesize/CapesizeIndex.razor.rz.scp.css */
.cpi-controls[b-k7ued1zj4m] {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    margin: 5px auto 10px auto;
}

.cpi-controls[b-k7ued1zj4m]  .ssy-date-selector {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1.5em;
    color: #000061;
}

.cpi-controls[b-k7ued1zj4m]  .ssy-date-selector time {
    font-weight: 600;
}

.cpi-empty[b-k7ued1zj4m] {
    text-align: center;
    margin: 20px auto;
}

/* ── The two reports ─────────────────────────────────────────────────────
   --cpi-scale is set by CapesizeIndex.razor.js to fit both across the page.
   A transform does not shrink the layout box, so .cpi-sheet reserves the
   scaled footprint and .cpi-sheet-inner is drawn into it at 280mm. */

.cpi-reports[b-k7ued1zj4m] {
    --cpi-scale: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
}

.cpi-report[b-k7ued1zj4m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: calc(280mm * var(--cpi-scale));
}

.cpi-report-label[b-k7ued1zj4m] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 10px;
    border-left: 4px solid #163E9F;
    background-color: #E9EFF9;
    color: #000061;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
}

.cpi-report-num[b-k7ued1zj4m] {
    font-size: 0.8em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #405864;
}

.cpi-report-name[b-k7ued1zj4m] {
    font-size: 1.15em;
    font-weight: 600;
}

.cpi-report-file[b-k7ued1zj4m] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85em;
    color: #405864;
}

.cpi-sheet[b-k7ued1zj4m] {
    width: calc(280mm * var(--cpi-scale));
    height: calc(385mm * var(--cpi-scale));
}

.cpi-sheet-inner[b-k7ued1zj4m] {
    width: 280mm;
    transform: scale(var(--cpi-scale));
    transform-origin: top left;
}
/* /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-p6tph5nkr4] {
    --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-p6tph5nkr4] { padding: 18px 0 0; }
.ssy-comm-mast-row[b-p6tph5nkr4] {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 24px; padding-bottom: 8px;
}
.ssy-comm-mast-brand[b-p6tph5nkr4] { display: flex; align-items: center; gap: 18px; }
.ssy-comm-mast-logo[b-p6tph5nkr4]  {
    height: 110px; width: auto; flex-shrink: 0;
    object-fit: fill; display: block;
}
.ssy-comm-mast-title h1[b-p6tph5nkr4] {
    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-p6tph5nkr4] {
    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-p6tph5nkr4] {
    text-align: right; font-size: 12.5px; color: var(--ssy-grey); line-height: 1.55;
}
.ssy-comm-mast-contact .date-display[b-p6tph5nkr4] {
    font-family: var(--serif); font-weight: 700; font-size: 22px;
    color: var(--ssy-navy); margin-bottom: 6px;
}
.ssy-comm-mast-contact .lbl[b-p6tph5nkr4] { color: #999; display: inline-block; min-width: 76px; }
.ssy-comm-mast-contact a[b-p6tph5nkr4] { color: var(--ssy-blue-mid); text-decoration: none; }
.ssy-comm-mast-contact a:hover[b-p6tph5nkr4] { text-decoration: underline; }

.ssy-comm-mast-wave[b-p6tph5nkr4] { display: block; width: 100%; height: 36px; margin-top: -2px; }

/* ─── Toolbar ───────────────────────────────────────────────────────── */
.ssy-comm-toolbar[b-p6tph5nkr4] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 0 12px; flex-wrap: wrap;
}

.ssy-comm-status[b-p6tph5nkr4] { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #777; }
.ssy-comm-pill[b-p6tph5nkr4] {
    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-p6tph5nkr4]    { background: #d6f4e2; color: #1f8a44; }
.ssy-comm-pill.mock[b-p6tph5nkr4]    { background: #fff4d4; color: #8a6a18; }
.ssy-comm-pill.loading[b-p6tph5nkr4] { background: #e8eef5; color: var(--ssy-navy); }
.ssy-comm-stamp[b-p6tph5nkr4] { font-size: 12px; color: #777; }

.ssy-comm-cat-tabs[b-p6tph5nkr4] { display: flex; gap: 6px; flex-wrap: wrap; }
.ssy-comm-cat[b-p6tph5nkr4] {
    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-p6tph5nkr4] {
    background: #f0f5fa; border-color: var(--ssy-cyan); color: var(--ssy-navy);
}
.ssy-comm-cat.active[b-p6tph5nkr4] {
    background: var(--ssy-navy); color: #fff; border-color: var(--ssy-navy);
}

.ssy-comm-actions[b-p6tph5nkr4] { display: flex; gap: 8px; }
.ssy-comm-btn[b-p6tph5nkr4] {
    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-p6tph5nkr4] { background: #00003e; }
.ssy-comm-btn[disabled][b-p6tph5nkr4] { opacity: 0.5; cursor: not-allowed; }
.ssy-comm-btn-primary[b-p6tph5nkr4] {}

/* ─── Section title ─────────────────────────────────────────────────── */
.ssy-comm-section-h[b-p6tph5nkr4] {
    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-p6tph5nkr4] {
    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-p6tph5nkr4] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 4px 0;
}
@media (max-width: 1280px) { .ssy-comm-grid[b-p6tph5nkr4] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .ssy-comm-grid[b-p6tph5nkr4] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ssy-comm-grid[b-p6tph5nkr4] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .ssy-comm-grid[b-p6tph5nkr4] { grid-template-columns: 1fr; } }

/* Cell base styles (cell component supplies its own scoped CSS too) */
.ssy-comm-cell[b-p6tph5nkr4] {
    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-p6tph5nkr4] { border-color: var(--ssy-band); box-shadow: 0 4px 14px rgba(0,0,97,.06); }

.ssy-comm-cell.empty[b-p6tph5nkr4] {
    background: repeating-linear-gradient(45deg, #f7fafc, #f7fafc 8px, #fff 8px, #fff 16px);
    border-color: #ebedf0;
}
.ssy-comm-cell.empty .ssy-comm-cell-head[b-p6tph5nkr4] { background: #c6d0d8; }
.ssy-comm-cell.empty .ssy-comm-cell-head .name[b-p6tph5nkr4] { color: #fff; }
.ssy-comm-cell.empty .ssy-comm-cell-head .desc[b-p6tph5nkr4] { color: rgba(255,255,255,0.85); }

.ssy-comm-cell.skeleton .ssy-comm-cell-head .name[b-p6tph5nkr4],
.ssy-comm-cell.skeleton .ssy-comm-cell-head .desc[b-p6tph5nkr4] {
    background: linear-gradient(90deg, #e8edf2 25%, #f5f7f9 50%, #e8edf2 75%);
    background-size: 200% 100%; animation: comm-shimmer-b-p6tph5nkr4 1.4s linear infinite;
    border-radius: 3px; min-height: 14px; color: transparent;
}
@keyframes comm-shimmer-b-p6tph5nkr4 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ssy-comm-cell-head[b-p6tph5nkr4] {
    background: var(--ssy-band);
    color: #fff;
    padding: 7px 10px 8px;
    text-align: center;
    line-height: 1.2;
}
[b-p6tph5nkr4] .ssy-comm-cell-head .name {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 13px;
    color: var(--ssy-navy);
}
[b-p6tph5nkr4] .ssy-comm-cell-head .desc {
    font-style: italic;
    font-size: 10px;
    margin-top: 1px;
    color: #666;
}

.ssy-comm-cell-chart[b-p6tph5nkr4] { 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-p6tph5nkr4] .ssy-comm-cell-meta {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px 0;
    font-size: 11px;
    color: #777;
}
[b-p6tph5nkr4] .ssy-comm-cell-meta .last  { font-weight: 700; color: #000061; font-size: 12px; }
[b-p6tph5nkr4] .ssy-comm-cell-meta .delta.up   { color: #2aaf57; font-weight: 700; }
[b-p6tph5nkr4] .ssy-comm-cell-meta .delta.down { color: #e23b3b; font-weight: 700; }
[b-p6tph5nkr4] .ssy-comm-cell-meta .delta.flat { color: #777; }

/* ─── Footer ────────────────────────────────────────────────────────── */
.ssy-comm-disclaimer[b-p6tph5nkr4] {
    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-p6tph5nkr4] { color: var(--ssy-navy); }

.ssy-comm-error[b-p6tph5nkr4] {
    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-5z15jlk1tp] {
    margin: 0 -1rem;
    padding: 0 0 40px;
    min-height: 100%;
}

@media (max-width: 768px) {
    .dbf-viewer[b-5z15jlk1tp] {
        margin: 0;
    }
}

/* ── Control bar ──────────────────────────────────────────────────────────────
   Title, issue date, page picker and tools, all on one line, and the full width of
   the page rather than a fixed measure — .dbf-bar-pages' flex:1 centres the page
   picker in whatever slack that leaves, so a wide window reads as one deliberate
   layout rather than a narrow bar stranded in the middle of the page. Above the
   mobile breakpoint it never wraps — on a window too narrow for its content the bar
   scrolls sideways instead, so the row stays a single line; see the narrow-window
   block at the foot of this file for where that changes. */
.dbf-bar[b-5z15jlk1tp] {
    background-color: #fff;
    width: 100%;
    margin: 0 0 16px;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 3px 5px rgba(0, 0, 60, 0.25);
}

.dbf-bar-title[b-5z15jlk1tp] {
    color: #000061;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.dbf-bar-select[b-5z15jlk1tp] {
    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-5z15jlk1tp] {
    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-5z15jlk1tp] {
    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-5z15jlk1tp] {
    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-5z15jlk1tp] {
    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-5z15jlk1tp] {
        background: #163E9F;
        color: #fff;
        border-color: #163E9F;
    }

    .dbf-nav-btn.active[b-5z15jlk1tp] {
        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-5z15jlk1tp] {
    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-5z15jlk1tp] {
    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-5z15jlk1tp] {
    display: flex;
    align-items: center;
    background: #000061;
    border: 1px solid transparent;
    border-radius: 3px;
    overflow: hidden;
}

.dbf-mode-btn[b-5z15jlk1tp] {
    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-5z15jlk1tp] {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }

    .dbf-mode-btn:hover[b-5z15jlk1tp] {
        background: #163E9F;
        color: #fff;
    }

    .dbf-mode-btn.active[b-5z15jlk1tp] {
        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-5z15jlk1tp] {
    display: flex;
    align-items: center;
    border-radius: 3px;
    overflow: hidden;
}

.dbf-publish-state[b-5z15jlk1tp] {
    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-5z15jlk1tp] {
    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-5z15jlk1tp] {
        background: #163E9F;
    }

    /* Armed: the next click withdraws the issue, so it stops looking like the rest of the bar. */
    .dbf-publish-btn.armed[b-5z15jlk1tp],
    .dbf-publish-btn.armed:hover[b-5z15jlk1tp] {
        background: #DB303A;
        font-weight: 600;
    }

.dbf-publish-go[b-5z15jlk1tp],
.dbf-publish-send[b-5z15jlk1tp] {
    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-5z15jlk1tp],
.dbf-capture-msg[b-5z15jlk1tp] {
    width: 100%;
    margin: -8px 0 12px;
    padding: 6px 14px;
    background: #fff;
    border-left: 3px solid #DB303A;
    border-radius: 3px;
    color: #DB303A;
    font-size: 0.76rem;
}

.dbf-zoom[b-5z15jlk1tp] {
    display: flex;
    align-items: center;
    background: #000061;
    border: 1px solid transparent;
    border-radius: 3px;
    overflow: hidden;
}

.dbf-zoom-btn[b-5z15jlk1tp],
.dbf-zoom-level[b-5z15jlk1tp] {
    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-5z15jlk1tp] {
    width: 24px;
    height: 24px;
    font-size: 0.95rem;
    line-height: 1;
}

.dbf-zoom-level[b-5z15jlk1tp] {
    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-5z15jlk1tp],
    .dbf-zoom-level:hover[b-5z15jlk1tp] {
        background: #163E9F;
        color: #fff;
    }

    .dbf-zoom-btn:disabled[b-5z15jlk1tp] {
        color: #3C5A9F;
        cursor: default;
    }

.dbf-bar-pdf[b-5z15jlk1tp] {
    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-5z15jlk1tp],
.dbf-nav-btn:disabled[b-5z15jlk1tp],
.dbf-mode-btn:disabled[b-5z15jlk1tp],
.dbf-publish-btn:disabled[b-5z15jlk1tp],
.dbf-publish-go:disabled[b-5z15jlk1tp],
.dbf-publish-send:disabled[b-5z15jlk1tp],
.dbf-bar-pdf:disabled[b-5z15jlk1tp] {
    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.

   What is left — the two pickers, the View/Edit switch and the publish controls — is
   still too much for one line on a phone, and growing: Send to Market Post joined
   Publish/Withdraw on the bar without anything giving up its place. Rather than the
   sideways scroll a wide window falls back to (easy to miss on a touch screen, where
   the scrollbar itself is invisible), the bar wraps here: the two pickers keep the
   first line, and .dbf-bar-tools — forced onto its own line by flex-basis: 100% —
   wraps its own controls under them if even that line is too narrow. Nothing is ever
   clipped; a control not on offer here is not a phone's job (see above), not one that
   is merely hard to reach. */
@media (max-width: 768px) {
    .dbf-bar-title[b-5z15jlk1tp],
    .dbf-bar-pages[b-5z15jlk1tp],
    .dbf-zoom[b-5z15jlk1tp],
    .dbf-bar-pdf[b-5z15jlk1tp] {
        display: none;
    }

    .dbf-bar[b-5z15jlk1tp] {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .dbf-bar-pages-select[b-5z15jlk1tp] {
        display: block;
        min-width: 132px;
    }

    .dbf-bar-tools[b-5z15jlk1tp] {
        flex-basis: 100%;
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* ── 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-5z15jlk1tp] {
        zoom: 0.8;
    }
}

@media (max-width: 600px) {
    .dbf-paper:not(.dbf-paper-pdf)[b-5z15jlk1tp] {
        zoom: 0.62;
    }
}

@media (max-width: 480px) {
    .dbf-paper:not(.dbf-paper-pdf)[b-5z15jlk1tp] {
        zoom: 0.48;
    }
}

@media (max-width: 400px) {
    .dbf-paper:not(.dbf-paper-pdf)[b-5z15jlk1tp] {
        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-5z15jlk1tp] {
    position: fixed;
    top: 0;
    left: -20000px;
    width: 900px;
}

.dbf-building[b-5z15jlk1tp] {
    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-5z15jlk1tp] {
    width: 100%;
    margin: 0;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.dbf-legacy-empty[b-5z15jlk1tp] {
    width: 100%;
    min-height: 200px;
    margin: 0;
    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/Components/DryCargoAutoSendPopup.razor.rz.scp.css */
/* Auto-send popup. Modal chrome and buttons come from SsyPopup and ssyglobal.css - these rules only
   cover the state line and the text below it. */

.dcauto-state[b-d8lo14ewql] {
	margin-bottom: 6px;
	padding: 8px 10px;
	border-radius: 5px;
	font-size: 15px;
}
.dcauto-state.is-on[b-d8lo14ewql] {
	background: #e3f3e6;
	color: #1e6b2f;
}
.dcauto-state.is-off[b-d8lo14ewql] {
	background: #f4f4f2;
	color: #4a4a46;
}

.dcauto-hint[b-d8lo14ewql] {
	margin-bottom: 12px;
	font-size: 11px;
	color: #6b6b6b;
}

.dcauto-warning[b-d8lo14ewql] {
	padding: 8px 10px;
	border-radius: 5px;
	background: #fbeaea;
	color: #a4362f;
	font-size: 12px;
}

.dcauto-intro[b-d8lo14ewql] {
	margin-bottom: 8px;
	font-size: 12px;
	color: #4a4a46;
}

/* Previous sends: one row per published post, a repeat on the same UK day in red. */
.dcauto-history-title[b-d8lo14ewql] {
	margin: 16px 0 6px;
	font-size: 13px;
	font-weight: 600;
}
.dcauto-history[b-d8lo14ewql] {
	width: 100%;
	margin-bottom: 6px;
	border-collapse: collapse;
	font-size: 12px;
}
.dcauto-history th[b-d8lo14ewql] {
	padding: 4px 6px;
	border-bottom: 1px solid #d8d8d4;
	text-align: left;
	font-weight: 600;
	color: #4a4a46;
}
.dcauto-history td[b-d8lo14ewql] {
	padding: 4px 6px;
	border-bottom: 1px solid #efefec;
	vertical-align: top;
}
.dcauto-history .dcauto-num[b-d8lo14ewql] {
	text-align: right;
}
.dcauto-history tr.is-repeat td[b-d8lo14ewql] {
	background: #fbeaea;
	color: #a4362f;
}
.dcauto-repeat[b-d8lo14ewql] {
	display: block;
	font-size: 11px;
	font-weight: 600;
}
/* /Components/Pages/Bulkers/Reports/DryCargo/Components/DryCargoContributorsPopup.razor.rz.scp.css */
/* Contributors popup. Modal chrome, buttons, form controls and the table come from SsyPopup,
   ssyglobal.css and Bootstrap - these rules only cover layout and the row-remove button, matching
   GeneralReportClientsModal's roster editor. */

.dccon-intro[b-sfg9m9mugz] {
	margin-bottom: 14px;
	font-size: 12px;
	color: #6b6b6b;
}

.dccon-desk[b-sfg9m9mugz] {
	margin-bottom: 18px;
}

.dccon-desk-title[b-sfg9m9mugz] {
	margin: 0 0 6px 0;
}

.dccon-table[b-sfg9m9mugz] {
	width: 100%;
}

.dccon-tick[b-sfg9m9mugz] {
	width: 80px;
	text-align: center;
	vertical-align: middle;
}

.dccon-remove[b-sfg9m9mugz] {
	width: 32px;
	text-align: center;
	vertical-align: middle;
}

/* A full ssy-btn is far too heavy repeated down a list of people. */
.dccon-x[b-sfg9m9mugz] {
	border: none;
	background: none;
	color: #9a9a96;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
}
.dccon-x:hover[b-sfg9m9mugz] {
	color: #a4362f;
}

.dccon-add[b-sfg9m9mugz] {
	margin-top: 6px;
	padding: 2px 10px;
	font-size: 12px;
}

.dccon-status[b-sfg9m9mugz] {
	margin-right: auto;
	font-size: 12px;
	color: #6b6b6b;
}
.dccon-status.is-error[b-sfg9m9mugz] {
	color: #a4362f;
	font-weight: 600;
}
/* /Components/Pages/Bulkers/Reports/DryCargo/Components/DryCargoTestSendPopup.razor.rz.scp.css */
/* Test-send popup. Modal chrome, buttons and form controls come from SsyPopup, ssyglobal.css and
   Bootstrap - these rules only cover layout and the status/result text. */

.dctest-intro[b-3esu9m5lov] {
	margin-bottom: 14px;
	font-size: 12px;
	color: #6b6b6b;
}

.dctest-grid[b-3esu9m5lov] {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 8px 12px;
	align-items: center;
	margin-bottom: 14px;
}

.dctest-label[b-3esu9m5lov] {
	font-weight: 600;
}

.dctest-hint[b-3esu9m5lov] {
	margin-left: 6px;
	font-size: 11px;
	color: #6b6b6b;
}

.dctest-hint-block[b-3esu9m5lov] {
	display: block;
	margin: 4px 0 0 0;
}

.dctest-recipients[b-3esu9m5lov] {
	resize: vertical;
}

.dctest-minutes[b-3esu9m5lov] {
	display: inline-block;
	width: auto;
}

.dctest-pending[b-3esu9m5lov] {
	padding: 8px 10px;
	border-radius: 5px;
	background: #e6eaf6;
}

.dctest-last[b-3esu9m5lov] {
	padding: 8px 10px;
	border-radius: 5px;
	background: #f4f4f2;
	font-size: 12px;
}
.dctest-last ul[b-3esu9m5lov] {
	margin: 6px 0 0 0;
	padding-left: 18px;
}

.dctest-status[b-3esu9m5lov] {
	margin: 10px 0 0 0;
	font-size: 12px;
	color: #6b6b6b;
}
.dctest-status.is-error[b-3esu9m5lov] {
	color: #a4362f;
	font-weight: 600;
}
/* /Components/Pages/Bulkers/Reports/DryCargo/RptTemplates/CapesizeRpt.razor.rz.scp.css */

.cape-rpt-content[b-d641lprum3] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.cape-rpt-left[b-d641lprum3] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cape-rpt-mkt-coms[b-d641lprum3] {
    /*height: calc(36% + var(--mktCom-recFixt-split));*/
    height: fit-content;
}

.cape-rpt-rec-fxts[b-d641lprum3] {
    margin: 2% 0;
    /*height: calc(36% - var(--mktCom-recFixt-split));*/
    height: fit-content;
}

.cape-rpt-newbuilding[b-d641lprum3] {
/*    margin: 2% 0;*/
    height: 13%;
}

@scope (.cape-rpt-table) {
    :scope[b-d641lprum3] {
        height: 30%;
        width: 100%;
        text-align: center;
        margin-bottom: 4vh;
    }

    h4[b-d641lprum3] {
        background-color: #009DC9;
        color: white;
        padding: 4px;
        text-align: left;
        font-weight: 500;
    }

    table[b-d641lprum3] {
        width: 100%;
    }

    tbody tr:nth-child(odd)[b-d641lprum3] {
        background-color: #EBF1F8;
    }
}

.cape-rpt-exch-rates[b-d641lprum3] {
    height: 22%;
}

.cape-rpt-freight-fixt[b-d641lprum3] {
    height: 78%;
}

.cape-rpt-right[b-d641lprum3] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.cape-5TC-avg[b-d641lprum3] {
    height: 30%;
    /*border: 1px solid navy;*/
}

.cape-rpt-mkt-coms-btm[b-d641lprum3] {
    height: fit-content;
    width: 100%;
}
/* /Components/Pages/Bulkers/Reports/DryCargo/RptTemplates/DryCargoRpt.razor.rz.scp.css */
.dry-rpt-content[b-gnkp8amdkx] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.dry-rpt-left[b-gnkp8amdkx] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@scope (.dry-rpt-table) {
    :scope[b-gnkp8amdkx] {
        width: 100%;
        text-align: center;
    }

    table[b-gnkp8amdkx] {
        width: 100%;
    }

    tbody tr:nth-child(even)[b-gnkp8amdkx] {
        background-color: #EBF1F8;
    }
}

.dry-rpt-exch-rates[b-gnkp8amdkx] {
    height: 24%;
}

.dry-rpt-freight-fixt[b-gnkp8amdkx] {
    height: 76%;
}

.dry-rpt-right[b-gnkp8amdkx] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dry-rpt-price-graph[b-gnkp8amdkx] {
    height: 24%;
}

@scope (.dry-rpt-friday-tables) {
    :scope[b-gnkp8amdkx] {
        font-size: 0.95em;
        width: 100%;
        text-align: center;
    }

    tbody tr:nth-child(odd)[b-gnkp8amdkx] {
        background-color: #EBF1F8;
    }
}
/* /Components/Pages/Bulkers/Reports/DryCargo/RptTemplates/HandysizeRpt.razor.rz.scp.css */

.handy-rpt-content[b-ifsusdg3lm] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.handy-rpt-left[b-ifsusdg3lm] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.handy-rpt-left-fri[b-ifsusdg3lm] {
    width: 50%;
    height: 100%;
}

.handy-rpt-mkt-coms[b-ifsusdg3lm] {
    height: fit-content;
}

.handy-rpt-rec-fxts[b-ifsusdg3lm] {
    margin: 2% 0;
    height: fit-content;
}

.handy-rpt-exch-rates[b-ifsusdg3lm] {
    height: 22%;
}

.handy-rpt-freight-fixt[b-ifsusdg3lm] {
    height: 78%;
}

.handy-rpt-right[b-ifsusdg3lm] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.handy-rpt-table[b-ifsusdg3lm] {
    height: 30%;
    width: 100%;
    margin: 2% 0;
}

.handy-TC-avg[b-ifsusdg3lm] {
    height: 35%;
    margin-bottom: 2%;
}
/* /Components/Pages/Bulkers/Reports/DryCargo/RptTemplates/PanamaxRpt.razor.rz.scp.css */

.pnmx-rpt-content[b-wo0dae45qo] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.pnmx-rpt-top[b-wo0dae45qo] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80%;
    width: 100%;
}

.pnmx-rpt-left[b-wo0dae45qo] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pnmx-rpt-mkt-coms[b-wo0dae45qo] {
    height: fit-content;
}

.pnmx-rpt-rec-fxts[b-wo0dae45qo] {
    margin: 2% 0;
    height: fit-content;
}

@scope (.pnmx-rpt-table) {
    :scope[b-wo0dae45qo] {
        width: 100%;
        text-align: center;
        margin-bottom: 4vh;
    }

    h4[b-wo0dae45qo] {
        background-color: #009DC9;
        color: white;
        padding: 4px;
        text-align: left;
        font-weight: 500;
    }

    table[b-wo0dae45qo] {
        width: 100%;
    }

    tbody tr:nth-child(odd)[b-wo0dae45qo] {
        background-color: #EBF1F8;
    }
}

.pnmx-rpt-exch-rates[b-wo0dae45qo] {
    height: 22%;
}

.pnmx-rpt-freight-fixt[b-wo0dae45qo] {
    height: 78%;
}

.pnmx-rpt-right[b-wo0dae45qo] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pnmx-5TC-avg[b-wo0dae45qo] {
    height: 28%;
    margin-bottom: 1%;
}

/*bottom*/
.pnmx-tng-supply[b-wo0dae45qo] {
    height: 17%;
    width: 100%;
}


/* friday */

.pnmx-rpt-mkt-coms-btm[b-wo0dae45qo] {
    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-hnmo3mtkqt] {
    --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-hnmo3mtkqt] { padding: 18px 0 0; }

.dry-combined-mast-row[b-hnmo3mtkqt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 8px;
}

.dry-combined-mast-brand[b-hnmo3mtkqt] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dry-combined-mast-logo[b-hnmo3mtkqt] {
    height: 110px;
    width: auto;
    flex-shrink: 0;
    object-fit: fill;
    display: block;
}

.dry-combined-mast-title h1[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] {
    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-hnmo3mtkqt] {
    text-align: right;
    font-size: 12px;
    color: var(--ssy-grey);
    line-height: 1.6;
}

.dry-combined-mast-contact .date-display[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] {
    color: #999;
    display: inline-block;
    min-width: 50px;
}

.dry-combined-mast-contact a[b-hnmo3mtkqt] {
    color: var(--ssy-blue);
    text-decoration: none;
    font-weight: 500;
}

.dry-combined-mast-contact a:hover[b-hnmo3mtkqt] { text-decoration: underline; }

.dry-combined-mast-wave[b-hnmo3mtkqt] {
    display: block;
    width: 100%;
    height: 32px;
    margin-top: 2px;
    overflow: visible;
}

/* ─── Toolbar ───────────────────────────────────────────────────── */
.dry-combined-toolbar[b-hnmo3mtkqt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 8px;
    flex-wrap: wrap;
}

.dry-combined-date-nav[b-hnmo3mtkqt] { display: flex; align-items: center; gap: 8px; }

.dry-combined-tabs[b-hnmo3mtkqt] { display: flex; gap: 6px; flex-wrap: wrap; }

.dry-combined-tab[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] {
    background: var(--ssy-grey-soft);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(31, 78, 138, 0.12);
}

.dry-combined-tab.active[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] { background: var(--ssy-aqua); }

.dry-combined-actions[b-hnmo3mtkqt] { display: flex; align-items: center; gap: 8px; }

.dry-combined-edit-btn[b-hnmo3mtkqt],
.dry-combined-icon-btn[b-hnmo3mtkqt] {
    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-hnmo3mtkqt],
.dry-combined-icon-btn:hover[b-hnmo3mtkqt] {
    background: #173d70;
    transform: translateY(-1px);
}

.dry-combined-edit-btn.active[b-hnmo3mtkqt] {
    background: var(--ssy-blue);
    border-color: var(--ssy-blue);
}

/* ─── Tab panel ─────────────────────────────────────────────────── */
.dry-combined-content[b-hnmo3mtkqt] {
    min-height: 480px;
    margin-top: 14px;
    border-top: 2px solid var(--ssy-blue-light);
    padding-top: 8px;
    animation: dc-fade-b-hnmo3mtkqt 0.25s ease-out;
}

@keyframes dc-fade-b-hnmo3mtkqt {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.dry-combined-panel[b-hnmo3mtkqt] { display: none; }
.dry-combined-panel.active[b-hnmo3mtkqt] { display: block; animation: dc-fade-b-hnmo3mtkqt 0.2s ease-out; }

/* ─── Section headings (matches Geared section-h with accent bar) ─ */
.dc-section-h[b-hnmo3mtkqt] {
    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-hnmo3mtkqt]::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-hnmo3mtkqt] { margin-top: 0; }

.dc-section-sub[b-hnmo3mtkqt] {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0;
    text-transform: none;
}

.dc-subsection-h[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] {
    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-hnmo3mtkqt] { margin-top: 0; }

/* ─── Layout grids ──────────────────────────────────────────────── */
.dc-grid-2[b-hnmo3mtkqt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin: 4px 0 10px;
}

@media (max-width: 960px) {
    .dc-grid-2[b-hnmo3mtkqt] { grid-template-columns: 1fr; }
}

.dc-col[b-hnmo3mtkqt] { display: flex; flex-direction: column; }

.dc-chart-grid[b-hnmo3mtkqt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 10px 0 0;
}

@media (max-width: 820px) {
    .dc-chart-grid[b-hnmo3mtkqt] { grid-template-columns: 1fr; }
}

/* ─── Top banner (replaces dryC-rpt-top-banner) ─────────────────── */
.dc-banner[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] { display: none; }
.dc-banner p[b-hnmo3mtkqt] { display: inline; margin: 0; padding: 0; }
.dc-banner *[b-hnmo3mtkqt] {
    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    background: transparent !important;
}

/* ─── Cards ─────────────────────────────────────────────────────── */
.dc-card[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 16px 6px;
    border-bottom: 1px solid #e7e9ec;
}

.dc-card-h h3[b-hnmo3mtkqt] {
    font-family: var(--sans);
    color: var(--ssy-navy);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.2px;
}

.dc-card-note[b-hnmo3mtkqt] {
    font-size: 11px;
    color: #888;
    font-style: italic;
}

/* ─── Tables ────────────────────────────────────────────────────── */
.dc-table[b-hnmo3mtkqt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: #fff;
}

.dc-card .dc-table[b-hnmo3mtkqt] { border-radius: 0 0 10px 10px; }

.dc-table thead th[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] { text-align: right; }
.dc-table thead th.dc-cell-label[b-hnmo3mtkqt] { text-align: left; }

.dc-table tbody td[b-hnmo3mtkqt] {
    padding: 4px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #eef2f5;
    line-height: 1.35;
}

.dc-table tbody tr:nth-child(odd) td[b-hnmo3mtkqt] { background: #fafcfd; }
.dc-table tbody tr:hover td[b-hnmo3mtkqt] { background: #eaf6fb; }
.dc-table tbody tr:last-child td[b-hnmo3mtkqt] { border-bottom: none; }

.dc-cell-label[b-hnmo3mtkqt] {
    text-align: left;
    font-weight: 500;
    color: var(--ssy-grey);
}

.dc-cell-sublabel[b-hnmo3mtkqt] {
    text-align: left;
    color: #777;
    padding-left: 24px !important;
    font-size: 12.5px;
}

.dc-cell-numeric[b-hnmo3mtkqt] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ssy-navy);
    font-weight: 500;
}

.dc-cell-category[b-hnmo3mtkqt] {
    text-align: left;
    font-weight: 700;
    color: var(--ssy-navy);
    background: #fff !important;
}

.dc-cell-rowlabel[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] {
    text-align: right;
    font-weight: 600;
    color: var(--ssy-grey);
    font-variant-numeric: tabular-nums;
}

.dc-cell-trend.up[b-hnmo3mtkqt]   { color: var(--ssy-up); }
.dc-cell-trend.down[b-hnmo3mtkqt] { color: var(--ssy-down); }

.dc-row-bold td[b-hnmo3mtkqt] { font-weight: 700; }
.dc-row-bold td.dc-cell-label[b-hnmo3mtkqt] { color: var(--ssy-navy); }

/* Newbuild + tonnage tables use the same base but allow tighter padding */
.dc-table-newbuild thead th[b-hnmo3mtkqt] { background: var(--ssy-blue); color: #fff; }
.dc-table-newbuild thead th.dc-cell-label[b-hnmo3mtkqt] { color: #fff; }

.dc-table-tonnage[b-hnmo3mtkqt] { font-size: 12.5px; }
.dc-table-tonnage thead th[b-hnmo3mtkqt] { background: var(--ssy-navy); color: #fff; }

.dc-table-friday[b-hnmo3mtkqt] { font-size: 12.5px; margin-top: 4px; }
.dc-table-friday thead th[b-hnmo3mtkqt] { 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-hnmo3mtkqt] { text-align: center; }
.dc-sentiment-table td.dc-sentiment-class[b-hnmo3mtkqt] {
    font-weight: 700;
    color: var(--ssy-navy);
    font-size: 14px;
    letter-spacing: 0.2px;
}
.dc-sentiment-cell[b-hnmo3mtkqt] {
    text-align: center;
    font-weight: 600;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
.dc-sentiment-cell.up[b-hnmo3mtkqt]    { color: var(--ssy-up);   font-weight: 700; }
.dc-sentiment-cell.down[b-hnmo3mtkqt]  { color: var(--ssy-down); font-weight: 700; }
.dc-sentiment-cell.flat[b-hnmo3mtkqt]  { color: var(--ssy-grey); }
.dc-sentiment-table tbody tr:nth-child(odd) td[b-hnmo3mtkqt] { background: #fafcfd; }

/* ─── Prose / comment blocks (matches Geared Mkt Rpt's Comment tab) ─ */
.dc-prose[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] { margin: 0 0 10px; }
.dc-prose p:last-child[b-hnmo3mtkqt] { margin-bottom: 0; }
.dc-prose b[b-hnmo3mtkqt], .dc-prose strong[b-hnmo3mtkqt] { 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-hnmo3mtkqt] {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}
.dc-prose b *[b-hnmo3mtkqt], .dc-prose strong *[b-hnmo3mtkqt],
.dc-prose * b[b-hnmo3mtkqt], .dc-prose * strong[b-hnmo3mtkqt] { color: var(--ssy-navy) !important; }

/* ─── Chart cards ───────────────────────────────────────────────── */
.dc-chart-card[b-hnmo3mtkqt] {
    border: 1px solid #d8dde3;
    border-radius: 10px;
    padding: 14px 16px 18px;
    background: #fff;
    position: relative;
    margin: 4px 0 8px;
}

.dc-chart-wide[b-hnmo3mtkqt] {
    /* Slightly more breathing room for solo charts */
    padding: 16px 18px 22px;
}

.dc-chart-title[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] {
    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-hnmo3mtkqt]  .highcharts-container,
.dc-chart-card[b-hnmo3mtkqt]  svg.highcharts-root {
    width: 100% !important;
    height: 100% !important;
}
.dc-chart-card[b-hnmo3mtkqt]  > div {
    height: 240px !important;
    max-height: 240px;
    overflow: hidden;
}
.dc-chart-wide[b-hnmo3mtkqt]  > div {
    height: 280px !important;
    max-height: 280px;
}
.dc-chart-grid .dc-chart-card[b-hnmo3mtkqt]  > div {
    height: 200px !important;
    max-height: 200px;
}

/* ─── Friday badge ──────────────────────────────────────────────── */
.dc-friday-badge[b-hnmo3mtkqt] {
    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-hnmo3mtkqt] {
    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-hnmo3mtkqt] { color: var(--ssy-navy); }
/* /Components/Pages/Bulkers/Reports/ECSA/Components/RptEcsaRatesTable.razor.rz.scp.css */
rpt-ecsa-table-td[b-s3hm3br988] {
    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-5xdmqdw2wi] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.gm-summary-item--editing[b-5xdmqdw2wi] {
    background: #f8fbfd;
    border: 1px solid #d0e4ef;
    border-radius: 8px;
    padding: 12px;
    position: relative;
}

/* ── Number badge ── */
.gm-summary-num[b-5xdmqdw2wi] {
    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-5xdmqdw2wi] {
    flex: 1;
    min-width: 0;
}

/* ── Title input (edit mode) ── */
.gm-summary-title-input[b-5xdmqdw2wi] {
    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-5xdmqdw2wi] {
    border-bottom-color: #0087CB;
}

.gm-summary-title-input[b-5xdmqdw2wi]::placeholder {
    color: #bbb;
    font-weight: 400;
}

/* ── Editor wrapper ── */
.gm-summary-editor[b-5xdmqdw2wi] {
    min-height: 80px;
}

/* ── Display mode ── */
.gm-summary-title-display[b-5xdmqdw2wi] {
    font-size: 14.5px;
    font-weight: 700;
    color: #0087CB;
    margin-bottom: 3px;
}

.gm-summary-text-display[b-5xdmqdw2wi] {
    font-size: 12.5px;
    color: #4a5568;
    line-height: 1.5;
}

/* ── Delete button ── */
.gm-summary-delete-btn[b-5xdmqdw2wi] {
    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-5xdmqdw2wi] {
    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-2kzia5chm5] {
    padding: 0 0 2rem;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.gm-comm-toolbar[b-2kzia5chm5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

.gm-comm-asof[b-2kzia5chm5] {
    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-2kzia5chm5] {
    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-2kzia5chm5] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .gm-comm-columns[b-2kzia5chm5] {
        grid-template-columns: 1fr;
    }
}

/* ── Column ──────────────────────────────────────────────── */
.gm-comm-col[b-2kzia5chm5] {
    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-2kzia5chm5] {
    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-2kzia5chm5] {
    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-2kzia5chm5] {
    position: relative;
}

    /* Dim hidden charts in edit mode */
    .gm-comm-chart-wrap.hidden-chart[b-2kzia5chm5] {
        opacity: 0.45;
    }

    /* Show/hide toggle button */
    .gm-comm-chart-wrap.editing .gm-comm-toggle-btn[b-2kzia5chm5] {
        display: flex;
    }

.gm-comm-toggle-btn[b-2kzia5chm5] {
    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-2kzia5chm5] {
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
}

    .gm-comm-toggle-btn--hide:hover[b-2kzia5chm5] {
        background: rgb(220, 38, 38);
    }

.gm-comm-toggle-btn--show[b-2kzia5chm5] {
    background: rgba(0, 0, 97, 0.80);
    color: #fff;
}

    .gm-comm-toggle-btn--show:hover[b-2kzia5chm5] {
        background: #000061;
    }

/* ── Cell styles (replicated from RptCommodityPrices — CSS isolation) ── */
[b-2kzia5chm5] .ssy-comm-cell {
    border: none;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-2kzia5chm5] .ssy-comm-cell-head {
    background: transparent;
    padding: 6px 4px 2px;
    text-align: left;
    line-height: 1.2;
}

[b-2kzia5chm5] .ssy-comm-cell-head .name {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 13px;
    color: #000061;
}

[b-2kzia5chm5] .ssy-comm-cell-head .desc {
    font-style: italic;
    font-size: 10px;
    margin-top: 1px;
    color: #888;
}

[b-2kzia5chm5] .ssy-comm-cell-chart {
    flex: 1;
    min-height: 160px;
    padding: 0 4px 4px;
}

[b-2kzia5chm5] .ssy-comm-cell-meta {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px 0;
    font-size: 11px;
    color: #777;
}

[b-2kzia5chm5] .ssy-comm-cell-meta .last        { font-weight: 700; color: #000061; font-size: 12px; }
[b-2kzia5chm5] .ssy-comm-cell-meta .delta.up    { color: #2aaf57; font-weight: 700; }
[b-2kzia5chm5] .ssy-comm-cell-meta .delta.down  { color: #e23b3b; font-weight: 700; }
[b-2kzia5chm5] .ssy-comm-cell-meta .delta.flat  { color: #777; }

[b-2kzia5chm5] .ssy-comm-cell.skeleton .ssy-comm-cell-head .name,
[b-2kzia5chm5] .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-2kzia5chm5 1.4s linear infinite;
    border-radius: 3px;
    min-height: 14px;
    color: transparent;
}

@keyframes comm-shimmer-b-2kzia5chm5 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gm-comm-no-charts[b-2kzia5chm5] {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Commentary area ─────────────────────────────────────── */
.gm-comm-commentary[b-2kzia5chm5] {
    margin-top: 0.25rem;
}

.gm-comm-editor[b-2kzia5chm5] {
    min-height: 140px;
}

.gm-comm-text[b-2kzia5chm5] {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #1f2937;
}

    .gm-comm-text p[b-2kzia5chm5] {
        margin: 0 0 0.5em;
    }

.gm-comm-empty[b-2kzia5chm5] {
    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-p6lim9o7wq] {
    padding: 0 0 2rem;
}

/* ── Three-column grid ───────────────────────────────────── */
.gm-ffa-columns[b-p6lim9o7wq] {
    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-p6lim9o7wq] {
        grid-template-columns: minmax(200px, 280px) 1fr;
    }

    .gm-ffa-col--right[b-p6lim9o7wq] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .gm-ffa-columns[b-p6lim9o7wq] {
        grid-template-columns: 1fr;
    }
}

/* ── Column shared ───────────────────────────────────────── */
.gm-ffa-col[b-p6lim9o7wq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gm-ffa-col-h[b-p6lim9o7wq] {
    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-p6lim9o7wq] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #01A39E;
    text-transform: none;
    letter-spacing: 0;
}

.gm-ffa-period-accent--lg[b-p6lim9o7wq] {
    font-size: 0.95rem; /* matches heading size */
}

/* ── Forward curve table ─────────────────────────────────── */
.gm-ffa-table[b-p6lim9o7wq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.gm-ffa-table thead tr[b-p6lim9o7wq] {
    background: #000061;
    color: #fff;
}

.gm-ffa-table thead th[b-p6lim9o7wq] {
    padding: 5px 8px;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.gm-ffa-table thead th.num[b-p6lim9o7wq] {
    text-align: right;
}

.gm-ffa-table tbody tr[b-p6lim9o7wq] {
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background 0.1s;
}

.gm-ffa-table tbody tr:hover[b-p6lim9o7wq] {
    background: #f0f4ff;
}

.gm-ffa-table tbody tr.selected[b-p6lim9o7wq] {
    background: #e8edf8;
}

.gm-ffa-table tbody td[b-p6lim9o7wq] {
    padding: 4px 8px;
    color: #1f2937;
}

.gm-ffa-table td.period[b-p6lim9o7wq] {
    font-weight: 600;
    color: #000061;
    white-space: nowrap;
}

.gm-ffa-table td.num[b-p6lim9o7wq] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gm-ffa-table td.bold[b-p6lim9o7wq] {
    font-weight: 700;
}

/* ── Group header rows ───────────────────────────────────── */
.gm-ffa-table tr.gm-ffa-group-header td[b-p6lim9o7wq] {
    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-p6lim9o7wq] {
    border-top: none;
}

/* ── Change badge ────────────────────────────────────────── */
.gm-ffa-chg[b-p6lim9o7wq] {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.78rem;
}

.gm-ffa-chg.ffa-pos[b-p6lim9o7wq] {
    background: #dcfce7;
    color: #166534;
}

.gm-ffa-chg.ffa-neg[b-p6lim9o7wq] {
    background: #fee2e2;
    color: #991b1b;
}

.gm-ffa-asof[b-p6lim9o7wq] {
    font-size: 0.72rem;
    color: #6b7280;
    text-align: right;
    margin-top: 0.4rem;
}

.gm-ffa-asof time[b-p6lim9o7wq] {
    color: #0087CB;
    font-weight: 600;
}

/* ── Chart column ────────────────────────────────────────── */
.gm-ffa-chart-wrap[b-p6lim9o7wq] {
    width: 100%;
    min-height: 806px;
}

.gm-ffa-chart-empty[b-p6lim9o7wq] {
    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-p6lim9o7wq],
.gm-ffa-empty[b-p6lim9o7wq] {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Right placeholder panel ─────────────────────────────── */
.gm-ffa-placeholder-panel[b-p6lim9o7wq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gm-ffa-placeholder-label[b-p6lim9o7wq] {
    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-p6lim9o7wq] {
    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-p6lim9o7wq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}

.gm-ewmac-speed-btn[b-p6lim9o7wq] {
    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-p6lim9o7wq] {
    background: #eef1f8;
}

.gm-ewmac-speed-btn.active[b-p6lim9o7wq] {
    background: #000061;
    color: #fff;
}

/* ── EWMAC chart ─────────────────────────────────────── */
.gm-ewmac-chart-wrap[b-p6lim9o7wq] {
    width: 100%;
}

/* ── Correlation matrix ──────────────────────────────── */
.gm-corr-table[b-p6lim9o7wq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.gm-corr-table thead th[b-p6lim9o7wq] {
    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-p6lim9o7wq] {
    background: transparent;
}

.gm-corr-table tbody td[b-p6lim9o7wq] {
    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-p6lim9o7wq] {
    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-p6lim9o7wq] {
    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-p6lim9o7wq] {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: -0.25rem;
    margin-bottom: 0.15rem;
}

/* ── Signal legend ───────────────────────────────────── */
.gm-ewmac-legend[b-p6lim9o7wq] {
    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-p6lim9o7wq] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.gm-ewmac-dot[b-p6lim9o7wq] {
    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-7knqc4ln55] {
    padding: 0 0 2rem;
}

/* ── Region tabs ──────────────────────────────────────────────── */
.gm-phys-region-tabs[b-7knqc4ln55] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.gm-phys-region-tab[b-7knqc4ln55] {
    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-7knqc4ln55] {
    background: #e8edf5;
}

.gm-phys-region-tab.active[b-7knqc4ln55] {
    background: #000061;
    color: #fff;
}

.gm-phys-region-tab.placeholder[b-7knqc4ln55] {
    border-color: #c8cdd5;
    color: #9ca3af;
    cursor: not-allowed;
}

.gm-phys-soon[b-7knqc4ln55] {
    font-style: italic;
    font-weight: 400;
    font-size: 0.72rem;
    margin-left: 0.25rem;
}

/* ── Two-column layout ────────────────────────────────────────── */
.gm-phys-layout[b-7knqc4ln55] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .gm-phys-layout[b-7knqc4ln55] {
        grid-template-columns: 1fr;
    }
}

/* ── Left column ─────────────────────────────────────────────── */
.gm-phys-left[b-7knqc4ln55] {
    min-width: 0;
}

/* Block headers (rates / commentary) */
.gm-phys-block-header[b-7knqc4ln55] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.gm-phys-block-header--cmt[b-7knqc4ln55] {
    margin-top: 1.5rem;
}

.gm-phys-col-h[b-7knqc4ln55] {
    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-7knqc4ln55] {
    font-size: 0.72rem;
    color: #9ca3af;
    font-style: italic;
    margin: 0.4rem 0 0;
}

/* Weekly-report source attribution */
.gm-phys-source-note[b-7knqc4ln55] {
    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-7knqc4ln55] {
    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-7knqc4ln55] {
    margin-bottom: 0.5rem;
}

.gm-phys-cmt-subrow[b-7knqc4ln55] {
    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-7knqc4ln55] {
    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-7knqc4ln55] {
    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-7knqc4ln55] {
        border-color: #9ca3af;
        color: #374151;
    }

/* Commentary */
.gm-phys-sub-h[b-7knqc4ln55] {
    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-7knqc4ln55] {
    font-size: 0.85rem;
    line-height: 1.65;
    color: #1f2937;
}

    .gm-phys-prose p[b-7knqc4ln55] { margin: 0 0 0.5em; }

.gm-phys-editor[b-7knqc4ln55] {
    margin-bottom: 1rem;
}

.gm-phys-empty[b-7knqc4ln55] {
    font-size: 0.82rem;
    color: #9ca3af;
    margin: 0.25rem 0;
}

.gm-phys-loading[b-7knqc4ln55] {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
    margin: 0.25rem 0;
}

/* ── Right column: charts ─────────────────────────────────────── */
.gm-phys-right[b-7knqc4ln55] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gm-phys-chart-card[b-7knqc4ln55] {
    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-7knqc4ln55] {
    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-7knqc4ln55] {
    height: 180px;
}

/* Rates table: inherit scoped styles from the shared table component.
   The ::deep combinator reaches into RptSsyGearedRatesTable's rendered HTML. */
[b-7knqc4ln55] .rpt-ssy-geared-rates th {
    font-size: 0.78rem;
}

[b-7knqc4ln55] .rpt-ssy-geared-rates td {
    font-size: 0.78rem;
}

/* ════════════════════════════════════════════════════════════════
   Baltic Exchange subpage
   ════════════════════════════════════════════════════════════════ */

.gm-baltic-layout[b-7knqc4ln55] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .gm-baltic-layout[b-7knqc4ln55] {
        grid-template-columns: 1fr;
    }
}

.gm-baltic-left[b-7knqc4ln55] {
    min-width: 0;
}

/* ── Assessments table ── */
.gm-baltic-table[b-7knqc4ln55] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .gm-baltic-table th[b-7knqc4ln55] {
        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-7knqc4ln55],
    .gm-baltic-table td.num[b-7knqc4ln55] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .gm-baltic-table td[b-7knqc4ln55] {
        padding: 0.42rem 0.6rem;
        border-bottom: 1px solid #eceff3;
        color: #1f2937;
    }

.gm-baltic-row[b-7knqc4ln55] {
    cursor: pointer;
    transition: background 0.1s;
}

    .gm-baltic-row:hover[b-7knqc4ln55] {
        background: #f0f5fa;
    }

    .gm-baltic-row.selected[b-7knqc4ln55] {
        background: #e4ecf7;
        box-shadow: inset 3px 0 0 #000061;
    }

.gm-baltic-route[b-7knqc4ln55] {
    font-weight: 700;
    color: #000061;
    white-space: nowrap;
}

/* Index averages at the foot of the table */
.gm-baltic-row.index-row td[b-7knqc4ln55] {
    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-7knqc4ln55] {
    border-top: 1px solid #eceff3;
}

.gm-baltic-row.index-row.selected td[b-7knqc4ln55] {
    background: #e4ecf7;
}

.gm-baltic-name[b-7knqc4ln55] {
    color: #4b5563;
    font-size: 0.76rem;
}

.gm-baltic-current[b-7knqc4ln55] {
    font-weight: 700;
}

.gm-baltic-up[b-7knqc4ln55] {
    color: #0e9f6e;
    font-size: 0.6rem;
    margin-left: 0.25rem;
}

.gm-baltic-down[b-7knqc4ln55] {
    color: #C8102E;
    font-size: 0.6rem;
    margin-left: 0.25rem;
}

.gm-baltic-asat[b-7knqc4ln55] {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}

    .gm-baltic-asat.stale[b-7knqc4ln55] {
        color: #C8102E;
        font-weight: 600;
    }

/* ── History chart (right column, under the map) ── */
.gm-baltic-chart-card[b-7knqc4ln55] {
    margin-top: 0;
}

.gm-baltic-chart-wrap[b-7knqc4ln55] {
    height: 220px;
}

.gm-baltic-name[b-7knqc4ln55] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Route map ── */
.gm-baltic-right[b-7knqc4ln55] {
    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-7knqc4ln55] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.gm-baltic-map-card[b-7knqc4ln55] {
    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-7knqc4ln55] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.gm-baltic-def[b-7knqc4ln55] {
    min-width: 0;
}

.gm-baltic-map-legend[b-7knqc4ln55] {
    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-7knqc4ln55] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.3rem;
}

.gm-baltic-dot--from[b-7knqc4ln55] {
    background: #01A39E;
}

.gm-baltic-dot--to[b-7knqc4ln55] {
    background: #C8102E;
}

.gm-baltic-map-note[b-7knqc4ln55] {
    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-7knqc4ln55] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .gm-global-layout[b-7knqc4ln55] {
        grid-template-columns: 1fr;
    }
}

.gm-global-left[b-7knqc4ln55] {
    min-width: 0;
}

.gm-global-right[b-7knqc4ln55] {
    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-7knqc4ln55] {
    font-size: 0.85rem;
}

    [b-7knqc4ln55] .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-7knqc4ln55] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.6rem;
}

    .gm-global-table th[b-7knqc4ln55] {
        font-size: 0.78rem;
        text-align: left;
        padding: 0.3rem 0.5rem;
        white-space: nowrap;
    }

    .gm-global-table td[b-7knqc4ln55] {
        font-size: 0.78rem;
        padding: 0.26rem 0.5rem;
    }

    .gm-global-table th.num[b-7knqc4ln55],
    .gm-global-table td.num[b-7knqc4ln55] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.gm-global-row[b-7knqc4ln55] {
    cursor: pointer;
}

    .gm-global-table tbody tr.gm-global-row.selected[b-7knqc4ln55] {
        background-color: #B5CBD6;
        box-shadow: inset 3px 0 0 #000061;
    }

/* Top banner strip, echoing the weekly report's banner */
.gm-global-banner[b-7knqc4ln55] {
    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-7knqc4ln55] {
        margin: 0;
    }

.gm-global-link[b-7knqc4ln55] {
    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-7knqc4ln55] {
        background: #0087CB;
        color: #fff;
    }

/* ── Route definition ── */
.gm-baltic-def-h[b-7knqc4ln55] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #000061;
    margin: 0 0 0.35rem;
}

    .gm-baltic-def-h span[b-7knqc4ln55] {
        font-weight: 500;
        color: #4b5563;
        font-size: 0.8rem;
        margin-left: 0.4rem;
    }

.gm-baltic-def-text[b-7knqc4ln55] {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #1f2937;
    margin: 0 0 0.4rem;
}

.gm-baltic-def-vessel[b-7knqc4ln55] {
    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-34f3mho7is] {
    padding: 0 0 2rem;
}

/* ── Top row: KPIs + headline chart ─────────────────────────── */
.gm-util-top[b-34f3mho7is] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

/* ── KPI cards stack ─────────────────────────────────────────── */
.gm-util-kpis[b-34f3mho7is] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gm-util-kpi[b-34f3mho7is] {
    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-34f3mho7is] {
    background: #000061;
    border-left-color: #01A39E;
    border-color: #000061;
}

.gm-util-kpi--headline .gm-util-kpi-label[b-34f3mho7is] {
    color: rgba(255, 255, 255, 0.8);
}

.gm-util-kpi--headline .gm-util-kpi-value[b-34f3mho7is] {
    color: #ffffff;
    font-size: 1.6rem;
}

.gm-util-kpi--headline .gm-util-kpi-sub[b-34f3mho7is] {
    color: rgba(255, 255, 255, 0.65);
}

.gm-util-kpi-label[b-34f3mho7is] {
    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-34f3mho7is] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000061;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.gm-util-kpi-sub[b-34f3mho7is] {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: 0.1rem;
}

/* ── Headline chart column ───────────────────────────────────── */
.gm-util-headline-chart[b-34f3mho7is] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── Headline chart header (title + tabs row) ────────────────── */
.gm-util-headline-header[b-34f3mho7is] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.gm-util-headline-header .gm-util-col-h[b-34f3mho7is] {
    flex: 1;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ── Chart mode tabs ─────────────────────────────────────────── */
.gm-util-chart-tabs[b-34f3mho7is] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.gm-util-chart-tab[b-34f3mho7is] {
    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-34f3mho7is],
.gm-util-chart-tab:hover[b-34f3mho7is] {
    background: #000061;
    color: #fff;
}

/* ── Column heading ──────────────────────────────────────────── */
.gm-util-col-h[b-34f3mho7is] {
    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-34f3mho7is] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.gm-util-chart-cell[b-34f3mho7is] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── Loading / empty states ──────────────────────────────────── */
.gm-util-loading[b-34f3mho7is],
.gm-util-empty[b-34f3mho7is] {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .gm-util-top[b-34f3mho7is] {
        grid-template-columns: 1fr;
    }

    .gm-util-kpis[b-34f3mho7is] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gm-util-kpi[b-34f3mho7is] {
        flex: 1 1 calc(33% - 0.5rem);
        min-width: 140px;
    }

    .gm-util-bottom[b-34f3mho7is] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .gm-util-bottom[b-34f3mho7is] {
        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-jfr3i9imy6] {
    padding: 0 0 2rem;
}

/* ── Top layout: table col (left) + chart panel (right) ──────── */
.gm-demand-top[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    min-width: 0;
}

/* ── Section heading ─────────────────────────────────────────── */
.gm-demand-col-h[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #4b5563;
    font-size: 0.8rem;
}

/* ── Table header row ────────────────────────────────────────── */
.gm-demand-table-header[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    flex: 1;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* ── Metric toggle tabs ──────────────────────────────────────── */
.gm-demand-tabs[b-jfr3i9imy6] {
    display: flex;
    gap: 0.25rem;
}

.gm-demand-tab[b-jfr3i9imy6] {
    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-jfr3i9imy6],
.gm-demand-tab:hover[b-jfr3i9imy6] {
    background: #000061;
    color: #fff;
}

/* ── Two-table container ─────────────────────────────────────── */
.gm-demand-tables-container[b-jfr3i9imy6] {
    display: flex;
    align-items: start;
}

/* Label column table — truly frozen, no scroll */
.gm-demand-tbl-labels[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    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-jfr3i9imy6] {
    width: max-content;
    table-layout: fixed;
}

/* Right scrolling table wrapper */
.gm-demand-quarterly-scroll[b-jfr3i9imy6] {
    overflow-x: auto;
    flex: 1;
    min-width: 0;
}

/* Quarterly table: expand to natural column width so scrolling kicks in */
.gm-demand-tbl-quarterly[b-jfr3i9imy6] {
    width: max-content;
    min-width: 100%;
}

/* ── Shared table styles ─────────────────────────────────────── */
.gm-demand-tbl[b-jfr3i9imy6] {
    border-collapse: collapse;
    font-size: 0.75rem;
    white-space: nowrap;
}

.gm-demand-tbl thead tr:first-child th[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    background: transparent;
    color: transparent;
    border: none;
}

.gm-demand-tbl thead tr:nth-child(2) th[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    color: #0087CB !important;
}

.gm-demand-td-commodity[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    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-jfr3i9imy6] {
    color: #0087CB;
}

.gm-demand-td-pct[b-jfr3i9imy6],
.gm-demand-th-pct[b-jfr3i9imy6] {
    color: #6b7280;
    font-style: italic;
}

/* ── Annual column headers ───────────────────────────────────── */
.gm-annual-head[b-jfr3i9imy6] {
    background: #002b8c !important;
}

/* ── Quarterly period headers ────────────────────────────────── */
.gm-demand-tbl-quarterly thead tr:first-child th[b-jfr3i9imy6] {
    background: #009DCA;
}

/* Separator: right border after the last annual % column */
.gm-annual-sep[b-jfr3i9imy6] {
    border-right: 2px solid #000061 !important;
}

/* ── Group header row ────────────────────────────────────────── */
.gm-demand-tr-group td[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    background: #dce4f0;
}

.gm-demand-td-group[b-jfr3i9imy6] {
    white-space: nowrap;
    background: #e8edf5;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-demand-expand[b-jfr3i9imy6] {
    font-size: 0.6rem;
    margin-right: 0.35rem;
    opacity: 0.7;
}

.gm-demand-td-subtotal[b-jfr3i9imy6] {
    font-weight: 700;
    color: #000061;
}

.gm-demand-td-subtotal.gm-demand-td-geared[b-jfr3i9imy6] {
    color: #0069a8;
}

.gm-demand-td-subtotal.gm-demand-td-pct[b-jfr3i9imy6] {
    color: #4b5563;
    font-style: normal;
}

/* ── Sub-group toggle hover ──────────────────────────────────── */
.gm-demand-tr-subgroup-toggle:hover td[b-jfr3i9imy6] {
    background: #f9fafb;
}

.gm-demand-expand-country[b-jfr3i9imy6] {
    color: #0087CB;
    font-size: 0.55rem;
}

/* ── Country rows ────────────────────────────────────────────── */
.gm-demand-tr-country td[b-jfr3i9imy6] {
    background: #f0f7fc;
    border-bottom: 1px solid #e0eef6;
}

.gm-demand-td-country[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    font-size: 0.72rem;
    color: #4b5563;
}

/* ── Total row ───────────────────────────────────────────────── */
.gm-demand-tr-total td[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    color: #0087CB;
}

/* ── Note ────────────────────────────────────────────────────── */
.gm-demand-note[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Group selector buttons */
.gm-chart-group-tabs[b-jfr3i9imy6] {
    display: flex;
    gap: 0.15rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.gm-chart-group-tab[b-jfr3i9imy6] {
    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-jfr3i9imy6],
.gm-chart-group-tab:hover[b-jfr3i9imy6] {
    background: #009DCA;
    color: #fff;
}

/* Individual chart sections — each takes equal share of available column height */
.gm-chart-section[b-jfr3i9imy6] {
    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-jfr3i9imy6],
.gm-chart-section-mix[b-jfr3i9imy6] {
    flex: 1.4;
}

/* Label + optional metric buttons on one row */
.gm-chart-label-row[b-jfr3i9imy6] {
    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-jfr3i9imy6] {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.gm-chart-label[b-jfr3i9imy6] {
    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-jfr3i9imy6]  .highcharts-legend {
    display: none !important;
}

/* Metric toggle buttons inside chart label row */
.gm-chart-metric-tabs[b-jfr3i9imy6] {
    display: flex;
    gap: 0.15rem;
    flex-shrink: 0;
}

.gm-chart-metric-tab[b-jfr3i9imy6] {
    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-jfr3i9imy6],
.gm-chart-metric-tab:hover[b-jfr3i9imy6] {
    background: #000061;
    color: #fff;
}

.gm-demand-chart-ph[b-jfr3i9imy6] {
    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-jfr3i9imy6],
.gm-demand-empty[b-jfr3i9imy6] {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .gm-demand-top[b-jfr3i9imy6] {
        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-isyqmvohgm] {
    padding: 0 0 2rem;
}

/* ── KPI strip ───────────────────────────────────────────────── */
.gm-supply-kpi-strip[b-isyqmvohgm] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.gm-supply-kpi[b-isyqmvohgm] {
    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-isyqmvohgm] {
    background: #000061;
    border-color: #000061;
    border-left-color: #01A39E;
}

.gm-supply-kpi--hl .gm-supply-kpi-label[b-isyqmvohgm] { color: rgba(255,255,255,0.75); }
.gm-supply-kpi--hl .gm-supply-kpi-value[b-isyqmvohgm] { color: #fff; }
.gm-supply-kpi--hl .gm-supply-kpi-sub[b-isyqmvohgm]   { color: rgba(255,255,255,0.6); }

.gm-supply-kpi-label[b-isyqmvohgm] {
    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-isyqmvohgm] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000061;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.gm-supply-kpi-sub[b-isyqmvohgm] {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 0.1rem;
}

/* ── Column heading ──────────────────────────────────────────── */
.gm-supply-col-h[b-isyqmvohgm] {
    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-isyqmvohgm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.gm-supply-card[b-isyqmvohgm] {
    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-isyqmvohgm] {
    grid-column: span 2;
}

.gm-supply-card--span3[b-isyqmvohgm] {
    grid-column: span 3;
}

@media (max-width: 1200px) {
    .gm-supply-grid[b-isyqmvohgm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gm-supply-card--span2[b-isyqmvohgm],
    .gm-supply-card--span3[b-isyqmvohgm] {
        grid-column: span 2;
    }
}

@media (max-width: 850px) {
    .gm-supply-grid[b-isyqmvohgm] {
        grid-template-columns: 1fr;
    }

    .gm-supply-card--span2[b-isyqmvohgm],
    .gm-supply-card--span3[b-isyqmvohgm] {
        grid-column: span 1;
    }
}

/* Card header with pills alongside the heading */
.gm-supply-card-head[b-isyqmvohgm] {
    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-isyqmvohgm] {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ── Pills & controls ────────────────────────────────────────── */
.gm-supply-pills[b-isyqmvohgm] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.gm-supply-pill[b-isyqmvohgm] {
    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-isyqmvohgm] {
        background: #e8edf5;
    }

    .gm-supply-pill.active[b-isyqmvohgm] {
        background: #000061;
        color: #fff;
    }

.gm-supply-select[b-isyqmvohgm] {
    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-isyqmvohgm] {
    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-isyqmvohgm] {
        text-decoration: underline;
    }

/* ── Vessel speeds (Supramax segment) ────────────────────────── */
.gm-supply-speed-table[b-isyqmvohgm] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.4rem;
    font-variant-numeric: tabular-nums;
}

    .gm-supply-speed-table th[b-isyqmvohgm] {
        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-isyqmvohgm] {
        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-isyqmvohgm] {
        background: #f2f6fb;
    }

    .gm-supply-speed-table td.yr[b-isyqmvohgm] {
        font-weight: 700;
        color: #000061;
        text-align: left;
    }

.gm-supply-note[b-isyqmvohgm] {
    font-size: 0.68rem;
    color: #9ca3af;
    font-style: italic;
    margin: 0.2rem 0 0;
}

/* ── Loading / empty ─────────────────────────────────────────── */
.gm-supply-loading[b-isyqmvohgm],
.gm-supply-empty[b-isyqmvohgm] {
    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-5hj8jclyph] {
    --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-5hj8jclyph] {
    padding: 4px 0 0;
}

.ssy-geared-mast-row[b-5hj8jclyph] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 2px;
}

.ssy-geared-mast-brand[b-5hj8jclyph] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ssy-geared-mast-logo[b-5hj8jclyph] {
    height: 80px;
    width: auto;
    flex-shrink: 0;
    object-fit: fill;
    display: block;
}

.ssy-geared-mast-title h1[b-5hj8jclyph] {
    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-5hj8jclyph] {
    color: #01A39E;
}

.ssy-geared-mast-title.overview-title h1[b-5hj8jclyph] {
    font-size: 34px;
}

.ssy-geared-mast-title .subtitle[b-5hj8jclyph] {
    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-5hj8jclyph] {
    text-align: right;
    font-size: 12px;
    color: var(--ssy-grey);
    line-height: 1.6;
}

.ssy-geared-mast-contact .date-display[b-5hj8jclyph] {
    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-5hj8jclyph] {
    color: #999;
    display: inline-block;
    min-width: 50px;
}

.ssy-geared-mast-contact a[b-5hj8jclyph] {
    color: var(--ssy-blue);
    text-decoration: none;
    font-weight: 500;
}

.ssy-geared-mast-contact a:hover[b-5hj8jclyph] {
    text-decoration: underline;
}

/* Decorative wave below the masthead */
.ssy-geared-mast-wave[b-5hj8jclyph] {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 0;
    overflow: visible;
}

/* ─── Toolbar ─── */
.ssy-geared-toolbar[b-5hj8jclyph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0 8px;
    flex-wrap: wrap;
}

.ssy-geared-date-nav[b-5hj8jclyph] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssy-geared-page-nav[b-5hj8jclyph] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ssy-geared-actions[b-5hj8jclyph] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Pill buttons (section nav + edit toggles) */
.ssy-geared-pill[b-5hj8jclyph] {
    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-5hj8jclyph] {
    background: var(--ssy-grey-soft);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(31, 78, 138, 0.12);
}

.ssy-geared-pill.active[b-5hj8jclyph] {
    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-5hj8jclyph] {
    background: var(--ssy-aqua);
}

/* Comment icon button */
.ssy-geared-icon-btn[b-5hj8jclyph] {
    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-5hj8jclyph] {
    background: #173d70;
    transform: translateY(-1px);
}

/* ─── Region tabs ─── */
.ssy-geared-region-tabs[b-5hj8jclyph] {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--ssy-blue-light);
    margin: 8px 0 22px;
}

.ssy-geared-region-tab[b-5hj8jclyph] {
    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-5hj8jclyph] {
    background: rgba(78, 192, 224, 0.18);
    color: var(--ssy-navy);
}

.ssy-geared-region-tab.active[b-5hj8jclyph] {
    color: #fff;
    background: var(--ssy-blue-light);
}

.ssy-geared-region-tab[disabled][b-5hj8jclyph] {
    color: #aaa;
    cursor: not-allowed;
}

.ssy-geared-region-tab em[b-5hj8jclyph] {
    font-style: normal;
    color: #999;
    font-weight: 400;
    font-size: 11px;
}

/* ─── Section content layout ─── */
.ssy-geared-content[b-5hj8jclyph] {
    min-height: 480px;
    padding-top: 1.25rem;
    animation: ssy-fade-b-5hj8jclyph 0.25s ease-out;
}

@keyframes ssy-fade-b-5hj8jclyph {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.ssy-geared-section-h[b-5hj8jclyph] {
    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-5hj8jclyph]::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-5hj8jclyph] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 66px 0 10px;
}

.ssy-geared-prose[b-5hj8jclyph] {
    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-5hj8jclyph] {
    font-size: 12px;
    color: #888;
    margin: 12px 0 0;
}

/* ─── Overview cards ─── */
.ssy-geared-overview-cards[b-5hj8jclyph] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 14px 0 20px;
}

.ssy-geared-overview-card[b-5hj8jclyph] {
    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-5hj8jclyph]::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-5hj8jclyph] {
    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-5hj8jclyph]::after {
    opacity: 1;
}

.ssy-geared-overview-card h4[b-5hj8jclyph] {
    color: var(--ssy-blue);
    font-size: 16px;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.ssy-geared-overview-card .card-sub[b-5hj8jclyph] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.45;
    flex: 1;
}

.ssy-geared-overview-card .card-cta[b-5hj8jclyph] {
    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-5hj8jclyph] {
    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-5hj8jclyph] {
    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-5hj8jclyph] {
    font-size: 13px;
    color: var(--ssy-grey);
    font-weight: 500;
}

.ssy-geared-list-head .count .up[b-5hj8jclyph]   { color: var(--ssy-up);   font-weight: 700; }
.ssy-geared-list-head .count .down[b-5hj8jclyph] { color: var(--ssy-down); font-weight: 700; }

/* ─── Cargo: segment headers + region bands ─── */
.ssy-geared-segment-h[b-5hj8jclyph] {
    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-5hj8jclyph] {
    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-5hj8jclyph] {
    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-5hj8jclyph] {
        grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr);
    }

    .ssy-geared-right-panel[b-5hj8jclyph] {
        grid-column: 1 / -1;
    }
}

/* ── Contents: current page (greyed) ── */
.contents-current .contents-num[b-5hj8jclyph],
.contents-current .contents-here[b-5hj8jclyph] {
    color: #b3b9c4;
}

.contents-here[b-5hj8jclyph] {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
}

/* ── Scuttlebutt column ── */
.ssy-geared-scuttle[b-5hj8jclyph] {
    min-width: 0;
}

.ssy-geared-scuttle-text[b-5hj8jclyph] {
    font-size: 13px;
    line-height: 1.65;
    color: var(--ssy-grey);
}

    .ssy-geared-scuttle-text p[b-5hj8jclyph] {
        margin: 0 0 0.5em;
    }

.ssy-geared-scuttle-editor[b-5hj8jclyph] {
    min-height: 160px;
}

/* ── Right panel: utilisation strip + headings ── */
.ssy-geared-panel-section[b-5hj8jclyph] {
    background: #fff;
    padding: 10px 12px 8px;
    border-bottom: 1px solid #d8dde3;
}

.ssy-geared-panel-h[b-5hj8jclyph] {
    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-5hj8jclyph] {
    background: #f4f6f8;
    margin: 0;
    padding: 8px 12px 4px;
}

.ssy-geared-util-strip[b-5hj8jclyph] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ssy-geared-util-kpi[b-5hj8jclyph] {
    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-5hj8jclyph] {
        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-5hj8jclyph] {
        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-5hj8jclyph] {
    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-5hj8jclyph] {
    margin: 0;
    padding: 5px 8px 7px;
    background: #fff;
}

.ssy-geared-panel-table td.delta-pos[b-5hj8jclyph] {
    color: #0e9f6e;
    font-weight: 600;
}

.ssy-geared-panel-table td.delta-neg[b-5hj8jclyph] {
    color: #C8102E;
    font-weight: 600;
}

/* ─── Shared column heading ─── */
.ssy-geared-col-h[b-5hj8jclyph] {
    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-5hj8jclyph] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ssy-geared-contents-list li[b-5hj8jclyph] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #edf0f3;
}

.ssy-geared-contents-list li:last-child[b-5hj8jclyph] {
    border-bottom: none;
}

.contents-num[b-5hj8jclyph] {
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--ssy-navy);
    min-width: 18px;
    text-align: right;
}

.contents-link[b-5hj8jclyph] {
    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-5hj8jclyph] {
    color: var(--ssy-navy);
    text-decoration: underline;
}

/* ─── Summary list ─── */
.ssy-geared-summary-list[b-5hj8jclyph] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ─── Summary header (title + Edit toggle) ─── */
.ssy-geared-summary-header[b-5hj8jclyph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ssy-geared-summary-header .ssy-geared-col-h[b-5hj8jclyph] {
    margin-bottom: 0;
}

/* ─── Empty state ─── */
.gm-summary-empty[b-5hj8jclyph] {
    font-size: 12.5px;
    color: #aaa;
    font-style: italic;
}

/* ─── Summary item — editing mode ─── */
.gm-summary-item[b-5hj8jclyph] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.gm-summary-item--editing[b-5hj8jclyph] {
    background: #f8fbfd;
    border: 1px solid #d0e4ef;
    border-radius: 8px;
    padding: 12px;
    position: relative;
}

.gm-summary-num[b-5hj8jclyph] {
    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-5hj8jclyph] {
    flex: 1;
    min-width: 0;
}

.gm-summary-title-input[b-5hj8jclyph] {
    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-5hj8jclyph] {
    border-bottom-color: var(--ssy-blue);
}

.gm-summary-title-input[b-5hj8jclyph]::placeholder {
    color: #bbb;
    font-weight: 400;
}

.gm-summary-editor[b-5hj8jclyph] {
    min-height: 80px;
}

.gm-summary-title-display[b-5hj8jclyph] {
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ssy-blue);
    margin-bottom: 3px;
}

.gm-summary-text-display[b-5hj8jclyph] {
    font-size: 12.5px;
    color: #4a5568;
    line-height: 1.5;
}

.gm-summary-delete-btn[b-5hj8jclyph] {
    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-5hj8jclyph] {
    background: #fee2e2;
    color: var(--ssy-down);
    border-color: var(--ssy-down);
}

.gm-summary-add-btn[b-5hj8jclyph] {
    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-5hj8jclyph] {
    background: var(--ssy-blue-pale);
}

/* ─── Right panel ─── */
.ssy-geared-right-panel[b-5hj8jclyph] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #d8dde3;
    border-radius: 8px;
    overflow: hidden;
}

.ssy-geared-panel-tabs[b-5hj8jclyph] {
    display: flex;
    background: #f4f6f8;
    border-bottom: 1px solid #d8dde3;
}

.ssy-geared-panel-tab[b-5hj8jclyph] {
    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-5hj8jclyph] {
    color: var(--ssy-navy);
    background: #fff;
    border-bottom-color: var(--ssy-blue);
}

.ssy-geared-panel-table-wrap[b-5hj8jclyph] {
    overflow-x: auto;
    background: #fff;
}

.ssy-geared-panel-table[b-5hj8jclyph] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: var(--sans);
}

.ssy-geared-panel-table th[b-5hj8jclyph] {
    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-5hj8jclyph] {
    text-align: left;
}

.ssy-geared-panel-table td[b-5hj8jclyph] {
    padding: 5px 8px;
    text-align: right;
    border-bottom: 1px solid #edf0f3;
    color: var(--ssy-grey);
}

.ssy-geared-panel-table td:first-child[b-5hj8jclyph] {
    text-align: left;
    font-weight: 600;
    color: var(--ssy-navy);
}

.ssy-geared-panel-table tbody tr:last-child td[b-5hj8jclyph] {
    border-bottom: none;
}

.placeholder-cell[b-5hj8jclyph] {
    text-align: center !important;
    color: #aaa !important;
    font-style: italic;
    padding: 24px 8px !important;
    font-weight: 400 !important;
}

.ssy-geared-chart-placeholder[b-5hj8jclyph] {
    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-5hj8jclyph] {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
    text-align: center;
    padding: 0 16px;
}

/* ─── Footer disclaimer ─── */
.ssy-geared-disclaimer[b-5hj8jclyph] {
    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-5hj8jclyph] {
    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-k6z69w6a4y] {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 18px;
	height: 62vh;
}

.grclients-list[b-k6z69w6a4y] {
	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-k6z69w6a4y] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.grclients-table[b-k6z69w6a4y] {
	width: 100%;
}
.grclients-table tbody tr[b-k6z69w6a4y] {
	cursor: pointer;
}
.grclients-table tbody tr.is-selected[b-k6z69w6a4y] {
	background: #e6eaf6;
}
.grclients-table tbody tr.is-inactive .grclients-rowname[b-k6z69w6a4y] {
	color: #9a9a96;
	text-decoration: line-through;
}

/* The category badge beside a client name in the list. It had no rule at all,
   so it rendered hard against the name — "DA TESTSSY Team". Styled like
   .grclients-off below, but in the SSY blue rather than grey: it says what the
   row IS, where "off" says the row is disabled. */
.grclients-category-tag[b-k6z69w6a4y] {
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 3px;
	background: #e3e8f4;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ssy-colour-main-simpson-blue, #000061);
}

.grclients-off[b-k6z69w6a4y] {
	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-k6z69w6a4y] {
	font-size: 12px;
	color: #6b6b6b;
}

.grclients-editor[b-k6z69w6a4y] {
	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-k6z69w6a4y] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}

.grclients-field .form-label[b-k6z69w6a4y] {
	font-weight: 700;
}

.grclients-hint[b-k6z69w6a4y] {
	margin-left: 6px;
	font-weight: 400;
	font-size: 11px;
	color: #6b6b6b;
}

/* For a hint too long to sit inline after its label. The inline form is right
   for the one-liners on the other fields, so this is a modifier rather than a
   change to the rule above. */
.grclients-hint.is-block[b-k6z69w6a4y] {
	display: block;
	margin-left: 0;
	margin-top: 2px;
	line-height: 1.35;
}

/* Scoped under the prefixed class, never a bare `code {}` — this modal hosts the
   editor and a bare element rule would leak into it. */
.grclients-hint code[b-k6z69w6a4y] {
	padding: 0 3px;
	border-radius: 2px;
	background: #eeeeea;
	color: #4a4a46;
	font-size: 10px;
}

.grclients-brokername[b-k6z69w6a4y] {
	flex: 0 0 110px;
}

/* Row-remove: a full ssy-btn is far too heavy repeated down a list of keywords. */
.grclients-x[b-k6z69w6a4y] {
	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-k6z69w6a4y] {
	color: #a4362f;
}

.grclients-add[b-k6z69w6a4y] {
	font-size: 12px;
	padding: 2px 10px;
}

.grclients-note[b-k6z69w6a4y] {
	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-k6z69w6a4y] {
	margin-right: auto;
	font-size: 12px;
	color: #6b6b6b;
}
.grclients-status.is-error[b-k6z69w6a4y] {
	color: #a4362f;
	font-weight: 600;
}

@media (max-width: 768px) {
	.grclients-panes[b-k6z69w6a4y] {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}
	.grclients-list[b-k6z69w6a4y] {
		max-height: 200px;
		padding-right: 0;
		border-right: none;
		border-bottom: 1px solid #e4e4e0;
	}
}

/* Bulk-add box under the contact list. Sized for a pasted Outlook recipient run
   — a few lines, scrolling past that rather than pushing the editor's other
   fields off the panel. */
.grclients-paste[b-k6z69w6a4y] {
	font-size: 0.85rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	resize: vertical;
	min-height: 4.5rem;
	max-height: 12rem;
}

/* The per-client email-content switches. A column rather than a row: each one
   carries a preview of what it controls, and side by side those wrap into an
   unreadable grid at the panel's width. */
.grclients-switches[b-k6z69w6a4y] {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid #dcdcd6;
	border-radius: 4px;
}

.grclients-switch[b-k6z69w6a4y] {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 400;
	cursor: pointer;
}

.grclients-switch input[b-k6z69w6a4y] {
	margin-top: 2px;
	flex: 0 0 auto;
}

/* The preview under each switch sits on its own line, so a long greeting cannot
   push the label out of the panel. */
.grclients-switch .grclients-hint[b-k6z69w6a4y] {
	display: block;
	margin-left: 0;
}
/* /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-10ve4z9eub] {
	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-10ve4z9eub] {
	cursor: pointer;
	font-weight: 700;
	color: var(--ssy-colour-main-simpson-blue, #000061);
}

.grp-paste-area[b-10ve4z9eub] {
	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-10ve4z9eub] {
	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-8yu8u3os82] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gr00-header[b-8yu8u3os82] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid #dcdcd6;
	padding-bottom: 4px;
}

.gr00-date[b-8yu8u3os82] {
	margin: 0;
}

.gr00-tabs[b-8yu8u3os82] {
	display: flex;
	gap: 4px;
}

.gr00-tab[b-8yu8u3os82] {
	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-8yu8u3os82] {
	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-8yu8u3os82] {
	color: #b4b4ae;
	cursor: not-allowed;
}

.gr00-tab.is-active[b-8yu8u3os82] {
	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-8yu8u3os82] {
	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-8yu8u3os82] {
	display: none;
}
/* /Components/Pages/Bulkers/Reports/GeneralReport/GeneralReport_10_Report.razor.rz.scp.css */
.generalreport-pagelayout[b-2wt389fnm9] {
	padding: 10px 16px 40px;
}

.generalreport-pagelayout .gr-controls[b-2wt389fnm9] {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto 12px;
}
.generalreport-pagelayout .gr-date[b-2wt389fnm9] { margin: 0; }
.generalreport-pagelayout .gr-inline[b-2wt389fnm9] { font-size: 12px; color: #6b6b6b; display: flex; align-items: center; gap: 6px; }
.generalreport-pagelayout .gr-inline select[b-2wt389fnm9] { font-size: 13px; padding: 4px 7px; border: 1px solid #cfcfca; border-radius: 6px; }
.generalreport-pagelayout .gr-summary[b-2wt389fnm9] { 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-2wt389fnm9] {
	color: #7d2620;
	font-weight: 700;
	background: #f7e4e2;
	border-radius: 4px;
	padding: 3px 8px;
}

.generalreport-pagelayout .gr-bulk-overlay[b-2wt389fnm9] {
	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-2wt389fnm9] {
	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-2wt389fnm9] {
	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-2wt389fnm9 0.8s linear infinite;
}
.generalreport-pagelayout .gr-bulk-title[b-2wt389fnm9] {
	font-size: 17px;
	font-weight: 700;
	color: var(--ssy-colour-main-simpson-blue, #000061);
}
.generalreport-pagelayout .gr-bulk-detail[b-2wt389fnm9] {
	margin: 7px 0 10px;
	font-size: 13px;
	color: #4f4f4f;
}
.generalreport-pagelayout .gr-bulk-card progress[b-2wt389fnm9] {
	display: block;
	width: 100%;
	height: 10px;
	accent-color: var(--ssy-colour-main-simpson-blue, #000061);
}
.generalreport-pagelayout .gr-bulk-hint[b-2wt389fnm9] {
	margin-top: 12px;
	font-size: 12px;
	color: #6b6b6b;
}
@keyframes gr-bulk-spin-b-2wt389fnm9 {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.generalreport-pagelayout .gr-bulk-spinner[b-2wt389fnm9] { animation: none; }
}

/* Lock toggle: prominent, changes colour by state. */
.generalreport-pagelayout .ssy-btn-main.is-locked[b-2wt389fnm9] {
	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-2wt389fnm9] {
	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-2wt389fnm9] {
	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-2wt389fnm9] {
	box-shadow: 3px 3px 10px grey;
}

/* Helper text beside the paste popup's "Paste into" selector. Scoped sheet, not
   the report's inline <style> block: the popup is outside the @ref'd element, so
   this is screen-only and must never reach the PDF or the email. */
.gr-paste-hint[b-2wt389fnm9] {
	margin-left: 8px;
	font-size: 12px;
	font-style: italic;
	color: #6b6b6b;
}

/* The generate picker. Scoped sheet, not the report's inline <style> block: the
   popup sits outside the @ref'd element, so none of this can reach the PDF. */
.gr-pick-bar[b-2wt389fnm9] {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 8px;
}

.gr-pick-search[b-2wt389fnm9] {
	flex: 1 1 auto;
	max-width: 22rem;
	font-size: 13px;
	padding: 5px 8px;
	border: 1px solid #cfcfca;
	border-radius: 6px;
}

.gr-pick-list[b-2wt389fnm9] {
	max-height: 45vh;
	overflow-y: auto;
	border: 1px solid #cfcfca;
	border-radius: 4px;
	padding: 6px 8px;
}

.gr-pick-row[b-2wt389fnm9] {
	display: flex;
	gap: 8px;
	align-items: baseline;
	padding: 2px 0;
	cursor: pointer;
}

.gr-pick-row input[disabled][b-2wt389fnm9] {
	cursor: default;
}
/* /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-r430fjs8c6] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gr20-controls[b-r430fjs8c6] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
}

.gr20-inline[b-r430fjs8c6] {
	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-r430fjs8c6] {
	flex: 1 1 auto;
}

.gr20-summary[b-r430fjs8c6] {
	font-size: 0.9rem;
	color: #4a4a46;
}

.gr20-status[b-r430fjs8c6] {
	margin: 0;
	padding: 6px 10px;
	border-radius: 4px;
	background: #eef2fb;
	font-size: 0.9rem;
}

.gr20-status.is-error[b-r430fjs8c6] {
	background: #f7e4e2;
	color: #7d2620;
}

.gr20-table[b-r430fjs8c6] {
	width: 100%;
	font-size: 0.9rem;
}

.gr20-table td[b-r430fjs8c6],
.gr20-table th[b-r430fjs8c6] {
	vertical-align: top;
}

.gr20-tick[b-r430fjs8c6] {
	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-r430fjs8c6] {
	outline: 2px solid #a4362f;
	outline-offset: 1px;
}

.gr20-num[b-r430fjs8c6] {
	width: 90px;
	text-align: right;
	white-space: nowrap;
}

.gr20-client[b-r430fjs8c6] {
	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-r430fjs8c6] {
	word-break: break-word;
	max-width: 22rem;
	color: #4a4a46;
}

.gr20-table tr.is-master[b-r430fjs8c6] {
	background: #f4f7ff;
}

.gr20-table tr.is-failed[b-r430fjs8c6] {
	background: #fdf3f2;
}

.gr20-tag[b-r430fjs8c6] {
	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-r430fjs8c6] {
	background: #f6e6c8;
	color: #7a5410;
}

.gr20-status-pill[b-r430fjs8c6] {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
}

.gr20-pending[b-r430fjs8c6] {
	background: #e9eef8;
	color: #2c3a63;
}

.gr20-queued[b-r430fjs8c6] {
	background: #dff0e2;
	color: #14532a;
}

.gr20-sent[b-r430fjs8c6] {
	background: #16733a;
	color: #fff;
}

.gr20-failed[b-r430fjs8c6] {
	background: #a4362f;
	color: #fff;
}

.gr20-skipped[b-r430fjs8c6] {
	background: #e4e4e0;
	color: #4a4a46;
}

.gr20-error[b-r430fjs8c6] {
	margin-top: 2px;
	max-width: 22rem;
	color: #7d2620;
	font-size: 0.78rem;
	word-break: break-word;
}

.gr20-campaign[b-r430fjs8c6] {
	margin: 4px 0 0;
	font-size: 0.8rem;
	color: #6b6b6b;
}

.gr20-view[b-r430fjs8c6] {
	white-space: nowrap;
}

/* ----- Send confirmation modal ----- */

.gr20-confirm-lead[b-r430fjs8c6] {
	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-r430fjs8c6] {
	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-r430fjs8c6] {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	padding: 2px 0;
}

.gr20-confirm-list li + li[b-r430fjs8c6] {
	border-top: 1px solid #f0f0ec;
}

.gr20-confirm-list span[b-r430fjs8c6] {
	color: #4a4a46;
	word-break: break-word;
}

.gr20-confirm-warn[b-r430fjs8c6] {
	margin: 0;
	padding: 8px 10px;
	border-radius: 4px;
	background: #f7e4e2;
	color: #7d2620;
	font-weight: 700;
	font-size: 0.9rem;
}

/* ----- View modal ----- */

.gr20-viewmeta[b-r430fjs8c6] {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: 2px 12px;
	margin-bottom: 10px;
	font-size: 0.88rem;
}

.gr20-viewmeta > div[b-r430fjs8c6] {
	display: contents;
}

.gr20-viewmeta b[b-r430fjs8c6] {
	color: #6b6b6b;
	font-weight: 700;
}

.gr20-viewmeta span[b-r430fjs8c6] {
	word-break: break-word;
}

.gr20-viewtabs[b-r430fjs8c6] {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #dcdcd6;
	margin-bottom: 8px;
}

.gr20-viewtab[b-r430fjs8c6] {
	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-r430fjs8c6] {
	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-r430fjs8c6] {
	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-r430fjs8c6] {
	min-height: 60vh;
}

.gr20-pdfhost[b-r430fjs8c6]  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-fbegoqeejf] .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    /*        width: 100%;*/
}

[b-fbegoqeejf] .stalePrice {
    background-color: LightYellow;
}
/* /Components/Pages/Bulkers/Reports/PmxBkrDaily/PMX_DAILY_010_Main.razor.rz.scp.css */
/* /Components/Pages/Bulkers/Reports/PmxBkrDaily/PMX_DAILY_020_Overrides.razor.rz.scp.css */
/* Popup only - never part of the PDF, so scoped CSS is fine here */
.pmxdaily-overrides tr.pmxdaily-overrides-changed > td[b-7mzd33ycry],
.pmxdaily-overrides td.pmxdaily-overrides-changed[b-7mzd33ycry] {
    background-color: #fff3cd; /* soft amber: value differs from the live data */
}

.pmxdaily-overrides .pmxdaily-overrides-note[b-7mzd33ycry] {
    font-size: 0.8rem;
    margin: 4px 0 0 0;
}

.pmxdaily-overrides .pmxdaily-overrides-recalc[b-7mzd33ycry] {
    color: #8a6d00;
}
/* /Components/Pages/Bulkers/Reports/PmxBkrDaily/PMX_DAILY_100_Page1.razor.rz.scp.css */
.dashboard-grid[b-88nocop3sd] {
    display: flex;
    flex-direction: row;
    flex-wrap: nRowrap; /* prevents wrapping */
    gap: 12px;
    margin-bottom: 5px;
}

.dashboard-box[b-88nocop3sd] {
    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-88nocop3sd] {
    background-color: #000061; /* SSY blue */
    color: white;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.dashboard-box-value[b-88nocop3sd] {
    background-color: white;
    color: black;
    padding: 2px 0px;
    font-size: 16px;
    text-align: center;
}

.dashboard-box-value.positive[b-88nocop3sd] {
    color: green;
}

.dashboard-box-value.negative[b-88nocop3sd] {
    color: red;
}

.container-wrapper[b-88nocop3sd] {
    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-88nocop3sd] {
flex: 7 1 0;
}

.right-column[b-88nocop3sd] {
flex: 3 1 0;
}

.right-column[b-88nocop3sd] {
display: flex;
flex-direction: column;
gap: 8px; /* spacing between stacked sections */
}

.pacific-tables[b-88nocop3sd] {
display: flex;
gap: 12px;
}

.pacific-tables table[b-88nocop3sd] {
flex: 1 1 0;
}
/* /Components/Pages/Bulkers/Reports/SSYGearedMktReport/Components/RptSsyGearedRatesTable.razor.rz.scp.css */
.rpt-ssy-geared-rates-td[b-b6ylese953] {
    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-iceci4lmvn] {
    --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-iceci4lmvn] {
    padding: 18px 0 0;
}

.ssy-geared-mast-row[b-iceci4lmvn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 8px;
}

.ssy-geared-mast-brand[b-iceci4lmvn] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ssy-geared-mast-logo[b-iceci4lmvn] {
    height: 110px;
    width: auto;
    flex-shrink: 0;
    object-fit: fill;
    display: block;
}

.ssy-geared-mast-title h1[b-iceci4lmvn] {
    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-iceci4lmvn] {
    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-iceci4lmvn] {
    text-align: right;
    font-size: 12px;
    color: var(--ssy-grey);
    line-height: 1.6;
}

.ssy-geared-mast-contact .date-display[b-iceci4lmvn] {
    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-iceci4lmvn] {
    color: #999;
    display: inline-block;
    min-width: 50px;
}

.ssy-geared-mast-contact a[b-iceci4lmvn] {
    color: var(--ssy-blue);
    text-decoration: none;
    font-weight: 500;
}

.ssy-geared-mast-contact a:hover[b-iceci4lmvn] {
    text-decoration: underline;
}

/* Decorative wave below the masthead */
.ssy-geared-mast-wave[b-iceci4lmvn] {
    display: block;
    width: 100%;
    height: 32px;
    margin-top: 2px;
    overflow: visible;
}

/* ─── Toolbar ─── */
.ssy-geared-toolbar[b-iceci4lmvn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 8px;
    flex-wrap: wrap;
}

.ssy-geared-date-nav[b-iceci4lmvn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssy-geared-page-nav[b-iceci4lmvn] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ssy-geared-actions[b-iceci4lmvn] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Pill buttons (section nav + edit toggles) */
.ssy-geared-pill[b-iceci4lmvn] {
    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-iceci4lmvn] {
    background: var(--ssy-grey-soft);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(31, 78, 138, 0.12);
}

.ssy-geared-pill.active[b-iceci4lmvn] {
    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-iceci4lmvn] {
    background: var(--ssy-aqua);
}

/* Comment icon button */
.ssy-geared-icon-btn[b-iceci4lmvn] {
    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-iceci4lmvn] {
    background: #173d70;
    transform: translateY(-1px);
}

/* ─── Region tabs ─── */
.ssy-geared-region-tabs[b-iceci4lmvn] {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--ssy-blue-light);
    margin: 8px 0 22px;
}

.ssy-geared-region-tab[b-iceci4lmvn] {
    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-iceci4lmvn] {
    background: rgba(78, 192, 224, 0.18);
    color: var(--ssy-navy);
}

.ssy-geared-region-tab.active[b-iceci4lmvn] {
    color: #fff;
    background: var(--ssy-blue-light);
}

.ssy-geared-region-tab[disabled][b-iceci4lmvn] {
    color: #aaa;
    cursor: not-allowed;
}

.ssy-geared-region-tab em[b-iceci4lmvn] {
    font-style: normal;
    color: #999;
    font-weight: 400;
    font-size: 11px;
}

/* ─── Section content layout ─── */
.ssy-geared-content[b-iceci4lmvn] {
    min-height: 480px;
    animation: ssy-fade-b-iceci4lmvn 0.25s ease-out;
}

@keyframes ssy-fade-b-iceci4lmvn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.ssy-geared-section-h[b-iceci4lmvn] {
    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-iceci4lmvn]::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-iceci4lmvn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 22px 0 10px;
}

.ssy-geared-prose[b-iceci4lmvn] {
    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-iceci4lmvn] {
    font-size: 12px;
    color: #888;
    margin: 12px 0 0;
}

/* ─── Overview cards ─── */
.ssy-geared-overview-cards[b-iceci4lmvn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 14px 0 20px;
}

.ssy-geared-overview-card[b-iceci4lmvn] {
    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-iceci4lmvn]::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-iceci4lmvn] {
    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-iceci4lmvn]::after {
    opacity: 1;
}

.ssy-geared-overview-card h4[b-iceci4lmvn] {
    color: var(--ssy-blue);
    font-size: 16px;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.ssy-geared-overview-card .card-sub[b-iceci4lmvn] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.45;
    flex: 1;
}

.ssy-geared-overview-card .card-cta[b-iceci4lmvn] {
    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-iceci4lmvn] {
    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-iceci4lmvn] {
    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-iceci4lmvn] {
    font-size: 13px;
    color: var(--ssy-grey);
    font-weight: 500;
}

.ssy-geared-list-head .count .up[b-iceci4lmvn]   { color: var(--ssy-up);   font-weight: 700; }
.ssy-geared-list-head .count .down[b-iceci4lmvn] { color: var(--ssy-down); font-weight: 700; }

/* ─── Cargo: segment headers + region bands ─── */
.ssy-geared-segment-h[b-iceci4lmvn] {
    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-iceci4lmvn] {
    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-iceci4lmvn] {
    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-iceci4lmvn] {
    color: var(--ssy-navy);
}
/* /Components/Pages/Bulkers/Reports/USGULF/Components/RptUsGulfRatesTable.razor.rz.scp.css */
rpt-ecsa-table-td[b-ndcir9e4k6] {
    font-size: 1em !important;
}
/* /Components/Pages/Bulkers/VoyageCalculator/CalcGuide/CalcGuide.razor.rz.scp.css */
/* Calculation guide.  Every rule hangs off the page wrapper; the chapters are this folder's own sub-components, so
   their markup is reached with ::deep (CLAUDE.md rule 7).  Colours are the brand variables from ssyglobal.css. */

.calcguide-pagelayout[b-pytvxho1m1] {
    --calcguide-navy: var(--ssy-colour-main-simpson-blue);
    --calcguide-blue: var(--ssy-colour-main-bright-blue);
    --calcguide-deep: var(--ssy-colour-main-deep-blue);
    --calcguide-crystal: var(--ssy-colour-main-crystal-blue);
    --calcguide-teal: var(--ssy-colour-palette-teal-green);
    --calcguide-gold: var(--ssy-colour-palette-golden-yellow);
    --calcguide-orange: var(--ssy-colour-palette-bright-orange);
    --calcguide-red: var(--ssy-colour-palette-crimson-red);
    --calcguide-purple: var(--ssy-colour-palette-royal-purple);
    --calcguide-slate: var(--ssy-colour-palette-slate-gray);
    --calcguide-line: var(--ssy-colour-palette-light-bluegray);
    --calcguide-paper: #F4F7FA;
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 1rem 4rem;
    color: #1C2733;
    background-color: #FFFFFF;
    line-height: 1.55;
    font-size: 0.95rem;
}

/* ---- Hero ---- */
.calcguide-pagelayout .calcguide-hero[b-pytvxho1m1] {
    position: relative;
    overflow: hidden;
    margin: 1rem 0 0;
    padding: 2.5rem 2.5rem 2rem;
    border-radius: 1.25rem;
    color: #FFFFFF;
    background: linear-gradient(125deg, var(--calcguide-navy) 0%, var(--calcguide-deep) 55%, var(--calcguide-crystal) 100%);
}

.calcguide-pagelayout .calcguide-hero h1[b-pytvxho1m1] {
    margin: 0 0 0.5rem;
    font-size: 2.2rem;
    line-height: 1.15;
    color: #FFFFFF;
}

.calcguide-pagelayout .calcguide-hero p[b-pytvxho1m1] {
    max-width: 46rem;
    margin: 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.88);
}

.calcguide-pagelayout .calcguide-hero-waves[b-pytvxho1m1] {
    position: absolute;
    right: -2rem;
    bottom: -1rem;
    width: 26rem;
    opacity: 0.25;
    pointer-events: none;
}

.calcguide-pagelayout .calcguide-hero-stats[b-pytvxho1m1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.calcguide-pagelayout .calcguide-hero-stats span[b-pytvxho1m1] {
    padding: 0.35rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ---- Sticky contents bar ---- */
.calcguide-pagelayout .calcguide-nav[b-pytvxho1m1] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0 2rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 18px rgba(0, 0, 97, 0.10);
}

.calcguide-pagelayout .calcguide-nav a[b-pytvxho1m1] {
    padding: 0.25rem 0.7rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--calcguide-navy);
    background-color: var(--calcguide-paper);
}

.calcguide-pagelayout .calcguide-nav a:hover[b-pytvxho1m1] {
    color: #FFFFFF;
    background-color: var(--calcguide-blue);
}

.calcguide-pagelayout .calcguide-nav .calcguide-nav-period[b-pytvxho1m1] {
    background-color: #FFF5E0;
}

/* ---- Parts (Voyage / Period / Reference) ---- */
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-part {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3.5rem 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--calcguide-navy);
    scroll-margin-top: 6rem;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-part h2 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--calcguide-navy);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-part-badge {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    font-weight: 700;
    font-size: 1.3rem;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--calcguide-blue), var(--calcguide-navy));
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-part.period .calcguide-part-badge {
    background: linear-gradient(135deg, var(--calcguide-gold), var(--calcguide-orange));
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-part.period {
    border-bottom-color: var(--calcguide-orange);
}

/* ---- Sections ---- */
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-section {
    margin: 0 0 2.5rem;
    scroll-margin-top: 6rem;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-section h3 {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    color: var(--calcguide-navy);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-section h3 .calcguide-step {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-size: 0.9rem;
    color: #FFFFFF;
    background-color: var(--calcguide-blue);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-period .calcguide-section h3 .calcguide-step {
    background-color: var(--calcguide-orange);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-section h4 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.05rem;
    color: var(--calcguide-deep);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-lead {
    max-width: 52rem;
    font-size: 1.02rem;
    color: var(--calcguide-slate);
}

/* ---- Cards and grids ---- */
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    align-items: start;
    margin: 1rem 0;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-grid.two {
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-card {
    padding: 1rem 1.15rem;
    border-radius: 0.9rem;
    background-color: #FFFFFF;
    border: 1px solid #E3EAF0;
    box-shadow: 0 2px 10px rgba(0, 0, 97, 0.06);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-card h5 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--calcguide-navy);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-card ul {
    margin: 0;
    padding-left: 1.1rem;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-card.accent {
    border-top: 4px solid var(--calcguide-blue);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-card.teal {
    border-top: 4px solid var(--calcguide-teal);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-card.gold {
    border-top: 4px solid var(--calcguide-gold);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-card.purple {
    border-top: 4px solid var(--calcguide-purple);
}

/* ---- Formula boxes ---- */
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-formula {
    margin: 0.9rem 0;
    padding: 0.9rem 1.2rem;
    border-radius: 0.75rem;
    border-left: 5px solid var(--calcguide-blue);
    background-color: var(--calcguide-paper);
    font-family: Consolas, 'Cascadia Mono', 'Courier New', monospace;
    font-size: 0.9rem;
    white-space: pre-wrap;
    color: var(--calcguide-navy);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-formula b {
    color: var(--calcguide-deep);
}

/* ---- Callouts ---- */
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-note,
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-warn,
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-tip {
    margin: 1rem 0;
    padding: 0.8rem 1rem 0.8rem 1.1rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-note {
    background-color: #EAF6FB;
    border-left: 4px solid var(--calcguide-crystal);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-tip {
    background-color: #E9F7F5;
    border-left: 4px solid var(--calcguide-teal);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-warn {
    background-color: #FFF4EC;
    border-left: 4px solid var(--calcguide-orange);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-note b:first-child,
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-tip b:first-child,
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-warn b:first-child {
    color: var(--calcguide-navy);
}

/* ---- Tables ---- */
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-table {
    width: 100%;
    margin: 0.75rem 0 1rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    border: 1px solid #E3EAF0;
    border-radius: 0.6rem;
    overflow: hidden;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-table th {
    padding: 0.5rem 0.7rem;
    text-align: left;
    color: #FFFFFF;
    background-color: var(--calcguide-navy);
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-table td {
    padding: 0.45rem 0.7rem;
    vertical-align: top;
    border-top: 1px solid #E3EAF0;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-table tr:nth-child(even) td {
    background-color: #FAFCFD;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-table td.num,
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-table tr.total td {
    font-weight: 700;
    color: var(--calcguide-navy);
    background-color: #EAF6FB;
}

/* ---- Diagrams (inline svg) ---- */
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-figure {
    margin: 1.25rem 0;
    padding: 1rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, #FFFFFF, var(--calcguide-paper));
    border: 1px solid #E3EAF0;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--calcguide-slate);
    text-align: center;
}

.calcguide-pagelayout[b-pytvxho1m1]  svg .d-navy { fill: var(--calcguide-navy); }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-blue { fill: var(--calcguide-blue); }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-deep { fill: var(--calcguide-deep); }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-crystal { fill: var(--calcguide-crystal); }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-teal { fill: var(--calcguide-teal); }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-gold { fill: var(--calcguide-gold); }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-orange { fill: var(--calcguide-orange); }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-red { fill: var(--calcguide-red); }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-purple { fill: var(--calcguide-purple); }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-pale { fill: #EAF6FB; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-paleorange { fill: #FFF1E3; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-grey { fill: #E3EAF0; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-line { stroke: var(--calcguide-slate); stroke-width: 2; fill: none; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-dash { stroke: var(--calcguide-slate); stroke-width: 1.5; stroke-dasharray: 5 5; fill: none; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-sea { stroke: var(--calcguide-crystal); stroke-width: 4; fill: none; stroke-linecap: round; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-sea-eca { stroke: var(--calcguide-teal); stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 8 6; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-t { font-size: 13px; fill: #1C2733; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-tw { font-size: 13px; fill: #FFFFFF; font-weight: 600; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-ts { font-size: 11px; fill: var(--calcguide-slate); }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-th { font-size: 15px; fill: var(--calcguide-navy); font-weight: 700; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-mid { text-anchor: middle; }
.calcguide-pagelayout[b-pytvxho1m1]  svg .d-end { text-anchor: end; }

/* ---- Worked example ---- */
.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-example {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    border: 2px dashed var(--calcguide-line);
    background-color: #FFFFFF;
}

.calcguide-pagelayout[b-pytvxho1m1]  .calcguide-example > h5 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--calcguide-teal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Collapsible detail ---- */
.calcguide-pagelayout[b-pytvxho1m1]  details.calcguide-more {
    margin: 0.75rem 0;
    padding: 0.6rem 1rem;
    border-radius: 0.6rem;
    background-color: var(--calcguide-paper);
}

.calcguide-pagelayout[b-pytvxho1m1]  details.calcguide-more summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--calcguide-deep);
}

/* ---- Glossary ---- */
.calcguide-pagelayout[b-pytvxho1m1]  dl.calcguide-glossary {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.calcguide-pagelayout[b-pytvxho1m1]  dl.calcguide-glossary dt {
    font-weight: 700;
    color: var(--calcguide-navy);
}

.calcguide-pagelayout[b-pytvxho1m1]  dl.calcguide-glossary dd {
    margin: 0;
}

.calcguide-pagelayout[b-pytvxho1m1]  code {
    padding: 0.05rem 0.3rem;
    border-radius: 0.3rem;
    font-size: 0.85em;
    color: var(--calcguide-deep);
    background-color: var(--calcguide-paper);
}

.calcguide-pagelayout .calcguide-footer[b-pytvxho1m1] {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid #E3EAF0;
    font-size: 0.8rem;
    color: var(--calcguide-slate);
}
/* /Components/Pages/Bulkers/VoyageCalculator/VoyageCalculator_325_VesselInfoFeatures.razor.rz.scp.css */
/* Additional information + features under the vessel details: info (1 column) | features (2 columns, VoyageCalculator_326),
   stacking on narrow screens.  Colours from the ssy palette: shown in both calcs, so not the period page's custom properties. */

.voyagecalculator-vesselinfo[b-9w9v8ib5p2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1rem 2rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ssy-colour-palette-light-bluegray);
    font-size: 0.9rem;
}

    .voyagecalculator-vesselinfo .voyagecalculator-vesselinfo-title[b-9w9v8ib5p2] {
        margin: 0 0 0.75rem;
        font-size: 1rem;
        font-weight: 600;
    }

    /* label | value pairs */
    .voyagecalculator-vesselinfo .voyagecalculator-vesselinfo-list[b-9w9v8ib5p2] {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 0.35rem 1rem;
        margin: 0;
    }

        .voyagecalculator-vesselinfo .voyagecalculator-vesselinfo-list dt[b-9w9v8ib5p2] {
            font-weight: normal;
            color: var(--ssy-colour-palette-slate-gray);
        }

        .voyagecalculator-vesselinfo .voyagecalculator-vesselinfo-list dd[b-9w9v8ib5p2] {
            margin: 0;
        }

    .voyagecalculator-vesselinfo .voyagecalculator-vesselinfo-note[b-9w9v8ib5p2] {
        margin: 0.75rem 0 0;
        font-size: 0.8rem;
        font-weight: normal;
        color: var(--ssy-colour-palette-slate-gray);
    }

@media (max-width: 900px) {
    .voyagecalculator-vesselinfo[b-9w9v8ib5p2] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Bulkers/VoyageCalculator/VoyageCalculator_326_VesselFeatureEditor.razor.rz.scp.css */
/* Vessel feature list: label | value pairs, split over --voyagecalculator-featureeditor-columns columns (1 on narrow screens).
   Colours from the ssy palette: shown in both calcs. */

.voyagecalculator-featureeditor .voyagecalculator-featureeditor-cols[b-dw3d1p6bug] {
    display: grid;
    grid-template-columns: repeat(var(--voyagecalculator-featureeditor-columns, 1), minmax(0, 1fr));
    gap: 0 2rem;
}

.voyagecalculator-featureeditor .voyagecalculator-featureeditor-list[b-dw3d1p6bug] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem 1rem;
    margin: 0;
}

    .voyagecalculator-featureeditor .voyagecalculator-featureeditor-list dt[b-dw3d1p6bug] {
        font-weight: normal;
        color: var(--ssy-colour-palette-slate-gray);
    }

    .voyagecalculator-featureeditor .voyagecalculator-featureeditor-list dd[b-dw3d1p6bug] {
        margin: 0;
    }

    .voyagecalculator-featureeditor .voyagecalculator-featureeditor-list select[b-dw3d1p6bug],
    .voyagecalculator-featureeditor .voyagecalculator-featureeditor-list input[type="text"][b-dw3d1p6bug] {
        width: min(11rem, 100%);
    }

    .voyagecalculator-featureeditor .voyagecalculator-featureeditor-list input[type="number"][b-dw3d1p6bug] {
        width: 6.5rem;
        text-align: right;
    }

.voyagecalculator-featureeditor .voyagecalculator-featureeditor-tag[b-dw3d1p6bug] {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.voyagecalculator-featureeditor .voyagecalculator-featureeditor-note[b-dw3d1p6bug] {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.voyagecalculator-featureeditor .voyagecalculator-featureeditor-error[b-dw3d1p6bug] {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--ssy-colour-palette-crimson-red);
}

@media (max-width: 900px) {
    .voyagecalculator-featureeditor .voyagecalculator-featureeditor-cols[b-dw3d1p6bug] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Bulkers/VoyageCalculator/VoyageCalculator_995_AdminFeatures.razor.rz.scp.css */
/* Admin > Sizes / Vessel features.  The tables keep the global ssy-table-lw header, stripes and hover; this adds the frame,
   roomier cells, a gap between each size's columns, quiet inputs that show a border on hover / focus, and the drag handle. */

.voyagecalculator-adminfeatures[b-3a5bobe2wu] {
    --adminfeatures-line: color-mix(in srgb, var(--ssy-colour-palette-light-bluegray) 55%, white);
    --adminfeatures-accent: var(--ssy-colour-main-crystal-blue);
    display: grid;
    gap: 0.75rem;
    font-size: 0.85rem;
}

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-note[b-3a5bobe2wu] {
        margin: 0 0 0.75rem;
        color: var(--ssy-colour-palette-slate-gray);
    }

    /* ---- Table frame ---- */

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-frame[b-3a5bobe2wu] {
        border: 1px solid var(--adminfeatures-line);
        border-radius: 8px;
        overflow: auto;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-scroll[b-3a5bobe2wu] {
        max-height: 60vh;
    }

        .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-scroll thead[b-3a5bobe2wu] {
            position: sticky;
            top: 0;
            z-index: 1;
        }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table[b-3a5bobe2wu] {
        width: 100%;
        border-collapse: collapse;
    }

        .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table th[b-3a5bobe2wu],
        .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table td[b-3a5bobe2wu] {
            padding: 0.45rem 0.6rem;
            vertical-align: middle;
            white-space: nowrap;
        }

        .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table tbody td[b-3a5bobe2wu] {
            border-bottom: 1px solid var(--adminfeatures-line);
        }

        .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table tbody tr:last-child td[b-3a5bobe2wu] {
            border-bottom: none;
        }

    /* Second header row (From / To, On / Default %): smaller, under the group names */
    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-subhead th[b-3a5bobe2wu] {
        padding-top: 0;
        font-size: 0.75rem;
        opacity: 0.9;
    }

    /* Each group of columns (a size, a DWT range) starts with a divider and extra room */
    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table .voyagecalculator-adminfeatures-groupstart[b-3a5bobe2wu] {
        padding-left: 1.25rem;
        border-left: 1px solid var(--adminfeatures-line);
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table th.voyagecalculator-adminfeatures-groupstart[b-3a5bobe2wu] {
        border-left-color: rgba(255, 255, 255, 0.35);
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-fill[b-3a5bobe2wu] {
        width: 100%;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-tick[b-3a5bobe2wu] {
        text-align: center;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-num[b-3a5bobe2wu] {
        text-align: right;
        padding-right: 1rem;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-size[b-3a5bobe2wu] {
        text-align: center;
        font-weight: bold;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-all[b-3a5bobe2wu] {
        font-size: 0.75rem;
        font-weight: normal;
        opacity: 0.85;
    }

        .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-all button[b-3a5bobe2wu] {
            color: inherit;
        }

            .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-all button:hover[b-3a5bobe2wu] {
                text-decoration: underline;
            }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-muted[b-3a5bobe2wu] {
        color: var(--ssy-colour-palette-slate-gray);
    }

    /* ---- Inputs: quiet until hovered or focused ---- */

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input[type="text"][b-3a5bobe2wu],
    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input[type="number"][b-3a5bobe2wu] {
        font: inherit;
        color: inherit;
        padding: 0.2rem 0.45rem;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table tr:hover input[b-3a5bobe2wu],
    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input:hover[b-3a5bobe2wu] {
        border-color: var(--ssy-colour-palette-light-bluegray);
        background: white;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input:focus[b-3a5bobe2wu] {
        outline: none;
        border-color: var(--adminfeatures-accent);
        background: white;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--adminfeatures-accent) 20%, transparent);
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input:disabled[b-3a5bobe2wu] {
        opacity: 0.35;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input[type="number"][b-3a5bobe2wu] {
        width: 6.5rem;
        text-align: right;
    }

        .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input[type="number"].voyagecalculator-adminfeatures-perc[b-3a5bobe2wu] {
            width: 4.5rem;
        }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input[type="text"][b-3a5bobe2wu] {
        width: 8rem;
    }

        .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input[type="text"].voyagecalculator-adminfeatures-wide[b-3a5bobe2wu] {
            width: 100%;
            min-width: 13rem;
        }

    /* Plain ticks (On, Default size).  Interesting / Adds % keep the global ssy-checkbox-slider look */
    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input[type="checkbox"]:not(.ssy-checkbox-slider)[b-3a5bobe2wu],
    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input[type="radio"][b-3a5bobe2wu] {
        width: 1rem;
        height: 1rem;
        accent-color: var(--adminfeatures-accent);
        cursor: pointer;
        vertical-align: middle;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-remove[b-3a5bobe2wu] {
        color: var(--ssy-colour-palette-slate-gray);
        opacity: 0.6;
    }

        .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-remove:hover[b-3a5bobe2wu] {
            color: var(--ssy-colour-palette-crimson-red);
            opacity: 1;
        }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table input[type="text"].voyagecalculator-adminfeatures-unit[b-3a5bobe2wu] {
        width: 4rem;
        margin-left: 0.25rem;
    }

    /* Delete: a confirmation bar above the table, the row it is about marked */
    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-confirm[b-3a5bobe2wu] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--ssy-colour-palette-crimson-red);
        border-radius: 8px;
    }

        .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-confirm span[b-3a5bobe2wu] {
            flex: 1 1 20rem;
        }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-deleting td[b-3a5bobe2wu] {
        box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--ssy-colour-palette-crimson-red) 10%, transparent);
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-add[b-3a5bobe2wu] {
        margin-top: 0.75rem;
    }

    /* ---- Drag to reorder ---- */

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table .voyagecalculator-adminfeatures-handle[b-3a5bobe2wu] {
        width: 1.75rem;
        padding-right: 0;
        text-align: center;
        font-size: 1.1rem;
        line-height: 1;
        color: var(--ssy-colour-palette-light-bluegray);
        cursor: grab;
        user-select: none;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table tbody tr:hover .voyagecalculator-adminfeatures-handle[b-3a5bobe2wu],
    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table .voyagecalculator-adminfeatures-handle:focus-visible[b-3a5bobe2wu] {
        color: var(--adminfeatures-accent);
        outline: none;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-table .voyagecalculator-adminfeatures-handle:active[b-3a5bobe2wu] {
        cursor: grabbing;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-dragging[b-3a5bobe2wu] {
        opacity: 0.4;
    }

    /* Where the dragged row will land */
    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-dropbefore td[b-3a5bobe2wu] {
        box-shadow: inset 0 2px 0 var(--adminfeatures-accent);
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-dropafter td[b-3a5bobe2wu] {
        box-shadow: inset 0 -2px 0 var(--adminfeatures-accent);
    }

    /* ---- Save bar ---- */

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-actions[b-3a5bobe2wu] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .voyagecalculator-adminfeatures .voyagecalculator-adminfeatures-warning[b-3a5bobe2wu] {
        color: var(--ssy-colour-palette-crimson-red);
    }
/* /Components/Pages/Bulkers/VoyageCalculator/VoyageRoutes_010_PopupEditRoute.razor.rz.scp.css */
/* Route editor.  Help panel on the right, form on the left. */

.voyageroutes-editroute[b-tdqd0b5jw7] {
    font-size: 0.85rem;
}

.voyageroutes-editroute .voyageroutes-editroute-top[b-tdqd0b5jw7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.voyageroutes-editroute .voyageroutes-editroute-layout[b-tdqd0b5jw7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
}

/* Stays in view while the itinerary scrolls */
.voyageroutes-editroute .voyageroutes-editroute-help[b-tdqd0b5jw7] {
    position: sticky;
    top: 0;
    padding: 0.75rem 1rem;
    background-color: #F4F7F9;
    border-left: 3px solid #009DC9;
}

.voyageroutes-editroute .voyageroutes-editroute-help-title[b-tdqd0b5jw7] {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.voyageroutes-editroute .voyageroutes-editroute-section[b-tdqd0b5jw7] {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Route fields: label above box */
.voyageroutes-editroute .voyageroutes-editroute-fields[b-tdqd0b5jw7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem 1rem;
}

.voyageroutes-editroute .voyageroutes-editroute-field[b-tdqd0b5jw7] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.voyageroutes-editroute .voyageroutes-editroute-wide[b-tdqd0b5jw7] {
    grid-column: span 2;
}

.voyageroutes-editroute .voyageroutes-editroute-field input:not([type="checkbox"])[b-tdqd0b5jw7],
.voyageroutes-editroute .voyageroutes-editroute-field select[b-tdqd0b5jw7] {
    width: 100%;
}

.voyageroutes-editroute .voyageroutes-editroute-field input[type="checkbox"][b-tdqd0b5jw7] {
    align-self: flex-start;
}

.voyageroutes-editroute .voyageroutes-editroute-summary[b-tdqd0b5jw7] {
    margin-bottom: 0.4rem;
}

.voyageroutes-editroute .voyageroutes-editroute-warnings[b-tdqd0b5jw7],
.voyageroutes-editroute .voyageroutes-editroute-rowwarning[b-tdqd0b5jw7] {
    color: #DB303A;
}

.voyageroutes-editroute .voyageroutes-editroute-note[b-tdqd0b5jw7] {
    color: #000061;
}

.voyageroutes-editroute .voyageroutes-editroute-muted[b-tdqd0b5jw7] {
    color: #6B7C93;
    white-space: nowrap;
}

/* Itinerary: one column per value.  Scrolls sideways rather than squashing the boxes on a narrow screen */
.voyageroutes-editroute .voyageroutes-editroute-itinerary-scroll[b-tdqd0b5jw7] {
    overflow-x: auto;
}

.voyageroutes-editroute .voyageroutes-editroute-itinerary[b-tdqd0b5jw7] {
    width: 100%;
    border-collapse: collapse;
}

    .voyageroutes-editroute .voyageroutes-editroute-itinerary th[b-tdqd0b5jw7],
    .voyageroutes-editroute .voyageroutes-editroute-itinerary td[b-tdqd0b5jw7] {
        padding: 0.25rem 0.3rem;
        vertical-align: middle;
        border-bottom: 1px solid #B5CBD6;
        text-align: left;
    }

    .voyageroutes-editroute .voyageroutes-editroute-itinerary th[b-tdqd0b5jw7] {
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.1;
        vertical-align: bottom;
    }

    .voyageroutes-editroute .voyageroutes-editroute-itinerary select[b-tdqd0b5jw7] {
        width: 10rem;
    }

    .voyageroutes-editroute .voyageroutes-editroute-itinerary input[type="number"][b-tdqd0b5jw7] {
        width: 4.75rem;
    }

    .voyageroutes-editroute .voyageroutes-editroute-itinerary input.voyageroutes-editroute-text[b-tdqd0b5jw7] {
        width: 11rem;
    }

    .voyageroutes-editroute .voyageroutes-editroute-itinerary input.voyageroutes-editroute-port[b-tdqd0b5jw7] {
        width: 9rem;
    }

.voyageroutes-editroute .voyageroutes-editroute-num[b-tdqd0b5jw7] {
    text-align: right;
}

/* A row's warnings sit on their own line under it, joined to it */
.voyageroutes-editroute .voyageroutes-editroute-itinerary tr:has(+ .voyageroutes-editroute-warningrow) td[b-tdqd0b5jw7] {
    border-bottom: none;
}

.voyageroutes-editroute .voyageroutes-editroute-itinerary .voyageroutes-editroute-warningrow td[b-tdqd0b5jw7] {
    padding-top: 0;
}

.voyageroutes-editroute .voyageroutes-editroute-row-cargo[b-tdqd0b5jw7] {
    background-color: #EAF0F4;
}

.voyageroutes-editroute .voyageroutes-editroute-row-end[b-tdqd0b5jw7] {
    background-color: #F4F7F9;
}

.voyageroutes-editroute .voyageroutes-editroute-row-eca td:nth-child(2)[b-tdqd0b5jw7] {
    border-left: 3px solid #91A527;
}

.voyageroutes-editroute .voyageroutes-editroute-move button[b-tdqd0b5jw7] {
    display: block;
    line-height: 1;
}

    .voyageroutes-editroute .voyageroutes-editroute-move button:disabled[b-tdqd0b5jw7] {
        visibility: hidden;
    }

.voyageroutes-editroute .voyageroutes-editroute-actions button[b-tdqd0b5jw7] {
    font-size: 1.1rem;
    font-weight: 800;
}

.voyageroutes-editroute .voyageroutes-editroute-delete[b-tdqd0b5jw7] {
    color: #DB303A;
}

.voyageroutes-editroute .voyageroutes-editroute-insert[b-tdqd0b5jw7] {
    color: #91A527;
}

.voyageroutes-editroute .voyageroutes-editroute-costs td[b-tdqd0b5jw7],
.voyageroutes-editroute .voyageroutes-editroute-costs th[b-tdqd0b5jw7] {
    padding: 0.2rem 0.4rem;
}
/* /Components/Pages/Bulkers/VoyageRates/Calculator/RateCalcPortSearch.razor.rz.scp.css */
.rcalc-ps[b-jvoui111nu] {
    position: relative;
}

.rcalc-ps-list[b-jvoui111nu] {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    min-width: 100%;
    max-height: 30vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    background-color: white;
    border: 1px solid #000061;
    border-radius: 8px;
}

.rcalc-ps-item[b-jvoui111nu] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 10px;
    text-align: left;
    white-space: nowrap;
}

    .rcalc-ps-item:hover[b-jvoui111nu] {
        background-color: #D3E9FF;
    }

.rcalc-ps-country[b-jvoui111nu] {
    color: gray;
}
/* /Components/Pages/Bulkers/VoyageRates/Calculator/RateCalcResults.razor.rz.scp.css */
.rcalc-res[b-wf5dhquz6n] {
    display: flex;
    flex-direction: column;
}

.rcalc-res-head[b-wf5dhquz6n] {
    padding: 6px 0 8px 0;
    border-bottom: 1px solid lightgray;
}

.rcalc-res-rate[b-wf5dhquz6n] {
    font-size: 2em;
    font-weight: 600;
    color: #000061;
    line-height: 1.1;
}

.rcalc-res-unit[b-wf5dhquz6n] {
    font-size: 0.5em;
    font-weight: normal;
}

.rcalc-res-sub[b-wf5dhquz6n] {
    color: gray;
}

.rcalc-res-warn[b-wf5dhquz6n] {
    margin: 6px 0 0 0;
    padding: 4px 8px 4px 22px;
    color: #7A4F00;
    background-color: #FDEBC8;
    border-radius: 6px;
}

.rcalc-res-title[b-wf5dhquz6n] {
    font-size: 0.95em;
    margin: 10px 0 4px 0;
    color: #000061;
}

.rcalc-res-table[b-wf5dhquz6n] {
    width: 100%;
    border-collapse: collapse;
}

    .rcalc-res-table th[b-wf5dhquz6n] {
        background-color: #000061;
        color: white;
        font-weight: normal;
        padding: 2px 4px;
        text-align: right;
    }

    .rcalc-res-table td[b-wf5dhquz6n] {
        padding: 1px 4px;
        text-align: right;
    }

        .rcalc-res-table th:first-child[b-wf5dhquz6n],
        .rcalc-res-table td:first-child[b-wf5dhquz6n] {
            text-align: left;
        }

    .rcalc-res-table tbody tr:nth-of-type(odd)[b-wf5dhquz6n] {
        background-color: #E9EFF9;
    }

    .rcalc-res-table tfoot td[b-wf5dhquz6n] {
        font-weight: 600;
        border-top: 1px solid #000061;
    }

.rcalc-res-sens[b-wf5dhquz6n] {
    display: flex;
    gap: 16px;
    margin-top: 4px;
    color: gray;
}

.rcalc-res-tce[b-wf5dhquz6n] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .rcalc-res-tce input[b-wf5dhquz6n] {
        width: 100px;
    }

.rcalc-res-label[b-wf5dhquz6n] {
    font-weight: 500;
    white-space: nowrap;
}

.rcalc-res-tce-value[b-wf5dhquz6n] {
    font-weight: 600;
    color: #000061;
    white-space: nowrap;
}
/* /Components/Pages/Bulkers/VoyageRates/Calculator/RateCalcSourceBadge.razor.rz.scp.css */
.rcalc-badge[b-8w1u83hk0u] {
    display: inline-block;
    margin-top: 2px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.75em;
    color: #163E9F;
    background-color: #E9EFF9;
    white-space: nowrap;
}

.rcalc-badge-manual[b-8w1u83hk0u] {
    color: #444;
    background-color: #F0F0F0;
}

.rcalc-badge-ageing[b-8w1u83hk0u] {
    color: #7A4F00;
    background-color: #FDEBC8;
}

.rcalc-badge-stale[b-8w1u83hk0u] {
    color: #8A0016;
    background-color: #FBD9DF;
}
/* /Components/Pages/Bulkers/VoyageRates/Calculator/RateCalculator.razor.rz.scp.css */
.rcalc-page[b-e3ormjk1ng] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 1% 0 1%;
    font-size: 0.85em;
}

.rcalc-loading[b-e3ormjk1ng] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    margin-top: 2%;
}

.rcalc-note[b-e3ormjk1ng] {
    color: gray;
}

/* calculation chips and actions */
.rcalc-bar[b-e3ormjk1ng] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.rcalc-calcs[b-e3ormjk1ng] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-right: 8px;
}

.rcalc-calc[b-e3ormjk1ng] {
    padding: 3px 10px;
    border: 1px solid #000061;
    border-radius: 8px;
    background-color: white;
    color: #163E9F;
}

.rcalc-calc-on[b-e3ormjk1ng] {
    background-color: #000061;
    color: white;
}

.rcalc-name[b-e3ormjk1ng] {
    width: 200px;
}

.rcalc-btn[b-e3ormjk1ng] {
    padding: 3px 10px;
    border: 1px solid #000061;
    border-radius: 8px;
    background-color: white;
    white-space: nowrap;
}

    .rcalc-btn:hover[b-e3ormjk1ng] {
        background-color: #D3E9FF;
    }

.rcalc-btn-danger[b-e3ormjk1ng] {
    border-color: #B00020;
    color: #B00020;
}

/* the four panels */
.rcalc-grid[b-e3ormjk1ng] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(230px, 0.9fr) minmax(360px, 1.4fr) minmax(280px, 1.1fr) minmax(320px, 1.3fr);
    gap: 10px;
}

@media (max-width: 1500px) {
    .rcalc-grid[b-e3ormjk1ng] {
        grid-template-columns: repeat(2, minmax(320px, 1fr));
    }
}

.rcalc-panel[b-e3ormjk1ng] {
    min-height: 0;
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid #000061;
    border-radius: 10px;
}

    .rcalc-panel h4[b-e3ormjk1ng] {
        margin: 0 0 6px 0;
        font-size: 1.1em;
        color: #000061;
    }

    .rcalc-panel h5[b-e3ormjk1ng] {
        margin: 10px 0 4px 0;
        padding-top: 6px;
        font-size: 0.95em;
        border-top: 1px solid lightgray;
    }

.rcalc-fields[b-e3ormjk1ng] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
}

.rcalc-field[b-e3ormjk1ng] {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

.rcalc-field-wide[b-e3ormjk1ng] {
    grid-column: 1 / -1;
}

.rcalc-field-check[b-e3ormjk1ng],
.rcalc-field-button[b-e3ormjk1ng] {
    justify-content: flex-end;
}

.rcalc-label[b-e3ormjk1ng] {
    margin-bottom: 1px;
    font-size: 0.85em;
    font-weight: 500;
}

.rcalc-off[b-e3ormjk1ng] {
    opacity: 0.45;
}

.rcalc-check[b-e3ormjk1ng] {
    justify-content: unset;
    width: fit-content;
    margin-top: 4px;
}

.rcalc-radio[b-e3ormjk1ng] {
    overflow: hidden;
    margin-bottom: 6px;
}

.rcalc-tc[b-e3ormjk1ng] {
    margin-top: 2px;
    color: #000061;
}

/* legs and port calls */
.rcalc-table[b-e3ormjk1ng] {
    width: 100%;
    border-collapse: collapse;
}

    .rcalc-table th[b-e3ormjk1ng] {
        padding: 2px 4px;
        font-weight: normal;
        text-align: left;
        color: white;
        background-color: #000061;
    }

    .rcalc-table td[b-e3ormjk1ng] {
        padding: 2px 4px;
        vertical-align: middle;
    }

    .rcalc-table input[b-e3ormjk1ng] {
        min-width: 70px;
    }

/* extra costs */
.rcalc-extra[b-e3ormjk1ng] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.rcalc-extra-amount[b-e3ormjk1ng] {
    width: 90px;
}

.rcalc-extra-unit[b-e3ormjk1ng] {
    width: 65px;
}

.rcalc-remove[b-e3ormjk1ng] {
    font-weight: 500;
    color: #B00020;
}
/* /Components/Pages/Bulkers/VoyageRates/Commodities.razor.rz.scp.css */
.vr-map-cont[b-646qpjhxuw] {
    height: 100%;
    width: 100%;
    padding-top: 12px;
    display: flex; 
    flex-direction: row;
}
.vr-map-cont path[b-646qpjhxuw] {
    fill: lightgray
}
.vr-map-svg-cont svg[b-646qpjhxuw] {
    width: 50%;
    height: 50%;
}

.vr-map-svg-cont[b-646qpjhxuw] {
    height: 100%;
    width: 50%;
}

.vr-country-cont[b-646qpjhxuw] {
    height: 100%;
    width: 50%;
}

.vr-stats[b-646qpjhxuw] {
    margin-top: 2%;
    height: 98%;
    width: 100%;
}
/* /Components/Pages/Bulkers/VoyageRates/Comps/Map.razor.rz.scp.css */
.world-map-cont[b-v480jvbt1x] {
    height: 100%;
    width: 100%;
}
.world-map-cont path[b-v480jvbt1x] {
    fill: #F0F0F0;
}
.world-map-cont svg[b-v480jvbt1x] {
    height: 100%;
    width: 100%;
}

.country-clickable[b-v480jvbt1x] {
    cursor: pointer;
    fill: #98ABB4 !important;
    transition: fill 0.3s ease;
}

    .country-clickable:hover[b-v480jvbt1x] {
        fill: #009DC9 !important;
    }

.country-chosen[b-v480jvbt1x] {
    cursor: pointer;
    fill: #0087CB !important;
    transition: fill 0.3s ease;
}

.route-path[b-v480jvbt1x] {
    stroke: #000061;
    transition: stroke 0.3s ease;
}
    .route-path:hover[b-v480jvbt1x] {
        stroke: red !important;
    }
/* /Components/Pages/Bulkers/VoyageRates/NewVoyageRoute.razor.rz.scp.css */
.dropdown-search[b-rs9bc0l40f] {
    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-rs9bc0l40f] {
    display: flex;
    width: 100%;
}

    .dropdown-search-item:hover[b-rs9bc0l40f] {
        background-color: #F0F0F0;
    }

.vr-btn[b-rs9bc0l40f] {
    height: 32px;
    width: 32px;
    border: 1px solid #000061;
    background-color: white;
    border-radius: 999px;
}
    .vr-btn:hover[b-rs9bc0l40f] {
        background-color: #D3E9FF;
        font-weight: 500;
    }
    .vr-btn:focus[b-rs9bc0l40f] {
        background-color: #D3E9FF;
        font-weight: 500;
    }
/* /Components/Pages/Bulkers/VoyageRates/PortInfoManager.razor.rz.scp.css */
.dropdown-search[b-4ymbyaypfj] {
    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-4ymbyaypfj] {
    display: flex;
    width: 100%;
}

    .dropdown-search-item:hover[b-4ymbyaypfj] {
        background-color: #F0F0F0;
    }
/* /Components/Pages/Futures/ApiSetup/FuturesRatesSetup.razor.rz.scp.css */
.gasextractbox[b-cd7d507er4] {
    border: 1px solid #009DC9;
    height: 85vh;
    overflow-y: scroll;
}

.gasextractdatepicker[b-cd7d507er4] {
}

.gasextractroutepicker[b-cd7d507er4] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 10px;
}

.gasextractroutepicker-ul[b-cd7d507er4] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.gasextractroutepicker-ul .chkbox[b-cd7d507er4] {
    margin: 0 3px 0 0;
    vertical-align: middle;
}


.gasextractroutepicker-ul li[b-cd7d507er4] {
    text-decoration: none;
}

.gasextractroutepicker-ul li:hover[b-cd7d507er4] {
    background-color: #B5CBD6;
}


.deleterow[b-cd7d507er4], .editapiclient[b-cd7d507er4] {
    cursor: pointer;
    padding-right: 3px;
}

.deleterow:hover[b-cd7d507er4] {
    font-weight: 700;
    color: white;
}

.draggablerow[b-cd7d507er4] {
    cursor: pointer;
}

.editapiclient[b-cd7d507er4] {
    color: #163E9F;
}


.editapiclient:hover[b-cd7d507er4] {
    font-weight: 700;
    color: #91A527;
}
/* /Components/Pages/Futures/ApiSetup/FuturesTradeSummarySetup.razor.rz.scp.css */
/* ats- = ApiSetupTrades (Futures Trade Summary API setup) */

.ats-page[b-yy5phmfjf3] {
    display: grid;
    gap: 5%;
    grid-template-columns: 20% 25% 45%;
    height: 90vh;
}

.ats-scrollbox[b-yy5phmfjf3] {
    border: 1px solid #009DC9;
    height: 85vh;
    overflow-y: scroll;
}

.ats-routepicker[b-yy5phmfjf3] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 10px;
}

.ats-routepicker-ul[b-yy5phmfjf3] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.ats-routepicker-ul .ats-chkbox[b-yy5phmfjf3] {
    margin: 0 3px 0 0;
    vertical-align: middle;
}

.ats-routepicker-ul li[b-yy5phmfjf3] {
    text-decoration: none;
}

.ats-routepicker-ul li:hover[b-yy5phmfjf3] {
    background-color: #B5CBD6;
}

.ats-delete-row[b-yy5phmfjf3], .ats-edit-client[b-yy5phmfjf3], .ats-delete-client[b-yy5phmfjf3] {
    cursor: pointer;
    padding-right: 3px;
}

.ats-delete-row:hover[b-yy5phmfjf3], .ats-delete-client:hover[b-yy5phmfjf3] {
    font-weight: 700;
    color: white;
}

.ats-draggable-row[b-yy5phmfjf3] {
    cursor: pointer;
}

.ats-edit-client[b-yy5phmfjf3] {
    color: #163E9F;
}

.ats-edit-client:hover[b-yy5phmfjf3] {
    font-weight: 700;
    color: #91A527;
}
/* /Components/Pages/Futures/BalticFwdPrices/BalticFwdPrices.razor.rz.scp.css */
.positive[b-zp9fxrg6zl] {
    color: mediumseagreen !important;
}

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

.ssy-table-lw td[b-zp9fxrg6zl], .ssy-table-lw th[b-zp9fxrg6zl] {
    padding: .25rem;
}

.radio-btns input[type="radio"][b-zp9fxrg6zl] {
    display: none;
}

.radio-label[b-zp9fxrg6zl] {
    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-zp9fxrg6zl] {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

.radio-item[b-zp9fxrg6zl] {
    flex: 1;
    min-width: 120px;
}
.ssy-date-selector[b-zp9fxrg6zl] {
    font-size: 1.5em;
    color: #009DC9;
}
.ssy-date-selector time[b-zp9fxrg6zl] {
    font-weight: 600;
}

.section-container[b-zp9fxrg6zl] {
    padding: 0;
    border-radius: 0;  /* Removed border radius */
    height: auto;
    margin: 0;
}

.section-container table[b-zp9fxrg6zl] {
    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-zp9fxrg6zl],
.section-container table td[b-zp9fxrg6zl] {
    padding: 0.25rem 0.5rem;
    white-space: nowrap;  /* Prevent wrapping */
}

.section-container table th:first-child[b-zp9fxrg6zl],
.section-container table td:first-child[b-zp9fxrg6zl] {
    width: 40%;
    text-align: left;

}

.section-container table th:nth-child(2)[b-zp9fxrg6zl],
.section-container table td:nth-child(2)[b-zp9fxrg6zl],
.section-container table th:last-child[b-zp9fxrg6zl],
.section-container table td:last-child[b-zp9fxrg6zl] {
    width: 30%;  /* Adjusted width distribution */
    text-align: right;
    direction: ltr;  /* Ensure numbers read left-to-right */
}


@media (min-width: 992px) {
    .container-fluid[b-zp9fxrg6zl] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .col-lg-4[b-zp9fxrg6zl] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .section-container[b-zp9fxrg6zl] {
        margin: 0;
        flex: 0 0 auto;
    }

    .mt-4[b-zp9fxrg6zl] {
        margin-top: 0 !important;
    }
}
/* /Components/Pages/Futures/DataAndHistoricals/DataAndHistoricals.razor.rz.scp.css */
.commentary[b-jq73s3zro0] {
    color: #000061;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 10pt;
    margin-bottom: 2rem;
}

.eod_vol_total[b-jq73s3zro0] {
    cursor: grab;
    background-color: #B5CBD6;
}

.eod_vol_total:hover[b-jq73s3zro0] {
    background-color: #B5CBD6A0;
}

.dataSourceButtons[b-jq73s3zro0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 0.5%;
    margin-bottom: 0.7%;
}

.dataSourceButtons button[b-jq73s3zro0] {
    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-jq73s3zro0]  .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-jq73s3zro0] {
    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-jq73s3zro0] {
    /* 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-jq73s3zro0] {
    background: #f2f5fb;
    border-color: #000061;
}

.eod-desk-tab:focus-visible[b-jq73s3zro0] {
    outline: 2px solid #0087CC;
    outline-offset: 2px;
}

/* Active = solid navy fill, white text, slightly raised */
.eod-desk-tab.active[b-jq73s3zro0] {
    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-jq73s3zro0],
.eod-desk-tab:disabled[b-jq73s3zro0] {
    background: #f4f5f7;
    border-color: #e0e3e8;
    color: #b5bdc7;
    cursor: not-allowed;
    box-shadow: none;
}

.eod-desk-tab.no-access:hover[b-jq73s3zro0],
.eod-desk-tab:disabled:hover[b-jq73s3zro0] {
    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-jq73s3zro0] {
    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-jq73s3zro0] {
        padding: 0.45rem 0.9rem;
        font-size: 0.9rem;
        min-width: 70px;
    }
    .eod-desk-tabs[b-jq73s3zro0] {
        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-t6zjf3sb62] {
    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-t6zjf3sb62] {
    padding: 0.4rem 0.6rem;
}

.uranium-bpi-prices[b-t6zjf3sb62] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.uranium-bpi-price-item[b-t6zjf3sb62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.uranium-bpi-price-label[b-t6zjf3sb62] {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.uranium-bpi-price-value[b-t6zjf3sb62] {
    font-size: 1.1rem;
    font-weight: 700;
}

.uranium-bpi-divider[b-t6zjf3sb62] {
    font-size: 1.2rem;
    color: #aaa;
    padding: 0 0.1rem;
    align-self: flex-end;
    padding-bottom: 2px;
}

.uranium-bpi-change[b-t6zjf3sb62] {
    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-t6zjf3sb62]   { color: #91A527; font-weight: 600; }
.uranium-price-down[b-t6zjf3sb62] { color: #DB303A; font-weight: 600; }
.uranium-price-flat[b-t6zjf3sb62] { color: #405864; font-weight: 600; }

.uranium-bpi-asof[b-t6zjf3sb62] {
    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-6p0t5uz6cx] {
    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-25xstkuwsp] {
    padding: 0.4rem 0.6rem;
}

.uranium-bpi-prices[b-25xstkuwsp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.uranium-bpi-price-item[b-25xstkuwsp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.uranium-bpi-price-label[b-25xstkuwsp] {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.uranium-bpi-price-value[b-25xstkuwsp] {
    font-size: 1.1rem;
    font-weight: 700;
}

.uranium-bpi-divider[b-25xstkuwsp] {
    font-size: 1.2rem;
    color: #aaa;
    padding: 0 0.1rem;
    align-self: flex-end;
    padding-bottom: 2px;
}

.uranium-bpi-change[b-25xstkuwsp] {
    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-25xstkuwsp]   { color: #91A527; font-weight: 600; }
.uranium-price-down[b-25xstkuwsp] { color: #DB303A; font-weight: 600; }

/* ── Curve table ─────────────────────────────────────────────────────── */
.uranium-curve-table[b-25xstkuwsp] {
    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-25xstkuwsp] {
    background: #000061 !important;
    color: #ffffff !important;
}

.uranium-curve-product-cell[b-25xstkuwsp] {
    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-25xstkuwsp] {
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    color: #ffffff !important;
}

.uranium-subheader-row th[b-25xstkuwsp] {
    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-25xstkuwsp] {
    text-align: center;
}

.uranium-change-header[b-25xstkuwsp] {
    text-align: center;
    color: #888 !important;
}

.uranium-curve-price-cell[b-25xstkuwsp] {
    text-align: center;
    white-space: nowrap;
}

.uranium-change-cell[b-25xstkuwsp] {
    text-align: center;
    white-space: nowrap;
    font-size: 0.82rem;
}

.uranium-sep[b-25xstkuwsp] {
    color: #bbb;
    margin: 0 0.15rem;
}

.uranium-no-price[b-25xstkuwsp] {
    color: #bbb;
    text-align: center;
}

/* Location Swap priced the other way round - sits under the Bid and runs across the Offer */
.uranium-swap-label[b-25xstkuwsp] {
    font-size: 0.68rem;
    color: #c26a00;
    text-align: left;
    white-space: nowrap;
    line-height: 1.1;
}

/* ── Table wrapper: horizontal breathing room ────────────────────────── */
.uranium-table-wrap[b-25xstkuwsp] {
    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-25xstkuwsp] { width: 70px; }
/* Bid / Offer value columns */
.uranium-col-price[b-25xstkuwsp]  { width: 52px; }
/* "/" separator — as narrow as possible */
.uranium-col-sep[b-25xstkuwsp]    { width: 14px; }
/* Change column */
.uranium-col-change[b-25xstkuwsp] { width: 50px; }

/* ── Mobile overrides — make 3-route table fit without horizontal scroll  */
@media (max-width: 767px) {
    .uranium-curve-table[b-25xstkuwsp] {
        font-size: 0.75rem;
    }
    /* Tighten cell padding so values have room */
    .uranium-curve-table td[b-25xstkuwsp],
    .uranium-curve-table th[b-25xstkuwsp] {
        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-25xstkuwsp] { width: 48px; }
    .uranium-col-price[b-25xstkuwsp]  { width: 40px; }
    .uranium-col-sep[b-25xstkuwsp]    { width: 8px;  }
    .uranium-col-change[b-25xstkuwsp],.uranium-change-cell[b-25xstkuwsp], .uranium-change-header[b-25xstkuwsp] { 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-bd11h8e3pf] {
    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-vlggbh0gfp] {
    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-vlggbh0gfp] {
    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-vlggbh0gfp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ulc-th[b-vlggbh0gfp] {
    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-vlggbh0gfp] {
    text-align: left;
}

.ulc-row td[b-vlggbh0gfp] {
    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-vlggbh0gfp] {
    background: rgba(22, 62, 159, 0.35); /* deep-blue, faded */
}

.ulc-row td.ulc-period[b-vlggbh0gfp] {
    text-align: left;
    color: var(--ssy-colour-palette-golden-yellow);
    font-weight: 500;
}

.ulc-row td.ulc-loc[b-vlggbh0gfp] {
    color: var(--ssy-colour-palette-golden-yellow);
    font-size: 0.8rem;
}

.ulc-row td.ulc-bid[b-vlggbh0gfp] {
    color: var(--ssy-colour-palette-olive-green);
    font-weight: 600;
}

.ulc-row td.ulc-indic[b-vlggbh0gfp] {
    color: var(--ssy-colour-main-bright-blue);
    font-weight: 600;
}

.ulc-row td.ulc-ask[b-vlggbh0gfp] {
    color: var(--ssy-colour-palette-crimson-red);
    font-weight: 600;
}

.ulc-row td.ulc-change[b-vlggbh0gfp] {
    font-size: 0.8rem;
}

.ulc-arrow[b-vlggbh0gfp] {
    font-size: 0.7rem;
}

.ulc-up[b-vlggbh0gfp] {
    color: var(--ssy-colour-palette-olive-green);
}

.ulc-down[b-vlggbh0gfp] {
    color: var(--ssy-colour-palette-crimson-red);
}

.ulc-flat[b-vlggbh0gfp] {
    color: var(--ssy-colour-palette-light-bluegray);
}

.ulc-asof[b-vlggbh0gfp] {
    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-vlggbh0gfp] {
    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-0bpkvgr7wf] {
    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-0bpkvgr7wf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    min-height: 61px;
}

.uoc-title[b-0bpkvgr7wf] {
    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-0bpkvgr7wf] {
    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-0bpkvgr7wf] {
    flex: 1 1 auto;
    justify-content: center;
}

.uoc-greek-col[b-0bpkvgr7wf] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* A stacked label-over-value stat (used for each greek and the price) */
.uoc-stat[b-0bpkvgr7wf] {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.2;
}

.uoc-result-label[b-0bpkvgr7wf] {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    white-space: nowrap;
}

.uoc-greek-value[b-0bpkvgr7wf] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
}

.uoc-price-value[b-0bpkvgr7wf] {
    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-0bpkvgr7wf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 0.5rem;
}

.uoc-note[b-0bpkvgr7wf] {
    margin: 0;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--ssy-colour-palette-slate-gray, #405864);
}

.uoc-greeks-toggle[b-0bpkvgr7wf] {
    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-0bpkvgr7wf] {
    accent-color: var(--ssy-colour-main-deep-blue, #163E9F);
    cursor: pointer;
    margin: 0;
}

.uoc-greeks-toggle span[b-0bpkvgr7wf] {
    -webkit-user-select:none;
    user-select:none;
}

.uoc-divider[b-0bpkvgr7wf] {
    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-0bpkvgr7wf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.uoc-toggle-btn[b-0bpkvgr7wf] {
    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-0bpkvgr7wf] {
    background: rgba(22, 62, 159, 0.08);
}

.uoc-toggle-active[b-0bpkvgr7wf],
.uoc-toggle-active:hover[b-0bpkvgr7wf] {
    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-0bpkvgr7wf] {
    display: grid;
    gap: 0.55rem 0.75rem;
    margin-bottom: 0.7rem;
}

.uoc-grid-2[b-0bpkvgr7wf] {
    grid-template-columns: 1fr 1fr;
}

.uoc-grid-3[b-0bpkvgr7wf] {
    grid-template-columns: 1fr 1fr 1fr;
}

.uoc-field[b-0bpkvgr7wf] {
    display: flex;
    flex-direction: column;
}

.uoc-label[b-0bpkvgr7wf] {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    margin-bottom: 0.2rem;
}

.uoc-input[b-0bpkvgr7wf] {
    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-0bpkvgr7wf] {
    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-0bpkvgr7wf] {
        justify-content: center;
    }

    .uoc-title[b-0bpkvgr7wf] {
        flex-basis: 100%;
        text-align: center;
    }

    .uoc-readout[b-0bpkvgr7wf] {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 380px) {
    .uoc-grid-2[b-0bpkvgr7wf],
    .uoc-grid-3[b-0bpkvgr7wf] {
        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-fhcb7d2nfg] {
    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-fhcb7d2nfg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    min-height: 61px;
}

.urc-title[b-fhcb7d2nfg] {
    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-fhcb7d2nfg] {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

/* A stacked label-over-value stat */
.urc-stat[b-fhcb7d2nfg] {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.2;
}

.urc-result-label[b-fhcb7d2nfg] {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    white-space: nowrap;
}

.urc-return-value[b-fhcb7d2nfg] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ssy-colour-main-bright-blue, #0087CB);
}

.urc-annual-value[b-fhcb7d2nfg] {
    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-fhcb7d2nfg] { color: #1a7f4b; }
.urc-neg[b-fhcb7d2nfg] { color: #c0392b; }

/* ── Note + days-held readout ────────────────────────────────────────── */
.urc-note-row[b-fhcb7d2nfg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 0.5rem;
}

.urc-note[b-fhcb7d2nfg] {
    margin: 0;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--ssy-colour-palette-slate-gray, #405864);
}

.urc-days[b-fhcb7d2nfg] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ssy-colour-main-deep-blue, #163E9F);
    white-space: nowrap;
}

.urc-divider[b-fhcb7d2nfg] {
    border: none;
    border-top: 1px solid var(--ssy-colour-palette-light-bluegray, #B5CBD6);
    margin: 0.8rem 0;
}

/* ── Inputs ──────────────────────────────────────────────────────────── */
.urc-grid[b-fhcb7d2nfg] {
    display: grid;
    gap: 0.55rem 0.75rem;
    margin-bottom: 0.2rem;
}

.urc-grid-2[b-fhcb7d2nfg] {
    grid-template-columns: 1fr 1fr;
}

.urc-field[b-fhcb7d2nfg] {
    display: flex;
    flex-direction: column;
}

.urc-label[b-fhcb7d2nfg] {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--ssy-colour-palette-slate-gray, #405864);
    margin-bottom: 0.2rem;
}

.urc-input[b-fhcb7d2nfg] {
    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-fhcb7d2nfg] {
    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-fhcb7d2nfg] {
        justify-content: center;
    }

    .urc-title[b-fhcb7d2nfg] {
        flex-basis: 100%;
        text-align: center;
    }

    .urc-readout[b-fhcb7d2nfg] {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 380px) {
    .urc-grid-2[b-fhcb7d2nfg] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Futures/EodBatteryMetalsEmail.razor.rz.scp.css */


.bminputpage[b-hsn8k5v0hn] {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 1fr;
}


@media screen and (max-width: 600px) {

    .bminputpage[b-hsn8k5v0hn] {
        display: flex;
        flex-direction: column;
    }
}
/* /Components/Pages/Futures/EodCommentary.razor.rz.scp.css */

.eodCommPage-grid-container[b-08tn9vi0i0] {
    display: grid;
    grid-template-columns: var(--input-columns);
    grid-gap: 40px;
    background-color: transparent;
}
/*
.grid-item-input {
}
*/
.eodcomm-pricesColumn[b-08tn9vi0i0] {
    grid-row: 1 / span 2;
    width: 580px;
    /* width: 580px; float: left; margin-right:10px;*/
}



.showOnSmallScreens[b-08tn9vi0i0] {
    display: none;
}


@media screen and (max-width: 600px) {


    .eodCommPage-grid-container[b-08tn9vi0i0] {
        display: block;
        grid-gap: 40px;
        background-color: transparent;
    }

    .showOnSmallScreens[b-08tn9vi0i0] {
        display: block;
    }
}

.rcorners[b-08tn9vi0i0] {
    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-08tn9vi0i0] {
    background-color: #70ad4755;
    border-color: #70ad47;
}

.badborder[b-08tn9vi0i0] {
    background-color: #ff804155;
    border-color: #ff8041;
}

.ffatabcontent[b-08tn9vi0i0] {
    border: 1px solid #405864;
    padding: 5px;
    background-color: #F4F7F9;
    border-radius: 3px;
}
/* /Components/Pages/Futures/EuEtsCalculator.razor.rz.scp.css */
.euets-flex[b-rlotr6c9wb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
}

.text-end[b-rlotr6c9wb] {
    padding-left:0;
}

.euets-flex-calculations[b-rlotr6c9wb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 27px;
    margin-bottom: 15px;
}

.euets-flex-result[b-rlotr6c9wb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 27px;
    width: 100%;
}

.euets-grid-saved[b-rlotr6c9wb] {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    list-style:none;
    margin-left: 0;
    padding-left: 0;
}

.euets-grid-saved li[b-rlotr6c9wb] {
    margin-left: 0;
    padding-left: 0;
}

.main-col-left[b-rlotr6c9wb] {
    width: 350px;
}

.main-col-right[b-rlotr6c9wb] {
    /*flex: 1 0 auto;*/
}

.euets-table-header1[b-rlotr6c9wb] {
    font-family: 'Soehne breit', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1.2rem;
    color: #009DC9;
    border: 2px solid #B5CBD6;
}

.euets-table-header2[b-rlotr6c9wb] {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #009DC9;
}

.euets-result-values[b-rlotr6c9wb] {
    font-size: 1rem;
    color: #000061;
    background-color: #E9EFF98A;
    font-weight: normal;
}

.euets-flex-savename[b-rlotr6c9wb] {
    display: flex;
    justify-content: space-between;
    width: 355px;
}

.euets-savename[b-rlotr6c9wb] {
    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-rlotr6c9wb] {
    border-radius: 0 25px 25px 0;
    background: #F7A506;
    border: none;
    padding: 3px 0 3px 0;
    width: 30px;
    cursor: pointer;
}

.euets-flex-delete[b-rlotr6c9wb] {
    display: flex;
    justify-content: space-between;
    width: 150px;
}

.euets-savename-delete-confirm[b-rlotr6c9wb] {
    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-rlotr6c9wb] {
    border-radius: 0 25px 25px 0;
    background: #91A527;
    border: none;
    padding: 3px;
    width: 75px;
    cursor: pointer;
}

.euets-country-input[b-rlotr6c9wb] {
    border: 1px solid #ced4da;
    border-radius: .375rem;
    color: #212529;
    padding: .375rem .75rem;
    line-height: 1.5;
}




.euets-flex-contact[b-rlotr6c9wb] {
    display: flex;
    justify-content: space-around;
    height: 200px;
    width: 410px;
    padding: 5px;
}


.euets-assumptions-noneditable.form-control:disabled[b-rlotr6c9wb]{
    background-color: #fff;
    color: #000;
    border-color: #fff;
}



@media only screen and (max-width: 1620px) {
    .euets-flex[b-rlotr6c9wb] {
        gap: 10px;
    }


}
/* /Components/Pages/Futures/FuturesDataExtractor/FuturesTradeExtractor_00.razor.rz.scp.css */
.tradeextractPageLayout[b-wf59seoslh] {
    display: grid;
    grid-template-columns: 320px auto;
    gap: 20px;
}

.tradeextractbox[b-wf59seoslh] {
    border: 1px solid #009DC9;
}

.tradeextractdatepicker[b-wf59seoslh] {
}

.tradeextractroutepicker[b-wf59seoslh] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 20px;
}

.tradeextractroutepicker-ul[b-wf59seoslh] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    .tradeextractroutepicker-ul .chkbox[b-wf59seoslh] {
        margin: 0 3px 0 0;
        vertical-align: middle;
    }


    .tradeextractroutepicker-ul li[b-wf59seoslh] {
        text-decoration: none;
    }

        .tradeextractroutepicker-ul li:hover[b-wf59seoslh] {
            background-color: #B5CBD6;
        }

.tradeextractroutepicker-tbl tr:hover[b-wf59seoslh] {
    background-color: #B5CBD6;
}

.tradeextractroutepicker-tbl td[b-wf59seoslh] {
    padding-right: 30px;
}

.tradeextractroutepicker-tbl .delete[b-wf59seoslh] {
    cursor: pointer;
    padding-right: 3px;
}

    .tradeextractroutepicker-tbl .delete:hover[b-wf59seoslh] {
        font-weight: 700;
        color: white;
    }

.tradeextractoutput-tbl th:not(:first-child)[b-wf59seoslh] {
    text-align: center;
    border: 1px solid #B5CBD6;
}

.tradeextractoutput-tbl[b-wf59seoslh] {
    text-align: right;
}

    .tradeextractoutput-tbl tr:hover[b-wf59seoslh] {
        background-color: #B5CBD6;
    }

    .tradeextractoutput-tbl td:first-child[b-wf59seoslh], .tradeextractoutput-tbl th:first-child[b-wf59seoslh] {
        text-align: left;
    }

    .tradeextractoutput-tbl th label[b-wf59seoslh] {
        font-size: 0.8rem;
        font-weight: normal;
        color: #163E9F;
        font-style: italic;
    }

.tradeextractoutpup-btn-text[b-wf59seoslh] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

    .tradeextractoutpup-btn-text > div[b-wf59seoslh] {
        flex-shrink: 0;
    }

    .tradeextractoutpup-btn-text button[b-wf59seoslh] {
        white-space: nowrap;
    }

.tradeextractoutput-c3y[b-wf59seoslh] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.disclaimer-accordion[b-wf59seoslh] {
    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-wf59seoslh] {
        background-color: #405864;
        color: white;
    }


.tradeflashing[b-wf59seoslh] {
    animation: tradeflash-b-wf59seoslh 3s infinite;
    color: #EB3871;
    font-weight: bold;
}

        @keyframes tradeflash-b-wf59seoslh {
            0%  {opacity: 1; }
            50% {opacity: 0.5; }
            100% {opacity: 1; }
        }
/* /Components/Pages/Futures/IntradayDashboard/IntradayDashboard.razor.rz.scp.css */
.settings-container[b-vo1i2hrjmc] {
    position: fixed;
    top: 50px;
    display: flex;
    flex-direction: column;
    z-index: 925;
    left: 0;
    border-left: 3px solid #243447;
}

.settings-container.light-theme[b-vo1i2hrjmc] {
    border-left: 3px solid #000061;
}

.settings-container .settings-btn[b-vo1i2hrjmc] {
    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-vo1i2hrjmc] {
    background-color: #000061;
}

.settings-container .settings-btn:last-child[b-vo1i2hrjmc] {
    border-radius: 0 0px 15px 0;
}

.settings-container .settings-btn:hover[b-vo1i2hrjmc] {
    background-color: white;
    color: #243447;
    border: 1px solid #243447;
}

.settings-container.light-theme .settings-btn:hover[b-vo1i2hrjmc] {
    color: #000061;
    border: 1px solid #000061;
}

.settings-container .settings-btn:hover[b-vo1i2hrjmc]  path,
.settings-container .settings-btn[b-vo1i2hrjmc]  svg:hover path,
.settings-container .settings-btn[b-vo1i2hrjmc]  path:hover {
    fill: #243447;
}

.settings-container.light-theme .settings-btn:hover[b-vo1i2hrjmc]  path,
.settings-container.light-theme .settings-btn[b-vo1i2hrjmc]  svg:hover path,
.settings-container.light-theme .settings-btn[b-vo1i2hrjmc]  path:hover {
    fill: #000061;
}


.settings-container .settings-btn.copy-fade-in-fade-out[b-vo1i2hrjmc] {
    animation-name: copyFadeInOut-b-vo1i2hrjmc;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

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

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.dashboard-container[b-vo1i2hrjmc] {
    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-vo1i2hrjmc] {
    position: relative;
    display: grid;
    gap: 12px;
    width: fit-content;
    height: fit-content;
    max-width: 100%;
    max-height: 100%;
}

.item[b-vo1i2hrjmc] {
    width: 100%;
    user-select: none;
    touch-action: none;
    cursor: grab;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.board.modal-open .item[b-vo1i2hrjmc],
.board.modal-open[b-vo1i2hrjmc] {
    cursor: default;
}

.item:active[b-vo1i2hrjmc],
.item:focus[b-vo1i2hrjmc],
.item:focus-visible[b-vo1i2hrjmc] {
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    outline: none;
}

.placeholder-slot[b-vo1i2hrjmc] {
    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-vo1i2hrjmc] {
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
}

.js-drag-ghost[b-vo1i2hrjmc] {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    cursor: grabbing;
}

/* Add box shadow to child element */
.js-drag-ghost[b-vo1i2hrjmc]  > div {
    box-shadow: 0 14px 28px light-dark(rgba(0,0,0,.18), rgba(255,255,255,.18));
}

.js-drag-placeholder[b-vo1i2hrjmc] {
    z-index: 1;
}

[b-vo1i2hrjmc] .intraday-settings-tab-legend {
    margin-right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-vo1i2hrjmc] .intraday-settings-configs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

[b-vo1i2hrjmc] .intraday-settings-config-group {
    border: 1px solid #495057;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

[b-vo1i2hrjmc] .intraday-settings-config-title {
    color: #000061;
    margin-bottom: 0.5rem;
}

[b-vo1i2hrjmc] .intraday-settings-config-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-vo1i2hrjmc] .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-vo1i2hrjmc] .intraday-settings-config-row.selected {
    border-color: #0d6efd;
    background: color-mix(in srgb, #0d6efd 15%, transparent);
}

[b-vo1i2hrjmc] .intraday-settings-config-main {
    flex: 1;
    text-align: left;
}

[b-vo1i2hrjmc] .intraday-settings-config-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-vo1i2hrjmc] .intraday-settings-config-actions button {
    border: none;
    background: transparent;
    color: inherit;
}

[b-vo1i2hrjmc] .intraday-settings-config-edit {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

[b-vo1i2hrjmc] .intraday-settings-config-edit input {
    flex: 1;
}

[b-vo1i2hrjmc] .intraday-settings-checkbox-row {
    width: 100%;
}

[b-vo1i2hrjmc] .intraday-settings-checkbox-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    padding-left: 0;
}

[b-vo1i2hrjmc] .intraday-settings-checkbox-label {
    padding-left: 0.5rem;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    margin: 0;
}

[b-vo1i2hrjmc] .ssy-recursive-checkboxlist legend {
    font-size: 1.25rem;
}

[b-vo1i2hrjmc] .ssy-recursive-checkboxlist-children {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

[b-vo1i2hrjmc] .ssy-recursive-checkboxlist-items {
    display: flex;
    flex-direction: column;
}

[b-vo1i2hrjmc] .ssy-recursive-checkboxlist-items > label {
    margin-bottom: 0.75rem;
}


/* Radio styling   */
/* ============== */
.chart-radio.myssy-radio-main[b-vo1i2hrjmc] {
    display: flex;
    justify-content: center;
    gap: 0.5em;
}

.chart-radio.myssy-radio-main input[b-vo1i2hrjmc] {
    display: none;
}

.chart-radio.myssy-radio-main label[b-vo1i2hrjmc] {
    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-vo1i2hrjmc] {
    background: #0076b0; /* light-dark(#0076b0, #1e3a5f); */
}

.chart-radio.myssy-radio-main input:checked + label[b-vo1i2hrjmc] {
    background: #000061; /*light-dark(#000061, #22C55E);*/
    color: #fff; /*light-dark(#fff, #0f172a);*/
    border-color: transparent;
}

.chart-radio.myssy-radio-main input:disabled + label[b-vo1i2hrjmc] {
    background: #E5E7EB;
    color: #000000;
    cursor: not-allowed;
    border-color: transparent;
}
/* /Components/Pages/Futures/IntradayDashboard/IntradayDashboardMobile.razor.rz.scp.css */
.settings-container[b-xyivwmtn38] {
    position: fixed;
    top: 50px;
    display: flex;
    flex-direction: column;
    z-index: 925;
    left: 0;
    border-left: 3px solid #000061;
}

.settings-btn[b-xyivwmtn38] {
    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-xyivwmtn38] {
    background-color: #DB303A;
}

.settings-btn:last-child[b-xyivwmtn38] {
    border-radius: 0 0px 15px 0;
}

.settings-btn:hover[b-xyivwmtn38] {
    background-color: white;
    color: #000061;
    border: 1px solid #000061;
}

.settings-btn.red-btn:hover[b-xyivwmtn38] {
    color: #DB303A;
    border: 1px solid #DB303A;
}

.settings-btn:hover[b-xyivwmtn38]  path, .settings-btn[b-xyivwmtn38]  svg:hover path, .settings-btn[b-xyivwmtn38]  path:hover {
    fill: #000061;
}

.settings-btn.red-btn:hover[b-xyivwmtn38]  path, .settings-btn.red-btn[b-xyivwmtn38]  svg:hover path, .settings-btn.red-btn[b-xyivwmtn38]  path:hover {
    fill: #DB303A;
}

.dashboard-container[b-xyivwmtn38] {
    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-xyivwmtn38] {
        /*min-height: 25em;*/
        /*border-radius: 1em;*/
        /*padding: 0.5em;*/
        /*max-height: 40em;*/
        margin-bottom: 0.5em;
    }

    .dashboard-container .dashboard-item.item-span-1[b-xyivwmtn38] {
        /*width: 22.25em;*/
        min-width: 22.25em;
    }

        .dashboard-container .dashboard-item.item-span-2[b-xyivwmtn38] {
            /*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-xyivwmtn38] {
    width: 0.5em;
    min-width: 0.5em;
}

@media (min-width: 2000px) {
    .intraday-dashboard[b-xyivwmtn38] {
        --ssy-grid-columns: 6;
    }
}

/* Large desktop */
@media (max-width: 1400px) {
    .intraday-dashboard[b-xyivwmtn38] {
        --ssy-grid-columns: 4;
    }
}

/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {
    .intraday-dashboard[b-xyivwmtn38] {
        --ssy-grid-columns: 2;
    }

    .grid-container[b-xyivwmtn38] {
        grid-template-columns: auto auto auto;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .intraday-dashboard[b-xyivwmtn38] {
        --ssy-grid-columns: 1;
    }

    .grid-container[b-xyivwmtn38] {
        grid-template-columns: auto auto;
    }

    .span-3[b-xyivwmtn38] {
        grid-column: span 2;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .intraday-dashboard[b-xyivwmtn38] {
        --ssy-grid-columns: 0;
    }

    .grid-container[b-xyivwmtn38] {
        grid-template-columns: auto;
    }

    .span-3[b-xyivwmtn38] {
        grid-column: span 1;
    }

    .span-2[b-xyivwmtn38] {
        grid-column: span 1;
    }
}
/* /Components/Pages/Futures/IntradayPrices/FfaLiveCurves.razor.rz.scp.css */
.itd-pge-noPaddingMargin[b-bqgwrrof67] {
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: visible !important;
}

.container-fluid .itd-pge-row[b-bqgwrrof67] {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.5em;
}

.itd-pge-box[b-bqgwrrof67] {
    min-width: 22em;
    white-space: nowrap !important;
}

@media screen and (max-width:600px) {
    .itd-pge-box[b-bqgwrrof67] {
        width: 92%;
    }


}

@media screen and (min-width:600px) {
    .itd-pge-box[b-bqgwrrof67] {
        width: 20em;
        padding: 0;
    }

    .container-fluid .itd-pge-row[b-bqgwrrof67] {
        margin-left: -13px;
    }

}

@media screen and (min-width:768px) {
    .itd-pge-box[b-bqgwrrof67] {
        width: 22em;
        white-space: nowrap !important;
        padding: unset;
        margin-right: 5px;
    }

    .container-fluid .itd-pge-row[b-bqgwrrof67] {
        flex-wrap: unset;
        margin-left: 0;
    }
}


.itd-pge-box.draggable[b-bqgwrrof67] {
    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-kvjozu9p0a] {
    border-color: #0087CB !important;
}

table.intraday tbody tr[b-kvjozu9p0a] {
    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-kvjozu9p0a] {
    text-align: left;
    padding-left: 5px;
}

table.intraday tbody tr td:nth-child(1)[b-kvjozu9p0a] {
    text-align: center;
}

table.intraday tbody tr th:nth-child(2)[b-kvjozu9p0a], td:nth-child(2)[b-kvjozu9p0a] {
    text-align: right;
}

table.intraday tbody tr th:nth-child(3)[b-kvjozu9p0a], td:nth-child(3)[b-kvjozu9p0a] {
    text-align: right;
}

table.intraday tbody tr th:nth-child(4)[b-kvjozu9p0a], td:nth-child(4)[b-kvjozu9p0a] {
    text-align: right;
}

table.intraday tbody tr th:nth-child(5)[b-kvjozu9p0a], td:nth-child(5)[b-kvjozu9p0a] {
    text-align: right;
}

.pulsecolour[b-kvjozu9p0a] {
    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-wdj992bq1r] {
    font-size: 20px;
    width: 30px;
}

.dateChanger-date[b-wdj992bq1r] {
    font-size: 16px;
    width: 160px;
    display: inline-block;
    text-align: center;
}

.date-select-simple-arrows.disable[b-wdj992bq1r] {
    color: lightgray;
}

    .date-select-simple-arrows.disable:hover[b-wdj992bq1r] {
        color: lightgray;
        cursor: default;
        font-weight: normal;
    }

.arrow[b-wdj992bq1r] {
    height: 20px;
}

    .arrow.switch-arrow[b-wdj992bq1r] {
        transform: rotate(180deg);
    }

.tooltip-box[b-wdj992bq1r] {
    position: fixed;
    padding: 10px;
    background-color: #000061;
    border-radius: 5px;
    color: #fff;
}


.filtertextbox[b-wdj992bq1r] {
    width: 300px;
    padding-right: 4px;
    margin-left: 5%;
    margin-top: 0%;
}


.ssythemefilter[b-wdj992bq1r] {
    background-color: white;
    border-color: #d2cdc3;
    color: black;
}

.pulsenewtrade[b-wdj992bq1r] {
    animation-name: pulseNewTradeSettings-b-wdj992bq1r;
    animation-duration: 700ms;
    animation-iteration-count: 40;
    animation-timing-function: linear;
    font-weight: bold;
    color: black;
    background-color: #D9EBF9 !important;
}

.tradetable-row[b-wdj992bq1r] {
    cursor: pointer;
    height: 1.5em;
}

.tradetable-div[b-wdj992bq1r] {
    font-family: Verdana;
    font-size: 0.9rem;
    flex-basis: content;
    flex-shrink: 1;
    width: 100%;
}

.tradetable[b-wdj992bq1r] {
    width: 650px;
}

.numcol[b-wdj992bq1r] {
    text-align: right;
}

.centercol[b-wdj992bq1r] {
    text-align: center;
}

.lightUnderscore[b-wdj992bq1r] {
    text-decoration: underline;
    -webkit-text-decoration-color: silver; /* safari still uses vendor prefix */
    text-decoration-color: silver;
}

.stattable-routename[b-wdj992bq1r] {
    border-top: solid 1px silver;
    border-bottom: solid 1px silver;
    background-color: none;
    font-weight: bold;
    color: #000061;
}

.stattable-detail[b-wdj992bq1r] {
    background-color: none;
}

    .stattable-detail:hover[b-wdj992bq1r] {
        background-color: lightgrey;
    }

.tradesummarylogo[b-wdj992bq1r] {
    background-image: url("/assets/lines/SSYShippingLines_01_stretchable.svg");
    background-size: 100% 200%;
    /*background-position-y: -10px;*/
}

@keyframes pulseNewTradeSettings-b-wdj992bq1r {
    0% {
        /*background-color: #f0e2b4 !important;*/
        color: black;
    }

    100% {
        /*background-color: #f5ef87 !important;*/
        color: red;
    }
}

@media screen and (max-width: 1400px) {
    .tradetable[b-wdj992bq1r] {
        width: 450px;
    }
}


@media screen and (max-width: 600px) {
    .hide-mobile[b-wdj992bq1r] {
        display: none;
    }

    .flex-mobile-wrap[b-wdj992bq1r] {
        flex-wrap: wrap;
    }

    .tradetable[b-wdj992bq1r] {
        width: 100%;
    }

    .tradetable-div[b-wdj992bq1r] {
        flex-basis: unset;
        flex-shrink: 1;
        width: 100%;
    }

    .date-select-simple .date-arrows[b-wdj992bq1r] {
        padding: 0 8px 0 8px;
    }
}
/* /Components/Pages/Futures/MarketPostSend/DerivativesMarketPostControls.razor.rz.scp.css */
/* MarketPost controls on the derivatives report pages. Modal chrome, buttons and form controls come from SsyPopup,
   ssyglobal.css and Bootstrap - these rules only cover layout and the state / result text. */

/* The send area: buttons on the left half, the "Emails sent" table (the page's own or the MarketPost one) and the
   Technology team's test log in the right half (.dmp-right). The gap stands in for the <br /> the pages put between
   their buttons, and also spaces whatever the page passes in, since a scoped rule here cannot select the page's own
   elements. */
.dmp-area[b-ag69i0itsd] {
	display: flex;
	align-items: flex-start;
}

/* The right half: the "Emails sent" table, and the Technology team's test log. The page's own table keeps its inline
   flex: 0 0 50% from when it sat in the row directly; inside this block it has no effect. */
.dmp-right[b-ag69i0itsd] {
	flex: 0 0 50%;
	min-width: 0;
}

.dmp-buttons[b-ag69i0itsd] {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-sizing: border-box;
	padding-right: 10px;
}

.dmp-btn[b-ag69i0itsd] {
	font-size: 14px;
}

.dmp-hint[b-ag69i0itsd] {
	margin-left: 6px;
	font-size: 11px;
	color: #6b6b6b;
}

.dmp-hint-block[b-ag69i0itsd] {
	display: block;
	margin: 4px 0 12px 0;
}

.dmp-intro[b-ag69i0itsd] {
	margin-bottom: 8px;
	font-size: 12px;
	color: #4a4a46;
}

.dmp-grid[b-ag69i0itsd] {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 8px 12px;
	align-items: center;
	margin-bottom: 14px;
}

.dmp-label[b-ag69i0itsd] {
	font-weight: 600;
}

.dmp-recipients[b-ag69i0itsd] {
	resize: vertical;
}

.dmp-version[b-ag69i0itsd] {
	display: inline-block;
	width: auto;
}

.dmp-last[b-ag69i0itsd] {
	padding: 8px 10px;
	border-radius: 5px;
	background: #f4f4f2;
	font-size: 12px;
}
.dmp-last ul[b-ag69i0itsd] {
	margin: 6px 0 0 0;
	padding-left: 18px;
}

.dmp-status[b-ag69i0itsd] {
	margin: 10px 0 0 0;
	font-size: 12px;
	color: #6b6b6b;
}
.dmp-status.is-error[b-ag69i0itsd] {
	color: #a4362f;
	font-weight: 600;
}
/* /Components/Pages/Futures/MarketPostSend/DerivativesMarketPostSentTable.razor.rz.scp.css */
/* The MarketPost "Emails sent" table and the Technology team's test-send log on the derivatives report pages. Laid out
   like the pages' own table, which it stands in for while MarketPost sending is on; the table itself is Bootstrap's.
   The controls put it in their right-hand column, which sets the width. */

.dmp-sent-panel[b-pit943iyt1] {
	height: 200px;
	overflow-y: scroll;
	box-sizing: border-box;
	padding-left: 10px;
}

/* The test log alone, under the page's own table (switch off): only as tall as it needs, up to the same 200px. */
.dmp-sent-panel-tests[b-pit943iyt1] {
	height: auto;
	max-height: 200px;
	overflow-y: auto;
	margin-top: 10px;
}

.dmp-sent-heading[b-pit943iyt1] {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: white;
}

.dmp-sent-refresh[b-pit943iyt1] {
	padding: 2px 6px;
	font-size: 12px;
}

.dmp-sent-table[b-pit943iyt1] {
	width: 100%;
}

/* A test send among real sends: set apart so it is never read as a send to clients. */
.dmp-sent-test td[b-pit943iyt1] {
	font-style: italic;
	color: #6b6b6b;
}

.dmp-sent-recipients[b-pit943iyt1] {
	display: block;
	font-size: 11px;
	overflow-wrap: anywhere;
}
/* /Components/Pages/Futures/Options/OptionVolatilities.razor.rz.scp.css */
.ov-header[b-svdux4ttoo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.ov-header-actions[b-svdux4ttoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ov-copy-btn[b-svdux4ttoo] {
    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-svdux4ttoo] {
    background: #f0f0f0;
}

.ov-setup-toggle[b-svdux4ttoo] {
    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-svdux4ttoo] {
    background: #E5F6FB;
}

.ov-setup-toggle.active[b-svdux4ttoo] {
    background: #009DC9;
    color: #FFFFFF;
}

.ov-controls[b-svdux4ttoo] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ov-control-box[b-svdux4ttoo] {
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    background: #fafafa;
}

.ov-date[b-svdux4ttoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ov-size[b-svdux4ttoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ov-periods-label[b-svdux4ttoo] {
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.ov-periods-list[b-svdux4ttoo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    max-width: 40rem;
    max-height: 6rem;
    overflow-y: auto;
}

.ov-period-item[b-svdux4ttoo] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.ov-saved-msg[b-svdux4ttoo] {
    margin-left: 0.75rem;
    color: #005DB9;
    font-size: 0.85rem;
}

.ov-chart-grid[b-svdux4ttoo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.ov-chart-card[b-svdux4ttoo] {
    min-height: 22rem;
    border: 1px solid #e0e0e0;
    padding: 0;
    margin: -1px 0 0 -1px;
}

.ov-chart-nodata[b-svdux4ttoo] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20rem;
    color: #777;
}

@media (max-width: 1100px) {
    .ov-chart-grid[b-svdux4ttoo] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Futures/Options/StrikeHeatmap.razor.rz.scp.css */
.sh-title[b-p010nzq1wb] {
	text-align: center;
}

.sh-no-data[b-p010nzq1wb] {
	text-align: center;
	padding: 3rem;
	font-size: 1.1rem;
	color: var(--ssy-colour-palette-slate-gray, #405864);
}

/* Controls row: date shifter / route picker / mode picker, distributed with space-around.
   No boxing - route and mode picker use the shared ssy-radio-main pill-strip styling. */
.sh-controls[b-p010nzq1wb] {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-bottom: 1rem;
}

.sh-routes[b-p010nzq1wb] {
	margin-bottom: 0;
}

.sh-mode-row[b-p010nzq1wb] {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sh-overlay-btn[b-p010nzq1wb] {
	width: 11rem;
	padding: 2px 10px;
}

.sh-line-row[b-p010nzq1wb] {
	display: flex;
	gap: 1rem;
	height: 24rem;
}

.sh-line-chart[b-p010nzq1wb] {
	flex: 1;
	min-width: 0;
}

.sh-month-list[b-p010nzq1wb] {
	width: 11rem;
	border: 1px solid #ccc;
	padding: 0.5rem;
	overflow-y: auto;
	background: #fafafa;
	font-size: 0.9rem;
}

.sh-month-list-title[b-p010nzq1wb] {
	font-weight: bold;
	margin-bottom: 0.25rem;
}

.sh-month-label[b-p010nzq1wb] {
	cursor: pointer;
}

.sh-stack[b-p010nzq1wb] {
	position: relative;
	height: 55rem;
	margin-bottom: 1rem;
}

.sh-base[b-p010nzq1wb],
.sh-overlay[b-p010nzq1wb],
.sh-glass[b-p010nzq1wb] {
	position: absolute;
	inset: 0;
}

/* Overlays must not steal clicks from the bottom heatmap (which carries the
   month-toggle handler).  pointer-events:none lets clicks pass straight through. */
.sh-overlay[b-p010nzq1wb],
.sh-glass[b-p010nzq1wb] {
	pointer-events: none;
}
/* /Components/Pages/Futures/Reports/TechnicalAnalysis/RptTechnicalAnalysis.razor.rz.scp.css */
/* SSY Weekly Technical Update. Every class is ta- prefixed (page CSS rule). Colours are the deck's:
   navy #000061, SSY blue #0087CB, analysis blue #0070C0, text #262626. */

.ta-page[b-xqb7mol9wo] {
    --ta-navy: #000061;
    --ta-blue: #0087CB;
    --ta-cyan: #00B4E6;
    --ta-text: #262626;
    --ta-muted: #6B7280;
    --ta-line: #E3E7EE;
    --ta-soft: #F5F7FB;
    --ta-green: #1F8A4C;
    --ta-red: #C62828;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 16px 32px 16px;
    color: var(--ta-text);
    font-family: 'Franklin Gothic Book', 'Libre Franklin', Arial, sans-serif;
}

/* ---- header ---- */
.ta-hero[b-xqb7mol9wo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 4px 0 10px 0;
    padding: 22px 28px;
    border-radius: 14px;
    color: #FFFFFF;
    background:
        radial-gradient(120% 140% at 0% 100%, rgba(0, 180, 230, 0.55) 0%, rgba(0, 180, 230, 0) 55%),
        linear-gradient(115deg, #000061 0%, #0A1F86 55%, #0B5FB8 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 97, 0.18);
}

.ta-kicker[b-xqb7mol9wo] {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.8;
}

.ta-title[b-xqb7mol9wo] {
    margin: 2px 0 10px 0;
    font-family: 'Times New Roman', Tinos, Georgia, serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.1;
    color: #FFFFFF;
}

.ta-hero-logo[b-xqb7mol9wo] {
    width: 96px;
    height: auto;
    flex: 0 0 auto;
    opacity: 0.95;
}

.ta-date-nav[b-xqb7mol9wo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ta-date-arrow[b-xqb7mol9wo] {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

    .ta-date-arrow:hover:not(:disabled)[b-xqb7mol9wo] {
        background: rgba(255, 255, 255, 0.22);
    }

    .ta-date-arrow:disabled[b-xqb7mol9wo] {
        opacity: 0.3;
        cursor: default;
    }

.ta-date-select[b-xqb7mol9wo] {
    min-width: 210px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    font-size: 15px;
}

    .ta-date-select option[b-xqb7mol9wo] {
        color: var(--ta-text);
    }

.ta-date-text[b-xqb7mol9wo] {
    font-size: 16px;
}

.ta-status[b-xqb7mol9wo] {
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ta-status-draft[b-xqb7mol9wo] {
    background: #FFE8A3;
    color: #6B4E00;
}

.ta-status-client[b-xqb7mol9wo] {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ta-navy);
}

.ta-btn-client[b-xqb7mol9wo] {
    margin-left: auto;
}

.ta-status-published[b-xqb7mol9wo] {
    background: #C9F2D9;
    color: #0E5A2F;
}

/* ---- disclaimer ---- */
.ta-disclaimer[b-xqb7mol9wo] {
    margin: 18px 0 0 0;
    border: 1px solid var(--ta-line);
    border-radius: 10px;
    background: var(--ta-soft);
    font-size: 12px;
    color: var(--ta-muted);
}

    .ta-disclaimer summary[b-xqb7mol9wo] {
        padding: 7px 14px;
        cursor: pointer;
        font-weight: 600;
        color: var(--ta-navy);
    }

.ta-disclaimer-body[b-xqb7mol9wo] {
    padding: 0 14px 10px 14px;
    line-height: 1.45;
}

    .ta-disclaimer-body p[b-xqb7mol9wo] {
        margin: 0 0 6px 0;
    }

/* ---- toolbar, panels, messages ---- */
.ta-toolbar[b-xqb7mol9wo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px 0;
}

.ta-editing-label[b-xqb7mol9wo] {
    margin-right: 6px;
    font-weight: 600;
    color: var(--ta-navy);
}

.ta-btn[b-xqb7mol9wo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #C8D2DA;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--ta-navy);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

    .ta-btn:hover:not(:disabled)[b-xqb7mol9wo] {
        border-color: var(--ta-blue);
        color: var(--ta-blue);
    }

    .ta-btn:disabled[b-xqb7mol9wo] {
        opacity: 0.5;
        cursor: default;
    }

.ta-btn-primary[b-xqb7mol9wo] {
    border-color: var(--ta-navy);
    background: var(--ta-navy);
    color: #FFFFFF;
}

    .ta-btn-primary:hover:not(:disabled)[b-xqb7mol9wo] {
        background: #1A2BA0;
        color: #FFFFFF;
    }

.ta-btn-publish[b-xqb7mol9wo] {
    border-color: var(--ta-green);
    background: var(--ta-green);
    color: #FFFFFF;
}

    .ta-btn-publish:hover:not(:disabled)[b-xqb7mol9wo] {
        background: #187040;
        border-color: #187040;
        color: #FFFFFF;
    }

.ta-btn-danger[b-xqb7mol9wo] {
    border-color: var(--ta-red);
    background: var(--ta-red);
    color: #FFFFFF;
}

.ta-btn-danger-outline[b-xqb7mol9wo] {
    border-color: #F0B5B5;
    color: var(--ta-red);
}

.ta-btn-link[b-xqb7mol9wo] {
    border-color: transparent;
    background: transparent;
}

.ta-btn-small[b-xqb7mol9wo] {
    height: 28px;
    padding: 0 10px;
    font-size: 12.5px;
}

.ta-btn-on[b-xqb7mol9wo] {
    border-color: var(--ta-blue);
    background: #E6F4FB;
}

.ta-confirm[b-xqb7mol9wo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ta-red);
    font-weight: 600;
}

.ta-pdf-ready[b-xqb7mol9wo] {
    display: inline-flex;
    gap: 8px;
}

.ta-panel[b-xqb7mol9wo] {
    margin: 0 0 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--ta-line);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 97, 0.06);
}

.ta-panel-inset[b-xqb7mol9wo] {
    background: var(--ta-soft);
    box-shadow: none;
}

.ta-panel-title[b-xqb7mol9wo] {
    margin: 0 0 10px 0;
    font-size: 17px;
    color: var(--ta-navy);
}

.ta-form-row[b-xqb7mol9wo] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.ta-field[b-xqb7mol9wo] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 180px;
    font-size: 12.5px;
    color: var(--ta-muted);
}

.ta-field-wide[b-xqb7mol9wo] {
    flex: 1 1 420px;
}

.ta-field-narrow[b-xqb7mol9wo] {
    min-width: 110px;
    max-width: 140px;
}

.ta-input[b-xqb7mol9wo] {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #C8D2DA;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--ta-text);
    font-size: 14px;
}

    .ta-input:focus[b-xqb7mol9wo] {
        outline: 2px solid rgba(0, 135, 203, 0.35);
        border-color: var(--ta-blue);
    }

.ta-form-actions[b-xqb7mol9wo] {
    display: flex;
    gap: 8px;
}

.ta-help[b-xqb7mol9wo] {
    margin: 4px 0 10px 0;
    font-size: 12.5px;
    color: var(--ta-muted);
}

.ta-message[b-xqb7mol9wo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px 0;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 14px;
}

.ta-message-info[b-xqb7mol9wo] {
    background: #E6F4FB;
    color: #064466;
}

.ta-message-error[b-xqb7mol9wo] {
    background: #FDECEC;
    color: #8A1C1C;
}

.ta-message-busy[b-xqb7mol9wo] {
    justify-content: flex-start;
    background: var(--ta-soft);
    color: var(--ta-navy);
}

.ta-message-close[b-xqb7mol9wo] {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.ta-empty[b-xqb7mol9wo] {
    padding: 48px 16px;
    border: 1px dashed #C8D2DA;
    border-radius: 12px;
    text-align: center;
    color: var(--ta-muted);
    font-size: 15px;
}

/* ---- tabs ---- */
.ta-tabs[b-xqb7mol9wo] {
    display: flex;
    gap: 6px;
    /* Sideways scroll only when there are more tabs than fit. overflow-x: auto makes the browser treat
       overflow-y as auto too, so it is pinned to hidden - otherwise any pixel of a tab below the strip
       shows a small vertical scroll bar. */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 0 2px;
    border-bottom: 2px solid var(--ta-line);
    scrollbar-width: thin;
}

.ta-tab[b-xqb7mol9wo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 0 0 auto;
    padding: 8px 16px 9px 16px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: transparent;
    color: var(--ta-muted);
    cursor: pointer;
    text-align: left;
}

    .ta-tab:hover:not(:disabled)[b-xqb7mol9wo] {
        background: var(--ta-soft);
        color: var(--ta-navy);
    }

.ta-tab-active[b-xqb7mol9wo] {
    position: relative;
    border-color: var(--ta-line);
    background: #FFFFFF;
    color: var(--ta-navy);
}

    .ta-tab-active[b-xqb7mol9wo]::after {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        height: 3px;
        border-radius: 3px;
        background: var(--ta-blue);
    }

.ta-tab-title[b-xqb7mol9wo] {
    font-size: 15px;
    font-weight: 600;
}

.ta-tab-sub[b-xqb7mol9wo] {
    font-size: 11.5px;
    letter-spacing: 0.03em;
}

.ta-tab-add[b-xqb7mol9wo] {
    justify-content: center;
    color: var(--ta-blue);
    font-weight: 600;
}

/* ---- slide ---- */
.ta-slide[b-xqb7mol9wo] {
    padding: 18px 20px 12px 20px;
    border: 1px solid var(--ta-line);
    border-top: none;
    border-radius: 0 0 14px 14px;
    background: #FFFFFF;
    box-shadow: 0 6px 16px rgba(0, 0, 97, 0.06);
}

.ta-slide-head[b-xqb7mol9wo] {
    margin-bottom: 12px;
}

.ta-slide-title[b-xqb7mol9wo] {
    margin: 0;
    font-family: 'Times New Roman', Tinos, Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--ta-navy);
}

.ta-headline[b-xqb7mol9wo] {
    margin: 4px 0 0 0;
    font-size: 17px;
    color: var(--ta-blue);
}

.ta-edit-head[b-xqb7mol9wo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.ta-input-title[b-xqb7mol9wo] {
    height: 42px;
    font-family: 'Times New Roman', Tinos, Georgia, serif;
    font-size: 26px;
    color: var(--ta-navy);
}

.ta-input-headline[b-xqb7mol9wo] {
    color: var(--ta-blue);
    font-size: 16px;
}

.ta-tab-tools[b-xqb7mol9wo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ta-slide-body[b-xqb7mol9wo] {
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(300px, 1fr);
    gap: 20px;
    align-items: stretch;
}

.ta-chart-card[b-xqb7mol9wo] {
    position: relative;
    height: 660px;
    min-width: 0;
    border: 1px solid var(--ta-line);
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}

.ta-chart-empty[b-xqb7mol9wo] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ta-muted);
}

.ta-commentary[b-xqb7mol9wo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-height: 660px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--ta-soft);
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.55;
}

/* The commentary is HTML from the Quill editor rendered as a MarkupString, which carries no scope
   attribute - hence ::deep. */
.ta-commentary-text[b-xqb7mol9wo]  p {
    margin: 0 0 10px 0;
}

.ta-commentary-text[b-xqb7mol9wo]  strong,
.ta-commentary-text[b-xqb7mol9wo]  b {
    color: #0070C0;
}

.ta-commentary-text[b-xqb7mol9wo]  ul,
.ta-commentary-text[b-xqb7mol9wo]  ol {
    margin: 0 0 10px 0;
    padding-left: 20px;
}

.ta-commentary-text[b-xqb7mol9wo]  .ql-align-center {
    text-align: center;
}

.ta-commentary-text[b-xqb7mol9wo]  .ql-align-right {
    text-align: right;
}

.ta-commentary-text[b-xqb7mol9wo]  .ql-align-justify {
    text-align: justify;
}

.ta-commentary-none[b-xqb7mol9wo] {
    color: var(--ta-muted);
    font-style: italic;
}

.ta-commentary-editor[b-xqb7mol9wo] {
    flex: 1 1 auto;
    min-height: 420px;
    background: #FFFFFF;
    border-radius: 8px;
}

.ta-slide-foot[b-xqb7mol9wo] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--ta-muted);
}

.ta-hint[b-xqb7mol9wo] {
    opacity: 0.9;
}

/* ---- contact and history ---- */
.ta-contact[b-xqb7mol9wo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 14px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--ta-soft);
    font-size: 14px;
}

    .ta-contact a[b-xqb7mol9wo] {
        color: var(--ta-blue);
    }

.ta-contact-head[b-xqb7mol9wo] {
    font-weight: 600;
    color: var(--ta-navy);
}

.ta-history[b-xqb7mol9wo] {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--ta-muted);
}

    .ta-history summary[b-xqb7mol9wo] {
        cursor: pointer;
        font-weight: 600;
    }

.ta-history-table[b-xqb7mol9wo] {
    width: 100%;
    margin-top: 6px;
    border-collapse: collapse;
}

    .ta-history-table th[b-xqb7mol9wo],
    .ta-history-table td[b-xqb7mol9wo] {
        padding: 4px 8px;
        border-bottom: 1px solid var(--ta-line);
        text-align: left;
        vertical-align: top;
    }

/* ---- smaller screens: chart above commentary ---- */
@media (max-width: 1100px) {
    .ta-slide-body[b-xqb7mol9wo] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ta-chart-card[b-xqb7mol9wo] {
        height: 560px;
    }

    .ta-commentary[b-xqb7mol9wo] {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .ta-page[b-xqb7mol9wo] {
        padding: 0 8px 24px 8px;
    }

    .ta-hero[b-xqb7mol9wo] {
        padding: 16px;
    }

    .ta-title[b-xqb7mol9wo] {
        font-size: 26px;
    }

    .ta-hero-logo[b-xqb7mol9wo] {
        width: 64px;
    }

    .ta-chart-card[b-xqb7mol9wo] {
        height: 460px;
    }

    .ta-slide[b-xqb7mol9wo] {
        padding: 12px;
    }

    .ta-slide-title[b-xqb7mol9wo] {
        font-size: 26px;
    }
}
/* /Components/Pages/Futures/Splash/Splash_010_Main.razor.rz.scp.css */
/* ============== HERO ============== */
.hero[b-fk7k0xcs37] {
    position: relative;
    min-height: 540px;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 16px;
}
.hero-bg[b-fk7k0xcs37] {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}
.hero-photo[b-fk7k0xcs37] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    animation: heroZoom-b-fk7k0xcs37 24s ease-in-out infinite;
}
@keyframes heroZoom-b-fk7k0xcs37 {
    0%, 100% { transform: scale(1.06) translate(0, 0); }
    50%      { transform: scale(1.12) translate(-1.5%, -1%); }
}
.hero-veil[b-fk7k0xcs37] {
    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-fk7k0xcs37] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-particle[b-fk7k0xcs37] {
    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-fk7k0xcs37 12s linear infinite;
}
@keyframes particleFloat-b-fk7k0xcs37 {
    0%   { transform: translateY(40px); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(-60vh); opacity: 0; }
}
.hero-particle.p-0[b-fk7k0xcs37]  { left: 5%;  bottom: 0; animation-delay: 0s;     animation-duration: 13s; }
.hero-particle.p-1[b-fk7k0xcs37]  { 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-fk7k0xcs37]  { left: 19%; bottom: 0; animation-delay: -5s;    animation-duration: 14s; }
.hero-particle.p-3[b-fk7k0xcs37]  { left: 26%; bottom: 0; animation-delay: -3s;    animation-duration: 12s; }
.hero-particle.p-4[b-fk7k0xcs37]  { left: 33%; bottom: 0; animation-delay: -7s;    animation-duration: 16s; }
.hero-particle.p-5[b-fk7k0xcs37]  { left: 40%; bottom: 0; animation-delay: -1s;    animation-duration: 15s; background: rgba(247,165,6,0.6); }
.hero-particle.p-6[b-fk7k0xcs37]  { left: 47%; bottom: 0; animation-delay: -4s;    animation-duration: 13s; }
.hero-particle.p-7[b-fk7k0xcs37]  { left: 54%; bottom: 0; animation-delay: -8s;    animation-duration: 11s; }
.hero-particle.p-8[b-fk7k0xcs37]  { left: 61%; bottom: 0; animation-delay: -2.5s;  animation-duration: 14s; }
.hero-particle.p-9[b-fk7k0xcs37]  { left: 68%; bottom: 0; animation-delay: -6s;    animation-duration: 12s; background: rgba(247,165,6,0.6); }
.hero-particle.p-10[b-fk7k0xcs37] { left: 74%; bottom: 0; animation-delay: -3.5s;  animation-duration: 15s; }
.hero-particle.p-11[b-fk7k0xcs37] { left: 81%; bottom: 0; animation-delay: -9s;    animation-duration: 13s; }
.hero-particle.p-12[b-fk7k0xcs37] { left: 88%; bottom: 0; animation-delay: -1.5s;  animation-duration: 11s; }
.hero-particle.p-13[b-fk7k0xcs37] { left: 94%; bottom: 0; animation-delay: -4.5s;  animation-duration: 16s; }
.hero-particle.p-14[b-fk7k0xcs37] { left: 8%;  bottom: 0; animation-delay: -10s;   animation-duration: 14s; }
.hero-particle.p-15[b-fk7k0xcs37] { left: 22%; bottom: 0; animation-delay: -7.5s;  animation-duration: 12s; background: rgba(247,165,6,0.6); }
.hero-particle.p-16[b-fk7k0xcs37] { left: 56%; bottom: 0; animation-delay: -11s;   animation-duration: 15s; }
.hero-particle.p-17[b-fk7k0xcs37] { left: 78%; bottom: 0; animation-delay: -2.8s;  animation-duration: 13s; }

.hero-grid[b-fk7k0xcs37] {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    padding: 64px 56px;
    align-items: center;
}
.hero-copy[b-fk7k0xcs37] { max-width: 640px; }
.hero-lede[b-fk7k0xcs37] {
    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-fk7k0xcs37] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-btn[b-fk7k0xcs37] {
    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-fk7k0xcs37] {
    background: linear-gradient(135deg, #009DC9, #003B89);
    color: #fff;
    box-shadow: 0 14px 32px rgba(0,157,201,0.38);
}
.hero-btn.primary:hover[b-fk7k0xcs37] {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,157,201,0.52);
}
.hero-btn.primary span[b-fk7k0xcs37] { transition: transform 0.3s; display: inline-block; }
.hero-btn.primary:hover span[b-fk7k0xcs37] { transform: translateX(4px); }

.hero-btn.ghost[b-fk7k0xcs37] {
    background: rgba(255,255,255,0.06);
    color: #e7ecff;
    border: 1px solid rgba(255,255,255,0.18);
}
.hero-btn.ghost:hover[b-fk7k0xcs37] {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.4);
}

.hero-cal[b-fk7k0xcs37] { justify-self: end; width: 100%; max-width: 480px; }

@media (max-width: 1100px) {
    .hero-grid[b-fk7k0xcs37] { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
    .hero-cal[b-fk7k0xcs37] { justify-self: stretch; max-width: none; }
}

/* ============== CURVES GRID ============== */
.curves-grid[b-fk7k0xcs37] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}

/* ============== JUMP CARDS ============== */
.jump-grid[b-fk7k0xcs37] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.jump[b-fk7k0xcs37] {
    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-fk7k0xcs37]::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-fk7k0xcs37] {
    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-fk7k0xcs37]::before { opacity: 1; }
.jump-num[b-fk7k0xcs37] {
    font-size: 11px;
    letter-spacing: 0.3em;
    color: #009DC9;
    font-variant-numeric: tabular-nums;
}
.jump-title[b-fk7k0xcs37] {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.01em;
}
.jump-blurb[b-fk7k0xcs37] {
    font-size: 13px;
    color: rgba(231,236,255,0.7);
    line-height: 1.5;
    margin-top: 4px;
}
.jump-arrow[b-fk7k0xcs37] {
    margin-top: 12px;
    font-size: 18px;
    color: #F7A506;
    transition: transform 0.3s;
}
.jump:hover .jump-arrow[b-fk7k0xcs37] { transform: translateX(6px); }
/* /Components/Pages/Futures/Splash/Splash_100_Markets.razor.rz.scp.css */
.md-lede[b-8l3i81l32m] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 640px;
}

.md-grid[b-8l3i81l32m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

.md-card[b-8l3i81l32m] {
    --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-8l3i81l32m]::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-8l3i81l32m] {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    color: #fff;
}
.md-card:hover[b-8l3i81l32m]::before { opacity: 0.85; }

.md-card-strip[b-8l3i81l32m] {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent 70%);
}

.md-card-eyebrow[b-8l3i81l32m] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}
.md-card-title[b-8l3i81l32m] {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.01em;
}
.md-card-sub[b-8l3i81l32m] {
    font-size: 12px;
    color: rgba(231,236,255,0.55);
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.md-card-spot[b-8l3i81l32m] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.md-card-spot-num[b-8l3i81l32m] {
    font-size: 38px;
    font-weight: 200;
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.md-card-tenors[b-8l3i81l32m] {
    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-8l3i81l32m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    padding: 4px;
    border-radius: 6px;
}
.md-tenor-period[b-8l3i81l32m] {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(231,236,255,0.45);
}
.md-tenor-mid[b-8l3i81l32m] {
    font-size: 13px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.md-card-go[b-8l3i81l32m] {
    margin-top: auto;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--accent);
    transition: transform 0.3s;
}
.md-card:hover .md-card-go[b-8l3i81l32m] { transform: translateX(4px); }
/* /Components/Pages/Futures/Splash/Splash_200_Charts.razor.rz.scp.css */
.cv-lede[b-3b8ej0ov7v] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 640px;
}
.cv-jump-grid[b-3b8ej0ov7v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}
.cv-jump[b-3b8ej0ov7v] {
    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-3b8ej0ov7v]::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-3b8ej0ov7v] {
    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-3b8ej0ov7v]::after { opacity: 1; }
.cv-jump-num[b-3b8ej0ov7v] {
    font-size: 11px;
    letter-spacing: 0.3em;
    color: #009DC9;
    font-variant-numeric: tabular-nums;
}
.cv-jump-title[b-3b8ej0ov7v] {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.cv-jump-blurb[b-3b8ej0ov7v] {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(231,236,255,0.7);
}
.cv-jump-go[b-3b8ej0ov7v] {
    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-c4n6p25566] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 640px;
}
.ix-charts[b-c4n6p25566] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
}
.ix-chart[b-c4n6p25566] {
    padding: 22px 24px 18px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
}
.ix-chart-head[b-c4n6p25566] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.ix-chart-eyebrow[b-c4n6p25566] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(231,236,255,0.45);
}
.ix-chart-title[b-c4n6p25566] {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.ix-chart-body[b-c4n6p25566] {
    flex: 1;
    min-height: 320px;
}
.ix-chart-placeholder[b-c4n6p25566] {
    width: 100%;
    height: 320px;
}
/* /Components/Pages/Futures/Splash/Splash_220_Differentials.razor.rz.scp.css */
.df-lede[b-2wo4uojjve] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 640px;
}
.df-chart[b-2wo4uojjve] { padding: 24px 26px 22px; }
.df-chart-head[b-2wo4uojjve] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.df-chart-eyebrow[b-2wo4uojjve] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(231,236,255,0.45);
}
.df-chart-title[b-2wo4uojjve] {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
}
.df-chart-body[b-2wo4uojjve] { min-height: 460px; }
/* /Components/Pages/Futures/Splash/Splash_230_Movement.razor.rz.scp.css */
.mv-lede[b-ysnk0arnuy] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 740px;
}

/* ============== ROUTE PICKER ============== */
.mv-vessels[b-ysnk0arnuy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.mv-vessel[b-ysnk0arnuy] {
    --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-ysnk0arnuy] {
    transform: translateY(-2px);
    border-color: var(--accent);
    color: #fff;
}
.mv-vessel.active[b-ysnk0arnuy] {
    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-ysnk0arnuy] {
    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-ysnk0arnuy] {
    animation: vesselDotPulse-b-ysnk0arnuy 1.6s ease-in-out infinite;
}
@keyframes vesselDotPulse-b-ysnk0arnuy {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.6; }
}
.mv-vessel-name[b-ysnk0arnuy] {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: inherit;
}
.mv-vessel-route[b-ysnk0arnuy] {
    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-ysnk0arnuy] {
    padding: 24px 28px 20px;
}
.mv-chart-head[b-ysnk0arnuy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.mv-chart-eyebrow[b-ysnk0arnuy] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(231,236,255,0.45);
    margin-bottom: 4px;
}
.mv-chart-title[b-ysnk0arnuy] {
    font-size: 22px;
    color: #fff;
    font-weight: 400;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.mv-key[b-ysnk0arnuy] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.mv-key-item[b-ysnk0arnuy] {
    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-ysnk0arnuy], .mv-key-up[b-ysnk0arnuy], .mv-key-down[b-ysnk0arnuy] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}
.mv-key-mid[b-ysnk0arnuy] { background: rgba(0,157,201,0.85); }
.mv-key-up[b-ysnk0arnuy] {
    background: rgba(77,220,165,0.95);
    border: 1px solid rgba(77,220,165,1);
}
.mv-key-down[b-ysnk0arnuy] {
    background: rgba(255,107,138,0.4);
    border: 1px solid rgba(255,107,138,1);
}

.mv-chart-body[b-ysnk0arnuy] {
    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-ysnk0arnuy] {
    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-ysnk0arnuy] {
        opacity: 1;
        transform: translateY(0) scale(1);
        font-size: 4rem;
        position: absolute;
        margin-top: -3rem;
    }

/* ============== TIMELINE ============== */
.mv-timeline[b-ysnk0arnuy] {
    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-ysnk0arnuy] {
    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-ysnk0arnuy] {
    transform: scale(1.06);
    border-color: #009DC9;
    box-shadow: 0 8px 24px rgba(0,157,201,0.5);
}
.mv-play:disabled[b-ysnk0arnuy] {
    opacity: 0.4;
    cursor: not-allowed;
}
.mv-play.playing[b-ysnk0arnuy] {
    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-ysnk0arnuy 1.8s ease-in-out infinite;
}
@keyframes playingPulse-b-ysnk0arnuy {
    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-ysnk0arnuy] {
    position: relative;
    padding: 0 4px;
}
.mv-track[b-ysnk0arnuy] {
    -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-ysnk0arnuy] { opacity: 0.4; cursor: not-allowed; }

.mv-track[b-ysnk0arnuy]::-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-ysnk0arnuy]::-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-ysnk0arnuy]::-moz-range-thumb {
    width: 22px; height: 22px;
    background: #fff;
    border: 3px solid #009DC9;
    border-radius: 50%;
    cursor: pointer;
}

.mv-track-labels[b-ysnk0arnuy] {
    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-ysnk0arnuy] {
    position: absolute;
    top: -2px;
    left: 4px; right: 4px;
    height: 10px;
    pointer-events: none;
}
.mv-tick[b-ysnk0arnuy] {
    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-ysnk0arnuy] {
    background: #F7A506;
    height: 14px;
    box-shadow: 0 0 8px #F7A506;
}

.mv-counter[b-ysnk0arnuy] {
    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-ysnk0arnuy] {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}
.mv-counter-of[b-ysnk0arnuy] {
    color: rgba(231,236,255,0.45);
    margin-left: 4px;
}

@media (max-width: 760px) {
    .mv-timeline[b-ysnk0arnuy] {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }
    .mv-counter[b-ysnk0arnuy] { text-align: center; }
    .mv-play[b-ysnk0arnuy] { justify-self: center; }
}
/* /Components/Pages/Futures/Splash/Splash_300_Commentary.razor.rz.scp.css */
.cm-lede[b-ihyx0q9f98] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 720px;
}
.cm-deep[b-ihyx0q9f98] {
    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-ihyx0q9f98] { color: #fff; border-color: #fff; }

.cm-grid[b-ihyx0q9f98] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}
.cm-card[b-ihyx0q9f98] {
    --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-ihyx0q9f98] {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.cm-card-strip[b-ihyx0q9f98] {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
}
.cm-card-eyebrow[b-ihyx0q9f98] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}
.cm-card-title[b-ihyx0q9f98] {
    font-size: 22px;
    color: #fff;
    font-weight: 500;
    margin: 0 0 14px;
    letter-spacing: 0.01em;
}
.cm-card-body[b-ihyx0q9f98] {
    color: rgba(231,236,255,0.85);
    line-height: 1.65;
    font-size: 14px;
}
[b-ihyx0q9f98] .cm-card-body p { margin: 0 0 10px; }
[b-ihyx0q9f98] .cm-card-body strong { color: #fff; font-weight: 500; }
[b-ihyx0q9f98] .cm-card-body a { color: #009DC9; text-decoration: none; }
[b-ihyx0q9f98] .cm-card-body a:hover { text-decoration: underline; }
.cm-empty[b-ihyx0q9f98] {
    color: rgba(231,236,255,0.4);
    font-style: italic;
}
/* /Components/Pages/Futures/Splash/Splash_310_Fundamentals.razor.rz.scp.css */
.fd-lede[b-uwoa5ksvyc] {
    font-size: 16px;
    color: rgba(231,236,255,0.7);
    margin: 16px 0 0;
    max-width: 720px;
}
.fd-card[b-uwoa5ksvyc] { padding: 32px 36px; max-width: 920px; }
.fd-card-eyebrow[b-uwoa5ksvyc] {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #009DC9;
    margin-bottom: 8px;
}
.fd-card-title[b-uwoa5ksvyc] {
    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-uwoa5ksvyc] {
    color: rgba(231,236,255,0.88);
    font-size: 15px;
    line-height: 1.75;
    font-weight: 300;
}
[b-uwoa5ksvyc] .fd-card-body p { margin: 0 0 14px; }
[b-uwoa5ksvyc] .fd-card-body strong { color: #fff; font-weight: 500; }
[b-uwoa5ksvyc] .fd-card-body a { color: #009DC9; text-decoration: none; }
[b-uwoa5ksvyc] .fd-card-body a:hover { text-decoration: underline; }
.fd-empty[b-uwoa5ksvyc] {
    color: rgba(231,236,255,0.4);
    font-style: italic;
}
/* /Components/Pages/Futures/Splash/_Shared/SplashCalendar.razor.rz.scp.css */
.cal-wrap[b-ux96utpb4k] {
    position: relative;
    width: 100%;
    max-width: 540px;
}

/* ----- HERO ----- */
.cal-hero[b-ux96utpb4k] {
    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-ux96utpb4k] {
    transform: translateY(-3px);
    box-shadow: 0 24px 60px rgba(0,157,201,0.28);
}
.cal-hero-eyebrow[b-ux96utpb4k] {
    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-ux96utpb4k] {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ddca5;
    box-shadow: 0 0 10px #4ddca5;
    animation: heroPulse-b-ux96utpb4k 1.4s ease-in-out infinite;
}
@keyframes heroPulse-b-ux96utpb4k {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

.cal-hero-display[b-ux96utpb4k] {
    display: flex;
    align-items: flex-end;
    gap: 22px;
}
.cal-hero-day[b-ux96utpb4k] {
    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-ux96utpb4k] { padding-bottom: 10px; }
.cal-hero-month[b-ux96utpb4k] {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.02em;
}
.cal-hero-year[b-ux96utpb4k] {
    font-size: 14px;
    color: rgba(231,236,255,0.65);
    letter-spacing: 0.16em;
    margin-top: 2px;
}
.cal-hero-dow[b-ux96utpb4k] {
    font-size: 11px;
    color: #F7A506;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 8px;
    font-weight: 500;
}

.cal-hero-foot[b-ux96utpb4k] {
    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-ux96utpb4k] {
    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-ux96utpb4k] {
    background: rgba(0,157,201,0.25);
    border-color: #009DC9;
    transform: scale(1.05);
}
.cal-step:disabled[b-ux96utpb4k] {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}
.cal-hint[b-ux96utpb4k] {
    font-size: 11px;
    color: rgba(231,236,255,0.5);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cal-glow[b-ux96utpb4k] {
    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-ux96utpb4k 8s ease-in-out infinite;
}
@keyframes glowFloat-b-ux96utpb4k {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-30px, 20px); }
}

/* ----- PANEL (calendar grid drawer) ----- */
.cal-panel[b-ux96utpb4k] {
    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-ux96utpb4k] {
    max-height: 540px;
    opacity: 1;
    pointer-events: auto;
}
.cal-panel-inner[b-ux96utpb4k] {
    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-ux96utpb4k] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.cal-chip[b-ux96utpb4k] {
    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-ux96utpb4k] {
    background: rgba(0,157,201,0.18);
    border-color: rgba(0,157,201,0.5);
    color: #fff;
    transform: translateY(-1px);
}
.cal-chip.active[b-ux96utpb4k] {
    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-ux96utpb4k] {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.cal-month-bar[b-ux96utpb4k] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: 12px;
}
.cal-mbtn[b-ux96utpb4k] {
    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-ux96utpb4k] { background: rgba(0,157,201,0.15); }
.cal-month-name[b-ux96utpb4k] {
    text-align: center;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.12em;
    font-weight: 500;
}

.cal-grid[b-ux96utpb4k] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-dow[b-ux96utpb4k] {
    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-ux96utpb4k] {
    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-ux96utpb4k] {
    background: transparent;
    cursor: default;
    pointer-events: none;
}
.cal-cell:not(.empty):hover[b-ux96utpb4k] {
    background: rgba(0,157,201,0.18);
    border-color: rgba(0,157,201,0.5);
    transform: scale(1.05);
}
.cal-cell.weekend[b-ux96utpb4k] {
    color: rgba(231,236,255,0.25);
    background: rgba(255,255,255,0.015);
}
.cal-cell.today[b-ux96utpb4k]::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    background: #F7A506;
    border-radius: 50%;
}
.cal-cell.selected[b-ux96utpb4k] {
    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-ux96utpb4k] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 540px) {
    .cal-hero-day[b-ux96utpb4k] { font-size: 64px; }
    .cal-hero-month[b-ux96utpb4k] { font-size: 18px; }
    .cal-hero[b-ux96utpb4k] { 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-lc48uvl91d] {
    --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-lc48uvl91d] .splash-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
[b-lc48uvl91d] .splash-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.55;
    mix-blend-mode: screen;
    animation: splashDrift-b-lc48uvl91d 28s ease-in-out infinite;
}
[b-lc48uvl91d] .splash-bg-blob-a {
    width: 620px; height: 620px;
    left: -10%; top: -15%;
    background: radial-gradient(circle, #009DC9 0%, transparent 70%);
}
[b-lc48uvl91d] .splash-bg-blob-b {
    width: 720px; height: 720px;
    right: -15%; top: 10%;
    background: radial-gradient(circle, #000061 0%, transparent 70%);
    animation-delay: -9s;
}
[b-lc48uvl91d] .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-lc48uvl91d {
    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-lc48uvl91d] .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-lc48uvl91d] .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-lc48uvl91d] .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-lc48uvl91d] .splash-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
[b-lc48uvl91d] .splash-brand-mark {
    width: 28px;
    height: 28px;
    position: relative;
}
[b-lc48uvl91d] .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-lc48uvl91d 2.4s ease-in-out infinite;
}
[b-lc48uvl91d] .splash-brand-mark-dot:nth-child(1) { left: 0; top: 0; }
[b-lc48uvl91d] .splash-brand-mark-dot:nth-child(2) { right: 0; top: 4px; background: var(--ssy-amber); box-shadow: 0 0 12px var(--ssy-amber); }
[b-lc48uvl91d] .splash-brand-mark-dot:nth-child(3) { left: 6px; bottom: 0; background: #fff; box-shadow: 0 0 10px #fff; }
[b-lc48uvl91d] .splash-brand-mark-dot.delay-1 { animation-delay: -0.8s; }
[b-lc48uvl91d] .splash-brand-mark-dot.delay-2 { animation-delay: -1.6s; }
@keyframes brandPulse-b-lc48uvl91d {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.7; }
}
[b-lc48uvl91d] .splash-brand-line-1 {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--splash-text);
    font-weight: 600;
}
[b-lc48uvl91d] .splash-brand-line-2 {
    font-size: 11px;
    color: var(--splash-text-dim);
    letter-spacing: 0.1em;
}

[b-lc48uvl91d] .splash-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
[b-lc48uvl91d] .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-lc48uvl91d] .splash-tab:hover {
    color: var(--splash-text);
    background: var(--splash-glass);
    transform: translateY(-1px);
}
[b-lc48uvl91d] .splash-tab.active {
    color: var(--splash-text);
    background: var(--splash-glass-2);
}
[b-lc48uvl91d] .splash-tab-num {
    font-size: 10px;
    color: var(--splash-text-faint);
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
}
[b-lc48uvl91d] .splash-tab.active .splash-tab-num { color: var(--ssy-cyan); }
[b-lc48uvl91d] .splash-tab-label { font-weight: 500; }
[b-lc48uvl91d] .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-lc48uvl91d 0.5s ease both;
}
@keyframes underlineSlide-b-lc48uvl91d {
    from { transform: scaleX(0.2); opacity: 0; }
    to   { transform: scaleX(1);   opacity: 1; }
}

[b-lc48uvl91d] .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-lc48uvl91d] .splash-date-pill:hover {
    border-color: var(--ssy-cyan);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,157,201,0.18);
}
[b-lc48uvl91d] .splash-date-pill-dow {
    font-size: 10px;
    color: var(--splash-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
[b-lc48uvl91d] .splash-date-pill-dm {
    font-size: 14px;
    font-weight: 600;
    color: var(--splash-text);
}
[b-lc48uvl91d] .splash-date-pill-y {
    font-size: 11px;
    color: var(--splash-text-dim);
}
[b-lc48uvl91d] .splash-date-pill-icon {
    color: var(--ssy-cyan);
    display: flex;
    align-items: center;
}

[b-lc48uvl91d] .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-lc48uvl91d] .splash-crumb {
    color: var(--splash-text-dim);
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.05em;
}
[b-lc48uvl91d] .splash-crumb:hover { color: var(--ssy-cyan); }
[b-lc48uvl91d] .splash-crumb.current {
    color: var(--splash-text);
    font-weight: 500;
}
[b-lc48uvl91d] .splash-crumb-sep { color: var(--splash-text-faint); }

/* ---------- main content area ---------- */
[b-lc48uvl91d] .splash-main {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px 28px 80px;
}

/* ---------- footer ---------- */
[b-lc48uvl91d] .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-lc48uvl91d] .splash-footer-thin {
    color: var(--splash-text-faint);
    margin-top: 4px;
    font-style: italic;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    [b-lc48uvl91d] .splash-topbar-inner {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }
    [b-lc48uvl91d] .splash-tabs { flex-wrap: wrap; }
    [b-lc48uvl91d] .splash-brand { justify-content: center; }
    [b-lc48uvl91d] .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-lc48uvl91d] .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-lc48uvl91d] .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-lc48uvl91d] .splash-card:hover {
    transform: translateY(-4px);
    border-color: var(--splash-stroke-2);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

[b-lc48uvl91d] .splash-card-glow:hover {
    border-color: rgba(0,157,201,0.5);
    box-shadow: 0 18px 60px rgba(0,157,201,0.2);
}

[b-lc48uvl91d] .splash-h1 {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.1;
}
[b-lc48uvl91d] .splash-h1 b { font-weight: 600; color: var(--ssy-cyan); }

[b-lc48uvl91d] .splash-h2 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--splash-text);
    margin: 0 0 4px;
}

[b-lc48uvl91d] .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-lc48uvl91d] .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-lc48uvl91d] .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-lc48uvl91d 1.6s ease-in-out infinite;
}
@keyframes eyebrowPulse-b-lc48uvl91d {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.4); }
}

/* arrows / dod indicators */
[b-lc48uvl91d] .splash-dod {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
[b-lc48uvl91d] .splash-dod.up   { color: var(--splash-up); }
[b-lc48uvl91d] .splash-dod.down { color: var(--splash-down); }
[b-lc48uvl91d] .splash-dod.flat { color: var(--splash-flat); }
[b-lc48uvl91d] .splash-dod-arrow { font-size: 10px; }

/* generic reveal-on-mount */
[b-lc48uvl91d] .splash-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: splashReveal-b-lc48uvl91d 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}
[b-lc48uvl91d] .splash-reveal.delay-1 { animation-delay: 0.05s; }
[b-lc48uvl91d] .splash-reveal.delay-2 { animation-delay: 0.1s; }
[b-lc48uvl91d] .splash-reveal.delay-3 { animation-delay: 0.15s; }
[b-lc48uvl91d] .splash-reveal.delay-4 { animation-delay: 0.2s; }
[b-lc48uvl91d] .splash-reveal.delay-5 { animation-delay: 0.25s; }
[b-lc48uvl91d] .splash-reveal.delay-6 { animation-delay: 0.3s; }
@keyframes splashReveal-b-lc48uvl91d {
    to { opacity: 1; transform: translateY(0); }
}

/* loader skeleton bar */
[b-lc48uvl91d] .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-lc48uvl91d 1.6s linear infinite;
    border-radius: 4px;
    color: transparent !important;
}
@keyframes splashShimmer-b-lc48uvl91d {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* section heading helper */
[b-lc48uvl91d] .splash-section {
    margin-top: 48px;
}
[b-lc48uvl91d] .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-w2znaxaam1] {
    background-color: #0D0D1A;
    color: #e0e0e0;
    font-family: Verdana, sans-serif;
    padding: 8px 8px 16px;
}

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-header[b-w2znaxaam1] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-title[b-w2znaxaam1] {
        color: #6ab0e0;
        font-size: 1.4rem;
        font-weight: bold;
        margin: 0;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-actions[b-w2znaxaam1] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-viewbtn[b-w2znaxaam1] {
        font-size: 0.8rem;
        padding: 3px 10px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datebar[b-w2znaxaam1] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 0;
        margin-bottom: 8px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datenav[b-w2znaxaam1] {
        color: #6ab0e0;
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0 4px;
        user-select: none;
    }

        .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datenav:hover[b-w2znaxaam1] {
            color: #ffffff;
        }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datetext[b-w2znaxaam1] {
        color: #e0e0e0;
        font-size: 1rem;
        font-weight: bold;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-orderbookpanel[b-w2znaxaam1] {
        min-height: 5rem;
        padding: 10px 8px;
        background-color: #1a1a2e;
        border: 1px solid #8888aa;
        border-radius: 10px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-tabrow[b-w2znaxaam1] {
        display: grid;
        gap: 0;
        row-gap: 4px;
        grid-template-columns: repeat(6, 10rem);
        margin-bottom: 6px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-bookrow[b-w2znaxaam1] {
        display: flex;
        gap: 10px;
        overflow: visible;
        font-size: 0.9rem;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-nodata[b-w2znaxaam1] {
        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-w2znaxaam1] {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: none;
        gap: 4px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-bookrow[b-w2znaxaam1] {
        flex-direction: column;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-actions[b-w2znaxaam1] {
        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-3wqzj7mbzy] {
    background-color: #0D0D1A;
    color: #e0e0e0;
    font-family: Verdana, sans-serif;
    padding: 8px 8px 16px;
}

    .tradetrackertrades-pagelayout .tradetrackertrades-header[b-3wqzj7mbzy] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-title[b-3wqzj7mbzy] {
        color: #6ab0e0;
        font-size: 1.4rem;
        font-weight: bold;
        margin: 0;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-actions[b-3wqzj7mbzy] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-viewbtn[b-3wqzj7mbzy] {
        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-3wqzj7mbzy] {
        display: flex;
        margin-top: 4px;
        font-size: 0.8rem;
        overflow: hidden;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalslabel[b-3wqzj7mbzy] {
        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-3wqzj7mbzy] {
        display: flex;
        flex-direction: column;
        border-right: 1px solid #2a2a45;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalscolname[b-3wqzj7mbzy] {
        background-color: #1d263b;
        color: #6ab0e0;
        text-align: right;
        padding: 2px 8px 0 8px;
        font-size: 0.75rem;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalscolval[b-3wqzj7mbzy] {
        background-color: #1a1a2e;
        color: white;
        text-align: right;
        padding: 0 8px 2px 8px;
        font-weight: bold;
    }

    /* Date + filter row. */
    .tradetrackertrades-pagelayout .tradetrackertrades-datebar[b-3wqzj7mbzy] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        margin-top: 8px;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-datenav[b-3wqzj7mbzy] {
        color: #6ab0e0;
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0 4px;
        user-select: none;
    }

        .tradetrackertrades-pagelayout .tradetrackertrades-datenav:hover[b-3wqzj7mbzy] {
            color: #ffffff;
        }

    .tradetrackertrades-pagelayout .tradetrackertrades-datetext[b-3wqzj7mbzy] {
        color: #e0e0e0;
        font-size: 1rem;
        font-weight: bold;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-filterinput[b-3wqzj7mbzy] {
        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-3wqzj7mbzy]::placeholder {
            color: #555577;
        }

        .tradetrackertrades-pagelayout .tradetrackertrades-filterinput:focus[b-3wqzj7mbzy] {
            outline: none;
            border-color: #6ab0e0;
        }

    .tradetrackertrades-pagelayout .tradetrackertrades-hint[b-3wqzj7mbzy] {
        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-3wqzj7mbzy] {
        width: 100%;
        max-width: 60rem;
        min-width: 0;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-summarywrap[b-3wqzj7mbzy] {
        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-3wqzj7mbzy] {
        flex-wrap: wrap;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-datebar[b-3wqzj7mbzy] {
        flex-wrap: wrap;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-filterinput[b-3wqzj7mbzy] {
        max-width: 100%;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-actions[b-3wqzj7mbzy] {
        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-k5hxns7e6y] {
    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-k5hxns7e6y] {
    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-k5hxns7e6y] {
        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-k5hxns7e6y] {
        transform: scale(0.97);
    }

.tt-inline-panel[b-k5hxns7e6y] {
    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-k5hxns7e6y] {
        width: 48.5rem;
    }

    .tt-inline-panel.tt-inline-panel--summary[b-k5hxns7e6y] {
        width: 31rem;
    }

    /* Fixed title bar so you can tell open / closed / cancelled etc. apart. */
    .tt-inline-panel .tt-inline-title[b-k5hxns7e6y] {
        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-k5hxns7e6y] {
        position: absolute;
        top: 1.5rem;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px;
    }

.date-select-simple-arrows[b-k5hxns7e6y] {
    font-size: 20px;
    width: 30px;
}

.dateChanger-date[b-k5hxns7e6y] {
    font-size: 16px;
    width: 160px;
    display: inline-block;
    text-align: center;
}

.date-select-simple-arrows.disable[b-k5hxns7e6y] {
    color: lightgray;
}

    .date-select-simple-arrows.disable:hover[b-k5hxns7e6y] {
        color: lightgray;
        cursor: default;
        font-weight: normal;
    }

.arrow[b-k5hxns7e6y] {
    height: 20px;
}

    .arrow.switch-arrow[b-k5hxns7e6y] {
        transform: rotate(180deg);
    }

.tooltip-box[b-k5hxns7e6y] {
    position: fixed;
    padding: 10px;
    background-color: #2a2a45;
    border: 1px solid #3a3a5c;
    border-radius: 5px;
    color: #e0e0e0;
}


.filtertextbox[b-k5hxns7e6y] {
    width: 300px;
    padding-right: 4px;
    margin-left: 5%;
    margin-top: 0%;
}


.ssythemefilter[b-k5hxns7e6y] {
    background-color: #1d263b;
    border-color: #3a3a5c;
    color: #e0e0e0;
}


.tt-tradetable-row[b-k5hxns7e6y] {
    cursor: pointer;
    height: 1.5rem;
}

.tt-tradetable-div[b-k5hxns7e6y] {
    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-k5hxns7e6y] {
    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-k5hxns7e6y] {
        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-k5hxns7e6y] {
        width: 14px;
        background-color: #1d263b;
    }

/* Split-screen button — sits inline with the Premium / Clearer controls. */
.tt-split-screen-btn[b-k5hxns7e6y] {
    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-k5hxns7e6y] {
        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-k5hxns7e6y] {
    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-k5hxns7e6y] {
    background-color: #1a1a2e;
}

    .tt-filter-row th[b-k5hxns7e6y] {
        padding: 2px 4px;
    }



.tt-page-right-tab[b-k5hxns7e6y] {
    overflow: visible;
    width: calc(100vw - 685px);
}

.numcol[b-k5hxns7e6y] {
    text-align: right;
}

.centercol[b-k5hxns7e6y] {
    text-align: center;
}

.lightUnderscore[b-k5hxns7e6y] {
    text-decoration: underline;
    -webkit-text-decoration-color: silver; /* safari still uses vendor prefix */
    text-decoration-color: silver;
}

.stattable-routename[b-k5hxns7e6y] {
    border-top: solid 1px #2a2a45;
    border-bottom: solid 1px #2a2a45;
    background-color: #14142d;
    font-weight: bold;
    color: #6ab0e0;
}

.stattable-detail[b-k5hxns7e6y] {
    background-color: transparent;
}

    .stattable-detail:hover[b-k5hxns7e6y] {
        background-color: #2a2a45;
    }

.tradesummarylogo[b-k5hxns7e6y] {
    background-image: url("/assets/lines/SSYShippingLines_01_stretchable.svg");
    background-size: 100% 200%;
    /*background-position-y: -10px;*/
}



.pulsenewtrade[b-k5hxns7e6y] {
    animation-name: pulseNewTradeSettings-b-k5hxns7e6y;
    animation-duration: 700ms;
    animation-iteration-count: 40;
    animation-timing-function: linear;
    color: #FFE68C;
    /*color: #FFE892;*/
    text-shadow: 0 0 15px #ffb300;
}

@keyframes pulseNewTradeSettings-b-k5hxns7e6y {

    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-k5hxns7e6y] {
        width: 100%;
    }

    .tt-page-right-tab[b-k5hxns7e6y] {
        width: calc(100vw - 485px);
    }
}


@media screen and (max-width: 600px) {
    .hide-mobile[b-k5hxns7e6y] {
        display: none;
    }

    .flex-mobile-wrap[b-k5hxns7e6y] {
        flex-wrap: wrap;
    }

    .tt-tradetable[b-k5hxns7e6y] {
        width: 100%;
    }

    .tt-tradetable-div[b-k5hxns7e6y] {
        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-k5hxns7e6y] {
        display: none;
    }

    .date-select-simple .date-arrows[b-k5hxns7e6y] {
        padding: 0 8px 0 8px;
    }

    .tt-page-right-tab[b-k5hxns7e6y] {
        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-tt4xl7bciu] {
    font-family: Verdana, sans-serif;
    font-size: 0.88rem;
    color: #e0e0e0;
    padding: 4px 0;
}

.tt-tradeedit-subheader[b-tt4xl7bciu] {
    color: #8888aa;
    font-size: 0.78rem;
    margin: 0 0 12px 0;
}

/* Label + input side-by-side row */
.tt-tradeedit-row[b-tt4xl7bciu] {
    display: grid;
    grid-template-columns: 8rem 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.tt-tradeedit-label[b-tt4xl7bciu] {
    color: #8888aa;
    font-size: 0.82rem;
    text-align: right;
    white-space: nowrap;
}

/* Make all controlled inputs fill their grid cell */
.tt-tradeedit-field[b-tt4xl7bciu] {
    width: 100%;
    box-sizing: border-box;
}

/* Validation error */
.tt-tradeedit-error[b-tt4xl7bciu] {
    color: #ff6666;
    font-size: 0.8rem;
    margin: 4px 0 8px 8.5rem; /* align under the input column */
}

/* Delete confirmation strip */
.tt-tradeedit-deleteconfirm[b-tt4xl7bciu] {
    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-tt4xl7bciu] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* Delete trigger button — danger-coloured outline */
.tt-tradeedit-deletetrigger[b-tt4xl7bciu] {
    color: #ff8888 !important;
    border-color: #c0392b !important;
}

    .tt-tradeedit-deletetrigger:hover[b-tt4xl7bciu] {
        background-color: #3a1010 !important;
    }

/* Delete confirm action button */
.tt-tradeedit-deletebtn[b-tt4xl7bciu] {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
}

    .tt-tradeedit-deletebtn:hover[b-tt4xl7bciu] {
        background-color: #a93226 !important;
    }
/* /Components/Pages/Futures/TradeTracker/TradeTracker_210_ImpliedExecutePopup.razor.rz.scp.css */
.tradetracker-impliedexec[b-9gqnqgt3v6] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 0.9rem;
}

    /* ── Derivation strip: SPREAD + OUTRIGHT ⇒ IMPLIED ───────────────────────── */
    .tradetracker-impliedexec .impliedexec-derivation[b-9gqnqgt3v6] {
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .tradetracker-impliedexec .impliedexec-card[b-9gqnqgt3v6] {
        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-9gqnqgt3v6] {
        cursor: pointer;
    }

        .tradetracker-impliedexec .impliedexec-card-source:hover[b-9gqnqgt3v6] {
            border-color: #009DC9;
            box-shadow: 0 0 0 2px #009DC933;
        }

    /* The derived result, accented in the implied colour. */
    .tradetracker-impliedexec .impliedexec-card-implied[b-9gqnqgt3v6] {
        border-color: #009DC9;
        border-width: 2px;
        background: #009DC90D;
    }

    .tradetracker-impliedexec .impliedexec-card-client[b-9gqnqgt3v6] {
        font-weight: 700;
        font-size: 1rem;
    }

    .tradetracker-impliedexec .impliedexec-card-contract[b-9gqnqgt3v6] {
        color: #444;
    }

    .tradetracker-impliedexec .impliedexec-card-price[b-9gqnqgt3v6] {
        font-size: 1.15rem;
        font-weight: 700;
        margin-top: 2px;
    }

        .tradetracker-impliedexec .impliedexec-card-price span[b-9gqnqgt3v6] {
            font-size: 0.72rem;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 3px;
            margin-right: 6px;
            vertical-align: middle;
        }

    .tradetracker-impliedexec .impliedexec-bid[b-9gqnqgt3v6] {
        background: #1f7a33;
        color: #fff;
    }

    .tradetracker-impliedexec .impliedexec-offer[b-9gqnqgt3v6] {
        background: #b03030;
        color: #fff;
    }

    .tradetracker-impliedexec .impliedexec-card-edit[b-9gqnqgt3v6] {
        margin-top: 4px;
        font-size: 0.72rem;
        color: #009DC9;
    }

    /* The + and ⇒ operators between cards. */
    .tradetracker-impliedexec .impliedexec-op[b-9gqnqgt3v6] {
        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-9gqnqgt3v6] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tradetracker-impliedexec .impliedexec-completeleg[b-9gqnqgt3v6] {
        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-9gqnqgt3v6] {
            box-shadow: 0 0 0 3px #00E2FD, 0 0 8px 2px #00E2FD99;
            background-color: #00E2FD;
        }

    .tradetracker-impliedexec .impliedexec-leg-title[b-9gqnqgt3v6] {
        font-weight: 700;
        margin-bottom: 6px;
    }

    .tradetracker-impliedexec .impliedexec-done[b-9gqnqgt3v6] {
        margin-left: 8px;
        color: #1f7a33;
        font-weight: 700;
    }

    .tradetracker-impliedexec .impliedexec-error[b-9gqnqgt3v6] {
        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-h6ewd1ez7l] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 0.9rem;
}

    /* ── Derivation strip: OUTRIGHT − OUTRIGHT ⇒ SPREAD ──────────────────────── */
    .tradetracker-impliedexec .impliedexec-derivation[b-h6ewd1ez7l] {
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .tradetracker-impliedexec .impliedexec-card[b-h6ewd1ez7l] {
        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-h6ewd1ez7l] {
        cursor: default;
    }

    /* The derived result, accented in the implied colour. */
    .tradetracker-impliedexec .impliedexec-card-implied[b-h6ewd1ez7l] {
        border-color: #009DC9;
        border-width: 2px;
        background: #009DC90D;
    }

    .tradetracker-impliedexec .impliedexec-card-client[b-h6ewd1ez7l] {
        font-weight: 700;
        font-size: 1rem;
    }

    .tradetracker-impliedexec .impliedexec-card-contract[b-h6ewd1ez7l] {
        color: #444;
    }

    .tradetracker-impliedexec .impliedexec-card-price[b-h6ewd1ez7l] {
        font-size: 1.15rem;
        font-weight: 700;
        margin-top: 2px;
    }

        .tradetracker-impliedexec .impliedexec-card-price span[b-h6ewd1ez7l] {
            font-size: 0.72rem;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 3px;
            margin-right: 6px;
            vertical-align: middle;
        }

    .tradetracker-impliedexec .impliedexec-bid[b-h6ewd1ez7l] {
        background: #1f7a33;
        color: #fff;
    }

    .tradetracker-impliedexec .impliedexec-offer[b-h6ewd1ez7l] {
        background: #b03030;
        color: #fff;
    }

    /* The − and ⇒ operators between cards. */
    .tradetracker-impliedexec .impliedexec-op[b-h6ewd1ez7l] {
        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-h6ewd1ez7l] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tradetracker-impliedexec .impliedexec-completeleg[b-h6ewd1ez7l] {
        padding: 0 10px;
        border-radius: 6px;
    }

    .tradetracker-impliedexec .impliedexec-leg-title[b-h6ewd1ez7l] {
        font-weight: 700;
        margin-bottom: 6px;
    }

    .tradetracker-impliedexec .impliedexec-done[b-h6ewd1ez7l] {
        margin-left: 8px;
        color: #1f7a33;
        font-weight: 700;
    }

    .tradetracker-impliedexec .impliedexec-error[b-h6ewd1ez7l] {
        color: #c0392b;
        font-weight: 600;
    }
/* /Components/Pages/Futures/TradeTracker/TradeTracker_800_Reports.razor.rz.scp.css */
.tradetracker-reports-pagelayout[b-09o6eyb7io] {
    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-09o6eyb7io] {
    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-09o6eyb7io],
    .tradetracker-reports-pagelayout .reports-rail.open[b-09o6eyb7io] {
        background-color: #1d263b;
        color: #ffffff;
    }

.tradetracker-reports-pagelayout .reports-rail-label[b-09o6eyb7io] {
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    font-size: 0.7rem;
}

/* Flyout list of available reports. */
.tradetracker-reports-pagelayout .reports-menu[b-09o6eyb7io] {
    flex: 0 0 230px;
    background-color: #14142d;
    border-right: 1px solid #2a2a45;
    padding: 10px 0;
}

.tradetracker-reports-pagelayout .reports-menu-title[b-09o6eyb7io] {
    color: #8888aa;
    font-size: 0.7rem;
    letter-spacing: 2px;
    padding: 0 12px 8px 12px;
}

.tradetracker-reports-pagelayout .reports-menu-item[b-09o6eyb7io] {
    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-09o6eyb7io] {
        background-color: #1d263b;
    }

    .tradetracker-reports-pagelayout .reports-menu-item.selected[b-09o6eyb7io] {
        border-left-color: #6ab0e0;
        background-color: #1a1a2e;
    }

.tradetracker-reports-pagelayout .reports-menu-item-name[b-09o6eyb7io] {
    display: block;
    color: #6ab0e0;
    font-size: 0.85rem;
}

.tradetracker-reports-pagelayout .reports-menu-item-desc[b-09o6eyb7io] {
    display: block;
    color: #8888aa;
    font-size: 0.7rem;
}

.tradetracker-reports-pagelayout .reports-body[b-09o6eyb7io] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    overflow-x: auto;
}

.tradetracker-reports-pagelayout .reports-empty[b-09o6eyb7io] {
    color: #8888aa;
    font-size: 0.85rem;
    padding: 20px;
}
/* /Components/Pages/Futures/TradeTracker/TradeTracker_805_ClientSummary.razor.rz.scp.css */
.tradetracker-clientsummary[b-o083llg98t] {
    font-family: Verdana, sans-serif;
    font-size: 0.8rem;
    color: #e0e0e0;
}

/* ── Toolbar ───────────────────────────────────────────── */
.tradetracker-clientsummary .cs-toolbar[b-o083llg98t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding-bottom: 10px;
}

.tradetracker-clientsummary .cs-title[b-o083llg98t] {
    color: #6ab0e0;
    font-size: 1.1rem;
    font-weight: bold;
}

.tradetracker-clientsummary .cs-datepicker[b-o083llg98t] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tradetracker-clientsummary .cs-date-nav[b-o083llg98t] {
    background: none;
    border: none;
    color: #6ab0e0;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 2px;
}

    .tradetracker-clientsummary .cs-date-nav:disabled[b-o083llg98t] {
        color: #3a3a5c;
        cursor: default;
    }

.tradetracker-clientsummary .cs-date-select[b-o083llg98t] {
    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-o083llg98t] {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #8888aa;
}

.tradetracker-clientsummary .cs-totals[b-o083llg98t] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.tradetracker-clientsummary .cs-totals-label[b-o083llg98t] {
    color: #8888aa;
    font-size: 0.7rem;
}

.tradetracker-clientsummary .cs-totals-val[b-o083llg98t] {
    color: #ffffff;
    font-weight: bold;
    padding-right: 10px;
}

.tradetracker-clientsummary .cs-copy-msg[b-o083llg98t] {
    color: #01A39E;
}

.tradetracker-clientsummary .cs-empty[b-o083llg98t] {
    color: #8888aa;
    padding: 20px 0;
}

.tradetracker-clientsummary .cs-section-title[b-o083llg98t] {
    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-o083llg98t] {
    align-items: baseline;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.tradetracker-clientsummary .cs-totals-toggle[b-o083llg98t] {
    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-o083llg98t] {
    background-color: #14142d;
    border: 1px solid #2a2a45;
    border-collapse: collapse;
    color: #ffffff;
}

    .tradetracker-clientsummary .cs-table thead tr[b-o083llg98t] {
        background-color: #14142d;
        border-bottom: 1px solid #2a2a45;
        color: #8888aa;
    }

    .tradetracker-clientsummary .cs-table th[b-o083llg98t] {
        font-weight: normal;
        white-space: nowrap;
    }

.tradetracker-clientsummary .cs-left[b-o083llg98t] {
    text-align: left;
}

.tradetracker-clientsummary .cs-num[b-o083llg98t] {
    text-align: right;
}

/* ── Route columns ─────────────────────────────────────── */
.tradetracker-clientsummary .cs-flow-row[b-o083llg98t] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}

.tradetracker-clientsummary .cs-flow-col[b-o083llg98t] {
    flex: 0 0 auto;
    max-width: 30rem;
}

.tradetracker-clientsummary .cs-flow-head[b-o083llg98t] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 4px;
}

.tradetracker-clientsummary .cs-copy-btn[b-o083llg98t] {
    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-o083llg98t] {
        border-color: #6ab0e0;
        color: #ffffff;
    }

.tradetracker-clientsummary .cs-flow-title[b-o083llg98t] {
    color: #6ab0e0;
    font-weight: bold;
}

.tradetracker-clientsummary .cs-flow-title-plain[b-o083llg98t] {
    display: block;
    padding-bottom: 4px;
}

.tradetracker-clientsummary .cs-flow-table[b-o083llg98t] {
    width: 100%;
}

.tradetracker-clientsummary .cs-period-name[b-o083llg98t] {
    color: #6ab0e0;
    font-weight: bold;
    padding: 6px 6px 0 6px;
    width: 5rem;
}

.tradetracker-clientsummary .cs-period-range[b-o083llg98t] {
    color: #8888aa;
    padding: 6px 6px 0 6px;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-period-lots[b-o083llg98t] {
    color: #ffffff;
    font-weight: bold;
    padding: 6px 6px 0 6px;
    text-align: right;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-side-label[b-o083llg98t] {
    color: #8888aa;
    padding: 0 6px;
    vertical-align: top;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-side-names[b-o083llg98t] {
    padding: 0 6px;
    word-break: break-word;
}

.tradetracker-clientsummary .cs-period-last td[b-o083llg98t] {
    border-bottom: 1px solid #2a2a45;
    padding-bottom: 6px;
}

.tradetracker-clientsummary .cs-lots[b-o083llg98t] {
    color: #8888aa;
    font-size: 0.7rem;
}

/* ── Buy / sell table ──────────────────────────────────── */
.tradetracker-clientsummary .cs-bs-table[b-o083llg98t] {
    min-width: 16rem;
}

    .tradetracker-clientsummary .cs-bs-table td[b-o083llg98t],
    .tradetracker-clientsummary .cs-bs-table th[b-o083llg98t] {
        padding: 1px 8px;
    }

/* ── Five day matrix ───────────────────────────────────── */
.tradetracker-clientsummary .cs-matrix-table td[b-o083llg98t],
.tradetracker-clientsummary .cs-matrix-table th[b-o083llg98t] {
    padding: 1px 10px;
}

.tradetracker-clientsummary .cs-matrix-name[b-o083llg98t] {
    color: #6ab0e0;
    vertical-align: middle;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-matrix-side[b-o083llg98t] {
    color: #8888aa;
    font-size: 0.7rem;
}

.tradetracker-clientsummary .cs-matrix-total td[b-o083llg98t] {
    font-weight: bold;
}

/* Whichever row ends a client block carries the rule under it. */
.tradetracker-clientsummary .cs-matrix-lastrow td[b-o083llg98t] {
    border-bottom: 1px solid #2a2a45;
}

/* The 5px breather the desk asked for between clients. */
.tradetracker-clientsummary .cs-matrix-gap td[b-o083llg98t] {
    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-074kbf9thk] {
    color: #e0e0e0;
    font-size: 0.85rem;
}

    /* One row of panels inside the edited tab. */
    .tradetracker-layouteditor .le-row-block[b-074kbf9thk] {
        border: 1px solid #2a2a44;
        border-radius: 6px;
        padding: 8px;
        margin-bottom: 10px;
        background: #0f0f1e;
    }

    .tradetracker-layouteditor .le-row-header[b-074kbf9thk] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
    }

    .tradetracker-layouteditor .le-row-label[b-074kbf9thk] {
        color: #8888aa;
        font-weight: 600;
    }

    .tradetracker-layouteditor .le-addrow-btn[b-074kbf9thk] {
        margin-top: 4px;
    }

    .tradetracker-layouteditor .le-intro[b-074kbf9thk] {
        color: #bbb;
        font-size: 0.75rem;
        margin: 0 0 12px;
    }

    .tradetracker-layouteditor .le-section-label[b-074kbf9thk] {
        color: #8888aa;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 12px 0 6px;
    }

    /* ── Tab strip ──────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-tabstrip[b-074kbf9thk] {
        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-074kbf9thk] {
        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-074kbf9thk] {
            background: #20203a;
        }

    .tradetracker-layouteditor .le-tabchip-selected[b-074kbf9thk] {
        background: #26264a;
        border-color: #00E2FD;
        box-shadow: 0 0 0 1px #00E2FD inset;
        color: #fff;
    }

    .tradetracker-layouteditor .le-tabchip-add[b-074kbf9thk] {
        background: transparent;
        border: 1px dashed #00E2FD;
        color: #00E2FD;
        cursor: pointer;
    }

    .tradetracker-layouteditor .le-tabchip-label[b-074kbf9thk] {
        font-weight: 500;
    }

    .tradetracker-layouteditor .le-grip[b-074kbf9thk] {
        color: #666;
        font-size: 0.85rem;
        cursor: grab;
    }

    .tradetracker-layouteditor .le-x[b-074kbf9thk] {
        color: #FF7777;
        cursor: pointer;
        margin-left: 4px;
        font-size: 0.95rem;
        line-height: 1;
        padding: 0 2px;
    }

        .tradetracker-layouteditor .le-x:hover[b-074kbf9thk] {
            color: #ffaaaa;
        }

    .tradetracker-layouteditor .le-plus[b-074kbf9thk] {
        font-size: 0.95rem;
        line-height: 1;
    }

    /* ── Edit panel ─────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-edit-panel[b-074kbf9thk] {
        background: #0a0a14;
        border: 1px solid #2a2a44;
        border-radius: 6px;
        padding: 14px;
    }

    .tradetracker-layouteditor .le-name-row[b-074kbf9thk] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 4px;
    }

    .tradetracker-layouteditor .le-field-label[b-074kbf9thk] {
        color: #aaa;
        font-size: 0.75rem;
        min-width: 72px;
    }

    .tradetracker-layouteditor .le-name-input[b-074kbf9thk] {
        width: 220px;
    }

    .tradetracker-layouteditor .le-auto-pill[b-074kbf9thk] {
        color: #00FF7F;
        font-size: 0.7rem;
        border: 1px solid #00FF7F;
        border-radius: 3px;
        padding: 1px 6px;
    }

    .tradetracker-layouteditor .le-custom-pill[b-074kbf9thk] {
        color: #FFE68C;
        font-size: 0.7rem;
        border: 1px solid #FFE68C;
        border-radius: 3px;
        padding: 1px 6px;
    }

    .tradetracker-layouteditor .le-hint[b-074kbf9thk] {
        color: #666;
        font-size: 0.7rem;
        font-style: italic;
        margin: 0 0 14px 82px;
    }

    /* ── Panel list ─────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-panel-list[b-074kbf9thk] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 10px;
    }

    .tradetracker-layouteditor .le-panelrow[b-074kbf9thk] {
        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-074kbf9thk] {
        background: #14142d;
        border-color: #FFE68C;
        cursor: default;
    }

    .tradetracker-layouteditor .le-panel-title[b-074kbf9thk] {
        flex: 1;
    }

    .tradetracker-layouteditor .le-short[b-074kbf9thk] {
        color: #666;
        font-size: 0.7rem;
    }

    .tradetracker-layouteditor .le-add-row[b-074kbf9thk] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tradetracker-layouteditor .le-add-select[b-074kbf9thk] {
        flex: 1;
        max-width: 280px;
    }

    .tradetracker-layouteditor .le-add-btn[b-074kbf9thk] {
        padding: 3px 14px;
    }

    .tradetracker-layouteditor .le-error[b-074kbf9thk] {
        color: #FF7777;
        font-size: 0.75rem;
        margin: 10px 0 0;
    }

    /* ── Footer ─────────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-footer[b-074kbf9thk] {
        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-074kbf9thk] {
        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-074kbf9thk] {
            background: #FF777722;
        }

    .tradetracker-layouteditor .le-reset-confirm[b-074kbf9thk] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.75rem;
        color: #FFE68C;
    }

    .tradetracker-layouteditor .le-reset-yes[b-074kbf9thk] {
        padding: 3px 10px;
    }

    .tradetracker-layouteditor .le-saved-msg[b-074kbf9thk] {
        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-wf3ovna8fa] {
    padding: 0.75em 1em;
}

.itp-heading[b-wf3ovna8fa] {
    margin-bottom: 0.5em;
}

/* Two-column layout: left filters, right table. */
.itp-layout[b-wf3ovna8fa] {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
    margin-top: 0.75em;
}

.itp-left[b-wf3ovna8fa] {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    width: 17em;
    flex: 0 0 17em;
}

.itp-right[b-wf3ovna8fa] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}

.itp-label[b-wf3ovna8fa] {
    font-weight: 600;
    font-size: 0.85em;
    margin-top: 0.4em;
}

.itp-date[b-wf3ovna8fa] {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.25em 0.4em;
    font-size: 0.9em;
}

.itp-listbox[b-wf3ovna8fa] {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.2em;
    font-size: 0.9em;
}

.itp-legend[b-wf3ovna8fa] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.6em;
    font-size: 0.8em;
    flex-wrap: wrap;
}

.itp-swatch[b-wf3ovna8fa] {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: 3px;
    font-size: 0.8em;
}

.itp-msg[b-wf3ovna8fa] {
    font-style: italic;
    color: #6c757d;
    margin: 1em 0;
}

.itp-table[b-wf3ovna8fa] {
    border-collapse: collapse;
    width: auto;
    min-width: 32em;
    font-size: 0.9em;
}

.itp-table th[b-wf3ovna8fa],
.itp-table td[b-wf3ovna8fa] {
    border: 1px solid #e0e0e0;
    padding: 0.25em 0.6em;
    white-space: nowrap;
}

.itp-table thead th[b-wf3ovna8fa] {
    background: #f2f4f7;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.itp-table .itp-num[b-wf3ovna8fa] {
    text-align: right;
}

.itp-table .itp-centre[b-wf3ovna8fa] {
    text-align: center;
}

.itp-inp[b-wf3ovna8fa] {
    width: 6.5em;
    text-align: right;
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding: 0.1em 0.35em;
}

.itp-btn[b-wf3ovna8fa] {
    padding: 0.15em 0.7em;
    font-size: 0.85em;
}

/* Escalating red bands for moves over 10% (each 10% is more intense). */
.itp-m1[b-wf3ovna8fa] {
    background: #ffe0e0;
}

.itp-m2[b-wf3ovna8fa] {
    background: #ffb3b3;
}

.itp-m3[b-wf3ovna8fa] {
    background: #ff8080;
}

.itp-m4[b-wf3ovna8fa] {
    background: #f24d4d;
    color: #ffffff;
}

.itp-m5[b-wf3ovna8fa] {
    background: #d90000;
    color: #ffffff;
    font-weight: 600;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Comps/SurveyInfoHint.razor.rz.scp.css */
/* SurveyInfoHint - component prefix: sdi- */

.sdi-hint[b-gvtvp5owbt] {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.sdi-badge[b-gvtvp5owbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid #000061;
    border-radius: 50%;
    background-color: #fff;
    color: #000061;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: italic;
    cursor: help;
}

.sdi-badge:hover[b-gvtvp5owbt],
.sdi-badge:focus-visible[b-gvtvp5owbt] {
    background-color: #000061;
    color: #fff;
}

/* Opens upward and to the right: the badge sits bottom-left of the tab, so anywhere else would
   push the note off the page. */
.sdi-pop[b-gvtvp5owbt] {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;

    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 0;
    z-index: 30;

    width: 34rem;
    max-width: 80vw;
    padding: 0.7rem 0.85rem;

    border: 1px solid #000061;
    border-radius: 8px;
    background-color: #edf5f4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);

    font-size: 0.75rem;
    line-height: 1.45;
    color: #333;
    text-align: left;
    white-space: normal;
}

/* focus-within so the note is reachable by keyboard, not only by pointer. */
.sdi-hint:hover .sdi-pop[b-gvtvp5owbt],
.sdi-hint:focus-within .sdi-pop[b-gvtvp5owbt] {
    visibility: visible;
    opacity: 1;
}

.sdi-pop-title[b-gvtvp5owbt] {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: #000061;
}

/* ::deep, because the note itself is supplied by whichever tab used the component, so it carries that
   tab's scope rather than this one's. Limited to direct children of the popover so it cannot reach
   anything else on the page. */
.sdi-pop[b-gvtvp5owbt]  > div {
    margin-bottom: 0.45rem;
}

.sdi-pop[b-gvtvp5owbt]  > div:last-child {
    margin-bottom: 0;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Comps/SurveyPredictionTable.razor.rz.scp.css */
/* SurveyPredictionTable - component prefix: sdt- */

.sdt-wrap[b-57kocj325y] {
    max-height: 30rem;
    overflow: auto;
}

.sdt-table[b-57kocj325y] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sdt-table th[b-57kocj325y],
.sdt-table td[b-57kocj325y] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #eee;
    text-align: left;
    white-space: nowrap;
}

.sdt-table thead th[b-57kocj325y] {
    position: sticky;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.sdt-table .sdt-num[b-57kocj325y] {
    text-align: right;
}

.sdt-table .sdt-indock[b-57kocj325y] {
    color: #9a7400;
    font-weight: 600;
}

.sdt-table .sdt-overdue[b-57kocj325y] {
    color: #c01e50;
    font-weight: 600;
}

.sdt-empty[b-57kocj325y] {
    padding: 1.5rem 0;
    text-align: center;
    color: #777;
    font-style: italic;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Comps/SurveySelect.razor.rz.scp.css */
/* SurveySelect - component prefix: sds- */

.sds-control[b-p8uolvdndx] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sds-label[b-p8uolvdndx] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
}

.sds-select[b-p8uolvdndx] {
    padding: 0.3rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 0.85rem;
    color: #222;
    min-width: 8rem;
    max-width: 14rem;
}

.sds-select:focus-visible[b-p8uolvdndx] {
    outline: 2px solid #000061;
    outline-offset: 1px;
}

.sds-hint[b-p8uolvdndx] {
    font-size: 0.7rem;
    color: #888;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Comps/SurveyShareTable.razor.rz.scp.css */
/* SurveyShareTable - component prefix: sst- */

.sst-share[b-a6mxfjr8km] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sst-head[b-a6mxfjr8km] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.sst-title[b-a6mxfjr8km] {
    font-size: 0.85rem;
    font-weight: 600;
}

.sst-hint[b-a6mxfjr8km] {
    font-size: 0.7rem;
    color: #888;
    font-weight: 400;
}

.sst-table[b-a6mxfjr8km] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sst-table th[b-a6mxfjr8km],
.sst-table td[b-a6mxfjr8km] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #eee;
    text-align: left;
    white-space: nowrap;
}

.sst-table thead th[b-a6mxfjr8km] {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.sst-table .sst-num[b-a6mxfjr8km] {
    text-align: right;
}

/* The group's colour on the chart, so a row can be found in the stack. */
.sst-swatch[b-a6mxfjr8km] {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.4rem;
    border-radius: 2px;
}

.sst-table .sst-up[b-a6mxfjr8km] {
    color: #01A39E;
}

.sst-table .sst-down[b-a6mxfjr8km] {
    color: #c01e50;
}

.sst-table .sst-total td[b-a6mxfjr8km] {
    border-top: 1px solid #ccc;
    font-weight: 600;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Comps/SurveySizePicker.razor.rz.scp.css */
/* SurveySizePicker - component prefix: sdp- */

.sdp-control[b-rko6p09m8s] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sdp-label[b-rko6p09m8s] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
}

.sdp-range[b-rko6p09m8s] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sdp-range-input[b-rko6p09m8s] {
    width: 5.5rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
}

.sdp-range-sep[b-rko6p09m8s] {
    font-size: 0.8rem;
    color: #777;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Comps/SurveyYardTable.razor.rz.scp.css */
/* SurveyYardTable - component prefix: syt- */

.syt-wrap[b-57geyj1w3m] {
    max-height: 32rem;
    overflow: auto;
}

.syt-table[b-57geyj1w3m] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.syt-table th[b-57geyj1w3m],
.syt-table td[b-57geyj1w3m] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #eee;
    text-align: left;
    white-space: nowrap;
}

.syt-table thead th[b-57geyj1w3m] {
    position: sticky;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.syt-table .syt-num[b-57geyj1w3m] {
    text-align: right;
}

/* Busy index: a yard well above its own norm is the thing worth spotting in the column. */
.syt-table .syt-busy-high[b-57geyj1w3m] {
    color: #c01e50;
    font-weight: 600;
}

.syt-table .syt-busy-normal[b-57geyj1w3m] {
    color: #444;
}

.syt-table .syt-busy-low[b-57geyj1w3m] {
    color: #999;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Pages/AnalysisTab.razor.rz.scp.css */
/* AnalysisTab - page prefix: sda- */

.sda-tab[b-xv85g63mxf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sda-controls[b-xv85g63mxf] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
}




.sda-segment[b-xv85g63mxf] {
    font-weight: 600;
}

.sda-hint[b-xv85g63mxf] {
    font-size: 0.75rem;
    color: #888;
    font-weight: 400;
}

/* Table left, chart right. The box plots only need room for a handful of boxes, so the chart gives up
   the width the table can use; below ~62rem the two stack rather than squeezing both. */
.sda-body[b-xv85g63mxf] {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 62rem) {
    .sda-body[b-xv85g63mxf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* No height here on purpose.

   HighchartBase's own .HighChart-Base rule is already height:100%, so a fixed height on this wrapper
   left the chart at the end of a percentage chain - wrapper, then chart div, then Highcharts measuring
   it - that had to resolve before Highcharts read it. Inside a flex or grid parent that measurement
   came back short of the final layout and the chart drew itself taller than its box, which is the
   clipped bottom axis.

   With no height the chart div measures zero, Highcharts ignores it and uses its own 400px default -
   a number it decided rather than inferred. To set a specific height, pass chart.height in the chart
   options rather than styling this element: Highcharts takes that literally and sizes the SVG to it. */
.sda-chart[b-xv85g63mxf] {
    min-width: 0;
}

.sda-matrix-wrap[b-xv85g63mxf] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sda-matrix-title[b-xv85g63mxf] {
    font-size: 0.8rem;
    font-weight: 600;
}

.sda-matrix[b-xv85g63mxf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sda-matrix th[b-xv85g63mxf],
.sda-matrix td[b-xv85g63mxf] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #eee;
    text-align: left;
    white-space: nowrap;
}

.sda-matrix thead th[b-xv85g63mxf] {
    border-bottom: 1px solid #ccc;
    font-weight: 600;
}

.sda-matrix .sda-num[b-xv85g63mxf] {
    text-align: right;
}

/* The baseline row reads as a header for the ones below it rather than as another country. */
.sda-matrix .sda-matrix-all td[b-xv85g63mxf] {
    font-weight: 600;
    border-bottom: 1px solid #ccc;
}

.sda-callouts[b-xv85g63mxf] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: #555;
}

.sda-empty[b-xv85g63mxf] {
    padding: 3rem 0;
    text-align: center;
    color: #777;
    font-style: italic;
}

.sda-table-wrap[b-xv85g63mxf] {
    max-height: 26rem;
    overflow: auto;
}

.sda-table[b-xv85g63mxf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sda-table th[b-xv85g63mxf],
.sda-table td[b-xv85g63mxf] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #eee;
    text-align: left;
    white-space: nowrap;
}

.sda-table thead th[b-xv85g63mxf] {
    position: sticky;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.sda-table .sda-num[b-xv85g63mxf] {
    text-align: right;
}

.sda-info[b-xv85g63mxf] {
    /* Anchors the info badge bottom-left. margin-top:auto pins it under the content in the
       tab's flex column rather than floating just below the last element. */
    display: flex;
    margin-top: auto;
    padding-top: 0.25rem;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Pages/CurrentTab.razor.rz.scp.css */
/* CurrentTab - page prefix: sdc- */

.sdc-tab[b-9oyefo4bmy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Deliberately no height: 100%. The tiles, charts, tables and notes together are taller than the
       dashboard body, so the tab flows and the body scrolls. Forcing the full height here made the
       flex children share a box smaller than their content and the chart lost its bottom axis. */
}

.sdc-controls[b-9oyefo4bmy] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
}

.sdc-control[b-9oyefo4bmy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sdc-control-label[b-9oyefo4bmy] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
}

/* The Current / Overdue switch: the dashboard's own radio tabs, one size down. */
.sdc-views[b-9oyefo4bmy] {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e2e2e8;
}

.sdc-hint[b-9oyefo4bmy] {
    font-size: 0.7rem;
    color: #888;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.sdc-warning[b-9oyefo4bmy] {
    padding: 0.4rem 0.6rem;
    border-left: 4px solid #EB3871;
    background-color: #fdf2f5;
    font-size: 0.8rem;
}

.sdc-segment[b-9oyefo4bmy] {
    font-weight: 600;
}

.sdc-section-title[b-9oyefo4bmy] {
    margin-top: 0.25rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #e2e2e8;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000061;
}

.sdc-callout[b-9oyefo4bmy] {
    font-size: 0.9rem;
    line-height: 1.5;
}

.sdc-tiles[b-9oyefo4bmy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.sdc-tile[b-9oyefo4bmy] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #e2e2e8;
    border-left: 4px solid #000061;
    border-radius: 6px;
    background-color: #fbfbfd;
}

.sdc-tile-done[b-9oyefo4bmy] {
    border-left-color: #01A39E;
}

.sdc-tile-indock[b-9oyefo4bmy] {
    border-left-color: #FFD025;
}

.sdc-tile-overdue[b-9oyefo4bmy] {
    border-left-color: #EB3871;
}

/* Pace against history: behind is the deferral the tab is looking for, so it takes the warning colour. */
.sdc-tile-behind[b-9oyefo4bmy] {
    border-left-color: #DB303A;
}

.sdc-tile-ahead[b-9oyefo4bmy] {
    border-left-color: #01A39E;
}

.sdc-tile-value[b-9oyefo4bmy] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: #000061;
}

.sdc-tile-label[b-9oyefo4bmy] {
    font-size: 0.8rem;
    font-weight: 600;
}

.sdc-tile-note[b-9oyefo4bmy] {
    font-size: 0.7rem;
    color: #777;
}

/* No height here on purpose.

   HighchartBase's own .HighChart-Base rule is already height:100%, so a fixed height on this wrapper
   left the chart at the end of a percentage chain - wrapper, then chart div, then Highcharts measuring
   it - that had to resolve before Highcharts read it. Inside a flex or grid parent that measurement
   came back short of the final layout and the chart drew itself taller than its box, which is the
   clipped bottom axis.

   With no height the chart div measures zero, Highcharts ignores it and uses its own 400px default -
   a number it decided rather than inferred. To set a specific height, pass chart.height in the chart
   options rather than styling this element: Highcharts takes that literally and sizes the SVG to it. */
.sdc-chart-wide[b-9oyefo4bmy] {
    flex: 0 0 auto;
}

/* The comparison table beside the history chart, wrapping under it on a narrow screen. */
.sdc-split[b-9oyefo4bmy] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;
}

.sdc-split-table[b-9oyefo4bmy] {
    flex: 0 1 30rem;
}

.sdc-split-chart[b-9oyefo4bmy] {
    flex: 1 1 32rem;
    min-width: 0;
}

.sdc-empty[b-9oyefo4bmy] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    color: #777;
    font-style: italic;
}

.sdc-table-title[b-9oyefo4bmy] {
    font-size: 0.85rem;
    font-weight: 600;
}

.sdc-table[b-9oyefo4bmy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sdc-table th[b-9oyefo4bmy],
.sdc-table td[b-9oyefo4bmy] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #eee;
    text-align: left;
    white-space: nowrap;
}

.sdc-table thead th[b-9oyefo4bmy] {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.sdc-table .sdc-num[b-9oyefo4bmy] {
    text-align: right;
}

/* In brief: a question per band of rows, the answers in a column per size. Answers wrap, since some list
   countries and yards. */
.sdc-brief[b-9oyefo4bmy] {
    width: auto;
    max-width: 72rem;
}

.sdc-brief td[b-9oyefo4bmy] {
    white-space: normal;
    vertical-align: top;
}

.sdc-brief .sdc-brief-question td[b-9oyefo4bmy] {
    padding-top: 0.9rem;
    border-bottom: 1px solid #ccc;
    font-size: 0.9rem;
    font-weight: 600;
    color: #000061;
}

.sdc-brief .sdc-brief-label[b-9oyefo4bmy] {
    width: 22rem;
    color: #555;
}

.sdc-brief .sdc-brief-value[b-9oyefo4bmy] {
    min-width: 14rem;
    font-weight: 600;
}

.sdc-brief-link[b-9oyefo4bmy] {
    margin-left: 0.5rem;
    padding: 0;
    border: none;
    background: none;
    color: #009DC9;
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
}

.sdc-brief-link:hover[b-9oyefo4bmy] {
    text-decoration: underline;
}

/* Month-by-month tables: kept to their content's width, so the numbers sit near their month. */
.sdc-month-wrap[b-9oyefo4bmy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.sdc-month-table[b-9oyefo4bmy] {
    width: auto;
    min-width: 36rem;
}

.sdc-month-table .sdc-month-current td[b-9oyefo4bmy] {
    background-color: #eef1fa;
    font-weight: 600;
}

.sdc-month-table .sdc-month-future td[b-9oyefo4bmy] {
    color: #555;
}

.sdc-month-table .sdc-month-na[b-9oyefo4bmy] {
    color: #bbb;
}

.sdc-month-table .sdc-month-missed[b-9oyefo4bmy] {
    color: #c01e50;
}

.sdc-month-table .sdc-month-total td[b-9oyefo4bmy] {
    border-top: 1px solid #ccc;
    font-weight: 600;
}

.sdc-export-btn[b-9oyefo4bmy] {
    padding: 0.3rem 0.9rem;
    border: 1px solid #000061;
    border-radius: 4px;
    background-color: #000061;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
}

.sdc-export-btn:disabled[b-9oyefo4bmy] {
    background-color: #9aa0c0;
    border-color: #9aa0c0;
    cursor: default;
}

.sdc-info[b-9oyefo4bmy] {
    /* Anchors the info badge bottom-left. margin-top:auto pins it under the content in the
       tab's flex column rather than floating just below the last element. */
    display: flex;
    margin-top: auto;
    padding-top: 0.25rem;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Pages/FleetTab.razor.rz.scp.css */
/* FleetTab - page prefix: sdf- */

.sdf-tab[b-d4e8lbcg0i] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* No height: 100%. The tab flows and the dashboard body scrolls - see .sdc-tab for why. */
}

.sdf-controls[b-d4e8lbcg0i] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
}

.sdf-control[b-d4e8lbcg0i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sdf-control-label[b-d4e8lbcg0i] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
}

.sdf-radios[b-d4e8lbcg0i] {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sdf-summary[b-d4e8lbcg0i] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.9rem;
}

/* No height here on purpose.

   HighchartBase's own .HighChart-Base rule is already height:100%, so a fixed height on this wrapper
   left the chart at the end of a percentage chain - wrapper, then chart div, then Highcharts measuring
   it - that had to resolve before Highcharts read it. Inside a flex or grid parent that measurement
   came back short of the final layout and the chart drew itself taller than its box, which is the
   clipped bottom axis.

   With no height the chart div measures zero, Highcharts ignores it and uses its own 400px default -
   a number it decided rather than inferred. To set a specific height, pass chart.height in the chart
   options rather than styling this element: Highcharts takes that literally and sizes the SVG to it. */
.sdf-chart[b-d4e8lbcg0i] {
    flex: 0 0 auto;
}

.sdf-empty[b-d4e8lbcg0i] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 8rem;
    color: #777;
    font-style: italic;
}


.sdf-window[b-d4e8lbcg0i] {
    min-width: 16rem;
}

.sdf-window-value[b-d4e8lbcg0i] {
    margin-left: 0.4rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #000061;
}

.sdf-slider[b-d4e8lbcg0i] {
    width: 100%;
    accent-color: #000061;
}

.sdf-hint[b-d4e8lbcg0i] {
    font-size: 0.7rem;
    color: #888;
}

.sdf-info[b-d4e8lbcg0i] {
    /* Anchors the info badge bottom-left. margin-top:auto pins it under the content in the
       tab's flex column rather than floating just below the last element. */
    display: flex;
    margin-top: auto;
    padding-top: 0.25rem;
}

.sdf-check[b-d4e8lbcg0i] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.sdf-check-box[b-d4e8lbcg0i] {
    accent-color: #000061;
}

.sdf-date[b-d4e8lbcg0i] {
    padding: 0.25rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
}

.sdf-mode-note[b-d4e8lbcg0i] {
    color: #777;
    font-size: 0.75rem;
}

.sdf-export[b-d4e8lbcg0i] {
    /* Sits at the end of the control row, aligned with the radio groups rather than their labels. */
    justify-content: flex-start;
}

.sdf-export-btn[b-d4e8lbcg0i] {
    padding: 0.3rem 0.9rem;
    border: 1px solid #000061;
    border-radius: 4px;
    background-color: #000061;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
}

.sdf-export-btn:disabled[b-d4e8lbcg0i] {
    background-color: #9aa0c0;
    border-color: #9aa0c0;
    cursor: default;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Pages/VesselTab.razor.rz.scp.css */
/* VesselTab - page prefix: sdv- */

.sdv-tab[b-4rfqyjzf50] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sdv-search[b-4rfqyjzf50] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 26rem;
}

.sdv-search-label[b-4rfqyjzf50] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
}

.sdv-search-input[b-4rfqyjzf50] {
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
}

.sdv-hint[b-4rfqyjzf50] {
    font-size: 0.7rem;
    color: #888;
}

.sdv-results[b-4rfqyjzf50] {
    display: flex;
    flex-direction: column;
    max-height: 13rem;
    overflow: auto;
    border: 1px solid #e2e2e8;
    border-radius: 6px;
    max-width: 26rem;
}

.sdv-result[b-4rfqyjzf50] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    width: 100%;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid #f0f0f4;
    text-align: left;
}

.sdv-result:hover[b-4rfqyjzf50] {
    background-color: #f4f6fb;
}

.sdv-result-active[b-4rfqyjzf50] {
    background-color: #edf5f4;
}

.sdv-result-name[b-4rfqyjzf50] {
    font-size: 0.85rem;
    font-weight: 600;
}

.sdv-result-meta[b-4rfqyjzf50] {
    font-size: 0.7rem;
    color: #777;
}

.sdv-detail[b-4rfqyjzf50] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sdv-detail-head[b-4rfqyjzf50] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.sdv-vessel-name[b-4rfqyjzf50] {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #000061;
}

.sdv-vessel-meta[b-4rfqyjzf50] {
    font-size: 0.8rem;
    color: #666;
}

.sdv-clear[b-4rfqyjzf50] {
    font-size: 0.75rem;
    color: #666;
    text-decoration: underline;
}

.sdv-tiles[b-4rfqyjzf50] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.sdv-tile[b-4rfqyjzf50] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #e2e2e8;
    border-left: 4px solid #000061;
    border-radius: 6px;
    background-color: #fbfbfd;
}

.sdv-tile-next[b-4rfqyjzf50] {
    border-left-color: #8C97C6;
}

.sdv-tile-value[b-4rfqyjzf50] {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.1;
    color: #000061;
}

.sdv-tile-label[b-4rfqyjzf50] {
    font-size: 0.8rem;
    font-weight: 600;
}

.sdv-tile-note[b-4rfqyjzf50] {
    font-size: 0.7rem;
    color: #777;
}

/* No height here on purpose.

   HighchartBase's own .HighChart-Base rule is already height:100%, so a fixed height on this wrapper
   left the chart at the end of a percentage chain - wrapper, then chart div, then Highcharts measuring
   it - that had to resolve before Highcharts read it. Inside a flex or grid parent that measurement
   came back short of the final layout and the chart drew itself taller than its box, which is the
   clipped bottom axis.

   With no height the chart div measures zero, Highcharts ignores it and uses its own 400px default -
   a number it decided rather than inferred. To set a specific height, pass chart.height in the chart
   options rather than styling this element: Highcharts takes that literally and sizes the SVG to it. */
.sdv-chart[b-4rfqyjzf50] {
    /* sizing left to Highcharts - see above */
}

.sdv-table-wrap[b-4rfqyjzf50] {
    max-height: 30rem;
    overflow: auto;
}

.sdv-table[b-4rfqyjzf50] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sdv-table th[b-4rfqyjzf50],
.sdv-table td[b-4rfqyjzf50] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #eee;
    text-align: left;
    white-space: nowrap;
}

.sdv-table thead th[b-4rfqyjzf50] {
    position: sticky;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.sdv-table .sdv-num[b-4rfqyjzf50] {
    text-align: right;
}

.sdv-table .sdv-row-projected td[b-4rfqyjzf50] {
    background-color: #f4f6fb;
    font-style: italic;
}

.sdv-empty[b-4rfqyjzf50] {
    padding: 3rem 0;
    text-align: center;
    color: #777;
    font-style: italic;
}

.sdv-info[b-4rfqyjzf50] {
    /* Anchors the info badge bottom-left. margin-top:auto pins it under the content in the
       tab's flex column rather than floating just below the last element. */
    display: flex;
    margin-top: auto;
    padding-top: 0.25rem;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/Pages/YardTab.razor.rz.scp.css */
/* YardTab - page prefix: sdy- */

.sdy-tab[b-nusf5dbzjx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* No height: 100%. The tab flows and the dashboard body scrolls - see .sdc-tab for why. */
}

.sdy-controls[b-nusf5dbzjx] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
}

.sdy-warning[b-nusf5dbzjx] {
    padding: 0.4rem 0.6rem;
    border-left: 4px solid #EB3871;
    background-color: #fdf2f5;
    font-size: 0.8rem;
}

.sdy-segment[b-nusf5dbzjx] {
    font-weight: 600;
}

.sdy-stats[b-nusf5dbzjx] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.9rem;
}

.sdy-hint[b-nusf5dbzjx] {
    font-size: 0.7rem;
    color: #888;
    font-weight: 400;
}

/* No height here on purpose.

   HighchartBase's own .HighChart-Base rule is already height:100%, so a fixed height on this wrapper
   left the chart at the end of a percentage chain - wrapper, then chart div, then Highcharts measuring
   it - that had to resolve before Highcharts read it. Inside a flex or grid parent that measurement
   came back short of the final layout and the chart drew itself taller than its box, which is the
   clipped bottom axis.

   With no height the chart div measures zero, Highcharts ignores it and uses its own 400px default -
   a number it decided rather than inferred. To set a specific height, pass chart.height in the chart
   options rather than styling this element: Highcharts takes that literally and sizes the SVG to it. */
.sdy-chart[b-nusf5dbzjx] {
    flex: 1 1 32rem;
    min-width: 0;
}

/* The chart with the share table beside it, the table wrapping under it on a narrow screen. */
.sdy-split[b-nusf5dbzjx] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;
}

.sdy-share[b-nusf5dbzjx] {
    flex: 0 1 30rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sdy-empty[b-nusf5dbzjx] {
    padding: 3rem 0;
    text-align: center;
    color: #777;
    font-style: italic;
}

.sdy-table-title[b-nusf5dbzjx] {
    font-size: 0.85rem;
    font-weight: 600;
}

.sdy-info[b-nusf5dbzjx] {
    /* Anchors the info badge bottom-left. margin-top:auto pins it under the content in the
       tab's flex column rather than floating just below the last element. */
    display: flex;
    margin-top: auto;
    padding-top: 0.25rem;
}
/* /Components/Pages/General/Analysis/Surveys/Dashboard/SurveysDashboard.razor.rz.scp.css */
/* SurveysDashboard - page prefix: sd- */

.sd-page[b-556d5r75ti] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 2%;
}

.sd-header[b-556d5r75ti] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.sd-title[b-556d5r75ti] {
    margin-top: 8px;
}

.sd-subtitle[b-556d5r75ti] {
    color: #555;
    font-size: 0.9rem;
    margin-top: 8px;
}

.sd-tabstrip[b-556d5r75ti] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.sd-body[b-556d5r75ti] {
    flex: 1 1 auto;
    /* min-height, not height: a tab taller than the viewport grows and scrolls here rather than
       having its contents compressed to fit. */
    min-height: 60vh;
    overflow: auto;
}
/* /Components/Pages/General/Analysis/Surveys/Surveys.razor.rz.scp.css */
.svy-rpt-btn[b-4vqiog5bi1] {
    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-2480p9t9zc] {
    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-2480p9t9zc] {
        background-color: #D1EDF5;
    }


.striped-bg[b-2480p9t9zc] {
    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-q2a55eiwn7] {
    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-q2a55eiwn7] {
        background-color: #D1EDF5;
    }
/* /Components/Pages/General/Analysis/Vessels/Pages/Orderbook.razor.rz.scp.css */
@scope (.orderbook-cont) {
    :scope[b-g17thf5at4] {
        /*        background-color: lightblue;*/
        /*        border: 2px solid gray;*/
        display: flex;
        flex-direction: column;
        height: 96%;
        width: 100%;
    }

    .div[b-g17thf5at4] {
        border: 1px solid lightblue;
    }

    td[b-g17thf5at4], th[b-g17thf5at4] {
        padding: 5px;
    }
}

.orderbook-top[b-g17thf5at4] {
    display: flex;
    flex-direction: row;
    height: 50%;
    width: 100%;
}

.orderbook-outlook[b-g17thf5at4] {
    height: 100%;
    width: 59%;
    padding: 0.5%;
}

.orderbook-outlook-graph[b-g17thf5at4] {
    height: 90%;
}

.orderbook-outlook-btn[b-g17thf5at4] {
    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-g17thf5at4] {
        background-color: #D1EDF5;
    }


.orderbook-btm[b-g17thf5at4] {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.orderbook-geo[b-g17thf5at4] {
    height: 100%;
    width: 50%;
    padding: 0.5%;
}

.orderbook-yards[b-g17thf5at4] {
    height: 100%;
    width: 50%;
    padding: 0.5%;
}
/* /Components/Pages/General/Analysis/Vessels/Pages/YardInfo.razor.rz.scp.css */
.country-btn[b-gz4agintzs] {
    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-gz4agintzs] {
        background-color: #D1EDF5;
    }


@scope(.yard-util-table) {
    :scope[b-gz4agintzs] {
    }

    thead[b-gz4agintzs] {
        background-color: #163E9F;
        color: white;
        font-weight: 400;
    }

    tbody[b-gz4agintzs] {
    }

        tbody tr:hover[b-gz4agintzs] {
            background-color: #D0E4F0 !important;
        }
}
/* /Components/Pages/General/Bunkers/BunkerPrices.razor.rz.scp.css */
#mapdiv[b-e4fbz3lp1w] {
    width: 100%;
    height: 400px !important;
    z-index: unset !important;
}

#chartdiv[b-e4fbz3lp1w] {
    width: 100%;
}

.leaflet-popup-close-button[b-e4fbz3lp1w] {
    display: none;
}

.grid-container-bunker[b-e4fbz3lp1w] {
    display: grid;
    grid-template-columns: auto 300px;
    gap: 5px;
}

.grid-container-table-map[b-e4fbz3lp1w] {
    display: grid;
    grid-template-columns: 400px auto;
    grid-template-rows: auto;
    gap: 5px;
}

/*Autocomlete CSS*/

.autocomplete[b-e4fbz3lp1w] {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

.cardformat[b-e4fbz3lp1w] {
    background-color: #DEEEF1 !important;
    width: 285px;
}

.autocomplete-items[b-e4fbz3lp1w] {
    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-e4fbz3lp1w] {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover[b-e4fbz3lp1w] {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active[b-e4fbz3lp1w] {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.bunkersidebar[b-e4fbz3lp1w]  .bunkerex-input {
    height: 38px;
    background-color: #f0eeeb !important;
    color: black !important;
    border: black 1px solid !important;
    padding-left: 5px;
    padding-right: 2px;
}

.bunkersidebar[b-e4fbz3lp1w]  .bunkerex-button {
    vertical-align: top;
    height: 38px;
    background-color: #f0eeeb;
    color: black;
    border: black 1px solid;
    padding: 0;
}


.chartrow[b-e4fbz3lp1w] {
    display: flex;
}

.chartrowitem[b-e4fbz3lp1w] {
    /* flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    border: 1px solid black; */
    /*width: calc((100dvw - 350px) / @chartCount );*/
    height: 460px
}

.leaflet-pane[b-e4fbz3lp1w] {
    z-index: 0;
}

.bunkersidebar[b-e4fbz3lp1w] {
    background-color:#B5CBD6;
    border: 1px solid #405864;
    border-radius: 10px;
    padding:8px;
}

@media (max-width: 768px) {
    .grid-container-bunker[b-e4fbz3lp1w] {
        display: block;
    }

    .grid-container-table-map[b-e4fbz3lp1w] {
        display: block;
    }

    .chartrow[b-e4fbz3lp1w] {
        display: block;
    }

    .chartrowitem[b-e4fbz3lp1w] {
        width: 100%;
        height: 460px
    }
}
/*End of Autocomplete CSS*/

/* /Components/Pages/General/Commentary/Commentary_00_Main.razor.rz.scp.css */
.commentary-page-layout[b-oxpmil8sci] {
    display: grid;
    grid-template-columns: 250px auto;
    gap: 10px;
}

.commentary-button[b-oxpmil8sci] {
    width: 80%;
    margin-bottom: 10px;
}

.commentary-filter-input[b-oxpmil8sci] {
    width: 80%;
}

.commentary-filter-header[b-oxpmil8sci] {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
}

.commentary-filter-subheader[b-oxpmil8sci] {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 8px;
}


    .span-2-widescreen[b-oxpmil8sci] {
        grid-column: span 2;
    }

.commentary-small-icon[b-oxpmil8sci] {
    height: 15px;
    cursor: pointer;
    border-radius: 5px;
}

    .commentary-small-icon.red:hover[b-oxpmil8sci] {
        background-color: #FE908F;
    }

    .commentary-small-icon.orange:hover[b-oxpmil8sci] {
        background-color: #F7B900;
    }

    .commentary-small-icon.green:hover[b-oxpmil8sci] {
        background-color: #73D673;
    }


.commentary-side-panel[b-oxpmil8sci] {
    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-oxpmil8sci] {
        transform: translateX(calc(100vw - 200px));
    }

.commentary-side-panel-container[b-oxpmil8sci] {
    position: relative;
    height: 100%;
    width: 100%;
}

.commentary-side-panel-tab[b-oxpmil8sci] {
    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-oxpmil8sci] {
    height: 40px;
    transition: transform 0.25s;
    transform: rotate(270deg);
    margin-top: 26px;
    margin-left: -5px;
}

    .commentary-arrow.expanded[b-oxpmil8sci] {
        transform: rotate(450deg);
    }

@media (max-width: 840px) {
    .span-2-widescreen[b-oxpmil8sci] {
        grid-column: auto;
    }
}
/* /Components/Pages/General/Commentary/Commentary_50_Edit.razor.rz.scp.css */
.commentaryeditgrid[b-6k9sd2cbqm] {
    margin-left: 5px;
    display: grid;
    /*flex-direction: column;*/
    grid-template-columns: 14rem auto;
    gap: 10px;
}



.commentaryeditflex[b-6k9sd2cbqm] {
    display: flex;
    gap: 10px;
}

.commentaryeditheader[b-6k9sd2cbqm] {
    border: 1px solid silver;
    font-size: 20px;
    color: black;
    width: 100%;
    padding-left: 1em;
    margin-bottom: 4px;
    background-color: #E9EFF9;
}


    .commentaryeditheader[b-6k9sd2cbqm]::placeholder {
        font-weight: unset;
        opacity: 0.5;
        color: grey;
        font-style: italic;
    }

.commentaryedittitle[b-6k9sd2cbqm] {
    border: 1px solid silver;
    font-size: 20px;
    color: grey;
    width: 100%;
    padding-left: 1em;
    margin-bottom: 4px;
    background-color: #E9EFF9;
}

.commentarytitleheader[b-6k9sd2cbqm] {
    border: 1px solid silver;
    font-weight: bold;
    width: 100%;
    padding-left: 5px;
    background-color: #E9EFF9;
}

.commentarylistbox[b-6k9sd2cbqm] {
    border: 1px solid silver;
    font-weight: bold;
    width: 100%;
    padding-left: 5px;
    background-color: #E9EFF9;
}

.commentaryedittext[b-6k9sd2cbqm] {
    border: 1px solid silver;
    color: black;
    width: 100%;
    padding-left: 1em;
    margin-bottom: 4px;
    background-color: #E9EFF9;
}


    .commentaryedittext[b-6k9sd2cbqm]::placeholder {
        opacity: 0.5;
        color: grey;
        font-style: italic;
    }

.tagsshow-container[b-6k9sd2cbqm] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2px;
}


.tagsshow-container-sub[b-6k9sd2cbqm] {
    display: flex;
    align-items: flex-start;
    gap: 1px;
}

.tagsshow-parent[b-6k9sd2cbqm] {
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    width: 100px;
    border: darkGrey;
    border-radius: 5px;
    margin-bottom: 10px;
}

.tagsshow-sub[b-6k9sd2cbqm] {
    text-align: center;
    font-size: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 0 5px 0 5px;
}

.buttons-flex-container[b-6k9sd2cbqm] {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: space-between;
}

.commentary-editor-button[b-6k9sd2cbqm] {
    padding: 5px 20px 5px 20px;
}

.links-grid-container[b-6k9sd2cbqm] {
    display: grid;
    grid-template-columns: 170px auto 22px;
    gap: 3px;
}

.delete-container[b-6k9sd2cbqm] {
    position: relative;
    width: 300px;
    padding: 10px 20px 10px 20px;
}

.hoverred:hover[b-6k9sd2cbqm] {
    background-color: #DB303A;
    border-radius: 5px;
}

.hoverorange:hover[b-6k9sd2cbqm] {
    background-color: #F7B900;
    border-radius: 5px;
}

.hovergreen:hover[b-6k9sd2cbqm] {
    background-color: #73D673;
    border-radius: 5px;
}
/* /Components/Pages/General/Commentary/Commentary_90_TagSelector.razor.rz.scp.css */
.tags-container[b-o3fr86exw1] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    flex-direction: column;
}
.commentaryeditgrid .tags-container[b-o3fr86exw1] {
    flex-direction: row;
}

.tags-container-sub[b-o3fr86exw1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tags-parent[b-o3fr86exw1] {
    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-o3fr86exw1] {
    min-width: 0;
}

.tags-sub[b-o3fr86exw1] {
    font-size: 10px;
    cursor: pointer;
}

.tags-sub[b-o3fr86exw1]::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-o3fr86exw1] {
        flex-direction: column;
    }

    .commentaryeditgrid .tags-parent[b-o3fr86exw1] {
        min-width: 100px;
    }
}
/* /Components/Pages/General/CustomCarouselEdit.razor.rz.scp.css */
/* --- Carousel Management Window Modern Redesign --- */
.carousel-mgmt-main[b-sus8mnfadn] {
    width: 100%;
    height: 100%;
    padding: 0;
    background: #f6f8fa;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.carousel-mgmt-header-bar[b-sus8mnfadn] {
    background: #fff;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.carousel-mgmt-header-desc[b-sus8mnfadn] {
    font-size: 1rem;
    color: #666;
}

.carousel-mgmt-columns[b-sus8mnfadn] {
    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-sus8mnfadn] {
    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-sus8mnfadn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.carousel-mgmt-count[b-sus8mnfadn] {
    color: #888;
    margin-left: 0.5rem;
    font-size: 1rem;
}

.carousel-mgmt-filter[b-sus8mnfadn] {
    margin-left: auto;
    width: 120px;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    background: #f7fafd;
}

.carousel-mgmt-list[b-sus8mnfadn] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 200px;
    background: transparent;
    border: none;
    padding: 0;
}

.carousel-mgmt-card-item[b-sus8mnfadn] {
    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-sus8mnfadn] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
}

.carousel-mgmt-card-item.dragging[b-sus8mnfadn] {
    opacity: 0.5;
    border: 2px dashed #007bff;
    background: #e9eff9;
}

.carousel-mgmt-drag-handle[b-sus8mnfadn] {
    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-sus8mnfadn] {
    color: #007bff;
}

.carousel-mgmt-thumb[b-sus8mnfadn] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #f6f8fa;
}

.carousel-mgmt-card-item-content[b-sus8mnfadn] {
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
    display: flex;
    flex-direction: column;
}

.carousel-mgmt-card-title[b-sus8mnfadn] {
    font-size: 1rem;
    font-weight: 600;
    color: #163E9F;
}

.carousel-mgmt-card-desc[b-sus8mnfadn] {
    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-sus8mnfadn] {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    gap: 1rem;
}

.carousel-mgmt-card-actions[b-sus8mnfadn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.empty-list-placeholder[b-sus8mnfadn] {
    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-sus8mnfadn] {
    color: #dc3545;
    font-size: 1.3rem;
    margin-left: 0.5rem;
}

.carousel-mgmt-modal-footer[b-sus8mnfadn] {
    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-sus8mnfadn] .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-sus8mnfadn] .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-sus8mnfadn] .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-2yi2a42q0u] {
    display: grid;
    grid-template-columns: 27.1rem auto;
    gap: 1.5rem;
}
    .chart-builder-container .chart-builder-highchart[b-2yi2a42q0u] {
        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-2yi2a42q0u] {
    resize: both;
    overflow: hidden;
    min-width: 320px;
    min-height: 200px;
    position: relative;
    border: 1px dashed transparent;
}
.ssy-chart-wrapper:hover[b-2yi2a42q0u] {
    /* Hint that the corner is draggable. */
    border-color: rgba(22, 62, 159, 0.18);
}
.ssy-chart-wrapper[b-2yi2a42q0u]::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-2yi2a42q0u] {
    margin-bottom: 0.5em;
}
.chart-builder-form[b-2yi2a42q0u] {
    align-self: flex-start;
}

.chart-builder-form > .chart-builder[b-2yi2a42q0u] {
    height: calc(100% - 3em);
    display: grid;
}

.chart-builder > .chart-data-selector[b-2yi2a42q0u]{
    /*min-height: 16rem;*/
}

.chart-builder > div[b-2yi2a42q0u] {
    border: 2px solid #009DC9;
    margin-bottom: 1em;
}
.chart-builder h3.ssy-colour-lw[b-2yi2a42q0u] {
    text-align: center;
    font-size: 1.25em;
}

.chart-builder-measures[b-2yi2a42q0u] {
    display: flex;
    gap: 3px;
}

.chart-builder-measures .ssy-radio-main label[b-2yi2a42q0u] {
    background-color: #009DC9;
    color: white;
}

.chart-builder-measures .ssy-radio-main input:checked + label[b-2yi2a42q0u] {
    background-color: #000061;
    color: white;
}

.chart-builder-action:hover[b-2yi2a42q0u] {
    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-2yi2a42q0u] {
    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-2yi2a42q0u] {
    font-weight: 700;
    font-size: 1.1em;
    color: #009DC9;
}
.chart-builder-nodata p[b-2yi2a42q0u] {
    max-width: 36rem;
    margin: 0;
    line-height: 1.5;
    color: #6B7280;
}

@media (max-width: 900px)  {
    .chart-builder-container[b-2yi2a42q0u] {
        display: block;
    }

        .chart-builder-container .chart-builder-highchart[b-2yi2a42q0u] {
            align-self: baseline;
            overflow: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

    .chart-builder-measures[b-2yi2a42q0u] {
        display: block;
    }
}
/* /Components/Pages/General/CustomCharts/CustomCharts_010_Main.razor.rz.scp.css */
.chart-builder-container[b-2i1pk12fml] {
    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-2i1pk12fml]  .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-2i1pk12fml]  .ssy-chart-wrapper {
    resize: both;
    overflow: hidden;
    min-width: 320px;
    min-height: 200px;
    position: relative;
    border: 1px dashed transparent;
}

    .chart-builder-container[b-2i1pk12fml]  .ssy-chart-wrapper:hover {
        /* Hint that the corner is draggable. */
        border-color: rgba(22, 62, 159, 0.18);
    }

    .chart-builder-container[b-2i1pk12fml]  .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-2i1pk12fml] {
    margin-bottom: 0.5em;
}

.chart-builder-form[b-2i1pk12fml] {
    align-self: flex-start;
}

    .chart-builder-form > .chart-builder[b-2i1pk12fml] {
        height: calc(100% - 3em);
        display: grid;
    }

.chart-builder > .chart-data-selector[b-2i1pk12fml] {
    /*min-height: 16rem;*/
}

.chart-builder > div[b-2i1pk12fml] {
    border: 2px solid #009DC9;
    margin-bottom: 1em;
}

.chart-builder h3.ssy-colour-lw[b-2i1pk12fml] {
    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-2i1pk12fml]  .chart-builder-size,
.chart-builder[b-2i1pk12fml]  .chart-builder-actions,
.chart-builder[b-2i1pk12fml]  .chart-date-selector,
.chart-builder[b-2i1pk12fml]  .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-2i1pk12fml]  .chart-builder-actions-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 6px 8px 10px;
}

.chart-builder[b-2i1pk12fml]  .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-2i1pk12fml]  .chart-builder-actions-btn:hover {
    background-color: #163E9F;
}

.chart-builder[b-2i1pk12fml]  .chart-builder-actions-btn--reset {
    background-color: #DB303A;
}

.chart-builder[b-2i1pk12fml]  .chart-builder-actions-btn--reset:hover {
    background-color: #A81F27;
}
.chart-builder[b-2i1pk12fml]  h3.ssy-colour-lw {
    text-align: center;
    font-size: 1.25em;
}
.chart-builder[b-2i1pk12fml]  .chart-builder-action:hover {
    cursor: pointer;
    color: white;
    background-color: #163E9F;
    border-radius: 5px;
}

.chart-builder-measures[b-2i1pk12fml] {
    display: flex;
    gap: 3px;
}

    .chart-builder-measures .ssy-radio-main label[b-2i1pk12fml] {
        background-color: #009DC9;
        color: white;
    }

    .chart-builder-measures .ssy-radio-main input:checked + label[b-2i1pk12fml] {
        background-color: #000061;
        color: white;
    }

.chart-builder-action:hover[b-2i1pk12fml] {
    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-2i1pk12fml]  .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-2i1pk12fml]  .chart-builder-nodata-title {
    font-weight: 700;
    font-size: 1.1em;
    color: #009DC9;
}

.chart-builder-container[b-2i1pk12fml]  .chart-builder-nodata p {
    max-width: 36rem;
    margin: 0;
    line-height: 1.5;
    color: #6B7280;
}

@media (max-width: 900px) {
    .chart-builder-container[b-2i1pk12fml] {
        display: block;
    }

        .chart-builder-container[b-2i1pk12fml]  .chart-builder-highchart {
            align-self: baseline;
            overflow: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

    .chart-builder-measures[b-2i1pk12fml] {
        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-2i1pk12fml] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

.cc-reset-modal[b-2i1pk12fml] {
    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-2i1pk12fml] {
    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-2i1pk12fml] {
    background: none;
    border: none;
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.cc-reset-modal-body[b-2i1pk12fml] {
    padding: 14px 16px;
    color: #405864;
    font-size: 0.9rem;
}

.cc-reset-modal-body p[b-2i1pk12fml] {
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.cc-reset-modal-note[b-2i1pk12fml] {
    color: #405864;
    font-style: italic;
}

.cc-reset-modal-footer[b-2i1pk12fml] {
    padding: 8px 14px;
    border-top: 1px solid #E9EFF9;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.cc-reset-btn-tab[b-2i1pk12fml] {
    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-2i1pk12fml] {
    background-color: #009DC9;
}

.cc-reset-btn-cancel[b-2i1pk12fml] {
    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-2i1pk12fml] {
    background-color: #F1F5FB;
}

.cc-reset-btn-confirm[b-2i1pk12fml] {
    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-2i1pk12fml] {
    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-2i1pk12fml]  .cc-chart-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 4px 0 6px;
}

.chart-builder-container[b-2i1pk12fml]  .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-2i1pk12fml]  .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-2i1pk12fml]  .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-0yq5dt8d67] {
    padding: 0.6rem 0.8rem 0.8rem;
}

.sprd-hint[b-0yq5dt8d67] {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: #405864;
}

.sprd-create-btn[b-0yq5dt8d67] {
    padding: 4px 14px;
}

.sprd-list-title[b-0yq5dt8d67] {
    margin: 0.9rem 0 0.3rem;
    font-size: 0.9rem;
    color: #163E9F;
}

.sprd-list-empty[b-0yq5dt8d67] {
    font-size: 0.8rem;
    color: #405864;
    font-style: italic;
}

.sprd-list[b-0yq5dt8d67] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sprd-list-item[b-0yq5dt8d67] {
    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-0yq5dt8d67] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.sprd-list-edit[b-0yq5dt8d67] {
    color: #163E9F;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

    .sprd-list-edit:hover[b-0yq5dt8d67] {
        color: #0087CB;
    }

.sprd-list-remove[b-0yq5dt8d67] {
    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-0yq5dt8d67] {
        background: #DB303A;
        color: #ffffff;
    }

/* ---- Create spread popup ---- */

.sprd-overlay[b-0yq5dt8d67] {
    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-0yq5dt8d67] {
    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-0yq5dt8d67] {
    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-0yq5dt8d67] {
    border: none;
    background: none;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.sprd-leg[b-0yq5dt8d67] {
    border-bottom: 1px solid #B5CBD6;
    padding: 0.6rem 0.9rem 0.8rem;
}

.sprd-leg-header[b-0yq5dt8d67] {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin-bottom: 0.4rem;
}

    .sprd-leg-header h4[b-0yq5dt8d67] {
        margin: 0;
        color: #163E9F;
        font-size: 1rem;
        white-space: nowrap;
    }

.sprd-leg-pick[b-0yq5dt8d67] {
    font-size: 1.05rem;
    color: #405864;
    font-style: italic;
}

.sprd-leg-pick-done[b-0yq5dt8d67] {
    color: #163E9F;
    font-style: normal;
    font-weight: 700;
    font-size: 1.15rem;
}


.sprd-leg-selectors[b-0yq5dt8d67] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.sprd-selector-caption[b-0yq5dt8d67] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #009DC9;
    margin-bottom: 2px;
}

.sprd-popup-footer[b-0yq5dt8d67] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
}

.sprd-preview-label[b-0yq5dt8d67] {
    font-size: 0.9rem;
    color: #405864;
    margin-right: 0.4rem;
}

.sprd-preview-title[b-0yq5dt8d67] {
    font-weight: 700;
    color: #163E9F;
}

.sprd-preview-hint[b-0yq5dt8d67] {
    font-size: 0.85rem;
    color: #405864;
    font-style: italic;
}

.sprd-create-chart:disabled[b-0yq5dt8d67] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .sprd-leg-selectors[b-0yq5dt8d67] {
        display: block;
    }
}
/* /Components/Pages/General/Dashboard/Dashboard_00.razor.rz.scp.css */
/* container */

.ssymarkets-dashboard-container .dashboard-chartsection[b-yj00zjcu9b] {
    display: grid;
    grid-template-columns: 3em auto;
}

.ssymarkets-dashboard-container .dashboard-header[b-yj00zjcu9b] {
    writing-mode: vertical-lr;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ssymarkets-dashboard-container .dashboard-header a[b-yj00zjcu9b],
.ssymarkets-dashboard-container .dashboard-header a h2[b-yj00zjcu9b],
.ssymarkets-dashboard-container .dashboard-header div[b-yj00zjcu9b],
.ssymarkets-dashboard-container .dashboard-header div h2[b-yj00zjcu9b]{
    color: inherit;
}

.ssymarkets-dashboard-container .dashboard-content[b-yj00zjcu9b] {
    display: flex;
    flex-direction: column;
}

.ssymarkets-dashboard-container .dashboard-content:not(.contentType-table)[b-yj00zjcu9b]{
    justify-content: space-between;
}

.ssymarkets-dashboard-container .dashboard-row .dashboard-content:first-child[b-yj00zjcu9b] {
    padding-left: 0.5rem;
}

.ssymarkets-dashboard-container .dashboard-content[b-yj00zjcu9b]  .HighChart-Base {
    
}

/* border top classes */
.dashboard-chartsection .dashboard-header[b-yj00zjcu9b],
.dashboard-chartsection .dashboard-row[b-yj00zjcu9b] {
    border-top: 7px solid #000000;
}

.dashboard-chartsection .dashboard-header.ssy-colour-dw[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-dw"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #000061; /* Simpson Blue */
}

.dashboard-chartsection .dashboard-header.ssy-colour-brightblue-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-brightblue-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #0087CB; /* Bright Blue */
}

.dashboard-chartsection .dashboard-header.ssy-colour-vividpink-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-vividpink-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #EB3871; /* Vivid Pink */
}

.dashboard-chartsection .dashboard-header.ssy-colour-tealgreen-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-tealgreen-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #01A39E; /* Teal Green */
}

.dashboard-chartsection .dashboard-header.ssy-colour-goldenyellow-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-goldenyellow-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #F7A506; /* Golden Yellow */
}

.dashboard-chartsection .dashboard-header.ssy-colour-aquamarine-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-aquamarine-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #24DEBD; /* Aquamarine */
}

.dashboard-chartsection .dashboard-header.ssy-colour-brightorange-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-brightorange-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #FF670F; /* Bright Orange */
}

.dashboard-chartsection .dashboard-header.ssy-colour-royalpurple-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-royalpurple-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #752FD0; /* Royal Purple */
}

.dashboard-chartsection .dashboard-header.ssy-colour-lemonyellow-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-lemonyellow-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #FFD025; /* Lemon Yellow */
}

.dashboard-chartsection .dashboard-header.ssy-colour-cyanblue-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-cyanblue-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #009DCA; /* Cyan Blue */
}

.dashboard-chartsection .dashboard-header.ssy-colour-slategray-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-slategray-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #405864; /* Slate Gray */
}

.dashboard-chartsection .dashboard-header.ssy-colour-lightblue-gray-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-lightblue-gray-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #B5CBD6; /* Light Blue-Gray */
}

.dashboard-chartsection .dashboard-header.ssy-colour-crimsonred-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-crimsonred-white"] .dashboard-row[b-yj00zjcu9b] {
    border-top-color: #DB303A; /* Crimson Red */
}

.dashboard-chartsection .dashboard-header.ssy-colour-olivegreen-white[b-yj00zjcu9b],
.dashboard-chartsection[data-headerColor*="ssy-colour-olivegreen-white"] .dashboard-row[b-yj00zjcu9b] {
    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-yj00zjcu9b] {
    opacity: 0;
    pointer-events: none;
}

.ssymarkets-dashboard-container.is-ready .dashboard-chartsection[b-yj00zjcu9b] {
    opacity: 1;
    transition: opacity 0.15s ease-in;
}

.loading-overlay[b-yj00zjcu9b] {
    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-yj00zjcu9b]::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-yj00zjcu9b] .tableRowHeaderText a {
    color:white;
}

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


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


[b-yj00zjcu9b] .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-yj00zjcu9b] {
        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-yj00zjcu9b]::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none; /* Chrome / Safari / WebKit */
        }
}
/* /Components/Pages/General/LearningHub/DemoClientAccess.razor.rz.scp.css */
.client-demo-table[b-1d6cj8to43] {
    width: 100%;
}
.client-demo-table .td[b-1d6cj8to43] {
    padding: 15px;
}
/* /Components/Pages/General/LearningHub/LearningHub.razor.rz.scp.css */
/* /Components/Pages/General/LearningHub/LearningHubVideo.razor.rz.scp.css */
.theatre-container[b-97fw1qrzis] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 94vh;
    background-color: #f5f7fa;
}

.page-header[b-97fw1qrzis] {
    width: 100%;
    max-width: 1200px;
    margin-bottom: 0rem;
    margin-top: 1rem;
}

.page-header h2[b-97fw1qrzis] {
    color: #2c3e50;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.page-header hr[b-97fw1qrzis] {
    border: none;
    height: 2px;
    background: linear-gradient(to right, #007bff, transparent);
}


.video-container[b-97fw1qrzis] {
    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-97fw1qrzis] {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #000;
}

@media (max-width: 768px) {
    .video-container[b-97fw1qrzis] {
        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-ijssdh8q99] {
    background-color: #405864;
    color: #F0F0F0;
    border: 1px solid gray;
    border-radius: 12px;
}

.req-access-label[b-ijssdh8q99] {
    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-dhd6n42hky] {
    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-dhd6n42hky] {
        padding: 0 0.5rem;
    }
}

/* ── Page heading ────────────────────────────────────────── */
.mp-page-heading[b-dhd6n42hky] {
    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-dhd6n42hky] {
    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-dhd6n42hky]  .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-dhd6n42hky] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--ssy-colour-main-deep-blue);
    margin-bottom: 1rem;
}

.mp-tab[b-dhd6n42hky] {
    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-dhd6n42hky],
    a.mp-tab:hover[b-dhd6n42hky],
    a.mp-tab:focus[b-dhd6n42hky],
    a.mp-tab:visited[b-dhd6n42hky] {
        text-decoration: none;
    }

    .mp-tab:hover[b-dhd6n42hky] {
        background: #E9EFF9;
        color: var(--ssy-colour-main-simpson-blue);
    }

    .mp-tab--active[b-dhd6n42hky],
    a.mp-tab--active:hover[b-dhd6n42hky] {
        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-dhd6n42hky] {
        display: none;
    }
}

/* ── Drafts inline dropdown ──────────────────────────────── */
/* In MarketPost_100_Create — needs ::deep */
.mp-page-container[b-dhd6n42hky]  .mp-drafts-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-drafts-toggle:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    background: #EEF2FC;
}

.mp-page-container[b-dhd6n42hky]  .mp-drafts-chevron {
    margin-left: auto;
    font-size: 0.6rem;
    opacity: 0.6;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-draft-item:last-child {
    border-bottom: none;
}

.mp-page-container[b-dhd6n42hky]  .mp-draft-item:hover {
    background: #f5f8fe;
}

.mp-page-container[b-dhd6n42hky]  .mp-draft-item--active {
    background: #f3f7e8;
    border-left: 3px solid var(--ssy-colour-palette-olive-green);
}

.mp-page-container[b-dhd6n42hky]  .mp-draft-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-create-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-stepper-item--active {
    opacity: 1;
}

.mp-page-container[b-dhd6n42hky]  .mp-stepper-item--done {
    opacity: 0.85;
}

.mp-page-container[b-dhd6n42hky]  .mp-stepper-item--done::after {
    background: var(--ssy-colour-main-deep-blue) !important;
    opacity: 0.6;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-stepper-item--active .mp-stepper-circle {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

.mp-page-container[b-dhd6n42hky]  .mp-stepper-item--done .mp-stepper-circle {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-posttype-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0.75rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-template-picker-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    flex-wrap: wrap;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-template-banner--active .mp-template-picker-select {
    border-color: var(--ssy-colour-palette-olive-green);
    color: #3d4f00;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-zone-card {
    flex: 0 1 260px;
    max-width: 100%;
    max-height: 18rem;
    overflow-y: auto;
}

@media (max-width: 540px) {
    .mp-page-container[b-dhd6n42hky]  .mp-zone-card {
        flex-basis: 100%;
    }
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-zone-card--has-items {
    border-color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-zone-card--restricted {
    background: #f9f9f9;
    border-color: #dde5ea;
    opacity: 0.7;
}

.mp-page-container[b-dhd6n42hky]  .mp-zone-card--restricted .mp-zone-header {
    color: #9cb0bb;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-zone-item-pick:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-zone-item-remove:hover {
    color: var(--ssy-colour-palette-crimson-red);
    background: #fde8e8;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-prices-date-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-prices-date {
    max-width: 11rem;
    font-size: 0.78rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-prices-subtitle {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-prices-group-btn:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    background: #f5f8fe;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-prices-group-btn:hover .mp-prices-view-hint {
    text-decoration: underline;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-route-modal-subtitle {
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .mp-route-modal-subtitle strong {
    color: var(--ssy-colour-main-simpson-blue);
}

/* Routes modal list (name + code per row). */
.mp-page-container[b-dhd6n42hky]  .mp-route-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 60vh;
    overflow-y: auto;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-route-modal-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-prices-group-notes {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .mp-prices-routes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-prices-route-name {
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-prices-route-code {
    font-size: 0.66rem;
    color: var(--ssy-colour-palette-slate-gray);
    font-family: monospace;
}

.mp-page-container[b-dhd6n42hky]  .mp-prices-route-uom {
    font-size: 0.66rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-content-area {
    border: 1px solid var(--ssy-colour-main-deep-blue);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-content-type-select:focus {
    border-color: rgba(255,255,255,0.7);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Variant: two controls side-by-side (e.g. Date + Author) */
.mp-page-container[b-dhd6n42hky]  .mp-form-row--inline {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Each column inside an --inline row */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-inline-group--author {
    flex: 0 0 auto;
    width: 210px;
}

.mp-page-container[b-dhd6n42hky]  .mp-form-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-form-input,
.mp-page-container[b-dhd6n42hky]  .mp-form-select,
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-form-input::placeholder,
.mp-page-container[b-dhd6n42hky]  .mp-form-textarea::placeholder {
    color: var(--ssy-colour-palette-light-bluegray);
    font-style: italic;
}

.mp-page-container[b-dhd6n42hky]  .mp-form-input:focus,
.mp-page-container[b-dhd6n42hky]  .mp-form-select:focus,
.mp-page-container[b-dhd6n42hky]  .mp-form-textarea:focus {
    outline: 2px solid var(--ssy-colour-main-deep-blue);
    outline-offset: 1px;
}

.mp-page-container[b-dhd6n42hky]  .mp-form-hint {
    font-size: 0.72rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-section {
    margin-top: 1.2rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-channel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-channel-entry--locked {
    opacity: 0.6;
}

    .mp-page-container[b-dhd6n42hky]  .mp-channel-entry--locked .mp-channel-toggle,
    .mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-channel-row--inline {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    cursor: default;
}

.mp-page-container[b-dhd6n42hky]  .mp-channel-toggle {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-channel-from-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-channel-names-toggle input {
    cursor: pointer;
}

/* ── Distribution list (Recipients section) ──────────────────────────────── */

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-deliv-panes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-dist-subheader.mp-dist-member--deselected {
    opacity: 1;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-dept-member {
    position: relative;
    padding-left: 2.6rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-dept-member .mp-dist-member-name {
    font-weight: 500;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-dept-action:disabled {
    opacity: 0.5;
    cursor: default;
}

    .mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-dept-action--clear:hover:not(:disabled) {
        background: var(--ssy-colour-palette-crimson-red);
        color: #fff;
    }

    .mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-test-pick-btn,
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-test-picker .mp-dist-member-info {
    flex: 1 1 auto;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-test-results {
    max-height: 320px;
}

.mp-page-container[b-dhd6n42hky]  .mp-test-recipients {
    max-height: 170px;
}

/* Chosen-recipients header: count on the left, "Remove all" reset action on the right */
.mp-page-container[b-dhd6n42hky]  .mp-test-recipients-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

    .mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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 / Compass list — "added" badge, remove button, and add picker */
.mp-page-container[b-dhd6n42hky]  .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;
}

/* A list (or preview variant) that gets its own text/links from Admin → List Replacements */
.mp-page-container[b-dhd6n42hky]  .mp-variant-badge {
    margin-left: 0.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #006f8e;
    background: #E0F4FA;
    border: 1px solid #9fd8ea;
    border-radius: 8px;
    padding: 0.02rem 0.4rem;
    white-space: nowrap;
}

/* ── List Replacements admin (_987): token/value editor ── */
.mp-page-container[b-dhd6n42hky]  .mp-lr-intro {
    font-size: 0.78rem;
    color: #405864;
    margin: 0 0 0.6rem;
    line-height: 1.45;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-token {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.7rem;
    color: #163E9F;
    background: #E9EFF9;
    border: 1px solid #B5CBD6;
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
}

.mp-page-container[b-dhd6n42hky]  button.mp-lr-token {
    cursor: pointer;
}

.mp-page-container[b-dhd6n42hky]  button.mp-lr-token:hover {
    background: #163E9F;
    color: #FFFFFF;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-editor {
    padding: 0.2rem 1rem 0.75rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-channel {
    border: 1px solid #B5CBD6;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-channel-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: #E9EFF9;
    border-bottom: 1px solid #B5CBD6;
    font-size: 0.8rem;
    font-weight: 600;
    color: #163E9F;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-channel-body {
    padding: 0.5rem 0.6rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-row {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr auto;
    gap: 0.4rem;
    align-items: start;
    margin-bottom: 0.4rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-row input {
    font-family: Consolas, "Courier New", monospace;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-remove {
    border: none;
    background: none;
    color: #DB303A;
    padding: 0.3rem;
    cursor: pointer;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-hint {
    font-size: 0.7rem;
    color: #647c87;
    margin-top: 0.3rem;
    line-height: 1.4;
}

.mp-page-container[b-dhd6n42hky]  .mp-lr-summary {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.72rem;
    color: #405864;
}

/* ── Trigonal / Compass Lists admin (_980, _981): searchable list picker in the Add popup ── */
.mp-page-container[b-dhd6n42hky]  .mp-dl-picker-meta {
    font-size: 0.72rem;
    color: #647c87;
    margin: 0.35rem 0 0.3rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-dl-picker {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 16rem;
    overflow-y: auto;
}

.mp-page-container[b-dhd6n42hky]  .mp-dl-pick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.6rem;
    border: 1px solid #E9EFF9;
    border-radius: 4px;
    background: #f5f8fe;
    font-size: 0.8rem;
    cursor: pointer;
}

.mp-page-container[b-dhd6n42hky]  .mp-dl-pick:hover {
    border-color: #B5CBD6;
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-dl-pick--selected,
.mp-page-container[b-dhd6n42hky]  .mp-dl-pick--selected:hover {
    border-color: #163E9F;
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-dl-pick-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
    color: #163E9F;
}

.mp-page-container[b-dhd6n42hky]  .mp-dl-pick-code {
    font-weight: 400;
    color: #647c87;
}

.mp-page-container[b-dhd6n42hky]  .mp-dl-pick-book {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #647c87;
}

/* ── Post type picker (MarketPostTypePicker): searchable post type field in the admin popups ── */
.mp-page-container[b-dhd6n42hky]  .mp-ptp-box {
    position: relative;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-box input {
    padding-right: 1.8rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-clear {
    position: absolute;
    top: 50%;
    right: 0.3rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding: 0.1rem;
    border: none;
    background: none;
    color: #647c87;
    cursor: pointer;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-clear:hover {
    color: #163E9F;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 14rem;
    margin-top: 0.3rem;
    overflow-y: auto;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.3rem 0.6rem;
    border: 1px solid #E9EFF9;
    border-radius: 4px;
    background: #f5f8fe;
    font-size: 0.8rem;
    cursor: pointer;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-item:hover,
.mp-page-container[b-dhd6n42hky]  .mp-ptp-item--active {
    border-color: #B5CBD6;
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-item--selected {
    border-color: #163E9F;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
    color: #163E9F;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-code {
    font-weight: 400;
    color: #647c87;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-group {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #647c87;
}

.mp-page-container[b-dhd6n42hky]  .mp-ptp-empty {
    padding: 0.3rem 0;
    font-size: 0.78rem;
    color: #647c87;
}

.mp-page-container[b-dhd6n42hky]  .mp-dl-popup-error {
    padding: 0 1rem 0.75rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-test-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-test-chip--author {
    border-color: var(--ssy-colour-main-deep-blue);
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-test-add-btn {
    border-style: dashed;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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 / Compass list row */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-dist-people-btn:hover {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

@media (max-width: 720px) {
    .mp-page-container[b-dhd6n42hky]  .mp-deliv-pane {
        flex-basis: 100%;
    }
}

.mp-page-container[b-dhd6n42hky]  .mp-dist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-dist-entry--active {
    border-color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-dist-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.15rem 0.6rem 0.15rem 0;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-dist-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-dist-desc {
    font-size: 0.75rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-top: 2px;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-dist-expand-btn:hover {
        background: #e8f0fe;
        color: var(--ssy-colour-main-deep-blue);
    }

/* Scrollable member list */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-dist-member:hover {
        background: #e8f0fe;
    }

.mp-page-container[b-dhd6n42hky]  .mp-dist-member--deselected {
    opacity: 0.45;
}

.mp-page-container[b-dhd6n42hky]  .mp-dist-member-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-badge--staff {
    background: #EAF3EC;
    border-color: #b8d6c0;
    color: #2f6b42;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-preview-date {
    font-size: 0.75rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-preview-summary {
    font-size: 0.82rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-bottom: 0.6rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-copy-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-step-next-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-step-next-hint {
    font-size: 0.72rem;
    color: var(--ssy-colour-palette-crimson-red);
    text-align: right;
}

/* ── Send row ────────────────────────────────────────────── */
.mp-page-container[b-dhd6n42hky]  .mp-send-row {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding-top: 1rem;
}

/* Post-send copy panel */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-send-success-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-send-success-title {
    font-size: 1rem;
    font-weight: 700;
    color: #3d5200;
    letter-spacing: 0.01em;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-test-sent-banner--issue {
    background: linear-gradient(135deg, #fdf4e3 0%, #fbe9c7 100%);
    border-color: #B7791F;
    border-left-color: #B7791F;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-test-sent-banner--issue .mp-test-sent-title,
.mp-page-container[b-dhd6n42hky]  .mp-test-sent-banner--issue .mp-test-sent-meta {
    color: #8a5a12;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem 0 1.5rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-meta {
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
    margin-top: 2px;
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-search-outer:focus-within {
    border-color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-search::placeholder {
    color: var(--ssy-colour-palette-light-bluegray);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-search-clear:hover {
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-active-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-date-group {
    margin-bottom: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-date-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    margin-top: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-date-line {
    flex: 1;
    height: 1px;
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-card:hover {
    box-shadow: 0 3px 10px rgba(22, 62, 159, 0.09);
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-card--clickable {
    cursor: pointer;
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-card--clickable:hover {
    border-left-color: var(--ssy-colour-main-simpson-blue);
}

/* ── Post detail popup ───────────────────────────────────── */
.mp-detail-wrap[b-dhd6n42hky] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
    max-height: 75vh;
    overflow-y: auto;
}

.mp-detail-html[b-dhd6n42hky] {
    font-size: 0.85rem;
    line-height: 1.7;
    color: #1a2b3c;
}

.mp-detail-html p[b-dhd6n42hky] { margin: 0 0 0.5rem; }

.mp-detail-loading[b-dhd6n42hky] {
    font-size: 0.82rem;
    color: var(--ssy-colour-palette-slate-gray);
    padding: 0.5rem 0;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-card-header-badges {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-type-badge {
    flex-shrink: 0;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-avatar--blue   { background: #e0e7ff; color: #3730a3; }
.mp-page-container[b-dhd6n42hky]  .mp-feed-avatar--green  { background: #dcfce7; color: #166534; }
.mp-page-container[b-dhd6n42hky]  .mp-feed-avatar--amber  { background: #fef3c7; color: #92400e; }
.mp-page-container[b-dhd6n42hky]  .mp-feed-avatar--purple { background: #f5f3ff; color: #6d28d9; }
.mp-page-container[b-dhd6n42hky]  .mp-feed-avatar--teal   { background: #ccfbf1; color: #0f766e; }
.mp-page-container[b-dhd6n42hky]  .mp-feed-avatar--grey   { background: #E9EFF9; color: var(--ssy-colour-palette-slate-gray); }

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-time {
    white-space: nowrap;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-card-tags .mp-tag-chip {
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-filter-wrap {
    position: relative;
    flex-shrink: 0;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-filter-btn:hover {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-filter-chevron {
    font-size: 0.6rem;
    opacity: 0.6;
    margin-left: 0.1rem;
}

/* ── Filter dropdown panel ───────────────────────────────── */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-filter-clear-link:hover {
    color: var(--ssy-colour-palette-crimson-red);
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-filter-scroll {
    overflow-y: auto;
    max-height: 380px;
    padding: 0.4rem 0.6rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-feed-filter-scroll::-webkit-scrollbar { width: 4px; }
.mp-page-container[b-dhd6n42hky]  .mp-feed-filter-scroll::-webkit-scrollbar-thumb {
    background: #E9EFF9;
    border-radius: 2px;
}

/* Group label inside the type filter */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-filter-item:hover {
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-feed-meta-author:hover {
    color: var(--ssy-colour-main-deep-blue);
    text-decoration: underline;
}

/* ── Shared placeholder panel ────────────────────────────── */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-placeholder-panel--inline {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.5rem 0.8rem;
    }

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-tab:hover {
    background: #E9EFF9;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tab--active {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tab--active .mp-admin-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ── Admin panel ─────────────────────────────────────────── */
.mp-page-container[b-dhd6n42hky]  .mp-admin-panel {
    padding: 0.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-table {
    width: 100%;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-empty {
    color: #a0aab4;
    font-style: italic;
    text-align: center;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-desc {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-actions {
    width: 2.5rem;
    text-align: center;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-table .edit:hover {
    background-color: #E9EFF9;
    border-radius: 4px;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-filter-select {
    min-width: 180px;
    width: 100%;
    flex: 1;
}

/* Email link in the Authors table */
.mp-page-container[b-dhd6n42hky]  .mp-admin-email-link {
    color: var(--ssy-colour-main-deep-blue);
    text-decoration: none;
    font-size: 0.82rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-email-link:hover {
    text-decoration: underline;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-na {
    color: #9cb0bb;
}

/* Small reference id after a name, e.g. an attachment type's "#86" */
.mp-page-container[b-dhd6n42hky]  .mp-admin-ref-id {
    margin-left: 0.3rem;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: #9cb0bb;
    white-space: nowrap;
}

.mp-page-container[b-dhd6n42hky]  .ssy-table-dw tbody tr:hover .mp-admin-ref-id {
    color: rgba(255, 255, 255, 0.75);
}

/* Identity user ID cell in the Authors table — muted in normal state, readable on row hover */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-form {
    display: grid;
    /* minmax(0, …) lets the field column shrink to the popup: a plain 1fr never goes narrower than its
       widest content, so a select with a long option (Address Book) pushed the form past the popup's edge */
    grid-template-columns: auto minmax(0, 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-dhd6n42hky]  .mp-admin-form label:not(.ssy-custom-checkbox-container):not([style]) {
    padding-top: 0.35rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-form-short {
    max-width: 100px;
}

/* ── Staff / Client segmented switch (admin popups) ──────── */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-seg-btn + .mp-admin-seg-btn {
    border-left: 1px solid var(--ssy-colour-palette-light-bluegray);
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-seg-btn:hover:not(:disabled):not(.mp-admin-seg-btn--on) {
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-seg-btn--on {
    background: var(--ssy-colour-main-deep-blue);
    color: #fff;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-seg-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

/* ── Post Type role picker ───────────────────────────────── */
/* Search box above a checkbox picker. Deliberately a sibling of .mp-admin-role-picker rather than a
   child: the picker is a 220px scroll box, and a search that scrolls away with the list it filters is
   worse than none. */
.mp-page-container[b-dhd6n42hky]  .mp-admin-role-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ssy-colour-palette-light-bluegray);
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-role-search:focus-within {
    border-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-role-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.78rem;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-role-search-input::placeholder {
    color: var(--ssy-colour-palette-light-bluegray);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-role-picker::-webkit-scrollbar { width: 4px; }
.mp-page-container[b-dhd6n42hky]  .mp-admin-role-picker::-webkit-scrollbar-thumb {
    background: var(--ssy-colour-palette-light-bluegray);
    border-radius: 2px;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-role-item:hover {
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-role-item--selected {
    background: #EEF2FC;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-date-hint {
    font-size: 0.7rem;
    color: #9cb0bb;
    margin-top: 0.3rem;
    line-height: 1.5;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-link-type-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.2rem 0;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-admin-amount-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-amount-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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;
}

/* Template admin — delivery defaults (channels, then each channel's recipient groups, then a
   group's list picker, which reuses .mp-admin-role-picker as its scroll box) */
.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-box {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #B5CBD6;
    border-radius: 6px;
    background: #f9fafb;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-groups {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 0.3rem 1.3rem;
    padding-left: 0.6rem;
    border-left: 2px solid #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-group-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-group-row .mp-admin-role-item {
    flex: 1;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-choose {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #163E9F;
    cursor: pointer;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-choose:hover {
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-sub {
    margin: 0.1rem 0 0.35rem 1.5rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-sub-actions {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-link {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: #163E9F;
    text-decoration: underline;
    cursor: pointer;
}

/* A ticked group with nothing in it ticked — the save is refused until it's fixed */
.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-empty {
    color: #DB303A;
}

.mp-page-container[b-dhd6n42hky]  .mp-admin-tdel-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

/* ── Scheduling row ──────────────────────────────────────── */
.mp-page-container[b-dhd6n42hky]  .mp-schedule-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Timezone selector row */
.mp-page-container[b-dhd6n42hky]  .mp-schedule-tz-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-schedule-tz-select-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-schedule-tz-select {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-schedule-confirmation-local strong {
    font-weight: 700;
}

.mp-page-container[b-dhd6n42hky]  .mp-schedule-date-only-note {
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
    font-style: italic;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-schedule-option input[type="radio"] {
    display: none;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-schedule-option:hover path {
    fill: var(--ssy-colour-main-deep-blue) !important;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-schedule-option--active path,
.mp-page-container[b-dhd6n42hky]  .mp-schedule-option--active:hover path {
    fill: #fff !important;
}

.mp-page-container[b-dhd6n42hky]  .mp-schedule-inputs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.mp-page-container[b-dhd6n42hky]  .mp-schedule-date,
.mp-page-container[b-dhd6n42hky]  .mp-schedule-time {
    width: auto;
    font-size: 0.82rem;
}

/* ── Drag handle (Link and File zone items) ──────────────── */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-zone-item:hover .mp-zone-drag-handle {
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .mp-zone-item:active .mp-zone-drag-handle {
    cursor: grabbing;
}

/* Compact status pill replacing the old full-text label */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-zone-item-status--url {
    background: #e0f4fb;
    color: #007aab;
    border: 1px solid #b0dff0;
}

.mp-page-container[b-dhd6n42hky]  .mp-zone-item-status--uploaded {
    background: #f3f7e8;
    color: #3d5200;
    border: 1px solid #c8de90;
}

/* ── Link form (inside content area) ────────────────────── */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-file-form {
    display: flex;
    flex-direction: column;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-file-form .uploader-header {
    display: none;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-file-form .confirm-panel {
    width: 100%;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0;
    border-radius: 6px;
}

.mp-page-container[b-dhd6n42hky]  .mp-file-form .confirm-title {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-file-form .metadata-table {
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
}

    .mp-page-container[b-dhd6n42hky]  .mp-file-form .metadata-table th,
    .mp-page-container[b-dhd6n42hky]  .mp-file-form .metadata-table td {
        padding: 0.28rem 0.5rem;
    }

.mp-page-container[b-dhd6n42hky]  .mp-file-form .upload-status {
    margin-top: 0;
    padding: 0.6rem 0.75rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-file-form .file-details {
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-file-form .action-buttons {
    margin-top: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-file-form .upload-icon {
    font-size: 2rem;
    margin-bottom: 0.4rem;
}

/* ── Tag chip (used in feed cards + filter pills) ────────── */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-tag-tree-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Shared button reset & base */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-tag-tree-node--child {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
}

/* Hover */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-email-from-row {
    display: flex;
    gap: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-email-checks-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 0.35rem 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-email-check-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 180px;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-email-body-section {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-email-split-wrap {
    display: flex;
    gap: 0.5rem;
    height: 380px;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-email-json-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 1rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-email-json-field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-controls {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-control--right {
    margin-left: auto;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-control--grow {
    flex: 1 1 460px;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-select {
    min-width: 260px;
}

/* The post dropdown is the widest control */
.mp-page-container[b-dhd6n42hky]  .mp-an-select--wide {
    width: 100%;
    min-width: 460px;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-hint {
    color: #6b7c88;
    font-style: italic;
    padding: 0.75rem 0;
}

/* KPI strip */
.mp-page-container[b-dhd6n42hky]  .mp-an-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0.5rem 0 1.25rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
}

.mp-page-container[b-dhd6n42hky]  .mp-an-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 62, 159, 0.10);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-kpi-unit {
    font-size: 1rem;
    font-weight: 700;
    margin-left: 1px;
    opacity: 0.7;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-kpi--blue  { --accent: var(--ssy-colour-main-deep-blue); --accent-soft: #E9EFF9; }
.mp-page-container[b-dhd6n42hky]  .mp-an-kpi--green { --accent: #2E9E5B; --accent-soft: #E8F6EE; }
.mp-page-container[b-dhd6n42hky]  .mp-an-kpi--gold  { --accent: #B5852A; --accent-soft: #FAF1DD; }
.mp-page-container[b-dhd6n42hky]  .mp-an-kpi--tan   { --accent: #867754; --accent-soft: #F2EFE7; }
.mp-page-container[b-dhd6n42hky]  .mp-an-kpi--red   { --accent: #C0392B; --accent-soft: #FBE6E3; }
.mp-page-container[b-dhd6n42hky]  .mp-an-kpi--slate { --accent: #51606B; --accent-soft: #EDF1F3; }
.mp-page-container[b-dhd6n42hky]  .mp-an-kpi--unsub { --accent: #7E5AA2; --accent-soft: #F1ECF7; }

/* Background-refresh indicator */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-viewbar .mp-an-channel-tabs {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-sent-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-sent-link:hover {
    background: #E9EFF9;
    border-color: #163E9F;
    text-decoration: none;
}

/* How many recipients got this version of the email (list replacements split the send). */
.mp-page-container[b-dhd6n42hky]  .mp-an-sent-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: #405864;
    background: #E9EFF9;
    border-radius: 8px;
    padding: 0.02rem 0.4rem;
}

/* The per-recipient variant is icon-only and sits in a table cell. */
.mp-page-container[b-dhd6n42hky]  .mp-an-sent-link--row {
    padding: 0.15rem 0.35rem;
    border-color: transparent;
    background: transparent;
    color: #405864;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-audience-dot--internal { background: #163E9F; }
.mp-page-container[b-dhd6n42hky]  .mp-an-audience-dot--external { background: #009DC9; }

/* Explanatory footnote under an analytics table. */
.mp-page-container[b-dhd6n42hky]  .mp-an-audience-note {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    line-height: 1.5;
    color: #405864;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-channel-tab:hover {
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-status--bad {
    background: #FBE6E3;
    color: #B0281B;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-status--read {
    background: #E8F6EE;
    color: #1E7A45;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-status--delivered {
    background: #E9EFF9;
    color: var(--ssy-colour-main-deep-blue);
}

.mp-page-container[b-dhd6n42hky]  .mp-an-status--sent {
    background: #FAF1DD;
    color: #8A6410;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-status--pending {
    background: #EEF2F5;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .mp-an-status--unsub {
    background: #F1ECF7;
    color: #7E5AA2;
}

/* Unsubscribed rows are informational only — not expandable */
.mp-page-container[b-dhd6n42hky]  .mp-an-job-row--static {
    cursor: default;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-job-row--static:hover {
    background-color: transparent;
}

/* Post heading */
.mp-page-container[b-dhd6n42hky]  .mp-an-heading {
    margin: 0.25rem 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #E1E8ED;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-an-cards {
        grid-template-columns: 1fr;
    }
}

.mp-page-container[b-dhd6n42hky]  .mp-an-chart--tall {
    height: 240px;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-card {
    border: 1px solid #DCE6EC;
    border-radius: 8px;
    padding: 0.85rem 1rem 0.5rem;
    background: #fff;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2b3f4c;
    margin-bottom: 0.4rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-chart {
    width: 100%;
    height: 200px;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-meta {
    margin-top: 0.85rem;
    font-size: 0.78rem;
    color: var(--ssy-colour-palette-slate-gray);
}

.mp-page-container[b-dhd6n42hky]  .mp-an-future {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: #9cb0bb;
    font-style: italic;
}

/* Per-recipient drill-down */
.mp-page-container[b-dhd6n42hky]  .mp-an-job-row {
    cursor: pointer;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-job-row:hover {
    background-color: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-job-detail-row > td {
    background: #f6f9fb;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-job-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.4rem 0.2rem;
}

/* A recipient whose every open came from a VPN / proxy / datacentre IP. */
.mp-page-container[b-dhd6n42hky]  .mp-an-suspicious-all {
    color: #C0392B;
    font-weight: 600;
}

/* Drill-down: each open and the verdict on its IP. */
.mp-page-container[b-dhd6n42hky]  .mp-an-open-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.3rem 0.2rem 0.4rem;
    max-height: 12rem;
    overflow-y: auto;
    font-size: 0.75rem;
    color: #405864;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-open {
    display: grid;
    grid-template-columns: 9rem 11rem 1fr;
    gap: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-left: 3px solid #4FAE7F;
}

.mp-page-container[b-dhd6n42hky]  .mp-an-open--suspicious {
    border-left-color: #C0392B;
    background: #FBE6E3;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-npt-stepper {
    margin: 0.35rem 0 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-npt-count {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ssy-colour-main-simpson-blue);
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .mp-npt-static {
    font-size: 0.76rem;
    font-style: italic;
    color: #9cb0bb;
    padding-top: 0.35rem;
}

/* ── Review summary ────────────────────────────────────────────────────────── */
.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-npt-review-none {
    color: #a0aab4;
    font-style: italic;
}

@media (max-width: 640px) {
    .mp-page-container[b-dhd6n42hky]  .mp-npt-review {
        grid-template-columns: 1fr;
    }

    .mp-page-container[b-dhd6n42hky]  .mp-npt-review-k {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* ── Pre-flight warning block on the review step ─────────────────────────── */
.mp-page-container[b-dhd6n42hky]  .mp-npt-warnblock {
    background: #fff7e8;
    border: 1px solid #e8d3a8;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-npt-warnlist li {
    margin-bottom: 0.3rem;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-npt-result--ok {
    color: #2f6b42;
}

.mp-page-container[b-dhd6n42hky]  .mp-npt-result--fail {
    color: var(--ssy-colour-palette-crimson-red);
}

.mp-page-container[b-dhd6n42hky]  .mp-npt-result-label {
    font-weight: 600;
}

.mp-page-container[b-dhd6n42hky]  .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-dhd6n42hky]  .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-dhd6n42hky]  .mp-npt-nav-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.mp-page-container[b-dhd6n42hky]  .mp-npt-nav-hint {
    font-size: 0.72rem;
    font-style: italic;
    color: #8a5a00;
}

/* =============================================================================
   Admin > Email Builder (MarketPost_977_AdminEmailBuilder)
   Three panels: components + outline | properties | live preview.
   ============================================================================= */
.mp-page-container[b-dhd6n42hky]  .mp-eb-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    margin-bottom: 0.4rem;
    background: #EEF6E4;
    border: 1px solid #91A527;
    border-radius: 6px;
    color: #4A5A12;
    font-size: 0.8rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-name {
    flex: 1 1 220px;
    max-width: 320px;
    font-weight: 600;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-desc {
    flex: 2 1 260px;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-status {
    font-size: 0.74rem;
    color: #647C87;
    white-space: nowrap;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-status--dirty {
    color: #8A5A00;
    font-weight: 600;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    margin-bottom: 0.4rem;
    background: #FFF4E0;
    border: 1px solid #E8C27A;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #8A5A00;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-publish-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    align-items: center;
    padding: 0.3rem 0 0.5rem;
    border-bottom: 1px solid #E9EFF9;
    font-size: 0.76rem;
    color: #405864;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-flag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #8A5A00;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-grid {
    display: grid;
    grid-template-columns: 290px 330px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    margin-top: 0.6rem;
}

/* Properties and preview stay in view while a long outline scrolls past. */
.mp-page-container[b-dhd6n42hky]  .mp-eb-props,
.mp-page-container[b-dhd6n42hky]  .mp-eb-preview {
    position: sticky;
    top: 0.5rem;
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
}

@media (max-width: 1400px) {
    .mp-page-container[b-dhd6n42hky]  .mp-eb-grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .mp-page-container[b-dhd6n42hky]  .mp-eb-preview {
        grid-column: 1 / -1;
        position: static;
        max-height: none;
    }
}

@media (max-width: 760px) {
    .mp-page-container[b-dhd6n42hky]  .mp-eb-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-panel {
    background: #FFFFFF;
    border: 1px solid #B5CBD6;
    border-radius: 8px;
    padding: 0.6rem 0.65rem;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-panel-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #647C87;
    margin: 0 0 0.4rem;
}

/* -- Palette -- */
.mp-page-container[b-dhd6n42hky]  .mp-eb-palette-group {
    font-size: 0.66rem;
    color: #8AA0AB;
    margin: 0.35rem 0 0.2rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-palette-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-palette-btn {
    border: 1px solid #DCE6F2;
    background: #F8FAFD;
    border-radius: 6px;
    padding: 0.3rem 0.45rem;
    font-size: 0.76rem;
    color: #163E9F;
    text-align: left;
    cursor: grab;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-palette-btn:hover:not(:disabled) {
    border-color: #163E9F;
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-palette-btn:disabled {
    color: #B5CBD6;
    cursor: not-allowed;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-add-target {
    font-size: 0.72rem;
    color: #163E9F;
    background: #E9EFF9;
    border-radius: 6px;
    padding: 0.25rem 0.45rem;
    margin-bottom: 0.3rem;
}

/* -- Outline -- */
.mp-page-container[b-dhd6n42hky]  .mp-eb-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.35rem;
    margin-bottom: 0.22rem;
    border: 1px solid #E9EFF9;
    border-radius: 6px;
    background: #FFFFFF;
    cursor: pointer;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-row:hover {
    border-color: #B5CBD6;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-row--selected,
.mp-page-container[b-dhd6n42hky]  .mp-eb-row--selected:hover {
    border-color: #163E9F;
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-grip {
    cursor: grab;
    color: #8AA0AB;
    user-select: none;
    padding: 0 0.1rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-row-main {
    flex: 1;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-row-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #000061;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-row-summary {
    font-size: 0.68rem;
    color: #647C87;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-row-actions {
    display: flex;
    gap: 0.05rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-row-actions button {
    border: none;
    background: none;
    color: #405864;
    padding: 0.1rem 0.2rem;
    font-size: 0.66rem;
    line-height: 1;
    border-radius: 4px;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-row-actions button:hover:not(:disabled) {
    background: #DCE6F2;
    color: #000061;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-row-actions button:disabled {
    color: #D5DEE6;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-device {
    margin-left: 0.3rem;
    padding: 0 0.3rem;
    border-radius: 8px;
    background: #FFF4E0;
    color: #8A5A00;
    font-size: 0.6rem;
    font-weight: 600;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-columns {
    margin: 0 0 0.3rem 0.9rem;
    padding-left: 0.45rem;
    border-left: 2px solid #DCE6F2;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-col-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.25rem 0 0.15rem;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8AA0AB;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-dropzone {
    border: 1px dashed #B5CBD6;
    border-radius: 6px;
    padding: 0.3rem;
    margin-bottom: 0.25rem;
    text-align: center;
    font-size: 0.68rem;
    color: #8AA0AB;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-dropzone--target {
    border-color: #163E9F;
    background: #E9EFF9;
    color: #163E9F;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-linkbtn {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.72rem;
    color: #163E9F;
    text-decoration: underline;
    text-transform: none;
    letter-spacing: 0;
}

/* -- Properties -- */
.mp-page-container[b-dhd6n42hky]  .mp-eb-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.45rem;
    min-width: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-field > label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #405864;
    margin: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-field-row--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-help {
    font-size: 0.7rem;
    line-height: 1.4;
    color: #647C87;
    margin-bottom: 0.35rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-help code,
.mp-page-container[b-dhd6n42hky]  .mp-eb-token-list code {
    font-size: 0.68rem;
    color: #163E9F;
    background: #F1F5FB;
    padding: 0 0.2rem;
    border-radius: 3px;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    color: #405864;
    margin: 0.15rem 0 0.35rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-indent {
    margin: 0 0 0.45rem 1.25rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-picker {
    margin-top: 0.2rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.74rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-colour-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-colour-row input[type="color"] {
    width: 34px;
    height: 28px;
    padding: 0;
    border: 1px solid #B5CBD6;
    border-radius: 4px;
    cursor: pointer;
    flex: none;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-colour-row .form-control {
    max-width: 150px;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-seg {
    display: inline-flex;
    border: 1px solid #B5CBD6;
    border-radius: 6px;
    overflow: hidden;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-seg button {
    border: none;
    background: #FFFFFF;
    color: #405864;
    font-size: 0.72rem;
    padding: 0.25rem 0.55rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-seg button + button {
    border-left: 1px solid #B5CBD6;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-seg button.mp-eb-seg--on {
    background: #163E9F;
    color: #FFFFFF;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-chip {
    border: 1px solid #DCE6F2;
    background: #F8FAFD;
    color: #163E9F;
    border-radius: 10px;
    padding: 0 0.4rem;
    font-size: 0.66rem;
    font-family: Consolas, "Courier New", monospace;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-chip:hover {
    border-color: #163E9F;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-subcard {
    border: 1px solid #E9EFF9;
    border-radius: 6px;
    padding: 0.4rem 0.5rem 0.1rem;
    margin-bottom: 0.4rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-subcard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #000061;
    margin-bottom: 0.25rem;
}

/* Footer style: two selectable cards */
.mp-page-container[b-dhd6n42hky]  .mp-eb-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem;
    margin: 0 0 0.3rem;
    border: 1px solid #DCE6F2;
    border-radius: 6px;
    background: #FFFFFF;
    cursor: pointer;
    font-weight: 400;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-choice input {
    margin-top: 0.15rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-choice--on {
    border-color: #163E9F;
    background: #E9EFF9;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-choice-title {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: #000061;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-choice-desc {
    display: block;
    font-size: 0.7rem;
    line-height: 1.4;
    color: #647C87;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-token-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.7rem;
    color: #405864;
    line-height: 1.7;
}

/* -- Preview -- */
.mp-page-container[b-dhd6n42hky]  .mp-eb-preview-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-frame-wrap {
    display: flex;
    justify-content: center;
    padding: 0.75rem;
    background: #E9EFF9;
    border-radius: 8px;
    overflow: auto;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-frame {
    width: 100%;
    height: 760px;
    border: 1px solid #B5CBD6;
    background: #FFFFFF;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-frame--mobile {
    width: 375px;
    max-width: 100%;
    height: 720px;
    flex: none;
    border: 8px solid #1D1D1B;
    border-radius: 22px;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-issues {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-issue {
    font-size: 0.74rem;
    line-height: 1.4;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.22rem;
    border-radius: 5px;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-issue--error {
    background: #FDECEC;
    color: #A1262D;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-issue--warning {
    background: #FFF4E0;
    color: #8A5A00;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-issue--note {
    background: #F1F5FB;
    color: #405864;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-issue--link {
    cursor: pointer;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-issue--link:hover {
    text-decoration: underline;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.mp-page-container[b-dhd6n42hky]  .mp-eb-tokens code {
    font-size: 0.68rem;
    color: #163E9F;
    background: #F1F5FB;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
}

/* -- Publish popup -- */
.mp-page-container[b-dhd6n42hky]  .mp-eb-publish {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
}
/* /Components/Pages/General/MobileLauncher.razor.rz.scp.css */
/* Mobile / PWA entry gateway. Page prefix: ml- (MobileLauncher). */

.ml-wrap[b-l231on07u9] {
    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-l231on07u9] {
    width: 180px;
    max-width: 60%;
    margin: 1.5rem 0 1rem 0;
}

.ml-title[b-l231on07u9] {
    margin-bottom: 0.25rem;
    color: #000061;
}

.ml-sub[b-l231on07u9] {
    color: #444;
    margin-bottom: 1.5rem;
}

.ml-form[b-l231on07u9] {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ml-btn[b-l231on07u9] {
    width: 100%;
}

.ml-btn small[b-l231on07u9] {
    opacity: 0.7;
    font-weight: 400;
}

.ml-err[b-l231on07u9] {
    margin-bottom: 0.25rem;
}

.ml-change[b-l231on07u9] {
    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-6ldy8levsd] {
    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-6ldy8levsd] {
        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-6ldy8levsd] {
        background-color: #f0f0f0;
        transform: translateX(2px) scale(0.99);
    }

    .opalitem:hover .child-type-label[b-6ldy8levsd] {
        background: #f8f9fa;
        color: #555;
    }

    .opalitem span[b-6ldy8levsd] {
        color: #333;
        font-size: 0.9rem;
        margin-right: 20px;
        display: inline-block;
    }

.item-content[b-6ldy8levsd] {
    display: flex;
    flex-direction: column;
}

.item-date[b-6ldy8levsd] {
    position: relative;
    z-index: 1;
}

.item-indicator[b-6ldy8levsd] {
    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-6ldy8levsd] {
    width: 100%;
}

.actions[b-6ldy8levsd] {
    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-6ldy8levsd] {
    opacity: 1; /* Full opacity on hover */
}

.view-html-button[b-6ldy8levsd],
.view-pdf-button[b-6ldy8levsd] {
    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-6ldy8levsd],
.view-pdf-button:hover[b-6ldy8levsd] {
    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-6ldy8levsd],
.view-pdf-button:active[b-6ldy8levsd] {
    transform: scale(0.95);
}

[b-6ldy8levsd] .badge {
    margin-left: 8px;
    padding: 3px 8px;
    font-size: 0.75rem;
    animation: pulse-b-6ldy8levsd 2s infinite; /* Add pulsing animation for new badges */
}

@keyframes pulse-b-6ldy8levsd {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.archive-item[b-6ldy8levsd] {
   /* margin-left: 15px;*/
    font-size: 0.9em;
    /*padding: 4px 12px;*/
}

.archive-item:hover[b-6ldy8levsd] {
    background-color: #f3f3f3;
    border-left-color: #009DC9;
}

.archive-item span[b-6ldy8levsd] {
    color: #666;
}

.archive-item .child-type-label[b-6ldy8levsd] {
    background: #fafafa;
    color: #888;
}

.child-type-label[b-6ldy8levsd] {
    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-6ldy8levsd] {
    left: 0;
    color: #163E9F;
    border-color: #163E9F;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .opalitem[b-6ldy8levsd] {
        padding: 12px 15px 12px 45px;
        margin: 4px 0;
    }
    
    .actions[b-6ldy8levsd] {
        display: flex;
        gap: 10px;
        opacity: 0.9;
    }
    
    .view-html-button[b-6ldy8levsd],
    .view-pdf-button[b-6ldy8levsd] {
        padding: 8px;
        margin-left: 0;
        opacity: 0.9;
        position: relative;
        z-index: 5;
    }
    
    .view-html-button[b-6ldy8levsd]::before,
    .view-pdf-button[b-6ldy8levsd]::before {
        content: '';
        position: absolute;
        top: -5px;
        bottom: -5px;
        left: -5px;
        right: -5px;
        z-index: -1;
    }
    
    .item-date[b-6ldy8levsd] {
        font-size: 1rem !important;
    }
    
    .child-type-label[b-6ldy8levsd] {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
}
/* /Components/Pages/General/OmniPortal/Components/ViewFileIFrame.razor.rz.scp.css */
.fileViewerContainer[b-q92e417qvs] {
    height: 100%;
    width: 100%;
    position: relative;
}
.fileViewerContainer[b-q92e417qvs]  iframe[data-jsFunction="viewFile"],
.fileViewerContainer[b-q92e417qvs]  iframe[data-jsFunction="viewFileByUri"],
.fileViewerContainer[b-q92e417qvs]  iframe[data-jsFunction="loadSandboxedIframe"],
.fileViewerContainer[b-q92e417qvs]  iframe[data-jsFunction="loadOfficeIframe"],
.fileViewerContainer[b-q92e417qvs]  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-9rs98ace36] {
    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-9rs98ace36]::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-9rs98ace36]  .btn.btn-primary {
    display: inline-flex;
    column-gap: 5px;
    align-items: center;
}

.fileupload-container[b-9rs98ace36]  .quickgrid{
    width: 100%;
}
.fileupload-container[b-9rs98ace36]  .quickgrid td {
    padding: 5px 15px; /* Adjust as needed */
    text-align: center;
}

.fileupload-container[b-9rs98ace36]  .quickgrid tr:nth-child(even):has(td > *) {
    background-color: #f2f2f2; /* This is a light grey color */
}

.fileupload-container[b-9rs98ace36]  .quickgrid .name-column {
    width: 350px;
    text-overflow: ellipsis;
}

.fileupload-container[b-9rs98ace36]  .quickgrid .date-column {
    width: 100px;
}

.fileupload-container[b-9rs98ace36]  .quickgrid .int-ext-column {
    width: 50px;
}

.fileupload-container[b-9rs98ace36]  .quickgrid .btn-column {
    width: 150px;
}
.fileupload-container[b-9rs98ace36]  .quickgrid .btn-extended-column {
    width: 175px;
}

.fileupload-container[b-9rs98ace36]  .quickgrid .search-box {
    margin: 5px;
    z-index: 1;
    position: relative;
}

.fileupload-container .roles-container[b-9rs98ace36] {
    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-9rs98ace36]{
        display: none;
    }

    .fileupload-container[b-9rs98ace36]  .quickgrid .hide-mobile {
        display: none;
    }
    .fileupload-container .roles-container[b-9rs98ace36] {
        flex-direction: column;
    }
}

[b-9rs98ace36] .font-weight-bold {
    font-weight: bold;
}

[b-9rs98ace36] .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-9rs98ace36] .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-9rs98ace36] .edit-form-input, [b-9rs98ace36] .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-9rs98ace36] .edit-form-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

[b-9rs98ace36] .upload-modal-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

[b-9rs98ace36] .upload-modal-header {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

[b-9rs98ace36] .upload-modal-body {
    padding: 10px;
}

[b-9rs98ace36] .upload-modal-select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

[b-9rs98ace36] .upload-modal-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

[b-9rs98ace36] .upload-modal-footer {
    text-align: center;
    margin-top: 20px;
}



[b-9rs98ace36] .validation-summary {
    color: red;
    list-style-type: none;
    padding: 0;
}

/* reset disabled styling cause ugly */
[b-9rs98ace36] .form-control:disabled, .form-control[readonly][b-9rs98ace36] {
    color: #212529;
    background-color: #e9ecef;
}

/* email modal */
[b-9rs98ace36] .role-select-btn:hover {
    font-weight: bold;
}
[b-9rs98ace36] .role-select-btn.add:hover {
    background-color: #8CD47E;
    font-weight: normal;
}
[b-9rs98ace36] .role-select-btn.remove:hover {
    background-color: #FF6961;
    font-weight: normal;
}
[b-9rs98ace36] .selected-role {
    font-weight: bold;
    text-decoration: underline;
}
/* /Components/Pages/General/OmniPortal/OmniPortal.razor.rz.scp.css */
/* Layout & Responsive Styles */
.col-md-10[b-one9j6yzz5] {
    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-one9j6yzz5] {
    margin-left: 0;
    width: 100%;
}

@media (max-width: 1500px) {
    .col-sm-2[b-one9j6yzz5] {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .col-md-10[b-one9j6yzz5] {
        flex: 0 0 80%;
        max-width: 80%;
    }
    .collapse-button[b-one9j6yzz5] {
        left: 19.5% !important;
    }
    .menu-collapsed .collapse-button[b-one9j6yzz5] {
        left: -10px !important;
        animation: slideOut-b-one9j6yzz5 0.3s forwards;
    }
}

@media (max-width: 992px) {
    .collapse-button[b-one9j6yzz5] {
        left: 19% !important;
    }
    .menu-collapsed .collapse-button[b-one9j6yzz5] {
        left: 0 !important
    }
}

/* Menu States & Navigation */
.expanded-menu[b-one9j6yzz5] {
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    transform: translateX(0);
    width: 16.66%;
    animation: slideIn-b-one9j6yzz5 0.3s forwards;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.collapsed-menu[b-one9j6yzz5] {
    display: none;
    transform: translateX(-100%);
    width: 0;
    animation: slideOut-b-one9j6yzz5 0.3s forwards;
}

.menu-expanded .collapse-button[b-one9j6yzz5] {
    left: 16.5%;
    margin-left: 6px;
    animation: slideIn-b-one9j6yzz5 0.3s forwards;
}

.sidebar-container[b-one9j6yzz5] {
    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-one9j6yzz5]{
    padding: 8px;
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #f8f9fa;
}

/* Sidebar Components */
.sidebar-container[b-one9j6yzz5]::-webkit-scrollbar {
    width: 6px;
}

.sidebar-container[b-one9j6yzz5]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sidebar-container[b-one9j6yzz5]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.sidebar-container[b-one9j6yzz5]::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.opcard[b-one9j6yzz5] {
    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-one9j6yzz5] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}


/* Report Headers */
.reportHeaderGroup[b-one9j6yzz5] {
    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-one9j6yzz5] {
    cursor: default;
}

.reportHeaderGroup:not(.static)[b-one9j6yzz5] {
    cursor: pointer;
}

.reportHeaderGroup a[b-one9j6yzz5] {
    width: 100%;
}

.reportHeaderGroup.collapsed[b-one9j6yzz5]::after,
.reportHeaderGroup.expanded[b-one9j6yzz5]::after {
    position: absolute;
    right: 0;
    color: #163E9F;
    margin-right: 1rem;
}

.reportHeaderGroup.collapsed[b-one9j6yzz5]::after {
    content: "▼";
    /*content: "▽";*/
}

.reportHeaderGroup.expanded[b-one9j6yzz5]::after {
    content: "▲";
    /*content: "△";*/
}

/* Remove the old a::after rules since we're using the div::after instead */
.reportHeaderGroup.collapsed a[b-one9j6yzz5]::after,
.reportHeaderGroup.expanded a[b-one9j6yzz5]::after {
    display: none;
}


.accordion[b-one9j6yzz5]{
    padding: 1px 0 !important;
    width: 100%;
}

.opaccordion-button[b-one9j6yzz5] {
    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-one9j6yzz5] {
        background-color: #f8f9fa;
        color: #000061;
        box-shadow: none;
    }

    .opaccordion-button:hover[b-one9j6yzz5] {
        background-color: #f8f9fa;
        border-left-color: #163E9F;
    }

    .opaccordion-button:focus[b-one9j6yzz5] {
        box-shadow: 0 0 0 0.1rem rgba(219, 48, 58, 0.25);
    }

    .opaccordion-button[b-one9j6yzz5]::after {
        position: absolute;
        right: 0;
        color: #163E9F;
        margin-right: 1rem;
    }

    .opaccordion-button.collapsed[b-one9j6yzz5]::after {
        content: "▼";
    }

    .opaccordion-button:not(.collapsed)[b-one9j6yzz5]::after {
        content: "▲";
    }

.accordion-body[b-one9j6yzz5] {
    padding: 4px 0 0 0;
    width: 100%;
}

.accordion-collapse[b-one9j6yzz5] {
    width: 100%;
}

.accordion-body .itemDiv[b-one9j6yzz5] {
    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-one9j6yzz5] {
        background-color: #f8f9fa;
        border-left-color: #163E9F;
    }

.accordion-collapse[b-one9j6yzz5] {
    transition: all 0.3s ease-in-out;
}



/* List Items   */ 
.itemDiv[b-one9j6yzz5] {
    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-one9j6yzz5] {
    margin-left: 10px;
}

/* Buttons & Interactive Elements */
.collapse-button[b-one9j6yzz5] {
    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-one9j6yzz5] {
    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-one9j6yzz5] {
    background-color: #0088b0;
    width: 25px;
    box-shadow: 2px 0 6px rgba(0,0,0,0.15);
}

.downloadButton[b-one9j6yzz5],
.CopyButton[b-one9j6yzz5] {
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.itemDiv:hover[b-one9j6yzz5] {
    background-color: #f8f9fa;
    border-left-color: #163E9F;
}

.itemDiv:hover .downloadButton[b-one9j6yzz5],
.itemDiv:hover .CopyButton[b-one9j6yzz5] {
    opacity: 1;
}

.collapse-button:hover[b-one9j6yzz5] {
    background-color: #0088b0;
}

/* Utility Classes */
.text-info[b-one9j6yzz5] {
    color: #000061 !important;
}

/* Viewer Action Button */
.viewer-action-button[b-one9j6yzz5] {
    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-one9j6yzz5] {
    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-one9j6yzz5] {
    border: none;
    background: none;
    width: 100%;
    margin: 4px 0;
}

.accordion[b-one9j6yzz5] {
    padding: 1px 0 !important;
    width: 100%;
}

.accordion-head[b-one9j6yzz5] {
    font-family: "Soehne", sans-serif;
}


/* Child Attachment Types */
.child-attachment-type[b-one9j6yzz5] {
    padding-left: 15px;
    border-left: 2px solid #e0e0e0;
    margin: 5px 0 5px 15px;
}

.child-attachment-type .itemDiv[b-one9j6yzz5] {
    background: #fafafa;
}

.child-attachment-type .itemDiv:hover[b-one9j6yzz5] {
    background-color: #f0f0f0;
    border-left-color: #009DC9;
}

.child-attachment-type .opaccordion-button[b-one9j6yzz5] {
    background: #fafafa;
    font-size: 0.8rem !important;
}

/* Add a light shadow to the selected attachment type */
.opcard.selected[b-one9j6yzz5] {
    box-shadow: 0 0 10px rgba(0, 0, 97, 0.2);
    border-color: #000061;
}

@keyframes slideIn-b-one9j6yzz5 {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut-b-one9j6yzz5 {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

a[b-one9j6yzz5] {
    text-decoration: none;
    display: block;
    width: 100%;
    cursor: pointer;
}

.loading-container[b-one9j6yzz5] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
}

.loading-spinner[b-one9j6yzz5] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000061;
    border-radius: 50%;
    animation: spinner-b-one9j6yzz5 1.5s linear infinite;
    margin-bottom: 15px;
}

@keyframes spinner-b-one9j6yzz5 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.file-viewer-placeholder[b-one9j6yzz5] {
    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-one9j6yzz5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.placeholder-content p[b-one9j6yzz5] {
    margin-top: 1rem;
    font-size: 1.1rem;
}

.archive-count[b-one9j6yzz5] {
    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-one9j6yzz5] {
        width: 100%;
        max-width: 100%;
        position: fixed;
        top: 60px;
        left: 0;
        z-index: 99;
        height: calc(100vh - 60px);
    }

    .expanded-menu[b-one9j6yzz5] {
        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-one9j6yzz5] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-10[b-one9j6yzz5] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0 !important;
    }

    .collapse-button[b-one9j6yzz5] {
        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-one9j6yzz5] {
        transform: translateX(-100%);
    }
   
    
    .menu-collapsed .collapse-button[b-one9j6yzz5] {
        left: 10px !important;
    }
    
    .file-viewer-placeholder[b-one9j6yzz5] {
        padding: 1rem;
    }



    .menu-collapsed .collapse-button[b-one9j6yzz5] {
        left: 30px !important;
    }

    .menu-expanded .collapse-button[b-one9j6yzz5] {
        left: -5px !important;
    }
    
    .file-viewer-placeholder[b-one9j6yzz5] {
        padding: 1rem;
    }
    
    /* Increase touch target sizes for mobile */
    .reportHeaderGroup[b-one9j6yzz5] {
        padding: 12px 15px;
        margin: 6px 0;
    }
    
    .itemDiv[b-one9j6yzz5] {
        padding: 12px 15px;
        margin: 4px 0;
    }
    
    .actions[b-one9j6yzz5] {
        display: flex;
        gap: 10px;
    }
    
    .view-html-button[b-one9j6yzz5],
    .view-pdf-button[b-one9j6yzz5] {
        padding: 8px;
        margin-left: 5px;
        opacity: 0.9;
    }
    
    /* Collapsible sidebar with overlay effect */
    .menu-overlay[b-one9j6yzz5] {
        display: none;
    }
    
    .menu-expanded .menu-overlay[b-one9j6yzz5] {
        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-one9j6yzz5 0.3s forwards;
    }
    
    @keyframes fadeIn-b-one9j6yzz5 {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* Mobile-friendly action buttons */
    .mobile-action-container[b-one9j6yzz5] {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 95;
    }
    
    .mobile-action-button[b-one9j6yzz5] {
        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-one9j6yzz5],
    .mobile-action-button:focus[b-one9j6yzz5] {
        background-color: #0088b0;
        transform: scale(1.05);
    }
    
    /* Improved toast positioning for mobile */
    [b-one9j6yzz5] .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). */

/* Report History: Template / Data view switch */
.ap-hist-viewtoggle[b-2bftp4au1o] { display: inline-flex; gap: 4px; margin-left: 12px; }

/* Data history: overrides tinted like overridden cells in Data mode */
.ap-data-override td[b-2bftp4au1o] { background: #fffbeb; }

/* Distribution: clickable report rows; nested recent-sends table */
.ap-dist-row[b-2bftp4au1o] { cursor: pointer; }
.ap-dist-row:hover td[b-2bftp4au1o] { background: #f3f4f6; }
.ap-dist-sub[b-2bftp4au1o] { margin: 4px 0; font-size: 0.78rem; }

.ap-root[b-2bftp4au1o] {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: 0;
    background: #f8fafc;
}

/* ── Blank top bar (just the back arrow) ── */
.ap-topbar[b-2bftp4au1o] {
    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-2bftp4au1o] {
    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-2bftp4au1o] {
        border-color: #000061;
        color: #000061;
    }

.ap-back-arrow[b-2bftp4au1o] {
    font-size: 1.05rem;
    line-height: 1;
}

.ap-topbar-title[b-2bftp4au1o] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Tabs ── */
.ap-tabs[b-2bftp4au1o] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    padding: 10px 14px 0;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}

.ap-tab[b-2bftp4au1o] {
    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-2bftp4au1o] {
        color: #000061;
    }

.ap-tab-active[b-2bftp4au1o] {
    background: white;
    color: #000061;
    font-weight: 600;
    border-color: #e5e7eb;
    margin-bottom: -1px;
}

.ap-tab-soon[b-2bftp4au1o] {
    opacity: 0.5;
    cursor: default;
}

/* ── Completeness tab ── */
.ap-completeness[b-2bftp4au1o] {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    padding: 18px;
    overflow: auto;
}

/* Calendar */
.ap-cal[b-2bftp4au1o] {
    flex-shrink: 0;
    width: 300px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    height: fit-content;
}

.ap-cal-nav[b-2bftp4au1o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ap-cal-navbtn[b-2bftp4au1o] {
    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-2bftp4au1o] {
        background: #f3f4f6;
    }

.ap-cal-label[b-2bftp4au1o] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #000061;
}

.ap-cal-grid[b-2bftp4au1o] {
    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-2bftp4au1o] {
    margin-bottom: 3px;
}

.ap-cal-dowcell[b-2bftp4au1o] {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    padding: 2px 0;
}

.ap-cal-cell[b-2bftp4au1o] {
    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-2bftp4au1o] {
        background: #eef2ff;
    }

.ap-cal-empty[b-2bftp4au1o] {
    cursor: default;
}

.ap-cal-today[b-2bftp4au1o] {
    border-color: #9ca3af;
}

.ap-cal-sel[b-2bftp4au1o] {
    background: #000061;
    color: white;
    font-weight: 600;
}

    .ap-cal-sel:hover[b-2bftp4au1o] {
        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-2bftp4au1o] {
    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-2bftp4au1o] {
        background: #f3f4f6;
    }

/* Lists */
.ap-lists[b-2bftp4au1o] {
    flex: 1;
    min-width: 0;
}

.ap-lists-head[b-2bftp4au1o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ap-lists-title[b-2bftp4au1o] {
    margin: 0;
    font-size: 1rem;
    color: #000061;
}

.ap-toggle[b-2bftp4au1o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.ap-lists-sub[b-2bftp4au1o] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.ap-group[b-2bftp4au1o] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}

.ap-group-head[b-2bftp4au1o] {
    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-2bftp4au1o] {
    background: #e5f6ec;
    color: #14652f;
}

.ap-group-partial[b-2bftp4au1o] {
    background: #fef3c7;
    color: #92590b;
}

.ap-group-none[b-2bftp4au1o] {
    background: #f3f4f6;
    color: #6b7280;
}

.ap-dot[b-2bftp4au1o] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ap-dot-complete[b-2bftp4au1o] { background: #16a34a; }
.ap-dot-partial[b-2bftp4au1o]  { background: #d97706; }
.ap-dot-none[b-2bftp4au1o]     { background: #9ca3af; }

.ap-count[b-2bftp4au1o] {
    margin-left: auto;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 0.78rem;
}

.ap-dept[b-2bftp4au1o] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 8px 14px 3px;
}

.ap-report[b-2bftp4au1o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 14px;
    border-top: 1px solid #f8fafc;
}

    .ap-report:hover[b-2bftp4au1o] {
        background: #f8fafc;
    }

.ap-report-title[b-2bftp4au1o] {
    font-size: 0.85rem;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-report-count[b-2bftp4au1o] {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.ap-empty[b-2bftp4au1o] {
    padding: 10px 14px;
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
}

/* ── Report Rules (scheduling) tab ── */
.ap-rules[b-2bftp4au1o] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.ap-rules-intro[b-2bftp4au1o] {
    font-size: 0.82rem;
    color: #4b5563;
    margin: 0 0 12px;
    max-width: 760px;
}

/* Collapsible department header */
.ap-dept-toggle[b-2bftp4au1o] {
    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-2bftp4au1o] { color: #000061; }

.ap-dept-caret[b-2bftp4au1o] { width: 10px; color: #9ca3af; font-size: 0.7rem; }
.ap-dept-name[b-2bftp4au1o]  { font-weight: 700; }
.ap-dept-count[b-2bftp4au1o] {
    font-size: 0.66rem; font-weight: 700; color: #6b7280;
    background: #f3f4f6; border-radius: 999px; padding: 1px 7px;
}
.ap-dept-livecount[b-2bftp4au1o] { font-size: 0.7rem; color: #16a34a; font-weight: 600; }

/* Report rules grid */
.ap-rule-grid[b-2bftp4au1o] { display: flex; flex-direction: column; margin-bottom: 8px; }

.ap-rule-grow[b-2bftp4au1o] {
    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-2bftp4au1o] { border-top: 1px solid #e5e7eb; border-radius: 6px 6px 0 0; }
    .ap-rule-grow:last-child[b-2bftp4au1o]  { border-radius: 0 0 6px 6px; }
    .ap-rule-grow.ap-rule-islive[b-2bftp4au1o] { background: #f0fdf4; }

.ap-rule-ghead[b-2bftp4au1o] {
    background: #f9fafb;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.ap-gc-report[b-2bftp4au1o] { flex: 1; min-width: 0; }
.ap-gc-mp[b-2bftp4au1o]     { width: 180px; flex-shrink: 0; }
.ap-gc-att[b-2bftp4au1o]    { width: 180px; flex-shrink: 0; }
.ap-gc-sched[b-2bftp4au1o]  { width: 240px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.ap-gc-live[b-2bftp4au1o]   { width: 54px; flex-shrink: 0; text-align: center; }
.ap-gc-dates[b-2bftp4au1o]  { width: 170px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }

/* Date mode toggle (Schedule | Editions) + edition list editor */
.ap-mode-toggle[b-2bftp4au1o] { display: inline-flex; border: 1px solid #d1d5db; border-radius: 4px; overflow: hidden; }
.ap-mode-toggle button[b-2bftp4au1o] { border: none; background: #fff; color: #374151; font-size: 0.7rem; padding: 3px 7px; cursor: pointer; }
.ap-mode-toggle button.on[b-2bftp4au1o] { background: #000061; color: #fff; }
.ap-ed-list[b-2bftp4au1o] { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; margin: 6px 0; }
.ap-ed-row[b-2bftp4au1o] { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; padding: 3px 6px; border: 1px solid #eef0f3; border-radius: 4px; }
.ap-ed-row.ap-ed-past[b-2bftp4au1o] { color: #6b7280; }
.ap-ed-date[b-2bftp4au1o] { width: 130px; font-variant-numeric: tabular-nums; }
.ap-ed-flag[b-2bftp4au1o] { font-size: 0.68rem; padding: 1px 6px; border-radius: 8px; }
.ap-ed-flag-data[b-2bftp4au1o] { background: #e0f2fe; color: #075985; }
.ap-ed-flag-pub[b-2bftp4au1o]  { background: #dcfce7; color: #166534; }

.ap-gc-sched .ap-rule-sched[b-2bftp4au1o] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-sched-cellbtns[b-2bftp4au1o] { display: flex; gap: 4px; flex-shrink: 0; }

/* Live toggle switch */
.ap-live-toggle[b-2bftp4au1o] {
    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-2bftp4au1o] { background: #16a34a; }

.ap-live-knob[b-2bftp4au1o] {
    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-2bftp4au1o] { left: 20px; }

.ap-rule-row[b-2bftp4au1o] {
    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-2bftp4au1o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ap-rule-sched[b-2bftp4au1o] {
    font-size: 0.75rem;
    color: #1e3a5f;
}

.ap-rule-unsched[b-2bftp4au1o] {
    color: #9ca3af;
    font-style: italic;
}

.ap-rule-actions[b-2bftp4au1o] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ap-rule-btn[b-2bftp4au1o] {
    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-2bftp4au1o] {
    min-width: 100px;
    text-align: center;
    white-space: nowrap;
}

    .ap-rule-btn:hover[b-2bftp4au1o] {
        background: #f3f4f6;
    }

.ap-rule-btn-primary[b-2bftp4au1o] {
    background: #000061;
    border-color: #000061;
    color: #fff;
}

    .ap-rule-btn-primary:hover[b-2bftp4au1o] {
        background: #000061;
        opacity: 0.9;
    }

.ap-rule-btn-danger[b-2bftp4au1o] {
    color: #b45309;
    border-color: #fcd34d;
    background: #fffbeb;
}

.ap-sched-editor[b-2bftp4au1o] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    padding: 12px;
    margin: -2px 0 10px 10px;
}

.ap-sched-row[b-2bftp4au1o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ap-sched-label[b-2bftp4au1o] {
    font-size: 0.78rem;
    color: #6b7280;
    width: 74px;
    flex-shrink: 0;
}

.ap-sched-btns[b-2bftp4au1o] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ap-sched-opt[b-2bftp4au1o] {
    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-2bftp4au1o] {
        background: #eef2ff;
    }

    .ap-sched-opt.on[b-2bftp4au1o] {
        background: #000061;
        border-color: #000061;
        color: #fff;
    }

.ap-sched-input[b-2bftp4au1o] {
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: #fff;
}

.ap-sched-hint[b-2bftp4au1o] {
    font-size: 0.72rem;
    color: #9ca3af;
    margin: 0;
}

.ap-sched-preview[b-2bftp4au1o] {
    font-size: 0.8rem;
    color: #000061;
    font-weight: 600;
    margin: 4px 0 10px;
}

.ap-sched-actions[b-2bftp4au1o] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ap-sched-notice[b-2bftp4au1o] {
    font-size: 0.78rem;
    color: #15803d;
}

.ap-rule-mp[b-2bftp4au1o] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ap-rule-mp-label[b-2bftp4au1o] {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}

/* ── Version History tab ─────────────────────────────────────────────────── */
.ap-history[b-2bftp4au1o] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.ap-hist-controls[b-2bftp4au1o] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 6px;
}

.ap-hist-label[b-2bftp4au1o] { font-size: 0.85rem; font-weight: 600; color: #374151; }

.ap-hist-notice[b-2bftp4au1o] {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
}

.ap-notice-ok[b-2bftp4au1o]  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ap-notice-err[b-2bftp4au1o] { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.ap-hist-table[b-2bftp4au1o] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-top: 8px;
}

    .ap-hist-table th[b-2bftp4au1o] {
        text-align: left;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        border-bottom: 1px solid #e5e7eb;
        padding: 6px 8px;
    }

    .ap-hist-table td[b-2bftp4au1o] {
        border-bottom: 1px solid #f3f4f6;
        padding: 6px 8px;
        vertical-align: middle;
        color: #374151;
    }

.ap-hist-when[b-2bftp4au1o] { white-space: nowrap; color: #6b7280; font-variant-numeric: tabular-nums; }

.ap-hist-type[b-2bftp4au1o] {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.ap-hist-type-inplace[b-2bftp4au1o]    { background: #e0e7ff; color: #3730a3; }
.ap-hist-type-newversion[b-2bftp4au1o] { background: #dbeafe; color: #1e40af; }
.ap-hist-type-restore[b-2bftp4au1o]    { background: #fef3c7; color: #92400e; }
.ap-hist-type-removeversion[b-2bftp4au1o] { background: #fee2e2; color: #991b1b; }

/* ── "Who's In" (live presence) ── */
.ap-presence-livedot[b-2bftp4au1o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 8px;
    background: #16a34a;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
}

.ap-presence-people[b-2bftp4au1o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ap-presence-chip[b-2bftp4au1o] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.76rem;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}
.ap-presence-lock[b-2bftp4au1o] { font-size: 0.72rem; }
.ap-presence-name[b-2bftp4au1o] { font-weight: 500; }
.ap-presence-modetag[b-2bftp4au1o] {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
}

/* Tint per mode so you can scan who's doing what. */
.ap-presence-mode-edit[b-2bftp4au1o]  { background: #dbeafe; color: #1e3a5f; border-color: #bfdbfe; }
.ap-presence-mode-style[b-2bftp4au1o] { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.ap-presence-mode-data[b-2bftp4au1o]  { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.ap-presence-mode-view[b-2bftp4au1o]  { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
/* /Components/Pages/General/ReportBuilder/Components/Ai/ReportAiPromptPanel.razor.rz.scp.css */
/* Self-contained styling for the reusable AI prompt panel. Mirrors the rb-ai-* look used elsewhere in the
   Report Builder but scoped to this component so it can be dropped onto any page. Editor-only (never in the
   printed PDF). */

.rb-ai-card[b-9fihcmqwqz] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 18px 18px 20px;
    box-sizing: border-box;
}

.rb-ai-head[b-9fihcmqwqz] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.rb-ai-title[b-9fihcmqwqz] {
    margin: 0;
    font-size: 1.15rem;
    color: #111827;
}

.rb-ai-prompt-card .rb-ai-beta[b-9fihcmqwqz] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 1px 7px;
    vertical-align: middle;
}

.rb-ai-provider[b-9fihcmqwqz] {
    font-size: 0.75rem;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}

.rb-ai-prompt-input[b-9fihcmqwqz] {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 250px;
    font: inherit;
    font-size: 0.85rem;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-bottom: 8px;
}

    .rb-ai-prompt-input:focus[b-9fihcmqwqz] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

/* Auto-change toggle — sits between the prompt box and the Interpret button. */
.rb-ai-autochange[b-9fihcmqwqz] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    margin-bottom: 10px;
}

    .rb-ai-autochange input[type="checkbox"][b-9fihcmqwqz] {
        flex: 0 0 auto;
        width: 15px;
        height: 15px;
        margin-top: 1px;
        cursor: pointer;
    }

    .rb-ai-autochange small[b-9fihcmqwqz] {
        color: #9ca3af;
    }

.rb-ai-run[b-9fihcmqwqz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

    .rb-ai-run:hover:not(:disabled)[b-9fihcmqwqz] {
        background: #1d4ed8;
    }

    .rb-ai-run:disabled[b-9fihcmqwqz] {
        background: #cbd5e1;
        cursor: not-allowed;
    }

.rb-ai-run-ghost[b-9fihcmqwqz] {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.rb-ai-run-save[b-9fihcmqwqz] {
    background: #15803d;
}

.rb-ai-prompt-msg[b-9fihcmqwqz] {
    margin-top: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
}

.rb-ai-prompt-success[b-9fihcmqwqz] { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.rb-ai-prompt-warn[b-9fihcmqwqz]    { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.rb-ai-prompt-error[b-9fihcmqwqz]   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.rb-ai-prompt-info[b-9fihcmqwqz]    { background: #f3f4f6; border-color: #e5e7eb; color: #374151; }

/* Review list: proposed changes with confidence + tick/cross */
.rb-ai-proposals[b-9fihcmqwqz] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rb-ai-prop[b-9fihcmqwqz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #1f2937;
    cursor: pointer;
    background: #fff;
}

    .rb-ai-prop input[type="checkbox"][b-9fihcmqwqz] { flex: 0 0 auto; width: 15px; height: 15px; cursor: pointer; }

.rb-ai-prop-dead[b-9fihcmqwqz] { background: #f9fafb; color: #9ca3af; cursor: default; }

.rb-ai-prop-x[b-9fihcmqwqz] { flex: 0 0 auto; width: 15px; text-align: center; color: #dc2626; font-weight: 700; }

.rb-ai-prop-desc[b-9fihcmqwqz] { flex: 1; line-height: 1.3; }

.rb-ai-prop-conf[b-9fihcmqwqz] {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.rb-ai-conf-hi[b-9fihcmqwqz] { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.rb-ai-conf-lo[b-9fihcmqwqz] { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

.rb-ai-prop-actions[b-9fihcmqwqz] { margin-top: 10px; display: flex; gap: 8px; }

/* "Apply to" picker under a change whose target name didn't match */
.rb-ai-prop-wrap[b-9fihcmqwqz] { display: flex; flex-direction: column; gap: 4px; }

.rb-ai-prop-pick[b-9fihcmqwqz] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 2px 0 32px;
}

.rb-ai-prop-reason[b-9fihcmqwqz] { font-size: 0.72rem; color: #92400e; line-height: 1.3; }

/* Per-row lines under a data-link proposal (matched route and stored value). */
.rb-ai-prop-details[b-9fihcmqwqz] {
    margin: 2px 0 4px 22px;
    padding: 0;
    list-style: none;
    font-size: 0.7rem;
    line-height: 1.35;
    color: #475569;
}

    .rb-ai-prop-details li + li[b-9fihcmqwqz] { margin-top: 1px; }

.rb-ai-prop-select[b-9fihcmqwqz] {
    width: 100%;
    padding: 3px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.75rem;
    background: #fff;
}

/* Colour preview swatch shown before a #hex in a proposed change */
.rb-ai-swatch[b-9fihcmqwqz] {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0 3px -1px 0;
    vertical-align: baseline;
}

.rb-ai-prompt-save[b-9fihcmqwqz] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rb-ai-note[b-9fihcmqwqz] {
    font-size: 0.75rem;
    color: #6b7280;
}

.rb-ai-usage[b-9fihcmqwqz] {
    margin-top: 8px;
    font-size: 0.72rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.rb-ai-error[b-9fihcmqwqz] {
    margin-top: 12px;
    font-size: 0.85rem;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 14px;
    line-height: 1.5;
}

.rb-ai-raw[b-9fihcmqwqz] {
    margin-top: 8px;
}

    .rb-ai-raw summary[b-9fihcmqwqz] {
        cursor: pointer;
    }

    .rb-ai-raw pre[b-9fihcmqwqz] {
        white-space: pre-wrap;
        word-break: break-word;
        background: #f9fafb;
        border: 1px solid #eef2f7;
        border-radius: 6px;
        padding: 10px;
        font-size: 0.72rem;
        color: #374151;
        margin-top: 6px;
    }
/* /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-4420o9711m] {
    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-4420o9711m] {
    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-4420o9711m] { opacity: 0.8; }
.dp-hist-btn:hover[b-4420o9711m] { color: #000061; opacity: 1; }

/* Inline variant used in the textblock label row (no absolute positioning). */
.dp-hist-btn-inline[b-4420o9711m] {
    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-4420o9711m] { opacity: 1; color: #000061; }

/* ── History / rollback modal ── */
.dp-hist-overlay[b-4420o9711m] {
    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-4420o9711m] {
    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-4420o9711m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
}

.dp-hist-title[b-4420o9711m] { font-size: 0.95rem; font-weight: 700; color: #111827; }
.dp-hist-sub[b-4420o9711m]   { font-size: 0.76rem; color: #6b7280; margin-top: 2px; }

.dp-hist-close[b-4420o9711m] {
    border: none;
    background: transparent;
    font-size: 1rem;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

    .dp-hist-close:hover[b-4420o9711m] { color: #374151; }

.dp-hist-body[b-4420o9711m] {
    padding: 12px 18px 18px;
    overflow-y: auto;
}

.dp-hist-empty[b-4420o9711m] {
    padding: 24px 0;
    text-align: center;
    color: #9ca3af;
    font-size: 0.82rem;
}

.dp-hist-table[b-4420o9711m] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

    .dp-hist-table th[b-4420o9711m] {
        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-4420o9711m] {
        border-bottom: 1px solid #f3f4f6;
        padding: 6px 8px;
        vertical-align: middle;
        color: #374151;
    }

.dp-hist-current[b-4420o9711m] { background: #f0fdf4; }

.dp-hist-when[b-4420o9711m] { white-space: nowrap; color: #6b7280; font-variant-numeric: tabular-nums; }

.dp-hist-val[b-4420o9711m] {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.74rem;
}

.dp-hist-act[b-4420o9711m] {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 10px;
}

.dp-hist-act-insert[b-4420o9711m] { background: #dbeafe; color: #1e40af; }
.dp-hist-act-update[b-4420o9711m] { background: #fef3c7; color: #92400e; }
.dp-hist-act-delete[b-4420o9711m] { background: #fee2e2; color: #991b1b; }

.dp-hist-restore[b-4420o9711m] {
    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-4420o9711m] { background: #000061; color: #fff; }
    .dp-hist-restore:disabled[b-4420o9711m] { opacity: 0.4; cursor: not-allowed; }

.dp-hist-currenttag[b-4420o9711m] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #16a34a;
}

.dp-hist-note[b-4420o9711m] {
    margin-top: 10px;
    font-size: 0.72rem;
    color: #9ca3af;
    font-style: italic;
}

/* ── Panel shell ── */
.report-data-panel[b-4420o9711m] {
    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-4420o9711m] {
    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-4420o9711m] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}

/* ── Data-entry text size stepper (display only) ── */
.dp-fontsize[b-4420o9711m] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    margin-right: 8px;
}
.dp-fontsize-ic[b-4420o9711m] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #9ca3af;
    padding: 0 2px;
}
.dp-fontsize-btn[b-4420o9711m] {
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 4px;
    color: #374151;
    font-size: 0.72rem;
    line-height: 1;
    padding: 3px 6px;
    cursor: pointer;
}
.dp-fontsize-btn:hover:not(:disabled)[b-4420o9711m] { background: #f3f4f6; border-color: #9ca3af; }
.dp-fontsize-btn:disabled[b-4420o9711m] { opacity: 0.4; cursor: default; }

/* Apply the chosen display size to the entry fields only — text blocks and cell/value inputs. This
   is purely how big the text looks while filling in; the stored content and the report are untouched. */
.report-data-panel[b-4420o9711m]  .rte-editor,
.report-data-panel[b-4420o9711m]  .rte-editor * { font-size: var(--dp-entry-fs, 14px); }
.dp-body[b-4420o9711m]  input[type="text"],
.dp-body[b-4420o9711m]  input[type="number"],
.dp-body[b-4420o9711m]  textarea { font-size: var(--dp-entry-fs, 14px); }

/* Top-level text-block entry fills most of the panel by default rather than hugging its content, so
   there's room to write. The container grows to take the leftover body height and the rich-text editor
   stretches to fill it. (Stack children keep their natural size — not tagged with this class.) */
.dp-textblock-grow[b-4420o9711m] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}
.dp-textblock-grow[b-4420o9711m]  .rte-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dp-textblock-grow[b-4420o9711m]  .rte-editor {
    flex: 1;
    overflow-y: auto;
}

/* Drag handle for reordering Data-mode list rows */
.dp-list-draghandle[b-4420o9711m] {
    width: 22px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    color: #9ca3af;
    cursor: grab;
    user-select: none;
    font-size: 0.9rem;
    line-height: 1;
}
.dp-list-draghandle:active[b-4420o9711m] { cursor: grabbing; }
.dp-list-row-dragging[b-4420o9711m] { opacity: 0.5; }

/* Remove-image button (per-date image datapoints) */
.dp-img-delete[b-4420o9711m] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 4px;
    font-size: 0.75rem;
    padding: 4px 9px;
    cursor: pointer;
    margin: 0 0 8px;
}
.dp-img-delete:hover:not(:disabled)[b-4420o9711m] { background: #fee2e2; border-color: #fca5a5; }
.dp-img-delete:disabled[b-4420o9711m] { opacity: 0.5; cursor: default; }

/* ── Save button ── */
.dp-save-btn[b-4420o9711m] {
    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-4420o9711m] { background: #0000a0; }
    .dp-save-btn:disabled[b-4420o9711m]             { opacity: 0.45; cursor: not-allowed; }

    .dp-save-btn.dp-save-pending[b-4420o9711m]               { background: #ea580c; }
    .dp-save-btn.dp-save-pending:hover:not(:disabled)[b-4420o9711m] { background: #c2410c; }

.dp-pending-badge[b-4420o9711m] {
    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-4420o9711m] {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
}

.dp-notice-success[b-4420o9711m] { background: #f0fdf4; color: #15803d; border-bottom: 1px solid #bbf7d0; }
.dp-notice-error[b-4420o9711m]   { background: #fef2f2; color: #b91c1c; border-bottom: 1px solid #fecaca; }

/* Spell-check dependency tip — quiet, dismissible, sits above the text fields it refers to. */
.dp-spellcheck-tip[b-4420o9711m] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 6px 8px 6px 10px;
    margin-bottom: 8px;
    font-size: 0.72rem;
    color: #1e40af;
    line-height: 1.35;
}
.dp-spellcheck-ic[b-4420o9711m] {
    flex-shrink: 0;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.dp-spellcheck-msg[b-4420o9711m] { flex: 1; }
.dp-spellcheck-x[b-4420o9711m] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #1e40af;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.6;
}
.dp-spellcheck-x:hover[b-4420o9711m] { opacity: 1; }

/* ── Scrollable body ── */
.dp-body[b-4420o9711m] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Placeholder ── */
.dp-placeholder[b-4420o9711m] {
    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-4420o9711m] {
    font-size: 2rem;
    opacity: 0.35;
}

.dp-placeholder-text[b-4420o9711m] {
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 200px;
}

/* ── Info message (no-entry components) ── */
.dp-info-msg[b-4420o9711m] {
    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-4420o9711m] {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dp-paste-label[b-4420o9711m] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
}

.dp-paste-hint[b-4420o9711m] {
    font-weight: 400;
    color: #9ca3af;
}

.dp-paste-textarea[b-4420o9711m] {
    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-4420o9711m] {
        outline: none;
        border-color: #000061;
    }

.dp-paste-status[b-4420o9711m] {
    font-size: 0.7rem;
    border-radius: 3px;
    padding: 3px 6px;
}

.dp-paste-ok[b-4420o9711m]   { background: #f0fdf4; color: #15803d; }
.dp-paste-warn[b-4420o9711m] { background: #fef2f2; color: #b91c1c; }

.dp-paste-actions[b-4420o9711m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dp-apply-btn[b-4420o9711m] {
    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-4420o9711m] { background: #0000a0; }
    .dp-apply-btn:disabled[b-4420o9711m]             { opacity: 0.4; cursor: not-allowed; }

.dp-paste-summary[b-4420o9711m] {
    font-size: 0.68rem;
    color: #15803d;
}

/* ── Inline table ── */
/* ── Per-date row visibility strip ── */
.dp-rowvis[b-4420o9711m] {
    margin: 8px 0 6px;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
}

.dp-rowvis-head[b-4420o9711m] {
    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-4420o9711m] {
    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-4420o9711m] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dp-rowvis-chip[b-4420o9711m] {
    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-4420o9711m] { border-color: #9ca3af; }

    .dp-rowvis-chip .dp-rowvis-dot[b-4420o9711m] { color: #16a34a; font-size: 0.7rem; line-height: 1; }
    .dp-rowvis-chip .dp-rowvis-label[b-4420o9711m] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.dp-rowvis-off[b-4420o9711m] {
    background: #f3f4f6;
    color: #9ca3af;
}

    .dp-rowvis-off .dp-rowvis-dot[b-4420o9711m] { color: #9ca3af; }
    .dp-rowvis-off .dp-rowvis-label[b-4420o9711m] { text-decoration: line-through; }

/* Greyed row in the inline grid when hidden for this date */
.dp-row-hidden[b-4420o9711m] {
    opacity: 0.45;
}

    .dp-row-hidden .dp-cell-inline-input[b-4420o9711m] { text-decoration: line-through; }

.dp-inline-table-wrap[b-4420o9711m] {
    overflow-x: auto;
}

.dp-inline-table[b-4420o9711m] {
    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-4420o9711m],
    .dp-inline-table td[b-4420o9711m] {
        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-4420o9711m] {
    padding: 0;
}

/* Header cells and non-editable data cells are dimmed — datapoint cells stay full opacity */
.dp-inline-table th[b-4420o9711m],
.dp-inline-table td:not(.dp-td-editable)[b-4420o9711m] {
    opacity: 0.4;
}

/* Read-only cells with no resolved value yet */
.dp-inline-table td.dp-td-no-data[b-4420o9711m] {
    color: #9ca3af;
    font-style: italic;
}


/* The inline input inside a table cell */
.dp-cell-inline-input[b-4420o9711m] {
    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-4420o9711m] {
        background: rgba(255, 255, 255, 0.92);
        outline: 2px solid #000061;
        outline-offset: -2px;
        border-radius: 1px;
    }

/* List cells are textareas so a manual line break (Enter) is kept. Behave like the single-line input
   but honour newlines, wrap long text, and let the user drag the corner to reveal multiple lines. */
/* Banner on an image (graph) datapoint that is shared across reports — pasting updates every linked report. */
.dp-shared-banner[b-4420o9711m] {
    font-size: 0.78rem;
    color: #1e3a5f;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 7px 10px;
    margin: 4px 0 8px;
    line-height: 1.4;
}

.dp-cell-inline-area[b-4420o9711m] {
    resize: vertical;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.35;
    font-family: inherit;
}

    /* Orange tint + border when value differs from loaded (pending) */
    .dp-cell-inline-input.dp-cell-pending[b-4420o9711m] {
        background: rgba(249, 115, 22, 0.07);
    }

    .dp-cell-inline-input.dp-cell-pending:focus[b-4420o9711m] {
        background: rgba(249, 115, 22, 0.12);
        outline-color: #ea580c;
    }

/* ── Stack children list ── */
.dp-stack-children[b-4420o9711m] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dp-stack-child-block[b-4420o9711m] {
    padding: 10px 0;
    border-bottom: 1px dashed #e5e7eb;
}

    .dp-stack-child-block:last-child[b-4420o9711m] {
        border-bottom: none;
    }

/* ── TextBlock inline editor ── */
.dp-textblock-container[b-4420o9711m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-label[b-4420o9711m] {
    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-4420o9711m] {
    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-4420o9711m] {
        outline: none;
        border-color: #000061;
        box-shadow: 0 0 0 2px rgba(0,0,97,.08);
    }

    .dp-textblock-input.dp-cell-pending[b-4420o9711m] {
        border-color: #ea580c;
        background: rgba(249, 115, 22, 0.05);
    }

/* ── Graph datapoint series ── */
.dp-graph-hint[b-4420o9711m] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.dp-graph-series-row[b-4420o9711m] {
    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-4420o9711m] { border-color: #9ca3af; background: #f3f4f6; }
.dp-graph-series-expanded[b-4420o9711m]  { border-color: #000061; background: #eff6ff; border-radius: 4px 4px 0 0; }

.dp-graph-series-label[b-4420o9711m] { flex: 1; font-size: 0.85rem; font-weight: 500; color: #374151; }

.dp-series-status[b-4420o9711m] {
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}
.dp-status-ok[b-4420o9711m]   { background: #dcfce7; color: #166534; }
.dp-status-none[b-4420o9711m] { background: #f3f4f6; color: #9ca3af; }

.dp-graph-paste-panel[b-4420o9711m] {
    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-4420o9711m] {
    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-4420o9711m] { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

/* ── Change-arrow insert menu ─────────────────────────────────────────────── */
.dp-arrow-bar[b-4420o9711m] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 6px;
    font-size: 0.8rem;
}

.dp-arrow-bar-label[b-4420o9711m] { color: #6b7280; }

/* The "Icons" button is rendered inside ReportIconPicker (a child component), so this page's scoped CSS only
   reaches it through ::deep under the bar. */
.dp-arrow-bar[b-4420o9711m]  .dp-arrow-btn {
    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-bar[b-4420o9711m]  .dp-arrow-btn:hover { background: #f9fafb; border-color: #9ca3af; }

.dp-arrow-bar-hint[b-4420o9711m] {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.72rem;
}

/* Clipboard-image paste target (per-date image datapoints) */
.img-paste-zone[b-4420o9711m] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

    .img-paste-zone:hover[b-4420o9711m] { border-color: #94a3b8; background: #f3f4f6; }
    .img-paste-zone:focus[b-4420o9711m] { border-color: #000061; background: #eef2ff; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }
    .img-paste-zone.rb-paste-busy[b-4420o9711m] { border-color: #000061; background: #eef2ff; opacity: 0.7; }

.img-paste-icon[b-4420o9711m] { font-size: 1.1rem; line-height: 1; }
.img-paste-text[b-4420o9711m] { line-height: 1.3; }

/* ── AI consistency trigger + modal (text blocks, DA-only) ── */
.dp-ai-sep[b-4420o9711m] {
    margin-left: auto;
    width: 1px;
    height: 16px;
    background: #e5e7eb;
    flex: none;
}

.dp-ai-btn[b-4420o9711m] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.dp-ai-btn:hover[b-4420o9711m] { background: #1d4ed8; }

/* AI modal: engine / model pickers */
.dp-ai-controls[b-4420o9711m] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 6px 0 14px;
}

.dp-ai-ctl[b-4420o9711m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: #374151;
}

.dp-ai-ctl select[b-4420o9711m] {
    font-size: 0.82rem;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    min-width: 180px;
}

.dp-ai-choices[b-4420o9711m] { display: flex; flex-direction: column; gap: 10px; }

.dp-ai-modal-backdrop[b-4420o9711m] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    z-index: 4000;
}

.dp-ai-modal[b-4420o9711m] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4001;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dp-ai-modal-head[b-4420o9711m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: #111827;
}

.dp-ai-modal-x[b-4420o9711m] {
    border: none;
    background: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1;
    padding: 2px;
}

.dp-ai-modal-sub[b-4420o9711m] {
    margin: 0 0 4px;
    font-size: 0.8rem;
    color: #4b5563;
}

.dp-ai-choice[b-4420o9711m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    padding: 10px 12px;
    cursor: pointer;
}

.dp-ai-choice:hover[b-4420o9711m] { background: #eff6ff; border-color: #2563eb; }
.dp-ai-choice strong[b-4420o9711m] { font-size: 0.86rem; color: #111827; }
.dp-ai-choice span[b-4420o9711m] { font-size: 0.74rem; color: #6b7280; }

/* AI modal: cross-report department multi-select */
.dp-ai-depts-wrap[b-4420o9711m] { margin-bottom: 14px; }
.dp-ai-depts[b-4420o9711m] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
    max-height: 140px;
    overflow-y: auto;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
}
.dp-ai-dept[b-4420o9711m] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}
.dp-ai-dept input[b-4420o9711m] { cursor: pointer; }
/* /Components/Pages/General/ReportBuilder/Components/DatapointManager.razor.rz.scp.css */
.dp-manager-empty[b-80sf6i26kp] {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
    margin: 4px 0;
}

.dp-manager-list[b-80sf6i26kp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.dp-manager-row[b-80sf6i26kp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    background: #f9fafb;
}

    .dp-manager-row:hover[b-80sf6i26kp] {
        background: #f3f4f6;
    }

/* ── Type badges ── */
.dp-manager-type-badge[b-80sf6i26kp] {
    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-80sf6i26kp] {
    background: #d1fae5;
    color: #065f46;
}

.dp-badge-text[b-80sf6i26kp] {
    background: #f3f4f6;
    color: #6b7280;
}

.dp-manager-name[b-80sf6i26kp] {
    flex: 1;
    font-size: 0.8rem;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-manager-format-hint[b-80sf6i26kp] {
    font-size: 0.7rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.dp-manager-remove[b-80sf6i26kp] {
    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-80sf6i26kp] {
        color: #b91c1c;
    }
/* /Components/Pages/General/ReportBuilder/Components/DatapointPicker.razor.rz.scp.css */
.dp-picker-wrap[b-s3fuposjno] {
    position: relative;
    width: 100%;
}

.dp-picker-input[b-s3fuposjno] {
    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-s3fuposjno] {
        outline: none;
        border-color: #000061;
    }

.dp-dropdown[b-s3fuposjno] {
    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-s3fuposjno] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

    .dp-option:hover[b-s3fuposjno],
    .dp-option-selected[b-s3fuposjno] {
        background: #f3f4f6;
    }

.dp-option-create[b-s3fuposjno] {
    color: #000061;
    font-style: italic;
    border-top: 1px solid #f3f4f6;
}

    .dp-option-create:hover[b-s3fuposjno] {
        background: #eff6ff;
    }

/* ── Type badges in dropdown ── */
.dp-type-badge[b-s3fuposjno] {
    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-s3fuposjno] {
    background: #d1fae5;
    color: #065f46;
}

.dp-badge-text[b-s3fuposjno] {
    background: #f3f4f6;
    color: #6b7280;
}

.dp-badge-image[b-s3fuposjno] {
    background: #ede9fe;
    color: #5b21b6;
}

/* ── Inline creation form ── */
.dp-create-form[b-s3fuposjno] {
    margin-top: 4px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    padding: 10px 12px;
}

.dp-create-name[b-s3fuposjno] {
    font-size: 0.78rem;
    color: #374151;
    margin: 0 0 8px;
}

.dp-create-type-row[b-s3fuposjno] {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.dp-type-btn[b-s3fuposjno] {
    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-s3fuposjno] {
        background: #f3f4f6;
    }

.dp-type-btn-active[b-s3fuposjno] {
    background: #000061;
    color: white;
    border-color: #000061;
}

    .dp-type-btn-active:hover[b-s3fuposjno] {
        background: #000061;
    }

.dp-create-num-opts[b-s3fuposjno] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.dp-create-label[b-s3fuposjno] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #374151;
}

.dp-create-check-label[b-s3fuposjno] {
    cursor: pointer;
}

.dp-create-num-input[b-s3fuposjno] {
    width: 60px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.78rem;
    color: #374151;
}

.dp-create-actions[b-s3fuposjno] {
    display: flex;
    gap: 6px;
}

.dp-create-confirm[b-s3fuposjno] {
    padding: 4px 10px;
    font-size: 0.78rem;
    background: #000061;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

    .dp-create-confirm:hover[b-s3fuposjno] {
        background: #000080;
    }

.dp-create-cancel[b-s3fuposjno] {
    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-s3fuposjno] {
        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-rj4mlw3jvt] {
    position: relative;
    display: inline-block;
}

.rdp-field[b-rj4mlw3jvt] {
    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-rj4mlw3jvt] {
        border-color: #000061;
    }

/* Blue tint when the selected date has SOME data. */
.rdp-field.rdp-field-hasdata[b-rj4mlw3jvt] {
    background: #e6f3fa;
    border-color: #009DC9;
}

/* Green tint when the selected date has ALL data entered. */
.rdp-field.rdp-field-complete[b-rj4mlw3jvt] {
    background: #e5f6ec;
    border-color: #16a34a;
}

.rdp-field-icon[b-rj4mlw3jvt] {
    font-size: 0.85rem;
    line-height: 1;
}

.rdp-backdrop[b-rj4mlw3jvt] {
    position: fixed;
    inset: 0;
    z-index: 500;
}

.rdp-popup[b-rj4mlw3jvt] {
    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-rj4mlw3jvt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.rdp-nav-btn[b-rj4mlw3jvt] {
    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-rj4mlw3jvt] {
        background: #f3f4f6;
    }

.rdp-nav-label[b-rj4mlw3jvt] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #000061;
}

.rdp-grid[b-rj4mlw3jvt] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.rdp-dow[b-rj4mlw3jvt] {
    margin-bottom: 2px;
}

.rdp-dow-cell[b-rj4mlw3jvt] {
    text-align: center;
    font-size: 0.66rem;
    font-weight: 600;
    color: #9ca3af;
    padding: 2px 0;
}

.rdp-cell[b-rj4mlw3jvt] {
    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-rj4mlw3jvt] {
        background: #f3f4f6;
    }

.rdp-cell-empty[b-rj4mlw3jvt] {
    cursor: default;
}

/* Blue "some data" background — the whole point of the custom picker. */
.rdp-cell.rdp-cell-hasdata[b-rj4mlw3jvt] {
    background: #d7edf8;
    color: #0b5c78;
    font-weight: 600;
}

    .rdp-cell.rdp-cell-hasdata:hover[b-rj4mlw3jvt] {
        background: #c3e4f4;
    }

/* Green "all data entered" background — a fully-complete report date. */
.rdp-cell.rdp-cell-complete[b-rj4mlw3jvt] {
    background: #d6f0e0;
    color: #14652f;
    font-weight: 600;
}

    .rdp-cell.rdp-cell-complete:hover[b-rj4mlw3jvt] {
        background: #c3e8d1;
    }

.rdp-cell.rdp-cell-today[b-rj4mlw3jvt] {
    border-color: #9ca3af;
}

.rdp-cell.rdp-cell-sel[b-rj4mlw3jvt] {
    background: #000061;
    color: white;
    font-weight: 600;
}

    .rdp-cell.rdp-cell-sel:hover[b-rj4mlw3jvt] {
        background: #000061;
    }

.rdp-footer[b-rj4mlw3jvt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #f3f4f6;
}

.rdp-legend[b-rj4mlw3jvt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: #6b7280;
}

.rdp-legend-dot[b-rj4mlw3jvt] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #d7edf8;
    border: 1px solid #a9d5ea;
}

.rdp-legend-dot-complete[b-rj4mlw3jvt] {
    background: #d6f0e0;
    border-color: #9bd5b2;
    margin-left: 6px;
}

.rdp-today-btn[b-rj4mlw3jvt] {
    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-rj4mlw3jvt] {
        background: #f3f4f6;
    }

/* View-only: dates with no data are dimmed and non-clickable. */
.rdp-cell-nodata[b-rj4mlw3jvt] {
    opacity: 0.28;
    cursor: not-allowed;
    filter: grayscale(1);
}

    .rdp-cell-nodata:hover[b-rj4mlw3jvt] { background: none; }

/* Editions mode: the pickable edition dates get an outline so they stand out from the greyed-out rest. */
.rdp-cell.rdp-cell-edition[b-rj4mlw3jvt] { border-color: #000061; }
.rdp-cell[b-rj4mlw3jvt] { position: relative; }
.rdp-pub[b-rj4mlw3jvt] { position: absolute; top: -3px; right: -3px; font-size: 0.55rem; line-height: 1; }
/* /Components/Pages/General/ReportBuilder/Components/Footer/ReportFooterBlock.razor.rz.scp.css */
.report-component-card[b-9mfxvxppss] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-9mfxvxppss] {
    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-9mfxvxppss] { background: #009DC9; }

.component-label[b-9mfxvxppss] { font-size: 0.8rem; font-weight: 500; }

.report-footer[b-9mfxvxppss] {
    display: flex;
    flex-direction: row;
    color: #000061;
    align-items: center;
    padding: 8px 0 0 0;
}

.footer-contact[b-9mfxvxppss] {
    text-align: right;
    width: 28%;
}

.footer-email[b-9mfxvxppss] {
    font-size: 0.8em;
}

.footer-divider[b-9mfxvxppss] {
    background-color: #000061;
    height: 60px;
    width: 1px;
    margin: 0 2%;
}

.footer-disclaimer[b-9mfxvxppss] {
    width: 72%;
    font-size: 0.6em;
    margin-right: 1%;
}
/* /Components/Pages/General/ReportBuilder/Components/Footer/ReportFooterBlockEditModal.razor.rz.scp.css */
.edit-modal-body[b-na07zp8xbm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.edit-section-label[b-na07zp8xbm] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 4px 0;
}

.edit-row[b-na07zp8xbm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-label[b-na07zp8xbm] {
    width: 110px;
    font-size: 0.8rem;
    color: #374151;
    flex-shrink: 0;
}

.edit-input[b-na07zp8xbm] {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
}

.edit-input:focus[b-na07zp8xbm] {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 2px rgba(0,0,97,.1);
}

.visibility-options[b-na07zp8xbm] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1;
}

.visibility-option[b-na07zp8xbm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

.template-option[b-na07zp8xbm] {
    border: 2px solid #000061;
    border-radius: 6px;
    padding: 10px 12px;
}

.template-option-top[b-na07zp8xbm] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.template-name[b-na07zp8xbm] { font-size: 0.85rem; font-weight: 600; color: #111827; }

.template-file[b-na07zp8xbm] {
    font-size: 0.7rem;
    color: #6b7280;
    font-family: monospace;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
}

.template-preview[b-na07zp8xbm] {
    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-na07zp8xbm] {
    transform: scale(0.5);
    transform-origin: top left;
    width: 200%;
    pointer-events: none;
}

.edit-coming-soon[b-na07zp8xbm] {
    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-fc1k7x4wir] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-fc1k7x4wir] {
    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-fc1k7x4wir] { background: #8b5cf6; }

.component-label[b-fc1k7x4wir] { font-size: 0.8rem; font-weight: 500; }

.report-graph-live[b-fc1k7x4wir] {
    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-fc1k7x4wir] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 8px;
}

.graph-svg[b-fc1k7x4wir] {
    width: 100%;
    max-width: 300px;
    height: 80px;
    opacity: 0.5;
}

.empty-placeholder[b-fc1k7x4wir] {
    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-dc4tg0k1wg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.edit-section-label[b-dc4tg0k1wg] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 0;
}

.edit-row[b-dc4tg0k1wg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-label[b-dc4tg0k1wg] {
    width: 120px;
    font-size: 0.8rem;
    color: #374151;
    flex-shrink: 0;
}

.edit-input[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.size-input[b-dc4tg0k1wg] { max-width: 80px; flex: none; }

.edit-divider[b-dc4tg0k1wg] { 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-dc4tg0k1wg] {
    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-dc4tg0k1wg] { border-color: #9ca3af; }
    .theme-swatch.theme-active[b-dc4tg0k1wg] { border-color: #000061; }

.fmt-btn[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { background: #f3f4f6; }
    .fmt-btn-active[b-dc4tg0k1wg] { background: #000061; border-color: #000061; color: white; }
    .fmt-btn-active b[b-dc4tg0k1wg], .fmt-btn-active i[b-dc4tg0k1wg] { color: white; }

/* ── Tab bar ── */
.graph-tab-bar[b-dc4tg0k1wg] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-top: 14px;
    margin-bottom: 10px;
}

.graph-tab-btn[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { color: #374151; background: #f9fafb; }
.graph-tab-active[b-dc4tg0k1wg] { color: #000061; border-bottom-color: #000061; font-weight: 600; }

/* ── Series list ── */
.series-list[b-dc4tg0k1wg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 6px;
}

.series-row[b-dc4tg0k1wg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #374151;
}

.series-type-badge[b-dc4tg0k1wg] {
    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-dc4tg0k1wg]    { background: #059669; }
.series-badge-route[b-dc4tg0k1wg] { background: #2563eb; }

.series-color-picker[b-dc4tg0k1wg] {
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    background: white;
}
.series-dash[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { outline: none; border-color: #000061; }

.series-color-picker[b-dc4tg0k1wg]::-webkit-color-swatch-wrapper { padding: 2px; }
.series-color-picker[b-dc4tg0k1wg]::-webkit-color-swatch { border: none; border-radius: 2px; }

.series-info[b-dc4tg0k1wg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.series-label-input[b-dc4tg0k1wg] {
    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-dc4tg0k1wg]  { border-color: #e5e7eb; background: white; }
.series-label-input:focus[b-dc4tg0k1wg]  { outline: none; border-color: #000061; background: white; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.series-route-path[b-dc4tg0k1wg] {
    font-size: 0.68rem;
    color: #9ca3af;
    padding: 0 6px;
}

.series-no-data[b-dc4tg0k1wg] {
    font-size: 0.68rem;
    color: #f59e0b;
    padding: 0 6px;
    font-style: italic;
}

/* ── Per-series period selector ── */
.series-period-row[b-dc4tg0k1wg] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
    flex-wrap: wrap;
}

.series-period-btn[b-dc4tg0k1wg],
.series-period-type[b-dc4tg0k1wg] {
    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-dc4tg0k1wg],
.series-period-type:hover[b-dc4tg0k1wg] { border-color: #9ca3af; color: #374151; }
.series-period-active[b-dc4tg0k1wg] { background: #000061; color: white; border-color: #000061; }

.series-period-offset[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { outline: none; border-color: #000061; }

.series-period-hint[b-dc4tg0k1wg] {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-left: 2px;
}

.series-cutoff-row[b-dc4tg0k1wg] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px 3px;
    flex-wrap: wrap;
}

.series-cutoff-date[b-dc4tg0k1wg] {
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.7rem;
    color: #374151;
    background: #f9fafb;
}

    .series-cutoff-date:focus[b-dc4tg0k1wg] { outline: none; border-color: #000061; }

.series-remove-btn[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { color: #b91c1c; }

/* ── Drag handle + legend toggle ── */
.series-drag[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { color: #6b7280; }
.series-drag:active[b-dc4tg0k1wg] { cursor: grabbing; }

.series-dragging[b-dc4tg0k1wg] { opacity: 0.5; }

.series-legend-btn[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { color: #cbd5e1; }
.series-legend-btn:hover[b-dc4tg0k1wg] { color: #009DC9; }

/* ── Add series type toggle / buttons ── */
.type-toggle[b-dc4tg0k1wg] { display: flex; gap: 6px; margin-top: 6px; }

.type-btn[b-dc4tg0k1wg] {
    padding: 5px 14px;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}
.type-btn:hover[b-dc4tg0k1wg] { border-color: #9ca3af; }
.type-btn-active[b-dc4tg0k1wg] { background: #000061; color: white; border-color: #000061; }

/* ── Division buttons ── */
.division-row[b-dc4tg0k1wg] { display: flex; gap: 6px; flex-wrap: wrap; }

.div-btn[b-dc4tg0k1wg] {
    padding: 4px 12px;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}
.div-btn:hover[b-dc4tg0k1wg] { border-color: #9ca3af; }
.div-btn-active[b-dc4tg0k1wg] { background: #000061; color: white; border-color: #000061; }

/* ── Route search ── */
.search-wrapper[b-dc4tg0k1wg] { position: relative; }

.route-dropdown[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.route-option:last-child[b-dc4tg0k1wg] { border-bottom: none; }
.route-option:hover[b-dc4tg0k1wg] { background: #eff6ff; }

.route-code[b-dc4tg0k1wg] { font-size: 0.7rem; font-weight: 600; color: #000061; }
.route-desc[b-dc4tg0k1wg] { font-size: 0.8rem; color: #374151; }

/* ── Data tab: datapoint series list ── */
.dp-series-row[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { border-color: #9ca3af; background: #f3f4f6; }
.dp-series-expanded[b-dc4tg0k1wg] { border-color: #000061; background: #eff6ff; border-radius: 4px 4px 0 0; }

.dp-series-label[b-dc4tg0k1wg]  { flex: 1; font-size: 0.85rem; font-weight: 500; color: #374151; }

.dp-series-status[b-dc4tg0k1wg] {
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}
.dp-status-ok[b-dc4tg0k1wg]   { background: #dcfce7; color: #166534; }
.dp-status-none[b-dc4tg0k1wg] { background: #f3f4f6; color: #9ca3af; }

.dp-chevron[b-dc4tg0k1wg] { font-size: 0.55rem; color: #9ca3af; }

/* ── Data paste panel ── */
.dp-paste-panel[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] {
    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-dc4tg0k1wg] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

/* ── Preview ── */
.graph-preview-wrap[b-dc4tg0k1wg] {
    height: 300px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: white;
}

/* ── Date format builder (X-axis) ── */
.date-parts-row[b-dc4tg0k1wg] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 28px;
    padding: 4px 0;
    align-items: center;
}

.date-parts-empty[b-dc4tg0k1wg] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

.date-part-chip[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { line-height: 1.2; }

.date-part-remove[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { opacity: 1; }

.date-part-day[b-dc4tg0k1wg]     { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.date-part-weekday[b-dc4tg0k1wg] { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.date-part-month[b-dc4tg0k1wg]   { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.date-part-year[b-dc4tg0k1wg]    { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.date-part-quarter[b-dc4tg0k1wg] { background: #fef9c3; color: #854d0e; border-color: #fef08a; }
.date-part-week[b-dc4tg0k1wg]    { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.date-part-sep[b-dc4tg0k1wg]     { background: #ffffff; color: #6b7280; border-color: #d1d5db; }

.date-preview[b-dc4tg0k1wg] {
    font-size: 0.78rem;
    color: #374151;
    margin: 2px 0 0;
}

.date-picker-row[b-dc4tg0k1wg] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.date-picker-btn[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { border-color: #9ca3af; }
.date-picker-btn.active[b-dc4tg0k1wg] { background: #000061; color: white; border-color: #000061; }

.date-options-row[b-dc4tg0k1wg] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px 0;
    align-items: center;
    margin-top: 4px;
}

.date-opt-btn[b-dc4tg0k1wg] {
    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-dc4tg0k1wg] { border-color: #000061; color: #000061; background: #eff6ff; }
/* /Components/Pages/General/ReportBuilder/Components/Header/ReportHeaderBlock.razor.rz.scp.css */
.report-component-card[b-tflgzuqhp2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-tflgzuqhp2] {
    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-tflgzuqhp2] { background: #000061; }

.component-label[b-tflgzuqhp2] { 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-tflgzuqhp2] {
    border-radius: 3px;
    transition: outline-color 0.1s, background 0.1s;
    outline: 1px dashed transparent;
}

    .rh-banner-edit .rh-el:hover[b-tflgzuqhp2] {
        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-grihbjoeow] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.edit-section-label[b-grihbjoeow] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 4px 0;
}

.edit-row[b-grihbjoeow] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-label[b-grihbjoeow] {
    width: 70px;
    font-size: 0.8rem;
    color: #374151;
    flex-shrink: 0;
}

.edit-input[b-grihbjoeow] {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #374151;
}

.edit-input:focus[b-grihbjoeow] {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 2px rgba(0,0,97,.1);
}

.template-option[b-grihbjoeow] {
    border: 2px solid #000061;
    border-radius: 6px;
    padding: 10px 12px;
}

.template-option-top[b-grihbjoeow] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.template-name[b-grihbjoeow] { font-size: 0.85rem; font-weight: 600; color: #111827; }

.template-file[b-grihbjoeow] {
    font-size: 0.7rem;
    color: #6b7280;
    font-family: monospace;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
}

.template-preview[b-grihbjoeow] {
    width: 100%;
    height: 110px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: white;
}

.preview-scale-wrapper[b-grihbjoeow] {
    transform: scale(0.38);
    transform-origin: top left;
    width: 263%;
    pointer-events: none;
}

.edit-coming-soon[b-grihbjoeow] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
    margin-top: 4px;
}

/* Bold/Italic/Underline toggle buttons for title + subtitle styling. */
.fmt-btn[b-grihbjoeow] {
    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-grihbjoeow] {
        background: #f3f4f6;
    }

    .fmt-btn.fmt-btn-active[b-grihbjoeow] {
        background: #000061;
        border-color: #000061;
        color: white;
    }
/* /Components/Pages/General/ReportBuilder/Components/Image/ReportImage.razor.rz.scp.css */
.report-component-card[b-p3v5ll3vsw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-p3v5ll3vsw] {
    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-p3v5ll3vsw] {
    background: #f5e150;
}

.component-label[b-p3v5ll3vsw] {
    font-size: 0.8rem;
    font-weight: 500;
}


.report-image-wrap[b-p3v5ll3vsw] {
    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-p3v5ll3vsw] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.image-empty-placeholder[b-p3v5ll3vsw] {
    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-pmtnv83fjo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

/* Title-align buttons — match the rounded look used by the text-block editor (the global sheet only styles the
   active state; the base box is scoped per editor and was missing here, so the buttons showed as plain squares). */
.fmt-btn[b-pmtnv83fjo] {
    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-pmtnv83fjo] {
        background: #f3f4f6;
    }

/* ── Sharing a graph across reports ── */
.dp-shared-note[b-pmtnv83fjo] {
    font-size: 0.78rem;
    color: #1e3a5f;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 8px 10px;
    line-height: 1.4;
}
.dp-share-toggle[b-pmtnv83fjo] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    margin-top: 8px;
    cursor: pointer;
}
.dp-share-attach[b-pmtnv83fjo] {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #374151;
}
    .dp-share-attach > summary[b-pmtnv83fjo] {
        cursor: pointer;
        color: #009DC9;
        font-weight: 600;
    }

/* Segmented toggle + pill buttons (source toggle, crop controls). Defined here because scoped CSS from the
   other modals doesn't reach this one. */
.type-toggle[b-pmtnv83fjo] { display: flex; gap: 6px; margin-top: 6px; }
.type-btn[b-pmtnv83fjo] {
    padding: 5px 14px;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}
.type-btn:hover[b-pmtnv83fjo] { border-color: #9ca3af; }
.type-btn-active[b-pmtnv83fjo] { background: #000061; color: white; border-color: #000061; }

/* Read-only stand-in shown to Design-tier users in place of a data-source control they can't change. */
.src-readonly[b-pmtnv83fjo] {
    font-size: 0.85rem;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 6px 10px;
}

.edit-section-label[b-pmtnv83fjo] {
    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-pmtnv83fjo] {
    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-pmtnv83fjo] {
    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-pmtnv83fjo]        { border-color: #9ca3af; background: #f3f4f6; }
.img-thumb-selected[b-pmtnv83fjo]          { border-color: #000061 !important; background: #eff6ff !important; }

.img-thumb[b-pmtnv83fjo] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 3px;
    background: #f9fafb;
}

.img-thumb-label[b-pmtnv83fjo] {
    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-pmtnv83fjo] {
    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-pmtnv83fjo] { background: #fee2e2; }
.remove-img-btn:disabled[b-pmtnv83fjo]             { 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-pmtnv83fjo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

.theme-swatch[b-pmtnv83fjo] {
    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-pmtnv83fjo]  { border-color: #9ca3af; }
    .theme-swatch.theme-active[b-pmtnv83fjo] { border-color: #000061; }

.edit-input[b-pmtnv83fjo] {
    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-pmtnv83fjo] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.size-input-text[b-pmtnv83fjo] {
    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-pmtnv83fjo] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.edit-divider[b-pmtnv83fjo] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }

/* Clipboard-image paste target */
.img-paste-zone[b-pmtnv83fjo] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

    .img-paste-zone:hover[b-pmtnv83fjo] { border-color: #94a3b8; background: #f3f4f6; }
    .img-paste-zone:focus[b-pmtnv83fjo] { border-color: #000061; background: #eef2ff; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }
    .img-paste-zone.rb-paste-busy[b-pmtnv83fjo] { border-color: #000061; background: #eef2ff; opacity: 0.7; }

.img-paste-icon[b-pmtnv83fjo] { font-size: 1.1rem; line-height: 1; }
.img-paste-text[b-pmtnv83fjo] { line-height: 1.3; }
/* /Components/Pages/General/ReportBuilder/Components/List/ReportList.razor.rz.scp.css */
/* ── Palette card (template mode) ── */
.report-component-card[b-thth2ox0ja] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-thth2ox0ja] {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list-icon[b-thth2ox0ja] {
    background: #EB3871;
}

.list-icon-lines[b-thth2ox0ja] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 14px;
}

    .list-icon-lines span[b-thth2ox0ja] {
        display: block;
        height: 2px;
        background: white;
        border-radius: 1px;
    }

.component-label[b-thth2ox0ja] { font-size: 0.8rem; font-weight: 500; }

/* ── Canvas (view mode) ── */
.list-body[b-thth2ox0ja] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── List resize support ── */
.list-resize-wrap[b-thth2ox0ja] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.list-table[b-thth2ox0ja] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.8rem;
}

/* Cell dividers (column border-right, row border-bottom) are driven entirely by the component's
   border settings, emitted inline in ReportList.razor so they also reach the html2canvas PDF.
   No implicit light-gray lines here — borders off means no cell borders (bar the component border). */
.list-table th[b-thth2ox0ja] {
    padding: 5px 8px;
    font-size: 0.8em;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    text-align: left;
}

.list-table td[b-thth2ox0ja] {
    padding: 5px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    color: #000000;
}

.list-placeholder[b-thth2ox0ja] {
    padding: 12px 8px;
    color: #9ca3af;
    font-style: italic;
    font-size: 0.78rem;
}

/* ── Column resize handle (identical pattern to table) ── */
.col-resize-handle[b-thth2ox0ja] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    margin-left: -3px;
    cursor: col-resize;
    z-index: 15;
}

    .col-resize-handle:hover[b-thth2ox0ja] {
        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-thth2ox0ja]::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-thth2ox0ja]::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-g7lh8qy088] { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }

.edit-section-label[b-g7lh8qy088] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 0;
}

.edit-input[b-g7lh8qy088] {
    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-g7lh8qy088] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.col-add-btn[b-g7lh8qy088] {
    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-g7lh8qy088] { background: #f3f4f6; border-color: #9ca3af; }

.col-remove-btn[b-g7lh8qy088] {
    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-g7lh8qy088] { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.col-remove-btn:disabled[b-g7lh8qy088] { opacity: 0.35; cursor: not-allowed; }

.tb-header-toggle[b-g7lh8qy088] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

.theme-swatch[b-g7lh8qy088] {
    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-g7lh8qy088]  { border-color: #9ca3af; }
    .theme-swatch.theme-active[b-g7lh8qy088] { 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-g7lh8qy088] {
    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-g7lh8qy088] { background: #f3f4f6; }
    .fmt-btn-active[b-g7lh8qy088] { background: #000061; border-color: #000061; color: white; }
    .fmt-btn-active b[b-g7lh8qy088], .fmt-btn-active i[b-g7lh8qy088] { color: white; }

.size-input-text[b-g7lh8qy088] {
    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-g7lh8qy088] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.size-select[b-g7lh8qy088] {
    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-g7lh8qy088] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.edit-divider[b-g7lh8qy088] { 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-pzssoz0hza] { padding: 4px 0; }

.bba-none[b-pzssoz0hza] {
    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-pzssoz0hza] {
    background: #000061;
    color: #fff;
    border-color: #000061;
}

.bba-label[b-pzssoz0hza] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 0 0 8px;
}

.swatch-row[b-pzssoz0hza] { display: flex; flex-wrap: wrap; gap: 6px; }

.swatch[b-pzssoz0hza] {
    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-pzssoz0hza] { outline-color: #9ca3af; }

.swatch-active[b-pzssoz0hza] {
    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-pzssoz0hza] {
    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-pzssoz0hza] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    padding: 0;
    cursor: pointer;
}

.bba-row[b-pzssoz0hza] { display: flex; align-items: center; gap: 10px; }

.bba-sublabel[b-pzssoz0hza] {
    width: 42px;
    font-size: 0.78rem;
    color: #374151;
    flex-shrink: 0;
}

/* Width box: sized like the font-size px box; the shared look comes from ssyreportbuilder.css. */
.bba-num[b-pzssoz0hza] { width: 46px; }
.bba-unit[b-pzssoz0hza] { font-size: 0.72rem; color: #9ca3af; margin-left: -6px; }

.bba-select[b-pzssoz0hza] {
    width: 140px;
    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-pzssoz0hza] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.bba-divider[b-pzssoz0hza] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }

.bba-hidden-toggle[b-pzssoz0hza] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

.bba-hidden-hint[b-pzssoz0hza] { color: #9ca3af; font-size: 0.72rem; }
/* /Components/Pages/General/ReportBuilder/Components/Shared/ColorSelect.razor.rz.scp.css */
.cs-wrap[b-r7bhttevqw] {
    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-r7bhttevqw] {
    display: inline-flex;
    width: 30px;
    height: 26px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

.cs-native input[type="color"][b-r7bhttevqw] {
    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-w6yk5z14e8] {
    position: relative;
    display: inline-flex;
}

.fc-presets-trigger[b-w6yk5z14e8] {
    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-w6yk5z14e8] {
    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-w6yk5z14e8] {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.fc-presets-panel[b-w6yk5z14e8] {
    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-w6yk5z14e8] {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    padding: 0;
}

    .fc-swatch:hover[b-w6yk5z14e8] {
        outline: 2px solid #163E9F;
        outline-offset: 1px;
    }
/* /Components/Pages/General/ReportBuilder/Components/Shared/ReportIconPicker.razor.rz.scp.css */
.ip-wrap[b-3oz3b621vf] {
    position: relative;
    display: inline-flex;
}

/* Positioned in the viewport (fixed) by JS so it escapes overflow:hidden ancestors like the RTE box. */
.ip-pop[b-3oz3b621vf] {
    position: fixed;
    z-index: 3000;
    width: 208px;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.ip-group-label[b-3oz3b621vf] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    margin: 6px 2px 4px;
}

.ip-group-label:first-child[b-3oz3b621vf] {
    margin-top: 0;
}

.ip-grid[b-3oz3b621vf] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.ip-icon[b-3oz3b621vf] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    font-size: 1rem;
    line-height: 1;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    cursor: pointer;
    color: #374151;
}

    .ip-icon:hover[b-3oz3b621vf] {
        background: #eff6ff;
        border-color: #bfdbfe;
    }

/* Colour row: "Auto" (each icon's own colour), preset swatches, then a native colour input. */
.ip-colors[b-3oz3b621vf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.ip-swatch[b-3oz3b621vf] {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
}

.ip-swatch-default[b-3oz3b621vf] {
    width: auto;
    padding: 0 5px;
    background: #fff;
    font-size: 0.68rem;
    color: #374151;
}

.ip-swatch-on[b-3oz3b621vf] {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.ip-custom[b-3oz3b621vf] {
    width: 22px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
/* /Components/Pages/General/ReportBuilder/Components/Shared/ReportRichTextEditor.razor.rz.scp.css */
.rte-wrap[b-bpp501968j] {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.rte-toolbar[b-bpp501968j] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.rte-btn[b-bpp501968j] {
    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-bpp501968j] { background: #eef2ff; }
.rte-clear[b-bpp501968j] { color: #9ca3af; }
.rte-btn-active[b-bpp501968j] { background: #e0e7ff; border-color: #7c3aed; }
.rte-btn:disabled[b-bpp501968j] { opacity: 0.4; cursor: default; }
.rte-btn:disabled:hover[b-bpp501968j] { background: #fff; }

/* Hyperlink input bar, shown under the toolbar when the link button is pressed. */
.rte-linkbar[b-bpp501968j] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    background: #f3f4ff;
    border-bottom: 1px solid #e5e7eb;
}

.rte-linkinput[b-bpp501968j] {
    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-bpp501968j] {
        outline: none;
        border-color: #7c3aed;
    }

.rte-sep[b-bpp501968j] {
    width: 1px;
    height: 18px;
    background: #e5e7eb;
    margin: 0 2px;
}

.rte-color[b-bpp501968j] {
    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-bpp501968j] {
    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-bpp501968j] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    cursor: pointer;
}

.rte-editor[b-bpp501968j] {
    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-bpp501968j] {
    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-bpp501968j]  ul,
.rte-editor[b-bpp501968j]  ol { margin: 4px 0; padding-left: 1.5em; white-space: normal; }
.rte-editor[b-bpp501968j]  li { margin: 2px 0; }
.rte-editor[b-bpp501968j]  ul { list-style: disc; }
.rte-editor[b-bpp501968j]  ul ul { list-style: circle; }
.rte-editor[b-bpp501968j]  ul ul ul { list-style: square; }
.rte-editor[b-bpp501968j]  ol { list-style: decimal; }
.rte-editor[b-bpp501968j]  ol ol { list-style: lower-alpha; }
.rte-editor[b-bpp501968j]  ol ol ol { list-style: lower-roman; }

/* Placeholder when empty */
.rte-editor:empty[b-bpp501968j]::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-bpp501968j] {
    position: relative;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.rte-inline .rte-toolbar[b-bpp501968j] {
    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-bpp501968j] {
    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-bpp501968j] {
    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-ms39sclzwg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-ms39sclzwg] {
    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-ms39sclzwg] { background: #f97316; }

.stack-icon-box[b-ms39sclzwg] {
    width: 16px;
    height: 16px;
    border: 2px dotted rgba(255,255,255,0.9);
    border-radius: 2px;
}

.component-label[b-ms39sclzwg] { font-size: 0.8rem; font-weight: 500; }

/* ── Child component-tab — bottom-left for regular children, top-left for nested stacks ── */
.component-tab[b-ms39sclzwg] {
    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-ms39sclzwg] {
    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-ms39sclzwg] {
    visibility: visible;
    opacity: 0.8;
    pointer-events: auto;
    bottom: auto;
    top: 4px;
}

.stack-child:hover .component-tab-always[b-ms39sclzwg] {
    opacity: 1;
}

.stack-child-edit:hover .component-content[b-ms39sclzwg] {
    outline: 1px dashed #d1d5db;
    border-radius: 2px;
}

.tab-label[b-ms39sclzwg] {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    margin-right: 4px;
}

.tab-btn[b-ms39sclzwg] {
    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-ms39sclzwg] { background: rgba(255,255,255,.28); }

    .tab-btn.tab-unstack[b-ms39sclzwg] { background: rgba(234,88,12,.75); }

        .tab-btn.tab-unstack:hover[b-ms39sclzwg] { background: rgba(234,88,12,1); }

    .tab-btn.tab-delete[b-ms39sclzwg] { background: rgba(185,28,28,.7); }

        .tab-btn.tab-delete:hover[b-ms39sclzwg] { background: rgba(185,28,28,.9); }

/* ── Stack body ── */
.stack-body[b-ms39sclzwg] {
    box-sizing: border-box;
}

/* Subtle always-on outline so nested stacks are visible in edit mode */
.stack-body.stack-edit-mode[b-ms39sclzwg] {
    outline: 1px dashed rgba(249, 115, 22, 0.35);
    outline-offset: -1px;
    border-radius: 2px;
}

.stack-empty-hint[b-ms39sclzwg] {
    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-ms39sclzwg] {
    box-sizing: border-box;
    width: 100%;
}

.stack-child-edit[b-ms39sclzwg] {
    cursor: grab;
}

    .stack-child-edit:active[b-ms39sclzwg] {
        cursor: grabbing;
    }

/* Style mode: a per-date override hides this child — ghost it so it can be unhidden. */
.stack-child-style-hidden[b-ms39sclzwg] {
    opacity: 0.35;
    outline: 1px dashed #9ca3af;
}

    .stack-child-edit .component-content[b-ms39sclzwg] {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

/* ── Stack drop-target highlight (shown while dragging from palette) ── */
.stack-body.stack-drop-target[b-ms39sclzwg] {
    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-ms39sclzwg] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 20;
}

    .stack-child-w-resize:hover[b-ms39sclzwg] {
        background: rgba(0, 0, 97, 0.12);
    }

/* ── Per-child height resize handle (bottom edge, Table/Graph/Image only) ── */
.stack-child-h-resize[b-ms39sclzwg] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 20;
}

    .stack-child-h-resize:hover[b-ms39sclzwg] {
        background: rgba(0, 0, 97, 0.12);
    }

.stack-fill-label[b-ms39sclzwg] {
    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-ms39sclzwg] {
        margin: 0;
        cursor: pointer;
    }
/* /Components/Pages/General/ReportBuilder/Components/Stack/ReportStackEditModal.razor.rz.scp.css */
/* ── Shared layout ── */
.edit-modal-body[b-gzjdmsvo3k] { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }

.edit-section-label[b-gzjdmsvo3k] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 8px 0 4px;
}

.edit-row[b-gzjdmsvo3k] { display: flex; align-items: center; gap: 12px; }

.edit-label[b-gzjdmsvo3k] {
    width: 100px;
    font-size: 0.8rem;
    color: #374151;
    flex-shrink: 0;
}

.edit-input[b-gzjdmsvo3k], .edit-select[b-gzjdmsvo3k] {
    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-gzjdmsvo3k], .edit-select:focus[b-gzjdmsvo3k] {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 2px rgba(0,0,97,.1);
}

.edit-divider[b-gzjdmsvo3k] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }

/* ── Child order list ── */
.child-order-list[b-gzjdmsvo3k] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 4px;
}

.child-order-list.child-order-row[b-gzjdmsvo3k] {
    flex-direction: row;
    flex-wrap: wrap;
}

.child-order-item[b-gzjdmsvo3k] {
    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-gzjdmsvo3k] { cursor: grabbing; }

    .child-order-item.child-order-drag-over[b-gzjdmsvo3k] {
        border-color: #000061;
        background: #eff6ff;
    }

.child-order-grip[b-gzjdmsvo3k] {
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.child-order-label[b-gzjdmsvo3k] { flex: 1; font-weight: 500; }

.child-order-num[b-gzjdmsvo3k] {
    font-size: 0.7rem;
    color: #9ca3af;
    background: #f3f4f6;
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
}

/* Direction toggle buttons */
.fmt-btn[b-gzjdmsvo3k] {
    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-gzjdmsvo3k] { background: #f3f4f6; border-color: #9ca3af; }

.fmt-btn-active[b-gzjdmsvo3k] {
    background: #000061;
    border-color: #000061;
    color: #ffffff;
}

    .fmt-btn-active:hover[b-gzjdmsvo3k] { 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-ck40g05dbr] {
    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-ck40g05dbr] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px;
}

.rsp-subtext[b-ck40g05dbr] {
    font-size: 0.74rem;
    color: #6b7280;
    margin: 0 0 12px;
}

/* Pronounced page separator with an inline "Hide page" toggle. */
.rsp-page-head[b-ck40g05dbr] {
    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-ck40g05dbr] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #000061;
}

.rsp-page-hide[b-ck40g05dbr] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
}

    .rsp-page-hide input[b-ck40g05dbr] { cursor: pointer; }

/* Whole page hidden for this date — mute the separator to match the greyed-out components. */
.rsp-page-hidden .rsp-page-head[b-ck40g05dbr] {
    background: #f3f4f6;
    border-left-color: #9ca3af;
}

    .rsp-page-hidden .rsp-page-label[b-ck40g05dbr] { color: #9ca3af; }

.rsp-item[b-ck40g05dbr] {
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    margin-bottom: 6px;
    background: #fafafa;
}

.rsp-item-selected[b-ck40g05dbr] {
    border-color: #7c3aed;
    background: white;
}

.rsp-item-hidden[b-ck40g05dbr] {
    opacity: 0.65;
}

.rsp-item-head[b-ck40g05dbr] {
    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-ck40g05dbr] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #000061;
}

.rsp-item-desc[b-ck40g05dbr] {
    font-size: 0.72rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.rsp-hidden-badge[b-ck40g05dbr] {
    font-size: 0.64rem;
    font-weight: 600;
    color: #b91c1c;
    background: #fee2e2;
    border-radius: 3px;
    padding: 1px 5px;
}

/* Per-date page move */
.rsp-moved-badge[b-ck40g05dbr] {
    font-size: 0.64rem;
    font-weight: 600;
    color: #1d4ed8;
    background: #dbeafe;
    border-radius: 3px;
    padding: 1px 5px;
}
.rsp-move[b-ck40g05dbr] { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.rsp-move-label[b-ck40g05dbr] { font-size: 0.75rem; color: #374151; }
.rsp-move-select[b-ck40g05dbr] { font-size: 0.78rem; padding: 2px 4px; border: 1px solid #d1d5db; border-radius: 4px; }
.rsp-move-back[b-ck40g05dbr] {
    font-size: 0.72rem; padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 4px;
    background: #fff; color: #1d4ed8; cursor: pointer;
}

.rsp-controls[b-ck40g05dbr] {
    padding: 4px 9px 10px;
    border-top: 1px solid #f3f4f6;
}

.rsp-check[b-ck40g05dbr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: #374151;
    margin: 6px 0 8px;
    cursor: pointer;
}

.rsp-grid[b-ck40g05dbr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    margin-bottom: 6px;
}

.rsp-field[b-ck40g05dbr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .rsp-field span[b-ck40g05dbr] {
        font-size: 0.68rem;
        color: #6b7280;
    }

    .rsp-field input[b-ck40g05dbr] {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        padding: 3px 6px;
        font-size: 0.78rem;
        box-sizing: border-box;
    }

.rsp-check[b-ck40g05dbr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: #374151;
    margin-bottom: 4px;
    cursor: pointer;
}
.rsp-check input[b-ck40g05dbr] { cursor: pointer; }

.rsp-hint[b-ck40g05dbr] {
    font-size: 0.68rem;
    color: #9ca3af;
    margin: 2px 0 6px;
}

.rsp-note[b-ck40g05dbr] {
    font-size: 0.74rem;
    color: #b45309;
    background: #fef3c7;
    border-radius: 4px;
    padding: 6px 8px;
    margin: 6px 9px 10px;
}

.rsp-reset-btn[b-ck40g05dbr] {
    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-ck40g05dbr] {
        background: #f3f4f6;
    }
/* /Components/Pages/General/ReportBuilder/Components/Table/ReportTable.razor.rz.scp.css */
.report-component-card[b-t7uesv3njz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-t7uesv3njz] {
    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-t7uesv3njz] { background: #10b981; }

.table-icon-grid[b-t7uesv3njz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    width: 16px;
    height: 16px;
}

    .table-icon-grid span[b-t7uesv3njz] {
        background: white;
        border-radius: 1px;
    }

.component-label[b-t7uesv3njz] { font-size: 0.8rem; font-weight: 500; }

.report-table[b-t7uesv3njz] {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.data-table[b-t7uesv3njz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.data-table th[b-t7uesv3njz],
.data-table td[b-t7uesv3njz] {
    border: none;
    padding: 3px 6px;
    text-align: left;
}

.data-table th[b-t7uesv3njz] { font-weight: 600; }
.data-table td[b-t7uesv3njz] { color: #000000; }
.data-table td.price-col[b-t7uesv3njz] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.empty-placeholder[b-t7uesv3njz] {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.8rem;
    margin: 8px 0 0 0;
    text-align: center;
}

/* ── Table resize support ── */
.table-resize-wrap[b-t7uesv3njz] {
    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-t7uesv3njz] {
    table-layout: fixed;
}

/* Column resize handle — invisible vertical strip on interior column borders */
.col-resize-handle[b-t7uesv3njz] {
    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-t7uesv3njz] {
    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-t7uesv3njz],
.row-resize-handle:hover[b-t7uesv3njz] {
    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-t7uesv3njz]::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-t7uesv3njz]::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-t7uesv3njz]::before { background: rgba(0, 0, 97, 0.55); width: 2px; }
.row-resize-handle:hover[b-t7uesv3njz]::before { background: rgba(0, 0, 97, 0.55); height: 2px; }
/* /Components/Pages/General/ReportBuilder/Components/Table/ReportTableEditModal.razor.rz.scp.css */
/* Read-only stand-in shown to Design-tier users in place of a data-source control they can't change. */
.src-readonly[b-nls2wmin2k] {
    font-size: 0.85rem;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 6px 10px;
}

.edit-modal-body[b-nls2wmin2k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.edit-section-label[b-nls2wmin2k] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 12px 0 4px;
}

.preview-date[b-nls2wmin2k] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #9ca3af;
}

.edit-row[b-nls2wmin2k] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-label[b-nls2wmin2k] {
    width: 120px;
    font-size: 0.8rem;
    color: #374151;
    flex-shrink: 0;
}

.edit-input[b-nls2wmin2k] {
    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-nls2wmin2k] {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 2px rgba(0,0,97,.1);
}

.size-input[b-nls2wmin2k] { max-width: 80px; flex: none; }

.size-input-text[b-nls2wmin2k] {
    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-nls2wmin2k] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

/* ── Cell grid ── */
.cell-grid[b-nls2wmin2k] {
    display: grid;
    gap: 4px;
    margin-top: 4px;
}

/* ── Row / column drag handles ── */
.cell-handle-corner[b-nls2wmin2k] {
    /* empty top-left corner */
}

.cell-col-handle[b-nls2wmin2k] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border-bottom: 1px dashed #e5e7eb;
    min-height: 18px;
}

.cell-row-handle[b-nls2wmin2k] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border-right: 1px dashed #e5e7eb;
}

.cell-drag-handle[b-nls2wmin2k] {
    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-nls2wmin2k] {
    color: #6b7280;
    background: #f3f4f6;
}

.cell-drag-handle:active[b-nls2wmin2k] {
    cursor: grabbing;
}

.cell-drag-over[b-nls2wmin2k] {
    background: #eff6ff !important;
    outline: 1px solid #93c5fd;
    outline-offset: -1px;
    border-radius: 3px;
}

.cell-tile-drag-over[b-nls2wmin2k] {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
}

.cell-tile[b-nls2wmin2k] {
    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-nls2wmin2k] { border-color: #9ca3af; background: #f3f4f6; }

.cell-tile-selected[b-nls2wmin2k] {
    border-color: #000061 !important;
    background: #eff6ff !important;
    color: #000061;
}

.cell-tile-header[b-nls2wmin2k] { background: #f3f4f6; font-weight: 600; }
.cell-tile-header.cell-tile-selected[b-nls2wmin2k] { background: #dbeafe !important; }

/* ── Copy cell → paste onto a selection ── */
.cell-tile-paste-source[b-nls2wmin2k] {
    border-color: #000061 !important;
    background: #e0e7ff !important;
    outline: 2px dashed #000061;
    outline-offset: -3px;
}

.cell-tile-paste-target[b-nls2wmin2k] {
    border-color: #16a34a !important;
    background: #dcfce7 !important;
    color: #166534;
}

/* Excel-style range selection + fill preview + corner fill handle */
.cell-tile-range[b-nls2wmin2k] {
    border-color: #000061 !important;
    background: #e0e7ff !important;
}

.cell-tile-fill[b-nls2wmin2k] {
    border-color: #000061 !important;
    background: #eef2ff !important;
    outline: 1px dashed #000061;
    outline-offset: -2px;
}

.cell-fill-handle[b-nls2wmin2k] {
    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-nls2wmin2k] {
    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-nls2wmin2k] { font-size: 0.75rem; color: #374151; }

.cell-paste-actions[b-nls2wmin2k] { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.cell-paste-apply[b-nls2wmin2k] {
    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-nls2wmin2k] { opacity: 0.5; cursor: default; }
.cell-paste-apply:hover:not(:disabled)[b-nls2wmin2k] { background: #000a80; }

.cell-tile-text[b-nls2wmin2k] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* ── Skeleton paste box (above the cell grid) ── */
.tbl-skel-paste[b-nls2wmin2k] {
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 8px;
    background: #f9fafb;
    margin-bottom: 4px;
}

.tbl-skel-textarea[b-nls2wmin2k] {
    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-nls2wmin2k] {
    font-size: 0.72rem;
    margin-top: 6px;
    padding: 3px 6px;
    border-radius: 4px;
}

.tbl-skel-ok[b-nls2wmin2k]   { color: #065f46; background: #ecfdf5; }
.tbl-skel-warn[b-nls2wmin2k] { color: #92400e; background: #fffbeb; }

.tbl-skel-actions[b-nls2wmin2k] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.tbl-skel-summary[b-nls2wmin2k] { font-size: 0.72rem; color: #065f46; }

/* Inline quick free-text box shown when a cell is double-clicked. */
.cell-inline-input[b-nls2wmin2k] {
    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-nls2wmin2k] {
    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-nls2wmin2k] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

/* ── Cell editor panel ── */
.cell-editor[b-nls2wmin2k] {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    background: #fafafa;
    margin-top: 4px;
}

.type-toggle[b-nls2wmin2k] { display: flex; gap: 6px; margin-top: 6px; }

.type-btn[b-nls2wmin2k] {
    padding: 5px 14px;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}

.type-btn:hover[b-nls2wmin2k] { border-color: #9ca3af; }
.type-btn-active[b-nls2wmin2k] { background: #000061; color: white; border-color: #000061; }

/* DoD change arrow/value order — draggable chips */
.dod-order[b-nls2wmin2k] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dod-chip[b-nls2wmin2k] {
    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-nls2wmin2k] { cursor: grabbing; }
    .dod-chip:hover[b-nls2wmin2k]  { border-color: #000061; }

.dod-grip[b-nls2wmin2k] {
    color: #9ca3af;
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: -2px;
}

/* ── Division buttons ── */
.division-row[b-nls2wmin2k] { display: flex; gap: 6px; flex-wrap: wrap; }

.div-btn[b-nls2wmin2k] {
    padding: 4px 12px;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}

.div-btn:hover[b-nls2wmin2k] { border-color: #9ca3af; }
.div-btn-active[b-nls2wmin2k] { background: #000061; color: white; border-color: #000061; }

/* ── Route search dropdown ── */
.search-wrapper[b-nls2wmin2k] { position: relative; }

.group-dropdown[b-nls2wmin2k] {
    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-nls2wmin2k] { padding: 7px 10px; font-size: 0.8rem; color: #374151; cursor: pointer; }
.group-option:hover[b-nls2wmin2k], .group-option.selected[b-nls2wmin2k] { background: #eff6ff; color: #000061; }

/* ── Date relativity / period ── */
.relativity-row[b-nls2wmin2k], .period-row[b-nls2wmin2k] { display: flex; gap: 6px; flex-wrap: wrap; }

.rel-btn[b-nls2wmin2k] {
    padding: 4px 10px;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}

.rel-btn:hover[b-nls2wmin2k] { border-color: #9ca3af; }
.rel-btn-active[b-nls2wmin2k] { background: #000061; color: white; border-color: #000061; }

/* ── Theme swatches ── */
.theme-row[b-nls2wmin2k] { display: flex; gap: 8px; }

.theme-swatch[b-nls2wmin2k] {
    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-nls2wmin2k] { outline-color: #9ca3af; }

.theme-active[b-nls2wmin2k] {
    border-color: #000061 !important;
    outline-color: #000061 !important;
}

.edit-divider[b-nls2wmin2k] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }

/* ── Cell type colours ── shared between cell tiles and type buttons */
:root[b-nls2wmin2k] {
    --cell-color-freetext: #6b7280;
    --cell-color-route:    #2563eb;
    --cell-color-dp:       #16a34a;
}

.cell-type-freetext[b-nls2wmin2k] { border-left: 3px solid var(--cell-color-freetext) !important; }
.cell-type-route[b-nls2wmin2k]    { border-left: 3px solid var(--cell-color-route) !important; }
.cell-type-datapoint[b-nls2wmin2k]{ border-left: 3px solid var(--cell-color-dp) !important; }
.cell-type-date[b-nls2wmin2k]     { border-left: 3px solid #7c3aed !important; }

.type-btn-freetext:not(.type-btn-active)[b-nls2wmin2k] { border-color: var(--cell-color-freetext); color: var(--cell-color-freetext); }
.type-btn-route:not(.type-btn-active)[b-nls2wmin2k]    { border-color: var(--cell-color-route);    color: var(--cell-color-route); }
.type-btn-datapoint:not(.type-btn-active)[b-nls2wmin2k]{ border-color: var(--cell-color-dp);       color: var(--cell-color-dp); }

/* ── Date format builder ── */
.date-parts-row[b-nls2wmin2k] {
    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-nls2wmin2k] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

.date-part-chip[b-nls2wmin2k] {
    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-nls2wmin2k] { line-height: 1.2; }

.date-part-remove[b-nls2wmin2k] {
    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-nls2wmin2k] { opacity: 1; }

/* Category colours */
.date-part-day[b-nls2wmin2k]     { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.date-part-weekday[b-nls2wmin2k] { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.date-part-month[b-nls2wmin2k]   { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.date-part-year[b-nls2wmin2k]    { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.date-part-quarter[b-nls2wmin2k] { background: #fef9c3; color: #854d0e; border-color: #fef08a; }
.date-part-week[b-nls2wmin2k]    { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.date-part-sep[b-nls2wmin2k]     { background: #ffffff; color: #6b7280; border-color: #d1d5db; }

.date-preview[b-nls2wmin2k] {
    font-size: 0.78rem;
    color: #374151;
    margin: 2px 0 0;
}

.date-picker-row[b-nls2wmin2k] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.date-picker-btn[b-nls2wmin2k] {
    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-nls2wmin2k] { border-color: #9ca3af; }
.date-picker-btn.active[b-nls2wmin2k] { background: #000061; color: white; border-color: #000061; }

.date-options-row[b-nls2wmin2k] {
    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-nls2wmin2k] {
    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-nls2wmin2k] { border-color: #000061; color: #000061; background: #eff6ff; }

/* ── Cell style controls ── */
.clear-style-btn[b-nls2wmin2k] {
    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-nls2wmin2k] { border-color: #9ca3af; color: #374151; }

.fmt-btn[b-nls2wmin2k] {
    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-nls2wmin2k] { border-color: #9ca3af; }
.fmt-btn-active[b-nls2wmin2k] { background: #000061; color: white; border-color: #000061; }
/* /Components/Pages/General/ReportBuilder/Components/TextBlock/ReportTextBlock.razor.rz.scp.css */
.report-component-card[b-nbuqjdsghg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

.component-icon[b-nbuqjdsghg] {
    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-nbuqjdsghg] { background: #3b82f6; }

.component-label[b-nbuqjdsghg] { font-size: 0.8rem; font-weight: 500; }

.tb-header[b-nbuqjdsghg] {
    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-nbuqjdsghg] {
    height: 6px;
    flex-shrink: 0;
    cursor: ns-resize;
    background: #e5e7eb;
    border-top: 1px solid #cbd5e1;
    position: relative;
}

    .tb-header-resize[b-nbuqjdsghg]::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-nbuqjdsghg] {
        background: #dbe3ef;
    }

.textblock-body[b-nbuqjdsghg] {
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-word;
}

.tb-placeholder[b-nbuqjdsghg] {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.8rem;
}
/* /Components/Pages/General/ReportBuilder/Components/TextBlock/ReportTextBlockEditModal.razor.rz.scp.css */
.edit-modal-body[b-e5u1qvsrqt] { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }

.edit-section-label[b-e5u1qvsrqt] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin: 0;
}

.preview-date[b-e5u1qvsrqt] { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9ca3af; }

.source-toggle[b-e5u1qvsrqt] { display: flex; gap: 4px; }

/* Read-only stand-in shown to Design-tier users in place of a data-source control they can't change. */
.src-readonly[b-e5u1qvsrqt] {
    font-size: 0.85rem;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 6px 10px;
}

.src-btn[b-e5u1qvsrqt] {
    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-e5u1qvsrqt] { background: #f3f4f6; }
.src-btn.active[b-e5u1qvsrqt] { background: #000061; border-color: #000061; color: white; }

.tb-header-toggle[b-e5u1qvsrqt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

.theme-swatch[b-e5u1qvsrqt] {
    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-e5u1qvsrqt]  { border-color: #9ca3af; }
    .theme-swatch.theme-active[b-e5u1qvsrqt] { border-color: #000061; }

.search-wrapper[b-e5u1qvsrqt] { position: relative; }

.edit-input[b-e5u1qvsrqt] {
    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-e5u1qvsrqt] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.group-dropdown[b-e5u1qvsrqt] {
    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-e5u1qvsrqt] { padding: 7px 10px; font-size: 0.8rem; color: #374151; cursor: pointer; }
.group-option:hover[b-e5u1qvsrqt], .group-option.selected[b-e5u1qvsrqt] { background: #eff6ff; color: #000061; }

.code-list[b-e5u1qvsrqt] {
    display: flex;
    flex-direction: column;
    max-height: 140px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

.code-option[b-e5u1qvsrqt] {
    padding: 6px 10px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}

.code-option:last-child[b-e5u1qvsrqt] { border-bottom: none; }
.code-option:hover[b-e5u1qvsrqt] { background: #f9fafb; }
.code-option.selected[b-e5u1qvsrqt] { background: #eff6ff; color: #000061; font-weight: 600; }

.loading-text[b-e5u1qvsrqt] { font-size: 0.8rem; color: #6b7280; font-style: italic; }

.fetched-preview[b-e5u1qvsrqt] {
    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-e5u1qvsrqt] {
    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-e5u1qvsrqt] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.format-row[b-e5u1qvsrqt] { display: flex; align-items: center; gap: 12px; }
.format-toolbar[b-e5u1qvsrqt] { display: flex; gap: 4px; }

.fmt-btn[b-e5u1qvsrqt] {
    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-e5u1qvsrqt] { background: #f3f4f6; }
.fmt-btn.active[b-e5u1qvsrqt] { background: #000061; border-color: #000061; color: white; }
.fmt-btn.active strong[b-e5u1qvsrqt], .fmt-btn.active em[b-e5u1qvsrqt] { color: white; }

/* Date format presets — auto-width pills, wrap onto new lines (not the fixed 32px fmt-btn box). */
.date-presets[b-e5u1qvsrqt] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.date-preset-btn[b-e5u1qvsrqt] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 0.78rem;
    color: #374151;
    padding: 4px 10px;
    white-space: nowrap;
    transition: background 0.1s, border-color 0.1s;
}
.date-preset-btn:hover[b-e5u1qvsrqt] { background: #f3f4f6; }
.date-preset-btn.active[b-e5u1qvsrqt] { background: #000061; border-color: #000061; color: white; }

.size-select[b-e5u1qvsrqt] {
    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-e5u1qvsrqt] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.size-input-text[b-e5u1qvsrqt] {
    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-e5u1qvsrqt] { outline: none; border-color: #000061; box-shadow: 0 0 0 2px rgba(0,0,97,.1); }

.edit-divider[b-e5u1qvsrqt] { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0 8px; }

.color-picker-wrap[b-e5u1qvsrqt] {
    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-e5u1qvsrqt] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
    line-height: 1;
    user-select: none;
}

.color-picker-input[b-e5u1qvsrqt] {
    width: 22px;
    height: 22px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
}

.preview-strip[b-e5u1qvsrqt] {
    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-e5u1qvsrqt] { font-size: 0.75rem; color: #9ca3af; font-style: italic; }
/* /Components/Pages/General/ReportBuilder/Pages/ReportsMain.razor.rz.scp.css */
/* ── Outer layout ── */
.report-builder[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    overflow: hidden;
}

/* ── Three-column body below toolbar ── */
.report-body[b-b2h833qkvy] {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 24px;
    padding: 24px;
    overflow: hidden;
}

/* ── Toolbar ── */
.report-toolbar[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.toolbar-label[b-b2h833qkvy] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.toolbar-date[b-b2h833qkvy] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
}

    .toolbar-date:focus[b-b2h833qkvy] {
        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-b2h833qkvy] {
        background: #e6f3fa;
        border-color: #009DC9;
    }

.toolbar-select[b-b2h833qkvy] {
    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-b2h833qkvy] {
    position: relative;
    display: inline-block;
}

.report-picker-btn[b-b2h833qkvy] {
    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-b2h833qkvy] {
        border-color: #9ca3af;
    }

    .report-picker-btn.is-open[b-b2h833qkvy] {
        border-color: #000061;
    }

.report-picker-current[b-b2h833qkvy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-picker-caret[b-b2h833qkvy] {
    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-b2h833qkvy] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.report-picker-panel[b-b2h833qkvy] {
    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-b2h833qkvy] {
    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-b2h833qkvy] {
    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-b2h833qkvy] {
        background: #000061;
        color: #fff;
    }

    .report-picker-newbtn.is-selected[b-b2h833qkvy] {
        background: #eef2ff;
    }

.report-picker-head-label[b-b2h833qkvy] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.report-picker-livewrap[b-b2h833qkvy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    color: #374151;
}

.report-picker-live[b-b2h833qkvy] {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #d1d5db;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s;
}

    .report-picker-live.on[b-b2h833qkvy] {
        background: #16a34a;
    }

.report-picker-live-knob[b-b2h833qkvy] {
    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-b2h833qkvy] {
    left: 18px;
}

.report-picker-empty[b-b2h833qkvy] {
    padding: 10px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
}

.report-picker-dept[b-b2h833qkvy] {
    border-top: 1px solid #f3f4f6;
}

    .report-picker-dept:first-child[b-b2h833qkvy] {
        border-top: none;
    }

.report-picker-dept-head[b-b2h833qkvy] {
    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-b2h833qkvy] {
        background: #f9fafb;
    }

    .report-picker-dept-head.is-open[b-b2h833qkvy] {
        color: #000061;
    }

.report-picker-dept-caret[b-b2h833qkvy] {
    font-size: 1.4rem; /* doubled from 0.7rem — easier to see and hit */
    line-height: 1;
    color: #9ca3af;
    width: 18px;
    flex-shrink: 0;
}

.report-picker-dept-name[b-b2h833qkvy] {
    flex: 1;
}

.report-picker-dept-count[b-b2h833qkvy] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 1px 7px;
}

.report-picker-reports[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    padding: 2px 0 6px 18px;
}

.report-picker-report[b-b2h833qkvy] {
    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-b2h833qkvy] {
        background: #eff6ff;
    }

/* Nested child section rows under a composite parent. */
.report-picker-child[b-b2h833qkvy] {
    padding-left: 24px;
    color: #6b7280;
    font-size: 0.76rem;
}

.report-picker-child-bullet[b-b2h833qkvy] {
    color: #9ca3af;
    margin-right: 2px;
}

.report-picker-composite-badge[b-b2h833qkvy] {
    color: #009DC9;
    margin-right: 5px;
    font-size: 0.72rem;
}

.report-picker-report.is-selected[b-b2h833qkvy] {
    background: #000061;
    color: white;
}

/* A parent report row: expand/collapse caret + the selectable report button side by side. */
.report-picker-report-row[b-b2h833qkvy] {
    display: flex;
    align-items: center;
}

    .report-picker-report-row .report-picker-report[b-b2h833qkvy] {
        flex: 1;
        min-width: 0;
    }

.report-picker-expand[b-b2h833qkvy] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 1.4rem; /* doubled from 0.7rem */
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

    .report-picker-expand:hover[b-b2h833qkvy] {
        background: #eef2ff;
        color: #000061;
    }

    .report-picker-expand.is-open[b-b2h833qkvy] {
        color: #000061;
    }

/* Keeps non-composite report rows aligned with those that have a caret. */
.report-picker-expand-spacer[b-b2h833qkvy] {
    flex: 0 0 auto;
    width: 24px;
}

/* Publishing: badge for a published (locked) report date + the Publish button. */
.rb-pub-badge[b-b2h833qkvy] {
    align-self: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    background: #dcfce7;
    color: #166534;
    white-space: nowrap;
}
.toolbar-btn.rb-publish-btn[b-b2h833qkvy] { border-color: #16a34a; color: #166534; }

.toolbar-btn[b-b2h833qkvy] {
    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-b2h833qkvy] {
        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-b2h833qkvy],
    .toolbar-btn.toolbar-btn-dim:hover[b-b2h833qkvy] {
        background: #f3f4f6;
        border-color: #d1d5db;
        color: #9ca3af;
        cursor: default;
    }

    /* Active/pressed toolbar toggle (e.g. Hide Data engaged). */
    .toolbar-btn.toolbar-btn-active[b-b2h833qkvy] {
        background: #000061;
        border-color: #000061;
        color: white;
    }

.toolbar-mode-btn.mode-edit[b-b2h833qkvy] {
    background: #f0fdf4;
    border-color: #16a34a;
    color: #15803d;
}

.toolbar-mode-btn.mode-view[b-b2h833qkvy] {
    background: #fff7ed;
    border-color: #ea580c;
    color: #c2410c;
}

.toolbar-mode-btn.mode-data[b-b2h833qkvy] {
    background: #fff7f0;
    border-color: #f97316;
    color: #c2410c;
}

/* Active button has full colour; inactive buttons are muted */
.toolbar-mode-btn.mode-style[b-b2h833qkvy] {
    background: #f5f3ff;
    border-color: #7c3aed;
    color: #6d28d9;
}

.toolbar-mode-btn.mode-inactive[b-b2h833qkvy] {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
}

.toolbar-sep[b-b2h833qkvy] {
    width: 1px;
    height: 20px;
    background: #d1d5db;
    flex-shrink: 0;
}

/* ── Palette ── */
.component-palette[b-b2h833qkvy] {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Scroll within the body height (.report-body is overflow:hidden) so every component is reachable. */
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px; /* keep the scrollbar off the cards */
    box-sizing: content-box;
}

    /* Stop flex from squashing the cards to fit instead of letting the palette scroll. */
    .component-palette > *[b-b2h833qkvy] {
        flex-shrink: 0;
    }

/* The palette body is layout-transparent (display:contents) so its children stay direct flex items of the
   palette on desktop — wrapping them only exists so the whole body can be hidden when collapsed on mobile. */
.palette-body[b-b2h833qkvy] {
    display: contents;
}

    .palette-body > *[b-b2h833qkvy] {
        flex-shrink: 0;
    }

/* Edit screen AI view: widen the left pane so the prompt panel has room (the drag palette stays 200px). */
.component-palette.palette-ai[b-b2h833qkvy] {
    width: 320px;
}

/* AI / Manual sub-toggle at the top of the Edit palette (shown only to AI-eligible users). */
.rb-edit-modetoggle[b-b2h833qkvy] {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.rb-edit-modebtn[b-b2h833qkvy] {
    flex: 1;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
}

    .rb-edit-modebtn:hover:not(.rb-edit-modebtn-on)[b-b2h833qkvy] {
        background: #e2e8f0;
    }

    .rb-edit-modebtn-on[b-b2h833qkvy] {
        background: #fff;
        color: #1d4ed8;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

/* Right-hand Edit panel — the per-component editor (replaces the edit popup). A ~400px flex column after the
   canvas; its body scrolls both ways so wide editors (the table cell grid) scroll rather than overflow. */
.rb-edit-sidebar[b-b2h833qkvy] {
    flex: 0 0 480px;
    width: 480px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.rb-edit-head[b-b2h833qkvy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px 8px 0 0;
}

.rb-edit-title[b-b2h833qkvy] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

.rb-edit-close[b-b2h833qkvy] {
    background: none;
    border: none;
    font-size: 1rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 4px;
}

    .rb-edit-close:hover[b-b2h833qkvy] {
        background: #e5e7eb;
        color: #111827;
    }

.rb-edit-body[b-b2h833qkvy] {
    flex: 1;
    min-height: 0;
    overflow: auto;   /* wide content (e.g. the table cell grid) scrolls instead of spilling */
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Section tabs at the top of the Edit panel (Properties + per-type). */
.rb-edit-tabs[b-b2h833qkvy] {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    padding: 8px 10px 0;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    overflow-x: auto;
}

.rb-edit-tab[b-b2h833qkvy] {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 7px 12px;
    cursor: pointer;
    white-space: nowrap;
}

    .rb-edit-tab:hover:not(.rb-edit-tab-on)[b-b2h833qkvy] {
        color: #374151;
    }

    .rb-edit-tab-on[b-b2h833qkvy] {
        color: #1d4ed8;
        border-bottom-color: #1d4ed8;
    }

.rb-edit-tabpane[b-b2h833qkvy] {
    flex: 1;
    min-height: 0;
    overflow: auto;   /* wide content (e.g. the table cell grid) scrolls within the pane */
    padding: 14px;
}

/* Mobile: the Edit panel stacks under the canvas like the other panels. */
@media (max-width: 820px) {
    .rb-edit-sidebar[b-b2h833qkvy] {
        flex: 1 1 auto;
        width: auto;
        max-height: none;
    }
}

/* Collapse toggle is mobile-only; the media query below reveals it. */
.palette-collapse-btn[b-b2h833qkvy] {
    display: none;
}

.palette-heading[b-b2h833qkvy] {
    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-b2h833qkvy] {
    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-b2h833qkvy] {
        background: #eff6ff;
        border-color: #9ca3af;
    }

/* Report Defaults modal — tabs + rows. */
.rd-tabs[b-b2h833qkvy] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 12px;
}

.rd-tab[b-b2h833qkvy] {
    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-b2h833qkvy] {
        color: #374151;
    }

.rd-tab-active[b-b2h833qkvy] {
    color: #000061;
    border-bottom-color: #000061;
}

.rd-body[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 320px;
}

.rd-row[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-label[b-b2h833qkvy] {
    width: 96px;
    flex-shrink: 0;
    font-size: 0.82rem;
    color: #374151;
}

.rd-num[b-b2h833qkvy] {
    width: 70px;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.82rem;
}

.rd-select[b-b2h833qkvy] {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.82rem;
    background: #fff;
}

.rd-unit[b-b2h833qkvy] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.rd-hint[b-b2h833qkvy] {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

.rd-toggle[b-b2h833qkvy] {
    display: flex;
    gap: 6px;
}

.rd-toggle-btn[b-b2h833qkvy] {
    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-b2h833qkvy] {
        border-color: #9ca3af;
    }

.rd-toggle-active[b-b2h833qkvy] {
    background: #000061;
    color: #fff;
    border-color: #000061;
}

/* Edit-live-shared-rate confirm overlay */
.rb-export-note[b-b2h833qkvy] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a5f;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

.rb-export-ok[b-b2h833qkvy] {
    color: #065f46;
    font-size: 0.78rem;
    margin-top: 8px;
}

.rb-export-err[b-b2h833qkvy] {
    color: #dc2626;
    font-size: 0.78rem;
    margin-top: 8px;
}

.palette-styles[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
}

.palette-style-row[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: #374151;
    cursor: pointer;
}

    .palette-style-row > span:first-child[b-b2h833qkvy] {
        flex: 1;
    }

    .palette-style-row input[type="number"][b-b2h833qkvy] {
        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-b2h833qkvy] {
            outline: none;
            border-color: #000061;
            box-shadow: 0 0 0 2px rgba(0,0,97,.1);
        }

.palette-style-unit[b-b2h833qkvy] {
    color: #9ca3af;
    font-size: 0.72rem;
}

.palette-item[b-b2h833qkvy] {
    position: relative;
    cursor: grab;
    user-select: none;
}

    .palette-item:active[b-b2h833qkvy] {
        cursor: grabbing;
        opacity: 0.7;
    }

.palette-disabled[b-b2h833qkvy] {
    opacity: 0.45;
    cursor: not-allowed;
}

.palette-badge[b-b2h833qkvy] {
    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-b2h833qkvy] {
    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-b2h833qkvy] {
    position: relative;
    flex-shrink: 0;
}

.a4-zoom-inner[b-b2h833qkvy] {
    /* The scale transform is set inline (driven by _zoom); origin is top-left so overflow goes right/down
       into the scrollable direction. Deliberately NO will-change: transform — that hint makes Chrome keep
       the page as a cached bitmap drawn at the zoom it was first promoted at and then just stretch it,
       so text went blurry after zooming in. Without it the page is re-drawn sharp at each zoom level. */
    /* 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-b2h833qkvy] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: #e5e7eb;
}

.rb-loading-page[b-b2h833qkvy] {
    width: 794px;
    max-width: 100%;
    height: 70%;
    min-height: 360px;
}

.a4-page[b-b2h833qkvy] {
    position: relative; /* anchor for page-level overlays (the master-page opt-out badge) */
    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-b2h833qkvy] {
    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-b2h833qkvy]::after {
        content: '';
        position: absolute;
        inset: 0;
        border: 1px dashed #d1d5db;
        pointer-events: none;
        z-index: 9999;
    }

.drop-hint[b-b2h833qkvy] {
    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-b2h833qkvy] {
    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;
}

/* Buttons row inside the (column-stacked) new-page hint, so they sit side by side. */
.duplicate-page-actions[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.duplicate-page-btn[b-b2h833qkvy] {
    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-b2h833qkvy] {
        background: #0000a0;
    }

.duplicate-page-text[b-b2h833qkvy] {
    font-size: 0.78rem;
    color: #9ca3af;
}

/* ── Placed items shared ── */
/* Palette cards hand-rolled in this page (Page Number, Guide, Add Section) — the auto-rendered component
   previews carry these classes in their own scoped CSS, so redefine them here to match. */
.report-component-card[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
}

    .report-component-card .component-icon[b-b2h833qkvy] {
        width: 30px;
        height: 30px;
        border-radius: 4px;
        color: #fff;
        font-weight: 700;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .report-component-card .component-label[b-b2h833qkvy] {
        font-size: 0.8rem;
        font-weight: 500;
    }

/* Guide blocks — non-printing grey layout blocks shown on every page in Edit/Style for alignment. */
.rb-guide-block[b-b2h833qkvy] {
    background: rgba(148, 163, 184, 0.18);
    border: 1px dashed rgba(100, 116, 139, 0.55);
    box-sizing: border-box;
}

.rb-guide-fill[b-b2h833qkvy] {
    width: 100%;
    height: 100%;
}
/* Echoed copies (repeated pages) + parent-cascaded guides are non-interactive references. */
.rb-guide-echo[b-b2h833qkvy] {
    pointer-events: none;
    z-index: 1;
}

.rb-guide-parent[b-b2h833qkvy] {
    border-style: dotted;
    background: rgba(0, 157, 201, 0.10);
}

/* Editor-only alignment gridlines (evenly split). First child of .page-canvas so placed components paint over
   them; pointer-events:none so they never block drag/drop. Never printed (render is gated to Edit mode). */
.rb-gridlines[b-b2h833qkvy] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.rb-gridline-v[b-b2h833qkvy] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed rgba(100, 116, 139, 0.45);
}

.rb-gridline-h[b-b2h833qkvy] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed rgba(100, 116, 139, 0.45);
}

/* ── Section placeholder whose section was deleted / unlinked ── */
.rb-sectionref-broken[b-b2h833qkvy] {
    background: repeating-linear-gradient(45deg, #fff7ed, #fff7ed 10px, #ffedd5 10px, #ffedd5 20px);
    border-color: #fb923c;
}

.rb-sectionref-warn[b-b2h833qkvy] {
    margin-top: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #c2410c;
    max-width: 420px;
}

/* ── Pages & sections manager ── */
.rb-pages-list[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rb-page-row[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    cursor: grab;
    user-select: none;
}

    .rb-page-row:hover[b-b2h833qkvy] {
        border-color: #94a3b8;
    }

.rb-page-row-dragging[b-b2h833qkvy] {
    opacity: 0.45;
}

.rb-page-row-section[b-b2h833qkvy] {
    background: #f8fafc;
    border-style: dashed;
    border-color: #94a3b8;
}

.rb-page-row-broken[b-b2h833qkvy] {
    background: #fff7ed;
    border-color: #fb923c;
}

.rb-page-grip[b-b2h833qkvy] {
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
}

.rb-page-num[b-b2h833qkvy] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #000061;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rb-page-body[b-b2h833qkvy] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rb-page-title[b-b2h833qkvy] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
}

.rb-page-detail[b-b2h833qkvy] {
    font-size: 0.74rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-page-row-broken .rb-page-detail[b-b2h833qkvy] {
    color: #c2410c;
    font-weight: 600;
}

.rb-page-badge[b-b2h833qkvy] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #475569;
    background: #e2e8f0;
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 4px;
}

.rb-page-flag[b-b2h833qkvy] {
    font-size: 0.62rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 6px;
}

.rb-page-actions[b-b2h833qkvy] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── DA settings popup: Admin Portal · Recache data · Mimic access, on one row ── */
.rb-settings-row[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .rb-settings-row .rb-settings-btn[b-b2h833qkvy] {
        width: auto;
        white-space: nowrap;
        margin: 0;
    }

.rb-mimic-field[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #374151;
    white-space: nowrap;
    margin: 0;
}

.rb-mimic-chip[b-b2h833qkvy] {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
    font-weight: 600;
}

/* ── Master ("default") page ──
   Components stored on page -1 repeat on every content page. The copies drawn on content pages are
   references only: inert, and behind the page's own components so they can never steal a click or a
   drag. They are edited on the master page itself. */
.rb-master-echo[b-b2h833qkvy] {
    pointer-events: none;
    z-index: 0;
}

/* The master page is pinned above the report and visually set apart from the real pages. */
.rb-master-page[b-b2h833qkvy] {
    outline: 2px dashed #94a3b8;
    outline-offset: 4px;
}

/* Inherited from a parent composite: look but don't touch until "Customise" is pressed. */
.rb-master-page-readonly .page-canvas[b-b2h833qkvy] {
    opacity: 0.85;
}

.rb-master-strip[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 794px;
    margin: 0 auto 8px;
    padding: 8px 12px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
}

.rb-master-strip-title[b-b2h833qkvy] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #000061;
}

.rb-master-strip-note[b-b2h833qkvy] {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 2px;
}

.rb-master-strip-actions[b-b2h833qkvy] {
    display: flex;
    gap: 8px;
}

/* Per-page opt-out badge — sits in the page's bottom-right corner, Edit mode only. */
.rb-master-toggle-page[b-b2h833qkvy] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 300;
    background: rgba(241, 245, 249, 0.92);
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #475569;
    font-size: 0.66rem;
    padding: 2px 7px;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity .15s;
}

.a4-page:hover .rb-master-toggle-page[b-b2h833qkvy] {
    opacity: 1;
}

.rb-master-toggle-page.rb-master-off[b-b2h833qkvy] {
    opacity: 1;
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

/* Section-reference placeholder page (composite): fills the page content area with a labelled grey card. */
.rb-sectionref[b-b2h833qkvy] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #eef2f7 10px, #eef2f7 20px);
    border: 2px dashed #94a3b8;
    box-sizing: border-box;
}

.rb-sectionref-inner[b-b2h833qkvy] {
    text-align: center;
    color: #475569;
    padding: 20px;
}

.rb-sectionref-badge[b-b2h833qkvy] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #64748b;
}

.rb-sectionref-title[b-b2h833qkvy] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000061;
    margin: 6px 0;
}

.rb-sectionref-note[b-b2h833qkvy] {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Composite: section placeholders in the parent's palette. */
.section-placeholders[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.section-ph[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border: 1px dashed #9ca3af;
    border-radius: 5px;
    background: repeating-linear-gradient(45deg, #f9fafb, #f9fafb 6px, #f3f4f6 6px, #f3f4f6 12px);
    cursor: pointer;
    text-align: left;
}

    .section-ph:hover[b-b2h833qkvy] {
        border-color: #000061;
    }

.section-ph-name[b-b2h833qkvy] {
    font-size: 0.8rem;
    color: #374151;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-ph-pages[b-b2h833qkvy] {
    font-size: 0.7rem;
    color: #9ca3af;
    flex-shrink: 0;
}

/* Composite sections manager. */
.sections-list[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.section-row[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #f9fafb;
}

.section-order[b-b2h833qkvy] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #000061;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.section-title[b-b2h833qkvy] {
    flex: 1;
    font-size: 0.85rem;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sections-add[b-b2h833qkvy] {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .sections-add .save-input[b-b2h833qkvy] {
        flex: 1;
    }

/* Layer-order (z-order) control row at the top of the component edit modal. */
.zorder-row[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
    flex-wrap: wrap;
}

.zorder-label[b-b2h833qkvy] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000061;
    margin-right: 2px;
}

.zorder-btn[b-b2h833qkvy] {
    padding: 4px 10px;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}

    .zorder-btn:hover:not(:disabled)[b-b2h833qkvy] {
        border-color: #9ca3af;
        background: #eff6ff;
    }

    .zorder-btn:disabled[b-b2h833qkvy] {
        opacity: 0.4;
        cursor: default;
    }

.placed-item[b-b2h833qkvy] {
    position: relative;
}

    /* Hover no longer re-stacks overlapping components — doing so meant hovering a lower component
   pushed it above the one on top, hiding the top one. Overlaps now keep their TRUE z-order (DOM/stack
   order); the hover just shows the toolbar + outline (below). To reach a component that's behind another,
   click to cycle through the overlapping stack (OnCanvasItemClick), and the SELECTED one is raised below. */

    /* The component being edited/selected is raised to the front and keeps its toolbar shown, so a
   component that was sitting behind another is fully visible and actionable once you've selected it. */
    .placed-item.rb-edit-selected[b-b2h833qkvy] {
        z-index: 200;
    }

        .placed-item.rb-edit-selected .component-tab[b-b2h833qkvy] {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

    /* Explicit focus: hovering a component's resize triangle latches it to the front and keeps its toolbar
   shown, even where another component overlaps it (used while resizing). Set on the triangle's mouseenter
   and cleared on the component's mouseleave (reportBuilder.js focusPlacedItem). */
    .placed-item.rb-active[b-b2h833qkvy] {
        z-index: 200;
    }

        .placed-item.rb-active .component-tab[b-b2h833qkvy] {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

/* Tab overlays at the top-left of the component — no space pushed above */
.component-tab[b-b2h833qkvy] {
    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-b2h833qkvy] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.placed-item:hover .component-content[b-b2h833qkvy] {
    outline: 1.5px solid #000061;
    border-radius: 2px;
}

.tab-label[b-b2h833qkvy] {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    margin-right: 4px;
}

.tab-btn[b-b2h833qkvy] {
    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-b2h833qkvy] {
        background: rgba(255,255,255,.28);
    }

    .tab-btn.tab-remove[b-b2h833qkvy] {
        background: rgba(185,28,28,.7);
    }

        .tab-btn.tab-remove:hover[b-b2h833qkvy] {
            background: rgba(185,28,28,.9);
        }

/* "Page" selector on the component toolbar — styled to match the tab buttons. */
.tab-page-select[b-b2h833qkvy] {
    -webkit-appearance: none;
    appearance: none;
    height: 22px;
    padding: 0 6px;
}

    .tab-page-select option[b-b2h833qkvy] {
        color: #111827;
        background: #ffffff;
    }

/* ── Header placed item ── */
.placed-header[b-b2h833qkvy] {
    margin-top: 4px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* ── Footer placed item ── */
.placed-footer[b-b2h833qkvy] {
    margin-top: auto; /* sticks to the bottom of the flex column */
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* ── Body placed items ── */
.placed-body[b-b2h833qkvy] {
    box-sizing: border-box;
    cursor: grab;
}

    .placed-body:active[b-b2h833qkvy] {
        cursor: grabbing;
    }

    .placed-body .component-content[b-b2h833qkvy] {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

/* ── View mode — hide all edit chrome ── */
.view-mode .component-tab[b-b2h833qkvy] {
    display: none !important;
}

.view-mode .resize-handle[b-b2h833qkvy] {
    display: none !important;
}

.view-mode .placed-item:hover .component-content[b-b2h833qkvy] {
    outline: none;
}

/* View is read-only, so hovering must NOT change the stacking order — the layers stay exactly as authored
   (a graph/image behind an overlaid text block must not jump in front on hover and hide the text). The
   hover-raise + focus-latch are edit affordances, so they're neutralised here. (Edit/Style/Data keep them
   so you can still grab a component sitting behind another.) NB the .view-mode class is applied in both
   View and Data modes; both should hold their stacking. */
.view-mode .placed-item:hover[b-b2h833qkvy],
.view-mode .placed-item.rb-active[b-b2h833qkvy] {
    z-index: auto;
}

.view-mode .placed-body[b-b2h833qkvy] {
    cursor: default;
}

/* ── Resize handles ── */
.resize-handle[b-b2h833qkvy] {
    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-b2h833qkvy] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 16px;
    width: 8px;
    cursor: ew-resize;
    z-index: 9;
}

.resize-handle-s[b-b2h833qkvy] {
    position: absolute;
    left: 0;
    right: 16px;
    bottom: 0;
    height: 8px;
    cursor: ns-resize;
    z-index: 9;
}

    .resize-handle-e:hover[b-b2h833qkvy],
    .resize-handle-s:hover[b-b2h833qkvy] {
        background: rgba(0, 157, 201, 0.35); /* faint SSY-blue tint on hover */
    }

.view-mode .resize-handle-e[b-b2h833qkvy],
.view-mode .resize-handle-s[b-b2h833qkvy] {
    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-b2h833qkvy] {
    outline: 2px solid #009DC9;
    outline-offset: 1px;
}

.view-mode .placed-item.rb-selected[b-b2h833qkvy] {
    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-b2h833qkvy] {
    display: none !important;
}

.style-mode .placed-body[b-b2h833qkvy] {
    cursor: grab;
}

    /* Raise the style-selected component above overlaps so a covered one surfaces once selected (matches the
       Edit panel's rb-edit-selected raise). */
    .style-mode .placed-item.style-selected[b-b2h833qkvy] {
        z-index: 200;
    }

    .style-mode .placed-body.style-selected .component-content[b-b2h833qkvy] {
        outline: 2px dashed #7c3aed !important;
        border-radius: 2px;
    }

    .style-mode .placed-body:not(.style-selected):hover .component-content[b-b2h833qkvy] {
        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-b2h833qkvy] {
    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-b2h833qkvy] {
    pointer-events: none;
}

/* ── Data mode canvas interactions ── */
.data-mode .placed-body[b-b2h833qkvy] {
    cursor: pointer;
    transition: opacity 0.15s;
}

    .data-mode .placed-body.data-dimmed[b-b2h833qkvy] {
        opacity: 0.6;
    }

    .data-mode .placed-body.data-selected .component-content[b-b2h833qkvy] {
        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-b2h833qkvy] {
        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-b2h833qkvy] {
        outline: 2px solid #dc2626;
        border-radius: 2px;
    }

    .data-mode .placed-body.dp-missing:hover .component-content[b-b2h833qkvy] {
        outline: 2px solid #f97316;
    }

    .data-mode .placed-body.dp-complete .component-content[b-b2h833qkvy] {
        outline: 2px solid #009DC9;
        border-radius: 2px;
    }

    .data-mode .placed-body.dp-complete:hover .component-content[b-b2h833qkvy] {
        outline: 2px solid #009DC9;
    }

/* ── Save config form (inside SsyPopup body) ── */
.save-form[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.save-label[b-b2h833qkvy] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
}

.save-input[b-b2h833qkvy] {
    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-b2h833qkvy] {
        outline: none;
        border-color: #000061;
        box-shadow: 0 0 0 2px rgba(0,0,97,.1);
    }

.save-btn-confirm[b-b2h833qkvy] {
    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-b2h833qkvy] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .save-btn-confirm:not(:disabled):hover[b-b2h833qkvy] {
        background: #0000a0;
    }

/* ── edit-input (used inside Roles modal) ── */
.edit-input[b-b2h833qkvy] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: #374151;
    background: white;
    flex: 1;
}

    .edit-input:focus[b-b2h833qkvy] {
        outline: none;
        border-color: #000061;
    }

/* ── edit-section-label (used inside Roles modal) ── */
.edit-section-label[b-b2h833qkvy] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #000061;
    margin: 0 0 2px;
}

/* Shared small controls used by the inline Sections + Page-number editors (these class names come from the
   component edit modals, whose scoped CSS doesn't reach this page). */
.type-toggle[b-b2h833qkvy] {
    display: flex;
    gap: 6px;
}

.type-btn[b-b2h833qkvy] {
    padding: 5px 12px;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
}

    .type-btn:hover[b-b2h833qkvy] {
        border-color: #9ca3af;
    }

    .type-btn.type-btn-active[b-b2h833qkvy] {
        background: #000061;
        color: #fff;
        border-color: #000061;
    }

.fmt-btn[b-b2h833qkvy] {
    min-width: 28px;
    padding: 4px 8px;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #374151;
    cursor: pointer;
}

    .fmt-btn:hover:not(:disabled)[b-b2h833qkvy] {
        border-color: #9ca3af;
    }

    .fmt-btn:disabled[b-b2h833qkvy] {
        opacity: 0.4;
        cursor: default;
    }

    .fmt-btn.fmt-btn-active[b-b2h833qkvy] {
        background: #000061;
        color: #fff;
        border-color: #000061;
    }

.clear-style-btn[b-b2h833qkvy] {
    padding: 4px 8px;
    font-size: 0.76rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
}

    .clear-style-btn:hover[b-b2h833qkvy] {
        border-color: #dc2626;
        color: #dc2626;
    }

.edit-row[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-label[b-b2h833qkvy] {
    font-size: 0.82rem;
    color: #374151;
    min-width: 60px;
}

/* ── Roles modal ── */
.roles-owner[b-b2h833qkvy] {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0 0 4px;
}

.roles-empty[b-b2h833qkvy] {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
    margin: 8px 0 0;
}

.roles-chips[b-b2h833qkvy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    min-height: 28px;
    align-items: center;
    border: 1px dashed transparent; /* reserve space so the drop highlight doesn't shift layout */
    border-radius: 6px;
    padding: 3px;
    transition: background 0.1s, border-color 0.1s;
}

/* Drop-zone highlight while dragging a user chip over a section. */
.roles-chips-dragover[b-b2h833qkvy] {
    border-color: #009DC9;
    background: #e6f3fa;
}

.roles-draghint[b-b2h833qkvy] {
    font-size: 0.72rem;
    color: #9ca3af;
    margin: 2px 0 0;
}

/* A draggable user chip (grab cursor; the × remove button keeps its own pointer). */
.role-chip-draggable[b-b2h833qkvy] {
    cursor: grab;
}

    .role-chip-draggable:active[b-b2h833qkvy] {
        cursor: grabbing;
    }

.roles-chips-empty[b-b2h833qkvy] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

.roles-note[b-b2h833qkvy] {
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
    margin: 6px 0 0;
}

.role-chip[b-b2h833qkvy] {
    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-b2h833qkvy] {
    background: #dbeafe;
    color: #1e3a5f;
}

.role-chip-data[b-b2h833qkvy] {
    background: #d1fae5;
    color: #065f46;
}

.role-chip-view[b-b2h833qkvy] {
    background: #f3f4f6;
    color: #374151;
}

.role-chip-remove[b-b2h833qkvy] {
    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-b2h833qkvy] {
        opacity: 1;
    }

.roles-add-row[b-b2h833qkvy] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}

.user-search-dropdown[b-b2h833qkvy] {
    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-b2h833qkvy] {
    padding: 7px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    .user-search-option:hover[b-b2h833qkvy] {
        background: #f0f4ff;
    }

.user-search-email[b-b2h833qkvy] {
    font-size: 0.8rem;
    color: #1e3a5f;
    font-weight: 500;
}

.user-search-name[b-b2h833qkvy] {
    font-size: 0.72rem;
    color: #6b7280;
}

/* ── "Request a report" message (non-DA-team users with no template selected) ── */
.rb-request-report[b-b2h833qkvy] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.rb-request-card[b-b2h833qkvy] {
    max-width: 460px;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    padding: 28px 32px;
}

.rb-request-title[b-b2h833qkvy] {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: #000061;
}

.rb-request-text[b-b2h833qkvy] {
    margin: 0;
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.5;
}

    .rb-request-text a[b-b2h833qkvy] {
        color: #009DC9;
    }

/* View-only "not published yet" notice — overlays the (empty) canvas. */
.rb-noreport[b-b2h833qkvy] {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #e5e7eb;
    color: #6b7280;
    text-align: center;
    padding: 24px;
}

.rb-noreport-icon[b-b2h833qkvy] {
    font-size: 2.4rem;
    opacity: 0.55;
}

.rb-noreport-title[b-b2h833qkvy] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #374151;
}

.rb-noreport-text[b-b2h833qkvy] {
    font-size: 0.85rem;
}

/* ── AI mode: consistency checker (rb-ai-*) ───────────────────────────────────
   Mode button colour follows the mode-edit/view/data/style pattern above; the
   panel replaces the A4 canvas when _mode == ReportMode.Ai. */
.toolbar-mode-btn.mode-ai[b-b2h833qkvy] {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1d4ed8;
}

.rb-ai-area[b-b2h833qkvy] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
    padding: 32px 24px;
}

/* AI mode is now a two-pane split: this tools sidebar on the left, the live report canvas
   (.a4-scroll-area) on the right (which keeps flex:1 and fills the rest of the row). */
.rb-ai-sidebar[b-b2h833qkvy] {
    flex: 0 0 390px;
    width: 390px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
    padding: 20px 18px;
    background: #f8fafc;
    border-right: 1px solid #e5e7eb;
}

.rb-ai-sidebar .rb-ai-card[b-b2h833qkvy] {
    max-width: none;
    padding: 18px 18px 20px;
}

.rb-ai-prompt-card .rb-ai-beta[b-b2h833qkvy] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 1px 7px;
    vertical-align: middle;
}

.rb-ai-prompt-input[b-b2h833qkvy] {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 250px;
    font: inherit;
    font-size: 0.85rem;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Colour preview swatch shown before a #hex in a proposed change */
.rb-ai-swatch[b-b2h833qkvy] {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0 3px -1px 0;
    vertical-align: baseline;
}

.rb-ai-prompt-input:focus[b-b2h833qkvy] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.rb-ai-prompt-msg[b-b2h833qkvy] {
    margin-top: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
}

.rb-ai-prompt-success[b-b2h833qkvy] { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.rb-ai-prompt-warn[b-b2h833qkvy]    { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.rb-ai-prompt-error[b-b2h833qkvy]   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.rb-ai-prompt-info[b-b2h833qkvy]    { background: #f3f4f6; border-color: #e5e7eb; color: #374151; }

.rb-ai-prompt-save[b-b2h833qkvy] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rb-ai-run-save[b-b2h833qkvy] { background: #15803d; }

.rb-ai-note[b-b2h833qkvy] {
    font-size: 0.75rem;
    color: #6b7280;
}

.rb-ai-usage[b-b2h833qkvy] {
    margin-top: 8px;
    font-size: 0.72rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* AI-mode tool selector (Prompt / Consistency) */
.rb-ai-tool-row[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #374151;
}

.rb-ai-tool-select[b-b2h833qkvy] {
    flex: 1;
    font: inherit;
    font-size: 0.85rem;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
}

/* Review list: proposed changes with confidence + tick/cross */
.rb-ai-proposals[b-b2h833qkvy] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rb-ai-prop[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #1f2937;
    cursor: pointer;
    background: #fff;
}

.rb-ai-prop input[type="checkbox"][b-b2h833qkvy] { flex: 0 0 auto; width: 15px; height: 15px; cursor: pointer; }

.rb-ai-prop-dead[b-b2h833qkvy] { background: #f9fafb; color: #9ca3af; cursor: default; }

.rb-ai-prop-x[b-b2h833qkvy] { flex: 0 0 auto; width: 15px; text-align: center; color: #dc2626; font-weight: 700; }

.rb-ai-prop-desc[b-b2h833qkvy] { flex: 1; line-height: 1.3; }

.rb-ai-prop-conf[b-b2h833qkvy] {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.rb-ai-conf-hi[b-b2h833qkvy] { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.rb-ai-conf-lo[b-b2h833qkvy] { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

.rb-ai-prop-actions[b-b2h833qkvy] { margin-top: 10px; display: flex; gap: 8px; }

.rb-ai-run-ghost[b-b2h833qkvy] { background: #fff; color: #374151; border: 1px solid #d1d5db; }

.rb-ai-card[b-b2h833qkvy] {
    width: 100%;
    max-width: 720px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 24px 28px 28px;
}

.rb-ai-head[b-b2h833qkvy] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.rb-ai-title[b-b2h833qkvy] {
    margin: 0;
    font-size: 1.15rem;
    color: #111827;
}

.rb-ai-provider[b-b2h833qkvy] {
    font-size: 0.75rem;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}

.rb-ai-sub[b-b2h833qkvy] {
    margin: 0 0 18px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #4b5563;
}

.rb-ai-run[b-b2h833qkvy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

    .rb-ai-run:hover:not(:disabled)[b-b2h833qkvy] {
        background: #1d4ed8;
    }

    .rb-ai-run:disabled[b-b2h833qkvy] {
        background: #cbd5e1;
        cursor: not-allowed;
    }

.rb-ai-count[b-b2h833qkvy] {
    margin-top: 8px;
    font-size: 0.78rem;
    color: #6b7280;
}

.rb-ai-running[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 0.85rem;
    color: #4b5563;
}

.rb-ai-spinner[b-b2h833qkvy] {
    width: 18px;
    height: 18px;
    border: 2px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: rb-ai-spin-b-b2h833qkvy 0.8s linear infinite;
}

@keyframes rb-ai-spin-b-b2h833qkvy {
    to {
        transform: rotate(360deg);
    }
}

.rb-ai-results[b-b2h833qkvy] {
    margin-top: 20px;
}

.rb-ai-summary[b-b2h833qkvy] {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #1f2937;
    background: #f9fafb;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.rb-ai-ok[b-b2h833qkvy] {
    font-size: 0.9rem;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px 14px;
}

.rb-ai-error[b-b2h833qkvy] {
    margin-top: 20px;
    font-size: 0.85rem;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 14px;
    line-height: 1.5;
}

.rb-ai-findings[b-b2h833qkvy] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rb-ai-finding[b-b2h833qkvy] {
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    border-radius: 8px;
    padding: 12px 14px;
}

    .rb-ai-finding.rb-ai-contradiction[b-b2h833qkvy] {
        border-left-color: #dc2626;
        background: #fef2f2;
    }

    .rb-ai-finding.rb-ai-warning[b-b2h833qkvy] {
        border-left-color: #d97706;
        background: #fffbeb;
    }

    .rb-ai-finding.rb-ai-info[b-b2h833qkvy] {
        border-left-color: #2563eb;
        background: #eff6ff;
    }

.rb-ai-finding-head[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.rb-ai-sev[b-b2h833qkvy] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #374151;
}

.rb-ai-blocks[b-b2h833qkvy] {
    font-size: 0.72rem;
    color: #6b7280;
}

.rb-ai-issue[b-b2h833qkvy] {
    font-size: 0.88rem;
    color: #111827;
    line-height: 1.45;
}

.rb-ai-detail[b-b2h833qkvy] {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #4b5563;
    line-height: 1.45;
}

.rb-ai-meta[b-b2h833qkvy] {
    margin-top: 16px;
    font-size: 0.72rem;
    color: #9ca3af;
}

.rb-ai-raw[b-b2h833qkvy] {
    margin-top: 8px;
}

    .rb-ai-raw summary[b-b2h833qkvy] {
        cursor: pointer;
    }

    .rb-ai-raw pre[b-b2h833qkvy] {
        white-space: pre-wrap;
        word-break: break-word;
        background: #f9fafb;
        border: 1px solid #eef2f7;
        border-radius: 6px;
        padding: 10px;
        font-size: 0.72rem;
        color: #374151;
        margin-top: 6px;
    }

/* AI mode: engine / model pickers */
.rb-ai-controls[b-b2h833qkvy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}

.rb-ai-ctl[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: #374151;
}

    .rb-ai-ctl select[b-b2h833qkvy],
    .rb-ai-ctl input[b-b2h833qkvy] {
        font-size: 0.85rem;
        padding: 6px 8px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background: #fff;
        min-width: 200px;
    }

.rb-ai-note[b-b2h833qkvy] {
    font-size: 0.75rem;
    color: #b45309;
    align-self: center;
}

/* AI mode: cross-report compare checkbox */
.rb-ai-check[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #374151;
    cursor: pointer;
    flex-basis: 100%;
}

    .rb-ai-check input[b-b2h833qkvy] {
        cursor: pointer;
    }

    .rb-ai-check small[b-b2h833qkvy] {
        color: #6b7280;
    }

/* ── Mobile (phones / narrow) — reachable toolbar + stacked Data mode for on-the-go troubleshooting ── */
@media (max-width: 768px) {
    /* Toolbar: wrap onto multiple rows so every control (Roles, Save Template, …) is visible. Wrapping is
       used instead of horizontal scroll on purpose — a scroll container needs overflow:hidden/auto, which
       clips the report-picker dropdown that pops down out of the toolbar. Wrapping keeps overflow visible so
       dropdowns show. */
    .report-toolbar[b-b2h833qkvy] {
        flex-wrap: wrap;
        row-gap: 6px;
        overflow: visible;
    }
        /* Auto-margins would shove a control onto its own far row when wrapping — neutralise them so the
           buttons pack left-to-right and wrap naturally. */
        .report-toolbar > [style*="margin-left:auto"][b-b2h833qkvy],
        .report-toolbar > [style*="margin-left: auto"][b-b2h833qkvy] {
            margin-left: 0 !important;
        }

    /* Data mode: stack the report (top) above the data-entry panel (bottom) instead of squeezing them side
       by side. The whole body becomes ONE vertical scroller and each part is sized in viewport (vh) units,
       so nothing depends on a fragile definite-height flex chain (a percentage basis collapsing is what hid
       the tables) and there's no confusing nested scrolling — you just scroll the page down to the tables. */
    .rb-body-data[b-b2h833qkvy] {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

        .rb-body-data .a4-scroll-area[b-b2h833qkvy] {
            flex: 0 0 auto;
            height: 34vh; /* small context slice — enough to see and tap a component */
            min-height: 0;
            margin-bottom: 0;
            padding: 10px;
        }
        /* ::deep reaches the child ReportDataPanel's root from this (parent-scoped) rule. It grows with its
           content and the body scrolls to reveal it, so the full data tab (tables included) is reachable. */
        .rb-body-data[b-b2h833qkvy]  .report-data-panel {
            flex: 0 0 auto;
            min-width: 0;
            min-height: 62vh; /* generous room for tables + their controls */
            border-left: none;
            border-top: 2px solid #009DC9;
            overflow: visible; /* let the body be the scroller rather than a nested one */
        }

        .rb-body-data[b-b2h833qkvy]  .dp-body {
            overflow: visible; /* ditto — no inner scroll box on mobile */
        }
        /* Keep the inline data table readable on a narrow panel: give it a sensible minimum and let its
           wrapper scroll sideways when there are many columns, instead of crushing columns to nothing. */
        .rb-body-data[b-b2h833qkvy]  .dp-inline-table-wrap {
            overflow-x: auto;
        }

        .rb-body-data[b-b2h833qkvy]  .dp-inline-table {
            min-width: 460px;
        }

    /* Edit mode: stack the (collapsible) component palette over the canvas instead of squeezing it into a
       narrow side column. Collapsed by default on phones so the canvas has room; tap "Components" to open it
       and drag components on. */
    .rb-body-edit[b-b2h833qkvy] {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        overflow-y: auto;
    }

        .rb-body-edit .component-palette[b-b2h833qkvy] {
            width: auto;
            flex: 0 0 auto;
            max-height: 42vh; /* open palette scrolls within this; canvas keeps its room */
            padding-right: 0;
            border-bottom: 2px solid #009DC9;
        }

            .rb-body-edit .component-palette.palette-collapsed[b-b2h833qkvy] {
                max-height: none; /* just the toggle bar when collapsed */
                overflow: visible;
                border-bottom: 1px solid #e5e7eb;
            }

        .rb-body-edit .a4-scroll-area[b-b2h833qkvy] {
            flex: 1 1 auto;
            min-height: 55vh;
            margin-bottom: 0;
        }

    .palette-collapse-btn[b-b2h833qkvy] {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 8px 10px;
        border: none;
        border-radius: 6px;
        background: #000061;
        color: #fff;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
    }

    .palette-collapsed .palette-body[b-b2h833qkvy] {
        display: none;
    }
}

/* AI mode: cross-report section (department) multi-select */
.rb-ai-dept-wrap[b-b2h833qkvy] {
    margin-top: 8px;
}

.rb-ai-dept-label[b-b2h833qkvy] {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 4px;
}

.rb-ai-depts[b-b2h833qkvy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    max-height: 140px;
    overflow-y: auto;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
}

.rb-ai-dept[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

    .rb-ai-dept input[b-b2h833qkvy] {
        cursor: pointer;
    }

/* ── Import from PDF card (Edit → AI view) ─────────────────────────────── */
.rb-pdfimp[b-b2h833qkvy] {
    margin-top: 14px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.8rem;
    color: #374151;
}

.rb-pdfimp-head[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rb-pdfimp-title[b-b2h833qkvy] {
    font-weight: 600;
    color: #000061;
}

.rb-pdfimp-sub[b-b2h833qkvy] {
    font-size: 0.72rem;
    color: #6b7280;
}

.rb-pdfimp[b-b2h833qkvy]  .rb-pdfimp-file {
    font-size: 0.75rem;
    max-width: 100%;
}

.rb-pdfimp-row[b-b2h833qkvy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rb-pdfimp-lbl[b-b2h833qkvy] {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.rb-pdfimp-page[b-b2h833qkvy] {
    width: 52px;
    padding: 2px 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

.rb-pdfimp-date[b-b2h833qkvy] {
    padding: 2px 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

.rb-pdfimp-btn[b-b2h833qkvy] {
    align-self: flex-start;
    padding: 4px 12px;
    border: 1px solid #000061;
    border-radius: 5px;
    background: #000061;
    color: #fff;
    font-size: 0.78rem;
    cursor: pointer;
}

    .rb-pdfimp-btn:disabled[b-b2h833qkvy] {
        opacity: 0.5;
        cursor: default;
    }

.rb-pdfimp-btn-ghost[b-b2h833qkvy] {
    background: #fff;
    color: #000061;
}

.rb-pdfimp-msg[b-b2h833qkvy] {
    padding: 6px 8px;
    border-radius: 5px;
    font-size: 0.75rem;
    background: #eef2ff;
}

.rb-pdfimp-usage[b-b2h833qkvy] {
    font-size: 0.7rem;
    color: #6b7280;
}

.rb-pdfimp-msg-success[b-b2h833qkvy] { background: #dcfce7; color: #166534; }
.rb-pdfimp-msg-warn[b-b2h833qkvy] { background: #fef3c7; color: #92400e; }
.rb-pdfimp-msg-error[b-b2h833qkvy] { background: #fee2e2; color: #991b1b; }

.rb-pdfimp-notes-lbl[b-b2h833qkvy] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rb-pdfimp-notes[b-b2h833qkvy] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font: inherit;
    resize: vertical;
}
/* /Components/Pages/LNG/ApiSetup/GasRatesSetup.razor.rz.scp.css */
.gasextractbox[b-yx11ahixc4] {
    border: 1px solid #009DC9;
    height: 85vh;
    overflow-y: scroll;
}

.gasextractdatepicker[b-yx11ahixc4] {
}

.gasextractroutepicker[b-yx11ahixc4] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 10px;
}

.gasextractroutepicker-ul[b-yx11ahixc4] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.gasextractroutepicker-ul .chkbox[b-yx11ahixc4] {
    margin: 0 3px 0 0;
    vertical-align: middle;
}


.gasextractroutepicker-ul li[b-yx11ahixc4] {
    text-decoration: none;
}

.gasextractroutepicker-ul li:hover[b-yx11ahixc4] {
    background-color: #B5CBD6;
}


.deleterow[b-yx11ahixc4], .editapiclient[b-yx11ahixc4] {
    cursor: pointer;
    padding-right: 3px;
}

.deleterow:hover[b-yx11ahixc4] {
    font-weight: 700;
    color: white;
}

.draggablerow[b-yx11ahixc4] {
    cursor: pointer;
}

.editapiclient[b-yx11ahixc4] {
    color: #163E9F;
}


.editapiclient:hover[b-yx11ahixc4] {
    font-weight: 700;
    color: #91A527;
}
/* /Components/Pages/LNG/Reports/Forward/Comps/LngFwdPdf.razor.rz.scp.css */
lng-fwd-hide-pdf[b-e4jdtw47q0] {
    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-gv3rk3daez] {
    display: block !important;
}

.lng-fwd-pdf[b-gv3rk3daez]{
    display: none !important;
}

.lng-fwd-refresh-btn[b-gv3rk3daez] {
    background-color: #000061;
    transition: background-color 0.4s ease;
}

    .lng-fwd-refresh-btn:hover[b-gv3rk3daez] {
        background-color: navy;
    }
/* /Components/Pages/LNG/Reports/Sonar/SonarAtlantic.razor.rz.scp.css */
.sonar-rpt-area-banner[b-qzyuk0mo7q] {
    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-qzyuk0mo7q] {
    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-qzyuk0mo7q] {
    background: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.sonar-atl-rpt-content[b-qzyuk0mo7q] {
    background: white;
    height: var(--report-height);
    width: var(--report-width);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sonar-atl-top-row[b-qzyuk0mo7q] {
    border: var(--comp-border);
    width: var(--report-width);
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
}

.sonar-atl-top-left[b-qzyuk0mo7q] {
    width: calc(0.31 * var(--report-width));
}
.sonar-atl-top-mid[b-qzyuk0mo7q] {
    width: calc(0.38 * var(--report-width));
    justify-content: center;
    align-items: center;
    position: relative;
}

.sonar-atl-top-right[b-qzyuk0mo7q] {
    width: calc(0.31 * var(--report-width));
}


.sonar-atl-bottom-row[b-qzyuk0mo7q] {
    border: var(--comp-border);
    height: var(--rpt-atl-bottom-height);
    width: var(--report-width);
}

.sonar-atl-footer[b-qzyuk0mo7q] {
    color: #A1A1A1;
    font-size: 0.75em
}
/* /Components/Pages/LNG/Reports/Sonar/SonarEast.razor.rz.scp.css */
.sonar-rpt-area-banner[b-ginaiidenb] {
    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-ginaiidenb] {
    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-ginaiidenb] {
    background: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.sonar-east-rpt-content[b-ginaiidenb] {
    background: white;
    height: var(--report-height);
    width: var(--report-width);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
} 

.sonar-east-top-row[b-ginaiidenb] {
    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-ginaiidenb] {
    width: 53%;
    position: relative;
    overflow: hidden;

}
.sonar-east-image[b-ginaiidenb] {
    width: 100%;
    border: unset !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sonar-east-mEast-TFDE[b-ginaiidenb] {
    position: absolute;
    transform: translateY(25vh) translateX(16vw);
    font-size: 1.2rem;
    font-weight: 600;
}

.sonar-east-mEast-prompt[b-ginaiidenb] {
    position: absolute;
    transform: translateY(18vh) translateX(16.4vw);
    font-size: 1.6rem;
}

.sonar-east-fEast-TFDE[b-ginaiidenb] {
    position: absolute;
    transform: translateY(14.8vh) translateX(26vw);
    font-size: 1.2rem;
    font-weight: 600;
}

.sonar-east-fEast-indOcean-prompt[b-ginaiidenb] {
    position: absolute;
    transform: translateY(24vh) translateX(10.5vw);
    font-size: 1.6rem;
}
.sonar-east-fEast-philSea-prompt[b-ginaiidenb] {
    position: absolute;
    transform: translateY(9.1vh) translateX(23vw);
    font-size: 1.6rem;
}

.sonar-east-top-right[b-ginaiidenb] {
    height: 100%;
    width: 47%;
}


.sonar-east-bottom-row[b-ginaiidenb] {
    border: var(--comp-border);
    height: var(--rpt-east-bottom-height);
    width: var(--report-width);
}

.sonar-east-footer[b-ginaiidenb] {
    color: #A1A1A1;
    font-size: 0.75em
}

.sonar-east-indices-nav[b-ginaiidenb] {
    display: block;
}
.sonar-east-indices-pdf[b-ginaiidenb] {
    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-00tfjvmbac] {
    --report-height: 68vh;
    --report-width: 67vw;
    --report-font: 1em;
    --report-prompt-font: 1.5em;
    --report-tfde-font: 1.6em;
}

.sonar-top-cont[b-00tfjvmbac] {
    display: flex; 
    flex-direction: row;
    justify-content: center;
}


.sonar-refresh-btn[b-00tfjvmbac] {
    background-color: #000061;
    border-radius: 10px;
}
.sonar-refresh-btn:hover[b-00tfjvmbac] {
    background-color: navy;
}

.sonar-section-btn[b-00tfjvmbac] {
    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-00tfjvmbac] {
    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
   The palette, page geometry and background come from the shared ssy-dash-theme
   class (SsyDashTheme.razor); the --lpgdash-* names the tabs use are aliases of its
   tokens. Children inherit via CSS variable lookup on .lpgdash-dash-wrap. */
.lpgdash-dash-wrap[b-zx2mq0f04c] {
    --lpgdash-brand: var(--ssy-dash-brand);
    --lpgdash-accent: var(--ssy-dash-accent);
    --lpgdash-up: var(--ssy-dash-up);
    --lpgdash-down: var(--ssy-dash-down);
    --lpgdash-warn: var(--ssy-dash-warn);
    --lpgdash-page-bg: var(--ssy-dash-page-bg);
    --lpgdash-text: var(--ssy-dash-text);
    --lpgdash-text-dim: var(--ssy-dash-text-dim);
    --lpgdash-text-muted: var(--ssy-dash-text-muted);
    --lpgdash-divider: var(--ssy-dash-divider);
    --lpgdash-card-border: var(--ssy-dash-border);
    --lpgdash-card-border-soft: var(--ssy-dash-border-soft);
    --lpgdash-row-line: var(--ssy-dash-row-line);
    --lpgdash-row-line-soft: var(--ssy-dash-row-line-soft);
    --lpgdash-row-active-bg: var(--ssy-dash-row-active-bg);
    --lpgdash-surface: var(--ssy-dash-surface);
    --lpgdash-tint-1: var(--ssy-dash-tint-1);
    --lpgdash-tint-2: var(--ssy-dash-tint-2);
    --lpgdash-tint-3: var(--ssy-dash-tint-3);
    --lpgdash-tint-4: var(--ssy-dash-tint-4);
    --lpgdash-tint-5: var(--ssy-dash-tint-5);
    --lpgdash-tint-6: var(--ssy-dash-tint-6);
    --lpgdash-tint-accent: var(--ssy-dash-tint-accent);

    /* Roomier cards than the theme's Dry Bulk default. */
    --ssy-card-pad-x:       10px;
    --ssy-card-pad-top:     8px;
    --ssy-card-pad-bottom:  6px;
}

/* 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-zx2mq0f04c]  .lpgdash-card,
.lpgdash-dash-wrap[b-zx2mq0f04c]  .ssy-card {
    background: var(--lpgdash-surface);
    border: 1px solid var(--lpgdash-card-border);
    border-radius: 4px;
    padding: var(--ssy-card-pad-top) var(--ssy-card-pad-x) var(--ssy-card-pad-bottom);
    min-width: 0;
}

.lpgdash-dash-wrap[b-zx2mq0f04c]  .lpgdash-card-head,
.lpgdash-dash-wrap[b-zx2mq0f04c]  .ssy-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 4px 0;
    gap: 10px;
}

/* Card titles and subtitles: SsyCard.razor.css (DESIGN.md), not restyled here. */
.lpgdash-dash-wrap[b-zx2mq0f04c]  .lpgdash-card-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--lpgdash-brand);
}

.lpgdash-dash-wrap[b-zx2mq0f04c]  .lpgdash-card-desc {
    font-weight: 400;
    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-zx2mq0f04c]  .ssy-chart-card-slot {
    min-width: 0;
}

.lpgdash-dash-wrap[b-zx2mq0f04c]  .ssy-chart-expand {
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-lg);
    opacity: 0.85;
}

.lpgdash-dash-wrap[b-zx2mq0f04c]  .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-zx2mq0f04c]  .ssy-bandbar {
    width: 100%;
    min-width: 0;
}

.lpgdash-dash-wrap[b-zx2mq0f04c]  .ssy-bandtrack {
    position: relative;
    height: 12px; /* layout-lint: allow inside card: band track */
    background: var(--ssy-dash-tint-3, #F1F5F8);
    border: 1px solid var(--lpgdash-card-border);
    border-radius: 2px;
}

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

.lpgdash-dash-wrap[b-zx2mq0f04c]  .ssy-bandmark {
    position: absolute;
}

.lpgdash-dash-wrap[b-zx2mq0f04c]  .ssy-bandmark-baseline {
    top: -1px;
    bottom: -1px;
    border-left: 1px dashed var(--lpgdash-text-muted);
}

.lpgdash-dash-wrap[b-zx2mq0f04c]  .ssy-bandmark-primary {
    top: 50%;
    width: 9px;
    height: 9px; /* layout-lint: allow inside card: band marker */
    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-zx2mq0f04c]  .ssy-bandmark-primary.ssy-hot {
    background: var(--lpgdash-warn);
    box-shadow: 0 0 0 1px var(--lpgdash-warn);
}

.lpgdash-dash-wrap[b-zx2mq0f04c]  .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-zx2mq0f04c]  .lpgdash-placeholder {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-md);
    padding: 20px;
    text-align: center;
}

.lpgdash-dash-wrap[b-zx2mq0f04c]  .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-zx2mq0f04c]  .lpgdash-placeholder-nodata {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-md);
    padding: 20px;
    text-align: center;
}

/* Page gutter. 18px sat under the tab doing nothing while the route tape above it
   scrolled for want of exactly that kind of space. This rule lives here and not in the
   Overview stylesheet because .lpgdash-dash-wrap is the PARENT of .lpgdash-overview -
   a scoped rule in the child cannot reach it, which is why an earlier attempt at this
   silently did nothing. */
.lpgdash-dash-wrap[b-zx2mq0f04c] {
    padding-bottom: 4px;
}

/* The snapshot date on the shell header row, immediately before the action
   buttons. It qualifies every number on the dashboard rather than the arb alone,
   which is why it left the arb control strip - there it read as one more filter.
   Sized and coloured to sit under the buttons, not compete with them. */
/* Selector is deliberately bare, and the variables carry fallbacks. This span
   renders into the SHELL's header, outside .lpgdash-dash-wrap - so a wrapper-scoped
   selector would never match it and the --lpgdash-* variables, which are declared
   on that wrapper, would not resolve. Blazor scoping still contains the rule to
   this component, which is what U4 is actually protecting against. Same
   var(--x, fallback) pattern the shell's own eyebrow rule uses. */
.lpgdash-shell-asof[b-zx2mq0f04c] {
    font-size: var(--ssy-fs-small, 10px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ssy-dash-text-muted, #798E98);
    white-space: nowrap;
    margin-right: 6px;
    align-self: 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-ai1w1griwu] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto; /* layout-lint: allow inside card: release strip */
    align-items: center;
    gap: 6px;
    padding: 0 0 2px 0;
    margin: 0;
    border-bottom: 1px solid var(--lpgdash-divider);
    font-family: inherit;
}

.lpgdash-relstrip[b-ai1w1griwu]  .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-ai1w1griwu] {
    --relstrip-row: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-height: var(--relstrip-row);
    overflow: hidden;
}

.lpgdash-relstrip-pill[b-ai1w1griwu] {
    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; /* layout-lint: allow inside card: release pill */
}

.lpgdash-relstrip-official[b-ai1w1griwu] {
    border-left-color: var(--lpgdash-accent);
}

.lpgdash-relstrip-estimated[b-ai1w1griwu] {
    border-left-color: var(--lpgdash-up);
}

.lpgdash-relstrip-lowerconfidence[b-ai1w1griwu] {
    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-ai1w1griwu] {
    border-left-color: var(--lpgdash-warn);
}

.lpgdash-relstrip-name[b-ai1w1griwu] {
    font-weight: 700;
    color: var(--lpgdash-brand);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.lpgdash-relstrip-when[b-ai1w1griwu] {
    color: var(--lpgdash-text-dim);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.lpgdash-relstrip-confidence[b-ai1w1griwu] {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Full-schedule popover ---------- */

.lpgdash-relstrip-more[b-ai1w1griwu] {
    position: relative;
}

.lpgdash-relstrip-more[b-ai1w1griwu]  .lpgdash-relstrip-all {
    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; /* layout-lint: allow inside card: release list popup */
    font: inherit;
    font-size: var(--ssy-fs-micro);
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: var(--lpgdash-text-dim);
    cursor: pointer;
    white-space: nowrap;
}

.lpgdash-relstrip-more[b-ai1w1griwu]  .lpgdash-relstrip-all:hover,
.lpgdash-relstrip-more[b-ai1w1griwu]  .lpgdash-relstrip-all[aria-expanded="true"] {
    color: var(--lpgdash-brand);
    border-color: var(--lpgdash-accent);
}

.lpgdash-relstrip-pop[b-ai1w1griwu] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lpgdash-relstrip-poprow[b-ai1w1griwu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto; /* layout-lint: allow inside card: popup row */
    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-ai1w1griwu] {
    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) { /* layout-lint: allow inside card: release strip + popup */
    .lpgdash-relstrip[b-ai1w1griwu] {
        grid-template-columns: minmax(0, 1fr) auto; /* layout-lint: allow inside card: release strip columns */
    }

    .lpgdash-relstrip[b-ai1w1griwu]  .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-ai1w1griwu] {
        min-height: 30px; /* layout-lint: allow inside card: release list popup */
        padding-inline: 10px;
    }
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_100_Overview.razor.rz.scp.css */
/* Overview tab. Card, 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
   news rail and module cards.

   Nothing here sets display / height / overflow on an element carrying an
   ssy-fit-* class — the grammar owns that. Shared dashboard components own
   table rendering and table overflow. */

.lpgdash-overview[b-xm3sbnq97s] {
    /* rows come from ssy-fit-grid on the root */
    gap: 6px;
}


/* rows come from ssy-fit-grid on the element */
.lpgdash-ov-main[b-xm3sbnq97s] {
    gap: 6px;
    min-width: 0;
}

.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-ov-tape-card,
.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-ov-curve-card {
    min-width: 0;
}

/* The curve chart fills its card in BOTH modes.

   The shared grammar only releases the chart slot's authored height while pinned
   (SsyDashboardShell: `flex: 1 1 0; min-height: 0` inside the lock). Unlocked, the
   card still stretches to the market row - the row is as tall as the route tape -
   but the slot stayed at the 240px passed to SsyChartCard, leaving the chart short
   of the card holding it. Basis auto rather than 0 so the card still has a natural
   height to contribute when nothing else sizes the row. */
.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-ov-curve-card .ssy-chart-card-slot {
    flex: 1 1 auto;
    min-height: 0;
}

/* ---- News rail ---- */
.lpgdash-overview[b-xm3sbnq97s]  .freight-ov-news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 7px;
}

.lpgdash-overview[b-xm3sbnq97s]  .freight-ov-news-filter {
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 999px;
    background: var(--lpgdash-surface);
    color: var(--lpgdash-text-dim);
    padding: 2px 8px;
    font-family: inherit;
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    cursor: pointer;
}

.lpgdash-overview[b-xm3sbnq97s]  .freight-ov-news-filter:hover {
    color: var(--lpgdash-brand);
}

.lpgdash-overview[b-xm3sbnq97s]  .freight-ov-news-filter-on,
.lpgdash-overview[b-xm3sbnq97s]  .freight-ov-news-filter-on:hover {
    background: var(--lpgdash-brand);
    border-color: var(--lpgdash-brand);
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
}

.lpgdash-overview[b-xm3sbnq97s]  .freight-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);
    text-decoration: none;
}

.lpgdash-overview[b-xm3sbnq97s]  .freight-ov-news-link.freight-news-up {
    border-left-color: var(--lpgdash-up);
}

.lpgdash-overview[b-xm3sbnq97s]  .freight-ov-news-link.freight-news-down {
    border-left-color: var(--lpgdash-down);
}

.lpgdash-overview[b-xm3sbnq97s]  .freight-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-xm3sbnq97s]  .freight-ov-news-link:hover .freight-ov-news-title {
    color: var(--lpgdash-brand);
}

.lpgdash-overview[b-xm3sbnq97s]  .freight-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-xm3sbnq97s]  .freight-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;
}

/* Row separator and rhythm only. The shimmer bars inside are SsySkeleton, which
   owns their height, width and animation - do not restyle them from here. */
.lpgdash-overview[b-xm3sbnq97s]  .freight-ov-news-skeleton {
    padding: 11px 0;
    border-bottom: 1px solid var(--lpgdash-row-line);
}

/* Arbitrage row.
   The columns are NOT pinned here. They used to be
   `minmax(0,1fr) minmax(0,1fr) !important`, which beat the Cols the component
   passes to SsyGrid - so the table could never take the larger share it needs
   now that it carries the incremental-cost column. The component owns the split;
   this owns the gap and the stretch. */
.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-arb-layout {
    gap: 2px;
    align-items: stretch;
}

.lpgdash-overview[b-xm3sbnq97s]  .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. */

/* The right pane is no longer only charts: it holds a command bar plus one of
   four panels, so it stacks rather than laying out two chart columns. The chart
   panel keeps its own two-column grid inside. */
.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-arb-chart-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}


.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-card-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}





.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   Arb row height budget.

   The arb row sits in `.lpgdash-ov-main`, whose rows are `minmax(0,1fr) auto`:
   the route tape takes the fr and CAN shrink to nothing, the arb row is `auto`
   and takes its natural height. So any panel that changes height on the right
   does not push the page down - it moves the tape above it.

   Fix: state both rows' design heights once (house convention for this tab -
   see COMPONENTS.md on design heights) and let the right pane scroll inside
   its band. The left table is ~6 rows plus two header rows plus the control
   strip, which is what 300px is sized to.
   ============================================================ */


.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-arb-table-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-arb-chart-section {
    min-height: 0;
}

/* The arb row's 296px is the workbench root's pinned row (its markup). Its panels fill the row:
   the sections stretch as grid items, the panel's children flex into it, and the chart slot grows
   through ssy-fit-col. Unpinned the row has no height to share, so these change nothing. */
.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-arb-panel > * {
    flex: 1 1 auto;
    min-height: 0;
}

.lpgdash-overview[b-xm3sbnq97s]  .lpgdash-ov-tape-wrap.lpgdash-ov-tape-wrap {
    flex: 0 1 auto;
}



/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_130_Overview_ArbWorkbench.razor.rz.scp.css */
/* ============================================================
   Arb workbench styles.

   These live on the COMPONENT, not on Overview, because the same workbench is
   rendered by two hosts: Overview (_100) and the Arbitrage tab (_900). They used
   to sit in _100_Overview.razor.css, where Blazor's scoping meant they could
   never reach the tab.

   `.lpgdash-arb-root` is this component's single root element, so it carries the
   scope attribute; `::deep` after it reaches the child panels (_132, _136, _138)
   regardless of their own scope. Every selector here follows that shape - do not
   write a bare `.lpgdash-foo`, it will only match this component's own markup.

   Overview's pinned 296px arb row is the root's --ssy-fit-rows (markup), the shell's rule.
   ============================================================ */

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-table-card {
    padding: 10px 12px 8px 12px;
}

/* ============================================================
   Arb workbench: freight-source picker, execution-threshold bands,
   interpolation marking, and the four right-hand panels.
   ============================================================ */

/* ONE controls strip above the whole arb row, not two wrapping rows of labelled
   inputs inside the card header.

   What it replaces: the header carried Basis / terminal fee / Panama / trigger,
   the card body carried a second row of freight-source and routing pickers, and
   the card DESCRIPTION carried "11-Sep-2026 - all $/mt - load basis" - which in
   a narrow title column wrapped to four lines and pushed the table down. The
   date and the basis are controls, so they live with the controls.

   column-gap is larger than row-gap on purpose: when this does wrap, the rows
   should read as one block rather than as separate strips. */
/* Layout of the controls is SsyControlStrip's; this only frames the strip. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-arb-controls {
    padding: 0 0 4px 0;
    margin-bottom: 3px;
    border-bottom: 1px solid var(--lpgdash-row-line);
}

/* The snapshot date. Reads as a stamp, not as an input label. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-arb-stamp {
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--lpgdash-text-muted);
    white-space: nowrap;
}

/* A value the app computed from the input beside it. Deliberately quieter than
   an input and louder than a unit: the terminal fee's $/mt equivalent is the
   number that matters and c/gal is the number that gets typed. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-derived {
    color: var(--lpgdash-text-dim);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-panel-foot {
    margin: 6px 0 0 0;
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-text-muted);
    line-height: 1.35;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-outright {
    font-weight: 700;
    color: var(--lpgdash-brand);
}

/* ---- Sensitivities, cargo P&L, origin competition ---- */

/* The scroll container. Everything the command bar switches between lives in
   here, so no panel can ever drive the row height. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-arb-panel {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Sensitivities was three full-width cards stacked - about 520px of content in a
   300px band. Two columns roughly halves it and the tables are narrow anyway. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-greeks-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* layout-lint: allow inside card: greeks cards inside one panel */
    align-items: start;
    gap: 2px;
}

/* Origin competition used to span 1/-1, which pushed it onto a second row and left
   the third column of the first row empty - 547px of panel in a 272px band for no
   gain. It sits in that column instead. It only spans once the wrap is down to two
   columns, where there is no third column to sit in. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-greeks-wrap > :last-child {
    grid-column: auto; /* layout-lint: allow inside card: greeks last card inside one panel */
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-greeks-card {
    min-width: 0;
}

/* Panel responsiveness. Both of these were left behind by the extraction and had
   to follow: without them the note column never appears on the Arbitrage tab and
   the origin table never spans. Width here is the VIEWPORT, which is the right
   frame for these two - they are about how much room the panel column has, not
   about the shell's fit lock. */

/* ============================================================
   Controls: one row.
   ============================================================ */

/* A hairline between the always-on controls and the voyage inputs that appear
   only when a leg is costed, so the strip reads as two groups rather than one
   long run of boxes. */
.lpgdash-arb-root .lpgdash-ctl-sep[b-re51mrq4sa] {
    width: 1px;
    align-self: stretch;
    min-height: 16px; /* layout-lint: allow inside card: control separator */
    background: var(--lpgdash-row-line);
}

/* ============================================================
   Friction panel, two columns.
   ============================================================ */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* layout-lint: allow internal cells */
    gap: 4px;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* layout-lint: allow internal cells */
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--lpgdash-row-line);
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-window,
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-swap,
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-outright {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    font-size: var(--ssy-fs-small);
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-window span,
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-swap span,
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-outright span {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-micro);
    white-space: nowrap;
}

/* Swap is right-aligned and Diff left-aligned: without a gutter the two headers touch. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-card th:nth-child(3),
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-card td:nth-child(3) {
    padding-left: 10px;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-rung {
    margin-right: 8px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-cashdiff-row output {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Origin competition carries four columns of its own, so it is the card that
   needs the most room - let it take it rather than forcing three equal thirds. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-greeks-wrap {
    column-gap: 8px;
}

/* ============================================================
   The Arbitrage tab grid.

   Twelve columns with explicit spans, not an auto-fit of equal cards. Auto-fit
   is what produced the page this replaced: the table took one track and the
   other panels stacked into a second, so the table's column ran 600px of white
   space while the panel column ran off the bottom of the screen. Spans let the
   table have the width it needs (7/12) and put four cards across a row beneath
   it, which removes the height rather than hiding it behind a sub-tab.

   Row heights are NOT pinned. The tab flows - it is not a fit frame - so each
   band takes its content height, and cards in a band end level because they are
   grid items in one row, not because anything was measured.

   Selectors go through `.lpgdash-arb-root ::deep` like the rest of this file:
   the cells are this component's markup but the cards inside them are not, and
   the grid has to reach both.
   ============================================================ */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-arb-tab + .lpgdash-arb-tab {
    margin-top: 4px;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-arb-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* The card fills its cell, so cards in a band end level. Same fix as the arb row
   on Overview: the grid items always stretched, the cards inside them did not. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-arb-cell > .ssy-card {
    flex: 1 1 auto;
    min-height: 0;
}


/* The three sensitivity cards are placed individually on this tab, so their
   shared wrapper must not impose its own grid on a single child. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-greeks-solo {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-greeks-solo > .ssy-card {
    flex: 1 1 auto;
    min-height: 0;
}

/* ============================================================
   Column heights. Both grid items stretch to the row height; the card inside the
   table item must fill it too, or a short table leaves page background below it
   while the panel beside it runs on. Restored after the table migration dropped it.
   ============================================================ */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-arb-table-section {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-arb-table-section > .ssy-card {
    flex: 1 1 auto;
    min-height: 0;
}

/* Cash diff panel: table and chart side by side; stacked when too narrow to read both. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-arb-panel .lpgdash-cashdiff-pair {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); /* layout-lint: allow inside card: cashdiff pair inside panel */
    align-items: start;
    gap: 2px;
    min-height: 0;
}

@media (max-width: 767px) { /* layout-lint: allow inside card: cashdiff pair */
    .lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-arb-panel .lpgdash-cashdiff-pair {
        grid-template-columns: minmax(0, 1fr); /* layout-lint: allow inside card: cashdiff pair one column */
    }
}

/* Cargo P&L: label | $/mt | its inputs. Costs sit on the line they drive. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr); /* layout-lint: allow inside card: P&L label | value | input */
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    font-size: var(--ssy-fs-small);
    font-variant-numeric: tabular-nums;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl > * {
    min-height: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--lpgdash-row-line);
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl > :nth-child(3n + 1) {
    color: var(--lpgdash-brand);
    font-weight: 800;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl > :nth-child(3n + 2) {
    justify-content: flex-end;
    font-weight: 800;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl > :nth-child(3n) {
    color: var(--lpgdash-text-muted);
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl-in {
    gap: 4px;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl-in .ssy-number-field,
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl-in input {
    max-width: 84px;
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl-hi,
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl-net {
    background: var(--lpgdash-row-alt, #f4f6fa);
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl-net.is-clear {
    background: color-mix(in srgb, var(--lpgdash-up) 14%, transparent);
}

.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-pnl input {
    height: 20px;
    padding-block: 0;
}

/* China and India landed side by side; stacks when the card is narrow. */
.lpgdash-arb-root[b-re51mrq4sa]  .lpgdash-origin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* layout-lint: allow inside card: origin China | India */
    gap: 2px 12px;
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_165_Commodity_Ladder.razor.rz.scp.css */
/* Series chart beside the ladder fills the ladder's height (Height stays the floor). */
.lpgdash-ladder-top[b-ssm3ku6f8u]  .lpgdash-ladder-grid > .ssy-card:last-child {
    display: flex;
    flex-direction: column;
}

.lpgdash-ladder-top[b-ssm3ku6f8u]  .lpgdash-ladder-grid > .ssy-card:last-child .ssy-chart-card-slot {
    flex: 1 1 auto;
    height: auto;
}
/* /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-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-section {
    margin-bottom: 3px;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-section:last-child {
    margin-bottom: 0;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-card,
.lpgdash-usinv-scope[b-vkzf26pxfi]  .ssy-card {
    padding: 4px 9px 3px 9px;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-card-head,
.lpgdash-usinv-scope[b-vkzf26pxfi]  .ssy-card-head {
    margin-bottom: 3px;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-forecast-table-card {
    margin-top: 7px;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-stocktable-card {
    display: flex;
    flex-direction: column;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-paddot {
    display: inline-block;
    width: 7px;
    height: 7px; /* layout-lint: allow inside card: PADD dot */
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: middle;
}

/* ============================================================
   Section 01 (Stocks Snapshot) — hero chart with big-number overlay,
   PADD table with 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-vkzf26pxfi]  .lpgdash-usinv-stocks-chartcard {
    display: flex;
    flex-direction: column;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-stocks-chartarea {
    position: relative;
    flex: 1;
    height: 220px; /* layout-lint: allow inside card: chart design height inside the stocks card */
    min-height: 220px; /* layout-lint: allow inside card: chart design height inside the stocks card */
}

/* 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-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-usinv-stocks-bignum {
    font-size: var(--ssy-fs-display-xl);
    font-weight: 900;
    color: var(--lpgdash-brand);
    letter-spacing: -0.5px;
    line-height: 0.75;
    font-variant-numeric: tabular-nums;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-stocks-bignum-unit {
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-left: 4px;
    vertical-align: 1px;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-usinv-stocks-delta {
    display: inline-flex;
    gap: 4px;
    align-items: baseline;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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: 900;
}

/* ============ 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-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-usinv-rangerow {
    display: grid;
    grid-template-columns: 64px 1fr 64px; /* layout-lint: allow inside card: range row */
    align-items: center;
    gap: 8px;
    font-size: var(--ssy-fs-small);
    font-variant-numeric: tabular-nums;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-rangerow-label {
    color: var(--lpgdash-text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-rangerow-val {
    text-align: right;
    color: var(--lpgdash-text);
    font-weight: 700;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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: 700;
    text-align: center;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-usinv-ngl-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-usinv-ngl-head-month {
    font-size: var(--ssy-fs-display-lg);
    font-weight: 900;
    color: var(--lpgdash-accent);
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-usinv-ngl-total-value {
    font-size: var(--ssy-fs-display-xl);
    font-weight: 900;
    color: var(--lpgdash-brand);
    letter-spacing: -0.5px;
    line-height: 1;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-usinv-ngl-total-delta {
    text-align: right;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-usinv-ngl-total-delta-value {
    font-size: var(--ssy-fs-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-usinv-ngl-stack {
    display: flex;
    gap: 0;
    height: 20px; /* layout-lint: allow inside card: NGL stack bar */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-ngl-stack-segment {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    padding: 0 5px;
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    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-vkzf26pxfi]  .lpgdash-usinv-ngl-stack-segment-tight {
    justify-content: center;
    padding: 0 2px;
    font-size: var(--ssy-fs-tiny);
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-ngl-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* layout-lint: allow internal cells */
    gap: 10px;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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-vkzf26pxfi]  .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-vkzf26pxfi]  .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-vkzf26pxfi]  .lpgdash-usinv-ngl-card-mix {
    color: var(--lpgdash-text-muted);
    margin-bottom: 8px;
    font-weight: 700;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .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: 700;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-ngl-card-delta .ssy-delta-inline,
.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-ngl-total-delta-value .ssy-delta-inline {
    min-width: 0;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-ngl-share-delta {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--lpgdash-text-muted);
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-ngl-card-spark {
    height: 50px; /* layout-lint: allow inside card: NGL card spark */
    margin: 8px -4px -4px -4px;
}

.lpgdash-usinv-scope[b-vkzf26pxfi]  .lpgdash-usinv-ngl-card-spark .ssy-spark-tall {
    height: 50px;
}


/* /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-uf043k9snr]  .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-uf043k9snr]  .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-uf043k9snr]  .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: 700;
    padding: 5px 14px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.4px;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-switch-btn.lpgeco-switch-active {
    background: var(--lpgdash-brand);
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
    border-color: var(--lpgdash-brand);
}

.lpgdash-economics[b-uf043k9snr]  .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. */

/* Result column: sub-tab rail above whichever result surface is selected. */
.lpgdash-economics[b-uf043k9snr]  .lpgeco-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}


/* ============ Inputs card (_410) ============ */
.lpgdash-economics[b-uf043k9snr]  .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-uf043k9snr]  .lpgeco-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, 1.2fr); /* layout-lint: allow inside card: input row */
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: var(--ssy-fs-base);
    color: var(--lpgdash-text);
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-input-row label {
    color: var(--lpgdash-text-dim);
    font-weight: 400;
    letter-spacing: 0.2px;
    min-width: 0;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-label-unit {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 400;
    letter-spacing: 0.2px;
    margin-left: 3px;
    text-transform: none;
    white-space: nowrap;
}

/* Solve-for row uses the full input width for the toggle button group. */
.lpgdash-economics[b-uf043k9snr]  .lpgeco-input-row.lpgeco-solve-row {
    grid-template-columns: 1fr auto; /* layout-lint: allow inside card: solve row */
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-readonly output {
    color: var(--lpgdash-text-dim);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-input-foot {
    margin: 6px 0 0 0;
    font-size: var(--ssy-fs-tiny);
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.2px;
}

/* ============ Breakdown card (_420) ============ */
.lpgdash-economics[b-uf043k9snr]  .lpgeco-breakdown-card {
    padding: 10px 14px 12px 14px;
    min-width: 0;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-breakdown-card .ssy-card-head {
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--lpgdash-divider);
}


.lpgdash-economics[b-uf043k9snr]  .lpgeco-breakdown-card .ssy-card-desc {
    margin-left: auto;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 400;
    letter-spacing: 0.3px;
    text-transform: none;
}

/* Headline numbers */
.lpgdash-economics[b-uf043k9snr]  .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-uf043k9snr]  .lpgeco-headline-main {
    flex: 0 0 auto;
    padding-right: 14px;
    border-right: 1px solid var(--lpgdash-card-border-soft);
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-headline-secondary {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* layout-lint: allow inside card: headline secondary */
    gap: 12px;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-headline-label {
    display: block;
    font-size: var(--ssy-fs-tiny);
    font-weight: 700;
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-headline-value {
    display: block;
    font-size: var(--ssy-fs-display-xl);
    font-weight: 900;
    color: var(--lpgdash-brand);
    letter-spacing: -0.4px;
    line-height: 1.1;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-headline-value .ssy-metric {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.lpgdash-economics[b-uf043k9snr]  .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-uf043k9snr]  .lpgeco-headline-unit {
    font-size: var(--ssy-fs-base);
    font-weight: 400;
    color: var(--lpgdash-text-muted);
    margin-left: 2px;
    letter-spacing: 0;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-headline-value.lpgeco-up,
.lpgdash-economics[b-uf043k9snr]  .lpgeco-headline-value-sm.lpgeco-up { color: var(--lpgdash-up); }

.lpgdash-economics[b-uf043k9snr]  .lpgeco-headline-value.lpgeco-down,
.lpgdash-economics[b-uf043k9snr]  .lpgeco-headline-value-sm.lpgeco-down { color: var(--lpgdash-down); }

/* Waterfall sections */
.lpgdash-economics[b-uf043k9snr]  .lpgeco-breakdown-section {
    margin-top: 10px;
}

.lpgdash-economics[b-uf043k9snr]  .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-uf043k9snr]  .lpgeco-breakdown-row {
    display: grid;
    grid-template-columns: 160px 1fr 120px; /* layout-lint: allow inside card: breakdown row */
    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-uf043k9snr]  .lpgeco-breakdown-row:last-child { border-bottom: 0; }

.lpgdash-economics[b-uf043k9snr]  .lpgeco-bd-detail {
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.2px;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-bd-val {
    text-align: right;
    font-weight: 700;
    color: var(--lpgdash-text);
    font-variant-numeric: tabular-nums;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-bd-subtotal {
    border-top: 1px solid var(--lpgdash-divider);
    margin-top: 4px;
    padding-top: 5px;
    font-weight: 700;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-bd-subtotal .lpgeco-bd-val {
    color: var(--lpgdash-brand);
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-bd-net {
    background: var(--lpgdash-page-bg);
    padding: 6px 8px;
    border-radius: 3px;
    border-bottom: 0;
    margin-top: 4px;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-bd-net.lpgeco-up .lpgeco-bd-val { color: var(--lpgdash-up); }
.lpgdash-economics[b-uf043k9snr]  .lpgeco-bd-net.lpgeco-down .lpgeco-bd-val { color: var(--lpgdash-down); }

.lpgdash-economics[b-uf043k9snr]  .lpgeco-bd-placeholder {
    color: var(--lpgdash-text-muted);
    font-style: italic;
    grid-template-columns: 1fr; /* layout-lint: allow inside card: breakdown placeholder */
}

/* ============ 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-uf043k9snr]  .lpgeco-charts-strip .ssy-card { padding: 8px 10px 6px 10px; }

/* ============ Arb table (_430) ============ */
.lpgdash-economics[b-uf043k9snr]  .lpgeco-arb-card { padding: 10px 14px 10px 14px; }

.lpgdash-economics[b-uf043k9snr]  .lpgeco-arb-foot {
    margin: 6px 0 0 0;
    font-size: var(--ssy-fs-small);
    color: var(--lpgdash-text-muted);
    letter-spacing: 0.2px;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-input-group {
    margin-top: 6px;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-group-label {
    display: block;
    margin: 0 0 2px 0;
    font-size: var(--ssy-fs-tiny);
    font-weight: 700;
    color: var(--lpgdash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-advanced {
    margin-top: 8px;
    border-top: 1px solid var(--lpgdash-divider);
    padding-top: 6px;
}

.lpgdash-economics[b-uf043k9snr]  .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-uf043k9snr]  .lpgeco-advanced-summary:hover {
    color: var(--lpgdash-brand);
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-advanced[open] > .lpgeco-advanced-summary {
    margin-bottom: 4px;
}

/* Port-row layout: label, cost, days and an optional remove action. */
.lpgdash-economics[b-uf043k9snr]  .lpgeco-port-header,
.lpgdash-economics[b-uf043k9snr]  .lpgeco-port-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(72px, 1fr) minmax(64px, 0.7fr) auto; /* layout-lint: allow inside card: port row */
    gap: 4px;
    align-items: center;
    margin-bottom: 3px;
}

.lpgdash-economics[b-uf043k9snr]  .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-uf043k9snr]  .lpgeco-port-row > label {
    font-size: var(--ssy-fs-base);
    color: var(--lpgdash-text-dim);
    font-weight: 400;
    letter-spacing: 0.2px;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-port-row > :not(label) {
    min-width: 0;
}

.lpgdash-economics[b-uf043k9snr]  .lpgeco-port-row-opt > label {
    color: var(--lpgdash-text-muted);
}


/* /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-cz7nzrlxup] {
    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-cz7nzrlxup] {
    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-cz7nzrlxup] {
    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-cz7nzrlxup] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lpgdash-text-dim);
    cursor: pointer;
    font-size: var(--ssy-fs-base);
    font-weight: 400;
    white-space: nowrap;
    flex: 0 0 auto;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail[b-cz7nzrlxup] {
    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-cz7nzrlxup] {
    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-cz7nzrlxup] {
    margin: 0;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-monthbar[b-cz7nzrlxup] {
    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-cz7nzrlxup] {
    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: 700;
    line-height: 1;
    min-width: 28px;
    padding: 5px 9px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-nav:first-child[b-cz7nzrlxup] {
    border-radius: 3px 0 0 3px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-nav:last-child[b-cz7nzrlxup] {
    border-radius: 0 3px 3px 0;
    margin-left: -1px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-nav-today[b-cz7nzrlxup] {
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-base);
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-left: -1px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-nav:hover[b-cz7nzrlxup] {
    border-color: var(--lpgdash-accent);
    position: relative;
    z-index: 1;
}



.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-monthpanel[b-cz7nzrlxup] {
    min-width: 0;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-monthname[b-cz7nzrlxup] {
    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-cz7nzrlxup] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* layout-lint: allow internal cells */
    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-cz7nzrlxup] {
    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-cz7nzrlxup] {
    display: grid;
    align-content: start;
    gap: 3px;
    min-height: 52px; /* layout-lint: allow inside card: calendar day cell */
    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-cz7nzrlxup] {
    background: var(--lpgdash-row-active-bg);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-empty[b-cz7nzrlxup] {
    cursor: default;
    opacity: 0.5;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-daynum[b-cz7nzrlxup] {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-has-holiday .lpgdash-cal-daynum[b-cz7nzrlxup] {
    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-cz7nzrlxup] {
    background: var(--lpgdash-row-active-bg);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-is-today .lpgdash-cal-daynum[b-cz7nzrlxup] {
    color: var(--lpgdash-brand);
    font-weight: 900;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-is-selected[b-cz7nzrlxup] {
    outline: 2px solid var(--lpgdash-accent);
    outline-offset: -2px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-has-holiday[b-cz7nzrlxup] {
    box-shadow: inset 3px 0 0 var(--lpgdash-accent);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-markers[b-cz7nzrlxup] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    line-height: 1.1;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-marker[b-cz7nzrlxup] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    min-height: 16px; /* layout-lint: allow inside card: calendar marker */
    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-cz7nzrlxup] {
    border-style: dashed;
    color: var(--lpgdash-text-muted);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-marker-more[b-cz7nzrlxup] {
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-tiny);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail[b-cz7nzrlxup] {
    display: grid;
    align-items: start;
    gap: 5px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-card-head[b-cz7nzrlxup] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 1px;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail-list[b-cz7nzrlxup],
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-holidays[b-cz7nzrlxup],
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-notes[b-cz7nzrlxup] {
    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-cz7nzrlxup] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr); /* layout-lint: allow inside card: detail row */
    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-cz7nzrlxup] {
    grid-row: 1; /* layout-lint: allow inside card: detail row cell */
    grid-column: 1; /* layout-lint: allow inside card: detail row cell */
    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-cz7nzrlxup] {
    grid-row: 1; /* layout-lint: allow inside card: detail row cell */
    grid-column: 2; /* layout-lint: allow inside card: detail row cell */
    color: var(--lpgdash-text);
    font-weight: 700;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail-row span:last-child[b-cz7nzrlxup] {
    grid-row: 2; /* layout-lint: allow inside card: detail row cell */
    grid-column: 2; /* layout-lint: allow inside card: detail row cell */
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-detail-row strong[b-cz7nzrlxup],
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-holidays strong[b-cz7nzrlxup],
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-notes strong[b-cz7nzrlxup] {
    color: var(--lpgdash-brand);
    font-weight: 700;
}

.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-holidays[b-cz7nzrlxup],
.lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-notes[b-cz7nzrlxup] {
    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-cz7nzrlxup] {
    color: var(--lpgdash-text-muted);
    font-style: normal;
    margin-left: 4px;
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 640px) { /* layout-lint: allow inside card: calendar controls, grid, day */
    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-controls[b-cz7nzrlxup] {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-grid[b-cz7nzrlxup] {
        overflow-x: auto;
    }

    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-dow[b-cz7nzrlxup],
    .lpgdash-dash-wrap .lpgdash-cal .lpgdash-cal-day[b-cz7nzrlxup] {
        min-width: 54px;
    }
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_700_Bunkers.razor.rz.scp.css */
/* Scoped styles for the Bunkers tab. */

.lpgdash-bunkers[b-9ff6atds75] {
    display: grid;
    gap: 8px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgdash-card,
.lpgdash-bunkers[b-9ff6atds75]  .ssy-card {
    padding: 5px 7px 4px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-num {
    font-weight: 900;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-cost-dn {
    color: var(--lpgdash-up);
    font-weight: 900;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-cost-up {
    color: var(--lpgdash-down);
    font-weight: 900;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-flat {
    color: var(--lpgdash-text-muted);
    font-weight: 900;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-board-card,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-spreads,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-fuelchoice,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-hist-zone,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-eua,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-lift,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrubber,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg {
    min-width: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .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-9ff6atds75]  .lpgbunk-scrubber-toggle,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrubber-toggle input,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-check input {
    margin: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .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: 900;
    line-height: 1;
    padding: 2px 4px;
    text-transform: uppercase;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-hi5 {
    color: var(--lpgdash-accent);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-fwd-cell {
    padding: 0 2px;
    min-width: 64px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-fwd-head,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-fwd-sub {
    display: block;
    line-height: 1.05;
    white-space: nowrap;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-fwd-head {
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-small);
    font-weight: 900;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-fwd-sub {
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-fwd-empty {
    color: var(--lpgdash-text-muted);
    font-weight: 700;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-spreads-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); /* layout-lint: allow inside card: spreads table + chart inside the Spreads card */
    gap: 8px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

/* Chart card beside the table fills the band height. */
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-spreads-layout > .ssy-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-spreads-layout > .ssy-card .ssy-chart-card-slot {
    flex: 1 1 0;
    min-height: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-spreads-table-wrap {
    min-width: 0;
    overflow-x: auto;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-hist-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); /* layout-lint: allow inside card: history controls */
    gap: 8px;
    margin-bottom: 6px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-hist-clear {
    align-self: end;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-select {
    margin-left: auto;
    width: auto;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-hist-chart {
    height: 176px; /* layout-lint: allow inside card: history chart height inside its card */
    min-width: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-eua-chart {
    height: 102px; /* layout-lint: allow inside card: EUA chart height inside its card */
    min-width: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-eua-cross-chart {
    height: 112px; /* layout-lint: allow inside card: EUA cross chart height inside its card */
    margin-top: 4px;
    min-width: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-eua-head {
    align-items: flex-start;
    gap: 8px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-eua-latest {
    margin-left: auto;
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-base);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr); /* layout-lint: allow inside card: main + stats inside the Voyage Fuel card */
    gap: 6px 8px;
    align-items: start;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-main,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-inputs {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-main {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* layout-lint: allow internal cells */
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-inputs {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* layout-lint: allow internal cells */
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-stat {
    min-width: 0;
    min-height: 74px; /* layout-lint: allow inside card: voyage stat tile */
    border: 1px solid var(--lpgdash-divider);
    border-radius: 4px;
    background: var(--lpgdash-surface);
    padding: 6px 8px;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-label {
    display: block;
    color: var(--lpgdash-text-dim);
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.1;
    text-transform: uppercase;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-stat strong {
    display: block;
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-display-lg);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.15;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-sub,
.lpgdash-bunkers[b-9ff6atds75]  .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-9ff6atds75]  .lpgbunk-voyage-ets {
    font-size: var(--ssy-fs-tiny);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-input strong {
    font-size: var(--ssy-fs-lg);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-delta {
    background: var(--lpgdash-row-line-soft);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-good {
    border-color: var(--lpgdash-up);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-good strong,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-good .lpgbunk-voyage-sub,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-good-text {
    color: var(--lpgdash-up);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-bad {
    border-color: var(--lpgdash-down);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-bad strong,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-bad .lpgbunk-voyage-sub,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-bad-text {
    color: var(--lpgdash-down);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-flat strong,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-flat .lpgbunk-voyage-sub {
    color: var(--lpgdash-text-muted);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-disabled {
    background: var(--lpgdash-row-line-soft);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-disabled strong,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-disabled-text {
    color: var(--lpgdash-text-muted) !important;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-reg-controls {
    grid-column: 1 / -1; /* layout-lint: allow inside card: reg controls */
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* layout-lint: allow internal cells */
    gap: 6px;
    align-items: end;
    min-height: 46px; /* layout-lint: allow inside card: reg controls */
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-reg-controls .lpgbunk-voyage-check {
    display: inline-flex;
    align-items: center;
    min-height: 26px; /* layout-lint: allow inside card: reg checkbox */
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-reg-controls .lpgbunk-voyage-check input {
    width: auto;
    height: auto;
    padding: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-assumptions {
    grid-column: 1 / -1; /* layout-lint: allow inside card: assumptions row */
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 700;
    line-height: 1.2;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-lift-list,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-list,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-list {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-lift,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrubber {
    height: 100%;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-lift-row {
    display: grid;
    grid-template-columns: minmax(auto, 0.5fr) minmax(0, 3fr) minmax(42px, auto); /* layout-lint: allow inside card: lift row */
    gap: 0px;
    align-items: center;
    min-height: 20px; /* layout-lint: allow inside card: lift row */
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-lift-port {
    color: var(--lpgdash-brand);
    font-size: var(--ssy-fs-base);
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-lift-track,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-track {
    min-width: 0;
    border-radius: 4px;
    background: var(--lpgdash-row-line-soft);
    overflow: hidden;
}

.lpgdash-bunkers[b-9ff6atds75]  .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: 900;
    line-height: 1;
    padding: 3px 6px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-lift-list {
    gap: 2px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-lift-move {
    justify-self: end;
    font-size: var(--ssy-fs-small);
    font-weight: 900;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-hero {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-hero strong {
    color: var(--lpgdash-text);
    font-size: var(--ssy-fs-display-xl);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-hero span {
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-small);
    font-weight: 900;
    text-transform: uppercase;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-gauge {
    margin: 9px 0 6px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-track {
    position: relative;
    height: 9px; /* layout-lint: allow inside card: scrubber track */
    border-radius: 999px;
    background: var(--lpgdash-row-line-soft);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-pay,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-now {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-pay i {
    display: block;
    width: 2px;
    height: 18px; /* layout-lint: allow inside card: scrubber bar */
    background: var(--lpgdash-accent);
}

.lpgdash-bunkers[b-9ff6atds75]  .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: 900;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-now {
    width: 13px;
    height: 13px; /* layout-lint: allow inside card: scrubber marker */
    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-9ff6atds75]  .lpgbunk-scrub-scale,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-row,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-head,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-scale {
    margin-top: 1px;
    color: var(--lpgdash-text-muted);
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-row {
    min-height: 22px; /* layout-lint: allow inside card: scrubber row */
    border-bottom: 1px solid var(--lpgdash-row-line);
    font-size: var(--ssy-fs-base);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-row strong {
    min-width: 44px;
    font-size: var(--ssy-fs-base);
    font-weight: 900;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-row:last-child {
    border-bottom: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-scrub-row span,
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-head strong {
    color: var(--lpgdash-brand);
    font-weight: 900;
}

.lpgdash-bunkers[b-9ff6atds75]  .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-9ff6atds75]  .lpgbunk-reg-row {
    display: grid;
    grid-template-columns: minmax(96px, 0.6fr) minmax(0, 5fr); /* layout-lint: allow inside card: fuel | bars */
    align-items: center;
    gap: 3px 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--lpgdash-row-line);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-head {
    font-size: var(--ssy-fs-base);
    display: grid;
    gap: 1px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-bars {
    display: grid;
    gap: 3px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-line {
    display: grid;
    grid-template-columns: minmax(78px, 0.9fr) minmax(0, 3fr); /* layout-lint: allow inside card: reg line */
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-line > span {
    color: var(--lpgdash-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-bar {
    min-width: 44px;
    border-radius: 4px;
    color: var(--lpgdash-surface);
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
    line-height: 1;
    padding: 4px 5px;
    text-align: right;
    white-space: nowrap;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-ets {
    background: var(--lpgdash-accent);
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-reg-surplus {
    background: var(--lpgdash-up);
}

.lpgdash-bunkers[b-9ff6atds75]  .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) { /* layout-lint: allow inside card: fuel reg row */
    .lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-row-spot-spreads,
    .lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-row-fuel-reg {
        grid-template-columns: 1fr; /* layout-lint: allow inside card: fuel reg row */
    }
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 980px) { /* layout-lint: allow inside card: voyage and spreads internals */
    .lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-main,
    .lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-inputs,
    .lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-reg-controls {
        grid-template-columns: 1fr 1fr; /* layout-lint: allow inside card: reg controls */
    }

    .lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-layout,
    .lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-spreads-layout {
        grid-template-columns: 1fr; /* layout-lint: allow inside card: voyage and spreads internals */
    }
}

/* Deliberate narrow-viewport degrade. */
@media (max-width: 640px) { /* layout-lint: allow inside card: reg controls */
    .lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-main,
    .lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-inputs,
    .lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-voyage-reg-controls {
        grid-template-columns: 1fr; /* layout-lint: allow inside card: reg controls */
    }
}


/* ---------------------------------------------------------------------------
   MAIN view additions (18 Sep 2026): the forward-fuel toggle on the tape, and the
   route-economics table.

   The toggle matches the Dry Bulk one deliberately - it is the same control doing the same job on
   the same shared matrix, and the two desks reading differently was the complaint. Colours resolve
   from this dashboard's own --lpgdash-* neutrals and the ssy brand palette, because a rule here
   cannot see Dry Bulk's tokens. */
.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-toggle {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--lpgdash-card-border-soft);
    border-radius: 4px;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-toggle button {
    height: 22px; /* layout-lint: allow inside card: toggle button */
    padding: 0 9px;
    border: 0;
    border-right: 1px solid var(--lpgdash-card-border-soft);
    background: transparent;
    color: var(--lpgdash-text-muted);
    font-family: inherit;
    font-size: var(--ssy-fs-tiny);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-toggle button:last-child {
    border-right: 0;
}

.lpgdash-bunkers[b-9ff6atds75]  .lpgbunk-toggle .lpgbunk-toggle-active {
    background: var(--ssy-colour-main-simpson-blue, #000061);
    color: var(--ssy-colour-main-pure-white, #FFFFFF);
}
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_810_Customs.razor.rz.scp.css */
.lpgdash-customs[b-1on8di9vqy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lpgdash-customs[b-1on8di9vqy]  .lpgdash-customs-partner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.lpgdash-customs[b-1on8di9vqy]  .lpgdash-customs-partner > i {
    width: 7px;
    height: 7px;
    border-radius: 1px;
    flex: none;
}

.lpgdash-customs[b-1on8di9vqy]  .lpgdash-customs-checks {
    margin-top: 0;
}

/* Six cards on a 12-track grid: US exports and China wide (largest flows), the rest a quarter each. */
.lpgdash-customs-cards[b-1on8di9vqy] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
}

.lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-wide { grid-column: span 6; }
.lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-narrow { grid-column: span 3; }

@container (max-width: 1250px) {
    .lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-wide { grid-column: span 12; }
    .lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-narrow { grid-column: span 6; }
}

@container (max-width: 700px) {
    .lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-narrow { grid-column: span 12; }
}

/* Wide cards: chart beside the ledger, not above it. */
.lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    column-gap: 12px;
}

.lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-wide > .ssy-card-head { grid-column: 1 / -1; }
.lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-wide > .ssy-chart-card-slot { align-self: stretch; min-height: 180px; }
.lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-wide > .ssyt-wrap { align-self: start; }

@container (max-width: 900px) {
    .lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-wide { display: flex; flex-direction: column; }
}

/* Charts take whatever height the row leaves, so short ledgers (Japan, Korea) leave no hole. */
.lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-narrow { display: flex; flex-direction: column; }
.lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-narrow > .ssy-chart-card-slot { flex: 1 0 115px; height: auto; min-height: 0; }
.lpgdash-customs-cards[b-1on8di9vqy]  .lpgdash-customs-card.is-wide > .ssy-chart-card-slot { height: auto; }
/* /Components/Pages/LPG/LpgDashboard/LpgDashboard_900_Arbitrage.razor.rz.scp.css */
/* ============================================================
   The Arbitrage tab's own chrome. The workbench inside it carries its own
   scoped styles (_130_Overview_ArbWorkbench.razor.css); this file owns only
   what THIS component renders - the band heading below the decision grid.
   ============================================================ */

/* A quiet rule-and-label that groups cards, rather than a card title competing
   with them. The history charts below it are context a broker reaches for
   second, so the heading separates without announcing itself. */
.lpgdash-arb-workbench .lpgdash-arb-bandhead[b-p9vx1omrpf] {
    margin: 12px 0 3px 0;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--lpgdash-divider, #DCE5EB);
    font-size: var(--ssy-fs-small, 10px);
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lpgdash-text-muted, #798E98);
}

/* The two history components each render their own SsyGrid of chart cards, so
   they only need separating from each other. */
.lpgdash-arb-workbench[b-p9vx1omrpf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
/* /Components/Pages/LPG/LpgFundamentals/LpgFundamentals.razor.rz.scp.css */
/* --- editor (screen only) --- */
.lpgfund-editor[b-h2tkbbjx4z] {
    margin: 0 auto 0.25in;
    max-width: 13.333in;
    padding: 10px 12px;
    background: var(--ssy-colour-main-pure-white);
    border: 1px solid #DDE3E8;
    font-size: var(--ssy-fs-body, 12px);
}

.lpgfund-editor-bar[b-h2tkbbjx4z] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.lpgfund-editor-spacer[b-h2tkbbjx4z] {
    flex: 1 1 auto;
}

.lpgfund-editor-muted[b-h2tkbbjx4z] {
    color: #798E98;
    font-weight: 400;
}

.lpgfund-editor-warn[b-h2tkbbjx4z] {
    color: #DB303A;
    font-weight: 600;
}

.lpgfund-editor-grid[b-h2tkbbjx4z] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 16px;
}

.lpgfund-editor-col[b-h2tkbbjx4z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.lpgfund-editor label[b-h2tkbbjx4z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 600;
}

.lpgfund-editor-bar label[b-h2tkbbjx4z] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.lpgfund-editor input[b-h2tkbbjx4z],
.lpgfund-editor textarea[b-h2tkbbjx4z] {
    font: inherit;
    font-weight: 400;
    padding: 4px 6px;
    border: 1px solid #C9D3DA;
    border-radius: 3px;
}

.lpgfund-editor textarea[b-h2tkbbjx4z] {
    resize: vertical;
}

.lpgfund-paste[b-h2tkbbjx4z] {
    padding: 14px;
    border: 1px dashed #9FB4C0;
    border-radius: 3px;
    color: #536A75;
    text-align: center;
}

.lpgfund-paste:focus[b-h2tkbbjx4z] {
    outline: 2px solid var(--ssy-colour-main-bright-blue);
}

.lpgfund-image-row[b-h2tkbbjx4z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lpgfund-image-row img[b-h2tkbbjx4z] {
    width: 120px;
    height: 70px;
    object-fit: contain;
    border: 1px solid #E6E6E6;
}

/* --- deck: pages at print size on a grey desk; in print, edge to edge, one per sheet --- */
.lpgfund-deck[b-h2tkbbjx4z] {
    counter-reset: lpgfund-page;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25in;
    padding: 0.25in 0;
    background: #E6E9EC;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.lpgfund-cover[b-h2tkbbjx4z],
.lpgfund-back[b-h2tkbbjx4z] {
    position: relative;
    flex: 0 0 auto;
    width: 13.333in;
    height: 7.5in;
    overflow: hidden;
    break-after: page;
    break-inside: avoid;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

/* Cover: page 1 of the numbering, though it shows no number. */
.lpgfund-cover[b-h2tkbbjx4z] {
    counter-increment: lpgfund-page;
    background: var(--ssy-colour-main-pure-white);
}

.lpgfund-cover-wave[b-h2tkbbjx4z] {
    position: absolute;
    left: 0;
    top: 0.85in;
    width: 13.333in;
    height: 3.95in;
}

/* The ship photo fills the right of the cover behind a diagonal edge; a navy band runs along the
   diagonal, and a bright-blue sliver beside it echoes the logo's gradient. */
.lpgfund-cover-photo[b-h2tkbbjx4z],
.lpgfund-cover-edge[b-h2tkbbjx4z] {
    position: absolute;
    top: 0;
    right: 0;
    height: 7.5in;
    clip-path: polygon(1.5in 0, 100% 0, 100% 100%, 0 100%);
}

.lpgfund-cover-edge[b-h2tkbbjx4z] {
    width: 7.75in;
    background: linear-gradient(var(--ssy-colour-main-bright-blue), var(--ssy-colour-main-simpson-blue));
}

.lpgfund-cover-photo[b-h2tkbbjx4z] {
    width: 7.45in;
    object-fit: cover;
    object-position: 85% 50%;
}

.lpgfund-cover-logo[b-h2tkbbjx4z] {
    position: absolute;
    left: 0.36in;
    top: 0.358in;
    width: 1.498in;
    height: 1.03in;
}

.lpgfund-cover-title[b-h2tkbbjx4z] {
    position: absolute;
    left: 0.36in;
    top: 4.85in;
    margin: 0;
    color: var(--ssy-colour-main-simpson-blue);
    font-family: "Times New Roman", Times, serif;
    font-size: 44pt;
    font-weight: 400;
    line-height: 1;
}

.lpgfund-cover-feature[b-h2tkbbjx4z] {
    position: absolute;
    left: 0.36in;
    top: 5.75in;
    width: 5.6in;
    margin: 0;
    color: var(--ssy-colour-main-simpson-blue);
    font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;
    font-size: 18pt;
    line-height: 1.2;
}

.lpgfund-cover-date[b-h2tkbbjx4z] {
    position: absolute;
    left: 0.36in;
    top: 6.896in;
    margin: 0;
    color: var(--ssy-colour-main-bright-blue);
    font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;
    font-size: 12pt;
}

/* Back cover: navy, white logo and tagline centred. The last sheet: no break after it. */
.lpgfund-back[b-h2tkbbjx4z] {
    break-after: auto;
    background: var(--ssy-colour-main-simpson-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3in;
}

.lpgfund-back-logo[b-h2tkbbjx4z] {
    width: 2.1in;
    margin-top: -0.4in;
}

.lpgfund-back-tagline[b-h2tkbbjx4z] {
    margin: 0;
    color: var(--ssy-colour-main-pure-white);
    font-family: "Times New Roman", Times, serif;
    font-size: 24pt;
}

/* --- feature page: small-print text on the left, pasted charts on the right --- */
.lpgfund-feature[b-h2tkbbjx4z] {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 0.3in;
    height: 100%;
}

.lpgfund-feature.is-text-only[b-h2tkbbjx4z] {
    grid-template-columns: minmax(0, 1fr);
}

.lpgfund-feature-text[b-h2tkbbjx4z] {
    overflow: hidden;
    color: #262626;
    font-family: Arial, sans-serif;
    font-size: 8.5pt;
    line-height: 1.32;
    text-align: justify;
}

.lpgfund-feature.is-text-only .lpgfund-feature-text[b-h2tkbbjx4z] {
    column-count: 2;
    column-gap: 0.35in;
}

.lpgfund-feature-text[b-h2tkbbjx4z]  p {
    margin: 0 0 0.08in;
}

.lpgfund-feature-text[b-h2tkbbjx4z]  h3 {
    margin: 0.04in 0 0.04in;
    color: var(--ssy-colour-main-simpson-blue);
    font-size: 9.5pt;
    font-weight: 700;
}

.lpgfund-feature-text[b-h2tkbbjx4z]  ul {
    margin: 0 0 0.08in;
    padding-left: 0.18in;
}

.lpgfund-feature-text[b-h2tkbbjx4z]  li {
    margin: 0 0 0.05in;
}

.lpgfund-feature-charts[b-h2tkbbjx4z] {
    display: flex;
    flex-direction: column;
    gap: 0.12in;
    min-height: 0;
}

.lpgfund-feature-charts figure[b-h2tkbbjx4z] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    margin: 0;
}

.lpgfund-feature-charts figcaption[b-h2tkbbjx4z] {
    color: var(--ssy-colour-main-simpson-blue);
    font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;
    font-size: 11.5pt;
}

.lpgfund-feature-charts img[b-h2tkbbjx4z] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: left top;
}

.lpgfund-feature-charts figure p[b-h2tkbbjx4z] {
    margin: 0.02in 0 0;
    color: #898989;
    font-size: 7pt;
    white-space: nowrap;
}

/* Disclaimer: a thin blue box, centred, Arial as in the deck. */
.lpgfund-disclaimer[b-h2tkbbjx4z] {
    width: 7.5in;
    margin: 0.2in auto 0;
    padding: 0.15in 0.2in;
    border: 1px solid var(--ssy-colour-main-bright-blue);
    color: var(--ssy-colour-main-pure-black);
    font-family: Arial, sans-serif;
    font-size: 12pt;
    line-height: 1.35;
    text-align: justify;
}

.lpgfund-disclaimer p[b-h2tkbbjx4z] {
    margin: 0 0 0.15in;
}

.lpgfund-disclaimer p:first-child[b-h2tkbbjx4z] {
    margin: 0;
    font-family: Calibri, Arial, sans-serif;
    font-size: 12pt;
}

.lpgfund-disclaimer-terms[b-h2tkbbjx4z] {
    font-size: 11pt;
    text-align: left;
}

@media print {
    .lpgfund-deck[b-h2tkbbjx4z] {
        display: block;
        padding: 0;
        background: none;
    }

    .lpgfund-cover[b-h2tkbbjx4z],
    .lpgfund-back[b-h2tkbbjx4z] {
        box-shadow: none;
    }

    /* A chart under the mouse when printing keeps its hover marker, tooltip and faded neighbours. */
    .lpgfund-deck[b-h2tkbbjx4z]  .highcharts-point-hover,
    .lpgfund-deck[b-h2tkbbjx4z]  .highcharts-halo,
    .lpgfund-deck[b-h2tkbbjx4z]  .highcharts-tooltip,
    .lpgfund-deck[b-h2tkbbjx4z]  .highcharts-crosshair {
        display: none;
    }

    .lpgfund-deck[b-h2tkbbjx4z]  .highcharts-series-inactive {
        opacity: 1 !important;
    }
}

/* "Import edition": a file picker dressed as a button. */
.lpgfund-import[b-h2tkbbjx4z] {
    position: relative;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--ssy-colour-main-simpson-blue);
    border-radius: 3px;
    color: var(--ssy-colour-main-simpson-blue);
    cursor: pointer;
}

.lpgfund-import[b-h2tkbbjx4z]  input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
/* /Components/Pages/LPG/LpgFundamentals/LpgFundamentals_Chart.razor.rz.scp.css */
/* One slide chart: title, chart filling the cell, a one-line grey source. */
.lpgfund-chart[b-vxpmhd4eba] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

/* The card loses its panel: a navy title over a chart that takes the rest of the cell. */
.lpgfund-chart[b-vxpmhd4eba]  .ssy-card {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.lpgfund-chart[b-vxpmhd4eba]  .ssy-card-head {
    margin: 0 0 0.04in;
}

.lpgfund-chart[b-vxpmhd4eba]  .ssy-card-title {
    color: var(--ssy-colour-main-simpson-blue);
    font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;
    font-size: 11.5pt;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.lpgfund-chart[b-vxpmhd4eba]  .ssy-card-desc,
.lpgfund-chart[b-vxpmhd4eba]  .ssy-card-period,
.lpgfund-chart[b-vxpmhd4eba]  .ssy-chart-card-actions {
    display: none;
}

.lpgfund-chart[b-vxpmhd4eba]  .ssy-chart-card-slot {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
}

/* Highcharts sets its font inline on the root svg, so this one rule needs !important. */
.lpgfund-chart[b-vxpmhd4eba]  .highcharts-root {
    font-family: "Franklin Gothic Book", "Franklin Gothic", "Libre Franklin", Arial, sans-serif !important;
}

.lpgfund-chart-source[b-vxpmhd4eba] {
    flex: 0 0 auto;
    margin: 0.02in 0 0;
    overflow: hidden;
    color: #898989;
    font-size: 7pt;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lpgfund-chart-note[b-vxpmhd4eba] {
    margin-left: 1em;
}

/* Deck format: black text (axis labels, titles, legend; data labels keep their contrast colour)
   and the light grey grid. Highcharts writes these inline, hence !important. */
.lpgfund-chart[b-vxpmhd4eba]  .highcharts-axis-labels text,
.lpgfund-chart[b-vxpmhd4eba]  .highcharts-axis-title,
.lpgfund-chart[b-vxpmhd4eba]  .highcharts-legend-item text,
.lpgfund-chart[b-vxpmhd4eba]  .highcharts-stack-labels text {
    fill: #000 !important;
    color: #000 !important;
}

.lpgfund-chart[b-vxpmhd4eba]  .highcharts-grid-line,
.lpgfund-chart[b-vxpmhd4eba]  .highcharts-axis-line,
.lpgfund-chart[b-vxpmhd4eba]  .highcharts-tick {
    stroke: #D9D9D9 !important;
}
/* /Components/Pages/LPG/LpgFundamentals/LpgFundamentals_Slide.razor.rz.scp.css */
/* Deck page on the SSY slide master, 13.333 x 7.5 in (positions as Macro Monthly's). Pages
   number themselves with the lpgfund-page counter, reset on the deck wrapper. */
.lpgfund-page[b-kf161yviww] {
    position: relative;
    flex: 0 0 auto;
    width: 13.333in;
    height: 7.5in;
    overflow: hidden;
    background: var(--ssy-colour-main-pure-white);
    color: var(--ssy-colour-main-pure-black);
    font-family: "Franklin Gothic Book", "Franklin Gothic", "Libre Franklin", Arial, sans-serif;
    counter-increment: lpgfund-page;
    break-after: page;
    break-inside: avoid;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.lpgfund-title[b-kf161yviww] {
    position: absolute;
    left: 0.354in;
    top: 0.36in;
    right: 1.6in;
    margin: 0;
    color: var(--ssy-colour-main-simpson-blue);
    font-family: "Times New Roman", Times, serif;
    font-size: 36pt;
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lpgfund-title.is-long[b-kf161yviww] {
    top: 0.5in;
    font-size: 26pt;
}

.lpgfund-subtitle[b-kf161yviww] {
    position: absolute;
    left: 0.354in;
    top: 1.08in;
    right: 1.6in;
    margin: 0;
    color: var(--ssy-colour-main-bright-blue);
    font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;
    font-size: 15pt;
}

.lpgfund-logo[b-kf161yviww] {
    position: absolute;
    left: 12.008in;
    top: 0.374in;
    width: 0.963in;
    height: 0.662in;
}

/* Body: from under the title to above the footer rule. */
.lpgfund-body[b-kf161yviww] {
    position: absolute;
    left: 0.353in;
    right: 0.35in;
    top: 1.35in;
    bottom: 0.6in;
}

.lpgfund-body.has-subtitle[b-kf161yviww] {
    top: 1.55in;
}

/* Chart grid: Cols columns, rows share the height. */
.lpgfund-body.is-grid[b-kf161yviww] {
    display: grid;
    grid-template-columns: repeat(var(--lpgfund-cols, 2), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 0.18in 0.4in;
}

/* Thin navy rules: 3.01 in on the left, 0.87 in on the right, at 7.04 in. */
.lpgfund-footer[b-kf161yviww] {
    position: absolute;
    left: 0.353in;
    right: 0.333in;
    top: 7.037in;
    height: 0.236in;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ssy-colour-main-simpson-blue);
    font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;
    font-size: 8pt;
}

.lpgfund-footer[b-kf161yviww]::before,
.lpgfund-footer[b-kf161yviww]::after {
    content: "";
    position: absolute;
    top: 0;
    border-top: 0.25pt solid var(--ssy-colour-main-simpson-blue);
}

.lpgfund-footer[b-kf161yviww]::before {
    left: 0;
    width: 3.012in;
}

.lpgfund-footer[b-kf161yviww]::after {
    right: 0;
    width: 0.865in;
}

.lpgfund-pageno[b-kf161yviww]::after {
    content: counter(lpgfund-page);
}

@media print {
    .lpgfund-page[b-kf161yviww] {
        box-shadow: none;
    }
}
/* /Components/Pages/Maintenance/CacheSizes/CacheSizesPanel.razor.rz.scp.css */
/* Maintenance > Caches. Every class is prefixed csp- (CacheSizesPanel) so nothing leaks into pages that embed this. */
.csp-panel[b-d7vjw7ks9c] {
    font-size: 0.85rem;
}

.csp-head[b-d7vjw7ks9c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.csp-title[b-d7vjw7ks9c] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000061;
}

.csp-reading[b-d7vjw7ks9c] {
    color: #6b7280;
}

.csp-intro[b-d7vjw7ks9c] {
    margin: 0 0 0.5rem;
    color: #6b7280;
}

.csp-box[b-d7vjw7ks9c] {
    border: 1px solid #B5CBD6;
    padding-bottom: 0.25rem;
}

.csp-group[b-d7vjw7ks9c] {
    margin: 0.5rem 0 0.15rem;
    padding: 0 0.4rem;
    color: #000061;
    border-bottom: 1px solid #e1e5ef;
}

.csp-group span[b-d7vjw7ks9c] {
    color: #6b7280;
    font-weight: 400;
}

.csp-row[b-d7vjw7ks9c] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.1rem 0.4rem 0.1rem 1.1rem;
}

.csp-label[b-d7vjw7ks9c] {
    font-weight: 600;
}

.csp-value[b-d7vjw7ks9c] {
    text-align: right;
}

.csp-note[b-d7vjw7ks9c] {
    color: #6b7280;
}

.csp-watch[b-d7vjw7ks9c] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border: 1px solid #c77d00;
    border-radius: 8px;
    color: #8a5600;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
}

.csp-measure[b-d7vjw7ks9c] {
    margin-left: 0.5rem;
    padding: 0 0.5rem;
    border: 1px solid #B5CBD6;
    border-radius: 4px;
    background: #fff;
    color: #000061;
    font-size: 0.75rem;
}

.csp-measure:hover[b-d7vjw7ks9c] {
    background: #f7f9fc;
}

.csp-total[b-d7vjw7ks9c] {
    margin: 0.4rem 0 0.2rem;
    padding: 0.25rem 0.4rem;
    border-top: 2px solid #009DC9;
}
/* /Components/Pages/Maintenance/Data/AzureLoad.razor.rz.scp.css */
.tab-bar[b-sd63lgy93i] {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 18px;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    overflow-x: auto;
}

.tab-btn[b-sd63lgy93i] {
    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-sd63lgy93i] {
    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-sd63lgy93i] {
    background: #eaf3fb;
    color: #222;
}

.tab-content[b-sd63lgy93i] {
    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-sd63lgy93i] {
    height: calc(100vh - 120px);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.container-card[b-sd63lgy93i] {
    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-sd63lgy93i] {
    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-sd63lgy93i] {
    background: #0078d4;
    color: white;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.95em;
    margin-left: 4px;
    font-weight: 600;
}

.file-list[b-sd63lgy93i]  .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-sd63lgy93i]  .search-box:focus {
    border: 2px solid #0078d4;
    outline: none;
}

#button-group button[b-sd63lgy93i],
.blob-list button[b-sd63lgy93i] {
    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-sd63lgy93i],
.blob-list button:hover[b-sd63lgy93i] {
    background-color: #0078d4;
    color: #fff;
}

.blob-list button[style*="color:#a00"][b-sd63lgy93i] {
    background: #ffe7e7 !important;
    color: #a00 !important;
}

.blob-list button[style*="color:#007800"][b-sd63lgy93i] {
    background: #e7ffe7 !important;
    color: #007800 !important;
}

.blob-list button[style*="color:#004080"][b-sd63lgy93i] {
    background: #e7f0ff !important;
    color: #004080 !important;
}

.blob-preview-callout[b-sd63lgy93i] {
    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-sd63lgy93i 0.2s;
}

@keyframes fadeIn-b-sd63lgy93i {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }

.blob-preview-content[b-sd63lgy93i] {
    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-sd63lgy93i] {
    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-sd63lgy93i] {
    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-sd63lgy93i] {
    color: #888;
    font-size: 1.1em;
    margin: 40px 0;
}

.blob-preview-unsupported[b-sd63lgy93i] {
    color: #c00;
    font-size: 1.05em;
    margin: 40px 0;
}

.tab-upload-form[b-sd63lgy93i] {
    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-sd63lgy93i] {
    background: #fafdff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.file-list th[b-sd63lgy93i], .file-list td[b-sd63lgy93i] {
    padding: 8px 12px;
}

.file-list th[b-sd63lgy93i] {
    background: #eaf3fb;
    color: #0078d4;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
}

.file-list tr:nth-child(even)[b-sd63lgy93i] {
    background: #f3f8fc;
}

.file-list tr:hover[b-sd63lgy93i] {
    background: #eaf3fb;
}
/* /Components/Pages/Maintenance/Data/RouteFormulaUpdate.razor.rz.scp.css */

/* Force height of accordion-bodies */
.formula-content[b-w5sypom2mp]  .accordion-body {
    max-height: 70vh;
    overflow-y: auto;
}
.formula-content[b-w5sypom2mp]  .text-column {
    text-overflow: ellipsis;
    width: 22%;
}

.formula-content[b-w5sypom2mp]  .text-column code {
    color: inherit;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.formula-content[b-w5sypom2mp]  .date-column{
    width: 5%;
}

.formula-content[b-w5sypom2mp]  .type-column{
    width: 12%;
}

.formula-content[b-w5sypom2mp]  .btn-column {
    width: 10%;
}

@media (max-width: 1300px) {
    .formula-content[b-w5sypom2mp]  .hide-mobile {
        display: none;
    }

}

/* modal form additions */
[b-w5sypom2mp] #EditFormulaForm .form-floating button.ssy-btn-green,
[b-w5sypom2mp] #EditFormulaForm .form-floating button.ssy-btn-yellow,
[b-w5sypom2mp] #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-w5sypom2mp] #EditFormulaForm .form-floating button.ssy-btn-green {
    background-color: #FFFFFF;
    color: #91A527;
    border: 1px solid #91A527;
}
[b-w5sypom2mp] #EditFormulaForm.form-floating button.ssy-btn-green:hover {
    background-color: #91A527;
    color: #FFFFFF;
    border: 1px solid #91A527;
}

[b-w5sypom2mp] #EditFormulaForm .form-floating button.ssy-btn-yellow {
    background-color: #FFFFFF;
    color: #F7A506;
    border: 1px solid #F7A506;
}
[b-w5sypom2mp] #EditFormulaForm .form-floating button.ssy-btn-yellow:hover {
    background-color: #F7A506;
    color: #FFFFFF;
    border: 1px solid #F7A506;
}

[b-w5sypom2mp] #EditFormulaForm .form-floating button.ssy-btn-red {
    background-color: #FFFFFF;
    color: #DB303A;
    border: 1px solid #DB303A;
}
[b-w5sypom2mp] #EditFormulaForm .form-floating button.ssy-btn-red:hover {
    background-color: #DB303A;
    color: #FFFFFF;
    border: 1px solid #DB303A;
}

[b-w5sypom2mp] #EditFormulaForm fieldset {
    border-top: 1px dashed lightgrey;
    border-bottom: 1px dashed lightgrey;
}

[b-w5sypom2mp] #EditFormulaForm fieldset legend {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1.25rem;
}

[b-w5sypom2mp] #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-n1hi61k1vq]  .custom-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.rt-grp-main[b-n1hi61k1vq]  .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-n1hi61k1vq]  .custom-checkbox-container:hover input ~ .custom-checkbox-checkmark {
    background-color: #CEDCE4;
}

/.rt-grp-main[b-n1hi61k1vq]  .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-sv9ucxm2rv] {
        display: none !important;
    }
    .rgm-page[b-sv9ucxm2rv] {
        display: flex !important;
        flex-direction: column !important;
    }
    .rgm-choose-group-inputs[b-sv9ucxm2rv] {
        flex-direction: column !important;
        align-items: unset !important;
    }
    .rgm-scroll-table[b-sv9ucxm2rv] {
        height: unset !important;
        width: unset !important;
    }
}

@scope (.rgm-page) {
    :scope[b-sv9ucxm2rv] {
        height: 40vh;
        width: 100%;
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: 40vh 40vh;
        gap: 35px;
    }

    .rgm-choose-group[b-sv9ucxm2rv], .rgm-group-tree[b-sv9ucxm2rv], .rgm-group-content[b-sv9ucxm2rv], .rgm-add-group[b-sv9ucxm2rv] {
        display: flex;
    }

    .rgm-scroll-table[b-sv9ucxm2rv] {
        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-sv9ucxm2rv] {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        height: 30px;
        width: 100px;
        padding-left: 5px;
    }

    table[b-sv9ucxm2rv] {
        height: 100%;
        width: 100%;
    }

    thead tr[b-sv9ucxm2rv] {
        width: 100%;
        border: 1px solid #000061;
        background-color: #000061;
        color: white;
    }

    tbody[b-sv9ucxm2rv] {
        /*overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #000061 transparent;
    scrollbar-gutter: stable;*/
    }

        tbody tr[b-sv9ucxm2rv] {
            border-bottom: 1px solid #000061;
        }

            tbody tr:hover[b-sv9ucxm2rv] {
                background-color: #ddebf8 !important;
            }

    td[b-sv9ucxm2rv] {
        border: 1px solid #000061;
        padding: 6px;
    }

        td input[b-sv9ucxm2rv] {
            width: 100%;
            /*border-radius: 10px;
        border: 1px solid navy;
        padding: 0 5px;*/
        }
}

.rgm-hide-mobile[b-sv9ucxm2rv] {
    display: content;
}

.rgm-choose-group[b-sv9ucxm2rv] {
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
}
.rgm-choose-group-inputs[b-sv9ucxm2rv] {
    display: flex;
    flex-direction: row;
    gap:2rem;
    /* justify-content: space-between;*/
}

.rgm-group-list[b-sv9ucxm2rv] {
    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-sv9ucxm2rv] {
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
}

.rgm-group-tree-children[b-sv9ucxm2rv] {
    width: 80%;
    /*    margin-top: 30px;*/
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}




.rgm-group-content[b-sv9ucxm2rv] {
    height: 100%;
    width: 100%;
    flex-direction: column;
    position: relative;
}

.rgm-group-content-header[b-sv9ucxm2rv] {
    display: flex;
    flex-direction: row;
    background-color: #000061;
    color: white;
    font-weight: 500;
    height: 7%;
}

.rgm-add-group[b-sv9ucxm2rv] {
    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-sv9ucxm2rv] {
        --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-sv9ucxm2rv] {
        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-sv9ucxm2rv]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, var(--rgm-tint), transparent);
    }

    .rgm-form-section:first-child[b-sv9ucxm2rv] {
        margin-top: 0;
    }

    .rgm-form-row[b-sv9ucxm2rv] {
        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-sv9ucxm2rv] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .rgm-form-label[b-sv9ucxm2rv] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--rgm-navy);
    }

    .rgm-form-hint[b-sv9ucxm2rv] {
        font-size: 0.68rem;
        font-weight: 400;
        font-style: italic;
        color: var(--rgm-muted);
    }

    .rgm-field[b-sv9ucxm2rv] {
        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-sv9ucxm2rv] {
        border-color: #b9c6d8;
        background-color: #ffffff;
    }

    .rgm-field:focus[b-sv9ucxm2rv] {
        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-sv9ucxm2rv]::placeholder {
        color: #9aa8bb;
    }

    /* Six visible rows, resizable, scrolls beyond that */
    .rgm-textarea[b-sv9ucxm2rv] {
        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-sv9ucxm2rv] {
        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-sv9ucxm2rv] {
        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-sv9ucxm2rv] {
        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-sv9ucxm2rv] {
        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-sv9ucxm2rv] {
        font-size: 0.9rem;
        color: #1b2333;
    }

    @media only screen and (max-width: 780px) {
        .rgm-form-pair[b-sv9ucxm2rv] {
            grid-template-columns: 1fr;
        }
    }
}

/* Inert Confirm button while required fields are empty */
.rgm-btn-disabled[b-sv9ucxm2rv] {
    color: #6d7480;
    background-color: #e6eaf0;
    border-color: #c7cfda;
    pointer-events: none;
}



.rgm-route-data[b-sv9ucxm2rv] {
    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-c64lf0qicz] {
    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-c64lf0qicz] {
    width: 100%;
    margin-top: 1.5rem;
    table-layout: fixed;
}

#routes-table thead[b-c64lf0qicz] {
    font-weight: bold;
    border-right: 1px solid #009DC9;
    border-left: 1px solid #009DC9;
    text-align: center;
}

#routes-table thead th[b-c64lf0qicz] {
    padding: 0.5rem 0;
}

#routes-table td[b-c64lf0qicz] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    border-left: 1px solid black;
}

#routes-table td:first-child[b-c64lf0qicz] {
    border-left: 1px solid black;
}

#routes-table td:last-child[b-c64lf0qicz] {
    border-right: 1px solid black;
}

#routes-table th.text-column[b-c64lf0qicz],
#routes-table td.text-column[b-c64lf0qicz]{
    text-align: left;
    padding-left: 0.25rem;
}

.edit-column[b-c64lf0qicz]{
    width: 35px;
}

.small-column[b-c64lf0qicz] {
    width: 60px;
}

.medium-column[b-c64lf0qicz] {
    width: 80px;
}

.pointer[b-c64lf0qicz] {
    cursor: pointer;
}

.edit[b-c64lf0qicz] {
    text-align: center;
    background: none;
    color: inherit;
    border: none;
    padding: 0.2rem;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.editIcon1[b-c64lf0qicz], .arrowIcon1[b-c64lf0qicz] {
    vertical-align: middle;
}

#edit-route[b-c64lf0qicz] {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: 1fr 2fr;
    row-gap: 5px;
    padding: 10px;
}
/*.route-details {
    display: grid;
    grid-template-columns: 1fr 2fr;
    row-gap: 5px;
    padding: 10px;
}*/

.route-modal .route-details[b-c64lf0qicz],
.route-modal .route-groups[b-c64lf0qicz] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 8px;
    align-items: center;
}

.route-modal .route-details-row[b-c64lf0qicz],
.route-modal .route-groups-row[b-c64lf0qicz] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    border: 1px solid var(--ssy-colour-palette-light-bluegray);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--ssy-colour-palette-light-bluegray);
    text-align: end;
    width: 80%;
    min-height:40px;
    height: auto;
}

.route-modal .route-details-title[b-c64lf0qicz],
.route-modal .route-groups-title[b-c64lf0qicz] {
    background-color: var(--ssy-colour-main-deep-blue);
    color: var(--ssy-colour-main-pure-white);
    font-weight: bold;
    text-align: start;
    border-radius: 8px;
    padding-left: 8px;
    display: flex;
    align-items: center;
    overflow: auto;
    min-width:0;
}

.route-modal .route-details-content[b-c64lf0qicz],
.route-modal .route-groups-content[b-c64lf0qicz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}
.route-modal .route-details-title-text[b-c64lf0qicz],
.route-modal .route-groups-title-text[b-c64lf0qicz] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.route-modal .route-groups-header[b-c64lf0qicz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    width: 100%;
    height: auto;
    padding:0;
}

.route-modal .route-groups-row[b-c64lf0qicz] {
    text-decoration: none;
    color: inherit;
    cursor: pointer
}

.route-select[b-c64lf0qicz] {
    height: 30px;
    border-radius: 8px
}

.route-search[b-c64lf0qicz] {
    height: 30px;
    border-radius: 8px
}
/* /Components/Pages/Maintenance/Data/SsyDataInputs/SsyProcessAdd.razor.rz.scp.css */
@scope (.pr-add-page) {
    :scope[b-xkk4pu36mf] {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 75vh;
    }

    div[b-xkk4pu36mf] {
        width: 100%;
/*        border: 1px solid orange;*/
    }
}

.pr-add-content[b-xkk4pu36mf] {
    height: 84%;
}
.pr-add-name[b-xkk4pu36mf] {
    margin-top: 1%;
}
.pr-add-process[b-xkk4pu36mf] {
    height: 90%;
}

.pr-add-routes[b-xkk4pu36mf] {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 50%;
    width: 100%;
}

.pr-add-routes-single[b-xkk4pu36mf] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    width: 47%;
}
.pr-add-routes-group[b-xkk4pu36mf] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
    width: 47%;
}
.pr-add-routes-show[b-xkk4pu36mf] {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 50%;
    width: 100%;
}

.pr-add-datatypes[b-xkk4pu36mf]{
    height: 100%;
}

.pr-add-dtypes-table[b-xkk4pu36mf] {
    height: 90%;
    width: 70%;
    text-align: center;
    padding: 5px;
    border: 1px solid lightblue;
    cursor: pointer;
}

.pr-add-dtypes-table-cell[b-xkk4pu36mf] {
    width: 5vw;
    border: 1px solid lightblue;
}
.pr-add-dtypes-table-cell:hover[b-xkk4pu36mf] {
    background: lightgray !important;
    color: black;
}


.pr-add-freq-default[b-xkk4pu36mf] {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pr-add-confirm-table[b-xkk4pu36mf] {
    height: 100%;

}



.pr-add-footer button[b-xkk4pu36mf] {
    float: right;
}
/* /Components/Pages/Maintenance/Email/EmailDistrib/DistributionLists.razor.rz.scp.css */

.distrib-page-container[b-6sn5dj0v02] {
    height: 1vh;
    display: grid;
    grid-template-columns: 200px 1fr;
}

    .distrib-page-container input[type="search"][b-6sn5dj0v02],
    .distrib-page-container input[type="text"][b-6sn5dj0v02],
    .distrib-page-container input[type="number"][b-6sn5dj0v02],
    .distrib-page-container input[type="select"][b-6sn5dj0v02],
    .distrib-page-container input[type="email"][b-6sn5dj0v02],
    .distrib-page-container select[b-6sn5dj0v02] {
        border-radius: 10px;
        border: 1px solid #1AA3E8;
        margin: 0 10px 10px 0;
        height: 25px;
        padding: 0 5px;
    }
    .distrib-page-container-input[b-6sn5dj0v02] {
        border-radius: 10px;
        border: 1px solid #1AA3E8;
        margin: 0 10px 10px 0;
        height: 25px;
        padding: 0 5px;
    }

        .distrib-page-container input:focus[b-6sn5dj0v02],
        .distrib-page-container select:focus[b-6sn5dj0v02] {
            outline-width: 0;
            box-shadow: 0 0 5px #1AA3E8;
        }

    .distrib-page-container table[b-6sn5dj0v02] {
        table-layout: fixed;
        width: 100%;
        background-color: #FAFAFA;
    }

        .distrib-page-container table tbody tr[b-6sn5dj0v02] {
        }
            .distrib-page-container table tbody tr:hover[b-6sn5dj0v02] {
                cursor: pointer;
                background-color: #DEDEDE;
            }

        .distrib-page-container table tr[b-6sn5dj0v02] {
            background-color: #FAFAFA;
            vertical-align: top;
        }

        .distrib-page-container table thead[b-6sn5dj0v02] {
            position: sticky;
            top: 0;
            background-color: #FAFAFA;
        }

.distrib-sidebar[b-6sn5dj0v02] {
    height: 100%;
    width: 200px;
    background-color: #F3F1EE;
    border-radius: 5px;
    padding: 10px;
}




.distrib-page-container .table-container[b-6sn5dj0v02] {
    height: 700px;
    width: 100%;
    overflow-y: scroll;
    border: 1px solid #DEDEDE;
}

.button-container[b-6sn5dj0v02] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.checkbox-container[b-6sn5dj0v02] {
    display: grid;
    grid-template-columns: 150px min-content;
    grid-template-rows: repeat(2, 20px);
    align-items: baseline;
}

.ssy-btn-main[b-6sn5dj0v02] {
    width: 160px;
    white-space: nowrap;
}

    .ssy-btn-main.selected[b-6sn5dj0v02] {
        background-color: #000061 !important;
    }

.vertical-text[b-6sn5dj0v02] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: end;
    vertical-align: baseline;
    width: 60px;
    height: 200px;
}

.break-word[b-6sn5dj0v02] {
    overflow-wrap: break-word;
}

.align-right[b-6sn5dj0v02] {
    text-align: right;
}

.user-grid[b-6sn5dj0v02] {
    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-6sn5dj0v02] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.small-icon[b-6sn5dj0v02] {
    height: 20px;
}

.distrib-page-container table .icon[b-6sn5dj0v02] {
    width: 25px;
    text-align: center;
}

.distrib-page-container table tr.selected[b-6sn5dj0v02] {
    background-color: #FF6961;
}

.distrib-page-container table td.remove:hover[b-6sn5dj0v02] {
    background-color: #FF6961;
}

.distrib-page-container table td.add:hover[b-6sn5dj0v02] {
    background-color: #FF6961;
}



.user-row[b-6sn5dj0v02] {
    height: 30px;
}

    .user-row *[b-6sn5dj0v02] {
        vertical-align: middle;
    }


.top-tab[b-6sn5dj0v02] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    width: 100%;
    /*overflow-wrap: normal;*/
}

.company-suggestions[b-6sn5dj0v02] {
    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-6sn5dj0v02] {
        margin: 5px 0;
        cursor: pointer;
        color: #007bff;
    }

        .company-suggestions p:hover[b-6sn5dj0v02] {
            text-decoration: underline;
        }


.desktop-add-user-modal[b-6sn5dj0v02] {
    display: flex;
    flex-direction: row;
    width: 50%;
    align-items: baseline;
}
@media only screen and (max-width: 992px) {
    .top-tab[b-6sn5dj0v02] {
        flex-direction: column;
    }
    .desktop-add-user-modal[b-6sn5dj0v02] {
        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-6sn5dj0v02] {
    background-color: lightgray;
    border-radius: 999px;
    cursor: default;
}

/* /Components/Pages/Maintenance/Email/EmailDistrib/EmailDistrib.razor.rz.scp.css */

.distrib-page-container[b-i0ypdnpvct] {
    height: 1vh;

   /* display: grid;
    grid-template-columns: 200px 1fr;*/
}

    .distrib-page-container input[type="search"][b-i0ypdnpvct],
    .distrib-page-container input[type="text"][b-i0ypdnpvct],
    .distrib-page-container input[type="number"][b-i0ypdnpvct],
    .distrib-page-container input[type="select"][b-i0ypdnpvct],
    .distrib-page-container select[b-i0ypdnpvct] {
        border-radius: 10px;
        border: 1px solid #1AA3E8;
        margin: 0 10px 10px 0;
        height: 25px;
        padding: 0 5px;
    }

        .distrib-page-container input:focus[b-i0ypdnpvct],
        .distrib-page-container select:focus[b-i0ypdnpvct] {
            outline-width: 0;
            box-shadow: 0 0 5px #1AA3E8;
        }

    .distrib-page-container table[b-i0ypdnpvct] {
        table-layout: fixed;
        width: 100%;
        background-color: #FAFAFA;
    }

        .distrib-page-container table tbody tr:hover[b-i0ypdnpvct] {
            border-top: 1px solid #DEDEDE;
            border-bottom: 1px solid #DEDEDE;
            cursor: pointer;
        }

        .distrib-page-container table tr[b-i0ypdnpvct] {
            background-color: #FAFAFA;
            vertical-align: top;
        }

        .distrib-page-container table thead[b-i0ypdnpvct] {
            position: sticky;
            top: 0;
            background-color: #FAFAFA;
        }

.distrib-sidebar[b-i0ypdnpvct] {
    height: 100%;
    width: 200px;
    background-color: #F3F1EE;
    border-radius: 5px;
    padding: 10px;
}

.tab[b-i0ypdnpvct] {
    height: 100%;
}

.tab-container[b-i0ypdnpvct] {
    border: 2px solid #F3F1EE;
    width: 100%;
    padding: 10px;
    gap: 10px;
}

.distrib-page-container .table-container[b-i0ypdnpvct] {
    height: 700px;
    width: 100%;
    overflow-y: scroll;
    border: 1px solid #DEDEDE;
}

.button-container[b-i0ypdnpvct] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.checkbox-container[b-i0ypdnpvct] {
    display: grid;
    grid-template-columns: 150px min-content;
    grid-template-rows: repeat(2, 20px);
    align-items: baseline;
}

.ssy-btn-main[b-i0ypdnpvct] {
    width: 160px;
    white-space: nowrap;
}

    .ssy-btn-main.selected[b-i0ypdnpvct] {
        background-color: #000061 !important;
    }

.vertical-text[b-i0ypdnpvct] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: end;
    vertical-align: baseline;
    width: 60px;
    height: 200px;
}

.break-word[b-i0ypdnpvct] {
    overflow-wrap: break-word;
}

.align-right[b-i0ypdnpvct] {
    text-align: right;
}

.user-grid[b-i0ypdnpvct] {
    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-i0ypdnpvct] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.small-icon[b-i0ypdnpvct] {
    height: 20px;
}

.distrib-page-container table .icon[b-i0ypdnpvct] {
    width: 25px;
    text-align: center;
}

.distrib-page-container table tr.selected[b-i0ypdnpvct] {
    background-color: #FF6961;
}

.distrib-page-container table td.remove:hover[b-i0ypdnpvct] {
    background-color: #FF6961;
}

.distrib-page-container table td.add:hover[b-i0ypdnpvct] {
    background-color: #FF6961;
}

.initial[b-i0ypdnpvct] {
    color: #0366d6;
    font-size: 16px;
    text-decoration: underline;
    margin: 0 3px;
    cursor: pointer;
}

.user-row[b-i0ypdnpvct] {
    height: 30px;
}

.user-row *[b-i0ypdnpvct] {
    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-b3iu0vwng0] {
    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-b3iu0vwng0] {
    text-align: center;
}

.page-container[b-b3iu0vwng0] {
    position: relative
}

.select-container[b-b3iu0vwng0] {
    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-b3iu0vwng0] {
    height: 230px;
    max-width: 500px;
}

.select-container.email-service-container[b-b3iu0vwng0],
.select-container.email-service-log-container[b-b3iu0vwng0] {
    height: 265px;
}

.select-container.email-service-container h2[b-b3iu0vwng0],
.select-container.email-service-log-container h2[b-b3iu0vwng0] {
    background: #F3F1EE;
    padding-top: 10px;
    padding-bottom: 0.5rem;
    /*width: 100vw;*/
    top: 0;
    z-index: 2;
    position: sticky;
}

.select-container.email-service-container[b-b3iu0vwng0] {
    max-width: 850px;
}

.select-container.email-service-container > table[b-b3iu0vwng0] {
    margin: auto;
}

.select-container.email-service-log-container > table[b-b3iu0vwng0] {
    width: 100%;
    table-layout: fixed;
}

.select-container.email-service-log-container > table > thead[b-b3iu0vwng0] {
    position: sticky;
    top: 3rem;
    z-index: 2;
}

.select-container.email-service-log-container > table td[b-b3iu0vwng0] {
    overflow: hidden;
    /*white-space: nowrap;*/
    text-overflow: ellipsis;
}

/* For screens smaller than 600px */
@media (max-width: 600px) {
    .select-container.select-option[b-b3iu0vwng0] {
        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-b3iu0vwng0] {
        display: none;
    }
}

.button-container[b-b3iu0vwng0] {
    display: flex;
    align-content: center;
    flex-direction: column;
    gap: 10px;
    height: 50%;
}

.select-button:first-child[b-b3iu0vwng0] {
    margin-top: 25px;
}

.select-button[b-b3iu0vwng0] {
    width: 50%;
    margin: 0 auto;
}

.id-input[b-b3iu0vwng0] {
    display: flex;
    justify-content: space-around;
}

.metadata[b-b3iu0vwng0] {
    position: absolute;
    top: 0;
    right: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.value[b-b3iu0vwng0] {
    text-align: right;
}

[b-b3iu0vwng0] .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-b3iu0vwng0] {
    display: flex;
    justify-content: space-around;
    grid-column: 1/3;
}

.page-container input[b-b3iu0vwng0] {
    width: 200px;
}

.html-box[b-b3iu0vwng0] {
    position: relative;
    display: grid;
    grid-template-rows: min-content 1fr;
}

.editor[b-b3iu0vwng0] {
    resize: none;
}

[b-b3iu0vwng0] .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-b3iu0vwng0] {
    padding: 10px;
    border: 1px solid #4F4F4F;
    background: white;
    overflow-y: auto;
    scrollbar-gutter: stable;
    width: 100%;
}

.review-container[b-b3iu0vwng0] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 700px 1fr;
    gap: 10px;
    height: 70vh;
}

.review-info-container[b-b3iu0vwng0] {
    display: grid;
    margin-top: 17px;
    grid-template-columns: 125px 1fr;
    grid-template-rows: repeat(6, min-content);
}

.review-info-container > *[b-b3iu0vwng0] {
    margin: 10px 0;
    padding: 5px;
}

.review-info-container > *:nth-child(even)[b-b3iu0vwng0] {
    border: transparent;
    background-color: #F3F1EE;
    border-radius: 5px;
}

.copy-html[b-b3iu0vwng0] {
    position: absolute;
    top: 33px;
    right: 7px;
}

.arrow-container[b-b3iu0vwng0] {
    display: flex;
    justify-content: space-between;
    grid-column: 1/3;
    align-items: end;
    width: 100%;
}

.form-button:hover[b-b3iu0vwng0] {
    cursor: pointer;
    background-color: #F3F1EE;
    border-radius: 5px;
}

.item-row .form-button:hover[b-b3iu0vwng0] {
    background-color: #FE908F;
}

.clear-button-style[b-b3iu0vwng0],
.clear-button-style:focus[b-b3iu0vwng0] {
    border: none;
    background: none;
    outline: none;
}

.height-fit-content[b-b3iu0vwng0] {
    height: fit-content;
}

.small-button[b-b3iu0vwng0] {
    height: 20px;
}

.item-row[b-b3iu0vwng0] {
    border-bottom: 1px solid #F3F1EE;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
}

.item-row:hover[b-b3iu0vwng0] {
    background-color: #F3F1EE;
    border-radius: 5px;
}

.warning[b-b3iu0vwng0] {
    display: none;
    background-color: #FE908F;
    padding: 0 6px;
}

input[type='file'][b-b3iu0vwng0] {
    color: transparent;
}

#input-file-name[b-b3iu0vwng0] {
    height: 20px;
}

#file-name[b-b3iu0vwng0] {
    cursor: pointer;
}

.send[b-b3iu0vwng0] {
    position: absolute;
    top: 3px;
    right: 185px;
}

.remove-all[b-b3iu0vwng0] {
    grid-column: 2;
    justify-self: end;
    background-color: #F3F1EE;
    height: max-content;
    padding: 5px;
    border-radius: 5px;
}

.remove-all:hover[b-b3iu0vwng0] {
    background-color: #FE908F;
    text-decoration: underline;
    cursor: pointer;
}

.popup[b-b3iu0vwng0] {
    height: 250px;
    width: 500px;
    padding: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

.popup .button-container[b-b3iu0vwng0] {
    display: flex;
    justify-content: end;
    gap: 10px;
    flex-direction: row;
    margin-top: 10px;
    height: 33px;
}

.popup input[b-b3iu0vwng0] {
    width: initial;
}

.email-table[b-b3iu0vwng0] {
    width: 100%;
    border-collapse: collapse;
}

.email-table th[b-b3iu0vwng0], .email-table td[b-b3iu0vwng0] {
    border: 1px solid #ddd;
    padding: 8px;
}

.email-table th[b-b3iu0vwng0] {
    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). */

/* ---- Refresh FFA Data row while the Google sheet has "Pause live prices" on ---- */
.ml-ffa-paused[b-0jrn9l6sl9] {
    color: #c5221f;
}

/* ---- Links / Debug tools / Deployment tab bar ---- */
.ml-tabs[b-0jrn9l6sl9] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e1e5ef;
    margin-bottom: 1rem;
}

.ml-tab[b-0jrn9l6sl9] {
    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-0jrn9l6sl9] {
    background: #f7f9fc;
    color: #000061;
}

.ml-tab-active[b-0jrn9l6sl9] {
    color: #000061;
    background: #fff;
    border-color: #e1e5ef;
    border-bottom: 2px solid #009DC9;
}

/* "Publishing tonight" pill on the Deployment tab - same green as the armed state line. */
.ml-tab-badge[b-0jrn9l6sl9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid #91A527;
    border-radius: 999px;
    background: #f2f7e2;
    color: #4d5a15;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
}

.ml-tab-badge[b-0jrn9l6sl9]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #91A527;
}

/* ---- Build stamp (which commit is deployed) ---- */
.ml-build-meta[b-0jrn9l6sl9] {
    margin-left: 0.6rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.ml-build-subject[b-0jrn9l6sl9] {
    margin: -0.6rem 0 0.6rem;
    font-size: 0.85rem;
    font-style: italic;
    color: #6b7280;
}

/* A dirty publish means the running code is not any commit in the repository, which is the one
   thing on this panel worth catching by eye. */
.ml-build-dirty[b-0jrn9l6sl9] {
    margin-left: 0.6rem;
    padding: 0 0.35rem;
    font-size: 0.8rem;
    color: #fff;
    background: #DB303A;
    border-radius: 3px;
}

.ml-log-host[b-0jrn9l6sl9] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
}

.ml-log-host-note[b-0jrn9l6sl9] {
    color: #6b7280;
    margin-left: 0.4rem;
}

/* ---- single-line date stepper ( ‹  2026-06-23  › ) ---- */
.ml-log-datebar[b-0jrn9l6sl9] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 14px;
    max-width: 720px;
}

.ml-date-step[b-0jrn9l6sl9] {
    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-0jrn9l6sl9] {
    background: #000061;
    border-color: #000061;
    color: #fff;
}

.ml-date-step:disabled[b-0jrn9l6sl9] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ml-date-input[b-0jrn9l6sl9] {
    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-0jrn9l6sl9] {
    outline: none;
    border-color: #009DC9;
    box-shadow: 0 0 0 3px rgba(0, 157, 201, 0.18);
}

.ml-log-links[b-0jrn9l6sl9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 720px;
}

.ml-log-group[b-0jrn9l6sl9] {
    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-0jrn9l6sl9] {
    margin-top: 0;
}

.ml-log-link[b-0jrn9l6sl9] {
    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-0jrn9l6sl9] {
    background: #eef6fb;
    transform: translateX(2px);
    box-shadow: 0 4px 14px rgba(0, 157, 201, 0.18);
}

.ml-log-link .ml-log-name[b-0jrn9l6sl9] {
    font-weight: 600;
    color: #000061;
    font-size: 0.9rem;
}

.ml-log-link .ml-log-sub[b-0jrn9l6sl9] {
    font-size: 0.72rem;
    color: #6b7280;
    font-family: 'Courier New', monospace;
    margin-top: 1px;
}

.ml-log-tip[b-0jrn9l6sl9] {
    margin: 4px 0 2px;
    font-size: 0.72rem;
    color: #6b7280;
    line-height: 1.35;
}

.ml-log-tip code[b-0jrn9l6sl9] {
    background: #eef1f6;
    padding: 0 4px;
    border-radius: 4px;
}

.ml-log-warn[b-0jrn9l6sl9] {
    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-0jrn9l6sl9] {
    background: #fdeccd;
    padding: 0 4px;
    border-radius: 4px;
}

.ml-log-paste[b-0jrn9l6sl9] {
    margin-top: 1.25rem;
    max-width: 720px;
}

.ml-log-paste-label[b-0jrn9l6sl9] {
    display: block;
    font-size: 0.8rem;
    color: #374151;
    margin-bottom: 6px;
}

.ml-log-paste-box[b-0jrn9l6sl9] {
    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-0jrn9l6sl9] {
    margin-top: 8px;
}

.ml-log-pasted[b-0jrn9l6sl9] {
    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-0jrn9l6sl9] {
    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-0jrn9l6sl9] {
    border-bottom: none;
}

.ml-log-pasted li:nth-child(odd)[b-0jrn9l6sl9] {
    background: #f7f9fc;
}

.ml-log-pasted a[b-0jrn9l6sl9] {
    color: #009DC9;
    text-decoration: none;
    font-size: 0.82rem;
    word-break: break-all;
}

.ml-log-pasted a:hover[b-0jrn9l6sl9] {
    text-decoration: underline;
}

.ml-log-mtime[b-0jrn9l6sl9] {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}

/* ---- Deployment panel (nightly publish arm + maintenance banner) ---- */

.ml-deploy[b-0jrn9l6sl9] {
    border: 1px solid #B5CBD6;
    border-radius: 8px;
    padding: 10px 14px 12px;
    margin-bottom: 1rem;
    background: #f7f9fc;
}

.ml-deploy-head[b-0jrn9l6sl9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 4px;
}

.ml-deploy-head h5[b-0jrn9l6sl9] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #000061;
}

.ml-deploy-env[b-0jrn9l6sl9] {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}

.ml-deploy-note[b-0jrn9l6sl9] {
    font-size: 0.78rem;
    color: #4b5563;
    margin: 0 0 8px;
    line-height: 1.35;
}

/* The live answer to "is anything going out tonight". Green when armed so it reads at a
   glance from across a desk; grey when not, because not-armed is the normal resting state
   and should not look like a fault. */
.ml-deploy-state[b-0jrn9l6sl9] {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #d7dde8;
    background: #ffffff;
    color: #4b5563;
}

.ml-deploy-state.is-armed[b-0jrn9l6sl9] {
    border-color: #91A527;
    background: #f2f7e2;
    color: #4d5a15;
}

.ml-deploy-state-sub[b-0jrn9l6sl9] {
    display: block;
    font-weight: 400;
    font-size: 0.74rem;
    color: #6b7280;
    margin-top: 2px;
}

.ml-deploy-buttons[b-0jrn9l6sl9] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ml-deploy-buttons .btn[b-0jrn9l6sl9] {
    font-size: 0.8rem;
    padding: 4px 10px;
}

.ml-deploy-sep[b-0jrn9l6sl9] {
    border: none;
    border-top: 1px solid #d7dde8;
    margin: 10px 0 8px;
}

.ml-deploy-maint[b-0jrn9l6sl9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ml-deploy-maint-text[b-0jrn9l6sl9] {
    font-size: 0.78rem;
    color: #4b5563;
    line-height: 1.35;
}

.ml-deploy-maint-text b[b-0jrn9l6sl9] {
    display: block;
    font-size: 0.85rem;
    color: #111827;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/BasicView/Comps/GkPackages.razor.rz.scp.css */
body[b-wgssfpxrxd] {
}
/* /Components/Pages/Maintenance/MenuAndPermissions/Gatekeeper/BasicView/Comps/GkRequests.razor.rz.scp.css */
.gk-section-btn[b-z5jm3kxspa] {
    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-z5jm3kxspa] {
        background-color: #C2E7F2;
        color: black;
    }

.selected[b-z5jm3kxspa] {
    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-a1pcz3aikh] {
}
/* /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-4j67x6pxnu] {
    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-3fqbihf3bq] {
    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-kxa0tb3987] {
    opacity: 0.6;
    cursor: pointer;
}

.permd[b-kxa0tb3987] {
    cursor: pointer;
}

.child-permd[b-kxa0tb3987] {
    color: #3030a9;
    /*    font-style: italic;*/
    pointer-events: none;
}
.always-permd[b-kxa0tb3987] {
    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-us7tuyn2gb] {
    display: flex;
    flex-direction: column;
    height: 88vh;
    width: 98%;
    margin: 0.5% 1%;
}

.info-box[b-us7tuyn2gb] {
    height: 90%;
    border: 1px solid #000061;
    border-radius: 5px;
    padding: 1%;
    margin: 1%;
}
.gk-web-view[b-us7tuyn2gb] {
    display: flex !important;
}

.gk-mob-view[b-us7tuyn2gb] {
    display: none !important;
}

@media only screen and (max-width: 780px) {
    .gk-web-view[b-us7tuyn2gb] {
        display: none !important;
    }

    .gk-mob-view[b-us7tuyn2gb] {
        display: flex !important;
    }
}

.gk-main[b-us7tuyn2gb]  .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-us7tuyn2gb]  .custom-checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    .gk-main[b-us7tuyn2gb]  .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-us7tuyn2gb]  .custom-checkbox-container:hover input ~ .custom-checkbox-checkmark {
        background-color: #CEDCE4;
    }

    /* When the checkbox is checked, add a blue background */
    .gk-main[b-us7tuyn2gb]  .custom-checkbox-container input:checked ~ .custom-checkbox-checkmark {
        background-color: #000061;
    }
/* /Components/Pages/Maintenance/MenuAndPermissions/MenuManager.razor.rz.scp.css */
/* save / drop problems (duplicate ids, refused drops, pre-save check, failed save) */
.mm-save-problems[b-yxe4bpnogk] {
    color: #b00020;
    font-size: 0.85rem;
    margin: 4% 0;
    overflow-wrap: anywhere;
}

.page-cont[b-yxe4bpnogk] {
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    font-size: 1.2rem;
}

.contr-cont[b-yxe4bpnogk] {
    width: 9%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.confirm-changes-modal[b-yxe4bpnogk] {
    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-yxe4bpnogk] {
    margin: 5% 0 5% 0;
    height: 30vh;
    width: 17vw;
    overflow-y: scroll;
    border: 2px solid navy;
    border-radius: 10px;
    padding: 3%;
}

.edit-btn[b-yxe4bpnogk] {
    margin-top: 10%;
    height: 4vh;
    width: 80%;
    border-radius: 15px;
    background-color: #000061;
    border: 2px solid #000061;
    color: white;
}

.edit-btn:hover[b-yxe4bpnogk] {
    background-color: white;
    color: #000061;
}

.no-changes-btn[b-yxe4bpnogk] {
    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-yxe4bpnogk] {
    border: 2px solid #000061;
    width: 90%;
}

.undo-btn[b-yxe4bpnogk] {
    margin-left: 10%;
    background: white !important;
    border: 1px solid lightgray !important;
    border-radius: 10px !important;
}

.undo-btn:hover[b-yxe4bpnogk] {
    background-color: gray !important;
    color: white;
}

.changes-btn[b-yxe4bpnogk] {
    background: #000061 !important;
    border: 1px solid #000061 !important;
    border-radius: 10px !important;
    color: white;
}

.changes-btn:hover[b-yxe4bpnogk] {
    background-color: white !important;
    color: black;
}

.headers-cont[b-yxe4bpnogk] {
    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-yxe4bpnogk]{
    align-content: center;
    border-right: 2px solid white;
}
.headers-cont .headers-cont-container:last-child[b-yxe4bpnogk]{
    border-right: none;
}

.header-btn[b-yxe4bpnogk] {
    align-content: center;
    text-align: center;
    color: white;
    font-size: 1.2rem;
    margin: 0 1rem;
}

.header-btn:hover[b-yxe4bpnogk] {
    cursor: pointer;
    border-bottom: 1px solid white;
    transition: all 1s ease-in-out;
}

.hover-menu-cont[b-yxe4bpnogk] {
    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-yxe4bpnogk] {
    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-yxe4bpnogk] {
    background-color: #F7F6F6;
}

.menu-items-cont[b-yxe4bpnogk] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 82vh;
}

.menu-cont[b-yxe4bpnogk] {
    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-yxe4bpnogk] {
    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-yxe4bpnogk] {
    background-color: #F7F6F6;
}

.add-menu-cont[b-yxe4bpnogk] {
}

.add-menu-cont button[b-yxe4bpnogk] {
    border-radius: 20px;
    width: 100%;
    margin-bottom: 2%;
    background-color: #000061;
    color: #FCFCFC;
    border: 2px solid #000061;
}

.add-menu-cont button:hover[b-yxe4bpnogk] {
    color: #000061;
    background-color: white;
}

.add-menu-selections[b-yxe4bpnogk] {
    background-color: navy;
    border-radius: 5px;
    padding: 2% 3% 3% 3%;
    color: white;
}

.add-menu-selections button[b-yxe4bpnogk] {
    margin-top: 5%;
    background-color: #EAEAEA;
    color: black;
}

.unused-cont[b-yxe4bpnogk] {
    display: flex;
    flex-direction: column;
    width: 20vw;
    background-color: #000079;
    border-radius: 15px;
    margin: 1%;
    padding: 1%;
    overflow: hidden;
}

.unused-table[b-yxe4bpnogk] {
    height: 31vh;
    overflow-y: auto;
    margin-top: 1vh;
    background-color: white;
    border: 2px solid #000061;
    /* border-radius: 8px; */
    padding: 1%;
}

.unused-table button[b-yxe4bpnogk] {
    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-yxe4bpnogk] {
    background: lightgray;
    border-radius: 5px;
}

.selected-cont[b-yxe4bpnogk] {
    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-yxe4bpnogk] {
    width: 23vw;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/RoleRouteAccess.razor.rz.scp.css */
.first-level-container[b-gvu7iyhucy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.first-level-container > button[b-gvu7iyhucy] {
    width: 140px;
}

.second-level-container[b-gvu7iyhucy] {
    padding-top: 0.5rem;
    display: flex;
    justify-content: space-between;
}
.second-level-container .second-level-filters[b-gvu7iyhucy] {
    display: flex;
    align-items: center;
}
.second-level-container .second-level-filters.order-div-1[b-gvu7iyhucy] {
    width: 100%;
    justify-content: center;
}
.second-level-container .second-level-filters > div[b-gvu7iyhucy] {
    min-width: 200px;
}
.second-level-container .second-level-filters > div:not(:last-child)[b-gvu7iyhucy] {
    margin-right: 0.5rem;
}
.order-div-0[b-gvu7iyhucy] {
    order: 0;
}
.order-div-1[b-gvu7iyhucy] {
    order: 1;
}
.order-div-2[b-gvu7iyhucy] {
    order: 2;
}

.content-container[b-gvu7iyhucy] {
    padding-top: 0.5rem;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1fr 2fr;
}
.content-container > .table-container[b-gvu7iyhucy]{
    height: calc(100vh - 250px);
    border: 1px solid #DEDEDE;
}
.content-container > .table-container:not(:first-child):not(:last-child)[b-gvu7iyhucy] {
    border-left: none;
    border-right: none;
    scrollbar-gutter: stable both-edges;
}

.content-container > .table-container table[b-gvu7iyhucy] {
    table-layout: fixed;
    width: 100%;
}
.content-container > .table-container table thead[b-gvu7iyhucy] {
    position: sticky;
    top: 0;
    background-color: #FAFAFA;
    z-index: 2;
}
.content-container > .table-container table tbody tr[b-gvu7iyhucy] {
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
}
.content-container > .table-container table tbody tr:hover[b-gvu7iyhucy] {
    background: #DEDEDE;
    cursor: pointer;
}
.content-container > .table-container table tr[b-gvu7iyhucy] {
    background-color: #FAFAFA;
    vertical-align: top;
}
.table-container table tr.selected[b-gvu7iyhucy] {
    background-color: #DEDEDE;
}
.table-container table .break-word[b-gvu7iyhucy] {
    overflow-wrap: break-word;
}
.table-container table .icon[b-gvu7iyhucy] {
    width: 35px;
    text-align: center;
    position: relative;
}
.table-container.order-div-0 table .icon[b-gvu7iyhucy] {
    display: none;
}
.table-container table .icon[b-gvu7iyhucy]  svg {
    vertical-align: middle;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.table-container table .group[b-gvu7iyhucy] {
    width: 100px;
}
.table-container table td.remove:hover[b-gvu7iyhucy] {
    background-color: #FF6961;
}
.table-container table td.add:hover[b-gvu7iyhucy] {
    background-color: #8CD47E;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/UrlComp/UrlCompManager_00.razor.rz.scp.css */
.url-comp-manager[b-qgx1xzeyz5]  .title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.url-comp-manager[b-qgx1xzeyz5]  .title-container > .title-outer-section {
    width: 500px;
}

.url-comp-manager[b-qgx1xzeyz5]  .title-container > .title-outer-section.title-explaination {
    display: inline-flex;
    justify-content: end;
}

.url-comp-manager[b-qgx1xzeyz5]  .tabs-container {
    border-top: 1px solid #DEDEDE;
    padding-top: 0.5rem;
    margin: 0.5rem 0;
}

.url-comp-manager[b-qgx1xzeyz5]  .first-level-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.url-comp-manager[b-qgx1xzeyz5]  .first-level-container > div {
    display: inline-flex;
    align-items: center;
}
.url-comp-manager[b-qgx1xzeyz5]  .first-level-container > div > button {
    width: 140px;
}
.url-comp-manager[b-qgx1xzeyz5]  .first-level-container > div > button:not(:last-child) {
    margin-right: 0.5rem;
}

.url-comp-manager[b-qgx1xzeyz5]  .second-level-container {
    padding-top: 0.5rem;
    display: flex;
    justify-content: space-between;
}
.url-comp-manager[b-qgx1xzeyz5]  .second-level-container .second-level-filters {
    display: flex;
    align-items: center;
}
.url-comp-manager[b-qgx1xzeyz5]  .second-level-container .second-level-filters > div {
    margin-right: 0.5rem;
    min-width: 200px;
}
.url-comp-manager[b-qgx1xzeyz5]  .order-div-0 {
    order: 0;
}
.url-comp-manager[b-qgx1xzeyz5]  .order-div-1 {
    order: 1;
}
.url-comp-manager[b-qgx1xzeyz5]  .order-div-2 {
    order: 2;
}

.url-comp-manager[b-qgx1xzeyz5]  .content-container {
    padding-top: 0.5rem;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1fr 2fr;
}
.url-comp-manager[b-qgx1xzeyz5]  .content-container > .table-container{
    height: calc(100vh - 250px);
    border: 1px solid #DEDEDE;
}
.url-comp-manager[b-qgx1xzeyz5]  .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-qgx1xzeyz5]  .content-container > .table-container table {
    table-layout: fixed;
    width: 100%;
}

.url-comp-manager[b-qgx1xzeyz5]  .content-container > .table-container table thead {
    position: sticky;
    top: 0;
    background-color: #FAFAFA;
    z-index: 2;
}

.url-comp-manager[b-qgx1xzeyz5]  .content-container > .table-container table tbody tr {
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
}
.url-comp-manager[b-qgx1xzeyz5]  .content-container > .table-container table tbody tr:hover {
    background: #DEDEDE;
    cursor: pointer;
}

.url-comp-manager[b-qgx1xzeyz5]  .content-container > .table-container table tr {
    background-color: #FAFAFA;
    vertical-align: top;
}

.url-comp-manager[b-qgx1xzeyz5]  .table-container table tr.selected {
    background-color: #DEDEDE;
}

.url-comp-manager[b-qgx1xzeyz5]  .table-container table .break-word {
    overflow-wrap: break-word;
}

.url-comp-manager[b-qgx1xzeyz5]  .table-container table .icon {
    width: 35px;
    text-align: center;
    position: relative;
}

.url-comp-manager[b-qgx1xzeyz5]  .table-container.order-div-0 table .icon {
    display: none;
}

.url-comp-manager[b-qgx1xzeyz5]  .table-container table .icon ::deep svg {
    vertical-align: middle;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.url-comp-manager[b-qgx1xzeyz5]  .table-container table .group {
    width: 100px;
}

.url-comp-manager[b-qgx1xzeyz5]  .table-container table td.remove:hover {
    background-color: #FF6961;
}

.url-comp-manager[b-qgx1xzeyz5]  .table-container table td.add:hover {
    background-color: #8CD47E;
}

/* fix form styling */
.url-comp-manager[b-qgx1xzeyz5]  .form-floating > .autocomplete > .input-group {
    margin-left: 0;
}

.url-comp-manager[b-qgx1xzeyz5]  .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-qgx1xzeyz5]  .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-qgx1xzeyz5]  .form-floating > .autocomplete > .input-group > button {
    top: 50% !important;
    transform: translateX(-5%) translateY(-50%);
    background-color: unset;
}

.url-comp-manager[b-qgx1xzeyz5]  .form-floating > .autocomplete > .input-group > button:hover {
    color: #DB303A;
}

/* fix footer */
.url-comp-manager[b-qgx1xzeyz5]  .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-wl82noprk4] {
    text-align: center;
    background: none;
    color: inherit;
    border: none;
    padding: 0.2rem;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.editIcon1[b-wl82noprk4], .arrowIcon1[b-wl82noprk4] {
    vertical-align: middle;
}
/* /Components/Pages/Maintenance/MenuAndPermissions/UserRoles/UserRoles.razor.rz.scp.css */
/* =============================== */
/*             TAB LIST            */
/* =============================== */
.user-roles-manager[b-67l2wjpefp]  .title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #DEDEDE;
    margin-bottom: 0.5rem;
}
.user-roles-manager[b-67l2wjpefp]  .title-container > .title-outer-section {
    width: 550px;
}

.user-roles-manager .tab-container[b-67l2wjpefp] {
    padding: 0 0.25rem;
}

/* =============================== */
/*  Grouped-role (package) badges   */
/* =============================== */
.user-roles-manager[b-67l2wjpefp]  .ur-package-badge,
.user-roles-manager[b-67l2wjpefp]  .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-67l2wjpefp]  .ur-package-badge {
    background-color: #000061; /* navy - a package the user is a member of */
    font-weight: 600;
}
.user-roles-manager[b-67l2wjpefp]  .ur-viagroup-badge {
    background-color: #009CDC; /* blue - role granted via a package (matches Gatekeeper) */
    font-weight: 500;
}

/* =============================== */
/*   General                        */
/* =============================== */
.user-roles-manager[b-67l2wjpefp]  input[type="search"],
.user-roles-manager[b-67l2wjpefp]  input[type="text"],
.user-roles-manager[b-67l2wjpefp]  input[type="number"],
.user-roles-manager[b-67l2wjpefp]  input[type="select"],
.user-roles-manager[b-67l2wjpefp]  select {
    border-radius: 10px;
    border: 1px solid #1AA3E8;
    height: 25px;
    padding: 0 5px;
    max-width: 200px;
    background: white;
}

.user-roles-manager[b-67l2wjpefp]  input:focus,
.user-roles-manager[b-67l2wjpefp]  select:focus {
    outline-width: 0;
    box-shadow: 0 0 5px #1AA3E8;
}

/* stupid lastpass */
.user-roles-manager[b-67l2wjpefp]  div[data-lastpass-icon-root]{
    display: none !important;
}

.is-ssy[b-67l2wjpefp], .red[b-67l2wjpefp] {
    padding: 0 5px;
    font-weight: bold;
    color: black;
}

.is-ssy[b-67l2wjpefp] {
    background-color: #8CD47E;
}

.red[b-67l2wjpefp] {
    background-color: #FF6961;
}

.small-icon[b-67l2wjpefp] {
    height: 20px;
}
.user-roles-manager[b-67l2wjpefp]  .icon {
    text-align: center;
}
.break-word[b-67l2wjpefp] {
    overflow-wrap: break-word;
}

[b-67l2wjpefp] .form-check-input[data-ssy-disabled="true"],
[b-67l2wjpefp] input.form-control[data-ssy-disabled="true"] {
    pointer-events: none;
}

/* =============================== */
/*   Layout                         */
/* =============================== */
.user-roles-manager .first-level-container[b-67l2wjpefp],
.user-roles-manager .second-level-container[b-67l2wjpefp] {
    height: 40px;
    display: grid;
}

.user-roles-manager .users-tab .first-level-container[b-67l2wjpefp],
.user-roles-manager .users-tab .second-level-container[b-67l2wjpefp] {
    grid-template-columns: 2fr 2fr 3fr;
}
.user-roles-manager .roles-tab .first-level-container[b-67l2wjpefp],
.user-roles-manager .roles-tab .second-level-container[b-67l2wjpefp] {
    grid-template-columns: 3fr 2fr 2fr;
}

.user-roles-manager .departmental-tab .first-level-container[b-67l2wjpefp],
.user-roles-manager .departmental-tab .second-level-container[b-67l2wjpefp] {
    grid-template-columns: 2fr 3fr 2fr;
}

.user-roles-manager .claims-tab .first-level-container[b-67l2wjpefp],
.user-roles-manager .claims-tab .second-level-container[b-67l2wjpefp] {
    grid-template-columns: 2fr 5fr;
}

.user-roles-manager .first-level-container .user-title-container[b-67l2wjpefp] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-roles-manager .first-level-container .checkbox-stack-container[b-67l2wjpefp],
.user-roles-manager .second-level-container .checkbox-stack-container[b-67l2wjpefp]{
    display: flex;
    flex-direction: column;
    align-items: start;
}

.user-roles-manager .first-level-container .actions-container[b-67l2wjpefp], 
.user-roles-manager .second-level-container .actions-container[b-67l2wjpefp]
{
    display: flex;
    justify-self: flex-start;
    justify-content: center;
    align-items: center;
    margin: 0;
}
.user-roles-manager .first-level-container .actions-container figcaption[b-67l2wjpefp],
.user-roles-manager .second-level-container .actions-container figcaption[b-67l2wjpefp] {
    font-weight: bold;
    font-size: 1.1rem;
}
.user-roles-manager .first-level-container .actions-container ul[b-67l2wjpefp],
.user-roles-manager .second-level-container .actions-container ul[b-67l2wjpefp] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.user-roles-manager .first-level-container .actions-container ul li[b-67l2wjpefp],
.user-roles-manager .second-level-container .actions-container ul li[b-67l2wjpefp] {
    padding-left: 5px;
}

.user-roles-manager .second-level-container .filters-container[b-67l2wjpefp] {
    display: flex;
    align-items: center;
    gap: 5px;
}
.user-roles-manager .second-level-container .filters-container:last-child[b-67l2wjpefp] {
    justify-content: flex-end;
}

.user-roles-manager .departmental-tab .second-level-container .selected-container[b-67l2wjpefp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =============================== */
/*  Content containers              */
/* =============================== */
.user-roles-manager .users-tab .content-container[b-67l2wjpefp],
.user-roles-manager .roles-tab .content-container[b-67l2wjpefp],
.user-roles-manager .claims-tab .content-container[b-67l2wjpefp]
{
    display: grid;
}

.user-roles-manager .users-tab .content-container[b-67l2wjpefp] {
    grid-template-columns: 2fr 2fr 3fr;
}
.user-roles-manager .roles-tab .content-container[b-67l2wjpefp] {
    grid-template-columns: 3fr 2fr 2fr;
}
.user-roles-manager .claims-tab .content-container[b-67l2wjpefp] {
    grid-template-columns: 2fr 5fr;
}

.user-roles-manager .table-container[b-67l2wjpefp] {
    height: calc(100vh - 200px);
    border: 1px solid #DEDEDE;
    position: relative;
}

.user-roles-manager .content-container .table-container:nth-child(2)[b-67l2wjpefp] {
    border-left: none;
    border-right: none;
    scrollbar-gutter: stable both-edges;
}

/* =============================== */
/*  Tables  Styling                */
/* =============================== */
.user-roles-manager .table-caption[b-67l2wjpefp] {
    font-weight: normal;
    background-color: #000061;
    color: white;
}

.user-roles-manager table[b-67l2wjpefp] {
    table-layout: fixed;
    width: 100%;
    background-color: #FAFAFA;
}

.user-roles-manager table thead[b-67l2wjpefp] {
    position: sticky;
    top: 0;
    background-color: #FAFAFA;
}

.user-roles-manager table tr:not(.red)[b-67l2wjpefp] {
    background-color: #FAFAFA;
    vertical-align: top;
}

.user-roles-manager[b-67l2wjpefp]  table.quickgrid[theme=ssy-table-dw] tbody tr:has(span.selected) {
    background-color: #DEDEDE;
    font-weight: bold;
}

.user-roles-manager[b-67l2wjpefp]  table tbody tr:hover {
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
}
.user-roles-manager .content-container .table-container:first-child[b-67l2wjpefp]  table tbody tr:hover td,
.user-roles-manager .content-container .table-container:not(:first-child)[b-67l2wjpefp]  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-67l2wjpefp]  .ur-row-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: flex-start;
}

.user-roles-manager[b-67l2wjpefp]  .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-67l2wjpefp]  .ur-icon-remove:hover {
    background-color: #ffd9d6;
}

.user-roles-manager[b-67l2wjpefp]  .ur-icon-edit:hover {
    background-color: #ddebf8;
}

.user-roles-manager[b-67l2wjpefp]  table .remove:hover {
    background-color: #FF6961;
}

.user-roles-manager[b-67l2wjpefp]  table .add:hover {
    background-color: #8CD47E;
}

.user-roles-manager[b-67l2wjpefp]  table .edit:hover
{
    background-color: #F7A506;
}

.user-roles-manager[b-67l2wjpefp]  table[theme="ssy-table-dw"] tr th > .col-header-content > span,
.user-roles-manager[b-67l2wjpefp]  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-67l2wjpefp]  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-67l2wjpefp]  table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.user-roles-manager .departmental-tab[b-67l2wjpefp]  table .sticky-col {
    position: sticky;
    left: 252px;
    width: 252px;
    z-index: 1;
    background: inherit;
}

.user-roles-manager .departmental-tab[b-67l2wjpefp]  table thead .sticky-col {
    z-index: 3;
    background: #000061;
}

.user-roles-manager .departmental-tab[b-67l2wjpefp]  table .sticky-col:first-child {
    left: 0;
}

.user-roles-manager .departmental-tab[b-67l2wjpefp]  th button.col-title{
    border: none;
    background: none;
    position: relative;
    cursor: pointer;
}
.user-roles-manager .users-tab[b-67l2wjpefp]  th .col-header-content,
.user-roles-manager .users-tab[b-67l2wjpefp]  th .col-header-content .col-title,
.user-roles-manager .roles-tab[b-67l2wjpefp]  th .col-header-content,
.user-roles-manager .roles-tab[b-67l2wjpefp]  th .col-header-content .col-title,
.user-roles-manager .departmental-tab[b-67l2wjpefp]  th .col-header-content,
.user-roles-manager .departmental-tab[b-67l2wjpefp]  th .col-header-content .col-title,
.user-roles-manager .claims-tab[b-67l2wjpefp]  th .col-header-content,
.user-roles-manager .claims-tab[b-67l2wjpefp]  th .col-header-content .col-title {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.user-roles-manager .users-tab[b-67l2wjpefp]  th .col-header-content,
.user-roles-manager .users-tab[b-67l2wjpefp]  th .col-header-content .col-title,
.user-roles-manager .roles-tab[b-67l2wjpefp]  th .col-header-content,
.user-roles-manager .roles-tab[b-67l2wjpefp]  th .col-header-content .col-title,
.user-roles-manager .claims-tab[b-67l2wjpefp]  th .col-header-content,
.user-roles-manager .claims-tab[b-67l2wjpefp]  th .col-header-content .col-title{
    justify-content: flex-start;
}

.user-roles-manager .departmental-tab[b-67l2wjpefp]  th .col-header-content,
.user-roles-manager .departmental-tab[b-67l2wjpefp]  th .col-header-content .col-title {
    height: 150px;
    width: 100%;
    align-items: end;
}

.user-roles-manager .users-tab[b-67l2wjpefp]  th .col-header-content .col-title .sort-indicator,
.user-roles-manager .roles-tab[b-67l2wjpefp]  th .col-header-content .col-title .sort-indicator,
.user-roles-manager .claims-tab[b-67l2wjpefp]  th .col-header-content .col-title .sort-indicator,
.user-roles-manager .departmental-tab[b-67l2wjpefp]  th:not(.department-vertical-text) .col-header-content .col-title .sort-indicator {
    align-self: end;
}

.user-roles-manager .departmental-tab[b-67l2wjpefp]  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-67l2wjpefp]  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-67l2wjpefp]  table[theme="ssy-table-dw"] tr {
    position: relative;
}

.user-roles-manager[b-67l2wjpefp]  table[theme="ssy-table-dw"] tr .cover-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.user-roles-manager .departmental-tab[b-67l2wjpefp]  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-67l2wjpefp]  td .ssy-custom-checkbox-container input:disabled ~ .ssy-custom-checkbox-checkmark,
.user-roles-manager .departmental-tab[b-67l2wjpefp]  td .ssy-custom-checkbox-container:hover input ~ .ssy-custom-checkbox-checkmark {
    background-color: #F4F7F9;
    border: 1px solid #F4F7F9;
}

.user-roles-manager .departmental-tab[b-67l2wjpefp]  td .ssy-custom-checkbox-container input:checked ~ .ssy-custom-checkbox-checkmark {
    background-color: #000061;
    border: 1px solid #000061;
}

.user-roles-manager .departmental-tab[b-67l2wjpefp]  .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-67l2wjpefp] {
        --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-67l2wjpefp] {
        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-67l2wjpefp]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, var(--ur-tint), transparent);
    }

    .ur-form-section:first-child[b-67l2wjpefp] {
        margin-top: 0;
    }

    .ur-form-row[b-67l2wjpefp] {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }

    .ur-form-pair[b-67l2wjpefp] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .ur-form-label[b-67l2wjpefp] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--ur-navy);
    }

    .ur-form-hint[b-67l2wjpefp] {
        font-size: 0.68rem;
        font-weight: 400;
        font-style: italic;
        color: var(--ur-muted);
    }

    .ur-field[b-67l2wjpefp] {
        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-67l2wjpefp] {
        border-color: #b9c6d8;
        background-color: #ffffff;
    }

    .ur-field:focus[b-67l2wjpefp] {
        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-67l2wjpefp]::placeholder {
        color: #9aa8bb;
    }

    /* Six visible rows, resizable, scrolls beyond that */
    .ur-textarea[b-67l2wjpefp] {
        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-67l2wjpefp] {
        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-67l2wjpefp] {
        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-67l2wjpefp] {
            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-y2edhr09b4] {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 50px;
    column-gap: 10%;
    /*grid-auto-columns: 650px;*/
}

@media (max-width: 1300px) {
    .vm-grid[b-y2edhr09b4] {
        grid-template-columns: auto;
    }
}

.vm-flex[b-y2edhr09b4] {
    display: flex;
    flex-direction: row;
    gap: 5rem;
    align-items: flex-start;
}

.vm-flex.vm-big-gap[b-y2edhr09b4] {
    gap: 1.5rem;
}

.vm-flex-col[b-y2edhr09b4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* scoped to this page's headings (no bare h2/h3 selector) */
.vm-grid h2[b-y2edhr09b4],
.vm-grid h3[b-y2edhr09b4] {
    margin-bottom: 0.5rem;
}

.vm-status-list[b-y2edhr09b4] {
    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-y2edhr09b4] {
    margin-bottom: 0;
}

.vm-grey[b-y2edhr09b4] {
    color: #6c757d;
}

.vm-red[b-y2edhr09b4] {
    color: red;
}

.vm-green[b-y2edhr09b4] {
    color: green;
}

.vm-orange[b-y2edhr09b4] {
    color: orange;
}

.vm-date-selector[b-y2edhr09b4] {
    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-y2edhr09b4] {
    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-y2edhr09b4] {
    font-size: 1.55rem;
    line-height: 1;
    color: #c62222;
    flex: 0 0 auto;
}

.vm-warning-text[b-y2edhr09b4] {
    line-height: 1.35;
}

.vm-warning-text b[b-y2edhr09b4] {
    color: #6e1310;
}
/* /Components/Pages/Maintenance/User/ComponentSettingsUpdate.razor.rz.scp.css */
.component-settings-content[b-nfcrgyi60p]  .type-column span {
    max-width: 200px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.component-settings-content[b-nfcrgyi60p]  .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-nfcrgyi60p]  .hide-mobile {
        display: none;
    }

}

/* modal form additions */
[b-nfcrgyi60p] #EditComponentSettingForm .form-floating textarea {
    height: calc(15rem + 2px);
}
/* /Components/Pages/Maintenance/User/RegisterUser/RegisterUser.razor.rz.scp.css */
.form-signup[b-uec5io8wu8] {
    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-uec5io8wu8] .form-grid {
    display: grid;
    grid-template-columns:auto auto;
    grid-row-gap: 1em;
}

/* Request details popup styling */
[b-uec5io8wu8] .request-details-container {
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

[b-uec5io8wu8] .request-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

[b-uec5io8wu8] .request-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

[b-uec5io8wu8] .request-field {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

[b-uec5io8wu8] .request-field:last-child {
    margin-bottom: 0;
}

[b-uec5io8wu8] .field-label {
    flex: 0 0 160px;
    font-weight: 600;
    color: #495057;
    position: relative;
    padding-left: 28px;
}

[b-uec5io8wu8] .field-value {
    flex: 1;
    padding-left: 1rem;
    color: #212529;
}

[b-uec5io8wu8] .field-icon {
    position: absolute;
    left: 0;
    top: 2px;
    color: #000061;
    font-size: 18px;
}

[b-uec5io8wu8] .request-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

[b-uec5io8wu8] .request-list-item {
    padding: 0.75rem 1rem;
    background-color: white;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    border-left: 3px solid #000061;
}

[b-uec5io8wu8] .request-list-item:last-child {
    margin-bottom: 0;
}

[b-uec5io8wu8] .section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000061;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

[b-uec5io8wu8] .actions-section {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

[b-uec5io8wu8] .close-button {
    background-color: #000061;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

[b-uec5io8wu8] .close-button:hover {
    background-color: #00004d;
}
/* /Components/Pages/Maintenance/User/RegisterUser/RegisterUserRoleSelect.razor.rz.scp.css */
figcaption[b-53brpo4bcw] {
    margin-bottom: 0.5rem;
}
small b[b-53brpo4bcw] {
    font-size: 1.5em;
    line-height: 1;
}
ul[b-53brpo4bcw] {
    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-53brpo4bcw] {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0 0;
}

ul > li > hr[b-53brpo4bcw] {
    width: 100%;
}

.small-form-flex[b-53brpo4bcw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

select[b-53brpo4bcw] {
    border-radius: 3px;
    border: 1px solid #1AA3E8;
    height: 20px;
    padding: 0 5px;
    background: white;
}

.small-icon[b-53brpo4bcw] {
    height: 20px;
    width: 20px;
}
.remove:hover[b-53brpo4bcw] {
    background-color: #FF6961;
}

.add:hover[b-53brpo4bcw] {
    background-color: #8CD47E;
}

/* /Components/Pages/Maintenance/User/Usage/Usage_010_Main.razor.rz.scp.css */
.usg-main[b-qfwwxz3zy4] {
    padding: 1rem 1.25rem;
}

/* ---- Page tabs (left aligned) ---- */
.usg-tabs[b-qfwwxz3zy4] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #E3E3E8;
}

.usg-tab[b-qfwwxz3zy4] {
    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-qfwwxz3zy4] {
    color: #000061;
    background: #F2F5FB;
}

.usg-tab.active[b-qfwwxz3zy4] {
    color: #000061;
    font-weight: 600;
    border-bottom-color: #000061;
}

/* ---- Toolbar ---- */
.usg-toolbar[b-qfwwxz3zy4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0 0.5rem;
}

.usg-toolbar-filters[b-qfwwxz3zy4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.usg-search input[b-qfwwxz3zy4] {
    width: 16rem;
    border-radius: 18px;
}

/* ---- Modern single-line date range ---- */
.usg-daterange[b-qfwwxz3zy4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.usg-date[b-qfwwxz3zy4] {
    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-qfwwxz3zy4] {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 3px rgba(0, 0, 97, 0.12);
}

.usg-daterange-arrow[b-qfwwxz3zy4] {
    color: #9aa1b1;
    font-size: 0.95rem;
}

.usg-presets[b-qfwwxz3zy4] {
    display: inline-flex;
    gap: 0.2rem;
    margin-left: 0.35rem;
}

.usg-preset-btn[b-qfwwxz3zy4] {
    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-qfwwxz3zy4] {
    border-color: #000061;
    color: #000061;
}

.usg-preset-btn.active[b-qfwwxz3zy4] {
    background: #000061;
    border-color: #000061;
    color: #fff;
}

.usg-panels[b-qfwwxz3zy4] {
    padding-top: 0.5rem;
}

.usg-muted[b-qfwwxz3zy4] {
    color: #6c727f;
    font-size: 0.85rem;
}

.usg-domain-add[b-qfwwxz3zy4] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.usg-chip-list[b-qfwwxz3zy4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.usg-chip[b-qfwwxz3zy4] {
    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-qfwwxz3zy4] {
    border: none;
    background: transparent;
    color: #000061;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.usg-chip-x:hover[b-qfwwxz3zy4] {
    color: #DB303A;
}

/* ---- Child tab content (reached via ::deep) ---- */
.usg-main[b-qfwwxz3zy4]  .usg-tab {
    padding-top: 0.4rem;
}

.usg-main[b-qfwwxz3zy4]  .usg-tab-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.usg-main[b-qfwwxz3zy4]  .usg-col-filter {
    width: 16rem;
    border-radius: 6px;
}

.usg-main[b-qfwwxz3zy4]  .usg-count {
    color: #6c727f;
    font-size: 0.85rem;
}

.usg-main[b-qfwwxz3zy4]  .usg-muted {
    color: #6c727f;
    font-size: 0.85rem;
}

.usg-main[b-qfwwxz3zy4]  .usg-row-btn {
    padding: 0.1rem 0.5rem;
    font-size: 0.78rem;
    margin: 0 0.1rem;
}

.usg-main[b-qfwwxz3zy4]  .usg-periods {
    display: inline-flex;
    gap: 0.35rem;
}

.usg-main[b-qfwwxz3zy4]  .usg-period-btn.active {
    background: #000061;
    color: #fff;
}

.usg-main[b-qfwwxz3zy4]  .usg-pill {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 10px;
    font-size: 0.78rem;
    background: #E9EFF9;
    color: #000061;
}

.usg-main[b-qfwwxz3zy4]  .usg-pill-warn {
    background: #FCEFD6;
    color: #8a5a00;
}

.usg-main[b-qfwwxz3zy4]  .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-v9ri2iol8x] {
    padding-top: 0.4rem;
}

.lk-muted[b-v9ri2iol8x] {
    color: #6c727f;
    font-size: 0.82rem;
}

.lk-pad[b-v9ri2iol8x] {
    padding: 0.6rem 0.2rem;
}

/* ---- Search bar ---- */
.lk-searchbar[b-v9ri2iol8x] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.lk-search-input[b-v9ri2iol8x] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lk-search-input input[b-v9ri2iol8x] {
    width: 22rem;
    border-radius: 18px;
}

.lk-hint[b-v9ri2iol8x] {
    color: #5a6071;
    background: #F2F5FB;
    border: 1px dashed #D5D9E2;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    font-size: 0.9rem;
}

.lk-hint-detail[b-v9ri2iol8x] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ---- Body split ---- */
.lk-body[b-v9ri2iol8x] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.lk-lists[b-v9ri2iol8x] {
    flex: 1 1 480px;
    min-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lk-detail[b-v9ri2iol8x] {
    flex: 2 1 620px;
    min-width: 520px;
}

/* ---- User list tables ---- */
.lk-list-block[b-v9ri2iol8x] {
    border: 1px solid #E3E3E8;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.lk-list-title[b-v9ri2iol8x] {
    background: #F2F5FB;
    color: #000061;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #E3E3E8;
}

.lk-utable[b-v9ri2iol8x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.lk-utable th[b-v9ri2iol8x] {
    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-v9ri2iol8x] {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid #F1F1F4;
    vertical-align: top;
    white-space: nowrap;
}

.lk-urow[b-v9ri2iol8x] {
    cursor: pointer;
    transition: background .12s;
}

.lk-urow:hover[b-v9ri2iol8x] {
    background: #F6F9FE;
}

.lk-urow.lk-sel[b-v9ri2iol8x] {
    background: #E9EFF9;
}

.lk-urow.lk-sel td[b-v9ri2iol8x] {
    border-color: #D3DEF3;
}

.lk-uname[b-v9ri2iol8x] {
    display: block;
    font-weight: 600;
    color: #1c2436;
}

.lk-uemail[b-v9ri2iol8x] {
    display: block;
    color: #6c727f;
    font-size: 0.74rem;
}

.lk-uby[b-v9ri2iol8x] {
    color: #5a6071;
    font-size: 0.76rem;
}

.lk-urow-del .lk-uname[b-v9ri2iol8x] {
    color: #a11;
}

/* ---- Detail header ---- */
.lk-detail-head[b-v9ri2iol8x] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.lk-dt-name[b-v9ri2iol8x] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #000061;
}

.lk-dt-email[b-v9ri2iol8x] {
    color: #6c727f;
    font-size: 0.85rem;
    margin-left: 0.4rem;
}

/* ---- Panels ---- */
.lk-panels[b-v9ri2iol8x] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.lk-card[b-v9ri2iol8x] {
    border: 1px solid #E3E3E8;
    border-radius: 10px;
    background: #fff;
    padding: 0.8rem 0.9rem;
}

.lk-card-activity[b-v9ri2iol8x] {
    /*flex: 3 1 560px;
    min-width: 360px;*/
    width: 50rem;
}

.lk-card-history[b-v9ri2iol8x] {
    flex: 2 1 420px;
    min-width: 340px;
}

.lk-card-roles[b-v9ri2iol8x] {
    flex: 1 1 240px;
    min-width: 220px;
}

.lk-card-h[b-v9ri2iol8x] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #000061;
    margin: 0 0 0.15rem;
}

.lk-card-sub[b-v9ri2iol8x] {
    color: #6c727f;
    font-size: 0.76rem;
    margin: 0 0 0.6rem;
}

/* ---- Activity summary table ---- */
.lk-actscroll[b-v9ri2iol8x],
.lk-histscroll[b-v9ri2iol8x] {
    overflow-x: auto;
}

.lk-acttable[b-v9ri2iol8x] {
    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-v9ri2iol8x] { width: 2.6rem; }

.lk-acttable th[b-v9ri2iol8x],
.lk-acttable td[b-v9ri2iol8x] {
    padding: 0.28rem 0.3rem;
    border-bottom: 1px solid #F1F1F4;
    text-align: center;
}

.lk-acttable .lk-actname[b-v9ri2iol8x] {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lk-grouprow th.lk-group[b-v9ri2iol8x] {
    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-v9ri2iol8x] {
    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-v9ri2iol8x] {
    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-v9ri2iol8x] {
    text-align: left;
    background: #F2F5FB;
    color: #000061;
    font-weight: 600;
    font-size: 0.76rem;
    padding: 0.32rem 0.5rem;
}

.lk-num[b-v9ri2iol8x] {
    font-variant-numeric: tabular-nums;
    color: #1c2436;
    border-radius: 4px;
}

/* Heat scale — busier periods read darker at a glance. */
.lk-num.lk-c0[b-v9ri2iol8x] { color: #cfd3db; }
.lk-num.lk-c1[b-v9ri2iol8x] { background: #EAF1FB; }
.lk-num.lk-c2[b-v9ri2iol8x] { background: #CFE0F6; }
.lk-num.lk-c3[b-v9ri2iol8x] { background: #9FC0EC; color: #10233f; }
.lk-num.lk-c4[b-v9ri2iol8x] { background: #5B8AD6; color: #fff; font-weight: 600; }

/* ---- History table ---- */
.lk-histtable[b-v9ri2iol8x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.lk-histtable th[b-v9ri2iol8x] {
    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-v9ri2iol8x] {
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid #F1F1F4;
    vertical-align: top;
}

.lk-histscroll[b-v9ri2iol8x] {
    max-height: 30rem;
    overflow-y: auto;
}

.lk-when[b-v9ri2iol8x] {
    white-space: nowrap;
    color: #5a6071;
}

.lk-what[b-v9ri2iol8x] {
    display: block;
    font-weight: 600;
    color: #1c2436;
}

.lk-what-raw[b-v9ri2iol8x] {
    display: block;
    color: #9aa1b1;
    font-size: 0.7rem;
}

.lk-fromto .lk-old[b-v9ri2iol8x] {
    color: #a11;
}

.lk-fromto .lk-new[b-v9ri2iol8x] {
    color: #1a7a3d;
}

.lk-fromto .lk-arrow[b-v9ri2iol8x] {
    color: #9aa1b1;
    margin: 0 0.25rem;
}

/* ---- Roles ---- */
.lk-roletype[b-v9ri2iol8x] {
    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-v9ri2iol8x] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.4rem;
}

.lk-rolelist li[b-v9ri2iol8x] {
    padding: 0.28rem 0.1rem;
    border-bottom: 1px solid #F5F5F7;
}

.lk-role-disp[b-v9ri2iol8x] {
    display: block;
    font-weight: 600;
    color: #1c2436;
    font-size: 0.82rem;
}

.lk-role-name[b-v9ri2iol8x] {
    display: block;
    color: #9aa1b1;
    font-size: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lk-role-exp .lk-role-disp[b-v9ri2iol8x] {
    color: #9aa1b1;
    text-decoration: line-through;
}

.lk-role-badge[b-v9ri2iol8x] {
    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-bgtx2j1mvy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.dd-table th[b-bgtx2j1mvy], .dd-table td[b-bgtx2j1mvy] {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid #F1F1F4;
    text-align: left;
    white-space: nowrap;
}

.dd-table td.dd-num[b-bgtx2j1mvy], .dd-table th.dd-num[b-bgtx2j1mvy] { text-align: right; }

.dd-filterrow th[b-bgtx2j1mvy] {
    padding: 2px 3px;
    background: #F7F9FD;
    border-bottom: 1px solid #E3E3E8;
}

.dd-filterrow input[b-bgtx2j1mvy] {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.72rem;
    padding: 1px 4px;
    border: 1px solid #d7dbe3;
    border-radius: 3px;
}

.dd-titlerow th[b-bgtx2j1mvy] {
    cursor: pointer;
    background: #000061;
    color: #fff;
    font-weight: 600;
    user-select: none;
}

.dd-titlerow th:hover[b-bgtx2j1mvy] { background: #1a1a7a; }

.dd-pager[b-bgtx2j1mvy] {
    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-jwv8erwnhe] {
    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-jwv8erwnhe] {
    width: 120px;
    margin-bottom: 15px;
}

.sub-title[b-jwv8erwnhe] {
    font-size: 1.4rem;
}

.sub-hint[b-jwv8erwnhe] {
    color: #888;
    font-size: 0.85rem;
}

.sub-email[b-jwv8erwnhe] {
    color: #555;
}

.sub-intro[b-jwv8erwnhe] {
    margin-bottom: 0;
}

/* Shown when the registrations couldn't be read or the preferences couldn't be saved. */
.sub-error[b-jwv8erwnhe] {
    color: #b3261e;
    font-size: 0.9rem;
    margin-top: 16px;
}
.sub-explain[b-jwv8erwnhe] {
    margin-bottom: 20px;
}

.sub-rows[b-jwv8erwnhe] {
    text-align: left;
    display: inline-block;
    min-width: 320px;
}

/* One channel: post-type name + a single checkbox. */
.sub-row[b-jwv8erwnhe] {
    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-jwv8erwnhe] {
    grid-template-columns: 1fr 72px 90px;
}

.sub-name[b-jwv8erwnhe] {
    cursor: default;
}

.sub-ch[b-jwv8erwnhe] {
    text-align: center;
}

.sub-ch input[b-jwv8erwnhe] {
    cursor: pointer;
}

.sub-head[b-jwv8erwnhe] {
    border-bottom: 2px solid #ddd;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sub-actions[b-jwv8erwnhe] {
    margin-top: 28px;
}

.sub-confirm-btn[b-jwv8erwnhe] {
    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-e6t2xap2z3] {
    height: calc(100vh - 60px);
    margin: 0 auto;
    padding: 5px 10px 0 10px;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    color: #333;
    display: flex;
    flex-direction: column;
}

.vpf-state[b-e6t2xap2z3] {
    text-align: center;
    padding: 48px 0;
}

.vpf-logo[b-e6t2xap2z3] {
    width: 240px;
    margin-bottom: 40px;
}

.vpf-title[b-e6t2xap2z3] {
    font-size: 1.4rem;
}

.vpf-hint[b-e6t2xap2z3] {
    color: #888;
    font-size: 0.85rem;
}

.vpf-loading-text[b-e6t2xap2z3] {
    color: #888;
    font-size: 0.9rem;
}

/* Download button - rendered into PublicLayout's navy bar (via its NavbarActionsSection), so it's styled for
   that bar: white on navy, inverting on hover. Sized to sit inside the 50px bar. */
.vpf-download-form[b-e6t2xap2z3] {
    margin: 0;
}

.vpf-download[b-e6t2xap2z3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 22px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    color: #000061;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
}

    .vpf-download:hover[b-e6t2xap2z3],
    .vpf-download:focus-visible[b-e6t2xap2z3] {
        color: #FFFFFF;
        background-color: transparent;
        border-color: #FFFFFF;
    }

    .vpf-download:focus-visible[b-e6t2xap2z3] {
        outline: 2px solid #00E2FD;
        outline-offset: 2px;
    }

/* Fills the height below the bar. */
.vpf-viewer[b-e6t2xap2z3] {
    flex: 1 1 auto;
    min-height: 0;
}

/* Narrow screens: icon and "Download" only, so it fits beside the logo. */
@media (max-width: 600px) {
    .vpf-download[b-e6t2xap2z3] {
        padding: 5px 14px;
    }

    .vpf-download-more[b-e6t2xap2z3] {
        display: none;
    }
}
/* /Components/Pages/Public/Redirects.razor.rz.scp.css */
.loading-container[b-32itiodltu] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
}

.loading-spinner[b-32itiodltu] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000061;
    border-radius: 50%;
    animation: spinner-b-32itiodltu 1.5s linear infinite;
    margin-bottom: 15px;
}

@keyframes spinner-b-32itiodltu {
    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-ffk3jpjz2z] {
    --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-ffk3jpjz2z] {
    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-ffk3jpjz2z] {
    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-ffk3jpjz2z] {
    flex: 1 1 0;
    min-height: 340px;
}

/* Mobile: collapse to a single column (everything stacked). */
@media (max-width: 1100px) {
    .pud-grid[b-ffk3jpjz2z] {
        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-ffk3jpjz2z]  .ssy-h2 { color: var(--accent-3); }
.pud-grid[b-ffk3jpjz2z]  .uranium-bpi-price-value { color: var(--text); }
.pud-grid[b-ffk3jpjz2z]  .uranium-bpi-price-label { color: var(--text); }
.pud-grid[b-ffk3jpjz2z]  .uranium-bpi-divider { color: var(--text); }
.pud-grid[b-ffk3jpjz2z]  .uranium-bpi-asof { color: var(--text); }
.pud-grid[b-ffk3jpjz2z]  .uranium-price-up { color: var(--success); }
.pud-grid[b-ffk3jpjz2z]  .uranium-price-down { color: var(--danger); }
.pud-grid[b-ffk3jpjz2z]  .uranium-price-flat { color: var(--muted); }

/* ── BPI & Options & % Return calculator cards (uoc- / urc-) ───────────────── */
.pud-grid[b-ffk3jpjz2z]  .ubp-card,
.pud-grid[b-ffk3jpjz2z]  .uoc-card,
.pud-grid[b-ffk3jpjz2z]  .urc-card {
    background: var(--panel);
    border-color: var(--grid);
    color: var(--text);
    box-shadow: var(--shadow);
}

.pud-grid[b-ffk3jpjz2z]  .uoc-title,
.pud-grid[b-ffk3jpjz2z]  .urc-title { color: var(--accent-3); }

.pud-grid[b-ffk3jpjz2z]  .uoc-price-value,
.pud-grid[b-ffk3jpjz2z]  .urc-return-value { color: var(--accent-3); }

.pud-grid[b-ffk3jpjz2z]  .uoc-greek-value,
.pud-grid[b-ffk3jpjz2z]  .urc-annual-value { color: var(--accent-2); }

.pud-grid[b-ffk3jpjz2z]  .uoc-result-label,
.pud-grid[b-ffk3jpjz2z]  .urc-result-label,
.pud-grid[b-ffk3jpjz2z]  .uoc-label,
.pud-grid[b-ffk3jpjz2z]  .urc-label,
.pud-grid[b-ffk3jpjz2z]  .uoc-note,
.pud-grid[b-ffk3jpjz2z]  .urc-note { color: var(--text); }

.pud-grid[b-ffk3jpjz2z]  .urc-days { color: var(--accent-3); }

.pud-grid[b-ffk3jpjz2z]  .uoc-divider,
.pud-grid[b-ffk3jpjz2z]  .urc-divider { border-top-color: var(--grid); }

/* Directional return colours */
.pud-grid[b-ffk3jpjz2z]  .urc-pos { color: var(--success); }
.pud-grid[b-ffk3jpjz2z]  .urc-neg { color: var(--danger); }

/* Inputs */
.pud-grid[b-ffk3jpjz2z]  .uoc-input,
.pud-grid[b-ffk3jpjz2z]  .urc-input {
    background: var(--panel-2);
    border-color: var(--grid);
    color: var(--text);
}

.pud-grid[b-ffk3jpjz2z]  .uoc-input:focus,
.pud-grid[b-ffk3jpjz2z]  .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-ffk3jpjz2z]  .uoc-input::-webkit-calendar-picker-indicator,
.pud-grid[b-ffk3jpjz2z]  .urc-input::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
}

/* Greeks toggle */
.pud-grid[b-ffk3jpjz2z]  .uoc-greeks-toggle { color: var(--text); }
.pud-grid[b-ffk3jpjz2z]  .uoc-greeks-toggle input { accent-color: var(--accent); }

/* Call / Put pill toggle */
.pud-grid[b-ffk3jpjz2z]  .uoc-toggle-btn {
    background: var(--panel-2);
    color: var(--text);
    border-color: var(--accent);
}
.pud-grid[b-ffk3jpjz2z]  .uoc-toggle-btn:hover {
    background: rgba(0, 135, 203, 0.18);
}
.pud-grid[b-ffk3jpjz2z]  .uoc-toggle-active,
.pud-grid[b-ffk3jpjz2z]  .uoc-toggle-active:hover {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

/* ── Live U3O8 curve table (ulc-) ────────────────────────────────────── */
.pud-grid[b-ffk3jpjz2z]  .ulc-wrap {
    background: var(--panel);
    border-color: var(--grid);
    color: var(--text);
}
.pud-grid[b-ffk3jpjz2z]  .ulc-title { color: var(--accent-3); }
.pud-grid[b-ffk3jpjz2z]  .ulc-th {
    color: var(--text);
    border-bottom-color: var(--grid);
}
.pud-grid[b-ffk3jpjz2z]  .ulc-row td { border-bottom-color: rgba(42, 42, 69, 0.6); }
.pud-grid[b-ffk3jpjz2z]  .ulc-row:hover td { background: rgba(0, 135, 203, 0.15); }
.pud-grid[b-ffk3jpjz2z]  .ulc-row td.ulc-period { color: var(--accent-3); }
.pud-grid[b-ffk3jpjz2z]  .ulc-row td.ulc-loc { color: var(--text); }
.pud-grid[b-ffk3jpjz2z]  .ulc-row td.ulc-bid { color: var(--success); }
.pud-grid[b-ffk3jpjz2z]  .ulc-row td.ulc-indic { color: var(--text); }
.pud-grid[b-ffk3jpjz2z]  .ulc-row td.ulc-ask { color: var(--danger); }
.pud-grid[b-ffk3jpjz2z]  .ulc-up { color: var(--success); }
.pud-grid[b-ffk3jpjz2z]  .ulc-down { color: var(--danger); }
.pud-grid[b-ffk3jpjz2z]  .ulc-flat { color: var(--muted); }
.pud-grid[b-ffk3jpjz2z]  .ulc-asof  { color: var(--text); }
.pud-grid[b-ffk3jpjz2z]  .ulc-empty { color: var(--muted); }
/* /Components/Pages/SNP/ApiSetup/SNPRatesSetup.razor.rz.scp.css */
.snpextractbox[b-h5srpg7wwz] {
    border: 1px solid #009DC9;
    height: 85vh;
    overflow-y: scroll;
}

.snpextractdatepicker[b-h5srpg7wwz] {
}

.snpextractroutepicker[b-h5srpg7wwz] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 10px;
}

.snpextractroutepicker-ul[b-h5srpg7wwz] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.snpextractroutepicker-ul .chkbox[b-h5srpg7wwz] {
    margin: 0 3px 0 0;
    vertical-align: middle;
}


.snpextractroutepicker-ul li[b-h5srpg7wwz] {
    text-decoration: none;
}

.snpextractroutepicker-ul li:hover[b-h5srpg7wwz] {
    background-color: #B5CBD6;
}


.deleterow[b-h5srpg7wwz], .editapiclient[b-h5srpg7wwz] {
    cursor: pointer;
    padding-right: 3px;
}

.deleterow:hover[b-h5srpg7wwz] {
    font-weight: 700;
    color: white;
}

.draggablerow[b-h5srpg7wwz] {
    cursor: pointer;
}

.editapiclient[b-h5srpg7wwz] {
    color: #163E9F;
}


.editapiclient:hover[b-h5srpg7wwz] {
    font-weight: 700;
    color: #91A527;
}
/* /Components/Pages/SNP/Dashboards/VesselAffordability/VesselAffordability.razor.rz.scp.css */
.va-dashboard[b-5bh04v9asi] {
    padding: 16px 20px 32px;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
}

.va-header[b-5bh04v9asi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 16px;
}

.va-title[b-5bh04v9asi] {
    color: #000061;
    font-size: 2.2rem;
    font-weight: 600;
    margin: 0;
}

.va-empty[b-5bh04v9asi] {
    text-align: center;
    color: #555;
    margin-top: 40px;
}

/* ── Vessel-type filter (segmented radio group) ──────────────────────── */
.va-tabs[b-5bh04v9asi] {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid #009DC9;
    border-radius: 6px;
    overflow: hidden;
}

.va-tab[b-5bh04v9asi] {
    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-5bh04v9asi] {
    border-right: none;
}

/* Hide the native radio control - the label IS the button. */
.va-tab input[b-5bh04v9asi] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.va-tab:hover[b-5bh04v9asi] {
    background: #e6f4f9;
}

.va-tab-active[b-5bh04v9asi] {
    background: #009DC9;
    color: #fff;
}

/* Keyboard focus ring for accessibility */
.va-tab:focus-within[b-5bh04v9asi] {
    outline: 2px solid #163E9F;
    outline-offset: -2px;
}

/* ── Dashboard grid ──────────────────────────────────────────────────── */
.va-grid[b-5bh04v9asi] {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr;
    grid-auto-rows: min-content;
    gap: 16px;
}

.va-panel[b-5bh04v9asi] {
    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-5bh04v9asi] {
    color: #009DC9;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.va-panel-sub[b-5bh04v9asi] {
    color: #7a8a96;
    font-size: 0.8rem;
    margin: 2px 0 8px;
}

.va-asof[b-5bh04v9asi] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #009DC9;
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
}

/* ── Charts ──────────────────────────────────────────────────────────── */
.va-chart[b-5bh04v9asi] {
    height: 260px;
    width: 100%;
    min-width: 0;
}

.va-chart-tall[b-5bh04v9asi] {
    height: 340px;
}

/* ── Market Snapshot tables ──────────────────────────────────────────── */
.va-snapshot-tables[b-5bh04v9asi] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.va-snapshot-block[b-5bh04v9asi] {
    flex: 1 1 200px;
    min-width: 0;
}

.va-table[b-5bh04v9asi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.va-table th[b-5bh04v9asi],
.va-table td[b-5bh04v9asi] {
    padding: 4px 8px;
    text-align: right;
}

.va-table thead tr:first-child th[b-5bh04v9asi] {
    background: #000061;
    color: #fff;
    font-weight: 600;
}

.va-table .va-th-left[b-5bh04v9asi] {
    text-align: left;
}

.va-table .va-subhead th[b-5bh04v9asi] {
    background: #f1f4f8;
    color: #7a8a96;
    font-weight: 500;
    font-size: 0.75rem;
}

.va-table tbody tr:nth-child(even)[b-5bh04v9asi] {
    background: #f7f9fb;
}

.va-td-empty[b-5bh04v9asi] {
    text-align: center;
    color: #999;
    padding: 10px;
}

.va-neg[b-5bh04v9asi] {
    color: #DB303A;
}

.va-pos[b-5bh04v9asi] {
    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-5bh04v9asi] {
        grid-template-columns: 1fr;
    }

    .va-header[b-5bh04v9asi] {
        justify-content: flex-start;
    }

    .va-tabs[b-5bh04v9asi] {
        width: 100%;
    }

    .va-tab[b-5bh04v9asi] {
        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-5bh04v9asi] {
        padding: 12px 12px 24px;
    }

    .va-title[b-5bh04v9asi] {
        font-size: 1.6rem;
    }

    .va-tab[b-5bh04v9asi] {
        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-5bh04v9asi] {
        height: 240px;
    }

    .va-chart-tall[b-5bh04v9asi] {
        height: 280px;
    }

    .va-snapshot-tables[b-5bh04v9asi] {
        gap: 12px;
    }
}
/* /Components/Pages/SNP/Reports/FleetChanges/Components/FleetTable.razor.rz.scp.css */
.fleet-summary-pdf-font[b-oug90wcomn] {
    font-size: 1em !important;
}
/* /Components/Pages/SNP/Reports/FleetChanges/Components/OrderBook.razor.rz.scp.css */
.fleet-summary-pdf-font[b-ru6g5gpz4v] {
    font-size: 1em !important;
}
/* /Components/Pages/SNP/Reports/FleetChanges/FleetSummary.razor.rz.scp.css */
.fleet-summary-pdf-footer[b-cmvdakw2s8] {
    height: 7% !important;
    font-size: 0.8em !important;
}
.fleet-summary-pdf-main[b-cmvdakw2s8] {
    height: 83% !important;
    font-size: 0.85em !important;
}
.fleet-summary-pdf-msg[b-cmvdakw2s8] {
    margin-top: 1% !important;
    font-size: 0.8em !important;
}
/* /Components/Pages/SNP/Reports/FleetChanges/FleetSummaryMain.razor.rz.scp.css */
.vessel-search-box[b-p8gn0dlsdv] {
    height: 88%;
    width: 95%;
    border: 2px solid lightgray;
    border-radius: 10px;
    margin: 1%;
    padding: 0.5% 1.5%;
}

.vessel-search-item[b-p8gn0dlsdv] {
    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-p8gn0dlsdv] {
        background-color: #B6EBFD;
    }
/* /Components/Pages/SNP/Reports/NewBuild/NewBuild.razor.rz.scp.css */
.snp-nb-no-pdf[b-rhph1fnyjd] {
    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-6o8b2aqduh] {
    margin-bottom: 8px;
}

.nbc-paste-toggle[b-6o8b2aqduh] {
    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-6o8b2aqduh] {
    display: inline-block;
    width: 10px;
    font-size: 0.7rem;
}

.nbc-paste-zone[b-6o8b2aqduh] {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nbc-paste-label[b-6o8b2aqduh] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
}

.nbc-paste-hint[b-6o8b2aqduh] {
    font-weight: 400;
    color: #9ca3af;
}

.nbc-paste-textarea[b-6o8b2aqduh] {
    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-6o8b2aqduh] {
        outline: none;
        border-color: #000061;
    }

.nbc-paste-status[b-6o8b2aqduh] {
    font-size: 0.7rem;
    border-radius: 3px;
    padding: 3px 6px;
}

.nbc-paste-ok[b-6o8b2aqduh] {
    background: #f0fdf4;
    color: #15803d;
}

.nbc-paste-warn[b-6o8b2aqduh] {
    background: #fef2f2;
    color: #b91c1c;
}

.nbc-paste-actions[b-6o8b2aqduh] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.nbc-apply-btn[b-6o8b2aqduh],
.nbc-clear-btn[b-6o8b2aqduh] {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.nbc-apply-btn[b-6o8b2aqduh] {
    background: #000061;
    color: white;
}

    .nbc-apply-btn:hover:not(:disabled)[b-6o8b2aqduh] {
        background: #0000a0;
    }

.nbc-clear-btn[b-6o8b2aqduh] {
    background: #e5e7eb;
    color: #374151;
}

    .nbc-clear-btn:hover:not(:disabled)[b-6o8b2aqduh] {
        background: #d1d5db;
    }

.nbc-apply-btn:disabled[b-6o8b2aqduh],
.nbc-clear-btn:disabled[b-6o8b2aqduh] {
    opacity: 0.4;
    cursor: not-allowed;
}

.nbc-paste-check[b-6o8b2aqduh] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #374151;
    margin: 0;
    cursor: pointer;
}

.nbc-paste-summary[b-6o8b2aqduh] {
    font-size: 0.68rem;
    color: #15803d;
}
/* /Components/Pages/SNP/Reports/NewBuild/NewBuildPricingPopup.razor.rz.scp.css */
[b-rb2lv6msb5] .inputNumberRightAlign {
    text-align: right;
    font-size: 14px;
    min-width: 5rem;
    max-width: 8rem;
    /*        width: 100%;*/
}

[b-rb2lv6msb5] .stalePrice {
    background-color: LightYellow;
}
/* /Components/Pages/SubscriptionsManager/Subscriptions.razor.rz.scp.css */
/* Layout */
.layout-container[b-3ip44ovgo9] {
    display: flex;
    height: calc(100vh - 180px);  /* Reduced height */
    overflow: hidden;
}

/* Sidebar */
.select-list[b-3ip44ovgo9] {
    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-3ip44ovgo9] {
    margin-left: 280px;
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    max-height: calc(100vh - 180px);  /* Added max-height */
}

/* Subscription Items */
.subscription-item[b-3ip44ovgo9] {
    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-3ip44ovgo9] {
    transform: translateX(2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-color: #000061;
}

.subscription-title[b-3ip44ovgo9] {
    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-3ip44ovgo9] { border-left: 4px solid #91A527; }
.subscription-item-expiring[b-3ip44ovgo9] { border-left: 4px solid #FF9800; }
.subscription-item-expired[b-3ip44ovgo9] { border-left: 4px solid #DC3545; }
.subscription-item-inactive[b-3ip44ovgo9] {
    border-left: 4px solid #6c757d;
    opacity: 0.8;
}

/* Active State Styles */
.subscription-item.active[b-3ip44ovgo9] {
    background-color: #000061;
    color: white;
    border-color: #000061;
    border-left-width: 4px !important;
}

.subscription-item.active.subscription-item-active[b-3ip44ovgo9] { border-left-color: #91A527 !important; }
.subscription-item.active.subscription-item-expiring[b-3ip44ovgo9] { border-left-color: #FF9800 !important; }
.subscription-item.active.subscription-item-expired[b-3ip44ovgo9] { border-left-color: #DC3545 !important; }
.subscription-item.active.subscription-item-inactive[b-3ip44ovgo9] { border-left-color: #6c757d !important; }

/* Card Styles */
.card[b-3ip44ovgo9] {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-header[b-3ip44ovgo9] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.75rem 1rem;
}

/* Table Styles */
.billing-table[b-3ip44ovgo9] {
    width: 100%;
    border-collapse: collapse;
}

.billing-table th[b-3ip44ovgo9] {
    background: #f5f5f5;
    padding: 0.75rem;
    text-align: left;
    border-bottom: 2px solid #000061;
}

.billing-table td[b-3ip44ovgo9] {
    padding: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
}

.amount-cell[b-3ip44ovgo9] {
    font-family: monospace;
}

.status-cell[b-3ip44ovgo9] {
    width: 100px;
}

.container[b-3ip44ovgo9] {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 120px);
    gap: 1rem;
    padding: 0 1rem;
}

.subscription-item-active[b-3ip44ovgo9] {
    border-left: 4px solid #91A527;
}

.subscription-item-expiring[b-3ip44ovgo9] {
    border-left: 4px solid #FF9800;
}

.subscription-item-expired[b-3ip44ovgo9] {
    border-left: 4px solid #DC3545;
}

.subscription-item-inactive[b-3ip44ovgo9] {
    border-left: 4px solid #6c757d;
    opacity: 0.8;
}

.subscription-item.active .text-muted[b-3ip44ovgo9] {
    color: rgba(255,255,255,0.7) !important;
}

.subscription-info[b-3ip44ovgo9] {
    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-3ip44ovgo9] {
    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-3ip44ovgo9] {
    color: white;
}

.details[b-3ip44ovgo9] {
    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-3ip44ovgo9] {
    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-3ip44ovgo9] {
    font-family: 'Soehne Breit', 'Franklin Gothic Book', Arial, sans-serif;
    color: #000061;
    font-size: 1.5rem;
    margin: 0;
}

.details-content[b-3ip44ovgo9] {
    padding: 1rem 0;
}

.billing-list[b-3ip44ovgo9] {
    list-style: none;
    padding: 0;
}

.billing-item[b-3ip44ovgo9] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
    align-items: center;
}

.actions-bar[b-3ip44ovgo9] {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

.card-header h6[b-3ip44ovgo9] {
    font-family: 'Soehne Breit', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1rem;
    color: #000061;
}

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

.table-sm[b-3ip44ovgo9] {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
}

.table-sm td[b-3ip44ovgo9] {
    padding: 0.6rem 0.5rem;
    vertical-align: middle;
}

.table-sm td strong[b-3ip44ovgo9] {
    color: #000061;
    font-weight: 600;
}

.badge[b-3ip44ovgo9] {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-weight: 500;
    padding: 0.4em 0.8em;
}

.text-muted[b-3ip44ovgo9] {
    color: #6c757d !important;
    font-weight: 400;
}

.input-group .btn-outline-secondary[b-3ip44ovgo9] {
    border-color: #ced4da;
    color: #000061;
}

.input-group .btn-outline-secondary:hover[b-3ip44ovgo9] {
    background-color: #f8f9fa;
    color: #000061;
}

.filter-card[b-3ip44ovgo9] {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-color: #e0e0e0;
}

.tab-buttons[b-3ip44ovgo9],
.tab-button[b-3ip44ovgo9],
.tab-button.active[b-3ip44ovgo9] {
    display: none;
}

[b-3ip44ovgo9] .nav-tabs {
    margin-bottom: 1rem;
    border-bottom: 2px solid #000061;
}

[b-3ip44ovgo9] .nav-tabs .nav-link.active {
    color: #000061;
    font-weight: 600;
    border-bottom: 2px solid #000061;
}

.related-approvals[b-3ip44ovgo9] {
    padding: 0.5rem;
    margin: 0.5rem 0;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #000061;
}

.related-approvals h6[b-3ip44ovgo9] {
    color: #000061;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.related-approvals .table[b-3ip44ovgo9] {
    margin-bottom: 0;
}

.approval-count[b-3ip44ovgo9] {
    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-3ip44ovgo9] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.approval-step[b-3ip44ovgo9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.75rem;
    background: #f0f0f0;
}

.approval-step.pending[b-3ip44ovgo9] {
    background: #fff3cd;
    color: #856404;
}

.approval-step.approved[b-3ip44ovgo9] {
    background: #d4edda;
    color: #155724;
}

.approval-step.rejected[b-3ip44ovgo9] {
    background: #f8d7da;
    color: #721c24;
}

.step-number[b-3ip44ovgo9] {
    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-3ip44ovgo9] {
    font-weight: 500;
}

/* Workflow Status Styles */
.workflow-status[b-3ip44ovgo9] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.workflow-step[b-3ip44ovgo9] {
    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-3ip44ovgo9] {
    background: #fff3cd;
    color: #856404;
}

.workflow-step.approved[b-3ip44ovgo9] {
    background: #d4edda;
    color: #155724;
}

.workflow-step.rejected[b-3ip44ovgo9] {
    background: #f8d7da;
    color: #721c24;
}

/* Button Group Styles */
.btn-group[b-3ip44ovgo9] {
    display: flex;
    gap: 4px;
}

.btn-group .ssy-btn-light[b-3ip44ovgo9],
.btn-group .ssy-btn-red[b-3ip44ovgo9] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.description-box[b-3ip44ovgo9] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #000061;
    margin-bottom: 1.5rem;
}

.description-box :deep(h1)[b-3ip44ovgo9], 
.description-box :deep(h2)[b-3ip44ovgo9], 
.description-box :deep(h3)[b-3ip44ovgo9], 
.description-box :deep(h4)[b-3ip44ovgo9] {
    color: #000061;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.description-box :deep(p)[b-3ip44ovgo9] {
    margin-bottom: 0.75rem;
}

.description-box :deep(ul)[b-3ip44ovgo9], 
.description-box :deep(ol)[b-3ip44ovgo9] {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .layout-container[b-3ip44ovgo9] {
        flex-direction: column;
        height: calc(100vh - 140px);
    }

    .select-list[b-3ip44ovgo9] {
        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-3ip44ovgo9] {
        left: 0;
    }

    .main-content[b-3ip44ovgo9] {
        margin-left: 0;
        padding: 0.5rem;
        max-height: calc(100vh - 140px);
        margin-top: 60px;
    }

    .mobile-header[b-3ip44ovgo9] {
        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-3ip44ovgo9] {
        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-3ip44ovgo9] {
        background-color: rgba(0,0,97,0.05);
    }

    .mobile-overlay.open[b-3ip44ovgo9] {
        display: block;
    }

    .card[b-3ip44ovgo9] {
        margin-bottom: 1rem;
    }

    .table-responsive-mobile[b-3ip44ovgo9] {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .col-md-6[b-3ip44ovgo9] {
        width: 100%;
    }

    [b-3ip44ovgo9] .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .billing-table-wrapper[b-3ip44ovgo9] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }
}

.mobile-overlay[b-3ip44ovgo9] {
    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-3ip44ovgo9] {
        display: block;
    }
}

/* Matrix mode styles */
.layout-container.matrix-mode[b-3ip44ovgo9] {
    padding: 0;
    height: calc(100vh - 120px);
    overflow: hidden;
}

.layout-container.matrix-mode .main-content[b-3ip44ovgo9] {
    margin-left: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.layout-container.matrix-mode .card[b-3ip44ovgo9] {
    margin: 0;
    border: none;
    border-radius: 0;
    height: 100%;
}

.layout-container.matrix-mode .card-body[b-3ip44ovgo9] {
    height: 100%;
}

/* Adjust matrix container in full screen mode */
.layout-container.matrix-mode .matrix-container[b-3ip44ovgo9] {
    height: calc(100vh - 180px);
    max-height: none;
}

.top-left-clear[b-3ip44ovgo9] {
    position: absolute;
    top: calc(55px + 32px);
    left: 15px;
}
/* /Components/Pages/SubscriptionsManager/SubscriptionsManagerManageUser.razor.rz.scp.css */
:global(.autocomplete-list-fts)[b-pkiz24bndp],
:global(.dropdown-menu.autocomplete-list-fts)[b-pkiz24bndp],
:global(.dropdown-menu[class*='autocomplete-list'])[b-pkiz24bndp],
:global(ul[class*='autocomplete-list'])[b-pkiz24bndp] {
    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-pkiz24bndp],
:global(.dropdown-menu.autocomplete-list-fts)[b-pkiz24bndp] {
    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-pkiz24bndp] {
    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-pkiz24bndp],
.autocomplete-list-fts .dropdown-item:focus[b-pkiz24bndp] {
    background-color: #eff6ff !important;
    border-left: 3px solid #2563eb !important;
}

.autocomplete-list-fts .dropdown-item.active[b-pkiz24bndp] {
    background-color: #eff6ff !important;
    border-left: 3px solid #2563eb !important;
    color: #2563eb !important;
}

/* SSYFTS-inspired search bar styles */
:root[b-pkiz24bndp] {
    --border-color: #d1d5db;
    --header-bg: #f3f4f6;
    --highlight-color: #2563eb;
    --highlight-bg: #eff6ff;
    --accent-color: #000061;
}

.search-container[b-pkiz24bndp] {
    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-pkiz24bndp] {
    margin: 0;
    position: relative;
}

.search-bar.form-control[b-pkiz24bndp] {
    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-pkiz24bndp]::placeholder {
    color: #999999;
}

.search-bar.form-control:focus[b-pkiz24bndp] {
    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-pkiz24bndp] {
    outline: black auto 1px;
}

.input-group > button.btn[b-pkiz24bndp] {
    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-pkiz24bndp] {
    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-pkiz24bndp] {
    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-pkiz24bndp],
.dropdown-item:focus[b-pkiz24bndp] {
    background-color: var(--highlight-bg);
    border-left: 3px solid var(--highlight-color);
}

.dropdown-item.active[b-pkiz24bndp] {
    background-color: var(--highlight-bg);
    border-left: 3px solid var(--highlight-color);
    color: var(--highlight-color);
}

/* User information card */
.card[b-pkiz24bndp] {
    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-pkiz24bndp] {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
}

.card-body[b-pkiz24bndp] {
    padding: 1.5rem;
}

/* Definition list styling */
dl.row[b-pkiz24bndp] {
    margin-bottom: 0;
}

dt[b-pkiz24bndp] {
    font-weight: 600;
    color: #4b5563;
}

dd[b-pkiz24bndp] {
    margin-bottom: 0.75rem;
}

/* Department selection styles */
.form-select[b-pkiz24bndp] {
    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-pkiz24bndp] {
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

.btn-primary[b-pkiz24bndp] {
    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-pkiz24bndp] {
    background-color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.btn-primary:disabled[b-pkiz24bndp] {
    background-color: #93c5fd;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Alert styling */
.alert[b-pkiz24bndp] {
    border-radius: 0;
    border-left: 4px solid #60a5fa;
    background-color: #f0f9ff;
    color: #0369a1;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.alert-warning[b-pkiz24bndp] {
    border-left: 4px solid #eab308;
    background-color: #fefce8;
    color: #854d0e;
}

/* Table styling */
.user-table-container[b-pkiz24bndp] {
    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-pkiz24bndp] {
    min-width: 700px;
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.user-table th[b-pkiz24bndp], .user-table td[b-pkiz24bndp] {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.user-table th[b-pkiz24bndp] {
    background-color: var(--header-bg);
    font-weight: 600;
    color: #374151;
    position: sticky;
    top: 0;
    z-index: 1;
}

.user-table th:not(:last-child)[b-pkiz24bndp],
.user-table td:not(:last-child)[b-pkiz24bndp] {
    border-right: 1px solid #f3f4f6;
}

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

.user-table tbody tr:hover[b-pkiz24bndp] {
    background-color: #fafafa;
}

.user-table tbody tr:nth-child(even)[b-pkiz24bndp] {
    background-color: #fcfcfc;
}

/* Checkbox styling */
input[type="checkbox"][b-pkiz24bndp] {
    width: 16px;
    height: 16px;
    cursor: not-allowed;
}

/* Department assignment section */
.department-assignment[b-pkiz24bndp] {
    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-pkiz24bndp] {
    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-pkiz24bndp] {
    color: var(--highlight-color);
    font-weight: 600;
    font-size: 1.1rem;
}

/* Permission toggle styling */
.permission-toggle[b-pkiz24bndp] {
    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-pkiz24bndp] {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
}

.permission-toggle:focus[b-pkiz24bndp] {
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
    border-color: #2563eb !important;
}

.form-check-label[b-pkiz24bndp] {
    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-pkiz24bndp], .user-table td[b-pkiz24bndp] {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .user-table[b-pkiz24bndp] {
        min-width: 600px;
    }

    .card-body[b-pkiz24bndp] {
        padding: 1rem;
    }
}

@media (max-width: 600px) {
    .user-table th[b-pkiz24bndp], .user-table td[b-pkiz24bndp] {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .user-table[b-pkiz24bndp] {
        min-width: 450px;
    }

    dt[b-pkiz24bndp] {
        margin-bottom: 0.25rem;
    }
}

/* Enhanced department field styling */
.department-field[b-pkiz24bndp] {
    position: relative;
}

.department-select[b-pkiz24bndp] {
    min-width: 200px;
    transition: all 0.2s ease;
}

.department-select:focus + .save-department-btn[b-pkiz24bndp] {
    opacity: 1;
}

.save-department-btn[b-pkiz24bndp] {
    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-pkiz24bndp] {
    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-pkiz24bndp] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    border: 2px solid #cbd5e1;
    border-radius: 3px;
}

/* Department Assignment Section */
.department-assignment-section[b-pkiz24bndp] {
    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-pkiz24bndp] {
    color: #2563eb;
    font-weight: 600;
    font-size: 1.1rem;
}

.department-assign-button[b-pkiz24bndp] {
    white-space: nowrap;
    min-width: 160px;
}

.department-assign-button:disabled[b-pkiz24bndp] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* General card improvements */
.card[b-pkiz24bndp] {
    border-radius: 0.375rem !important;
    overflow: hidden;
}

.card-header[b-pkiz24bndp] {
    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-pkiz24bndp] {
    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-pkiz24bndp] {
    position: relative;
}

/* Save all button styling */
.save-all-button[b-pkiz24bndp] {
    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-pkiz24bndp] {
    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-pkiz24bndp] {
    background-color: #93c5fd;
    border-color: #60a5fa;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Unified form styling */
.department-field[b-pkiz24bndp] {
    position: relative;
    width: 100%;
}

.department-field .form-select[b-pkiz24bndp] {
    margin-bottom: 0.3rem;
    border-color: #d1d5db;
    border-radius: 0.25rem;
    height: 38px;
}

.department-field .form-select:focus[b-pkiz24bndp] {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

/* Make alert nicer */
.alert-success[b-pkiz24bndp] {
    background-color: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    animation: fadeIn-b-pkiz24bndp 0.5s;
}

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

/* Make form sections more organized */
h5[b-pkiz24bndp] {
    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-pkiz24bndp] {
    margin-bottom: 0;
}

.card-body dt[b-pkiz24bndp] {
    color: #4b5563;
    font-weight: 600;
}

/* Form actions styling */
.form-actions[b-pkiz24bndp] {
    border-top: 1px solid #e5e7eb;
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.save-all-button[b-pkiz24bndp] {
    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-pkiz24bndp] {
    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-pkiz24bndp] {
    opacity: 0.65;
    cursor: not-allowed;
    background-color: #93c5fd;
    border-color: #60a5fa;
}

/* Status message container */
.status-message-container[b-pkiz24bndp] {
    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-9vwwcknh8u] {
    width: calc(100% - 4rem);
}
@media (max-width: 576px) {
    .container-fluid[b-9vwwcknh8u] {
        width: 100%;
    }
}

.broker-dashboard-container .vessel-tab-quick-links-container[b-9vwwcknh8u]  .quick-links-component {
    background: #000061;
    height: 100%;
}

.vessel-tab-load-container[b-9vwwcknh8u],
.vessel-tab-fundamentals-container[b-9vwwcknh8u] {
    background: white;
    border: 1px solid #009DC9;
}

.vessel-tab-load-container[b-9vwwcknh8u] {
    min-height: 430px;
}

.vessel-tab-fundamentals-container[b-9vwwcknh8u] {
    min-height: 350px;
}

.vessel-tab-load-container > .ssy-colour-lw[b-9vwwcknh8u],
.vessel-tab-fundamentals-container > .ssy-colour-lw[b-9vwwcknh8u]  {
    max-height: fit-content;
}

.vessel-tab-load-container .fcicon[b-9vwwcknh8u],
.vessel-tab-ffa-container .fcicon[b-9vwwcknh8u],
.vessel-tab-fundamentals-container .fcicon[b-9vwwcknh8u] {
    width: 1.5em;
}

.vessel-tab-load-container .fcdesc[b-9vwwcknh8u],
.vessel-tab-ffa-container .fcdesc[b-9vwwcknh8u],
.vessel-tab-fundamentals-container .fcdesc[b-9vwwcknh8u] {
    text-align: left;
    width: 12em;
    padding: 5px 15px 5px 5px;
}

.vessel-tab-load-container .fcprice[b-9vwwcknh8u],
.vessel-tab-ffa-container .fcprice[b-9vwwcknh8u],
.vessel-tab-fundamentals-container .fcprice[b-9vwwcknh8u] {
    text-align: right;
    width: 8em;
    padding: 5px 15px 5px 5px;
}

.vessel-tab-load-container .negNum[b-9vwwcknh8u],
.vessel-tab-ffa-container .negNum[b-9vwwcknh8u],
.vessel-tab-fundamentals-container .negNum[b-9vwwcknh8u] {
    color: red;
}

.vessel-tab-load-container .posNum[b-9vwwcknh8u],
.vessel-tab-ffa-container .posNum[b-9vwwcknh8u],
.vessel-tab-fundamentals-container .posNum[b-9vwwcknh8u] {
    color: darkgreen;
}

.vessel-tab-ffa-container[b-9vwwcknh8u]  h2,
.vessel-tab-quick-links-container[b-9vwwcknh8u]  h2 {
    padding-top: 0.5rem;
}

.vessel-tab-ffa-container h2[b-9vwwcknh8u] {
    /* needed for now can be removed later*/
    text-align: center;
}

.vessel-tab-ffa-container .ssy-radio-main.radio-btns[b-9vwwcknh8u] {
    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-9vwwcknh8u] {
    display: flex;
    justify-content: center;
}

.vessel-tab-ffa-container .ssy-radio-main.radio-btns .radio-label[b-9vwwcknh8u] {
    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-9vwwcknh8u]{
    background-color: #000061;
}

.vessel-tab-fundamentals-container .market-commentary p[b-9vwwcknh8u] {
    margin: 0 0.5rem 0.25rem 0.5rem;
    font-size: 0.95rem;
}
.vessel-tab-fundamentals-container .market-commentary p:first-child[b-9vwwcknh8u] {
    /*margin-top: 0.5rem;*/
    margin-bottom: 0.5rem;
}

.vessel-tab-quick-links-container[b-9vwwcknh8u]  h2 {
    color: white;
}

.ssy-radio-main[b-9vwwcknh8u] {
    display: inline-flex;
    overflow: initial;
    margin-bottom: 0;
}

.loading-container[b-9vwwcknh8u] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
}

.loading-spinner[b-9vwwcknh8u] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000061;
    border-radius: 50%;
    animation: spinner-b-9vwwcknh8u 1.5s linear infinite;
    margin-bottom: 15px;
}

@keyframes spinner-b-9vwwcknh8u {
    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-re0dds499b] .ssy-date-selector {
    font-size: 1.5em;
    color: #009DC9;
}
[b-re0dds499b] .ssy-date-selector time {
    font-weight: 600;
}

/* Table style */
.positive[b-re0dds499b] {
    color: mediumseagreen !important;
}

.negative[b-re0dds499b] {
    color: crimson !important;
}
.ssy-table-lw td[b-re0dds499b], .ssy-table-lw th[b-re0dds499b] {
    padding: .25rem;
}
.cursor-pointer[b-re0dds499b] {
    cursor: pointer;
}
.tanker-fwd-prices[b-re0dds499b]  .text-bold,
.text-bold[b-re0dds499b] {
    font-weight: bold;
}

/* settings modal */
.tanker-fwd-prices[b-re0dds499b]  .displayed-routes,
.tanker-fwd-prices[b-re0dds499b]  .hidden-routes{
    min-height: 35px;
}
.tanker-fwd-prices[b-re0dds499b]  .displayed-routes > div,
.tanker-fwd-prices[b-re0dds499b]  .hidden-routes > div {
    background: #009DC9;
    color: white;
    border-left: 1px solid white;
    border-top: 1px solid white;
}
.tanker-fwd-prices[b-re0dds499b]  .hidden-routes > div {
    background: #000061;
}



/* staff export popup */
.tanker-fwd-prices[b-re0dds499b]  .tfp-export-note {
    margin-bottom: .75rem;
}
.tanker-fwd-prices[b-re0dds499b]  .tfp-export-routes {
    max-height: 280px;
    overflow-y: auto;
}
.tanker-fwd-prices[b-re0dds499b]  .tfp-export-route {
    display: flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
}

/* loading style */
.loading-container[b-re0dds499b] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
}

.loading-spinner[b-re0dds499b] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000061;
    border-radius: 50%;
    animation: spinner-b-re0dds499b 1.5s linear infinite;
    margin-bottom: 15px;
}

@keyframes spinner-b-re0dds499b {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Components/Pages/Tankers/TankerPriceExtractor/TankerPriceExtractor.razor.rz.scp.css */
.tankerextractPageLayout[b-aocgr4vklc] {
    display: grid;
    grid-template-columns: 320px auto;
    gap: 20px;
}

.tankerextractbox[b-aocgr4vklc] {
    border: 1px solid #009DC9;
}

.tankerextractdatepicker[b-aocgr4vklc] {
}

.tankerextractroutepicker[b-aocgr4vklc] {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 20px;
}

.tankerextractroutepicker-ul[b-aocgr4vklc] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    .tankerextractroutepicker-ul .chkbox[b-aocgr4vklc] {
        margin: 0 3px 0 0;
        vertical-align: middle;
    }


    .tankerextractroutepicker-ul li[b-aocgr4vklc] {
        text-decoration: none;
    }

        .tankerextractroutepicker-ul li:hover[b-aocgr4vklc] {
            background-color: #B5CBD6;
        }

.tankerextractroutepicker-tbl tr:hover[b-aocgr4vklc] {
    background-color: #B5CBD6;
}

.tankerextractroutepicker-tbl td[b-aocgr4vklc] {
    padding-right: 30px;
}

.tankerextractroutepicker-tbl .delete[b-aocgr4vklc] {
    cursor: pointer;
    padding-right: 3px;
}

    .tankerextractroutepicker-tbl .delete:hover[b-aocgr4vklc] {
        font-weight: 700;
        color: white;
    }

.tankerextractoutput-tbl th:not(:first-child)[b-aocgr4vklc] {
    text-align: center;
    border: 1px solid #B5CBD6;
}

.tankerextractoutput-tbl[b-aocgr4vklc] {
    text-align: right;
}

    .tankerextractoutput-tbl tr:hover[b-aocgr4vklc] {
        background-color: #B5CBD6;
    }

    .tankerextractoutput-tbl td:first-child[b-aocgr4vklc], .tankerextractoutput-tbl th:first-child[b-aocgr4vklc] {
        text-align: left;
    }

    .tankerextractoutput-tbl th label[b-aocgr4vklc] {
        font-size: 0.8rem;
        font-weight: normal;
        color: #163E9F;
        font-style: italic;
    }

.tankerextractoutpup-btn-text[b-aocgr4vklc] {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 300px auto;
    align-items: center;
}

.tankerextractoutput-c3y[b-aocgr4vklc] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.disclaimer-accordion[b-aocgr4vklc] {
    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-aocgr4vklc] {
        background-color: #405864;
        color: white;
    }
/* /Components/Pages/Towage/Representation.razor.rz.scp.css */
/* /Components/Shared/ExpandableText.razor.rz.scp.css */
.expandable-text[b-d536ralv9j] {
    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-d536ralv9j] {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #000061;
    font-size: 1.25rem;
}

.truncated-text[b-d536ralv9j], .full-text[b-d536ralv9j] {
    line-height: 1.6;
    color: #333;
}

.expand-button[b-d536ralv9j] {
    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-d536ralv9j] {
    color: #000033;
}

[b-d536ralv9j] h1, [b-d536ralv9j] h2, [b-d536ralv9j] h3, [b-d536ralv9j] h4 {
    color: #000061;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

[b-d536ralv9j] p {
    margin-bottom: 0.75rem;
}

[b-d536ralv9j] ul, [b-d536ralv9j] ol {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

[b-d536ralv9j] code {
    background: #eee;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.9em;
}

[b-d536ralv9j] blockquote {
    border-left: 2px solid #ccc;
    margin-left: 0;
    padding-left: 1rem;
    color: #666;
}