/* Shared interaction and layout rules. Page styles own geometry and semantic states;
   table density, striping, hover and frame always come from Pengaturan tampilan. */
.app-content-shell { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
.app-content-shell { container: len-content / inline-size; }
.len-list-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.len-list-actions:empty { display: none; }
/* Keep record actions clear of the window edge, and keep the scroll-to-top
   control above action bars instead of covering their rightmost button. */
body .mud-scroll-to-top.len-scroll-top { bottom: 128px; right: 24px; }
.app-content-shell .len-record-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 8px; position: sticky; bottom: 16px; z-index: 5;
    width: fit-content; max-width: 100%; margin: 24px 0 16px auto; padding: 12px;
    border: 1px solid var(--len-border); border-radius: var(--len-r-lg);
    background: var(--len-surface); box-shadow: var(--len-shadow-sm);
}
.app-content-shell .len-summary__actions { padding-bottom: 4px; }
.app-content-shell .form-panel { border: 1px solid var(--len-border); border-radius: var(--len-r-lg); background: var(--len-surface); box-shadow: var(--len-shadow-xs); }
@media (max-width: 1099px) {
    body .mud-scroll-to-top.len-scroll-top { bottom: 184px; }
}
@media (max-width: 599px) {
    body .mud-scroll-to-top.len-scroll-top { right: 16px; }
    .app-content-shell .len-record-actions { bottom: 8px; width: 100%; }
    .len-record-actions > .mud-button-root { flex: 1 1 auto; }
}

@media print {
    .len-record-actions, .len-scroll-top { display: none !important; }
}
body:has(.app-content-shell) {
    --len-table-py: 12px;
    --len-table-px: 12px;
    --len-table-even: transparent;
    --len-table-hover: initial;
    --len-table-frame: transparent;
}
body:has(.app-content-shell.table-pref-dense) { --len-table-py: 6px; --len-table-px: 8px; }
body:has(.app-content-shell.table-pref-striped) { --len-table-even: var(--len-surface-2); }
body:has(.app-content-shell.table-pref-hoverable) { --len-table-hover: color-mix(in srgb, var(--len-primary) 5%, var(--len-surface)); }
body:has(.app-content-shell.table-pref-bordered) { --len-table-frame: var(--len-border); }

.len-data-table { width: 100%; color: var(--len-text); background: var(--len-surface); }
body:has(.app-content-shell) :is(.mud-table-root, .len-data-table) { font-size: .8125rem; }
body:has(.app-content-shell) :is(.mud-table-root > thead > tr > *, .len-data-table > thead > tr > *, .len-data-table > tbody > tr > th) {
    background: var(--len-surface-2);
    color: var(--len-text-3);
    font-size: .75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--len-border);
}
/* These own cell rhythm even when an old page sets padding with !important.
   Do not target nested tables or POD's grouped editor, whose inputs require their own spacing. */
body:has(.app-content-shell) :is(.mud-table-root, .len-data-table) > :is(thead, tbody) > tr > :is(th, td) {
    padding: var(--len-table-py) var(--len-table-px) !important;
    font-size: inherit;
}
body:has(.app-content-shell) :is(.mud-table-root, .len-data-table) > thead { font-size: .75rem; }
body:has(.app-content-shell) :is(.mud-table-root, .len-data-table) > tbody > tr > td { border-bottom-color: var(--len-border-2); }
body:has(.app-content-shell) :is(.mud-table-root, .len-data-table) > tbody > tr:not(.selected-row, .is-saved, .is-failed, .is-row-changed, .is-changed, .row-error-detail) {
    --len-table-row-fill: transparent;
    background-color: transparent;
}
body:has(.app-content-shell) :is(.mud-table-root, .len-data-table) > tbody > tr:not(.selected-row, .is-saved, .is-failed, .is-row-changed, .is-changed, .row-error-detail) > td {
    background-color: transparent;
}
body:has(.app-content-shell) :is(.mud-table-root, .len-data-table) > tbody > tr:nth-of-type(even):not(.selected-row, .is-saved, .is-failed, .is-row-changed, .is-changed, .row-error-detail) {
    --len-table-row-fill: var(--len-table-even);
    background-color: var(--len-table-even) !important;
}
body:has(.app-content-shell:not(.table-pref-striped)) .mud-table-striped .mud-table-body .mud-table-row > .mud-table-cell {
    background-color: transparent !important;
}
body:has(.app-content-shell) :is(.mud-table-root, .len-data-table) > tbody > tr:not(.selected-row, .is-saved, .is-failed, .is-row-changed, .is-changed, .row-error-detail):hover {
    background-color: var(--len-table-hover, var(--len-table-row-fill)) !important;
}
body:has(.app-content-shell) .mud-table .mud-table-container {
    border: 1px solid var(--len-table-frame);
    border-radius: var(--len-r);
    overflow: auto;
}
body:has(.app-content-shell) .len-data-table { outline: 1px solid var(--len-table-frame); outline-offset: -1px; }
body:has(.app-content-shell) .mud-table .mud-table-cell { border-right: 0; }
body:has(.app-content-shell) .mud-table-row.selected-row > .mud-table-cell { background: var(--len-primary-soft) !important; }

