/* =====================================================================
   CobraCore / CargoCore  -  CLIENT PORTAL dashboard  (cobracore-portal.css)
   ---------------------------------------------------------------------
   2026-09-10. JLozano. Styling for the redesigned DashboardPage:
   calendar (top-left) -> transaction list (bottom-left) -> detail card (right).

   ADDITIVE and SCOPED: every rule below is under .cc-portal, so nothing
   here can leak into the login / auth screens or the Telerik swatch.
   Loaded LAST in wwwroot/index.html, after cobracore-navy.css.

   To turn this off: remove the <link ... cobracore-portal.css> in
   wwwroot/index.html.
   ===================================================================== */

/* The variables are shared with .cc-modal because TelerikWindow renders its content at
   the app root, outside .cc-portal - without this the popups lose the whole palette. */
.cc-portal,
.cc-modal {
    --ccp-navy: #0c2340;
    --ccp-navy-2: #14365c;
    --ccp-navy-3: #1c4a7a;
    --ccp-blue: #3a55d9;
    --ccp-blue-l: #6f86ef;
    --ccp-gold: #f5a623;
    --ccp-ink: #16202e;
    --ccp-muted: #6b7a90;
    --ccp-line: #e2e8f2;
    --ccp-surface: #ffffff;
    --ccp-surface-2: #f4f7fb;
    --ccp-danger: #c0392b;
    --ccp-radius: 6px;
    /* ------------------------------------------------------------------
       THE HEIGHT KNOB. The three panes fill the viewport minus this much
       (top menu bar + the portal header row + the sticky footer AppBar).
       Lower it to make the transaction list and the card run further down
       the page; raise it if the bottom of the card slides under the
       footer. This is the only value that controls pane height.
       ------------------------------------------------------------------ */
    --ccp-workspace-offset: 180px;
    --ccp-shadow: 0 1px 2px rgba(12, 35, 64, .06), 0 8px 24px rgba(12, 35, 64, .07);
    color: var(--ccp-ink);
}

/* ---------------------------------------------------------------------
   Page header
   --------------------------------------------------------------------- */
.cc-portal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 2px 14px;
}

.cc-portal-title {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    margin-right: auto;
}

    .cc-portal-title .cc-portal-sub {
        font-size: 0.925rem;
        letter-spacing: .10em;
        text-transform: uppercase;
        color: var(--ccp-muted);
        font-weight: 600;
    }

    .cc-portal-title .cc-portal-company {
        font-size: 1.525rem;
        font-weight: 700;
        color: var(--ccp-navy);
    }

/* 2026-09-12. JLozano. The view-mode buttons (Calendar / All transactions / Refresh) as ONE unit,
   so they stay together and wrap below the title as a group on small screens. */
.cc-portal-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* KPI chips */
.cc-kpi {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--ccp-surface);
    border: 1px solid var(--ccp-line);
    box-shadow: 0 1px 2px rgba(12, 35, 64, .05);
    white-space: nowrap;
}

    .cc-kpi b {
        font-size: 1.312rem;
        color: var(--ccp-navy);
        font-variant-numeric: tabular-nums;
    }

    .cc-kpi span {
        font-size: 0.975rem;
        color: var(--ccp-muted);
    }

    .cc-kpi.cc-kpi-new b {
        color: var(--ccp-danger);
    }

/* ---------------------------------------------------------------------
   Three-pane workspace
   --------------------------------------------------------------------- */
.cc-portal-grid {
    display: grid;
    grid-template-columns: 366px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    height: calc(100vh - var(--ccp-workspace-offset));
    min-height: 520px;
}

.cc-pane {
    background: var(--ccp-surface);
    border: 1px solid var(--ccp-line);
    border-radius: var(--ccp-radius);
    box-shadow: var(--ccp-shadow);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cc-pane-cal {
    grid-column: 1;
    grid-row: 1;
}

.cc-pane-list {
    grid-column: 1;
    grid-row: 2;
}

.cc-pane-card {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* 2026-09-12. JLozano. Monthly-activity view: no calendar, so the list takes the whole left
   column and spans both rows next to the card. */
.cc-portal-grid-month .cc-pane-list {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* month pager in the monthly list header */
.cc-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.cc-month-label {
    min-width: 118px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ccp-navy);
    text-transform: none;
}

/* the published date leading the monthly item's meta line */
.cc-tx-when {
    font-weight: 700;
    color: var(--ccp-navy-3);
}

/* scrollIntoView lands the pane top under the 48px sticky app menu without this offset */
#ccTxListTop,
#ccCardTop {
    scroll-margin-top: 56px;
}

.cc-pane-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;   /* 2026-09-12. JLozano. Let the count drop below the label instead of overflowing on narrow panes. */
    gap: 4px 8px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--ccp-line);
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ccp-muted);
    flex: 0 0 auto;
}

    .cc-pane-head .cc-pane-count {
        margin-left: auto;
        font-size: 0.875rem;
        color: var(--ccp-navy-3);
        letter-spacing: .02em;
        text-transform: none;
        font-weight: 600;
    }

