/*
 * Admin theme layered on Bootstrap 5.3.
 * Palette and type follow the Loko admin panel: DM Sans, warm cream canvas, brown accent.
 */

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url("../vendor/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
}

:root {
    --brand: #1f5eb8;
    --brand-dark: #174a93;
    --brand-soft: #e8f0fc;
    --canvas: #f3f6fb;
    --surface: #ffffff;
    --surface-tint: #f7f9fd;
    --ink: #0f1b2e;
    --ink-muted: #5a6b82;
    --line: #dce7f7; /* the one border colour: cards, tables, dividers, panels (brand-tinted, visible on white) */
    --card-border: var(--line);
    --input-border: #8fa8d0; /* fields and checkboxes: theme blue, darker than --line so a field's edge stays clear */
    --sidebar-width: 256px;
    --header-height: 76px;

    --bs-body-font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--canvas);
    --bs-secondary-color: var(--ink-muted);
    --bs-border-color: var(--line);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 31, 94, 184;
    --bs-link-hover-color: var(--ink);
    --bs-link-hover-color-rgb: 15, 27, 46;
    --bs-primary: var(--brand);
    --bs-primary-rgb: 31, 94, 184;
    --bs-border-radius: 8px;
    --bs-focus-ring-color: rgba(31, 94, 184, 0.25);
}

body {
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    transition: color 0.2s;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
}

/* Buttons: pill, uppercase, with a light sweep on hover */
.btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.6875rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 40px;
    letter-spacing: 0.02em;
}

.btn-primary,
.btn-outline-primary,
.btn-outline-danger {
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    isolation: isolate;
}

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: #d3d3d3;
    --bs-btn-disabled-border-color: #d3d3d3;
    --bs-btn-disabled-color: #565656;
    --bs-btn-focus-shadow-rgb: 31, 94, 184;
}

.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 -75%;
    width: 50%;
    background: rgba(255, 255, 255, 0.18);
    transform: skewX(-25deg);
    transition: left 0.7s;
    z-index: -1;
}

.btn-primary:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.btn-primary:hover::before {
    left: 130%;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
}

.btn-sm {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 0.8125rem;
}

/* Forms */
.form-label {
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.form-control,
.form-select {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0.625rem 0.9375rem;
    font-size: 1rem;
    color: var(--ink);
    background-color: var(--surface);
}

/* Keep room for the dropdown arrow (the shared padding above would otherwise put text under it). */
.form-select {
    padding-right: 2.5rem;
}

.form-select-sm {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.75rem;
    font-size: 0.875rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
    background-color: var(--surface);
}

.form-control::placeholder {
    color: #8a97a8;
}

.form-check-input {
    border-color: var(--input-border);
    background-color: var(--surface);
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 3rem;
}

.password-field .form-control.is-invalid {
    background-image: none;
}

.form-note {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ink);
}

.form-note svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 46px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--ink-muted);
}

.password-toggle:hover {
    color: var(--brand);
}

.password-toggle .icon-eye-off,
.password-toggle[aria-pressed="true"] .icon-eye {
    display: none;
}

.password-toggle[aria-pressed="true"] .icon-eye-off {
    display: block;
}

/* Dialogs: white (Bootstrap would use the grey-blue page colour) */
.modal {
    --bs-modal-bg: var(--surface);
}