/* A consistent outline for secondary actions, including Tambah Tujuan, upload,
   return and add-item buttons. Filled primary and destructive actions keep their meaning. */
.app-content-shell .btn, .mud-dialog .btn {
    min-height: 36px;
    border-radius: var(--len-r);
    padding: 7px 14px;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.app-content-shell .invoice-btn { min-height: 36px; border-radius: var(--len-r); font-size: .8125rem; font-weight: 600; }
.app-content-shell .invoice-btn.invoice-btn-secondary { border: 1px solid var(--len-border-strong); background: var(--len-surface); color: var(--len-text-2); }
.app-content-shell .invoice-btn.invoice-btn-secondary:hover { background: var(--len-surface-3); color: var(--len-text); }
.app-content-shell .summary-action-bar { position: sticky; bottom: 16px; z-index: 5; background: var(--len-surface); border-color: var(--len-border); box-shadow: var(--len-shadow-sm); }
.app-content-shell .summary-action-copy strong { color: var(--len-text); }
:is(.app-content-shell, .mud-dialog) .btn:is(.btn-secondary, .btn-info) {
    border: 1px solid var(--len-border-strong);
    background: var(--len-surface);
    color: var(--len-text-2);
    box-shadow: var(--len-shadow-xs);
}
:is(.app-content-shell, .mud-dialog) .btn:is(.btn-secondary, .btn-info):hover:not(:disabled) {
    background: var(--len-surface-3);
    color: var(--len-text);
    transform: none;
    opacity: 1;
}
:is(.app-content-shell, .mud-dialog) .btn.btn-primary { background: var(--len-primary); color: var(--len-on-primary); border: 1px solid transparent; }
:is(.app-content-shell, .mud-dialog) .btn.btn-primary:hover:not(:disabled) { background: var(--len-primary-hover); transform: none; }
:is(.app-content-shell, .mud-dialog) .btn:disabled { cursor: not-allowed; opacity: .5; }
:is(.app-content-shell, .mud-dialog) .btn:focus-visible { outline: none; box-shadow: var(--len-ring); }

/* Viewport-bounded dialogs: title and actions do not shrink; only the body scrolls.
   The form wrapper is needed by AddEditModal and the subscription editor. */
.mud-dialog:not(.mud-dialog-fullscreen) {
    min-width: 0;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
}
.mud-dialog, .mud-dialog > form, .len-dialog-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.mud-dialog > form, .len-dialog-form { max-height: inherit; overflow: hidden; }
/* MudBlazor 6 places content/actions in a focus-trap div, inside the form when
   one is supplied. It must also shrink, or the body expands behind the footer. */
.mud-dialog .outline-none:has(> .mud-dialog-content) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.mud-dialog .mud-dialog-title, .mud-dialog .mud-dialog-actions { flex: none; }
.mud-dialog .mud-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow: auto !important;
    overscroll-behavior: contain;
}
.mud-dialog .mud-dialog-actions { background: var(--len-surface); }
.mud-dialog.entity-add-edit-dialog .mud-dialog-title { border-bottom: 1px solid var(--len-border); }
.entity-add-edit-dialog .entity-dialog-content .form-section { border: 1px solid var(--len-border-2); }
.entity-add-edit-dialog .entity-dialog-content .section-title { font-size: .875rem; margin-bottom: 12px; }
.mud-dialog.pod-dialog .pod-dialog-content { display: block; }
.mud-dialog.pod-dialog .mud-dialog-content { scroll-padding-top: 96px; }
.pod-dialog .pod-body > .pod-table-scroll { min-height: 0; flex: none; overflow: visible; }
.pod-dialog .pod-table-scroll { overflow: clip; }
.pod-dialog .pod-location-input { flex-direction: column; }
.pod-dialog .pod-location-input > input { flex: none; width: 100%; }
.pod-dialog .pod-in--desc { height: auto; min-height: 62px; resize: vertical; padding: 7px 10px; line-height: 1.5; }

/* Profile stays visible while a long menu scrolls. A short window no longer clips
   the person's name at the top of the drawer. */
.mud-drawer:has(.len-nav-scroll) .mud-drawer-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mud-drawer .drawer-header-wrap { flex: none; min-height: 96px; padding-block: 6px; }
.mud-drawer .person-card-root { margin-bottom: 0 !important; }
.mud-drawer .person-card-root .mud-card-header { min-height: 80px; }
.len-nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-block: 4px 16px; }

/* Form actions stand on a separate surface. The main logistics forms use a sticky
   right summary; remaining long legacy forms use a small sticky bottom action bar. */