.cc-pane-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 10px 12px 14px;
}

/* ---------------------------------------------------------------------
   Calendar  (Telerik Calendar + custom month cell template)
   --------------------------------------------------------------------- */
.cc-portal .cc-cal .k-calendar {
    width: 100%;
    border: 0;
    font-size: 1.025rem;
}

/* ---------------------------------------------------------------------
   COMPACT CALENDAR
   Telerik ships the calendar with generous chrome: padding on the view,
   border-spacing between cells, and a tall month-navigation header. For a
   366px side pane that wastes most of the pane's height on air. Everything
   below squeezes that out; the cell height is the one number to tune.
   --------------------------------------------------------------------- */

/* the pane wrapper - tighter than the standard .cc-pane-body */
.cc-portal .cc-pane-body.cc-cal {
    padding: 6px 8px 8px;
}

/* month navigation ("< September 2026 >") */
.cc-portal .cc-cal .k-calendar-header {
    padding: 0 0 2px;
    margin: 0;
    min-height: 0;
    gap: 0;
}

.cc-portal .cc-cal .k-calendar-view {
    padding: 0;
    margin: 0;
    gap: 0;
    min-height: 0;
}

/* kill the gaps BETWEEN cells - this is where most of the slack lives.
   width:auto (not 100%) is what stops the seven columns being stretched to
   fill the pane; the table then sizes to the cell widths below and is
   centred, which is where the width reduction comes from. */
.cc-portal .cc-cal .k-calendar-table {
    margin: 0 auto;
    border-spacing: 0;
    border-collapse: collapse;
    width: auto;
}

/* the weekday strip (Su Mo Tu ...) sits right on top of the first row */
.cc-portal .cc-cal .k-calendar-th,
.cc-portal .cc-cal .k-calendar-caption {
    padding: 1px 0 3px;
    height: auto;
    font-size: 0.825rem;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--ccp-muted);
}

/* THE TWO KNOBS. Height trades calendar height for cell size; width trades
   how wide the grid sits in the pane. Below roughly 30 x 34 the corner count
   badge starts to crowd the day number. */
.cc-portal .cc-cal .k-calendar-td {
    height: 35px;
    width: 35px;
    padding: 0;
}

/* the weekday header cells must match, or the columns drift apart */
.cc-portal .cc-cal .k-calendar-th {
    width: 38px;
}

/* ---------------------------------------------------------------------
   THE GAP UNDER THE GRID.
   Telerik reserves six week-rows so the calendar does not jump height as
   you page between months. With ShowOtherMonthDays="false" a five-row month
   renders that sixth row as blank cells - which is the empty band between
   the last week and the legend.

   A row that contains no .cc-daycell has no real days in it, so it is
   dropped. :has() is unsupported on very old browsers; there the row simply
   stays visible, which is the behaviour we have now - no breakage.
   --------------------------------------------------------------------- */
.cc-portal .cc-cal .k-calendar-tbody tr:not(:has(.cc-daycell)) {
    display: none;
}

/* and stop the view reserving height for the row we just dropped */
.cc-portal .cc-cal .k-calendar-view,
.cc-portal .cc-cal .k-calendar-content,
.cc-portal .cc-cal .k-calendar-monthview {
    min-height: 0;
    height: auto;
}

/* MonthCellTemplate renders inside Telerik's own .k-link box - make that box fill the
   cell and stack, so the day number and the count pill sit one above the other. */
.cc-portal .cc-cal .k-calendar-td .k-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
}

/* ---------------------------------------------------------------------
   Day cell.

   The date is the ONLY numeral in the middle of the cell. The transaction
   count rides in the top-right corner as a filled badge - the same idiom
   as an unread-message count - so it can never be mistaken for a date.
   Days with activity also get a soft tinted plate, which is what makes a
   month scannable at a glance.
   --------------------------------------------------------------------- */
