#blazor-error-ui
{
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    bottom: 0;
    padding: 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9000;
}

    #blazor-error-ui .dismiss
    {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.text-multiline
{
    white-space: pre-wrap;
}

.text-bold
{
    font-weight: bold !important;
}

.font-monospace
{
    font-family: 'Cascadia Mono', Consolas, 'Courier New', Courier, monospace;
}

.right-buttons
{
    text-align: right;
}

    .right-buttons button:not(:last-child)
    {
        margin-right: 8px;
    }

.left-buttons
{
    text-align: left;
}

    .left-buttons *:not(:first-child)
    {
        margin-right: 8px;
    }

.mud-table
{
    width: 100%;
}

.tab-panel-vertical
{
    justify-content: start;
}

.text-blue {
    color: #005EE6 !important;
}

/* The "(Dev n)" marker on a voyage order list row. Same red as the mobile app's RED (#FF1C00) so a
   deviated VO is spotted the same way in both clients. */
.text-deviation {
    color: #FF1C00 !important;
}

/* The "ROB" chip on a vessel picker row. Same treatment as the mobile app's vessel picker: solid
   dark chip, white label. Shared by every Create VO tab, so it lives here rather than in one page's
   inline <style>. */
.rob-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    background-color: #383838;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 0 !important;
}


/* ===========================================================================
   Voyage order activity form (.vo-activity-form)

   One layout for the Add / Edit Activity form wherever it appears: the deviation
   dialog and the Create VO activity pages. Global rather than scoped CSS on purpose -
   the fields it shapes are rendered by Syncfusion child components, and the form is
   hosted by several unrelated pages, so a page-scoped sheet could not reach them.

   Opt in by putting .vo-activity-form on the element that wraps the form.
   =========================================================================== */

.vo-activity-form .vo-activity-label {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 400;
    color: #1f2937;
}

.vo-activity-form .vo-activity-label .required-mark {
    color: #dc3545;
}

/* Field shape. Dropdowns (.e-ddl), numeric boxes (.e-numeric) and the date / time
   pickers all render the same .e-input-group wrapper, so one rule covers them.
   24px is the Figma radius for the text inputs; the selects are matched to it.
   The !important overrides `.customs-dropdown.e-input-focus { border-radius: 8px
   !important }` further down in customs.css. */
.vo-activity-form .e-input-group.e-control-wrapper,
.vo-activity-form .e-input-group.e-control-wrapper.e-input-focus {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 8px 12px 8px 16px;
    border-radius: 24px !important;
    font-size: 0.9375rem;
}

/* Keep the native input vertically neutral; dropdown value spacing is applied separately
   below so it remains identical between idle and focused states. */
.vo-activity-form .e-input-group.e-control-wrapper input.e-input {
    height: auto;
    padding: 0;
    margin: 0;
    line-height: 1.4;
}

/* Keep the selected value away from both edges of every activity-form dropdown.
   This targets the DropDownList input only, so numeric and date inputs retain their
   existing alignment. */
.vo-activity-form .e-input-group.e-control-wrapper.e-ddl input.e-input {
    padding-inline: 0.5rem;
}

/* customs.css is loaded after this file and otherwise gives an idle dropdown 8px 0,
   while the more-specific focus rule above keeps 8px 12px 8px 16px. Pin the wrapper
   to the same spacing in both states; the input above owns the value-text inset. */
.vo-activity-form .customs-dropdown.e-ddl.e-control-wrapper,
.vo-activity-form .customs-dropdown.e-ddl.e-control-wrapper.e-input-focus {
    padding: 8px 0;
}

/* Chevron / calendar buttons: keep them inside the rounded edge instead of stretching
   the wrapper back to their own default height. */
.vo-activity-form .e-input-group.e-control-wrapper .e-input-group-icon {
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0 0 0 8px;
    border: 0;
    background: transparent;
}

/* The activity picker renders an icon beside its label, so it needs the extra breathing
   room the plain fields do not. */
.vo-activity-form .customs-dropdown.vo-activity-picker.e-ddl.e-control-wrapper,
.vo-activity-form .customs-dropdown.vo-activity-picker.e-ddl.e-control-wrapper.e-input-focus {
    padding: 8px;
    padding-left: 16px;
}

/* The form is one long scroll, so its groups are separated by a rule rather than by
   spacing alone - otherwise schedule, cargo and ROB read as one undifferentiated stack. */
.vo-activity-form .vo-activity-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e9ecef;
}

.vo-activity-form .vo-activity-section-title {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.35;
    font-weight: 600;
    color: #111827;
}

.vo-activity-form .vo-activity-empty {
    margin-bottom: 0.75rem;
    padding: 0.875rem;
    border: 1px dashed #dee2e6;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    color: #6c757d;
    text-align: center;
}

.vo-activity-form .vo-cargo-card {
    margin-bottom: 0.75rem;
    padding: 0.875rem;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    background-color: #fff;
}

/* Greyed while the remainder is handed over: the inputs are locked, so the card looks it. */
.vo-activity-form .vo-cargo-card.is-locked {
    background-color: #f8f9fa;
}

.vo-activity-form .vo-cargo-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.vo-activity-form .vo-cargo-card__index {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
}

.vo-activity-form .vo-rob-panel {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    background-color: #f8fafc;
}

/* ---------------------------------------------------------------------------
   The Add / Edit Activity dialog itself (.vo-activity-dialog on MudDialog).

   On a phone the form is the whole task, so it takes the whole screen: MudBlazor's
   default leaves ~32px of backdrop on each side, which on a 360px viewport costs a
   fifth of the width that the two-column Qty / Unit row needs.

   599.98px is MudBlazor's own sm breakpoint, so this switches at the same width as
   the framework's other responsive behaviour.
   --------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
    .mud-dialog.vo-activity-dialog {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        /* customs.css sets `.mud-dialog { border-radius: 16px !important }` app-wide, and
           customs.css loads after this file - so squaring the corners needs !important too. */
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* The dialog is now the full height, so the body is what scrolls - not the page
       behind it, and not the title or the action buttons. */
    .mud-dialog.vo-activity-dialog .mud-dialog-content {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .mud-dialog.vo-activity-dialog .mud-dialog-title,
    .mud-dialog.vo-activity-dialog .mud-dialog-actions {
        flex: 0 0 auto;
    }

    /* Cancel / Save sit above the home indicator rather than under it. */
    .mud-dialog.vo-activity-dialog .mud-dialog-actions {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }
}