/* Ship Marine AI shell - additions to the approved design system (ship-marine-ai.css, 2026-10-05) that the real
   pages need: the sidebar as a full-height column and a phone drawer, the header controls, real <table> markup
   in the look of the design's data table, and a few states. Tokens only - no colour, size or font of its own. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.sm-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.sm-skip:focus { top: 12px; }

/* ---------- shell layout ---------- */
.sm-app { min-height: 100vh; }
.sm-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; align-self: flex-start; transition: width 0.2s ease; }
.sm-ws { text-decoration: none; }
.sm-nav-item[aria-disabled="true"] { cursor: default; }
/* a module this account may not open: still in its place in the menu, visibly unavailable (not a link) */
.sm-locked { opacity: 0.5; cursor: not-allowed !important; }
.sm-locked:hover { background: transparent !important; color: var(--ink-nav) !important; }
.sm-nav-item[aria-disabled="true"]:hover { background: transparent; color: var(--ink-nav); }
.sm-subnav { margin-top: 2px; }
.sm-subnav span.sm-subnav-soon { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 12px; font-size: 14px; color: var(--ink-nav); white-space: nowrap; }
.sm-nav-item svg:last-child:not(:first-child) { flex-shrink: 0; transition: transform 0.15s ease; }
.sm-nav-item--group[aria-expanded="true"] svg:last-child { transform: rotate(90deg); }
a.sm-user { text-decoration: none; }
.sm-side-close { display: none; }
/* collapsed (icons only) */
.sm-side--collapsed .sm-ws-name, .sm-side--collapsed .sm-nav-label, .sm-side--collapsed .sm-nav-item > span,
.sm-side--collapsed .sm-nav-item > svg:last-child:not(:first-child), .sm-side--collapsed .sm-subnav,
.sm-side--collapsed .sm-user-text, .sm-side--collapsed .sm-user > svg { display: none !important; }
.sm-side--collapsed .sm-ws, .sm-side--collapsed .sm-user { width: 48px; min-height: 48px; padding: 4px; justify-content: center; border: 0; background: transparent; }
.sm-side--collapsed .sm-nav { align-items: center; }

/* Compact shared header; preserve the approved logo aspect ratio. */
.sm-header-inner { height: 68px; }
.sm-header-logo { height: 70px; width: auto; flex-shrink: 0; }
.sm-header-inner > .sm-header-left { gap: 16px; }
.sm-header-logo-link { display: inline-flex; height: 68px; align-items: center; overflow: hidden; flex-shrink: 0; border-radius: 8px; }
.admin-layout .sm-header-logo-link, .lookup-layout .sm-header-logo-link { height: 64px; }
.sm-theme-sun, .sm-theme-moon { display: block; }
[data-theme="light"] .sm-theme-sun { display: none; }
:root:not([data-theme="light"]) .sm-theme-moon { display: none; }
.sm-header-inner form { margin: 0; }
button.sm-header-link { background: transparent; font-family: inherit; cursor: pointer; }

/* phone: the sidebar becomes a drawer opened with the header's panel button */
@media (max-width: 899px) {
  .sm-side { position: fixed; left: 0; top: 0; z-index: 40; width: min(300px, 86vw); height: 100vh; transform: translateX(-102%); transition: transform 0.2s ease; box-shadow: none; }
  .sm-side.sm-side--collapsed { width: min(300px, 86vw); align-items: stretch; }
  .sm-app[data-side-open] .sm-side { transform: none; }
  .sm-app[data-side-open]::after { content: ""; position: fixed; inset: 0; z-index: 35; background: rgba(4, 12, 22, 0.55); }
  .sm-side-close { display: inline-flex; align-self: flex-end; }
  .sm-header-inner { height: 64px; gap: 12px; }
  .sm-header-logo { height: 65px; }
  .sm-header-logo-link { height: 64px; }
  .sm-header-link { padding: 0 12px; }
  .sm-header-link .sm-hide-narrow { display: none; }
  .sm-split > aside { position: static; }
}
@media (prefers-reduced-motion: reduce) { .sm-side { transition: none; } }

/* ---------- real tables in the design's data-table look ---------- */
.sm-dtable { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.sm-dtable th { padding: 14px 12px 12px; text-align: left; vertical-align: bottom; color: var(--ink-dim); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sm-dtable td { padding: 16px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.sm-dtable th:first-child, .sm-dtable td:first-child { padding-left: 20px; }
.sm-dtable th:last-child, .sm-dtable td:last-child { padding-right: 20px; }
.sm-dtable tbody tr:hover td { background: var(--row-hover); }
.sm-dtable tr[data-href] { cursor: pointer; }
.sm-dtable td > strong, .sm-dtable td > a.sm-cell-main { display: block; font-weight: 600; color: var(--ink); text-decoration: none; }
.sm-dtable td small, .sm-dtable td .sm-cell-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-dim); }
.sm-dtable .sm-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sm-dtable .sm-due-late { color: var(--bad); }
.sm-card > .sm-table-scroll:last-child { border-radius: 0 0 16px 16px; }

/* ---------- list page toolbar: segmented tabs as links, toolbar end, vessel lines ---------- */
.sm-seg a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--ink-muted); text-decoration: none; }
.sm-seg a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-tab); }
.sm-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sm-dtable .sm-other-vessel { display: block; margin-top: 8px; }

/* ---------- form and detail pages: summary aside, sub-heads, page foot, activity ---------- */
.sm-summary { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sm-summary dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sm-summary dt { font-size: 13px; color: var(--ink-dim); }
.sm-summary dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.sm-summary-note { display: flex; gap: 8px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--line); }
.sm-summary-note svg { flex-shrink: 0; margin-top: 3px; }
.sm-subhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sm-form-foot { display: flex; flex-direction: column; gap: 16px; }
.sm-form-foot .form-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
.sm-detail-sub { margin: 0; font-size: 15px; color: var(--ink-muted); }
.sm-activity { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sm-activity li { display: grid; grid-template-columns: 10px 1fr; gap: 10px; font-size: 13px; color: var(--ink-dim); }
.sm-activity li::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--line-strong); }
.sm-activity li:first-child::before { background: var(--accent); }
.sm-activity p { margin: 0; }
.sm-activity strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.sm-aside-card { padding: 24px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- small states the pages need ---------- */
.sm-notice--bad { background: var(--bad-soft); border-color: var(--bad-line); }
.sm-notice ul { margin: 6px 0 0; padding-left: 18px; }
.sm-count { font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sm-inline-form { display: inline; margin: 0; }
.sm-mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--input); color: var(--ink); }
.sm-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.sm-link:hover { text-decoration: underline; }
.sm-footer a { color: var(--ink-muted); }

/* Temporary entry-point pause: preserve module placement and original routes in markup. */
[data-module-paused] { cursor: not-allowed !important; text-decoration: none; }
.sm-nav-item[data-module-paused] { color: var(--ink-muted); }
.sm-nav-item[data-module-paused] > svg { opacity: 0.55; }
.sm-nav-item .sm-paused-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-paused-label small { font-size: 10px; font-weight: 500; line-height: 1.3; color: var(--ink-muted); }
.sm-feature--paused dt, .sm-feature--paused dd { color: var(--ink-muted); }
.sm-feature--paused .sm-feature-link { color: var(--ink-muted); border-color: var(--line); }
.sm-feature--paused .sm-feature-link:hover { color: var(--ink-muted); }