.cc-daycell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

    /* the tinted plate sits behind everything else in the cell.
       2026-09-12. JLozano. inset raised 2px -> 4px (and radius 4 -> 6) so the plates on
       adjacent active days keep a clear gap on all four sides instead of nearly touching. */
    .cc-daycell.cc-day-has::before {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 4px;
        background: rgba(20, 54, 92, .07);
        z-index: 0;
    }

    .cc-daycell > * {
        position: relative;
        z-index: 1;
    }

    .cc-daycell .cc-daynum {
        font-size: .90rem;
        font-variant-numeric: tabular-nums;
    }

/* quiet days recede so the active ones carry the eye */
.cc-daycell.cc-day-empty .cc-daynum {
    color: #aab6c6;
    font-weight: 200;
}

.cc-daycell.cc-day-has .cc-daynum {
    color: var(--ccp-navy);
    font-weight: 500;
}

/* the count badge - corner-anchored, filled, ringed in white so it reads
   as an overlay on the cell rather than a second line of content */
.cc-daybadge {
    position: absolute;
    /* pulled hard into the corner so a two-digit date and the badge do not
       collide now that the cell is only 38px wide */
    top: -1px;
    right: -1px;
    min-width: 22px;
    height: 16px;
    padding: 0 2px;
    border-radius: 999px;
    font-size: 9.50px;
    font-weight: 400;
    line-height: 13px;
    text-align: center;
    color: #fff;
    background: var(--ccp-navy-3);
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(12, 35, 64, .32);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

    /* gold when the day carries something the client has not seen yet */
    .cc-daybadge.cc-daybadge-new {
        background: var(--ccp-gold);
        color: #3a2a00;
    }

/* keep the template readable once Telerik paints the cell as selected */
.cc-portal .cc-cal .k-selected .cc-daynum,
.cc-portal .cc-cal .k-state-selected .cc-daynum {
    color: #fff;
}

/* 2026-09-12. JLozano. Telerik fills the whole cell (its .k-link) for the selected day, so
   selected days ran edge-to-edge into their neighbours. Turn that fill off and paint our own
   inset rounded plate on the daycell instead, matching the 4px breathing room of the active-day
   plates above. The ::before is defined on every .cc-daycell here (not only .cc-day-has), so a
   selected day with no transactions gets the inset fill too. */
.cc-portal .cc-cal .k-calendar-td.k-selected .k-link,
.cc-portal .cc-cal .k-calendar-td.k-state-selected .k-link {
    background: transparent;
    box-shadow: none;
}

.cc-portal .cc-cal .k-selected .cc-daycell::before,
.cc-portal .cc-cal .k-state-selected .cc-daycell::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 6px;
    background: var(--ccp-navy-2);
    z-index: 0;
}

.cc-portal .cc-cal .k-selected .cc-daybadge,
.cc-portal .cc-cal .k-state-selected .cc-daybadge {
    background: #fff;
    color: var(--ccp-navy);
    border-color: rgba(255, 255, 255, .65);
}

.cc-cal-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 2px 0;
    font-size: 0.875rem;
    color: var(--ccp-muted);
}

.cc-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .cc-legend i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        display: inline-block;
    }

.cc-legend-pub i {
    background: var(--ccp-navy-2);
}

.cc-legend-new i {
    background: var(--ccp-gold);
}

/* ---------------------------------------------------------------------
   Transaction list for the selected day
   --------------------------------------------------------------------- */