/* Cards, tables, alerts */
.card {
    --bs-card-bg: var(--surface); /* Bootstrap would use the cream page colour */
    --bs-card-border-color: var(--card-border);
    --bs-card-border-radius: 12px;
    --bs-card-inner-border-radius: 12px;
    box-shadow: 0 1px 3px rgba(31, 94, 184, 0.05);
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.table {
    --bs-table-bg: var(--surface);
    --bs-table-border-color: var(--line);
    margin-bottom: 0;
}

.table > thead th {
    background: var(--surface-tint);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    padding: 0.75rem 1rem;
}

.table > tbody > tr > * {
    padding: 0.625rem 1rem;
}

.table .table-group > th {
    --bs-table-bg: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 600;
}

/* Machinery category groups: each category keeps its own colour (MachineryCategory::toneClass) on every page. */
.table .table-group[class*="cat-tone-"] > th { --bs-table-bg: var(--tone-bg); color: var(--tone-ink); box-shadow: inset 4px 0 0 var(--tone-ink); }
.match-none-note { margin-top: .2rem; line-height: 1.3; max-width: 16rem; }
/* Vessel machinery: Maker | Model / Type | Serial | Key specs (specs and notes on one line, wrapping when long). */
.machinery-table > tbody > tr > td:nth-child(3) { white-space: nowrap; }
.machinery-specs { min-width: 14rem; }
/* Vessel filter with several vessels: a tick per option, Clear / Apply under the list. */
.search-select[data-multiple] .search-select-options li[role="option"]:not([data-value=""])::before { content: ""; display: inline-block; width: .95rem; height: .95rem; margin-right: .5rem; border: 1px solid var(--line-strong, #9aa8bb); border-radius: 3px; vertical-align: -.15rem; background: #fff; }
.search-select[data-multiple] .search-select-options li[aria-selected="true"]:not([data-value=""])::before { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 80% no-repeat; border-color: var(--brand); }
.search-select-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem; border-top: 1px solid var(--line); }
.search-select-toggle [data-search-select-label] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tone-ink); margin-right: .5rem; vertical-align: .05rem; }
.cat-tone-0 { --tone-bg: #e8f0fd; --tone-ink: #1f5eb8; }
.cat-tone-1 { --tone-bg: #e3f4e8; --tone-ink: #2f7a46; }
.cat-tone-2 { --tone-bg: #fff1e0; --tone-ink: #a15c07; }
.cat-tone-3 { --tone-bg: #f3e8fd; --tone-ink: #7a3fb0; }
.cat-tone-4 { --tone-bg: #def4f4; --tone-ink: #0f7173; }
.cat-tone-5 { --tone-bg: #fde8ef; --tone-ink: #b0305c; }
.cat-tone-6 { --tone-bg: #fdf6d8; --tone-ink: #876b00; }
.cat-tone-7 { --tone-bg: #e9ecf8; --tone-ink: #3f4fa8; }
.cat-tone-8 { --tone-bg: #fde9e4; --tone-ink: #b3401f; }
.cat-tone-9 { --tone-bg: #e6f6fb; --tone-ink: #19718f; }
.cat-tone-10 { --tone-bg: #eef5df; --tone-ink: #557a12; }
.cat-tone-11 { --tone-bg: #f6e9f6; --tone-ink: #93378f; }
.cat-tone-none { --tone-bg: #eef2f7; --tone-ink: #5b6b7f; }

.alert {
    border: 0;
    border-left: 4px solid currentColor;
    border-radius: 8px;
}

.status-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 40px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-active {
    background: #e3f4e8;
    color: #2f7a46;
}

.status-pending {
    background: #fff4de;
    color: #9a6200;
}

.status-deactivated {
    background: #fde4e5;
    color: #b4262c;
}

/* Vessels */
.row-link {
    cursor: pointer;
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
}

.category-badge,
.match-badge,
.doc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: 40px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.category-badge {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.match-none { background: #e9eef5; color: var(--ink-muted); }
.match-tier-1 { background: #e3f4e8; color: #2f7a46; }
.match-tier-2 { background: #fff4de; color: #9a6200; }
.match-tier-3 { background: #e8f0fc; color: var(--brand-dark); }

.doc-none { background: #e9eef5; color: var(--ink-muted); }
.doc-uploaded,
.doc-queued,
.doc-processing { background: #e7f0fb; color: #1f5fa8; }
.doc-review_pending { background: #fff4de; color: #9a6200; }
.doc-completed { background: #e3f4e8; color: #2f7a46; }
.doc-failed { background: #fde4e5; color: #b4262c; }

.doc-status .spinner-border {
    --bs-spinner-width: 0.75rem;
    --bs-spinner-height: 0.75rem;
    --bs-spinner-border-width: 0.15em;
}

.doc-list li + li {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.detail-list dt {
    font-weight: 600;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--ink-muted);
    font-size: 0.8125rem;
}

.email-preview {
    width: 100%;
    height: 640px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--canvas);
}

.placeholder-panel {
    height: 100%;
    padding: 1rem;
    border-radius: 8px;
    background: var(--surface-tint);
}

.placeholder-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    text-align: left;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.placeholder-chip:hover {
    border-color: var(--brand);
}

.placeholder-chip code {
    color: var(--brand-dark);
    font-weight: 600;
}

.badge-role {
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 600;
}

/* Guest (auth) layout: brand panel + form */
.auth-shell {
    min-height: 100vh;
    display: flex;
    background: var(--surface);
}

.auth-aside {
    flex: 0 0 42%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    color: #fff;
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.14), transparent 40%),
        radial-gradient(circle at 90% 95%, rgba(56, 189, 248, 0.25), transparent 45%),
        linear-gradient(160deg, #0b2a55 0%, #133f7d 55%, var(--brand) 100%);
}

.auth-aside h1 {
    color: #fff;
    font-size: 2.25rem;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 1rem;
}

.auth-aside p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    max-width: 30rem;
}

.auth-aside .auth-tagline {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.auth-aside .brand-mark {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Best Oasis logo (partials/logo): mark and name side by side, the tagline underneath. */
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; color: #07345c; line-height: 1; }
.logo-light { color: #fff; }
.logo-row { display: inline-flex; align-items: center; gap: 0.5rem; }
.logo-mark { width: 40px; height: 40px; flex: none; }
.logo-name { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.02; }
.logo-tagline { margin-top: 0.35rem; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.01em; opacity: 0.9; white-space: nowrap; }
.auth-aside .logo-mark { width: 48px; height: 48px; }
.auth-aside .logo-name { font-size: 1.4rem; }

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.auth-form {
    width: 100%;
    max-width: 420px;
}

.auth-form h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

@media (max-width: 991.98px) {
    .auth-shell {
        background: var(--canvas);
    }

    .auth-aside {
        display: none;
    }

    .auth-form {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 2.5rem 1.5rem;
    }
}

/* Brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--ink);
    font-weight: 700;
    font-size: 1.125rem;
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2b74d8, var(--brand-dark));
    color: #fff;
    flex-shrink: 0;
}

/* App layout: fixed sidebar, fixed header */
.app-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.app-sidebar .sidebar-brand {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
}

.app-sidebar .brand {
    font-size: 1rem;
    white-space: nowrap;
}

.sidebar-nav {
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 8px;
    color: #17242a;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-nav .nav-link svg {
    flex-shrink: 0;
    color: var(--ink);
    transition: color 0.2s;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:hover svg {
    color: var(--brand);
}

.sidebar-nav .nav-link.active {
    position: relative;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

/* Accent bar on the active top-level link (sub-items use a dot instead). */
.sidebar-nav > .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand);
}

.sidebar-nav .nav-link.active svg {
    color: var(--brand);
}

/* Collapsible sidebar group (Master) */
.sidebar-nav .nav-group-toggle {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
}

.nav-chevron {
    display: inline-flex;
    transition: transform 0.2s;
}

.nav-group-toggle[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
}

.nav-sub {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0 0.25rem 1.25rem;
}

.sidebar-nav .nav-sub .nav-link {
    position: relative;
    padding: 0.5rem 0.875rem 0.5rem 1.5rem;
    font-size: 0.6875rem;
}

.sidebar-nav .nav-sub .nav-link::before {
    content: "";
    position: absolute;
    left: 0.625rem;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    transform: translateY(-50%);
}

.sidebar-nav .nav-sub .nav-link.active {
    background: none;
}

/* List pages (Loko look): grey toolbar inputs, grey table header */
.dt-card .card-body {
    padding: 1.5rem;
}

.dt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
}

.dt-toolbar .dt-input {
    width: auto;
    min-width: 80px;
    height: 2.5rem; /* toolbar fields, Export CSV and Clear share one height */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    /* Same field look as the forms (border, radius, white), just more compact. */
    background-color: var(--surface);
    border: 1px solid var(--input-border);
    border-radius: 8px;
}

.dt-toolbar input.dt-input {
    min-width: 270px;
}

.dt-toolbar .dt-input:focus {
    background-color: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

/* Clear and Export CSV beside the toolbar fields: same height, text (and icon) centred both ways. */
.dt-toolbar .dt-clear,
.dt-toolbar .dt-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 2.5rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    line-height: 1;
    white-space: nowrap;
}

/* Searchable dropdown (partials/search-select): a select-like button opening a panel with a search box. */
.search-select { position: relative; }
.dt-toolbar .search-select-toggle { min-width: 14rem; max-width: 20rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-select-placeholder { color: var(--ink-muted); }
.search-select-panel {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 6px);
    left: 0;
    width: 18rem;
    max-width: calc(100vw - 2rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    font-size: 0.875rem;
}
.search-select-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); }
.search-select-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 0.875rem; }
.search-select-clear {
    width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 50%;
    background: #eef2f7; color: var(--ink-muted); font-size: 0.9rem; line-height: 1;
}
.search-select-count { padding: 0.55rem 0.85rem 0.2rem; font-size: 0.75rem; color: var(--ink-muted); }
.search-select-options { list-style: none; margin: 0; padding: 0.2rem 0 0.4rem; max-height: 16rem; overflow-y: auto; }
.search-select-options li[role="option"] { padding: 0.5rem 0.85rem; cursor: pointer; overflow-wrap: anywhere; }
.search-select-options li[role="option"]:hover,
.search-select-options li.active { background: var(--brand-soft); }
.search-select-options li[aria-selected="true"] { font-weight: 600; color: var(--brand-dark); }
.search-select-empty { padding: 0.5rem 0.85rem; color: var(--ink-muted); }
@media (max-width: 575.98px) {
    .dt-toolbar .search-select-toggle { min-width: 0; width: 100%; }
}

/* Vessel page "Uploaded file": one row per file with its download action. */
.document-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.document-list li:first-child { border-top: 0; padding-top: 0; }

/* Role edit page: permissions grouped by module, each with its own Select all. */
.role-form { max-width: 980px; }
.role-permissions { border: 1px solid var(--line); border-radius: 10px; }
.role-permissions-head { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1rem; background: #f3f6fa; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.role-module { padding: 0.9rem 1rem; border-top: 1px solid var(--line); }
.role-permissions-head + .role-module { border-top: 0; }
.role-module-title { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.9rem; font-weight: 600; }
.role-module-items { display: flex; flex-wrap: wrap; column-gap: 1.75rem; row-gap: 0.4rem; padding-left: 1.6rem; font-size: 0.875rem; }

.dt-table {
    border: 1px solid var(--line);
    border-radius: 10px;
}

/* A table that scrolls sideways keeps its absolutely positioned bits (e.g. visually-hidden header labels) inside its own
   frame; without a positioned frame they escape it and make the whole page scroll on tablets and phones. */
.table-responsive {
    position: relative;
}

.dt-table .table > thead th {
    background: #eef2f8;
    color: #33425a;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.875rem 1rem;
    border-bottom: 0;
}

.dt-table .table > tbody > tr > * {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
}

.dt-table .table > tbody > tr:last-child > * {
    border-bottom: 0;
}

.check-col {
    width: 56px;
}

.dt-check {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 4px;
    border-color: var(--input-border);
}

.icon-btn.status-thumb {
    color: #b3b3b3;
}

.icon-btn.status-thumb.is-active {
    color: #48b167;
}

.icon-filled path,
.icon-filled ellipse {
    fill: currentColor;
}

.dt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.pagination {
    --bs-pagination-color: var(--ink);
    --bs-pagination-hover-color: var(--brand);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

@media (max-width: 575.98px) {
    .dt-toolbar input.dt-input {
        min-width: 0;
        width: 100%;
    }
}

.sort-link {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.sort-link::after {
    content: "↕";
    opacity: 0.35;
    font-size: 0.75rem;
}

.sort-link.sorted-asc::after {
    content: "↑";
    opacity: 1;
}

.sort-link.sorted-desc::after {
    content: "↓";
    opacity: 1;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink-muted);
    transition: background-color 0.2s, color 0.2s;
}

.icon-btn:hover,
.icon-btn:focus-visible {
    background: var(--brand-soft);
    color: var(--brand);
}

.icon-btn:disabled {
    background: none;
    cursor: not-allowed;
    opacity: 0.45;
}

.icon-btn.status-thumb:disabled {
    opacity: 1; /* a required template is always active: keep the green thumb */
}

.icon-btn.text-success:hover {
    color: #2f7a46 !important;
}

.app-header {
    height: var(--header-height);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-header .page-heading {
    min-width: 0; /* long titles and breadcrumbs shorten with "…" instead of pushing the user menu off */
}

.app-header .page-title {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header .breadcrumb {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}

.app-header .breadcrumb-item.active {
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
}

.user-menu .user-name {
    font-weight: 600;
    line-height: 1.2;
}

.user-menu .user-role {
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.dropdown-menu {
    --bs-dropdown-border-color: transparent;
    --bs-dropdown-border-radius: 8px;
    --bs-dropdown-link-active-bg: var(--brand);
    --bs-dropdown-padding-y: 0.25rem;
    --bs-dropdown-min-width: 11rem;
    --bs-dropdown-divider-margin-y: 0.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.dropdown-item {
    padding: 0.5rem 1rem;
}

.app-main {
    background: var(--surface); /* white page; cards stand out by their border */
}

.app-content {
    padding: 1.75rem 1.5rem 2.5rem;
}

@media (min-width: 992px) {
    .app-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--sidebar-width);
        overflow-y: auto;
    }

    .app-main {
        margin-left: var(--sidebar-width);
        min-height: 100vh;
    }

    .app-content {
        padding: 2rem;
    }
}

/* Dashboard */
.dashboard-hero h2 {
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin: 2rem 0 0.75rem;
}

.stats-card {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    height: 100%;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(31, 94, 184, 0.05);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.stats-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(31, 94, 184, 0.12);
}

.stats-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    flex-shrink: 0;
}

.stats-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.stats-label {
    font-weight: 600;
    color: var(--ink-muted);
}

/* Live search: dim the results while a request is running */
.is-loading {
    opacity: 0.55;
    transition: opacity 0.15s;
}

/* Dashboard cards with nothing to open: no hover lift, normal cursor */
.stats-card-static:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 27, 46, 0.04), 0 8px 24px rgba(31, 94, 184, 0.06);
}

/* Recycled import statuses */
.import-pending, .import-uploaded { background: #fff4de; color: #9a6200; }
.import-complete, .import-ready-for-review { background: #e7f0fb; color: #1f5fa8; }
.import-accepted, .import-submitted, .import-confirmed { background: #e3f4e8; color: #2f7a46; }
.import-rejected, .import-discarded { background: #fde4e5; color: #b4262c; }
.import-processing { background: #e8f0fc; color: #174a93; }
.import-failed { background: #fde4e5; color: #b4262c; }
/* Pending / processing: a small spinner before the label. */
.import-pending::before, .import-uploaded::before, .import-processing::before {
    content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .4em; vertical-align: -.05em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: import-spin .8s linear infinite;
}
@keyframes import-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .import-pending::before, .import-uploaded::before, .import-processing::before { animation: none; } }
.import-error { white-space: pre-line; max-height: 9rem; overflow-y: auto; }
.review-vessel { scroll-margin-top: 1rem; }

/* Machinery entry drafts (partly filled, completed later). */
.status-draft { background: #fff4de; color: #9a6200; }
.machinery-draft td { background: #fffbf2; }

/* Vessel Detail tabs. */
.detail-tabs { border-bottom-color: var(--line); }
.detail-tabs .nav-link { font-weight: 600; color: var(--ink-muted); }
.detail-tabs .nav-link.active { color: var(--brand); }

/* Matches tab: recycled item | tier and score | best fleet match. */
.match-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; padding: 1rem 1.5rem; border-top: 1px solid var(--line); }
.match-side-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); margin-bottom: .2rem; }
.match-score { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding-top: 1.1rem; min-width: 5.5rem; }
/* All candidates of an item, grouped by tier; long lists scroll inside the row. */
.match-candidates { max-height: 22rem; overflow-y: auto; padding-right: .25rem; }
.match-tier-group + .match-tier-group { margin-top: .6rem; }
.match-tier-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.match-candidate { padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.match-candidate + .match-candidate { margin-top: .4rem; }
.match-field { display: inline-block; font-size: .72rem; padding: .05rem .45rem; margin: 0 .2rem .2rem 0; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); }
/* Matches page: items grouped by category; a row expands to its fleet candidates. */
.match-toggle-col { width: 2.25rem; }
.match-toggle { color: var(--ink-muted); transition: transform .15s; }
.match-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.match-candidates-row > td { background: #f8fafc; }
.match-compare { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
/* Recycled item vs its fleet candidates: one column per vessel, one row per field. */
.mc-table { font-size: .875rem; min-width: 40rem; }
.mc-table > :not(caption) > * > * { padding: .6rem .85rem; border-bottom-color: var(--line); vertical-align: top; }
.mc-table thead th { background: #fff; font-weight: 400; border-bottom: 2px solid var(--line); min-width: 13rem; }
.mc-table .mc-field { width: 10rem; min-width: 10rem; max-width: 10rem; color: var(--ink-muted); font-weight: 600; font-size: .8125rem; white-space: nowrap; }
.mc-table .mc-source { background: #f6f9fc; font-weight: 600; min-width: 13rem; }
.mc-table thead .mc-source { background: #f6f9fc; }
/* Wider than the frame (several candidates, narrow screens): scroll sideways with the field names and the recycled item fixed. */
.mc-table .mc-field { position: sticky; left: 0; z-index: 2; background: #fff; }
.mc-table .mc-source { position: sticky; left: 10rem; z-index: 2; box-shadow: 6px 0 6px -6px rgba(16, 24, 40, .25); }
.mc-table .mc-bands th { border-bottom: 1px solid var(--line); padding-top: .5rem; padding-bottom: .5rem; }
.mc-table .mc-band { background: #f8fafc; border-left: 2px solid var(--line); white-space: normal; }
.mc-band-label { position: sticky; left: 25.5rem; display: inline-block; } /* stays readable while the columns scroll */
@media (max-width: 575.98px) {
    /* Phones: only the field names stay fixed, so the candidates (what is being compared) get the screen. */
    .mc-table .mc-field { width: 6rem; min-width: 6rem; max-width: 6rem; white-space: normal; font-size: .75rem; }
    .mc-table .mc-source { position: static; min-width: 9rem; box-shadow: none; }
    .mc-table thead th { min-width: 10rem; }
    .mc-table > :not(caption) > * > * { padding: .5rem .6rem; }
    .mc-band-label { left: 6.75rem; }
    .match-candidates-row > td { padding: .5rem 0; }
}
.mc-cat { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.mc-cat-recycled { background: #fff1e0; color: #a15c07; }
.mc-cat-main-fleet { background: #e2ecfb; color: #1f5eb8; }
.mc-cat-offshore { background: #def4f4; color: #0f7173; }
.mc-cat-other { background: #eef2f7; color: var(--ink-muted); }
.mc-vessel { margin-top: .35rem; font-weight: 700; font-size: .875rem; }
.mc-imo { color: var(--ink-muted); font-size: .75rem; }
.mc-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.mc-value { display: inline-flex; align-items: baseline; gap: .35rem; padding: .15rem .55rem; border-radius: 6px; font-weight: 600; }
.mc-ok { background: #e3f4e8; color: #2f7a46; }
.mc-bad { background: #fde8e8; color: #b42318; }
.mc-none { background: #eef2f7; color: var(--ink-muted); font-weight: 400; }
.mc-table tfoot th, .mc-table tfoot td { border-bottom: 0; }
.mc-review { margin-bottom: .5rem; }
.mc-actions { display: flex; flex-direction: column; gap: .4rem; }
.mc-buttons { display: flex; flex-wrap: wrap; gap: .3rem; }
.mc-retired { opacity: .65; }
.status-pill { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: #e9eef5; color: var(--ink-muted); white-space: nowrap; }
.status-pill-warning { background: #fff4de; color: #9a6200; }
.status-accepted { background: #e3f4e8; color: #2f7a46; }
.status-rejected { background: #fde8e8; color: #b42318; }
.status-requires_further_review { background: #fff4de; color: #9a6200; }
@media (max-width: 767.98px) {
    .match-row { grid-template-columns: 1fr; gap: .5rem; padding: 1rem; }
    .match-score { flex-direction: row; padding-top: 0; justify-content: flex-start; }
}

/* How it works page. */
.hiw { max-width: 1120px; margin: 0 auto; }
.hiw-hero { position: relative; overflow: hidden; border-radius: 16px; padding: 2rem 2.25rem 2.25rem; color: #fff;
    background: radial-gradient(circle at 85% 15%, rgba(43, 116, 216, 0.55), transparent 45%), linear-gradient(135deg, #061a33 0%, #07345c 55%, #0b2747 100%); }
.hiw-hero .logo { display: flex; margin-bottom: 1.4rem; }
.hiw-hero h1 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; margin: 0.75rem 0 0.6rem; max-width: 34ch; line-height: 1.15; }
.hiw-hero p { max-width: 68ch; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; margin-bottom: 1.1rem; }
.hiw-eyebrow-chip { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.6rem;
    border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); }
.hiw-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hiw-chips span { font-size: 0.75rem; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; }
.hiw-jump { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.75rem 0; margin: 0.75rem 0 0.25rem; background: var(--surface); }
.hiw-jump a { font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hiw-jump a:hover { border-color: var(--brand); color: var(--brand); }
.hiw-section { padding: 1.75rem 0 0.5rem; scroll-margin-top: 3.5rem; }
.hiw-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.3rem; }
.hiw-section h2 { font-size: 1.45rem; font-weight: 700; margin-bottom: 0.4rem; }
.hiw-lead { color: var(--ink-muted); max-width: 80ch; margin-bottom: 1.1rem; }
.hiw-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 1199.98px) { .hiw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .hiw-steps { grid-template-columns: 1fr; } }
.hiw-step { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.hiw-step-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; background: var(--brand); color: #fff; margin-bottom: 0.6rem; }
.hiw-step-title { font-weight: 700; margin-bottom: 0.35rem; }
.hiw-step p { font-size: 0.82rem; color: var(--ink-muted); margin: 0; }
.hiw-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.85rem; }
.hiw-module { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; }
.hiw-module-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.hiw-module-head h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.hiw-module-icon { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); flex: none; }
.hiw-open { margin-left: auto; font-size: 0.78rem; font-weight: 600; }
.hiw-module-summary { color: var(--ink); font-weight: 500; margin-bottom: 0.4rem; }
.hiw-module ul, .hiw-card ul { padding-left: 1.1rem; margin-bottom: 0.6rem; }
.hiw-module li, .hiw-card li { margin-bottom: 0.25rem; color: #33425a; }
.hiw-who { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--ink-muted); }
.hiw-who span { font-weight: 700; color: var(--ink); }
.hiw-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0.85rem; }
.hiw-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.85rem; }
.hiw-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; overflow-x: auto; }
.hiw-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
.hiw-card-ok { background: #f1faf4; border-color: #cfe9d8; }
.hiw-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); background: #f7f9fd; }
.hiw-table td, .hiw-table th { padding: 0.6rem 0.85rem; }
.hiw-tech { color: var(--brand-dark); font-weight: 500; }
.hiw-note { font-size: 0.82rem; color: var(--ink-muted); }
.hiw-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hiw-callout { border: 1px solid #f3d38b; background: #fff8e6; border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.85rem; }
.hiw-footer { margin: 2rem 0 0.5rem; font-size: 0.8rem; color: var(--ink-muted); text-align: center; }
@media (max-width: 575.98px) {
    .hiw-hero { padding: 1.5rem 1.25rem; }
    .hiw-modules, .hiw-grid-2 { grid-template-columns: 1fr; }
}

/* Dashboard: greeting on the left, vessel search on the right (stacked on narrow screens). */
.dashboard-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: .5rem; }
.dashboard-top + .section-label, .dashboard-top + div > .section-label:first-child { margin-top: .75rem; }
/* Dashboard: tighter gaps between the sections. */
.dashboard-page .section-label { margin: 1.25rem 0 .6rem; }
.dashboard-page .row.mb-4 { margin-bottom: .5rem !important; }
/* Dashboard vessel search: results open under the box, over the page. */
.dashboard-search-box { position: relative; flex: 1 1 auto; min-width: 0; }
.dashboard-search-results { position: absolute; left: 0; right: 0; top: 100%; margin-top: .35rem; z-index: 1050; background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(16, 24, 40, .14); max-height: 22rem; overflow-y: auto; }
.dashboard-search-results:empty, .dashboard-search-results.is-closed { display: none; }
.search-dropdown-list { list-style: none; margin: 0; padding: .25rem 0; }
.search-dropdown-item { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .9rem; color: var(--ink); text-decoration: none; }
.search-dropdown-item:hover, .search-dropdown-item:focus { background: var(--brand-soft); color: var(--brand-dark); outline: none; }
.search-dropdown-note { padding: .6rem .9rem; font-size: .8125rem; color: var(--ink-muted); }
.dashboard-top .dashboard-hero { margin-bottom: 0; }
.dashboard-search { width: 100%; max-width: 28rem; margin-left: auto; }
.dashboard-search .form-label { margin-bottom: 0.25rem; font-size: 0.8125rem; }
.dashboard-search .dt-clear { display: inline-flex; align-items: center; justify-content: center; padding: 0 1.25rem; line-height: 1; white-space: nowrap; }
@media (max-width: 767.98px) {
    .dashboard-search { max-width: none; margin-left: 0; }
}


/* Audit Log filters: labelled fields in a grid; page size on the left, Export CSV and Clear on the right. */
.audit-toolbar { display: block; }
.audit-toolbar .form-label { margin-bottom: 0.25rem; font-weight: 600; }
.audit-toolbar .dt-input,
.audit-toolbar input.dt-input { width: 100%; min-width: 0; }
.audit-toolbar .audit-toolbar-actions .dt-input { width: auto; }
.audit-toolbar .search-select-toggle { width: 100%; min-width: 0; max-width: none; }
.audit-toolbar .audit-toolbar-actions input.dt-input { min-width: 0; width: 16rem; max-width: 100%; }
.audit-toolbar .audit-toolbar-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

/* Audit Log From / To: picked from the calendar only, so no text cursor. */
input[data-autosubmit-date] { cursor: pointer; caret-color: transparent; }

/* Machinery fields the AI flagged as unsure or unreadable (Recycled import review). */
.table td.low-confidence { background: var(--bs-warning-bg-subtle); box-shadow: inset 3px 0 0 var(--bs-warning); }

/* Recycled import list: the same column widths in every state */
.imports-table { table-layout: fixed; min-width: 720px; }
.imports-table th { white-space: nowrap; }
.imports-table .col-date { width: 160px; }
.imports-table .col-files { width: 160px; }
.imports-table .col-actions { width: 300px; }
.imports-table .import-error { overflow-wrap: anywhere; }

/* Recycled import: Upload is as tall as the file field beside it */
.upload-btn { min-height: calc(1.5em + 1.25rem + 2px); display: inline-flex; align-items: center; gap: 0.25rem; }

/* Vessel Matches page: 14px text throughout, fixed columns so everything stays inside the card at any width
   (the table scrolls sideways on phones; an opened comparison scrolls inside its own frame). */
.dt-table .match-detail-table > tbody > tr > *,
.dt-table .mc-table > :not(caption) > * > * { font-size: .875rem; }
.match-detail-table { table-layout: fixed; min-width: 54rem; } /* Maker and Model keep about 22rem; narrower screens scroll inside the frame */
.match-detail-table .match-best-col { width: 12rem; }
.match-detail-table .match-count-col { width: 7.5rem; }
.match-detail-table .match-status-col { width: 11.5rem; }
.match-detail-table td { overflow-wrap: anywhere; }
.match-candidates-row > td { overflow: hidden; }

/* Vessel page: the uploaded file sits in the Vessel details box, under a line. */
.vessel-files { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* Vessel page box: name with its category, details as label-over-value tiles. */
.vessel-name { font-size: 1.375rem; font-weight: 700; }
.vessel-facts dt { font-size: 0.8125rem; font-weight: 400; color: var(--ink-muted); margin-bottom: 0.15rem; }
.vessel-facts dd { font-weight: 500; overflow-wrap: anywhere; }

/* PDF Documents review: the original PDF next to the details. */
.pdf-frame { min-height: 640px; border: 1px solid var(--line); border-radius: 8px; }

/* Audit Log details: values before and after, wrapped within a readable width. */
.audit-details { min-width: 16rem; max-width: 32rem; overflow-wrap: anywhere; }

/* Chosen files before upload (item 13). */
.file-list li { border-bottom: 1px solid var(--bs-border-color-translucent, #e5e7eb); }
.file-list .btn-close { width: .6rem; height: .6rem; }

/* Preview flags (item 16): red = a required value is missing, amber = check (unsure / not readable / possible duplicate). */
.machinery-table td.flag-missing { box-shadow: inset 0 0 0 2px #dc3545; background: #fff5f5; }
.machinery-table td.flag-check { box-shadow: inset 0 0 0 2px #e0a100; }
.machinery-table td.flag-missing.flag-check { box-shadow: inset 0 0 0 2px #dc3545; }
.flag-missing-text { color: #b4262c; }
.flag-current { outline: 3px solid #1f5fa8; outline-offset: 2px; }
.review-flag-summary { position: sticky; top: .5rem; z-index: 5; }

/* Import preview: original PDF beside the data (item 16). */
.review-source { position: sticky; top: 1rem; }
.review-pdf-frame { width: 100%; height: calc(100vh - 8rem); min-height: 28rem; border: 0; display: block; }