/* /Components/DisbursementAccounts/DisbursementAccount.razor.rz.scp.css */
/* Scoped to DisbursementAccount.razor. Only rules that target this file's own literal raw HTML (div/
   span/label written directly in its markup, incl. inside GridColumn Group/FooterTemplate content) belong
   here — Blazor's CSS isolation only stamps the scope attribute onto elements authored directly in this
   file. Anything applied via a Telerik component's Class/HeaderClass parameter (TelerikGrid, TelerikCard,
   TelerikStackLayout, ...) never receives it — that parameter is consumed inside Telerik's own component,
   not this file's markup — so those rules have to stay in the global css/disbursement-account.css instead.
   See MEMORY / css-quality-evaluation.md for the fuller writeup of this rule. */

/* Port Days card read-only view — each field is a small stacked label/value pair so both sit in one row
   (the horizontal TelerikStackLayout spaces them). Same classes are reused by the edit-mode TelerikForm's
   own FormItem Templates (label instead of span for the editable field). */
.lh-port-days-field[b-zo1gm1swew] {
    display: flex;
    flex-direction: column;
    gap: var(--kendo-spacing-1);
}

.lh-port-days-label[b-zo1gm1swew] {
    display: block;
    margin-bottom: var(--kendo-spacing-1);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-xs);
    font-weight: var(--lh-weight-bold);
    color: var(--kendo-color-subtle);
}

.lh-port-days-value[b-zo1gm1swew] {
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-lg);
    color: var(--kendo-color-base-on-surface);
}

/* Per-terminal dockage days under the Port Days fields: a compact read-only table using the same
   label (header) / body typography as the fields above. Numeric columns right-aligned. */
.lh-berth-dockage-table[b-zo1gm1swew] {
    margin-top: var(--kendo-spacing-4);
    border-collapse: collapse;
    font-family: var(--lh-font-body);
}

.lh-berth-dockage-table th[b-zo1gm1swew] {
    padding: var(--kendo-spacing-1) var(--kendo-spacing-4) var(--kendo-spacing-1) 0;
    border-bottom: 1px solid var(--kendo-color-border);
    font-size: var(--lh-text-xs);
    font-weight: var(--lh-weight-bold);
    color: var(--kendo-color-subtle);
    text-align: left;
    white-space: nowrap;
}

.lh-berth-dockage-table td[b-zo1gm1swew] {
    padding: var(--kendo-spacing-1-5) var(--kendo-spacing-4) var(--kendo-spacing-1-5) 0;
    border-bottom: 1px solid var(--kendo-color-border);
    color: var(--kendo-color-base-on-surface);
}

.lh-berth-dockage-table .lh-berth-dockage-num[b-zo1gm1swew] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* "Show:" label preceding the Agency Charges / Vendor Services line-type filter in the Port Expenses
   card header — muted and spaced to read as a caption for the toggle group. */
.lh-da-filter-label[b-zo1gm1swew] {
    color: var(--kendo-color-subtle);
    font-size: var(--lh-text-lg);
    white-space: nowrap;
    margin-right: var(--kendo-spacing-0-5);
}

/* One-line category group header (TelerikGrid's GroupHeaderTemplate content — literal markup in this
   file, unlike the grid chrome around it): the name fills the Service/Vendor/Notes span on the left; the
   three subtotals are fixed to the numeric column widths and right-anchored (+150px actions spacer) so
   they sit under PDA/Post-DA/FDA. Coupled to those GridColumn Width values — update together if a column
   changes. */
.lh-da-group-row[b-zo1gm1swew] {
    display: flex;
    align-items: center;
    width: 100%;
}

.lh-da-group-name[b-zo1gm1swew] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: var(--lh-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lh-da-group-sub[b-zo1gm1swew] {
    flex: 0 0 130px;
    font-weight: var(--lh-weight-semibold);
    padding-inline: var(--kendo-spacing-3);
    text-align: right;
}

.lh-da-group-actions-spacer[b-zo1gm1swew] {
    flex: 0 0 150px;
}

/* "Subtotal:" label in the grand-total footer row — pushed to the right edge of the Notes column so it
   reads directly before the right-aligned PDA total in the next column. */
.lh-da-subtotal-label[b-zo1gm1swew] {
    display: block;
    text-align: right;
    font-weight: var(--lh-weight-semibold);
}

/* Right-align the grand-total footer values (FooterTemplate content — literal markup here too). GridColumn
   has no FooterClass in this Telerik version, so the alignment rides on the FooterTemplate content itself
   (a block span filling the footer cell) rather than a HeaderClass-style Telerik-applied class. */
.lh-da-num-footer[b-zo1gm1swew] {
    display: block;
    text-align: right;
}

/* Subtotals card body — three plain label/value lines, no table/header/borders. Each row puts the
   label on the left and the amount on the right; the Final Amount Due line is emphasized. */
.lh-subtotals[b-zo1gm1swew] {
    display: flex;
    flex-direction: column;
    gap: var(--kendo-spacing-2);
}

.lh-subtotals-row[b-zo1gm1swew] {
    display: flex;
    justify-content: space-between;
    gap: var(--kendo-spacing-4);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-lg);
    color: var(--kendo-color-base-on-surface);
}