.cc-txlist {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cc-tx {
    /* 2026-09-12. JLozano. Stripe in col 1 (spanning both rows); the transaction main info on
       row 1 and the PHOTOS / DOCS tags STACKED on row 2 beneath it. Previously the tags sat in a
       third column on the same row and stole width from the Job / PO line, truncating it. */
    display: grid;
    grid-template-columns: 4px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 10px;
    row-gap: 6px;
    padding: 9px 11px 9px 0;
    border: 1px solid var(--ccp-line);
    border-radius: 4px;
    background: var(--ccp-surface);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

    .cc-tx:hover {
        border-color: var(--ccp-blue-l);
        box-shadow: 0 3px 12px rgba(58, 85, 217, .13);
        transform: translateY(-1px);
    }

    .cc-tx:focus-visible {
        outline: 2px solid var(--ccp-blue);
        outline-offset: 2px;
    }

    .cc-tx.cc-tx-selected {
        border-color: var(--ccp-blue);
        box-shadow: 0 0 0 1px var(--ccp-blue) inset, 0 4px 14px rgba(58, 85, 217, .14);
        background: #fbfcff;
    }

/* the type stripe down the left edge - spans both rows (main + tags) */
.cc-tx-stripe {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    border-radius: 4px 0 0 8px;
    background: var(--ccp-navy-2);
}

.cc-tx-type-28 .cc-tx-stripe {
    background: var(--ccp-gold);
}

.cc-tx-main {
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: 0;
}

.cc-tx-id {
    font-weight: 700;
    min-width: 0;
    font-size: 1.125rem;
    color: var(--ccp-navy);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-tx-meta {
    display: block;
    font-size: 0.925rem;
    color: var(--ccp-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-tx-tags {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* No published artifacts on this transaction: the tags row is empty, so drop the row gap. */
.cc-tx-tags:empty {
    display: none;
}

.cc-tag {
    font-size: 11.88px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ccp-surface-2);
    color: var(--ccp-navy-3);
    border: 1px solid var(--ccp-line);
    white-space: nowrap;
}

/* The count inside a PHOTOS / DOCS tag. Darker and tabular so the number reads
   as data rather than as part of the label. */
.cc-tag b {
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--ccp-navy-2);
    color: #fff;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cc-pill-new {
    display: inline-block;
    padding: 1px 7px;
    font-size: 11.88px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.55;
    color: #fff;
    background: var(--ccp-danger);
    border-radius: 10px;
}

/* ---------------------------------------------------------------------
   Detail card
   --------------------------------------------------------------------- */
.cc-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ccp-line);
    background: linear-gradient(120deg, var(--ccp-navy) 0%, var(--ccp-navy-2) 62%, var(--ccp-navy-3) 100%);
    color: #eaf1fa;
    flex: 0 0 auto;
}

.cc-card-kind {
    font-size: 0.825rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    opacity: .78;
    display: block;
}

.cc-card-id {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}

.cc-card-when {
    font-size: 0.925rem;
    opacity: .82;
}

.cc-card-head > div:first-child {
    min-width: 0;
}

.cc-card-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;   /* 2026-09-12. JLozano. Wrap so the last button (Customer Support) is never cut off. */
    gap: 7px;
}

.cc-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
    gap: 1px;
    background: var(--ccp-line);
    border: 1px solid var(--ccp-line);
    border-radius: 4px;
    overflow: hidden;
}

.cc-field {
    background: var(--ccp-surface);
    padding: 9px 12px;
    min-width: 0;
}

.cc-field-label {
    font-size: 0.8rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ccp-muted);
    font-weight: 700;
}

.cc-field-value {
    font-size: 1.175rem;
    font-weight: 600;
    color: var(--ccp-ink);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

    .cc-field-value.cc-empty {
        color: #b9c3d1;
        font-weight: 400;
    }

.cc-parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.cc-party {
    border: 1px solid var(--ccp-line);
    border-radius: 4px;
    padding: 11px 13px;
    background: var(--ccp-surface-2);
}

.cc-party-label {
    font-size: 0.8rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ccp-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .cc-party-label::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ccp-blue);
        display: inline-block;
    }

.cc-party.cc-party-origin .cc-party-label::before {
    background: var(--ccp-gold);
}

.cc-party-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ccp-navy);
    margin-top: 4px;
}

.cc-party-addr {
    font-size: 1rem;
    color: #445366;
    line-height: 1.45;
    margin-top: 2px;
}

.cc-section-label {
    font-size: 0.85rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ccp-muted);
    font-weight: 700;
    margin: 18px 0 7px;
    display: flex;
    align-items: center;
    gap: 9px;
}

    .cc-section-label::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--ccp-line);
    }

/* ---------------------------------------------------------------------
   Empty / skeleton states
   --------------------------------------------------------------------- */
.cc-empty-state {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ccp-muted);
    padding: 26px 20px;
    gap: 5px;
}

    .cc-empty-state .cc-empty-title {
        font-weight: 700;
        color: var(--ccp-navy);
        font-size: 1.2rem;
    }

    .cc-empty-state .cc-empty-sub {
        font-size: 1.025rem;
        max-width: 340px;
    }

