/* Shared operational design system. Standalone print documents remain independent. */
:root {
    --rail-width: 238px;
    --color-bg: #f4f6f8;
    --color-text: #182a3b;
    --color-text-muted: #566879;
    --color-text-subtle: #566879;
    --color-primary: #17475a;
    --color-primary-dark: #103442;
    --color-primary-hover: #103442;
    --color-accent: #146078;
    --color-border: #dce3e8;
    --radius-md: 12px;
    --shadow-sm: 0 2px 5px #12283905;
}
.app-workspace { background: var(--color-bg); background-image: none; font-size: .9rem; }
.app-workspace .main-content { margin-inline-start: var(--rail-width); padding: 30px 32px 48px; min-width: 0; animation: none; }
.app-sidebar { --bs-offcanvas-width: var(--rail-width); background: #112c3d; color: #dbe7ee; }
.rail-brand { display: flex; justify-content: space-between; align-items: center; padding: 25px 23px 18px; }
.rail-brand a { display: block; padding: 9px 14px; background: #fff; border-radius: 8px; }
.rail-brand img { width: 142px; height: auto; display: block; }
.rail-caption { padding: 20px 23px 8px; color: #99b2c2; font-size: .65rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.rail-navigation { flex: 1; overflow-y: auto; padding: 0 12px 24px; scrollbar-width: thin; }
.rail-navigation .rail-caption { padding-inline: 11px; }
.rail-link, .rail-group > summary { display: flex; gap: 11px; align-items: center; min-height: 43px; padding: 10px 12px; margin-bottom: 3px; color: #dbe7ee; border-radius: 7px; font-size: .8rem; text-decoration: none; cursor: pointer; }
.rail-link > i, .rail-group > summary > i:first-child { color: #9eb9c8; font-size: 1rem; flex-shrink: 0; }
.rail-link:hover, .rail-group > summary:hover { color: #fff; background: #244455; }
.rail-link.is-active { color: #fff; background: #2b4c5c; box-shadow: inset 3px 0 #d7bd7e; }
[dir=rtl] .rail-link.is-active { box-shadow: inset -3px 0 #d7bd7e; }
.rail-link.is-active > i { color: #e1c990; }
.rail-group > summary { list-style: none; }
.rail-group > summary::-webkit-details-marker { display: none; }
.rail-group > summary > i:last-child { margin-inline-start: auto; font-size: .6rem; }
.rail-group[open] > summary > i:last-child { transform: rotate(180deg); }
.rail-group > .rail-link { margin-inline-start: 16px; font-size: .76rem; }
.rail-identity { display: flex; gap: 12px; align-items: center; padding: 18px 22px; border-top: 1px solid #355061; }
.rail-identity strong, .rail-identity small { display: block; overflow-wrap: anywhere; }
.rail-identity strong { font-size: .8rem; font-weight: 600; }
.rail-identity small { color: #a7bdca; font-size: .68rem; margin-top: 3px; }
.rail-avatar { display: grid; place-items: center; background: #2e4b5c; border-radius: 50%; width: 34px; height: 34px; flex-shrink: 0; }
.app-topbar { position: sticky; top: 0; z-index: 1020; margin-inline-start: var(--rail-width); background: #fff; border-bottom: 1px solid var(--color-border); min-height: 78px; padding: 14px 32px; display: flex; align-items: center; gap: 22px; }
.app-topbar .navbar-search-wrap { flex: 1; max-width: none; min-width: 150px; }
.app-topbar .master-search-input { background: #f5f7f9; border: 1px solid #e4e9ed; border-radius: 8px; box-shadow: none; font-size: .8rem; }
.app-topbar .user-info { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.app-topbar .user-info > a { font-size: 0; color: #506477; }
.app-topbar .user-info > a i { font-size: 1.1rem; }
.app-topbar .user-badge { display: none; }
.app-topbar .user-info form { max-width: 260px; }
.app-topbar .form-select { min-width: 125px; font-size: .75rem; }
.app-topbar .lang-switcher { white-space: nowrap; font-size: .7rem; }
.app-menu-toggle { font-size: 1.4rem; padding: 3px 7px; color: #183c4e; }
.app-workspace :is(.btn, .form-control, .form-select) { border-radius: 7px; }
.app-workspace .btn { font-weight: 600; box-shadow: none; transition: background-color .15s, border-color .15s; }
.app-workspace .btn:hover { transform: none; }
.app-workspace .btn-primary, .app-workspace .btn-primary-custom { background: #17475a; border-color: #17475a; }
.app-workspace .btn-primary:hover, .app-workspace .btn-primary-custom:hover { background: #103442; border-color: #103442; }
.app-workspace .btn-outline-primary { color: #17475a; border-color: #a3b8c1; }
.app-workspace .btn-outline-primary:hover { color: #fff; background: #17475a; border-color: #17475a; }
.app-workspace .form-control, .app-workspace .form-select { border-color: #cbd6de; }
.app-workspace :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #1685aa; outline-offset: 3px; box-shadow: none; }
.app-sidebar :is(a, button, summary):focus-visible { outline-color: #e1c990; }
.app-workspace .page-hero { background: transparent; color: #182a3b; border: 0; border-bottom: 1px solid #dce3e8; box-shadow: none; padding: 0 0 24px; border-radius: 0; gap: 20px; }
.app-workspace .page-hero::before, .app-workspace .page-hero::after { display: none; }
.app-workspace .page-hero-icon { width: 44px; height: 44px; background: #e3edf0; color: #285365; border: 0; border-radius: 10px; font-size: 1.25rem; }
.app-workspace .page-hero-title { color: #182a3b; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 700; letter-spacing: -.035em; }
.app-workspace .page-hero-subtitle { color: #566879; font-size: .8rem; max-width: 65ch; }
.app-workspace .page-hero-badge { color: #365767; background: #e5edf0; border: 0; }
.app-workspace .page-hero-actions .btn-outline-light { color: #17475a; border-color: #a3b8c1; }
.app-workspace .page-hero-actions .btn-outline-light:hover { color: #fff; background: #17475a; }
.app-workspace :is(.panel-card, .card-custom, .work-card) { border-color: var(--color-border); box-shadow: var(--shadow-sm); border-radius: 12px; }
.app-workspace .panel-card:hover { box-shadow: var(--shadow-sm); }
.app-workspace .panel-card-header { background: #fff; padding: 18px 20px; }
.app-workspace .panel-card-title { font-size: .9rem; }
.app-workspace .table-custom thead th { background: #f4f7f9; color: #4c6171; font-size: .69rem; font-weight: 600; padding-block: 14px; border-bottom: 1px solid #dce3e8; }
.app-workspace .table-custom tbody td { padding-block: 14px; border-color: #e8edf0; font-size: .8rem; }
.app-workspace .table-custom tbody tr:hover { background: #f6fafb; }
.app-workspace .kpi-card { border: 1px solid #dce3e8; box-shadow: none; border-radius: 10px; padding: 18px; background: #fff; }
.app-workspace .kpi-card:hover { transform: none; box-shadow: none; }
.app-workspace .kpi-card-icon { border-radius: 9px; width: 37px; height: 37px; font-size: 1rem; }
.app-workspace .kpi-card-value { font-size: 1.5rem; }
.app-workspace .kpi-card-label { color: #566879; }
.app-workspace .badge-status { background: #edf3f5 !important; color: #36566a; border: 1px solid #d5e2e8; }
.app-workspace .badge-status:is([data-status='Issued'], [data-status='DO Issued'], [data-status='Paid'], [data-status='Loaded'], [data-status='Empty Return']) { background: #e5f3ec !important; color: #246548; border-color: #bfdfce; }
.app-workspace .badge-status:is([data-status='Partial'], [data-status='Overdue'], [data-status='Ready']) { background: #fff2d8 !important; color: #7a5115; border-color: #ecd5a4; }
.app-workspace .badge-status:is([data-status='Cancelled'], [data-status='Hold']) { background: #fbe8e6 !important; color: #8a3730; border-color: #ecc5c1; }
.app-workspace .work-heading { margin-bottom: 22px; }
.app-workspace .work-heading h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.04em; color: #142e3e; }
.app-workspace .work-heading p, .app-workspace .work-heading time { font-size: .8rem; color: #566879; }
.app-workspace .work-heading time { padding: 8px 12px; border: 1px solid #dce3e8; border-radius: 7px; background: #fff; }
.app-workspace .work-shortcuts { padding-bottom: 22px; border-bottom: 1px solid #dce3e8; }
.app-workspace .work-shortcuts .btn { padding: 9px 13px; font-size: .75rem; }
.app-workspace .work-card > header { padding: 18px 20px; background: #fff; }
.app-workspace .work-card h3 { font-size: .86rem; }
.app-workspace .work-card small { font-size: .7rem; }
.app-workspace .work-count { display: grid; place-items: center; background: #edf3f5; color: #285365; min-width: 34px; height: 34px; border-radius: 9px; font-size: 1rem; }
.app-workspace .work-list a { padding: 16px 20px; }
.app-workspace .work-item-heading strong { font-size: .82rem; }
.app-workspace .work-list p { font-size: .74rem; margin-block: 7px; }
.app-workspace .work-item-meta { font-size: .68rem; }
.app-workspace .work-more { background: #fbfcfd; font-size: .71rem; }
.app-workspace .work-empty { min-height: 86px; display: flex; align-items: center; font-size: .77rem; }
.app-workspace .voyage-hub { background: #fff; border: 1px solid #dce3e8; border-radius: 12px; box-shadow: none; }
.app-workspace .voyage-hub-top { background: #fff; color: #182a3b; }
.app-workspace .voyage-hub-title { font-size: 1.5rem; color: #182a3b; }
.app-workspace .voyage-hub-meta, .app-workspace .voyage-hub-back { color: #566879; }
.app-workspace .voyage-hub-nav { background: #f8fafb; border-top: 1px solid #e3e9ed; }
.app-workspace .voyage-hub-link.active { background: #e3edf0; color: #17475a; box-shadow: none; }
.shipment-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: #5a6d7c; font-size: .75rem; margin-bottom: 24px; }
.shipment-breadcrumb a { color: #386072; text-decoration: none; }
.shipment-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.shipment-heading h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.035em; overflow-wrap: anywhere; margin: 8px 0; }
.shipment-eyebrow { text-transform: uppercase; font-size: .65rem; letter-spacing: .1em; font-weight: 700; color: #647988; }
.shipment-heading p { color: #536a7a; font-size: .85rem; }
.shipment-state { padding: 6px 10px; border-radius: 6px; background: #e5eef1; color: #214f60; font-size: .75rem; }
.shipment-tabs { display: flex; gap: 25px; border-bottom: 1px solid #d7e0e6; margin-bottom: 25px; overflow-x: auto; }
.shipment-tabs a { padding: 12px 0; white-space: nowrap; color: #4b6676; text-decoration: none; font-size: .8rem; font-weight: 600; }
.shipment-tabs a:hover { color: #103442; box-shadow: inset 0 -2px #17475a; }
.shipment-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 22px; align-items: start; }
.shipment-review-panel { grid-column: 2; grid-row: 1; min-width: 0; }
.shipment-details { grid-column: 1; grid-row: 1; min-width: 0; }
.shipment-next-review { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; margin-bottom: 18px; background: #edf5f5; border: 1px solid #c6dfe0; border-inline-start: 4px solid #287887; border-radius: 10px; }
.shipment-next-review h2 { font-size: 1.1rem; margin: 7px 0; color: #173f50; }
.shipment-next-review p { max-width: 650px; font-size: .78rem; line-height: 1.7; color: #526c79; margin-bottom: 9px; }
.shipment-next-review > .btn { flex-shrink: 0; white-space: normal; max-width: 260px; }
.shipment-check-link { font-size: .76rem; font-weight: 600; color: #18596a; text-underline-offset: 3px; }
.shipment-panel { border: 1px solid #dce3e8; border-radius: 12px; background: #fff; padding: 23px; margin-bottom: 22px; scroll-margin-top: 100px; min-width: 0; }
.shipment-panel h2 { font-size: .95rem; font-weight: 700; margin: 0 0 20px; }
.shipment-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0; }
.shipment-facts dt { font-size: .68rem; color: #627687; font-weight: 500; margin-bottom: 6px; }
.shipment-facts dd { font-size: .82rem; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.shipment-facts .wide { grid-column: 1 / -1; }
.shipment-checks { padding: 0; margin: 0; list-style: none; }
.shipment-checks li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf1f4; font-size: .77rem; }
.shipment-checks li:last-child { border: 0; }
.shipment-checks .bi-check-circle { color: #167055; }
.shipment-checks .bi-exclamation-circle { color: #a46514; }
.shipment-checks .bi-info-circle { color: #507283; }
.shipment-note { font-size: .73rem; line-height: 1.7; color: #596f7e; }
.shipment-doc { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #edf1f4; }
.shipment-doc:last-child { border: 0; }
.shipment-doc strong { font-size: .8rem; overflow-wrap: anywhere; }
.shipment-doc small { display: block; font-size: .7rem; margin-top: 4px; color: #617788; }
.shipment-timeline { list-style: none; margin: 0; padding-inline-start: 16px; border-inline-start: 1px solid #cbdbe3; }
.shipment-timeline li { padding: 0 0 20px 0; position: relative; font-size: .76rem; }
.shipment-timeline li::before { content: ''; position: absolute; inset-inline-start: -20px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #578599; }
.shipment-timeline time { display: block; font-size: .67rem; color: #647b8a; margin-bottom: 4px; }
.shipment-currency { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #e6edf1; }
.shipment-currency strong { font-size: 1.15rem; }
.correction-page .shipment-currency { gap: 12px; }
.correction-page .shipment-currency strong { white-space: nowrap; flex-shrink: 0; }
.redesigned-login { background: #112c3d; background-image: radial-gradient(ellipse at top right, #2b5361, transparent 70%); }
.redesigned-login .login-card { border-radius: 18px; border-top: 4px solid #c8b078; box-shadow: 0 24px 80px #0003; padding: 42px; }
.redesigned-login .btn-login { background: #17475a; border-color: #17475a; }
@media (min-width: 992px) {
    .app-sidebar.offcanvas-lg { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--rail-width); display: flex; flex-direction: column; z-index: 1030; background-color: #112c3d !important; visibility: visible; }
}
@media (max-width: 1199px) {
    :root { --rail-width: 214px; }
    .app-workspace .main-content { padding: 25px 22px; }
    .app-topbar { padding: 12px 22px; gap: 12px; flex-wrap: wrap; }
    .app-topbar .master-search-kbd { display: none; }
    .shipment-layout { grid-template-columns: minmax(0, 1fr); }
    .shipment-review-panel, .shipment-details { grid-column: 1; grid-row: auto; }
    .shipment-next-review { flex-wrap: wrap; }
}
@media (max-width: 991px) {
    .app-workspace .main-content, .app-topbar { margin-inline-start: 0; }
    .app-sidebar.offcanvas-lg { width: 270px; }
    [dir=rtl] .app-sidebar.offcanvas-start { left: auto; right: 0; transform: translateX(100%); }
    [dir=rtl] .app-sidebar.offcanvas-start.show, [dir=rtl] .app-sidebar.offcanvas-start.showing { transform: none; }
    .app-topbar { min-height: 68px; gap: 12px; }
    .app-topbar .user-info { margin-inline-start: auto; }
}
@media (max-width: 600px) {
    .app-topbar { position: relative; padding: 12px 16px; gap: 12px; }
    .app-topbar .navbar-search-wrap { order: 3; flex-basis: 100%; }
    .app-topbar .user-info { gap: 7px; }
    .app-topbar .user-info form { max-width: 200px; }
    .app-topbar .form-select { min-width: 105px; }
    .app-topbar .user-info > a { display: none; }
    .app-workspace .main-content { padding: 24px 16px; }
    .app-workspace .work-grid { grid-template-columns: minmax(0, 1fr); }
    .app-workspace .page-hero { flex-wrap: wrap; }
    .shipment-heading { flex-wrap: wrap; }
    .shipment-panel { padding: 18px; }
    .shipment-facts { grid-template-columns: minmax(0, 1fr); }
    .shipment-tabs { gap: 20px; }
    .redesigned-login .login-card { margin: 20px; padding: 28px; }
}
.app-topbar .app-home-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 11px; flex-shrink: 0; border: 1px solid #dce5ea; border-radius: 8px; color: #17475a; background: #f4f8fa; font-size: .78rem; font-weight: 700; text-decoration: none; }
.app-topbar .app-home-link:hover { background: #e4f0f1; border-color: #88b3ba; }
.app-home-link:focus-visible { outline: 3px solid #328d9b; outline-offset: 3px; }
@media (max-width: 600px) {
    .app-topbar .user-info { flex-wrap: wrap; justify-content: flex-end; }
    .app-topbar .user-info:has(#activeBranch) { width: 100%; justify-content: space-between; order: 2; }
}
@media print {
    .app-sidebar, .app-topbar, .workspace-skip { display: none !important; }
    .app-workspace .main-content { margin: 0; padding: 0; }
}