.lh-subtotals-total[b-zo1gm1swew] {
    font-weight: var(--lh-weight-bold);
}
/* /Components/InvoiceReview/InvoiceReviewScreen.razor.rz.scp.css */
/* Invoice review screen (InvoiceReviewScreen.razor). Scoped: every rule here targets raw HTML elements
   this component writes itself (iframe/div/span), so Blazor's scope attribute reaches them. Telerik
   components on the page use existing global classes (lh-info-row, lh-info-edit-label). */

/* The PDF fills its splitter pane; the browser's own viewer supplies the toolbar. */
.lh-invoice-pdf[b-qke2gb1lu0] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.lh-review-panel[b-qke2gb1lu0] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--kendo-spacing-4);
    padding: var(--kendo-spacing-4);
}

.lh-review-title[b-qke2gb1lu0] {
    font-size: var(--lh-text-lg);
    font-weight: var(--lh-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lh-review-field[b-qke2gb1lu0] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--kendo-spacing-1);
    min-width: 0;
}

/* What the analyzer read / "Suggested:" — secondary text under a field. */
.lh-review-hint[b-qke2gb1lu0] {
    font-size: var(--lh-text-xs);
    color: var(--kendo-color-subtle);
}

/* Accounting / Operations sign-off rows. */
.lh-review-approvals[b-qke2gb1lu0] {
    display: flex;
    flex-direction: column;
    gap: var(--kendo-spacing-2);
}

/* Why an approval was withdrawn, while the invoice awaits re-review. */
.lh-review-rereview[b-qke2gb1lu0] {
    padding: var(--kendo-spacing-2) var(--kendo-spacing-3);
    border-left: 3px solid var(--kendo-color-warning);
    background: var(--kendo-color-warning-subtle);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-uqf0iro7f2],
.components-reconnect-repeated-attempt-visible[b-uqf0iro7f2],
.components-reconnect-failed-visible[b-uqf0iro7f2],
.components-pause-visible[b-uqf0iro7f2],
.components-resume-failed-visible[b-uqf0iro7f2],
.components-rejoining-animation[b-uqf0iro7f2] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-uqf0iro7f2],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-uqf0iro7f2],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-uqf0iro7f2],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-uqf0iro7f2],
#components-reconnect-modal.components-reconnect-retrying[b-uqf0iro7f2],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-uqf0iro7f2],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-uqf0iro7f2],
#components-reconnect-modal.components-reconnect-failed[b-uqf0iro7f2],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-uqf0iro7f2] {
    display: block;
}


#components-reconnect-modal[b-uqf0iro7f2] {
    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-uqf0iro7f2 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-uqf0iro7f2 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-uqf0iro7f2 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-uqf0iro7f2]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-uqf0iro7f2 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-uqf0iro7f2 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-uqf0iro7f2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-uqf0iro7f2 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-uqf0iro7f2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-uqf0iro7f2] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-uqf0iro7f2] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-uqf0iro7f2] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-uqf0iro7f2] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-uqf0iro7f2] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-uqf0iro7f2] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-uqf0iro7f2 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-uqf0iro7f2] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-uqf0iro7f2 {
    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/NavMenu/NavMenuLinkButton.razor.rz.scp.css */
/* Scoped to NavMenuLinkButton.razor: only the raw <span> it writes itself belongs here (see
   docs/ui-conventions.md, "Scoped .razor.css vs global css"). Bold against the regular-weight inactive
   label, so it stays distinct from the label text and holds its weight in the active item too. */
.lh-nav-suffix[b-mb7g1zoa0d] {
    font-weight: var(--lh-weight-bold);
}
/* /Components/Pages/VesselFileDocuments.razor.rz.scp.css */
/* Category "landing pad" drop zones — a row of four boxes above the documents grid. Each box holds a
   transparent full-bleed <InputFile> that captures a dropped (or clicked) file; see VesselFileDocuments.razor. */
.lh-doc-dropzones[b-ud38bxky6y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kendo-spacing-3);
}

.lh-doc-dropzone[b-ud38bxky6y] {
    position: relative;
    flex: 1 1 140px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--kendo-spacing-2);
    padding: var(--kendo-spacing-4);
    border: 2px dashed var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md);
    background: var(--kendo-color-app-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lh-doc-dropzone:hover[b-ud38bxky6y] {
    border-color: var(--kendo-color-primary);
}

/* Active drag-over state, toggled from @ondragenter/@ondragleave on the wrapper. */
.lh-doc-dropzone.lh-drag-over[b-ud38bxky6y] {
    border-color: var(--kendo-color-primary);
    border-style: solid;
    background: var(--kendo-color-primary-subtle);
}

/* ::deep — the icon is rendered inside the TelerikSvgIcon child component, so scoped CSS can't tag
   it directly; ::deep lets this rule reach into the child component's markup. */
.lh-doc-dropzone[b-ud38bxky6y]  .lh-doc-dropzone-icon {
    font-size: var(--lh-text-5xl);
    color: var(--kendo-color-primary);
}

.lh-doc-dropzone-label[b-ud38bxky6y] {
    font-size: var(--lh-text-sm);
    font-weight: var(--lh-weight-semibold);
    color: var(--kendo-color-base-on-surface);
    text-align: center;
}

/* The invisible capture layer: a real file input filling the box so a file dropped anywhere on the
   box (or a click) routes into it and fires OnChange with the file's bytes. The input is rendered by
   the <InputFile> child component, so it needs ::deep — a plain scoped selector never tags it, which
   would leave a default file-picker button and let drops fall through to the browser's file viewer. */
.lh-doc-dropzone[b-ud38bxky6y]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}