.len-workflow-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.len-workflow-fields { min-width: 0; }
.len-workflow-fields .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.len-workflow-fields :is(.form-section, .form-group) { min-width: 0; }
.manifest-container .type-selector { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.len-action-panel { max-height: calc(100dvh - 100px); overflow-y: auto; }
.len-action-panel__hint { color: var(--len-text-3); font-size: .75rem; margin: 16px 0; }
.len-workflow-actions { display: flex; flex-direction: column-reverse; gap: 8px; }
.len-action-panel .btn { width: 100%; }
.app-content-shell .len-floating-actions {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    width: fit-content;
    max-width: 100%;
    margin: 24px 0 0 auto;
    padding: 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r-lg);
    background: var(--len-surface);
    box-shadow: var(--len-shadow-overlay);
}
.len-pod-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--len-border); }
.len-pod-entry__label { color: var(--len-text-2); font-size: .8125rem; font-weight: 600; }
.len-pod-entry__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.len-pod-entry__buttons .mud-button-root { min-height: 36px; }

.len-breadcrumbs { margin-bottom: 10px; font-size: .75rem; color: var(--len-text-3); }
.len-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; padding: 0; margin: 0; }
.len-breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.len-breadcrumbs li + li::before { content: "/"; color: var(--len-text-4); }
.len-breadcrumbs a { color: var(--len-link); text-decoration: none; }
.len-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.len-breadcrumbs [aria-current] { color: var(--len-text-2); font-weight: 600; }
.app-content-shell:has(.len-breadcrumbs) .page-heading__eyebrow { display: none; }

@media (max-width: 899px) {
    /* Retain MudBlazor's stacked list cells and their labels (fsh.css). */
    body:has(.app-content-shell) .mud-table-root > tbody > tr > td { font-size: .8125rem; }
}
@media (max-width: 599px) {
    .mud-dialog:not(.mud-dialog-fullscreen) { max-height: calc(100dvh - 16px); max-width: calc(100vw - 16px); margin: 8px; }
    .len-pod-entry__buttons { width: 100%; }
    .len-pod-entry__buttons .mud-button-root { flex: 1 1 140px; }
    .app-content-shell .len-floating-actions { bottom: 8px; }
}

/* Use the content width, including the open navigation drawer, to choose columns. */
@container len-content (min-width: 1040px) {
    .len-form-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    .len-form-layout.len-workflow-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .len-form-layout > .len-summary { position: sticky; top: 80px; max-height: calc(100dvh - 104px); overflow-y: auto; }
    .len-detail-grid:not(.len-ship-grid--single) { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
    .len-ship-side { position: sticky; top: 80px; order: 0; }
    .len-ship-form { display: flex; flex-direction: column; max-height: var(--len-panel-height, calc(100dvh - 104px)); }
    .len-ship-form > :is(.len-card__head, .len-ship-form__foot) { flex: none; }
    .len-ship-form .len-ship-form__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@container len-content (width < 1040px) {
    .len-form-layout, .len-form-layout.len-workflow-layout, .len-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .len-form-layout > .len-summary { position: static; max-height: none; }
    .len-ship-side { order: -1; }
    .len-workflow-layout .len-action-panel { position: sticky; top: auto; bottom: 12px; z-index: 5; max-height: none; overflow: visible; }
    .len-workflow-layout .len-action-panel :is(.len-card__head, .len-dl, .len-action-panel__hint) { display: none; }
    .len-workflow-layout .len-action-panel .len-card { box-shadow: var(--len-shadow-overlay); }
    .len-workflow-layout .len-action-panel .len-card__body { padding: 12px; }
    .len-workflow-layout .len-workflow-actions { flex-direction: row; justify-content: flex-end; }
    .len-workflow-layout .len-action-panel .btn { width: auto; }
    .len-form-layout > .len-booking-summary { position: sticky; top: auto; bottom: 12px; z-index: 5; overflow: visible; }
    .len-booking-summary :is(.len-card__head, .len-booking-summary__facts) { display: none; }
    .len-booking-summary .len-summary__actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; margin-top: 0; }
    .len-booking-summary .len-summary__actions > .mud-button-root { width: auto; flex: 0 1 auto; }
    .len-booking-summary .len-summary__actions > .mud-button-filled { order: 1; }
    .len-booking-summary .len-card__body { padding: 12px; }
    .len-booking-summary .len-booking-summary__hint { display: block; }
    .len-booking-summary .len-card { box-shadow: var(--len-shadow-overlay); }
    .len-booking-summary > .len-card { max-height: none; }
    .len-ship .len-ship-side { position: static; }
    .len-ship .len-ship-form { max-height: none; }
    .len-ship .len-ship-form__body { overflow: visible; }
    .len-ship .len-ship-form__foot { position: sticky; bottom: 8px; z-index: 5; box-shadow: var(--len-shadow-sm); }
}
@container len-content (min-width: 1040px) and (max-width: 1199px) {
    .len-form-grid--4 { --len-cols: 2; }
}
@container len-content (width < 1040px) {
    .len-ship-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container len-content (max-width: 719px) {
    .len-form-grid--3, .len-form-grid--4 { --len-cols: 2; }

}
@container len-content (max-width: 519px) {
    .len-form-grid, .len-form-grid--3, .len-form-grid--4 { --len-cols: 1; }
    .len-field--span-2, .len-field--span-3 { grid-column: 1 / -1; }
    .len-ship-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}