.cc-skel {
    background: linear-gradient(90deg, #eef2f8 25%, #f7f9fc 37%, #eef2f8 63%);
    background-size: 400% 100%;
    animation: cc-skel 1.15s ease-in-out infinite;
    border-radius: 6px;
}

@keyframes cc-skel {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.cc-skel-line {
    height: 12px;
    margin-bottom: 9px;
}

.cc-skel-block {
    height: 74px;
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------------
   Responsive - stack the panes on tablet / phone
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .cc-portal-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        height: auto;
        min-height: 0;
    }

    .cc-pane-cal {
        grid-column: 1;
        grid-row: 1;
    }

    .cc-pane-list {
        grid-column: 1;
        grid-row: 2;
    }

    .cc-pane-card {
        grid-column: 1;
        grid-row: 3;
    }

    .cc-pane-list .cc-pane-body {
        max-height: 320px;
    }

    /* Monthly view stacks list-then-card (no calendar row). */
    .cc-portal-grid-month {
        grid-template-rows: auto auto;
    }

        .cc-portal-grid-month .cc-pane-list {
            grid-row: 1;
        }

        .cc-portal-grid-month .cc-pane-card {
            grid-row: 2;
        }

    .cc-portal-head {
        gap: 8px;
    }
}

@media (max-width: 575.98px) {
    /* 2026-09-12. JLozano. Phone: title on its own line, the view-mode buttons as a full-width row
       beneath it (Calendar + All transactions + Refresh together), each button flexing to fill. */
    .cc-portal-title {
        flex: 1 1 100%;
        margin-right: 0;
    }

    .cc-portal-actions {
        flex: 1 1 100%;
    }

        .cc-portal-actions > .k-button {
            flex: 1 1 auto;
        }

    .cc-card-actions {
        margin-left: 0;
        width: 100%;
    }

        /* the header buttons wrap; let them share the row evenly rather than leaving a ragged edge */
        .cc-card-actions > .k-button,
        .cc-card-actions > .cc-qbtn {
            flex: 1 1 auto;
        }

        .cc-card-actions > .cc-qbtn > .k-button {
            width: 100%;
        }

    .cc-portal-title .cc-portal-company {
        font-size: 1.312rem;
    }

    /* MainLayout wraps @Body in `.content px-4` (24px each side) - too much on a phone; it squeezes
       every card. Trim it so the panes get the width back. Scoped to this portal app's stylesheet. */
    .main .content.px-4 {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
}

/* print: only the card matters */
@media print {
    .cc-pane-cal, .cc-pane-list, .cc-portal-head {
        display: none !important;
    }

    .cc-portal-grid {
        display: block;
        height: auto;
    }

    .cc-pane {
        border: 0;
        box-shadow: none;
    }
}


/* ---------------------------------------------------------------------
   Ocean routing legs (shipment card)
   ---------------------------------------------------------------------
   2026-09-10. JLozano. POL and POD read as a journey, so they get paired
   panels with an arrow between them rather than four more identical field
   boxes. Stacks to one column on narrow screens, where the arrow rotates.
   --------------------------------------------------------------------- */
.cc-legs {
    /* 2026-09-12. JLozano. Two equal halves for Port of Loading / Port of Discharge. Was a
       3-column [leg] [arrow] [leg] track, but there is no arrow element in the markup, so the
       second leg landed in the narrow `auto` middle column and read smaller than the first. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
}

.cc-leg {
    border: 1px solid var(--ccp-line);
    border-radius: 8px;
    padding: 11px 13px;
    background: var(--ccp-surface-2);
    min-width: 0;
}

.cc-leg-label {
    font-size: 0.8rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ccp-muted);
    font-weight: 700;
}

.cc-leg-port {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ccp-navy);
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.cc-leg-date {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.cc-leg-when {
    font-size: 1.1rem;
    font-weight: 600;
    color: #445366;
    font-variant-numeric: tabular-nums;
}

    .cc-leg-when.cc-empty {
        color: #b9c3d1;
        font-weight: 400;
        font-size: 1rem;
    }

/* Estimated vs actual is the single most misread thing on a routing panel,
   so it is labelled in words, not left to a date format. */
.cc-leg-tag {
    font-size: 11.88px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 5px;
    background: #db9d00;
    color: #ffffff;
    border: 1px solid var(--ccp-line);
    white-space: nowrap;
}

    .cc-leg-tag.cc-leg-actual {
        background: #09942a;
        color: #ffffff;
        border-color: #bfe3cd;
    }

/* the connector between the two legs */
.cc-leg-arrow {
    align-self: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ccp-navy-2);
    position: relative;
    flex: 0 0 auto;
}

    .cc-leg-arrow::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7px;
        height: 7px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: translate(-65%, -50%) rotate(45deg);
    }

/* Three parties across (shipper / consignee / notify) - the shipment card.
   Narrower minimum than the two-up version on the receipt card. */
.cc-parties.cc-parties-3 {
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.cc-party.cc-party-notify .cc-party-label::before {
    background: var(--ccp-navy-3);
}

@media (max-width: 767.98px) {
    .cc-legs {
        grid-template-columns: minmax(0, 1fr);
    }

    .cc-leg-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }
}


/* =====================================================================
   PORTAL MODALS  -  Photo Gallery + Document List
   ---------------------------------------------------------------------
   2026-09-10. JLozano. Gives both popups the same chrome as the dashboard
   transaction card: navy gradient header, the cc-card-* type scale, and
   the same surface / line / radius tokens.

   Applied by putting Class="cc-modal" on the TelerikWindow. Telerik puts
   that class on the .k-window element, so everything below can hang off
   it - which also re-declares the palette (see the top of this file).
   ===================================================================== */
.cc-modal.k-window {
    border: 0;
    border-radius: var(--ccp-radius);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(12, 35, 64, .28);
}

/* Hand the whole titlebar over to our own .cc-card-head markup. */
.cc-modal .k-window-titlebar {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}

.cc-modal .k-window-title {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    /* Telerik truncates the title to one line; our header is three. */
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

/* ONE SCROLLER, NOT TWO.
   Telerik's .k-window-content scrolls by default once the window hits its
   MaxHeight. .cc-modal-body used to ALSO cap its own height and scroll, so a
   gallery with many photos produced two vertical scrollbars sitting side by
   side. The content box is now a flex column that never scrolls itself; the
   body below is the single scrolling region, and the count strip stays pinned
   above it instead of scrolling away. */
.cc-modal .k-window-content {
    padding: 0;
    background: var(--ccp-surface-2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* the strip keeps its natural height and stays put */
.cc-modal-strip {
    flex: 0 0 auto;
}

/* THE scroller. min-height:0 is what lets a flex child shrink below its
   content height - without it the body refuses to shrink and the overflow
   pushes back out to .k-window-content, which is the two-scrollbar bug again. */
.cc-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* A quiet strip under the header for counts / totals. */
.cc-modal-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 9px 16px;
    background: var(--ccp-surface);
    border-bottom: 1px solid var(--ccp-line);
    font-size: 0.975rem;
    color: var(--ccp-muted);
}

    .cc-modal-strip b {
        color: var(--ccp-navy);
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

/* ---------------------------------------------------------------------
   Photo gallery
   --------------------------------------------------------------------- */
.cc-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    padding: 16px;
}

.cc-photo {
    background: var(--ccp-surface);
    border: 1px solid var(--ccp-line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(12, 35, 64, .06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

    .cc-photo:hover {
        transform: translateY(-2px);
        border-color: var(--ccp-blue-l);
        box-shadow: 0 8px 22px rgba(12, 35, 64, .16);
    }

/* Fixed-ratio frame so a wall of mixed portrait / landscape photos still
   lines up. object-fit keeps them undistorted. */
.cc-photo-frame {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: #eef2f8;
    overflow: hidden;
}

    .cc-photo-frame img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

.cc-photo:hover .cc-photo-frame img {
    transform: scale(1.05);
}

.cc-photo-open {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 35, 64, .45);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .16s ease;
}

.cc-photo:hover .cc-photo-open,
.cc-photo:focus-within .cc-photo-open {
    opacity: 1;
}

.cc-photo-body {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    min-width: 0;
}

.cc-photo-main {
    min-width: 0;
}

.cc-photo-id {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ccp-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-photo-note {
    display: block;
    font-size: 0.9rem;
    color: var(--ccp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.cc-photo-dl {
    margin-left: auto;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   Document list
   --------------------------------------------------------------------- */
.cc-doclist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.cc-doc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ccp-surface);
    border: 1px solid var(--ccp-line);
    border-radius: 10px;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

    .cc-doc:hover {
        transform: translateY(-1px);
        border-color: var(--ccp-blue-l);
        box-shadow: 0 4px 14px rgba(12, 35, 64, .12);
    }

/* File-type chip. Colour comes from the extension so a PDF is findable
   at a glance in a long list. */
.cc-doc-ext {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.775rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
    background: var(--ccp-navy-2);
    flex: 0 0 auto;
}

    .cc-doc-ext.cc-ext-pdf { background: #c0392b; }
    .cc-doc-ext.cc-ext-doc { background: #2b579a; }
    .cc-doc-ext.cc-ext-xls { background: #1d6f42; }
    .cc-doc-ext.cc-ext-ppt { background: #c43e1c; }
    .cc-doc-ext.cc-ext-img { background: #7a4fbf; }
    .cc-doc-ext.cc-ext-zip { background: #8a6d1f; }

.cc-doc-main {
    min-width: 0;
}

.cc-doc-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ccp-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-doc-meta {
    font-size: 0.925rem;
    color: var(--ccp-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .cc-gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        padding: 12px;
    }

    .cc-doclist {
        padding: 12px;
    }

    /* touch has no hover, so keep the tap affordance visible */
    .cc-photo-open {
        opacity: 1;
        background: linear-gradient(180deg, rgba(12, 35, 64, 0) 55%, rgba(12, 35, 64, .5) 100%);
        align-items: flex-end;
        padding-bottom: 6px;
        font-size: 0.775rem;
    }
}


/* =====================================================================
   CUSTOMER SUPPORT  -  the single-conversation popup
   ---------------------------------------------------------------------
   2026-09-11. JLozano. ONE conversation per transaction: a standing
   "not a live chat" notice, the subject, the entries newest-first, and a
   composer. No thread list, no pane switching - which is why this block
   is a fraction of the size it was.

   DELIBERATELY NOT CHAT-SHAPED. No bubble tails, no alternating left/right
   alignment, no avatars. Entries are full-width records with an author and
   a full date, because that is what they are: correspondence, answered
   hours later by someone doing other work. If you restyle this into a
   messenger you will recreate the problem it was built to avoid - clients
   sitting on the page waiting for a reply that is not coming today.

   Scoped under .cc-modal, so nothing here touches the dashboard panes.
   ===================================================================== */

.cc-modal .cc-q1 {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    height: 60vh;
    background: var(--ccp-surface-2);
}

/* ------------------------------ the standing notice ------------------------------
   Always on screen, in every state. This is the main defence against
   "I sent a message, why is nobody answering?".
   --------------------------------------------------------------------------------- */
.cc-modal .cc-q1-notice {
    flex: 0 0 auto;
    padding: 10px 16px;
    background: #fdf6e6;
    border-bottom: 1px solid #f0dfb8;
    border-left: 3px solid var(--ccp-gold);
}

.cc-modal .cc-q1-notice-title {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a5a00;
}

.cc-modal .cc-q1-notice-text {
    margin-top: 2px;
    font-size: 0.975rem;
    line-height: 1.45;
    color: #6d4a08;
}

/* ------------------------------ scrolling middle ------------------------------
   min-height:0 is what lets a flex child shrink below its content height.
   Without it the overflow pushes back out to .k-window-content and you get
   the two-scrollbar bug again.
   ------------------------------------------------------------------------------- */
.cc-modal .cc-q1-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px 16px;
}

.cc-modal .cc-q1-thread {
    padding-top: 10px;
}

/* ------------------------------ conversation header ------------------------------ */
.cc-modal .cc-q1-head {
    flex: 0 0 auto;
    padding: 12px 16px;
    background: var(--ccp-surface);
    border-bottom: 1px solid var(--ccp-line);
}

.cc-modal .cc-q1-subject {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ccp-navy);
    overflow-wrap: anywhere;
}

.cc-modal .cc-q1-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 6px;
    font-size: 0.9rem;
    color: var(--ccp-muted);
}

/* status chip. The suffix is the UserQuestionStatusKey, so these stay in step
   with the UserQuestionStatus seed: 1 Open, 2 Answered, 3 Closed. */
.cc-modal .cc-q-status {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.825rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cc-modal .cc-q-status-1 {
    background: #fdf1dc;
    color: #8a5a00;
}

.cc-modal .cc-q-status-2 {
    background: #e4ecfb;
    color: var(--ccp-navy-3);
}

.cc-modal .cc-q-status-3 {
    background: var(--ccp-surface-2);
    color: var(--ccp-muted);
}

/* ------------------------------ send confirmation ------------------------------
   A message appearing in a list does not tell anyone what happens next. This does.
   ------------------------------------------------------------------------------- */
.cc-modal .cc-q1-sent {
    flex: 0 0 auto;
    padding: 10px 16px;
    background: #edf6ee;
    border-bottom: 1px solid #cfe6d3;
    border-left: 3px solid #2f8f4e;
}

.cc-modal .cc-q1-sent-title {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1f6b39;
}

.cc-modal .cc-q1-sent-text {
    margin-top: 2px;
    font-size: 0.975rem;
    line-height: 1.45;
    color: #235c36;
}

.cc-modal .cc-q1-hintbar {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: var(--ccp-radius);
    background: var(--ccp-surface-2);
    border: 1px solid var(--ccp-line);
    font-size: 0.975rem;
    color: var(--ccp-muted);
}

.cc-modal .cc-q1-order {
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ccp-muted);
}

/* ------------------------------ an entry ------------------------------
   Full width, left rule, author + full date. A record, not a chat bubble.
   The client's own entries are tinted so the two sides are still easy to
   tell apart without resorting to left/right alignment.
   ---------------------------------------------------------------------- */
.cc-modal .cc-q1-entry {
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--ccp-line);
    border-left: 3px solid var(--ccp-line);
    border-radius: var(--ccp-radius);
    background: var(--ccp-surface);
    box-shadow: 0 1px 2px rgba(12, 35, 64, .04);
}

/* Both sides are declared, rather than letting one be "whatever the base rule
   happens to be" - so a restyle cannot silently change only one of them. */
.cc-modal .cc-q1-entry-them {
    border-left-color: var(--ccp-navy-3);
}

.cc-modal .cc-q1-entry-me {
    border-left-color: var(--ccp-blue-l);
    background: #f7f9fe;
}

.cc-modal .cc-q1-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    margin-bottom: 5px;
}

.cc-modal .cc-q1-entry-who {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ccp-navy-3);
}

.cc-modal .cc-q1-entry-me .cc-q1-entry-who {
    color: var(--ccp-muted);
}

.cc-modal .cc-q1-entry-when {
    font-size: 0.85rem;
    color: var(--ccp-muted);
    font-variant-numeric: tabular-nums;
}

/* pre-wrap keeps the client's own line breaks. It is rendered as TEXT, never
   as a MarkupString - this is the one place in the portal that displays
   content typed by someone outside the organisation. */
.cc-modal .cc-q1-entry-text {
    font-size: 1.075rem;
    line-height: 1.5;
    color: var(--ccp-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ------------------------------ composer / footer ------------------------------ */
.cc-modal .cc-q1-foot {
    flex: 0 0 auto;
    padding: 12px 16px 14px;
    background: var(--ccp-surface);
    border-top: 1px solid var(--ccp-line);
}

.cc-modal .cc-q1-closed {
    padding: 6px 0 10px;
    font-size: 1rem;
    color: var(--ccp-muted);
    text-align: center;
}

.cc-modal .cc-q-label {
    display: block;
    margin: 10px 0 4px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ccp-muted);
}

    .cc-modal .cc-q-label:first-child {
        margin-top: 0;
    }

.cc-modal .cc-q-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ccp-line);
    border-radius: var(--ccp-radius);
    background: var(--ccp-surface);
    color: var(--ccp-ink);
    font: inherit;
    font-size: 1.075rem;
    line-height: 1.45;
}

    .cc-modal .cc-q-input:focus {
        outline: none;
        border-color: var(--ccp-blue);
        box-shadow: 0 0 0 1px var(--ccp-blue) inset;
    }

.cc-modal .cc-q-textarea {
    resize: vertical;
    min-height: 68px;
}

.cc-modal .cc-q-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}

.cc-modal .cc-q-hint {
    flex: 1 1 auto;
    font-size: 0.9rem;
    color: var(--ccp-muted);
    font-variant-numeric: tabular-nums;
}

/* A rejection the SERVER worded - an already-open conversation, the flood
   guard, a transaction that is not this client's. It sits next to the
   composer because that is where the person can do something about it. */
.cc-modal .cc-q-error {
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #f0c9c4;
    border-left: 3px solid var(--ccp-danger);
    border-radius: var(--ccp-radius);
    background: #fdf2f1;
    color: #8c2820;
    font-size: 1rem;
    line-height: 1.4;
}

/* ------------------------------ the button on a card ------------------------------
   No count in the label: there is only ever one conversation. The dot is how
   many replies this client has not read yet.
   ----------------------------------------------------------------------------------- */
.cc-portal .cc-qbtn {
    position: relative;
    display: inline-flex;
}

.cc-portal .cc-qbtn-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--ccp-gold);
    color: #3d2900;
    border: 1.5px solid #fff;
    font-size: 0.775rem;
    font-weight: 800;
    line-height: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* ------------------------------ narrow screens ------------------------------
   Nothing to rearrange any more - it was a single column already. Just tighten
   the padding and let the window use more of the height.
   ---------------------------------------------------------------------------- */
@media (max-width: 719.98px) {

    .cc-modal .cc-q1 {
        height: 72vh;
    }

    .cc-modal .cc-q1-body,
    .cc-modal .cc-q1-foot,
    .cc-modal .cc-q1-head,
    .cc-modal .cc-q1-notice,
    .cc-modal .cc-q1-sent {
        padding-left: 12px;
        padding-right: 12px;
    }

    .cc-modal .cc-q1-entry-head {
        justify-content: flex-start;
    }
}