.pms-icon-picker {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
      gap: 0.4rem;
      max-height: 16rem;
      overflow: auto;
    }
    .pms-icon-picker label {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.15rem;
      padding: 0.45rem 0.25rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.65rem;
      color: var(--text-secondary);
      text-align: center;
      line-height: 1.2;
    }
    .pms-icon-picker input {
      accent-color: var(--primary);
      margin: 0 0 0.15rem;
    }
    .pms-icon-picker label:has(:checked) {
      border-color: var(--primary);
      background: rgba(14, 165, 233, 0.12);
      color: var(--text-primary);
    }
    .pms-icon-picker .material-icons,
    .pms-icon-picker .mdi {
      font-size: 1.4rem;
      line-height: 1;
    }
    :root {
      --bg-primary: #0a0f1a;
      --bg-secondary: #111827;
      --bg-card: #1a2234;
      --bg-card-hover: #1f2937;
      --border-color: #2d3748;
      --text-primary: #f8fafc;
      --text-secondary: #94a3b8;
      --text-muted: #64748b;
      --primary: #0ea5e9;
      --primary-on: #ffffff;
      --accent-primary: #0ea5e9;
      --accent-secondary: #06b6d4;
      --accent-gradient: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
      --success: #22c55e;
      --warning: #f59e0b;
      --danger: #ef4444;
      --danger-bg: rgba(239, 68, 68, 0.1);
      --warning-bg: rgba(245, 158, 11, 0.1);
      --success-bg: rgba(34, 197, 94, 0.1);
      --modal-backdrop: rgba(0, 0, 0, 0.75);
      --wr-assigned-bg: rgba(14, 165, 233, 0.2);
      --wr-recorded-bg: rgba(34, 197, 94, 0.35);
      --wr-manager-edit-bg: rgba(251, 146, 60, 0.4);
      --wr-recorded-rest-bg: rgba(148, 163, 184, 0.35);
      --wr-violation-bg: rgba(239, 68, 68, 0.5);
      --wr-pattern-selected-bg: rgba(14, 165, 233, 0.35);
      --wr-selected-work-bg: rgba(59, 130, 246, 0.6);
      --dropdown-shadow: 0 8px 20px rgba(0,0,0,0.25);
      --notification-item-unread-bg: rgba(14, 165, 233, 0.08);
      /*
       * Breakpoint tokens (single source of truth — use ONLY these pixel values in @media and matchMedia):
       * --bp-xs:  360px  minimal chrome (hide optional header text, etc.)
       * Between sm and xs: 400px max — tighter main padding (replaces legacy 390px)
       * --bp-sm:  480px  small phones
       * --bp-md:  768px  primary “mobile dashboard” (burger nav, stacked toolbars, full-bleed modals)
       * --bp-lg:  1024px tablet / small laptop (stack grids, SMS layout)
       * --bp-xl:  1200px desktop content columns (when used)
       * --bp-2xl: 1500px wide modals
       * Note: Plain CSS cannot use var() inside @media in all browsers — copy the number from the token above.
       * Desktop sidebar collapse button: use (min-width: 769px) with (max-width: 768px) for mobile to avoid 1px overlap.
       */
      --bp-xs: 360px;
      --bp-xs-compact: 400px;
      --bp-sm: 480px;
      --bp-md: 768px;
      --bp-lg: 1024px;
      --bp-xl: 1200px;
      --bp-2xl: 1500px;

      /* Responsive layout tokens */
      --space-page: clamp(1rem, 2vw, 2rem);
      /* Tighter top inset so page titles sit closer under the header */
      --space-page-top: 0.65rem;
      --space-section: clamp(0.75rem, 1.5vw, 1.5rem);
      --tap-min: 44px;
      --tap-comfortable: 48px;
      --sidebar-width: clamp(200px, 18vw, 260px);
      --header-row-gap: 0.5rem;
      --text-body: clamp(0.875rem, 0.8rem + 0.25cqi, 1rem);

      /* Z-index scale */
      --z-sidebar-overlay: 90;
      --z-header-sticky: 95;
      --z-fab: 95;
      --z-dropdown: 200;
      --z-mobile-header: 150;
      --z-modal: 1000;
      --dashboard-sticky-top: 0px;
      --category-header-height: 3.5rem;
    }

    html[data-theme="light"] {
      --bg-primary: #f8fafc;
      --bg-secondary: #f1f5f9;
      --bg-card: #ffffff;
      --bg-card-hover: #e2e8f0;
      --border-color: #94a3b8;
      --text-primary: #0f172a;
      --text-secondary: #475569;
      --text-muted: #64748b;
      --primary: #0284c7;
      --primary-on: #ffffff;
      --accent-primary: #0284c7;
      --accent-secondary: #0891b2;
      --accent-gradient: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);
      --modal-backdrop: rgba(0, 0, 0, 0.4);
      --wr-assigned-bg: rgba(2, 132, 199, 0.15);
      --wr-recorded-bg: rgba(34, 197, 94, 0.2);
      --wr-manager-edit-bg: rgba(251, 146, 60, 0.25);
      --wr-recorded-rest-bg: rgba(148, 163, 184, 0.2);
      --wr-violation-bg: rgba(239, 68, 68, 0.2);
      --wr-pattern-selected-bg: rgba(2, 132, 199, 0.2);
      --wr-selected-work-bg: rgba(59, 130, 246, 0.35);
      --dropdown-shadow: 0 10px 40px rgba(0,0,0,0.12);
      --notification-item-unread-bg: rgba(2, 132, 199, 0.08);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      max-width: 100%;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    /* Root app shell: prevent horizontal expansion past layout viewport */
    #app {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow-x: hidden;
    }

    .main-content .page {
      display: none !important;
      min-width: 0;
      max-width: 100%;
      overflow-x: hidden;
      overflow-anchor: none;
    }
    .main-content .page.wt-page-active {
      display: block !important;
    }

    #page-statutory-erb,
    #statutory-erb-root {
      box-sizing: border-box;
      min-width: 0;
      max-width: 100%;
    }

    /* Cabins & Muster merged section */
    .cabins-muster-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .cabins-muster-actions {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      flex-wrap: wrap;
    }
    .cabins-muster-list {
      display: block;
    }
    .cabins-muster-cabin-block {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      margin-bottom: 0.85rem;
      overflow: hidden;
      background: var(--bg-secondary);
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .cabins-muster-cabin-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.75rem 0.875rem;
      border-bottom: 1px solid var(--border-color);
      flex-wrap: wrap;
      background: var(--bg-primary);
    }
    .cabins-muster-cabin-actions {
      display: flex;
      gap: 0.45rem;
      flex-wrap: wrap;
    }
    .cabins-muster-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .cabins-muster-table {
      min-width: 720px;
      border-collapse: separate;
      border-spacing: 0;
    }
    .cabins-muster-details-cell {
      font-size: 0.78rem;
      color: var(--text-secondary);
      white-space: normal;
    }

    @media (max-width: 768px) {
      .cabins-muster-header {
        align-items: stretch;
      }
      .cabins-muster-actions {
        width: 100%;
      }
      .cabins-muster-actions .btn {
        flex: 1 1 12rem;
      }
      .cabins-muster-cabin-actions {
        width: 100%;
      }
      .cabins-muster-cabin-actions .btn {
        flex: 1 1 calc(50% - 0.45rem);
      }
      .cabins-muster-table {
        min-width: 640px;
      }
      .cabins-muster-table th:first-child,
      .cabins-muster-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--bg-card);
      }
      .cabins-muster-table th:first-child {
        z-index: 3;
      }
    }

    @media (max-width: 480px) {
      .cabins-muster-actions .btn,
      .cabins-muster-cabin-actions .btn {
        flex: 1 1 100%;
      }
      .cabins-muster-table {
        min-width: 560px;
      }
    }

    /* Vessels — collapsible detail sections (cabins, tanks, positions) */
    .vessel-section-toggle {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      padding: 0;
      margin: 0;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      cursor: pointer;
    }
    .vessel-section-toggle:hover {
      background: var(--bg-tertiary);
    }
    .vessel-section-toggle .vessel-section-chevron {
      display: block;
      transition: transform 0.15s ease;
    }
    .vessel-detail-section-card.is-collapsed .vessel-section-toggle .vessel-section-chevron {
      transform: rotate(-90deg);
    }
    /* Vessel details card — use width; 2 cols from narrow up, more on wider screens */
    .vessel-info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.85rem 1.25rem;
      align-content: start;
    }
    .vessel-info-item {
      min-width: 0;
    }
    .vessel-info-item--full {
      grid-column: 1 / -1;
    }
    .vessel-info-item .vessel-info-label {
      font-size: 0.75rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin-bottom: 0.2rem;
    }
    .vessel-info-item .vessel-info-value {
      font-size: 0.9rem;
      color: var(--text-primary);
      word-break: break-word;
    }
    @media (min-width: 640px) {
      .vessel-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (min-width: 900px) {
      .vessel-info-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
    /* Trip calendar (Teams) — narrow viewports: scroll upcoming list instead of paging */
    .trip-cal-upcoming-scroll {
      max-height: min(22rem, 52vh);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-right: 0.35rem;
      margin: 0 0 0.25rem 0;
    }
    .trip-cal-upcoming-scroll-hint {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin: 0 0 0.5rem 0;
    }
    @media (min-width: 641px) {
      .trip-cal-upcoming-scroll-hint {
        display: none;
      }
    }
    .vessel-section-title-wrap {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      flex: 1 1 auto;
      min-width: 0;
    }
    .vessel-section-title-wrap--stack {
      flex-direction: column;
      align-items: stretch;
      gap: 0.2rem;
    }
    .vessel-section-title-wrap--stack .vessel-section-title-row {
      display: flex;
      align-items: center;
      gap: 0.65rem;
    }
    .vessel-positions-toolbar {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      flex-wrap: wrap;
      padding: 0.65rem 1rem;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }
    .vessel-permission-lock-icon {
      display: none;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0.15rem;
      margin: 0;
      color: var(--text-muted);
      cursor: help;
      line-height: 0;
      border: none;
      background: transparent;
      border-radius: 6px;
    }
    .vessel-permission-lock-icon:hover {
      color: var(--text-secondary);
      background: var(--bg-tertiary);
    }
    .vessel-permission-lock-icon svg {
      width: 1rem;
      height: 1rem;
      display: block;
    }
    .vessel-tank-type-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem 0.55rem;
      align-items: stretch;
    }
    .vessel-tank-type-card {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      min-width: 6.75rem;
      max-width: 11rem;
      flex: 0 1 auto;
      padding: 0.4rem 0.5rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-card);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .vessel-tank-type-card--readonly {
      max-width: 9.5rem;
      padding: 0.35rem 0.5rem;
      background: var(--bg-secondary);
      border-style: dashed;
      opacity: 0.95;
    }
    .vessel-tank-type-card__name {
      font-size: 0.78rem;
      font-weight: 600;
      line-height: 1.25;
      word-break: break-word;
      color: var(--text-primary);
    }
    .vessel-tank-type-card__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      margin-top: 0.1rem;
    }
    .vessel-tank-type-card__actions .btn {
      flex: 1 1 calc(50% - 0.125rem);
      min-width: 0;
      font-size: 0.68rem;
      padding: 0.18rem 0.35rem;
      line-height: 1.2;
    }

    body {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      min-height: 100vh;
    }

    /* Layout */
    .app-container {
      display: flex;
      min-height: 100vh;
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }
    /* Sidebar: fixed; header and footer stay visible, only the nav middle scrolls */
    .sidebar {
      width: 260px;
      background: var(--bg-secondary);
      border-right: 1px solid var(--border-color);
      padding: 1.5rem calc(1.5rem + 12px) 1.5rem 1.5rem;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      z-index: 100;
      overflow: hidden;
      box-sizing: border-box;
    }
    .sidebar-header-row {
      flex-shrink: 0;
    }
    .sidebar-nav-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }
    .sidebar-footer {
      flex-shrink: 0;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 1.5rem;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      object-fit: contain;
      background: transparent;
    }

    /* Sidebar: icon only at top (brand text lives in header when using top nav) */
    .sidebar .logo-text {
      display: none !important;
    }

    .logo-text {
      font-size: 1.25rem;
      font-weight: 600;
    }

    .nav-section {
      margin-bottom: 1.5rem;
    }

    .nav-section-title {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      margin-bottom: 0.75rem;
      padding-left: 0.5rem;
      padding-right: 0.25rem;
      display: grid;
      grid-template-columns: 1.75rem 1fr;
      align-items: center;
      column-gap: 0.35rem;
      cursor: pointer;
      user-select: none;
      transition: color 0.2s;
    }

    .nav-section-title:hover {
      color: var(--text-secondary);
    }

    .nav-section-title.has-subgroups .nav-section-arrow {
      display: inline-block;
      transition: transform 0.2s;
      width: 12px;
      height: 12px;
      opacity: 0.7;
      pointer-events: none;
    }
    .nav-section-title.has-subgroups .nav-section-toggle {
      grid-column: 1;
      justify-self: start;
      margin: 0;
    }
    .nav-section-title.has-subgroups > .nav-section-arrow {
      grid-column: 1;
      justify-self: start;
    }
    .nav-section-title.has-subgroups .nav-section-label {
      grid-column: 2;
      display: inline-flex;
      align-items: center;
      min-width: 0;
    }

    .nav-section-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: none;
      background: transparent;
      color: inherit;
      padding: 0;
      margin: 0;
      cursor: pointer;
      border-radius: 6px;
      -webkit-tap-highlight-color: transparent;
    }

    .nav-section-toggle:hover {
      background: var(--bg-card);
    }

    .nav-section-title.has-subgroups.collapsed .nav-section-arrow {
      transform: rotate(-90deg);
    }

    .nav-section-items {
      overflow: hidden;
      transition: max-height 0.3s ease-out, opacity 0.2s;
    }

    /* Module setters re-show shared links inline; on-board crew without Fleet Management reach FuelEU from My Vessel. */
    body.fueleu-vessel-scope .nav-section[data-section="fleet-management"],
    body.fueleu-vessel-scope .category-header-item[data-category="fleet"],
    body:not(.fueleu-vessel-scope) [data-fueleu-home="vessel"] {
      display: none !important;
    }
    .nav-section.collapsed .nav-section-items {
      max-height: 0;
      opacity: 0;
      margin-bottom: 0;
    }

    .nav-section:not(.collapsed) .nav-section-items {
      max-height: 1000px;
      opacity: 1;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem;
      border-radius: 8px;
      color: var(--text-secondary);
      text-decoration: none;
      transition: all 0.2s;
      cursor: pointer;
      margin-bottom: 0.25rem;
      font-size: 0.95rem;
      line-height: 1.3;
      min-width: 0;
    }

    .nav-item:hover {
      background: var(--bg-card);
      color: var(--text-primary);
    }

    .nav-item.active {
      background: var(--accent-gradient);
      color: white;
    }

    .nav-icon {
      width: 20px;
      height: 20px;
      opacity: 0.7;
    }

    .nav-item.active .nav-icon {
      opacity: 1;
    }

    .nav-basket-count-wrap {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }
    #nav-basket-count {
      font-size: 0.7rem;
      min-width: 18px;
      text-align: center;
      font-weight: 600;
      padding: 0.1rem 0.35rem;
      border-radius: 10px;
      background: var(--primary);
      color: var(--bg);
    }
    #nav-basket-count[data-count="0"],
    #nav-basket-count.empty {
      display: none;
    }
    .nav-basket-count-dropdown {
      font-size: 0.75rem;
      font-weight: 600;
      margin-left: 0.35rem;
      padding: 0.1rem 0.4rem;
      border-radius: 10px;
      background: var(--primary);
      color: var(--bg);
    }
    .nav-basket-count-dropdown.empty {
      background: var(--bg-secondary);
      color: var(--text-muted);
    }

    .work-rest-calendar {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 0.35rem;
      margin-top: 0.75rem;
    }

    .work-rest-calendar .calendar-header {
      text-align: center;
      font-size: 0.75rem;
      color: var(--text-muted);
      padding-bottom: 0.25rem;
    }

    .work-rest-calendar .calendar-day {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.5rem;
      min-height: 48px;
      cursor: pointer;
      text-align: center;
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    .work-rest-calendar .calendar-day.active {
      border-color: var(--accent-primary);
      color: var(--text-primary);
      box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.4);
    }

    .work-rest-calendar .calendar-day.violation {
      background: var(--danger-bg);
      color: var(--danger);
      border-color: rgba(239, 68, 68, 0.6);
    }

    .work-rest-calendar .calendar-day.crew-grace-locked .work-rest-day-lock {
      display: block;
      font-size: 0.7rem;
      line-height: 1;
      margin-bottom: 0.15rem;
      color: var(--text-muted);
    }

    .work-rest-grid {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.75rem;
    }

    .work-rest-grid th,
    .work-rest-grid td {
      border: 1px solid var(--border-color);
      padding: 0.25rem;
      text-align: center;
    }

    .work-rest-grid th {
      color: var(--text-muted);
    }

    .work-rest-cell {
      background: var(--bg-secondary);
      height: 26px;
    }

    .work-rest-cell.assigned {
      background: var(--wr-assigned-bg);
    }

    .work-rest-cell.recorded {
      background: var(--wr-recorded-bg);
    }

    .work-rest-cell.manager-edit {
      background: var(--wr-manager-edit-bg);
    }

    .work-rest-cell.recorded-rest {
      background: var(--wr-recorded-rest-bg);
    }

    .work-rest-cell.violation {
      background: var(--wr-violation-bg);
    }

    .work-rest-halfhour-grid {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.7rem;
    }

    .work-rest-halfhour-grid th,
    .work-rest-halfhour-grid td {
      border: 1px solid var(--border-color);
      padding: 0.2rem;
      text-align: center;
      min-width: 22px;
    }

    .work-rest-halfhour-cell {
      background: var(--bg-secondary);
      height: 20px;
    }

    .work-rest-halfhour-cell.assigned {
      background: var(--wr-assigned-bg);
    }

    .work-rest-halfhour-cell.recorded {
      background: var(--wr-recorded-bg);
    }

    .work-rest-halfhour-cell.recorded-rest {
      background: var(--wr-recorded-rest-bg);
    }

    .work-rest-halfhour-cell.violation {
      background: var(--wr-violation-bg);
    }

    .work-rest-block-editable {
      transition: background-color 0.2s ease;
    }

    .work-rest-block-editable:hover {
      opacity: 0.8;
      transform: scale(1.05);
    }

    .work-rest-halfhour-cell.selected-work {
      background: var(--wr-selected-work-bg) !important;
      border: 2px solid var(--accent-primary);
    }

    .work-rest-pattern-cell {
      background: var(--bg-secondary);
      height: 18px;
      cursor: pointer;
    }

    .work-rest-pattern-cell.selected {
      background: var(--wr-pattern-selected-bg);
    }

    .work-rest-mca-six-six-warning {
      border: 1px solid #d97706;
      border-left: 4px solid #b45309;
      background: #fde68a;
      color: #1c1917;
      border-radius: 8px;
      padding: 0.65rem 0.85rem;
      margin-bottom: 1rem;
      font-size: 0.8125rem;
      line-height: 1.4;
    }
    .work-rest-mca-six-six-warning strong {
      color: #92400e;
    }

    .work-rest-ship-time-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem 0.75rem;
      flex-wrap: nowrap;
      padding: 0.65rem 1rem;
      overflow-x: auto;
      overflow-y: clip;
    }
    .work-rest-ship-time-bar .card-title {
      margin: 0;
      font-size: 1rem;
      white-space: nowrap;
    }
    .work-rest-ship-time-item {
      display: inline-flex;
      align-items: baseline;
      gap: 0.35rem;
      font-size: 0.875rem;
      white-space: nowrap;
    }
    .work-rest-ship-time-item .label {
      color: var(--text-muted);
      font-size: 0.8rem;
    }
    .work-rest-ship-time-item .value {
      font-weight: 600;
    }
    .work-rest-ship-time-item .value.time-now {
      font-size: 1.05rem;
    }
    .work-rest-ship-time-scheduled {
      font-size: 0.8rem;
      color: var(--accent-primary);
      white-space: nowrap;
    }
    .work-rest-ship-time-summary {
      font-size: 0.85rem;
      color: var(--text-muted);
      flex: 0 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .work-rest-ship-time-actions {
      margin-left: auto;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .work-rest-top-bar {
      margin-bottom: 1.5rem;
    }
    .work-rest-top-bar[hidden] {
      display: none !important;
    }

    .work-rest-top-bar .work-rest-ship-time-card {
      margin-bottom: 0;
    }

    .work-rest-actions-card {
      margin-bottom: 0;
      min-width: min(100%, 320px);
    }

    .work-rest-actions-card .card-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      gap: 0.75rem;
      flex-wrap: wrap;
      height: 100%;
    }

    .work-rest-actions-card .card-title {
      margin: 0;
      margin-right: auto;
      white-space: nowrap;
    }

    .work-rest-actions-card .work-rest-actions-buttons {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .work-rest-interchange-map {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
    }
    .work-rest-interchange-map th,
    .work-rest-interchange-map td {
      text-align: left;
      padding: 0.45rem 0.4rem;
      border-bottom: 1px solid var(--border-color);
      vertical-align: top;
    }
    .work-rest-interchange-map select,
    .work-rest-interchange-map input[type="text"] {
      width: 100%;
      min-width: 8rem;
    }

    @media (max-width: 768px) {
      .work-rest-top-bar {
        grid-template-columns: 1fr;
      }

      .work-rest-actions-card {
        min-width: 0;
      }

      .work-rest-actions-card .card-header {
        justify-content: space-between;
      }
    }

    .work-rest-day-view-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      flex-wrap: nowrap;
    }

    .work-rest-day-view-header .card-title {
      margin: 0;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .work-rest-day-view-toolbar {
      --work-rest-day-control-h: 36px;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 1;
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: clip;
    }

    .work-rest-day-view-toolbar .work-rest-day-label {
      display: inline-flex;
      align-items: center;
      height: var(--work-rest-day-control-h);
      color: var(--text-muted);
      font-size: 0.85rem;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .work-rest-day-view-toolbar #work-rest-day {
      width: auto;
      min-width: 10.5rem;
      max-width: 11.5rem;
      height: var(--work-rest-day-control-h);
      min-height: var(--work-rest-day-control-h);
      padding: 0 0.65rem;
      margin: 0;
      box-sizing: border-box;
      flex-shrink: 0;
    }

    .work-rest-day-view-toolbar .btn {
      height: var(--work-rest-day-control-h);
      min-height: var(--work-rest-day-control-h);
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .work-rest-day-view-toolbar #work-rest-day-occurrence-wrap {
      flex-wrap: nowrap;
      flex-shrink: 0;
    }

    .work-rest-day-view-toolbar #work-rest-day-occurrence-wrap .btn-sm {
      height: var(--work-rest-day-control-h);
      min-height: var(--work-rest-day-control-h);
      padding: 0 0.6rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .work-rest-day-view-toolbar .work-rest-calendar-month-nav {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      flex-shrink: 0;
      margin-left: 0.25rem;
      padding-left: 0.5rem;
      border-left: 1px solid var(--border-color);
    }

    .work-rest-day-view-toolbar #work-rest-calendar-month-label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      min-width: 8.5rem;
      text-align: center;
    }

    .work-rest-day-legend-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1rem;
    }

    .work-rest-day-legend-row #work-rest-day-explainer {
      flex: 1 1 16rem;
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.45;
      margin: 0;
    }

    .work-rest-day-legend-badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
    }

    .kebab-menu {
      position: relative;
      display: inline-block;
    }

    .kebab-button {
      background: transparent;
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      border-radius: 6px;
      padding: 0.25rem 0.5rem;
      cursor: pointer;
    }

    .kebab-dropdown {
      position: absolute;
      right: 0;
      top: calc(100% + 0.25rem);
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.25rem;
      min-width: 12rem;
      width: max-content;
      max-width: min(18rem, calc(100vw - 1rem));
      box-shadow: var(--dropdown-shadow);
      z-index: 2000;
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0.125rem;
      white-space: normal;
      box-sizing: border-box;
    }

    .kebab-dropdown.is-open {
      display: flex;
    }

    .kebab-dropdown button,
    .kebab-dropdown .kebab-menu-item {
      display: block;
      width: 100%;
      flex: 0 0 auto;
      box-sizing: border-box;
      background: transparent;
      border: none;
      color: var(--text-primary);
      padding: 0.5rem 0.75rem;
      text-align: left;
      cursor: pointer;
      border-radius: 6px;
      white-space: nowrap;
      font: inherit;
      font-size: 0.875rem;
      line-height: 1.3;
    }

    .kebab-dropdown button:hover,
    .kebab-dropdown .kebab-menu-item:hover {
      background: var(--bg-card);
    }

    .crew-actions-cell {
      position: relative;
      overflow: visible;
      white-space: normal;
    }

    /* Escape table overflow + force a vertical stack (PMS closer must not fight this). */
    .crew-actions-menu .kebab-dropdown.is-open {
      position: fixed !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      right: auto !important;
      bottom: auto !important;
      z-index: 100000 !important;
      min-width: 12rem;
    }

    .crew-actions-menu .kebab-dropdown.is-open .kebab-menu-item,
    .crew-actions-menu .kebab-dropdown.is-open button {
      display: block !important;
      width: 100% !important;
      flex: 0 0 auto !important;
    }

    .sidebar-footer {
      margin-top: auto;
      padding-top: 0.4rem;
      border-top: 1px solid var(--border-color);
    }
    .sidebar-footer-card {
      display: flex;
      align-items: center;
      padding: 0.28rem 0.45rem;
      background: var(--bg-card);
      border-radius: 8px;
      border: 1px solid var(--border-color);
    }
    .sidebar-footer-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      min-width: 0;
      margin-top: 0;
    }
    .sidebar-footer-actions .user-menu-wrap {
      flex-shrink: 0;
    }
    .sidebar-footer-actions .sidebar-footer-report-btn {
      flex: 1;
      min-width: 0;
    }
    .sidebar-footer .sidebar-footer-btn-icon {
      flex-shrink: 0;
      margin-right: 6px;
    }
    .sidebar-footer .btn {
      display: inline-flex;
      align-items: center;
    }
    /* Match help control height to .header-user-initials (32px square) */
    .sidebar-footer .sidebar-footer-report-btn {
      padding: 0 0.5rem;
      min-height: 32px;
      height: 32px;
      font-size: 0.8125rem;
      font-weight: 500;
      gap: 0.35rem;
      box-sizing: border-box;
      line-height: 1;
    }
    .sidebar-footer .sidebar-footer-report-btn .sidebar-footer-btn-icon {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
    #sidebar-user-menu-wrap .user-menu-dropdown {
      top: auto;
      bottom: 100%;
      margin-bottom: 4px;
    }
    .sidebar-help-wrap {
      position: relative;
      flex: 1;
      min-width: 0;
    }
    .sidebar-help-dropdown {
      display: none;
      position: absolute;
      bottom: 100%;
      left: 0;
      margin-bottom: 4px;
      min-width: 160px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      z-index: 100;
      padding: 0.25rem 0;
    }
    .sidebar-help-dropdown.open {
      display: block;
    }
    .sidebar-help-dropdown a {
      display: block;
      padding: 0.5rem 0.75rem;
      color: var(--text-primary);
      text-decoration: none;
      font-size: 0.9rem;
    }
    .sidebar-help-dropdown a:hover {
      background: var(--bg-card-hover);
    }

    /* Slim collapse control on the right edge of the sidebar (desktop/tablet only) */
    .sidebar-edge-collapse {
      display: none;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 11px;
      padding: 0;
      margin: 0;
      border: none;
      border-left: 1px solid transparent;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      z-index: 5;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: background 0.15s, border-color 0.15s, color 0.15s, width 0.15s;
    }
    .sidebar-edge-collapse:hover,
    .sidebar-edge-collapse:focus-visible {
      background: var(--bg-card-hover);
      border-left-color: var(--border-color);
      color: var(--text-primary);
      outline: none;
    }
    .sidebar-edge-collapse:focus-visible {
      box-shadow: inset 0 0 0 1px var(--accent-primary);
    }
    .sidebar-edge-collapse-icon {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      pointer-events: none;
      opacity: 0.85;
    }
    .sidebar-edge-collapse:hover .sidebar-edge-collapse-icon {
      opacity: 1;
    }
    .sidebar-collapse-sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    @media (min-width: 769px) {
      .sidebar-edge-collapse {
        display: flex;
      }
    }
    @media (max-width: 768px) {
      .sidebar-edge-collapse {
        display: none !important;
      }
    }

    /* Collapsed state: narrow sidebar, icon-only nav */
    .app-container.sidebar-collapsed .sidebar {
      width: 72px;
      padding: 0.75rem calc(0.75rem + 10px) 0.75rem 0.75rem;
      align-items: center;
    }
    .app-container.sidebar-collapsed .main-content {
      margin-left: 72px;
    }
    .app-container.sidebar-collapsed .sidebar-header-row {
      flex-wrap: wrap;
      justify-content: center;
      padding-bottom: 0.6rem;
      margin-bottom: 0.45rem;
    }
    .app-container.sidebar-collapsed .sidebar-header-row .logo {
      margin: 0;
    }
    .app-container.sidebar-collapsed .logo-text,
    .app-container.sidebar-collapsed .notification-bell-btn.sidebar-bell {
      display: none !important;
    }
    .app-container.sidebar-collapsed .nav-section-title {
      display: none;
    }
    /* When sidebar is narrow, show all nav items (ignore accordion collapsed state) so all icons are visible */
    .app-container.sidebar-collapsed .nav-section.collapsed .nav-section-items {
      max-height: none;
      opacity: 1;
    }
    .app-container.sidebar-collapsed .nav-section {
      margin-bottom: 0.5rem;
    }
    .app-container.sidebar-collapsed .nav-section-items {
      margin-top: 0.25rem;
    }
    .app-container.sidebar-collapsed .nav-item {
      justify-content: center;
      padding: 0.65rem;
      font-size: 0;
    }
    .app-container.sidebar-collapsed .nav-item .nav-icon {
      width: 22px;
      height: 22px;
      margin: 0;
    }
    .app-container.sidebar-collapsed .nav-item .badge,
    .app-container.sidebar-collapsed .nav-item .nav-unread-badge {
      display: none;
    }
    .app-container.sidebar-collapsed .nav-section-unread-badge {
      display: none;
    }
    .app-container.sidebar-collapsed .nav-section-title.has-unread .nav-section-unread-dot {
      display: inline-block;
    }
    .app-container.sidebar-collapsed .sidebar-footer-card {
      padding: 0.28rem;
      justify-content: center;
    }
    .app-container.sidebar-collapsed .sidebar-footer-actions {
      flex-direction: column;
      margin-top: 0;
    }
    .app-container.sidebar-collapsed .sidebar-footer-report-btn {
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: 32px;
      min-width: 32px;
      height: 32px;
      min-height: 32px;
      margin-top: 0;
      padding: 0;
    }
    .app-container.sidebar-collapsed .sidebar-footer-report-btn .sidebar-footer-btn-icon {
      margin-right: 0;
    }
    .app-container.sidebar-collapsed .sidebar-footer .sidebar-footer-btn-label {
      display: none;
    }
    .app-container.sidebar-collapsed .sidebar-footer .sidebar-footer-btn-icon {
      margin: 0;
    }
    .app-container.sidebar-collapsed .sidebar-footer {
      padding-top: 0.4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .app-container.sidebar-collapsed .sidebar-edge-collapse {
      width: 9px;
    }

    .header-user-initials {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--accent-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 600;
      flex-shrink: 0;
    }
    .user-menu-wrap {
      position: relative;
      display: inline-block;
    }
    .user-menu-wrap .header-user-initials {
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .user-menu-wrap .header-user-initials:hover {
      opacity: 0.9;
    }
    .user-menu-dropdown {
      position: absolute;
      right: 0;
      top: 100%;
      margin-top: 0.25rem;
      min-width: 160px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: var(--dropdown-shadow);
      z-index: 110;
      display: none;
      padding: 0.35rem 0;
    }
    .user-menu-dropdown::before {
      content: '';
      position: absolute;
      top: -10px;
      left: 0;
      right: 0;
      height: 10px;
    }
    .user-menu-wrap.open .user-menu-dropdown {
      display: block;
    }
    .user-menu-dropdown button,
    .user-menu-dropdown a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.5rem 1rem;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font: inherit;
      font-size: 0.875rem;
      text-align: left;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
    }
    .user-menu-dropdown button:hover,
    .user-menu-dropdown a:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
    }
    .user-menu-dropdown button svg,
    .user-menu-dropdown a svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      opacity: 0.8;
    }

    /* Main Content */
    .main-content {
      flex: 1;
      margin-left: var(--sidebar-width, 260px);
      padding: var(--space-page-top, 0.65rem) var(--space-page, 2rem) var(--space-page, 2rem);
      min-width: 0;
      max-width: 100%;
    }

    /* Category header bar: stays at top of viewport while scrolling (header nav layout) */
    .category-header-bar {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: var(--z-header-sticky, 95);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--header-row-gap, 0.5rem);
      padding: 0.6rem 0;
      margin: calc(-1 * var(--space-page-top, 0.65rem)) calc(-1 * var(--space-page, 2rem)) 0.5rem calc(-1 * var(--space-page, 2rem));
      padding-left: var(--space-page, 2rem);
      padding-right: var(--space-page, 2rem);
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    }
    .category-header-spacer {
      display: none;
      flex-shrink: 0;
      height: 0;
    }
    .app-container[data-nav-layout="header"] .category-header-stack {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: var(--z-header-sticky, 95);
      background: var(--bg-secondary);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    .app-container[data-nav-layout="header"] .category-header-bar {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      width: auto;
      margin: 0;
      box-shadow: none;
    }
    .account-status-banners {
      display: none;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0.45rem var(--space-page, 2rem) 0.7rem;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
    }
    .account-status-banners:not(:empty):not([hidden]) {
      display: flex;
    }
    #wt-setup-banner {
      border-radius: 10px;
    }
    #wt-setup-banner-dismiss {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.75rem;
      min-height: 2.75rem;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
      border-radius: 8px;
    }
    #wt-setup-banner-dismiss:hover {
      color: var(--text-primary);
      background: rgba(0, 0, 0, 0.06);
    }
    #wt-setup-banner-dismiss:focus-visible {
      outline: 2px solid var(--accent-primary, #0ea5e9);
      outline-offset: 2px;
    }
    .app-container[data-nav-layout="header"] .category-header-spacer {
      display: block;
      height: var(--category-header-height, 3.5rem);
      margin-bottom: 0.35rem;
    }
    .category-header-brand {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .category-header-brand .logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0;
      border: none;
      margin: 0;
    }
    .category-header-brand .logo-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      object-fit: contain;
    }
    .category-header-brand .logo-text {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .category-header-bar .category-header-nav-wrap {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.25rem;
      min-width: 0;
    }
    .category-header-bar .category-header-right {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
      flex-shrink: 0;
      min-width: 0;
    }
    /* Global vessel selector (header + mirrored in sidebar) */
    .dashboard-global-vessel-wrap {
      display: none;
      align-items: center;
      gap: 0.4rem;
      flex-shrink: 0;
      min-width: 0;
      max-width: min(100%, 16rem);
    }
    .dashboard-global-vessel-wrap label {
      font-size: 0.8rem;
      color: var(--text-muted);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .dashboard-global-vessel-wrap select {
      min-width: 0;
      max-width: 100%;
      padding: 0.4rem 0.55rem;
      font-size: 0.875rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-primary);
    }
    .category-header-bar .dashboard-global-vessel-wrap {
      margin-left: 0;
    }
    .category-header-right .dashboard-global-vessel-wrap {
      margin-right: 0.15rem;
    }
    .sidebar-global-vessel-row {
      padding: 0 0 0.3rem 0;
      margin-bottom: 0.35rem;
      border-bottom: 1px solid var(--border-color);
    }
    .sidebar-global-vessel-row .dashboard-global-vessel-wrap {
      max-width: 100%;
    }
    .sidebar-vessel-picker-wrap {
      position: relative;
      width: 100%;
      min-width: 0;
    }
    #dashboard-global-vessel-select-sidebar,
    #dashboard-global-vessel-select {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .category-header-bar .dashboard-global-vessel-wrap.sidebar-vessel-picker-wrap {
      width: fit-content;
      max-width: min(100%, 22rem);
      flex: 0 1 auto;
    }
    .category-header-right .category-header-vessel-inline {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      min-width: 0;
      max-width: min(14rem, 28vw);
    }
    .category-header-right .category-header-vessel-inline .sidebar-vessel-picker-trigger {
      padding: 0.5rem 0.65rem;
      border-radius: 8px;
      font-size: 0.85rem;
      white-space: nowrap;
    }
    .category-header-bar #header-vessel-picker {
      width: auto;
    }
    .category-header-bar #header-vessel-picker .sidebar-vessel-picker-trigger {
      width: auto;
      max-width: min(100vw - 5rem, 22rem);
    }
    .category-header-bar #header-vessel-picker .sidebar-vessel-picker-text {
      flex: 0 1 auto;
    }
    .category-header-bar #header-vessel-picker .sidebar-vessel-picker-menu {
      left: auto;
      right: 0;
      min-width: max(100%, 12rem);
      width: max-content;
      max-width: min(100vw - 2rem, 22rem);
    }
    .sidebar-vessel-picker {
      position: relative;
      width: 100%;
      min-width: 0;
    }
    .sidebar-vessel-picker-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.35rem;
      width: 100%;
      min-width: 0;
      padding: 0.35rem 0.15rem;
      margin: 0;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--text-secondary);
      font: inherit;
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      transition: color 0.15s, background 0.15s;
    }
    .sidebar-vessel-picker-trigger:hover,
    .sidebar-vessel-picker-trigger[aria-expanded="true"] {
      color: var(--text-primary);
      background: var(--bg-card-hover);
    }
    .sidebar-vessel-picker.is-locked .sidebar-vessel-picker-trigger {
      cursor: default;
      color: var(--text-primary);
    }
    .sidebar-vessel-picker.is-locked .sidebar-vessel-picker-trigger:hover {
      background: transparent;
    }
    .sidebar-vessel-picker.is-locked .sidebar-vessel-picker-chevron {
      display: none;
    }
    .sidebar-vessel-picker-text {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .sidebar-vessel-picker-chevron {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      opacity: 0.55;
      transition: transform 0.2s, opacity 0.15s;
    }
    .sidebar-vessel-picker-trigger[aria-expanded="true"] .sidebar-vessel-picker-chevron {
      transform: rotate(180deg);
      opacity: 0.9;
    }
    .sidebar-vessel-picker-menu {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 4px);
      z-index: 120;
      max-height: min(50vh, 280px);
      overflow-y: auto;
      padding: 0.25rem 0;
      margin: 0;
      list-style: none;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: var(--dropdown-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
    }
    .sidebar-vessel-picker-menu.open {
      display: block;
    }
    .sidebar-vessel-picker-option {
      display: block;
      width: 100%;
      padding: 0.45rem 0.65rem;
      border: none;
      background: transparent;
      color: var(--text-primary);
      font: inherit;
      font-size: 0.875rem;
      text-align: left;
      cursor: pointer;
      transition: background 0.12s;
    }
    .sidebar-vessel-picker-option:hover,
    .sidebar-vessel-picker-option:focus-visible {
      background: var(--bg-card-hover);
      outline: none;
    }
    .sidebar-vessel-picker-option.is-active {
      background: var(--bg-card);
      font-weight: 600;
    }
    .app-container.sidebar-collapsed .sidebar-vessel-picker-trigger {
      padding: 0.28rem 0.15rem;
      font-size: 0.72rem;
    }
    .app-container.sidebar-collapsed .sidebar-vessel-picker-text {
      max-width: 3.2rem;
    }
    .category-header-bar .category-header-right .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      white-space: nowrap;
    }
    .category-header-bar .category-header-right .btn svg {
      width: 18px;
      height: 18px;
    }
    .category-header-dashboard-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      flex-wrap: wrap;
    }
    .category-header-dashboard-btn button {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.5rem 0.75rem;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--text-secondary);
      font: inherit;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .category-header-dashboard-btn button:hover {
      background: var(--bg-card);
      color: var(--text-primary);
    }
    .category-header-config-cog button,
    .category-header-item[data-category="help"] > button {
      padding: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      box-sizing: border-box;
    }
    .category-header-config-cog .category-header-dropdown,
    .category-header-item[data-category="help"] .category-header-dropdown {
      left: auto;
      right: 0;
    }
    /* Optional: programmatically hide bar (scroll auto-hide removed — bar stays sticky) */
    .category-header-bar.hidden {
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
    }
    .category-header-item {
      position: relative;
    }
    .category-header-item > button {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.45rem 0.55rem;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--text-secondary);
      font: inherit;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .category-header-item > button:hover,
    .category-header-item.open > button {
      background: var(--bg-card);
      color: var(--text-primary);
    }
    .category-header-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 220px;
      margin-top: 0;
      padding: 0.25rem 0 0.5rem 0;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: var(--dropdown-shadow);
      z-index: var(--z-dropdown, 200);
      display: none;
    }
    .category-header-item.open .category-header-dropdown {
      display: block;
    }
    .category-header-dropdown.is-multicolumn {
      column-count: 2;
      column-gap: 0.5rem;
      min-width: min(28rem, calc(100vw - 1.25rem));
      width: max-content;
      max-width: calc(100vw - 1rem);
    }
    .category-header-dropdown.is-multicolumn > a,
    .category-header-dropdown.is-multicolumn > .category-header-dropdown-label {
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
    }
    .category-header-dropdown.is-scroll-limited {
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }
    .category-header-dropdown a {
      display: block;
      padding: 0.5rem 1rem;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.875rem;
      transition: background 0.15s, color 0.15s;
    }
    .category-header-dropdown a:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
    }
    .category-header-dropdown a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .category-header-dropdown a .dropdown-item-unread-badge {
      margin-left: auto;
      flex-shrink: 0;
    }
    .category-header-dropdown a .dropdown-item-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      opacity: 0.8;
    }
    .category-header-dropdown-label {
      padding: 0.55rem 1rem 0.2rem;
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      user-select: none;
    }
    .category-header-dropdown-label:not(:first-child) {
      margin-top: 0.3rem;
      padding-top: 0.55rem;
      border-top: 1px solid var(--border-color);
    }
    .nav-subsection-label {
      display: block;
      width: 100%;
      flex: 0 0 100%;
      padding: 0.55rem 1rem 0.2rem 1.75rem;
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      user-select: none;
    }
    .nav-subsection-label:not(:first-child) {
      margin-top: 0.3rem;
      padding-top: 0.55rem;
      border-top: 1px solid var(--border-color);
    }
    .app-container.sidebar-collapsed .nav-subsection-label {
      display: none;
    }

    /* Nav layout toggle: sidebar vs header. Click logo to swap. */
    .app-container[data-nav-layout="header"] .sidebar {
      transform: translateX(-100%);
      transition: transform 0.25s ease-out;
    }
    .app-container[data-nav-layout="header"] .sidebar.open {
      transform: translateX(0);
    }
    .app-container[data-nav-layout="header"] .main-content {
      margin-left: 0;
    }
    .app-container[data-nav-layout="sidebar"] .category-header-bar {
      display: none !important;
    }
    /* Logo icon: layout toggle; brand text / home btn: dashboard */
    .nav-layout-logo {
      cursor: pointer;
      user-select: none;
      position: relative;
      outline: none;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
    }
    .nav-layout-logo:focus-visible { border-radius: 8px; box-shadow: 0 0 0 2px var(--accent-primary); }
    .logo-home-link {
      cursor: pointer;
      user-select: none;
      outline: none;
    }
    .logo-home-link:hover { color: var(--accent-primary); }
    .logo-home-link:focus-visible { border-radius: 6px; box-shadow: 0 0 0 2px var(--accent-primary); }
    .nav-home-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0.45rem;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s;
      flex-shrink: 0;
    }
    .nav-home-btn:hover,
    .nav-home-btn.active {
      background: var(--bg-card);
      color: var(--accent-primary);
    }
    .nav-home-btn svg { width: 20px; height: 20px; }
    .nav-section-title.active { color: var(--accent-primary); }
    .nav-section-label { flex: 1; min-width: 0; }
    .nav-section-title.has-subgroups .nav-section-toggle { flex-shrink: 0; }
    .category-header-item.active > button { color: var(--accent-primary); }
    .category-header-label {
      display: inline-flex;
      align-items: center;
      min-width: 0;
    }
    .category-header-chevron {
      width: 12px;
      height: 12px;
      opacity: 0.65;
      margin-left: 0;
      flex-shrink: 0;
    }
    @media (pointer: coarse), (hover: none) {
      .category-header-item > button {
        min-height: var(--tap-min, 44px);
        padding-inline: 0.55rem;
      }
      .category-header-chevron {
        width: 0.95rem;
        height: 0.95rem;
        padding: 0.25rem;
        margin: 0 0 0 0.05rem;
        box-sizing: content-box;
        pointer-events: auto;
      }
      .category-header-dropdown a {
        min-height: var(--tap-min, 44px);
        display: flex;
        align-items: center;
        padding-block: 0.65rem;
      }
      .nav-section-title.has-subgroups {
        min-height: var(--tap-min, 44px);
        align-items: center;
        padding-block: 0.15rem;
      }
      .nav-section-toggle {
        min-width: var(--tap-min, 44px);
        min-height: var(--tap-min, 44px);
        margin-left: -0.35rem;
      }
      .nav-section-title.has-subgroups .nav-section-arrow {
        width: 14px;
        height: 14px;
      }
      .sidebar-vessel-picker-trigger {
        min-height: var(--tap-min, 44px);
      }
      .sidebar-vessel-picker-option {
        min-height: var(--tap-min, 44px);
      }
    }
    /* Indicator: line on left = sidebar mode (shown on sidebar logo when that mode is active) */
    .app-container[data-nav-layout="sidebar"] .sidebar .nav-layout-logo::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 24px;
      background: var(--accent-primary);
      border-radius: 0 2px 2px 0;
    }
    .sidebar .nav-layout-logo { padding-left: 0.5rem; margin-left: -0.5rem; }
    /* Indicator: line on top = header mode (shown on category header logo when that mode is active) */
    .app-container[data-nav-layout="header"] .category-header-bar .category-header-brand .nav-layout-logo::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 3px;
      background: var(--accent-primary);
      border-radius: 0 0 2px 2px;
    }
    .category-header-bar .category-header-brand .nav-layout-logo { padding-top: 0.35rem; margin-top: -0.35rem; }

    /* Header nav layout: keep on 1 line where possible.
       Stage 1 (<= 1380px): Hide "WaterTightVM" brand text to preserve single-line menu.
       Stage 2 (<= 1140px): When space is tighter still, allow nav categories to wrap into a 2nd row below brand/right actions.
       Stage 3 (<= 768px): Collapses into standard mobile header and burger menu. */
    @media (max-width: 1380px) {
      .app-container[data-nav-layout="header"] .category-header-brand .logo-text {
        display: none;
      }
    }
    @media (max-width: 1140px) {
      .app-container[data-nav-layout="header"] .category-header-bar {
        row-gap: 0.45rem;
      }
      .app-container[data-nav-layout="header"] .category-header-brand {
        order: 1;
        flex: 0 0 auto;
      }
      .app-container[data-nav-layout="header"] .category-header-right {
        order: 1;
        flex: 1 1 auto;
        justify-content: flex-end;
        min-width: 0;
      }
      .app-container[data-nav-layout="header"] .category-header-nav-wrap {
        order: 2;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
      }
      .app-container[data-nav-layout="header"] .category-header-item > button,
      .app-container[data-nav-layout="header"] .category-header-dashboard-btn button {
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
      }
    }
    @media (max-width: 768px) {
      .app-container[data-nav-layout="header"] .category-header-bar {
        row-gap: 0.4rem;
      }
      .app-container[data-nav-layout="header"] .category-header-brand .logo-text {
        display: none;
      }
      .app-container[data-nav-layout="header"] .category-header-brand {
        order: 1;
      }
      .app-container[data-nav-layout="header"] .category-header-right {
        order: 1;
        flex: 1 1 auto;
        gap: 0.35rem;
      }
      .app-container[data-nav-layout="header"] .category-header-nav-wrap {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
      }
      .app-container[data-nav-layout="header"] .category-header-right .category-header-vessel-inline .sidebar-vessel-picker-trigger {
        max-width: min(40vw, 12rem);
      }
    }

    /* Wrapper for safety section only: keeps safety pages inside main and constrains width (no global change) */
    .safety-section-wrapper {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
    /* Warehouse hub: keep ops + settings in the padded main column (same pattern as safety) */
    .warehouse-section-wrapper {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
    #page-warehouse-operations,
    #page-config-warehouses {
      box-sizing: border-box;
      min-width: 0;
      max-width: 100%;
      margin-top: 0;
    }
    /* Safety dashboard only: 2-col grid with minmax(0,1fr) so columns can shrink and don't overflow */
    #page-safety-dashboard .safety-dashboard-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
    }
  #page-safety-dashboard .safety-suggestions-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 1.5rem;
  }
  #page-safety-dashboard .safety-suggestions-card .card-body {
    min-width: 0;
  }
  #page-safety-dashboard .safety-suggestions-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    min-width: 0;
  }
  #page-safety-dashboard .safety-suggestions-list-wrap {
    width: 100%;
    min-width: 0;
    max-height: min(28rem, 55vh);
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
  }
  #page-safety-dashboard .safety-suggestion-row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.875rem 1rem;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
  }
  #page-safety-dashboard .safety-suggestion-row:last-child {
    border-bottom: none;
  }
  #page-safety-dashboard .safety-suggestion-row:hover {
    background: rgba(14, 165, 233, 0.06);
  }
  #page-safety-dashboard .safety-suggestion-row.is-selected {
    background: rgba(14, 165, 233, 0.12);
    border-left: 3px solid var(--accent-primary, #0ea5e9);
    padding-left: calc(1rem - 3px);
  }
  #page-safety-dashboard .safety-suggestions-detail {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary, rgba(148, 163, 184, 0.06));
  }
  #page-safety-dashboard .safety-suggestions-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-align: center;
    padding: 0.5rem 0;
  }
  #page-safety-dashboard .safety-suggestions-search {
    min-width: min(100%, 220px);
    flex: 1 1 180px;
    max-width: 320px;
  }
    .page-header {
      margin-bottom: 1.25rem;
    }

    .page-title {
      font-size: 1.75rem;
      font-weight: 600;
      margin-bottom: 0.35rem;
    }

    .page-subtitle {
      color: var(--text-secondary);
    }

    /* Stats Grid */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .stat-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.25rem;
      transition: transform 0.2s, border-color 0.2s;
      display: flex;
      flex-direction: column;
      container-type: inline-size;
      container-name: card;
    }

    .stat-card:hover {
      transform: translateY(-2px);
      border-color: var(--accent-primary);
    }

    .stat-label {
      font-size: 0.875rem;
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
    }

    .stat-value {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 0.25rem;
    }

    .stat-description {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    .stat-card.danger .stat-value {
      color: var(--danger);
    }

    .stat-card.warning .stat-value {
      color: var(--warning);
    }

    .stat-card.success .stat-value {
      color: var(--success);
    }

    /* ===== Dashboard home — fleet overview redesign ===== */
    #page-dashboard .page-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1.5rem;
    }
    #page-dashboard .dash-date-chip {
      font-size: 0.78rem;
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      padding: 0.4rem 0.85rem;
      border-radius: 999px;
      white-space: nowrap;
    }
    #page-dashboard .stats-grid {
      grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    #page-dashboard .stat-card {
      padding: 1.1rem 1.25rem;
      border-radius: 14px;
    }
    #page-dashboard .stat-label {
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-muted);
    }
    #page-dashboard .stat-value {
      font-size: 2.1rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.15;
    }
    #page-dashboard .stat-chip,
    .dash-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.72rem;
      font-weight: 600;
      padding: 0.18rem 0.6rem;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.14);
      color: var(--text-secondary);
      white-space: nowrap;
    }
    /* Stat chip: no pill bubble — just plain small text */
    #page-dashboard .stat-chip {
      margin-top: 0.4rem;
      align-self: flex-start;
      white-space: normal;
      background: none !important;
      padding: 0;
      border-radius: 0;
      font-weight: 500;
      opacity: 0.75;
      color: inherit;
    }
    /* Colour the full mini-card background instead */
    #page-dashboard .stat-card.success { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.25); }
    #page-dashboard .stat-card.warning { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); }
    #page-dashboard .stat-card.danger  { background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.25); }
    #page-dashboard .stat-card.info    { background: rgba(14,165,233,0.10); border-color: rgba(14,165,233,0.25); }
    .dash-pill.success { background: rgba(34, 197, 94, 0.15); color: var(--success); }
    .dash-pill.warning { background: rgba(245, 158, 11, 0.16); color: var(--warning); }
    .dash-pill.danger  { background: rgba(239, 68, 68, 0.15);  color: var(--danger); }
    .dash-pill.info    { background: rgba(14, 165, 233, 0.15); color: var(--accent-primary); }
    .dash-duo-grid {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .dash-duty-maint-row {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }
    .dash-on-duty-card .card-header {
      padding: 0.65rem 1rem;
    }
    .dash-on-duty-card .card-body {
      padding: 0.75rem 1rem;
    }
    .dash-on-duty-card .card-title {
      font-size: 0.95rem;
    }
    .dash-on-duty-compact {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.65rem 1rem;
    }
    .dash-on-duty-primary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.4rem 0.65rem;
      min-width: 0;
    }
    .dash-on-duty-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      background: rgba(34, 197, 94, 0.15);
      color: var(--success);
    }
    .dash-on-duty-name {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text-primary);
    }
    .dash-on-duty-phone {
      font-size: 0.8125rem;
      color: var(--accent-primary);
      text-decoration: none;
    }
    .dash-on-duty-phone:hover {
      text-decoration: underline;
    }
    .dash-on-duty-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
    }
    .dash-on-duty-actions .form-input {
      min-width: 9rem;
      max-width: 11rem;
      padding: 0.35rem 0.5rem;
      font-size: 0.8125rem;
      min-height: 2rem;
    }
    .dash-on-duty-manage {
      font-size: 0.75rem;
      color: var(--accent-primary);
      text-decoration: none;
      white-space: nowrap;
    }
    .dash-on-duty-empty,
    .dash-on-duty-warning {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      margin: 0;
    }
    .dash-on-duty-warning {
      color: var(--warning);
      margin-bottom: 0.5rem;
    }
    .dash-on-duty-setup {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.75rem;
    }
    .dash-on-duty-setup .form-input {
      min-width: 10rem;
      max-width: 14rem;
      padding: 0.35rem 0.5rem;
      font-size: 0.8125rem;
      min-height: 2rem;
    }
    @media (max-width: 1024px) {
      .dash-duo-grid { grid-template-columns: 1fr; }
    }
    .dash-card-sub {
      display: block;
      font-size: 0.75rem;
      font-weight: 400;
      color: var(--text-muted);
      margin-top: 0.2rem;
    }
    .dash-chart-wrap svg,
    .dash-map-wrap svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .dash-map-wrap {
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      height: 290px;
      position: relative;
      cursor: pointer;
      /* Contain Leaflet pane z-index (400–1000) so the map never paints over sticky headers */
      isolation: isolate;
      z-index: 0;
    }
    .dash-map-wrap .leaflet-container {
      width: 100%;
      height: 100%;
      font: inherit;
      background: var(--bg-secondary);
      z-index: 0;
    }
    .dash-map-wrap .leaflet-pane,
    .dash-map-wrap .leaflet-top,
    .dash-map-wrap .leaflet-bottom,
    #my-dashboard-cards .dc-map-leaflet .leaflet-pane,
    #my-dashboard-cards .dc-map-leaflet .leaflet-top,
    #my-dashboard-cards .dc-map-leaflet .leaflet-bottom {
      z-index: auto;
    }
    /* Leaflet 1.9+ embeds a Ukraine flag in the default attribution prefix */
    .leaflet-attribution-flag {
      display: none !important;
    }
    .dc-map-vessel-label,
    .leaflet-tooltip.dc-map-vessel-label {
      background: rgba(15, 23, 42, 0.88);
      color: #f8fafc;
      border: 1px solid rgba(148, 163, 184, 0.35);
      border-radius: 4px;
      padding: 2px 6px;
      font-size: 11px;
      font-weight: 600;
      box-shadow: none;
      white-space: nowrap;
    }
    .dc-map-vessel-label::before,
    .leaflet-tooltip.dc-map-vessel-label::before {
      border-top-color: rgba(15, 23, 42, 0.88);
    }
    .dash-map-wrap .dash-map-marker {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.22);
    }
    .dash-map-wrap .dash-map-marker--port {
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22);
    }
    .dash-map-wrap .dash-map-marker--sea {
      background: #0ea5e9;
    }
    .marpol-legend {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      font-size: 0.75rem;
      line-height: 1.3;
    }
    .marpol-legend--compact {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    .marpol-legend-item {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin: 0;
      cursor: pointer;
      user-select: none;
    }
    .marpol-legend-item input {
      margin: 0;
      accent-color: #38bdf8;
    }
    .marpol-legend-note {
      margin: 0.35rem 0 0;
      font-size: 0.68rem;
      color: rgba(226, 232, 240, 0.78);
      font-weight: 400;
    }
    .marpol-swatch {
      width: 0.65rem;
      height: 0.65rem;
      border-radius: 999px;
      display: inline-block;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
    }
    .marpol-swatch--oil { background: #f59e0b; }
    .marpol-swatch--air { background: #38bdf8; }
    .marpol-swatch--sewage { background: #a78bfa; }
    .marpol-map-tooltip {
      position: absolute;
      z-index: 40;
      max-width: 16.5rem;
      padding: 0.4rem 0.55rem;
      border-radius: 6px;
      background: rgba(15, 23, 42, 0.94);
      color: #f8fafc;
      border: 1px solid rgba(148, 163, 184, 0.35);
      font-size: 0.72rem;
      line-height: 1.35;
      pointer-events: none;
      box-shadow: 0 8px 20px rgba(2, 6, 23, 0.35);
    }
    .marpol-map-tooltip[hidden] { display: none !important; }
    .marpol-map-tooltip-row {
      display: flex;
      align-items: flex-start;
      gap: 0.35rem;
    }
    .marpol-map-tooltip-row + .marpol-map-tooltip-row {
      margin-top: 0.28rem;
    }
    #my-dashboard-cards .dc-map-dot--oil { background: #f59e0b; }
    #my-dashboard-cards .dc-map-dot--air { background: #38bdf8; }
    #my-dashboard-cards .dc-map-dot--sewage { background: #a78bfa; }
    .dash-fleet-map-legend {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
      margin-top: 0.45rem;
      font-size: 0.72rem;
      color: var(--text-secondary);
    }
    .dash-fleet-map-legend span {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    .dash-fleet-map-legend .marpol-legend {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .dash-fleet-map-legend .marpol-legend-note { display: none; }
    .dash-map-sea { fill: var(--bg-secondary); }
    .dash-map-grid { stroke: var(--border-color); stroke-width: 1; opacity: 0.55; }
    .dash-map-label { fill: var(--text-secondary); font-size: 11px; font-weight: 600; }
    .dash-chart-bar-label { fill: var(--text-secondary); font-size: 11.5px; }
    .dash-chart-bar-count { fill: var(--text-muted); font-size: 11px; }
    .dash-chart-track { fill: rgba(148, 163, 184, 0.12); }
    .dash-attention-card { margin-bottom: 1.5rem; }
    .dash-attention-scroll { overflow-x: auto; }
    .dash-attention-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
      min-width: 560px;
    }
    .dash-attention-table th {
      text-align: left;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-size: 0.66rem;
      font-weight: 600;
      color: var(--text-muted);
      padding: 0.35rem 0.75rem 0.6rem;
      border-bottom: 1px solid var(--border-color);
    }
    .dash-attention-table td {
      padding: 0.7rem 0.75rem;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-secondary);
      vertical-align: middle;
    }
    .dash-attention-table tbody tr:last-child td { border-bottom: none; }
    .dash-attention-table tbody tr { cursor: pointer; transition: background 0.15s; }
    .dash-attention-table tbody tr:hover { background: rgba(14, 165, 233, 0.06); }
    .dash-attention-table .dash-att-where {
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
    }
    .dash-attention-empty {
      text-align: center;
      color: var(--text-secondary);
      padding: 1.5rem 1rem;
      font-size: 0.875rem;
    }
    .dash-legend {
      display: inline-flex;
      align-items: center;
      gap: 0.9rem;
      font-size: 0.72rem;
      color: var(--text-muted);
    }
    .dash-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
    .dash-legend i {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      display: inline-block;
    }

    /* Fleet position — compact metrics beside map */
    #page-vessel-calendar.page {
      overflow-x: clip;
      overflow-y: visible;
    }
    #page-vessel-calendar > .page-header {
      margin-bottom: 0.45rem;
      gap: 0.5rem;
      align-items: center;
    }
    #page-vessel-calendar > .page-header .page-title {
      font-size: 1.35rem;
      margin-bottom: 0.1rem;
    }
    #page-vessel-calendar > .page-header .page-subtitle {
      font-size: 0.8rem;
      margin: 0;
      line-height: 1.35;
    }
    #page-vessel-calendar {
      --vcal-sticky-head-height: 0px;
      --calendar-cargo: #0284c7;
      --calendar-crew-change: #f59e0b;
      --calendar-crew-planned: #16a34a;
      --calendar-crew-blocked: #64748b;
      --calendar-leave: #7c3aed;
      --calendar-holiday: #d97706;
      --calendar-sea: rgba(2, 132, 199, 0.14);
      --calendar-today: var(--accent-primary, #0ea5e9);
      --cs-deployment: #8B2635;
      --cs-training: #0ea5e9;
      --cs-overtime: #f59e0b;
      --cs-availability: #14b8a6;
      --cs-holiday: #a855f7;
      --cs-port: #0d9488;
    }
    #page-vessel-calendar .vcal-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;
    }
    @media (min-width: 1100px) {
      #page-vessel-calendar.vcal-has-detail .vcal-shell {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
        align-items: start;
      }
    }
    #page-vessel-calendar .vcal-sticky-head {
      position: sticky;
      top: var(--dashboard-sticky-top, 0px);
      z-index: 40;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0.45rem;
      background: var(--bg-primary);
      padding-bottom: 0.4rem;
      margin-bottom: 0.4rem;
      box-shadow: 0 1px 0 var(--border-color);
    }
    #page-vessel-calendar .vcal-toolbar {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.5rem;
      align-items: center;
      margin-bottom: 0;
      padding: 0.35rem 0.5rem;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      background: var(--bg-secondary);
      min-width: 0;
      width: 100%;
      flex: 0 0 auto;
    }
    #page-vessel-calendar .vcal-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin: 0;
      align-items: center;
      width: 100%;
      flex: 0 0 auto;
    }
    #page-vessel-calendar .vcal-legend-label {
      font-size: 0.7rem;
      color: var(--text-muted);
      font-weight: 500;
      margin-right: 0.15rem;
    }
    #page-vessel-calendar .vcal-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.2rem 0.6rem 0.2rem 0.45rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-secondary);
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
    }
    #page-vessel-calendar .vcal-chip-swatch {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    #page-vessel-calendar .vcal-chip-swatch--port {
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
    }
    #page-vessel-calendar .vcal-chip-swatch--sea {
      background: repeating-linear-gradient(-45deg, rgba(2,132,199,0.25), rgba(2,132,199,0.25) 3px, rgba(2,132,199,0.45) 3px, rgba(2,132,199,0.45) 6px);
    }
    #page-vessel-calendar .vcal-chip-swatch--voyage {
      background: linear-gradient(135deg, rgba(14,165,233,0.55), rgba(14,165,233,0.25));
      border: 1px solid rgba(14,165,233,0.45);
    }
    #page-vessel-calendar .vcal-chip-swatch--repositioning {
      background: linear-gradient(135deg, rgba(100,116,139,0.55), rgba(100,116,139,0.22));
      border: 1px solid rgba(100,116,139,0.45);
    }
    #page-vessel-calendar .vcal-chip-swatch--possible {
      background: linear-gradient(135deg, #fbbf24, #d97706);
    }
    #page-vessel-calendar .vcal-chip-swatch--planned {
      background: linear-gradient(135deg, #34d399, #059669);
    }
    #page-vessel-calendar .vcal-chip-swatch--blocked {
      background: linear-gradient(135deg, #94a3b8, #64748b);
    }
    #page-vessel-calendar .vcal-chip-swatch--gap { background: rgba(239, 68, 68, 0.45); }
    #page-vessel-calendar .vcal-chip-swatch--assigned { background: #3b82f6; }
    #page-vessel-calendar .vcal-chip-swatch--overtime { background: rgba(249, 115, 22, 0.9); }
    #page-vessel-calendar .vcal-chip-swatch--leave { background: var(--calendar-leave); }
    #page-vessel-calendar .vcal-chip-swatch--holiday { background: var(--calendar-holiday); }
    #page-vessel-calendar .vcal-view-toggle {
      display: inline-flex;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      overflow: hidden;
      background: var(--bg-primary);
    }
    #page-vessel-calendar .vcal-view-toggle button {
      border: none;
      background: transparent;
      padding: 0.38rem 0.72rem;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      color: var(--text-secondary);
      transition: background 0.15s ease, color 0.15s ease;
      white-space: nowrap;
    }
    #page-vessel-calendar .vcal-view-toggle button:hover {
      color: var(--text-primary);
      background: rgba(14, 165, 233, 0.08);
    }
    #page-vessel-calendar .vcal-view-toggle button.active {
      background: var(--accent-gradient, var(--primary));
      color: #fff;
    }
    #page-vessel-calendar .vcal-nav-group {
      display: inline-flex;
      align-items: center;
      gap: 0;
      margin-left: auto;
      flex-shrink: 0;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-primary);
      overflow: hidden;
    }
    #page-vessel-calendar .vcal-month-nav-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 30px;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s ease, color 0.15s ease;
    }
    #page-vessel-calendar .vcal-month-nav-btn:hover {
      background: rgba(14, 165, 233, 0.08);
      color: var(--primary);
    }
    #page-vessel-calendar .vcal-month-nav-btn svg {
      width: 14px;
      height: 14px;
      display: block;
    }
    #page-vessel-calendar .vcal-month-picker {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      border-left: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
      padding: 0 0.15rem;
      min-width: 0;
      cursor: pointer;
    }
    #page-vessel-calendar .vcal-month-input {
      width: 6.75rem;
      max-width: 6.75rem;
      padding: 0.28rem 0.4rem;
      margin: 0;
      border: none;
      background: transparent;
      color: var(--text-primary);
      font-family: inherit;
      font-size: 0.78rem;
      font-weight: 600;
      line-height: 1.2;
      cursor: pointer;
      box-shadow: none;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
    }
    #page-vessel-calendar .vcal-month-input:hover,
    #page-vessel-calendar .vcal-month-input:focus {
      background: rgba(14, 165, 233, 0.06);
    }
    #page-vessel-calendar .vcal-month-input::-webkit-calendar-picker-indicator {
      display: none;
      -webkit-appearance: none;
    }
    #page-vessel-calendar .vcal-month-input::-moz-calendar-picker-indicator {
      display: none;
    }
    #page-vessel-calendar .vcal-month-input--off-today {
      color: var(--primary);
    }
    #page-vessel-calendar .vcal-month-range-hint {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--text-muted);
      white-space: nowrap;
      padding-right: 0.2rem;
    }
    #page-vessel-calendar .vcal-empty {
      text-align: center;
      padding: 2.5rem 1.5rem;
      border: 1px dashed var(--border-color);
      border-radius: 14px;
      background: var(--bg-secondary);
    }
    #page-vessel-calendar .vcal-empty h3 {
      margin: 0 0 0.4rem;
      font-size: 1.05rem;
    }
    #page-vessel-calendar .vcal-empty p {
      margin: 0 auto 1rem;
      color: var(--text-secondary);
      font-size: 0.875rem;
      max-width: 28rem;
    }
    #page-vessel-calendar .vcal-empty-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: center;
    }

    /* ── Ops (vessel) Gantt view ──────────────────────────── */
    #page-vessel-calendar .vcal-ops-scroll {
      overflow-x: auto;
      overflow-y: clip;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      background: var(--bg-primary);
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
    #page-vessel-calendar .vcal-ops-table {
      border-collapse: separate;
      border-spacing: 0;
      min-width: 100%;
      width: max-content;
    }
    #page-vessel-calendar .vcal-ops-table thead {
      position: sticky;
      top: 0;
      z-index: 28;
      background: var(--bg-primary);
      box-shadow: 0 1px 0 var(--border-color);
    }
    #page-vessel-calendar .vcal-ops-table thead th,
    #page-vessel-calendar .vcal-ops-table thead td {
      background: var(--bg-primary);
    }
    @media (min-width: 900px) {
      #page-vessel-calendar .vcal-ops-scroll--1mo {
        overflow-x: auto;
      }
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-ops-table {
        width: 100%;
        min-width: 100%;
        table-layout: fixed;
      }
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-ops-label {
        width: 18%;
        max-width: 18%;
        min-width: 0;
      }
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-gantt-cell {
        width: 82%;
      }
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-ops-day-header,
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-ops-port-strip,
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-gantt-track--ops,
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-gantt-bar-layer {
        grid-template-columns: repeat(var(--vcal-days), minmax(0, 1fr));
      }
    }
    @media (max-width: 899px) {
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-ops-table {
        width: max-content;
        min-width: 100%;
      }
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-ops-day-header,
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-ops-port-strip,
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-gantt-track--ops,
      #page-vessel-calendar .vcal-ops-scroll--1mo .vcal-gantt-bar-layer {
        grid-template-columns: repeat(var(--vcal-days), 28px);
      }
    }
    #page-vessel-calendar .vcal-ops-table th,
    #page-vessel-calendar .vcal-ops-table td {
      border: none;
      vertical-align: top;
    }
    #page-vessel-calendar .vcal-ops-table thead tr {
      border-bottom: 1px solid var(--border-color);
    }
    #page-vessel-calendar .vcal-ops-table tbody tr {
      border-bottom: 1px solid var(--border-color);
    }
    #page-vessel-calendar .vcal-ops-table tbody tr:last-child {
      border-bottom: none;
    }
    #page-vessel-calendar .vcal-ops-label {
      position: sticky;
      left: 0;
      z-index: 3;
      background: var(--bg-card, var(--bg-primary));
      min-width: 128px;
      max-width: 160px;
      width: 148px;
      padding: 6px 8px;
      font-size: 0.72rem;
      font-weight: 600;
      border-right: 1px solid var(--border-color);
    }
    #page-vessel-calendar .vcal-ops-voyage-head {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
      min-width: 0;
    }
    #page-vessel-calendar .vcal-ops-voyage-title-row {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      min-width: 0;
    }
    #page-vessel-calendar .vcal-ops-voyage-name {
      flex: 1;
      font-weight: 700;
      font-size: 0.74rem;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      min-width: 0;
    }
    #page-vessel-calendar .vcal-ops-voyage-name > span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    #page-vessel-calendar .vcal-ops-voyage-swatch {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
    }
    #page-vessel-calendar .vcal-ops-voyage-dates {
      font-weight: 400;
      font-size: 0.62rem;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.25;
    }
    #page-vessel-calendar .vcal-ops-voyage-edit {
      flex-shrink: 0;
      margin: 0;
      padding: 0.05rem 0.3rem;
      font-size: 0.62rem;
      line-height: 1.3;
      min-height: 0;
    }

    /* Day header row */
    #page-vessel-calendar .vcal-ops-day-header {
      display: grid;
      min-height: 38px;
    }
    #page-vessel-calendar .vcal-ops-day-head-cell {
      text-align: center;
      padding: 4px 1px 3px;
      font-size: 0.62rem;
      color: var(--text-muted);
      font-weight: 600;
      line-height: 1.3;
      border-right: 1px solid rgba(128,128,128,0.1);
    }
    #page-vessel-calendar .vcal-ops-day-head-cell--weekend {
      background: rgba(0,0,0,0.025);
      color: var(--text-secondary);
    }
    #page-vessel-calendar .vcal-ops-day-head-cell--today {
      background: rgba(14,165,233,0.1);
      color: var(--calendar-today);
      font-weight: 800;
      border-right: 1px solid rgba(14,165,233,0.35);
    }
    #page-vessel-calendar .vcal-ops-day-head-cell--today strong {
      color: var(--calendar-today);
    }

    /* Port strip (compact summary row) */
    #page-vessel-calendar .vcal-ops-port-strip {
      display: grid;
      min-height: 22px;
    }
    #page-vessel-calendar .vcal-ops-port-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid rgba(128,128,128,0.1);
      padding: 2px 0;
    }
    #page-vessel-calendar .vcal-ops-port-cell--today {
      background: rgba(14,165,233,0.08);
      border-right: 1px solid rgba(14,165,233,0.35);
    }
    #page-vessel-calendar .vcal-ops-port-dot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      font-size: 0.62rem;
      line-height: 1;
    }
    #page-vessel-calendar .vcal-ops-port-dot--cargo   { background: var(--calendar-cargo); color: #fff; }
    #page-vessel-calendar .vcal-ops-port-dot--possible { background: var(--calendar-crew-change); color: #fff; }
    #page-vessel-calendar .vcal-ops-port-dot--planned  { background: var(--calendar-crew-planned); color: #fff; }
    #page-vessel-calendar .vcal-ops-port-dot--blocked  { background: var(--calendar-crew-blocked); color: #fff; }

    /* Ops gantt track — fill full row height (label column often taller) */
    #page-vessel-calendar .vcal-ops-table tbody td.vcal-gantt-cell {
      vertical-align: top;
      min-height: 44px;
    }
    #page-vessel-calendar .vcal-gantt-track--ops {
      position: absolute;
      inset: 0;
      width: 100%;
      min-height: 44px;
      height: 100%;
      align-items: stretch;
    }
    #page-vessel-calendar .vcal-gantt-track--ops > .vcal-gantt-day-hit {
      min-height: 100%;
      height: auto;
      align-self: stretch;
    }

    /* Voyage day cells: filled boxes in the grid (no overlay band) */
    #page-vessel-calendar .vcal-gantt-track--ops .vcal-gantt-day-hit--voyage {
      background-color: var(--vcal-voyage-bg, rgba(14, 165, 233, 0.22));
      box-shadow: inset 0 0 0 1px var(--vcal-voyage-border, rgba(14, 165, 233, 0.28));
    }
    #page-vessel-calendar .vcal-gantt-track--ops .vcal-gantt-day-hit--voyage.vcal-gantt-day-hit--weekend {
      background-color: var(--vcal-voyage-bg, rgba(14, 165, 233, 0.22));
      background-image: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
    }
    #page-vessel-calendar .vcal-gantt-day-hit--sea {
      background-image: repeating-linear-gradient(
        -45deg,
        rgba(2, 132, 199, 0.07),
        rgba(2, 132, 199, 0.07) 4px,
        rgba(2, 132, 199, 0.15) 4px,
        rgba(2, 132, 199, 0.15) 8px
      );
      background-color: rgba(2, 132, 199, 0.06);
    }
    #page-vessel-calendar .vcal-gantt-track--ops .vcal-gantt-day-hit--voyage.vcal-gantt-day-hit--sea {
      background-color: var(--vcal-voyage-bg, rgba(14, 165, 233, 0.22));
      background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(2, 132, 199, 0.16) 4px,
        rgba(2, 132, 199, 0.16) 8px
      );
      box-shadow: inset 0 0 0 1px var(--vcal-voyage-border, rgba(14, 165, 233, 0.28));
    }
    #page-vessel-calendar .vcal-gantt-day-hit--today {
      box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.45);
      border-right: 1px solid rgba(14, 165, 233, 0.4) !important;
    }
    #page-vessel-calendar .vcal-gantt-day-hit--today:not(.vcal-gantt-day-hit--voyage):not(.vcal-gantt-day-hit--sea) {
      background: rgba(14, 165, 233, 0.09) !important;
    }

    /* Ops port-stay bars — fill full voyage row height (match crewing assignment bars) */
    #page-vessel-calendar .vcal-ops-stay-bar {
      display: flex;
      align-items: center;
      gap: 4px;
      margin: 0;
      padding: 0 7px;
      border-radius: 0;
      font-size: 0.72rem;
      font-weight: 600;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      cursor: pointer;
      pointer-events: auto;
      position: relative;
      z-index: 2;
      height: 100%;
      min-height: 26px;
      max-height: none;
      align-self: stretch;
      transition: filter 0.12s ease;
      box-shadow: inset -1px 0 0 rgba(0,0,0,0.12), inset 1px 0 0 rgba(0,0,0,0.12);
    }
    #page-vessel-calendar .vcal-ops-stay-bar:hover {
      filter: brightness(1.1);
    }
    #page-vessel-calendar .vcal-ops-stay-bar--cargo {
      background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    }
    #page-vessel-calendar .vcal-ops-stay-bar--possible {
      background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    }
    #page-vessel-calendar .vcal-ops-stay-bar--planned {
      background: linear-gradient(135deg, #4ade80 0%, #15803d 100%);
    }
    #page-vessel-calendar .vcal-ops-stay-bar--blocked {
      background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    }
    #page-vessel-calendar .vcal-ops-port-name {
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    /* Legacy fleet-overview cell colours (kept for fleet overview table) */
    #page-vessel-calendar .vcal-calendar-wrap {
      overflow-x: auto;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-primary);
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    #page-vessel-calendar .vcal-grid table {
      border-collapse: collapse;
      width: 100%;
      min-width: 720px;
    }
    #page-vessel-calendar .vcal-grid th,
    #page-vessel-calendar .vcal-grid td {
      border: 1px solid var(--border-color);
      vertical-align: top;
      font-size: 0.7rem;
    }
    #page-vessel-calendar .vcal-grid .vcal-row-label {
      min-width: 160px;
      padding: 6px 8px;
      font-weight: 600;
      font-size: 0.75rem;
      background: var(--bg-secondary);
      position: sticky;
      left: 0;
      z-index: 2;
    }
    #page-vessel-calendar .vcal-day-head {
      text-align: center;
      padding: 2px;
      min-width: 26px;
      color: var(--text-secondary);
    }
    #page-vessel-calendar .vcal-day-num {
      text-align: center;
      padding: 2px;
      font-weight: 600;
      min-width: 26px;
    }
    #page-vessel-calendar .vcal-cell {
      height: 36px;
      min-width: 26px;
      padding: 0;
      position: relative;
      vertical-align: middle;
    }
    #page-vessel-calendar .vcal-cell--today {
      box-shadow: inset 0 -3px 0 var(--calendar-today);
    }
    #page-vessel-calendar .vcal-day-num.vcal-day-num--today {
      color: var(--calendar-today);
      font-weight: 800;
    }
    #page-vessel-calendar .vcal-cell--in-port-cargo {
      background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
    }
    #page-vessel-calendar .vcal-cell--in-port-crew {
      background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
    }
    #page-vessel-calendar .vcal-cell--in-port-planned {
      background: linear-gradient(180deg, #34d399 0%, #059669 100%);
    }
    #page-vessel-calendar .vcal-cell--in-port-blocked {
      background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    }
    #page-vessel-calendar .vcal-cell--voyage-span {
      background: rgba(2, 132, 199, 0.12);
    }
    #page-vessel-calendar .vcal-cell--voyage-sea {
      background: repeating-linear-gradient(
        -45deg,
        rgba(2, 132, 199, 0.08),
        rgba(2, 132, 199, 0.08) 5px,
        rgba(2, 132, 199, 0.18) 5px,
        rgba(2, 132, 199, 0.18) 10px
      );
    }
    #page-vessel-calendar .vcal-bar--assignment { background: #3b82f6; color: #eff6ff; }
    #page-vessel-calendar .vcal-bar--leave { background: var(--calendar-leave); }
    #page-vessel-calendar .vcal-bar--holiday {
      background: repeating-linear-gradient(-45deg, var(--calendar-holiday), var(--calendar-holiday) 4px, #d97706 4px, #d97706 8px);
    }
    #page-vessel-calendar .vcal-port-marker {
      background: rgba(59, 130, 246, 0.45);
    }
    #page-vessel-calendar .vcal-port-marker--crew-change {
      background: rgba(20, 184, 166, 0.55);
    }
    #page-vessel-calendar .vcal-detail-panel {
      margin-top: 0;
      padding: 0;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      background: var(--bg-card, var(--bg-secondary));
      display: none;
      position: sticky;
      z-index: 20;
      top: calc(var(--dashboard-sticky-top, 0px) + var(--vcal-sticky-head-height, 0px) + 0.5rem);
      max-height: calc(100vh - var(--dashboard-sticky-top, 0px) - var(--vcal-sticky-head-height, 0px) - 1.25rem);
      max-height: calc(100dvh - var(--dashboard-sticky-top, 0px) - var(--vcal-sticky-head-height, 0px) - 1.25rem);
      overflow: auto;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }
    #page-vessel-calendar .vcal-detail-inner {
      padding: 1rem 1.1rem 1.15rem;
      container-type: inline-size;
      container-name: vcal-detail;
    }
    #page-vessel-calendar .vcal-detail-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }
    #page-vessel-calendar .vcal-detail-heading {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem 0.55rem;
      min-width: 0;
      flex: 1;
    }
    #page-vessel-calendar .vcal-detail-title {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.25;
      min-width: 0;
      flex: 1 1 8rem;
    }
    #page-vessel-calendar .vcal-detail-heading-badge {
      flex: 0 0 auto;
    }
    #page-vessel-calendar .vcal-detail-meta {
      margin: 0 0 0.75rem;
      font-size: 0.8125rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }
    #page-vessel-calendar .vcal-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.18rem 0.5rem;
      border-radius: 999px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    #page-vessel-calendar .vcal-badge--possible {
      background: rgba(13, 148, 136, 0.15);
      color: #0f766e;
    }
    #page-vessel-calendar .vcal-badge--planned {
      background: rgba(5, 150, 105, 0.16);
      color: #047857;
    }
    #page-vessel-calendar .vcal-badge--blocked {
      background: rgba(100, 116, 139, 0.18);
      color: #475569;
    }
    #page-vessel-calendar .vcal-badge--port {
      background: rgba(2, 132, 199, 0.14);
      color: #0369a1;
    }
    #page-vessel-calendar .vcal-detail-section {
      margin-top: 0.9rem;
      padding-top: 0.85rem;
      border-top: 1px solid var(--border-color);
    }
    #page-vessel-calendar .vcal-detail-section h4 {
      margin: 0 0 0.45rem;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }
    #page-vessel-calendar .vcal-detail-section--flush {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }
    #page-vessel-calendar .vcal-detail-section-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-items: safe center;
      gap: 0.35rem 0.5rem;
      margin-bottom: 0.45rem;
    }
    #page-vessel-calendar .vcal-detail-section-head h4 {
      margin: 0;
    }
    #page-vessel-calendar .vcal-detail-section-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.4rem;
      margin-inline-start: auto;
    }
    #page-vessel-calendar .vcal-detail-section .vcal-detail-meta:last-child {
      margin-bottom: 0;
    }
    #page-vessel-calendar .vcal-detail-help {
      margin-left: 0;
      text-transform: none;
      letter-spacing: normal;
      flex-shrink: 0;
    }
    #page-vessel-calendar .vcal-detail-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #page-vessel-calendar .vcal-detail-list li {
      display: flex;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.4rem 0;
      font-size: 0.8125rem;
      border-bottom: 1px solid rgba(128,128,128,0.12);
    }
    #page-vessel-calendar .vcal-detail-list li:last-child { border-bottom: none; }
    #page-vessel-calendar .vcal-detail-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 1rem;
    }
    #page-vessel-calendar .vcal-detail-actions--secondary {
      margin-top: 0.5rem;
    }
    #page-vessel-calendar .vcal-detail-disclosure {
      margin-top: 0.9rem;
      padding-top: 0.85rem;
      border-top: 1px solid var(--border-color);
    }
    #page-vessel-calendar .vcal-detail-disclosure summary {
      cursor: pointer;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      list-style: none;
    }
    #page-vessel-calendar .vcal-detail-disclosure summary::-webkit-details-marker {
      display: none;
    }
    #page-vessel-calendar .vcal-detail-disclosure summary::before {
      content: "▸ ";
    }
    #page-vessel-calendar .vcal-detail-disclosure[open] summary::before {
      content: "▾ ";
    }
    #page-vessel-calendar .vcal-voyage-leg--focus {
      outline: 2px solid var(--accent-primary, #0ea5e9);
      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22);
    }
    #page-vessel-calendar .vcal-gantt-day-hit--add-stay {
      cursor: pointer;
    }
    #page-vessel-calendar .vcal-gantt-day-hit--add-stay:hover {
      filter: brightness(1.08);
    }
    #page-vessel-calendar .vcal-ops-port-cell--add-stay {
      cursor: pointer;
    }
    #page-vessel-calendar .vcal-ops-port-cell--add-stay:hover {
      background: rgba(14, 165, 233, 0.12);
    }
    .vcal-cascade-note {
      margin: 0.65rem 0 0;
      padding: 0.55rem 0.65rem;
      border-radius: 8px;
      background: rgba(14, 165, 233, 0.1);
      border: 1px solid rgba(14, 165, 233, 0.25);
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.35;
    }
    #page-vessel-calendar #vcal-warnings:empty,
    #page-vessel-calendar #vcal-page-error:empty {
      display: none;
    }
    #page-vessel-calendar .vcal-alert {
      display: flex;
      gap: 0.55rem;
      align-items: flex-start;
      padding: 0.55rem 0.75rem;
      border-radius: 10px;
      font-size: 0.8125rem;
      margin-bottom: 0.4rem;
      border: 1px solid transparent;
    }
    #page-vessel-calendar .vcal-alert--warn {
      background: rgba(245, 158, 11, 0.12);
      border-color: rgba(245, 158, 11, 0.35);
      color: var(--text-primary);
    }
    #page-vessel-calendar .vcal-alert--info {
      background: rgba(14, 165, 233, 0.1);
      border-color: rgba(14, 165, 233, 0.28);
      color: var(--text-primary);
    }
    #page-vessel-calendar .vcal-fleet-gap-row td.vcal-row-label {
      border-left: 3px solid #ef4444;
    }
    #page-vessel-calendar #vcal-crewing-assign-panel {
      margin-bottom: 0.85rem;
      padding: 0.75rem 0.85rem;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-secondary);
    }
    #page-vessel-calendar #vcal-fleet-overview-btn.active {
      background: var(--accent-primary);
      color: #fff;
      border-color: transparent;
    }
    #page-vessel-calendar .vcal-crewing-toolbar {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.35rem;
      align-items: center;
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
    }
    #page-vessel-calendar .vcal-crewing-toolbar .form-input {
      min-width: 0;
      flex: 1 1 0;
      max-width: 8.5rem;
      padding: 0.24rem 0.4rem !important;
      font-size: 0.76rem !important;
    }
    @media (max-width: 900px) {
      #page-vessel-calendar .vcal-view-toggle button {
        padding: 0.32rem 0.55rem;
        font-size: 0.74rem;
      }
      #page-vessel-calendar .vcal-month-input {
        width: 6rem;
        max-width: 6rem;
        font-size: 0.74rem;
      }
      #page-vessel-calendar .vcal-crewing-toolbar .form-input {
        max-width: 7.25rem;
      }
    }
    #page-vessel-calendar .vcal-crewing-scroll {
      overflow-x: auto;
      overflow-y: clip;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-primary);
    }
    #page-vessel-calendar .vcal-gantt-track--fluid,
    #page-vessel-calendar .vcal-gantt-bar-layer--fluid {
      grid-template-columns: repeat(var(--vcal-days), minmax(0, 1fr));
    }
    @media (min-width: 900px) {
      #page-vessel-calendar .vcal-crewing-scroll--1mo {
        overflow-x: auto;
      }
      #page-vessel-calendar .vcal-crewing-scroll--1mo .vcal-crewing-table {
        width: 100%;
        min-width: 100%;
        table-layout: fixed;
      }
      #page-vessel-calendar .vcal-crewing-scroll--1mo .vcal-crewing-sticky {
        width: 30%;
        max-width: 30%;
        min-width: 0;
      }
      #page-vessel-calendar .vcal-crewing-scroll--1mo .vcal-gantt-cell {
        width: 70%;
      }
    }
    @media (max-width: 899px) {
      #page-vessel-calendar .vcal-crewing-scroll--1mo .vcal-gantt-track--fluid,
      #page-vessel-calendar .vcal-crewing-scroll--1mo .vcal-gantt-bar-layer--fluid {
        grid-template-columns: repeat(var(--vcal-days), 28px);
      }
      #page-vessel-calendar .vcal-crewing-scroll--1mo .vcal-crewing-table {
        width: max-content;
        min-width: 100%;
      }
    }
    #page-vessel-calendar .vcal-crewing-table {
      border-collapse: separate;
      border-spacing: 0;
      min-width: 100%;
      width: max-content;
    }
    #page-vessel-calendar .vcal-crewing-table thead {
      position: sticky;
      top: 0;
      z-index: 28;
      background: var(--bg-primary);
      box-shadow: 0 1px 0 var(--border-color);
    }
    #page-vessel-calendar .vcal-crewing-table thead th,
    #page-vessel-calendar .vcal-crewing-table thead td {
      background: var(--bg-primary);
    }
    #page-vessel-calendar .vcal-crewing-table th,
    #page-vessel-calendar .vcal-crewing-table td {
      border: 1px solid var(--border-color);
      vertical-align: top;
    }
    #page-vessel-calendar .vcal-crewing-sticky {
      position: sticky;
      left: 0;
      z-index: 3;
      background: var(--bg-card, var(--bg-primary));
      min-width: 168px;
      max-width: 200px;
      padding: 6px 10px;
      font-size: 0.78rem;
      font-weight: 600;
    }
    /* Ops-style voyage spine in Crewing/Gaps thead */
    #page-vessel-calendar .vcal-crewing-table thead td.vcal-gantt-cell {
      min-height: 44px;
      vertical-align: top;
    }
    #page-vessel-calendar .vcal-crewing-table thead .vcal-gantt-track--ops {
      min-height: 44px;
      height: 100%;
    }
    #page-vessel-calendar .vcal-crewing-table thead .vcal-crewing-sticky .vcal-ops-voyage-head {
      font-weight: 600;
    }
    #page-vessel-calendar .vcal-week-bands {
      display: grid;
      gap: 0;
      min-height: 22px;
    }
    #page-vessel-calendar .vcal-week-band {
      text-align: center;
      font-size: 0.62rem;
      font-weight: 600;
      color: var(--text-muted);
      padding: 3px 4px;
      border-right: 2px solid var(--border-color);
      background: var(--bg-secondary);
      white-space: nowrap;
    }
    #page-vessel-calendar .vcal-gantt-cell {
      padding: 0;
      position: relative;
    }
    #page-vessel-calendar .vcal-gantt-track {
      display: grid;
      position: relative;
      min-height: 34px;
      align-items: stretch;
    }
    #page-vessel-calendar .vcal-gantt-track--tall {
      min-height: 42px;
    }
    #page-vessel-calendar .vcal-gantt-day-hit {
      min-height: 34px;
      border-right: 1px solid rgba(128, 128, 128, 0.12);
      cursor: pointer;
      position: relative;
      z-index: 1;
    }
    /* Weekend tint — Ops voyage tracks only. Crewing billets omit weekend styling so gaps stay red Sat/Sun. */
    #page-vessel-calendar .vcal-gantt-track--ops .vcal-gantt-day-hit.vcal-gantt-day-hit--weekend:not(.vcal-gantt-day-hit--voyage) {
      background: rgba(0, 0, 0, 0.03);
    }
    #page-vessel-calendar .vcal-gantt-day-hit.vcal-gantt-day-hit--selected {
      background: rgba(59, 130, 246, 0.18);
      outline: 1px solid rgba(59, 130, 246, 0.45);
    }
    #page-vessel-calendar .vcal-gantt-day-hit.vcal-gantt-day-hit--gap {
      background: rgba(239, 68, 68, 0.16);
      box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.28);
    }
    #page-vessel-calendar .vcal-gantt-day-hit.vcal-gantt-day-hit--gap.vcal-gantt-day-hit--selected {
      background: rgba(239, 68, 68, 0.28);
      outline: 1px solid rgba(59, 130, 246, 0.55);
    }
    #page-vessel-calendar .vcal-gantt-day-hit.vcal-gantt-day-hit--week-end {
      border-right: 2px solid var(--border-color);
    }
    #page-vessel-calendar .vcal-gantt-bar-layer {
      position: absolute;
      inset: 0;
      display: grid;
      pointer-events: none;
      z-index: 2;
    }
    /* Fine orange line marking the current day on crewing rows. */
    #page-vessel-calendar .vcal-gantt-today-line {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 0;
      border-left: 2px solid rgba(249, 115, 22, 0.9);
      pointer-events: none;
      z-index: 3;
    }
    #page-vessel-calendar .vcal-gantt-bar {
      margin: 3px 1px;
      padding: 2px 5px;
      border-radius: 4px;
      font-size: 0.65rem;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      align-self: center;
      pointer-events: auto;
      cursor: default;
      max-height: 26px;
    }
    /* Assignment / leave / holiday / overtime fill the day squares (full row height). */
    #page-vessel-calendar .vcal-gantt-bar--assignment,
    #page-vessel-calendar .vcal-gantt-bar--overtime,
    #page-vessel-calendar .vcal-gantt-bar--leave,
    #page-vessel-calendar .vcal-gantt-bar--holiday {
      margin: 0;
      border-radius: 0;
      max-height: none;
      align-self: stretch;
      display: flex;
      align-items: center;
      padding: 0 6px;
    }
    #page-vessel-calendar .vcal-gantt-bar--assignment {
      background: #3b82f6;
      color: #eff6ff;
      box-shadow: inset -1px 0 0 rgba(30, 64, 175, 0.35), inset 1px 0 0 rgba(30, 64, 175, 0.35);
    }
    #page-vessel-calendar .vcal-gantt-bar--leave {
      background: var(--calendar-leave);
      color: #fff;
      z-index: 1;
    }
    #page-vessel-calendar .vcal-gantt-bar--holiday {
      background: var(--calendar-holiday);
      color: #111;
      z-index: 1;
    }
    #page-vessel-calendar .vcal-gantt-bar--overtime {
      background: rgba(249, 115, 22, 0.85);
      color: #111;
      box-shadow: inset -1px 0 0 rgba(154, 52, 18, 0.4), inset 1px 0 0 rgba(154, 52, 18, 0.4);
    }
    #page-vessel-calendar .vcal-gantt-bar--assignment.vcal-gantt-bar--noncompliant {
      background:
        repeating-linear-gradient(
          -45deg,
          rgba(234, 179, 8, 0.42) 0,
          rgba(234, 179, 8, 0.42) 3px,
          transparent 3px,
          transparent 8px
        ),
        #3b82f6;
      box-shadow: inset 0 0 0 1px rgba(202, 138, 4, 0.7);
    }
    #page-vessel-calendar .vcal-gantt-bar--overtime.vcal-gantt-bar--noncompliant {
      background:
        repeating-linear-gradient(
          -45deg,
          rgba(253, 224, 71, 0.5) 0,
          rgba(253, 224, 71, 0.5) 3px,
          transparent 3px,
          transparent 8px
        ),
        rgba(249, 115, 22, 0.85);
      box-shadow: inset 0 0 0 1px rgba(202, 138, 4, 0.65);
    }
    #page-vessel-calendar .vcal-gantt-bar--noncompliant .vcal-noncompliant-mark {
      color: #a16207;
      font-weight: 700;
    }
    #page-vessel-calendar .vcal-gantt-bar--clickable {
      cursor: pointer;
    }
    #page-vessel-calendar .vcal-gantt-bar--clickable:hover {
      filter: brightness(1.08);
      box-shadow: inset 0 0 0 2px rgba(30, 64, 175, 0.4);
    }
    #page-vessel-calendar .vcal-port-anchor-row .vcal-gantt-day-hit {
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
    }
    #page-vessel-calendar .vcal-port-anchor--crew-change-possible {
      background: rgba(245, 158, 11, 0.24);
      box-shadow: inset 0 0 0 2px rgba(217, 119, 6, 0.72);
      color: #92400e;
    }
    #page-vessel-calendar .vcal-port-anchor--crew-change-planned {
      background: rgba(34, 197, 94, 0.24);
      box-shadow: inset 0 0 0 2px rgba(21, 128, 61, 0.72);
      color: #166534;
    }
    #page-vessel-calendar .vcal-port-anchor--crew-change-blocked {
      background: rgba(100, 116, 139, 0.2);
      box-shadow: inset 0 0 0 2px rgba(71, 85, 105, 0.58);
    }
    #page-vessel-calendar .vcal-port-anchor--in-port {
      background: rgba(59, 130, 246, 0.08);
    }
    #page-vessel-calendar .vcal-day-header-cell {
      text-align: center;
      padding: 2px 1px;
      min-width: 26px;
      font-size: 0.58rem;
      color: var(--text-muted);
      font-weight: 600;
    }
    #page-vessel-calendar .vcal-day-header-cell--today {
      color: #f97316;
      font-weight: 800;
    }
    #page-vessel-calendar .vcal-day-header-port {
      font-size: 0.62rem;
      line-height: 1;
      margin-top: 1px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      min-height: 16px;
      padding: 1px 3px;
      border-radius: 999px;
    }
    #page-vessel-calendar .vcal-day-header-port--possible { background: #f59e0b; }
    #page-vessel-calendar .vcal-day-header-port--planned { background: #16a34a; }
    #page-vessel-calendar .vcal-day-header-port--blocked { background: #64748b; }
    #page-vessel-calendar #vcal-crewing-assign-panel {
      margin-bottom: 0.75rem;
      padding: 0.65rem 0.75rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
    }

    /* Crew spotlight — Ops-aligned horizontal day gantt (same column geometry as vessel Ops) */
    #page-vessel-calendar #vcal-crew-spotlight {
      margin-top: 1.25rem;
    }
    #page-vessel-calendar #vcal-crew-spotlight > .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.65rem 1rem;
      flex-wrap: wrap;
      padding: 0.65rem 0.85rem;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-header-title {
      min-width: 0;
      flex: 0 1 auto;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-header-title .card-title {
      margin: 0;
      font-size: 0.95rem;
      line-height: 1.2;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-header-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex: 1 1 16rem;
      justify-content: flex-end;
      min-width: 0;
      flex-wrap: wrap;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-crew-combo {
      position: relative;
      flex: 1 1 11rem;
      min-width: 9rem;
      max-width: 18rem;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    #page-vessel-calendar #vcal-crew-spotlight #cs-crew-search {
      width: 100%;
      padding: 0.28rem 0.5rem;
      font-size: 0.82rem;
      min-height: 0;
      height: 2rem;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-crew-suggestions {
      position: absolute;
      z-index: 20;
      top: calc(100% + 2px);
      left: 0;
      right: 0;
      margin: 0;
      padding: 0.25rem 0;
      list-style: none;
      max-height: 220px;
      overflow-y: auto;
      background: var(--bg-card, var(--bg-primary));
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-crew-suggestions[hidden] {
      display: none !important;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-crew-suggestion {
      display: block;
      width: 100%;
      text-align: left;
      border: none;
      background: transparent;
      color: var(--text-primary);
      padding: 0.4rem 0.65rem;
      font-size: 0.8rem;
      cursor: pointer;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-crew-suggestion:hover,
    #page-vessel-calendar #vcal-crew-spotlight .cs-crew-suggestion--active {
      background: var(--bg-secondary);
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-crew-suggestion--empty {
      color: var(--text-muted);
      cursor: default;
      font-size: 0.75rem;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-header-actions .vcal-nav-group {
      margin-left: 0;
      flex-shrink: 0;
    }
    #page-vessel-calendar #vcal-crew-spotlight > .card-body {
      padding: 0.65rem 0.85rem 0.85rem;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 0.55rem;
      margin: 0 0 0.55rem;
      font-size: 0.68rem;
      color: var(--text-secondary);
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-legend span {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-swatch {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      display: inline-block;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-crew-label-name {
      font-weight: 700;
      font-size: 0.74rem;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-crew-label-meta {
      font-weight: 400;
      font-size: 0.62rem;
      color: var(--text-muted);
      margin-top: 0.1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #page-vessel-calendar #vcal-crew-spotlight .vcal-ops-table tbody td.vcal-gantt-cell {
      vertical-align: top;
      min-height: 44px;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-gantt-bar {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0 6px;
      border-radius: 0;
      font-size: 0.65rem;
      font-weight: 600;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      pointer-events: auto;
      height: 100%;
      min-height: 26px;
      max-height: none;
      align-self: stretch;
      box-shadow: inset -1px 0 0 rgba(0,0,0,0.12), inset 1px 0 0 rgba(0,0,0,0.12);
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-gantt-day-hit--active {
      background-color: rgba(139, 38, 53, 0.12);
      box-shadow: inset 0 0 0 1px rgba(139, 38, 53, 0.2);
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-gantt-day-hit--active.vcal-gantt-day-hit--weekend {
      background-image: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-day-detail {
      margin-top: 0.75rem;
      padding: 0.65rem 0.75rem;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-secondary);
      font-size: 0.8125rem;
    }
    #page-vessel-calendar #vcal-crew-spotlight .cs-day-detail ul {
      margin: 0.35rem 0 0;
      padding-left: 1.1rem;
    }
    #page-fleet-daily-reports {
      --fdr-map-height: 420px;
      --fdr-map-block-height: calc(var(--fdr-map-height) + 3.25rem);
    }
    #page-fleet-daily-reports .fdr-map-layout {
      display: grid;
      grid-template-columns: minmax(148px, 172px) minmax(0, 1fr);
      gap: 0.75rem;
      align-items: start;
      margin-bottom: 1rem;
    }
    #page-fleet-daily-reports .fdr-metrics-column {
      display: grid;
      grid-template-rows: repeat(6, minmax(min-content, 1fr));
      gap: 0.35rem;
      min-width: 0;
      height: var(--fdr-map-block-height);
      max-height: var(--fdr-map-block-height);
      box-sizing: border-box;
    }
    #page-fleet-daily-reports .fdr-metric-tile {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.45rem 0.55rem;
      font-size: 0.6875rem;
      line-height: 1.25;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }
    #page-fleet-daily-reports .fdr-metric-tile--detail {
      justify-content: flex-start;
    }
    #page-fleet-daily-reports .fdr-metric-tile-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.35rem;
    }
    #page-fleet-daily-reports .fdr-metric-label {
      color: var(--text-muted);
      flex: 1;
      min-width: 0;
    }
    #page-fleet-daily-reports .fdr-metric-value {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-primary);
      flex-shrink: 0;
      text-align: right;
    }
    #page-fleet-daily-reports .fdr-metric-detail {
      margin-top: 0.2rem;
      color: var(--text-secondary);
      font-size: 0.625rem;
      line-height: 1.35;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      flex: 1 1 auto;
      min-height: 0;
    }
    #page-fleet-daily-reports .fdr-map-column {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      min-width: 0;
      align-self: start;
    }
    #page-fleet-daily-reports .fdr-map-column > .card:first-child {
      margin: 0;
      overflow: hidden;
    }
    #page-fleet-daily-reports #fdr-cesium-container {
      width: 100%;
      height: var(--fdr-map-height);
      min-height: var(--fdr-map-height);
      max-height: var(--fdr-map-height);
      flex: none;
      position: relative;
    }
    #page-fleet-daily-reports .fdr-marpol-legend {
      position: absolute;
      top: 0.7rem;
      left: 0.7rem;
      z-index: 20;
      max-width: min(18rem, calc(100% - 1.4rem));
      padding: 0.55rem 0.7rem;
      border-radius: 8px;
      background: color-mix(in srgb, var(--bg-primary, #0f172a) 86%, transparent);
      background: rgba(15, 23, 42, 0.86);
      color: #f8fafc;
      border: 1px solid rgba(148, 163, 184, 0.28);
      box-shadow: 0 8px 24px rgba(2, 6, 23, 0.28);
      pointer-events: auto;
    }
    #page-fleet-daily-reports .fdr-marpol-legend:empty,
    #page-fleet-daily-reports .fdr-marpol-legend[hidden] {
      display: none;
    }
    /* Vessel detail — fixed overlay (lives under document body, not in page flow) */
    #fdr-vessel-modal.modal-overlay {
      z-index: 1100;
    }
    #fdr-vessel-modal.modal-overlay.active {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    body.fdr-vessel-modal-open {
      overflow: hidden;
    }
    @media (max-width: 900px) {
      #page-fleet-daily-reports .fdr-map-layout {
        grid-template-columns: 1fr;
      }
      #page-fleet-daily-reports .fdr-metrics-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: minmax(min-content, auto);
        height: auto;
        max-height: none;
      }
    }
    #page-fleet-daily-reports .fdr-fleet-card {
      margin-top: 1rem;
      overflow: hidden;
    }
    #page-fleet-daily-reports .fdr-fleet-card-header {
      padding-bottom: 0.65rem;
      border-bottom: 1px solid var(--border-color);
    }
    #page-fleet-daily-reports .fdr-fleet-card-header .card-title {
      font-size: 1rem;
      margin: 0;
    }
    #page-fleet-daily-reports .fdr-fleet-card-subtitle {
      margin: 0.25rem 0 0;
      font-size: 0.8125rem;
      color: var(--text-muted);
      font-weight: 400;
    }
    #page-fleet-daily-reports .fdr-fleet-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    #page-fleet-daily-reports .fdr-fleet-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
    }
    #page-fleet-daily-reports .fdr-fleet-table thead {
      background: var(--bg-secondary);
    }
    #page-fleet-daily-reports .fdr-fleet-table thead th {
      text-align: left;
      padding: 0.6rem 1rem;
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
      vertical-align: bottom;
    }
    #page-fleet-daily-reports .fdr-fleet-table tbody td {
      text-align: left;
      padding: 0.7rem 1rem;
      border-bottom: 1px solid var(--border-color);
      vertical-align: middle;
      color: var(--text-primary);
    }
    #page-fleet-daily-reports .fdr-fleet-table tbody tr:last-child td {
      border-bottom: none;
    }
    #page-fleet-daily-reports .fdr-fleet-table tbody tr.fdr-vessel-row {
      cursor: pointer;
      transition: background 0.12s ease;
    }
    #page-fleet-daily-reports .fdr-fleet-table tbody tr.fdr-vessel-row:hover {
      background: var(--bg-secondary);
    }
    #page-fleet-daily-reports .fdr-fleet-table tbody tr.fdr-vessel-row--selected {
      background: rgba(37, 99, 235, 0.08);
      box-shadow: inset 3px 0 0 var(--accent-primary, #2563eb);
    }
    #page-fleet-daily-reports .fdr-fleet-table tbody tr.fdr-vessel-row--selected:hover {
      background: rgba(37, 99, 235, 0.12);
    }
    #page-fleet-daily-reports .fdr-fleet-table .fdr-col-vessel {
      font-weight: 600;
      min-width: 8rem;
    }
    #page-fleet-daily-reports .fdr-fleet-table .fdr-col-position {
      font-size: 0.75rem;
      color: var(--text-secondary);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    #page-fleet-daily-reports .fdr-fleet-table .fdr-col-rob {
      max-width: 16rem;
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.35;
    }
    #page-fleet-daily-reports .fdr-fleet-table .fdr-col-eta {
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    #page-fleet-daily-reports .fdr-fleet-table .fdr-fleet-table__empty {
      padding: 2rem 1rem;
      text-align: left;
      color: var(--text-muted);
      font-size: 0.875rem;
    }
    #page-fleet-daily-reports .fdr-fleet-table .badge {
      font-size: 0.6875rem;
      padding: 0.2rem 0.55rem;
    }

    /* Content Grid */
    .content-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 1.5rem;
    }
    .content-grid > * {
      min-width: 0;
    }

    /* --bp-lg (1024px): stack multi-column layouts */
    @media (max-width: 1024px) {
      .content-grid {
        grid-template-columns: 1fr;
      }
      #page-safety-dashboard .safety-dashboard-grid {
        grid-template-columns: 1fr;
      }
      .sms-doc-actions {
        max-width: 100%;
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.5rem;
      }
      .sms-ack-pill {
        font-size: 0.72rem;
        padding: 0.18rem 0.5rem;
      }
      .sms-doc-actions .btn.btn-sm {
        min-height: 2.25rem;
      }
      .internal-training-modal-split {
        grid-template-columns: 1fr;
      }
      .internal-training-preview-pane {
        position: static;
      }
    }

    /* Cards */
    .card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      min-width: 0;
      container-type: inline-size;
      container-name: card;
    }

    @container card (inline-size < 360px) {
      .card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
      }
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.25rem;
      border-bottom: 1px solid var(--border-color);
    }

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

    /* Dashboard pin-to-overview icon */
    .dashboard-pin-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      border-radius: 6px;
      transition: color 0.2s, background 0.2s;
    }
    .dashboard-pin-btn:hover {
      color: var(--accent-primary);
      background: rgba(14, 165, 233, 0.1);
    }
    .dashboard-pin-btn.pinned {
      color: var(--accent-primary);
    }
    .dashboard-pin-btn svg {
      width: 18px;
      height: 18px;
    }
    .my-dashboard-section {
      margin-bottom: 2rem;
    }
    .my-dashboard-section .section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .my-dashboard-section .section-heading h2 {
      font-size: 1.125rem;
      font-weight: 600;
      margin: 0;
    }
    #my-dashboard-cards {
      --dash-row-h: 220px;
      --dash-gap: 12px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: var(--dash-row-h);
      grid-auto-flow: dense;
      gap: var(--dash-gap);
      align-items: stretch;
      margin-bottom: 0;
    }
    @media (max-width: 1199px) {
      #my-dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
      #my-dashboard-cards { grid-template-columns: 1fr; }
    }
    /* Snap sizes: cols × rows (each row = --dash-row-h) */
    #my-dashboard-cards .dc-s-1x1 { grid-column: span 1; grid-row: span 1; }
    #my-dashboard-cards .dc-s-1x2 { grid-column: span 1; grid-row: span 2; }
    #my-dashboard-cards .dc-s-2x1 { grid-column: span 2; grid-row: span 1; }
    #my-dashboard-cards .dc-s-2x2 { grid-column: span 2; grid-row: span 2; }
    #my-dashboard-cards .dc-s-2x3 { grid-column: span 2; grid-row: span 3; }
    @media (max-width: 1199px) {
      #my-dashboard-cards .dc-s-2x1,
      #my-dashboard-cards .dc-s-2x2,
      #my-dashboard-cards .dc-s-2x3 { grid-column: span 2; }
      #my-dashboard-cards .dc-s-2x2 { grid-row: span 2; }
      #my-dashboard-cards .dc-s-2x3 { grid-row: span 3; }
    }
    @media (max-width: 640px) {
      #my-dashboard-cards .dc-s-2x1,
      #my-dashboard-cards .dc-s-2x2,
      #my-dashboard-cards .dc-s-2x3 { grid-column: span 1; }
      #my-dashboard-cards .dc-s-2x2 { grid-row: span 2; }
      #my-dashboard-cards .dc-s-2x3 { grid-row: span 3; }
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-crew-gaps"] {
      grid-column: span 2;
      grid-row: span 2;
    }
    @media (max-width: 640px) {
      #my-dashboard-cards [data-dashboard-card-id="dashboard-crew-gaps"] {
        grid-column: span 1;
        grid-row: span 2;
      }
    }
    #my-dashboard-cards .dashboard-card-wrapper {
      position: relative;
      min-width: 0;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #my-dashboard-cards .dashboard-card-wrapper .card,
    #my-dashboard-cards .dashboard-card-wrapper .stats-grid {
      margin-bottom: 0;
    }
    #my-dashboard-cards .dashboard-card-content {
      min-width: 0;
      min-height: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    #my-dashboard-cards .dashboard-card-content > * {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    /* The rendered .card inside a dashboard slot fills the full cell height */
    #my-dashboard-cards .dashboard-card-content .card {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    #my-dashboard-cards .dashboard-card-content .card .card-header {
      flex-shrink: 0;
    }
    #my-dashboard-cards .dashboard-card-content .card .card-body {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* ── Fill & scale content to card cell size ── */
    #my-dashboard-cards .dash-card-body-inner {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: stretch;
      gap: 0.35rem;
      min-height: 0;
    }
    #my-dashboard-cards .dash-card-body-inner > .dc-stat-grid,
    #my-dashboard-cards .dash-card-body-inner > .stats-grid,
    #my-dashboard-cards .dash-card-body-inner > .dc-pms-chart,
    #my-dashboard-cards .dash-card-body-inner > .dc-vessel-grid,
    #my-dashboard-cards .dash-card-body-inner > .dc-fill-list,
    #my-dashboard-cards .dash-card-body-inner > .dc-fleet-health,
    #my-dashboard-cards .dash-card-body-inner > .dc-map-fill,
    #my-dashboard-cards .dash-card-body-inner > .compliance-ring,
    #my-dashboard-cards .dash-card-body-inner > .dc-hero-block,
    #my-dashboard-cards .dash-card-body-inner > .dc-empty {
      flex: 1;
      min-height: 0;
    }
    #my-dashboard-cards .dc-stat-grid,
    #my-dashboard-cards .stats-grid {
      display: grid;
      align-content: stretch;
      grid-auto-rows: 1fr;
      height: 100%;
      min-height: 0;
      gap: 0.5rem;
      margin-bottom: 0;
    }
    #my-dashboard-cards .stats-grid {
      grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    }
    #my-dashboard-cards .dc-stat,
    #my-dashboard-cards .stat-card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 0;
      height: 100%;
    }
    #my-dashboard-cards .stat-card:hover { transform: none; }
    /* Lists: rows expand to fill available height */
    #my-dashboard-cards .dc-fill-list {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      justify-content: space-evenly;
      gap: 0.3rem;
    }
    #my-dashboard-cards .dc-fill-list > *,
    #my-dashboard-cards .dash-card-body-inner > .dc-attention-item,
    #my-dashboard-cards .dash-card-body-inner > .dc-row {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      min-height: 1.75rem;
    }
    #my-dashboard-cards .dc-attention-summary { flex-shrink: 0; }
    /* Cert renewals list from renderAlerts */
    #my-dashboard-cards [id^="alerts-list"] > div {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 !important;
      height: 100% !important;
      max-height: none !important;
      overflow: hidden !important;
      justify-content: space-evenly !important;
      gap: 0.35rem !important;
      padding-right: 0 !important;
    }
    #my-dashboard-cards .alert-item {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      min-height: 1.75rem;
    }
    /* PMS chart */
    #my-dashboard-cards .dc-pms-chart {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    #my-dashboard-cards .dc-pms-chart .dc-pms-row {
      flex: 1 1 auto;
      min-height: 1.5rem;
      align-items: center;
    }
    #my-dashboard-cards .dc-pms-legend { flex-shrink: 0; margin-top: 0; }
    /* Vessel grid */
    #my-dashboard-cards .dc-vessel-grid {
      display: grid;
      grid-auto-rows: 1fr;
      align-content: stretch;
      height: 100%;
    }
    #my-dashboard-cards .dc-vessel-card {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    #my-dashboard-cards .dc-vessel-stats-grid {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-content: stretch;
      grid-auto-rows: 1fr;
      gap: 0.4rem;
      min-height: 0;
    }
    #my-dashboard-cards .dc-vessel-stat {
      container-type: size;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 0.2rem;
      padding: 0.35rem 0.4rem;
      min-height: 0;
      height: 100%;
    }
    #my-dashboard-cards .dc-vessel-stat-val {
      font-size: clamp(0.85rem, 28cqmin, 1.85rem);
      font-weight: 800;
      line-height: 1;
    }
    #my-dashboard-cards .dc-vessel-stat-lbl {
      font-size: clamp(0.5rem, 12cqmin, 0.68rem);
      margin-top: 0;
      line-height: 1.2;
    }
    /* Fleet health */
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-fleet-health {
      display: grid;
      grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
      grid-template-rows: repeat(4, minmax(0, 1fr));
      align-items: center;
      gap: 0.3rem 0.85rem;
      height: 100%;
      min-height: 0;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-fh-hero {
      grid-column: 1;
      grid-row: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 0.35rem;
      align-self: center;
      min-height: 0;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-fh-ring {
      position: relative;
      flex-shrink: 0;
      width: clamp(64px, 5.5vw, 88px);
      height: clamp(64px, 5.5vw, 88px);
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-fh-ring svg { width: 100%; height: 100%; }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-fh-ring-val {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-fh-score {
      font-size: clamp(1.1rem, 2.2vw, 1.5rem);
      font-weight: 900;
      line-height: 1;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-fh-max {
      font-size: 0.55rem;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-fh-grade-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-width: 0;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-fh-grade {
      font-size: clamp(1.35rem, 3vw, 2rem);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.03em;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-fh-grade-lbl {
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
      margin-top: 0.15rem;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-progress-wrap {
      grid-column: 2;
      margin-top: 0;
      flex: none;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-fleet-health"] .dc-progress-track {
      height: 6px;
    }
    #my-dashboard-cards .dc-progress-wrap {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 0;
    }
    #my-dashboard-cards .dc-compliance-breakdown {
      font-size: 0.875rem;
      color: var(--text-secondary);
      margin-top: 0.75rem;
      width: 100%;
    }
    #my-dashboard-cards .dc-cert-comp-stack {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      gap: 0.75rem;
      height: 100%;
      min-height: 0;
    }
    #my-dashboard-cards .dc-cert-comp-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      flex: 1 1 auto;
      justify-content: center;
      min-height: 0;
      cursor: pointer;
    }
    #my-dashboard-cards .dc-cert-comp-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.5rem;
    }
    #my-dashboard-cards .dc-cert-comp-title {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    #my-dashboard-cards .dc-cert-comp-pct {
      font-size: 0.9375rem;
      font-weight: 800;
      color: var(--text-primary);
    }
    #my-dashboard-cards .dc-cert-comp-pct.success { color: var(--success); }
    #my-dashboard-cards .dc-cert-comp-pct.warning { color: var(--warning); }
    #my-dashboard-cards .dc-cert-comp-pct.danger { color: var(--danger); }
    #my-dashboard-cards .dc-cert-comp-pct.muted { color: var(--text-secondary); font-weight: 600; }
    #my-dashboard-cards .dc-cert-comp-track {
      display: flex;
      height: 10px;
      border-radius: 999px;
      overflow: hidden;
      background: var(--border-color);
    }
    #my-dashboard-cards .dc-cert-comp-track.dc-cert-comp-empty {
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      color: var(--text-secondary);
      height: auto;
      min-height: 2rem;
      padding: 0.35rem 0.5rem;
    }
    #my-dashboard-cards .dc-cert-comp-seg { height: 100%; min-width: 2px; }
    #my-dashboard-cards .dc-cert-comp-seg.valid { background: var(--success); }
    #my-dashboard-cards .dc-cert-comp-seg.expiring { background: var(--warning); }
    #my-dashboard-cards .dc-cert-comp-seg.expired { background: var(--danger); }
    #my-dashboard-cards .dc-cert-comp-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0.75rem;
      font-size: 0.68rem;
      color: var(--text-secondary);
    }
    #my-dashboard-cards .dc-cert-comp-legend .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 0.25rem;
      vertical-align: middle;
    }
    #my-dashboard-cards .dc-cert-comp-legend .dot.valid { background: var(--success); }
    #my-dashboard-cards .dc-cert-comp-legend .dot.expiring { background: var(--warning); }
    #my-dashboard-cards .dc-cert-comp-legend .dot.expired { background: var(--danger); }
    /* Hero / compliance / map / empty */
    #my-dashboard-cards .dc-hero-block,
    #my-dashboard-cards .compliance-ring,
    #my-dashboard-cards .dc-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    #my-dashboard-cards .dc-map-fill { justify-content: stretch; }
    /* Scale typography by card height */
    #my-dashboard-cards .dc-s-1x1 .dc-stat { padding: 0.55rem 0.6rem; }
    #my-dashboard-cards .dc-s-1x1 .dc-stat-val { font-size: 1.35rem; }
    #my-dashboard-cards .dc-s-1x1 .dc-stat-lbl { font-size: 0.6rem; }
    #my-dashboard-cards .dc-s-1x1 .dc-hero-val { font-size: 2rem; }
    #my-dashboard-cards .dc-s-1x1 .dc-stat-grid { gap: 0.45rem; }
    #my-dashboard-cards .dc-s-1x2 .dc-stat,
    #my-dashboard-cards .dc-s-2x1 .dc-stat { padding: 0.85rem 0.9rem; }
    #my-dashboard-cards .dc-s-1x2 .dc-stat-val,
    #my-dashboard-cards .dc-s-2x1 .dc-stat-val { font-size: clamp(1.5rem, 4vmin, 2rem); }
    #my-dashboard-cards .dc-s-2x2 .dc-stat { padding: 1rem; }
    #my-dashboard-cards .dc-s-2x2 .dc-stat-val { font-size: clamp(1.75rem, 5vmin, 2.35rem); }
    #my-dashboard-cards .dc-s-2x1 .dc-stat-grid { grid-template-columns: repeat(4, 1fr); }
    #my-dashboard-cards .dc-s-1x2 .stat-value { font-size: clamp(1.5rem, 4vmin, 2.25rem); }
    #my-dashboard-cards .dc-s-2x2 .stat-value { font-size: clamp(1.75rem, 5vmin, 2.75rem); }
    /* Crew & certificates tiles: size text to each tile so it never spills out */
    #my-dashboard-cards [data-dashboard-card-id="dashboard-stats"] .stats-grid {
      flex: 1;
      height: auto;
      min-height: 0;
      grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
      gap: 0.4rem;
    }
    #my-dashboard-cards .stats-grid .stat-card {
      container-type: size;
      min-width: 0;
      min-height: 3rem;
      overflow: hidden;
      padding: 0.45rem 0.55rem;
      gap: 0.1rem;
    }
    #my-dashboard-cards .stats-grid .stat-card .stat-label {
      margin: 0;
      font-size: clamp(0.5rem, min(8.5cqi, 12cqh), 0.75rem);
      line-height: 1.15;
      overflow: hidden;
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    #my-dashboard-cards .stats-grid .stat-card .stat-value {
      margin: 0;
      font-size: clamp(0.9rem, min(24cqi, 34cqh), 2.6rem);
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #my-dashboard-cards .stats-grid .stat-card .stat-chip {
      margin-top: 0.1rem;
      max-width: 100%;
      font-size: clamp(0.5rem, min(7.5cqi, 10cqh), 0.72rem);
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    @container card (height < 78px) or (width < 96px) {
      .stats-grid .stat-card .stat-chip { display: none; }
    }
    #my-dashboard-cards .dc-s-1x2 .dc-hero-val { font-size: clamp(2.5rem, 8vmin, 3.5rem); }
    #my-dashboard-cards .dc-s-2x2 .dc-hero-val { font-size: clamp(3rem, 10vmin, 4rem); }
    #my-dashboard-cards .compliance-ring svg { width: clamp(100px, 38%, 140px); height: auto; }
    #my-dashboard-cards .dc-s-1x2 .compliance-ring svg,
    #my-dashboard-cards .dc-s-2x2 .compliance-ring svg { width: clamp(120px, 42%, 170px); }
    #my-dashboard-cards .dc-vessel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    #my-dashboard-cards .dc-s-2x2 .dc-vessel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #my-dashboard-cards .dc-map-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    #my-dashboard-cards .dc-map-fill svg { flex: 1; width: 100%; min-height: 0; height: auto; max-height: 100%; }
    #my-dashboard-cards .dc-map-fill {
      isolation: isolate;
      position: relative;
      z-index: 0;
    }
    #my-dashboard-cards .dc-map-leaflet {
      flex: 1;
      min-height: 180px;
      height: auto; /* override .dash-map-wrap fixed 290px inside card cells */
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border-color);
      cursor: pointer;
      background: var(--bg-secondary);
      position: relative;
      isolation: isolate;
      z-index: 0;
    }
    #my-dashboard-cards .dc-map-leaflet .leaflet-container {
      width: 100%;
      height: 100%;
      font: inherit;
      background: var(--bg-secondary);
      z-index: 0;
    }
    #my-dashboard-cards .dc-map-legend {
      display: flex;
      gap: 1rem;
      margin-top: 0.35rem;
      font-size: 0.72rem;
      color: var(--text-secondary);
      flex-shrink: 0;
    }
    #my-dashboard-cards .dc-map-legend span {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    #my-dashboard-cards .dc-map-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }
    #my-dashboard-cards .dc-map-dot--sea { background: #0ea5e9; }
    #my-dashboard-cards .dc-map-dot--port { background: #22c55e; }
    #my-dashboard-cards .dc-more-hint {
      margin-top: auto;
      padding-top: 0.35rem;
      font-size: 0.72rem;
      color: var(--text-secondary);
      text-align: right;
      flex-shrink: 0;
    }
    #my-dashboard-cards .card-header { padding: 0.75rem 1rem 0.5rem; }
    #my-dashboard-cards .card-body { padding: 0 1rem 0.75rem; }
    /* Async-loaded card bodies (on duty, crew gaps) */
    #my-dashboard-cards [data-dashboard-card-id="dashboard-on-duty-contact"] .dash-on-duty-compact,
    #my-dashboard-cards [data-dashboard-card-id="dashboard-on-duty-contact"] .dash-on-duty-setup {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.75rem;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-crew-gaps"] .dash-card-body-inner > div:last-child {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-height: 0;
      gap: 0.35rem;
      overflow: hidden;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-crew-gaps"] .dash-card-body-inner > div:last-child > div {
      flex: 0 1 auto;
      display: flex;
      align-items: center;
      min-height: 1.75rem;
    }
    #my-dashboard-cards [data-dashboard-card-id="dashboard-crew-gaps"] .dc-crew-gaps-list {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    /* ── Edit mode: Apple-style jiggle ── */
    @keyframes dc-jiggle {
      0%,  100% { transform: rotate(-0.7deg); }
      50%        { transform: rotate( 0.7deg); }
    }
    .my-dashboard-edit-mode .dashboard-card-wrapper {
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
      animation: dc-jiggle 0.35s ease-in-out infinite;
      /* stagger each card slightly */
      animation-delay: var(--jiggle-delay, 0s);
    }
    .my-dashboard-edit-mode .dashboard-card-wrapper:active { cursor: grabbing; }
    /* Ghost: the slot the card occupies while being dragged */
    .my-dashboard-edit-mode .dashboard-card-wrapper.dc-is-dragging {
      opacity: 0.12;
      animation: none !important;
      cursor: grabbing;
      pointer-events: none;
    }
    /* Floating clone that follows the pointer */
    .dc-drag-clone {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      transform-origin: center center;
      transform: scale(1.05) rotate(2deg);
      box-shadow: 0 28px 56px rgba(0,0,0,0.32), 0 8px 20px rgba(0,0,0,0.18);
      border-radius: 12px;
      transition: transform 0.1s ease;
      will-change: left, top;
    }
    /* FLIP: other cards animate to their new grid position */
    .dc-flip-moving {
      animation: none !important;
      transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1) !important;
    }
    /* Legacy edit-bar — hidden, kept for HTML compat */
    .dashboard-move-btn,
    .dashboard-card-edit-bar { display: none !important; }

    .dash-empty-state {
      text-align: center;
      padding: 3rem 1.5rem;
      color: var(--text-secondary);
      border: 1px dashed var(--border-color);
      border-radius: 12px;
      margin-bottom: 1rem;
    }
    .dash-kpi-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 0.75rem;
    }
    .dash-kpi-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.65rem 0.75rem;
      background: var(--bg-secondary, rgba(255,255,255,0.03));
      border-radius: 8px;
      min-width: 0;
    }
    .dash-kpi-val {
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.1;
    }
    .dash-kpi-lbl {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }
    .dash-vessel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 0.75rem;
    }
    .dash-vessel-mini {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 0.75rem;
      background: var(--bg-card);
      cursor: pointer;
      transition: border-color 0.15s;
    }
    .dash-vessel-mini:hover {
      border-color: var(--accent-primary, #3b82f6);
    }
    .dash-vessel-mini-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .dash-vessel-badge {
      font-size: 0.6875rem;
      padding: 0.15rem 0.45rem;
      border-radius: 999px;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .dash-vessel-mini-line {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      margin-top: 0.25rem;
    }
    .dash-list-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.875rem;
    }
    .dash-attention-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
    }
    .dash-attention-table th,
    .dash-attention-table td {
      padding: 0.5rem 0.65rem;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }
    /* ── Card library modal (full-screen) ────────────────────────────── */
    .dash-library-modal {
      position: fixed;
      inset: 0;
      z-index: 10050;
      pointer-events: none;
      visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .dash-library-modal.open {
      pointer-events: auto;
      visibility: visible;
    }
    .dash-library-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      opacity: 0;
      transition: opacity 0.2s;
    }
    .dash-library-modal.open .dash-library-backdrop {
      opacity: 1;
    }
    .dash-library-dialog {
      position: relative;
      width: min(1280px, 96vw);
      height: min(90vh, 920px);
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.35);
      display: flex;
      flex-direction: column;
      transform: scale(0.97) translateY(12px);
      opacity: 0;
      transition: transform 0.22s ease, opacity 0.22s ease;
      overflow: hidden;
    }
    .dash-library-modal.open .dash-library-dialog {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
    .dash-library-dialog-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.125rem 1.5rem;
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    .dash-library-dialog-header h2 {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 700;
    }
    .dash-library-dialog-subtitle {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin: 0.1rem 0 0;
    }
    .dash-library-header-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .dash-lib-pins-badge {
      font-size: 0.78rem;
      color: var(--text-secondary);
      padding: 0.25rem 0.625rem;
      background: var(--bg-secondary);
      border-radius: 999px;
      white-space: nowrap;
    }
    .dash-library-search-wrap {
      position: relative;
    }
    .dash-library-search-wrap svg {
      position: absolute;
      left: 0.625rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
      pointer-events: none;
    }
    .dash-library-search-wrap input {
      padding-left: 2rem;
      width: 220px;
    }
    .dash-library-dialog-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    /* Sidebar */
    .dash-library-sidebar {
      width: 196px;
      flex-shrink: 0;
      border-right: 1px solid var(--border-color);
      overflow-y: auto;
      padding: 0.875rem 0.625rem;
    }
    .dash-lib-cat-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      font-size: 0.8375rem;
      color: var(--text-secondary);
      cursor: pointer;
      transition: background 0.1s, color 0.1s;
      margin-bottom: 0.15rem;
      user-select: none;
    }
    .dash-lib-cat-item:hover { background: var(--bg-secondary); color: var(--text-primary); }
    .dash-lib-cat-item.active { background: rgba(14,165,233,0.1); color: var(--accent-primary); font-weight: 600; }
    .dash-lib-cat-badge {
      margin-left: auto;
      font-size: 0.68rem;
      font-weight: 600;
      background: var(--bg-secondary);
      padding: 0.1rem 0.45rem;
      border-radius: 999px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }
    .dash-lib-cat-item.active .dash-lib-cat-badge {
      background: rgba(14,165,233,0.12);
      color: var(--accent-primary);
    }
    .dash-lib-cat-sep {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--text-secondary);
      padding: 0.875rem 0.75rem 0.35rem;
      font-weight: 600;
    }
    /* Grid area */
    .dash-library-grid-area {
      flex: 1;
      overflow-y: auto;
      padding: 1.25rem 1.5rem 2rem;
    }
    .dash-lib-section-header {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
      font-weight: 700;
      margin: 1.25rem 0 0.75rem;
    }
    .dash-lib-section-header:first-child { margin-top: 0; }
    .dash-library-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 0.875rem;
      margin-bottom: 0.5rem;
    }
    .dash-lib-grid-card {
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 0.875rem;
      background: var(--bg-secondary);
      display: flex;
      flex-direction: column;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .dash-lib-grid-card:hover {
      border-color: var(--accent-primary);
      box-shadow: 0 2px 14px rgba(0,0,0,0.1);
    }
    .dash-lib-grid-card.is-pinned {
      border-color: var(--success);
      background: var(--success-bg);
    }
    .dash-lib-grid-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.35rem;
    }
    .dash-lib-grid-card-title {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--text-primary);
      min-width: 0;
    }
    .dash-lib-grid-card-title svg { flex-shrink: 0; color: var(--accent-primary); opacity: 0.75; }
    .dash-lib-grid-card-desc {
      font-size: 0.775rem;
      color: var(--text-secondary);
      margin-bottom: 0.75rem;
      line-height: 1.45;
    }
    .dash-lib-preview {
      margin-top: auto;
      padding-top: 0.75rem;
      border-top: 1px solid var(--border-color);
      pointer-events: none;
      font-size: 0.875em;
    }
    .dash-lib-preview .dc-stat-val { font-size: 1.25rem; }
    .dash-lib-preview .dc-vessel-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .dash-lib-preview .dc-pms-label { width: 70px; }
    .dash-lib-preview-loading {
      font-size: 0.78rem;
      color: var(--text-secondary);
      padding: 0.35rem 0;
    }
    @media (max-width: 768px) {
      .dash-library-sidebar { display: none; }
      .dash-library-search-wrap input { width: 160px; }
    }
    @media (max-width: 640px) {
      .dash-library-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
      .dash-library-modal { padding: 0; }
    }
    /* ── end card library ─────────────────────────────────────────────── */

    /* ── Dashboard card design system (dc-*) ──────────────────────────── */
    .dc-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
      gap: 0.625rem;
    }
    .dc-stat {
      border-radius: 10px;
      padding: 0.875rem 0.9rem;
      background: var(--bg-secondary);
    }
    .dc-stat-val {
      font-size: 1.75rem;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 0.3rem;
      color: var(--text-primary);
      letter-spacing: -0.02em;
    }
    .dc-stat-lbl {
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
      font-weight: 500;
    }
    .dc-stat.danger { background: var(--danger-bg); }
    .dc-stat.danger .dc-stat-val { color: var(--danger); }
    .dc-stat.warning { background: var(--warning-bg); }
    .dc-stat.warning .dc-stat-val { color: var(--warning); }
    .dc-stat.success { background: var(--success-bg); }
    .dc-stat.success .dc-stat-val { color: var(--success); }
    .dc-stat.info { background: rgba(14,165,233,0.08); }
    .dc-stat.info .dc-stat-val { color: var(--accent-primary); }

    .dc-progress-wrap { margin-top: 0.875rem; }
    .dc-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
    .dc-progress-label { font-size: 0.8125rem; color: var(--text-secondary); }
    .dc-progress-value { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
    .dc-progress-track { height: 7px; border-radius: 999px; background: var(--border-color); overflow: hidden; }
    .dc-progress-fill { height: 100%; border-radius: 999px; transition: width 0.8s cubic-bezier(.4,0,.2,1); }
    .dc-progress-fill.success { background: var(--success); }
    .dc-progress-fill.warning { background: var(--warning); }
    .dc-progress-fill.danger { background: var(--danger); }
    .dc-progress-fill.info { background: var(--accent-primary); }

    .dc-divider { height: 1px; background: var(--border-color); margin: 0.875rem 0; }

    .dc-row { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.5rem; border-radius: 8px; font-size: 0.875rem; }
    .dc-row:hover { background: var(--bg-secondary); }
    .dc-row-label { color: var(--text-secondary); }
    .dc-row-value { font-weight: 600; color: var(--text-primary); }
    .dc-row-value.danger { color: var(--danger); }
    .dc-row-value.warning { color: var(--warning); }
    .dc-row-value.success { color: var(--success); }

    .dc-pill { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
    .dc-pill.danger { background: var(--danger-bg); color: var(--danger); }
    .dc-pill.warning { background: var(--warning-bg); color: var(--warning); }
    .dc-pill.success { background: var(--success-bg); color: var(--success); }
    .dc-pill.info { background: rgba(14,165,233,0.1); color: var(--accent-primary); }
    .dc-pill.neutral { background: var(--bg-secondary); color: var(--text-secondary); }

    .dc-attention-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.55rem 0.75rem; border-radius: 8px; margin-bottom: 0.3rem; border-left: 3px solid; }
    .dc-attention-item.danger { background: var(--danger-bg); border-color: var(--danger); }
    .dc-attention-item.warning { background: var(--warning-bg); border-color: var(--warning); }
    .dc-attention-item.info { background: rgba(14,165,233,0.06); border-color: var(--accent-primary); }
    .dc-attention-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .dc-attention-main--stacked {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.15rem;
      flex-wrap: nowrap;
    }
    .dc-attention-text { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .dc-attention-main--stacked .dc-attention-text { flex: none; width: 100%; }
    .dc-attention-sub {
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .dc-attention-sub-label {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.65rem;
      color: var(--text-muted);
      margin-right: 0.15rem;
    }
    .dc-attention-chip { font-size: 0.7rem; color: var(--text-secondary); background: rgba(0,0,0,0.07); padding: 0.1rem 0.45rem; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
    .dc-attention-badge { font-size: 0.68rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; padding: 0.2rem 0.5rem; border-radius: 999px; }
    .dc-attention-badge.danger { background: var(--danger-bg); color: var(--danger); }
    .dc-attention-badge.warning { background: var(--warning-bg); color: var(--warning); }
    .dc-attention-badge.info { background: rgba(14,165,233,0.1); color: var(--accent-primary); }
    .dc-attention-summary { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
    .dc-attention-count { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 999px; }
    .dc-attention-count.danger { background: var(--danger-bg); color: var(--danger); }
    .dc-attention-count.warning { background: var(--warning-bg); color: var(--warning); }
    .dc-attention-count.info { background: rgba(14,165,233,0.1); color: var(--accent-primary); }
    .dash-att-crew { font-weight: 600; color: var(--text-primary); }
    .dash-att-cert { font-weight: 500; color: var(--text-primary); }

    .dc-vessel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
    .dc-vessel-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 0.875rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; background: var(--bg-secondary); position: relative; }
    .dc-vessel-card:hover { border-color: var(--accent-primary); box-shadow: 0 2px 14px rgba(0,0,0,0.15); }
    .dc-vessel-card--emergency {
      border-color: transparent;
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
    }
    .dc-vessel-card--emergency::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      padding: 2px;
      background: conic-gradient(from 0deg, transparent 0deg 250deg, var(--danger) 290deg, #ff6b6b 330deg, transparent 360deg);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      animation: dc-vessel-emergency-spin 2s linear infinite;
      pointer-events: none;
    }
    .dc-vessel-card--emergency:hover {
      border-color: transparent;
      box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), 0 2px 14px rgba(239, 68, 68, 0.18);
    }
    @keyframes dc-vessel-emergency-spin {
      to { transform: rotate(360deg); }
    }
    .dc-vessel-emergency-banner {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin: -0.2rem -0.15rem 0.55rem;
      padding: 0.4rem 0.55rem;
      border-radius: 8px;
      background: var(--danger-bg);
      color: var(--danger);
      font-size: 0.68rem;
      font-weight: 700;
      line-height: 1.25;
      min-width: 0;
    }
    .dc-vessel-emergency-banner svg { flex-shrink: 0; }
    .dc-vessel-emergency-label {
      text-transform: uppercase;
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }
    .dc-vessel-emergency-plan {
      color: var(--text-primary);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 1;
    }
    .cp-mayday-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 0.65rem 1rem;
      font-size: 0.82rem;
    }
    .cp-mayday-item label {
      display: block;
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-secondary);
      margin-bottom: 0.15rem;
      font-weight: 700;
    }
    .cp-mayday-item span {
      color: var(--text-primary);
      font-weight: 500;
      word-break: break-word;
    }
    .cp-mayday-item span.mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.8rem;
    }
    .cp-emergency-chat-messages {
      flex: 1;
      min-height: 160px;
      max-height: 320px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0.5rem;
      background: var(--bg-body);
      border: 1px solid var(--border-color);
      border-radius: 8px;
    }
    .cp-chat-msg { max-width: 95%; align-self: flex-start; }
    .cp-chat-msg--mine { align-self: flex-end; }
    .cp-chat-msg-meta { font-size: 0.65rem; color: var(--text-secondary); margin-bottom: 0.15rem; }
    .cp-chat-msg-body {
      font-size: 0.85rem;
      padding: 0.45rem 0.6rem;
      border-radius: 8px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      white-space: pre-wrap;
    }
    .cp-chat-msg--mine .cp-chat-msg-body {
      background: rgba(14, 165, 233, 0.12);
      border-color: rgba(14, 165, 233, 0.25);
    }
    .cp-emergency-chat-compose-wrap {
      display: flex;
      gap: 0.5rem;
      align-items: stretch;
    }
    .cp-emergency-chat-compose-wrap textarea {
      flex: 1;
      resize: vertical;
      min-height: 5.5rem;
    }
    .cp-emergency-chat-actions {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 0.5rem;
      width: 4.75rem;
      flex-shrink: 0;
    }
    .cp-emergency-chat-actions .btn {
      width: 100%;
      min-height: 0;
      height: 100%;
      margin: 0;
      padding: 0.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .cp-emergency-chat-pending {
      display: none;
      flex-wrap: wrap;
      gap: 0.35rem;
      font-size: 0.78rem;
    }
    .cp-chat-pending-file {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.2rem 0.45rem;
      border-radius: 6px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
    }
    .cp-chat-pending-remove {
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      padding: 0;
    }
    .cp-chat-msg-attachments { margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.35rem; }
    .cp-chat-att-img { max-width: 220px; max-height: 160px; border-radius: 8px; display: block; }
    .cp-chat-att-file a { font-size: 0.82rem; color: inherit; }
    .dc-vessel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; }
    .dc-vessel-name { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
    .dc-vessel-status { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
    .dc-vessel-status.at-sea { background: rgba(14,165,233,0.12); color: #0ea5e9; }
    .dc-vessel-status.in-port { background: var(--success-bg); color: var(--success); }
    .dc-vessel-status.unknown { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-color); }
    .dc-vessel-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .dc-vessel-dot.at-sea { background: #0ea5e9; }
    .dc-vessel-dot.in-port { background: var(--success); }
    .dc-vessel-dot.unknown { background: var(--text-secondary); }
    .dc-vessel-report { font-size: 0.74rem; color: var(--text-secondary); margin-bottom: 0.65rem; display: flex; align-items: center; gap: 0.3rem; }
    .dc-vessel-report.submitted { color: var(--success); }
    .dc-vessel-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
    .dc-vessel-stat { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.5rem; border-radius: 8px; background: var(--bg-card); }
    .dc-vessel-stat-val { font-size: 1.1rem; font-weight: 800; line-height: 1; color: var(--text-primary); }
    .dc-vessel-stat-val.bad { color: var(--danger); }
    .dc-vessel-stat-val.warn { color: var(--warning); }
    .dc-vessel-stat-val.ok { color: var(--success); }
    .dc-vessel-stat-lbl { font-size: 0.63rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }

    .dc-pms-chart { display: flex; flex-direction: column; gap: 0.4rem; }
    .dc-pms-row { display: flex; align-items: center; gap: 0.625rem; }
    .dc-pms-label { font-size: 0.75rem; color: var(--text-secondary); width: 110px; text-align: right; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dc-pms-track { flex: 1; height: 18px; border-radius: 6px; background: var(--bg-secondary); display: flex; overflow: hidden; min-width: 0; }
    .dc-pms-overdue { background: var(--danger); border-radius: 6px 0 0 6px; flex-shrink: 0; transition: width 0.6s ease; }
    .dc-pms-due { background: var(--warning); flex-shrink: 0; transition: width 0.6s ease; }
    .dc-pms-ok { background: var(--success-bg); flex: 1; }
    .dc-pms-count { font-size: 0.72rem; width: 28px; text-align: right; flex-shrink: 0; color: var(--text-secondary); font-weight: 600; }
    .dc-pms-legend { display: flex; gap: 1rem; margin-top: 0.625rem; font-size: 0.75rem; color: var(--text-secondary); padding-left: 116px; }
    .dc-pms-legend-item { display: flex; align-items: center; gap: 0.35rem; }
    .dc-pms-legend-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }

    .dc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 1rem; gap: 0.5rem; color: var(--text-secondary); text-align: center; font-size: 0.875rem; }

    .dc-drill-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.5rem; border-radius: 8px; font-size: 0.875rem; }
    .dc-drill-row:hover { background: var(--bg-secondary); }
    .dc-drill-name { color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

    .dc-logbook-block { background: var(--bg-secondary); border-radius: 10px; padding: 0.875rem 1rem; }
    .dc-logbook-date { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
    .dc-logbook-meta { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.25rem; }

    .dc-sub-header { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); font-weight: 600; margin-bottom: 0.5rem; margin-top: 1rem; }
    .dc-sub-header:first-child { margin-top: 0; }

    .dc-card-header { display: flex; align-items: center; justify-content: space-between; }
    /* Body inner — filled by #my-dashboard-cards rules above when on dashboard */
    .dash-card-body-inner {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    #my-dashboard-cards .dc-empty {
      flex: 1;
      min-height: 0;
      padding: 1rem;
    }
    /* Clickable items inside dashboard cards */
    .dc-nav-item {
      cursor: pointer;
      transition: opacity 0.15s ease, background 0.15s ease;
      border-radius: 6px;
    }
    .dc-nav-item:hover { opacity: 0.75; }
    .dc-nav-item:active { opacity: 0.55; }
    [data-nav]:not(.dc-open-btn):not(button):not(a) { cursor: pointer; }
    [data-nav]:not(.dc-open-btn):not(button):not(a):hover { opacity: 0.78; }
    /* Entire card body clickable (cards with a nav wrapper) */
    .dc-card-nav-body { cursor: pointer; flex: 1; }
    .dc-card-nav-body:hover .dc-stat { background: var(--bg-secondary); }
    /* List rows with nav */
    .dc-row-nav {
      cursor: pointer;
      transition: background 0.12s ease;
      border-radius: 6px;
    }
    .dc-row-nav:hover { background: var(--bg-secondary); }
    .dc-card-title-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
    .dc-card-icon { color: var(--accent-primary); flex-shrink: 0; opacity: 0.75; }
    .dc-open-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; padding: 0;
      border: 1px solid var(--border-color); border-radius: 6px;
      background: transparent; color: var(--text-secondary);
      cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .dc-open-btn:hover { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--accent-primary); }

    .dc-hero-block { text-align: center; padding: 0.5rem 0.5rem 0.25rem; }
    .dc-hero-val { font-size: 2.75rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
    .dc-hero-val.danger { color: var(--danger); }
    .dc-hero-val.warning { color: var(--warning); }
    .dc-hero-val.success { color: var(--success); }
    .dc-hero-val.info { color: var(--accent-primary); }
    .dc-hero-lbl { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.06em; }

    .dc-ai-card { background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(99,102,241,0.1)); border-radius: 10px; padding: 1rem; text-align: center; }
    .dc-ai-card p { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 0.75rem; }
    /* ─────────────────────────────────────────────────────────────────── */

    .card-body {
      padding: 1.25rem;
    }

    /* Procurement Config - Full Width */
    .procurement-config-content {
      width: 100%;
    }

    #page-procurement-config .procurement-config-tabs {
      display: flex;
      align-items: center;
      gap: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 1.5rem;
      padding-bottom: 0;
    }
    #page-procurement-config .procurement-config-tabs::-webkit-scrollbar { display: none; }
    #page-procurement-config .procurement-config-tab {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.7rem 1.1rem;
      font-size: 0.85rem;
      font-weight: 500;
      font-family: inherit;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      border-radius: 0;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
      white-space: nowrap;
      letter-spacing: 0.01em;
    }
    #page-procurement-config .procurement-config-tab svg { flex-shrink: 0; opacity: 0.7; }
    #page-procurement-config .procurement-config-tab:hover { color: var(--text-primary); }
    #page-procurement-config .procurement-config-tab:hover svg { opacity: 1; }
    #page-procurement-config .procurement-config-tab.active {
      color: var(--accent-primary, #3b82f6);
      border-bottom-color: var(--accent-primary, #3b82f6);
      font-weight: 600;
    }
    #page-procurement-config .procurement-config-tab.active svg { opacity: 1; }
    @media (max-width: 700px) {
      #page-procurement-config .procurement-config-tab { padding: 0.6rem 0.75rem; font-size: 0.8rem; }
    }

    .procurement-config-content .card {
      width: 100%;
    }

    .procurement-config-content .table-container {
      width: 100%;
      overflow-x: auto;
    }

    .procurement-config-content .data-table {
      width: 100%;
      table-layout: auto;
    }

    .procurement-config-content .data-table th,
    .procurement-config-content .data-table td {
      padding: 0.75rem;
      white-space: nowrap;
      text-align: left;
    }

    .procurement-config-content .data-table th:not([style*="width"]),
    .procurement-config-content .data-table td:not([style*="width"]) {
      white-space: normal;
    }

    /* Drill Config - Full Width */
    .drill-config-tab {
      width: 100%;
    }

    .drill-config-tab .card {
      width: 100%;
    }

    #page-catering-config .card {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    #page-catering-config .card-body {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    #page-catering-config .table-responsive {
      width: 100%;
    }
    #page-catering-config .table {
      width: 100%;
    }
    #page-catering-config .table td .form-input,
    #page-catering-config .table td .form-select {
      width: 100%;
      min-width: 0;
      height: 32px;
      min-height: 32px;
      font-size: 0.8125rem;
      padding: 0 0.65rem;
      border-radius: 6px;
      box-sizing: border-box;
    }
    #page-catering-config .table td .form-select {
      padding: 0 1.75rem 0 0.65rem;
      line-height: 30px;
    }
    #page-catering-config .table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
      text-align: left;
    }
    #page-catering-config .table thead th {
      background: var(--bg-secondary, rgba(148, 163, 184, 0.08));
      color: var(--text-secondary);
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 0.6rem 0.85rem;
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
      user-select: none;
      text-align: left;
    }
    #page-catering-config .table tbody td {
      padding: 0.65rem 0.85rem;
      border-bottom: 1px solid var(--border-color);
      vertical-align: middle;
      color: var(--text-primary);
      transition: background 100ms ease;
    }
    #page-catering-config .table tbody tr:hover td {
      background: color-mix(in srgb, var(--accent-primary, #3b82f6) 5%, transparent);
    }
    #page-catering-config .btn-sm {
      height: 32px;
      min-height: 32px;
      padding: 0 0.85rem;
      font-size: 0.8125rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      white-space: nowrap;
      border-radius: 6px;
    }
    #page-catering-config .card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
      box-shadow: none;
    }
    #page-catering-config .card-header {
      padding: 0.85rem 1.15rem;
      border-bottom: 1px solid var(--border-color);
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      gap: 0.75rem;
    }
    #page-catering-config .card-header-main {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-width: 0;
    }
    #page-catering-config .card-header-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
    }
    #page-catering-config .card-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    #page-catering-config .card-body {
      padding: 1.15rem;
    }
    #page-catering-config .catering-config-sub-label,
    #page-catering-config .zi-compliance-inspections__label {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      margin: 0 0 0.4rem;
    }
    #catering-config-categories-list .table th,
    #catering-config-categories-list .table td {
      text-align: left;
    }

    /* ── Catering shared styles ──────────────────────────────────────── */
    .catering-empty {
      text-align: center;
      padding: 2.5rem 1rem;
      color: var(--text-secondary);
    }
    .catering-empty-icon { font-size: 2.25rem; margin-bottom: 0.5rem; }
    .catering-empty-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--text-primary); }
    .catering-empty-body { font-size: 0.875rem; margin: 0; }

    .catering-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: flex-end;
      padding: 1rem;
      border-bottom: 1px solid var(--border-color);
    }
    .catering-filter-bar label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-secondary); }
    .catering-filter-bar .form-input { font-size: 0.875rem; padding: 0.35rem 0.6rem; }

    .catering-readings-header {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.75rem 1rem;
    }
    .catering-readings-header-title {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
      min-width: 0;
    }
    .catering-readings-header-title .card-title { margin: 0; }
    .catering-readings-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: flex-end;
      width: 100%;
    }
    .catering-readings-toolbar label {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      font-size: 0.75rem;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .catering-readings-toolbar .form-input {
      font-size: 0.875rem;
      padding: 0.35rem 0.5rem;
      min-width: 9rem;
    }
    @media (min-width: 992px) {
      .catering-readings-header { flex-wrap: nowrap; align-items: center; }
      .catering-readings-header-title { flex: 0 0 auto; }
      .catering-readings-toolbar {
        width: auto;
        flex: 1 1 auto;
        justify-content: flex-end;
        margin-left: auto;
      }
    }

    .catering-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .catering-kpi {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.1rem 1.25rem;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .catering-kpi:hover {
      border-color: color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
      background: color-mix(in srgb, var(--accent-primary) 4%, var(--bg-card));
    }
    .catering-kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
    .catering-kpi-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.35rem; }
    .catering-kpi.success .catering-kpi-value { color: var(--success); }
    .catering-kpi.warning .catering-kpi-value { color: var(--warning); }
    .catering-kpi.danger .catering-kpi-value { color: var(--danger); }

    .catering-type-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500;
    }
    .catering-type-chip.cold { background: rgba(14,165,233,0.13); color: var(--accent-primary); }
    .catering-type-chip.hot  { background: rgba(245,158,11,0.13); color: var(--warning); }

    .catering-toggle-btn {
      display: inline-flex; align-items: center; gap: 0.3rem;
      background: none; border: 1px solid var(--border-color);
      border-radius: 6px; padding: 0.2rem 0.55rem;
      font-size: 0.78rem; color: var(--text-secondary); cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .catering-toggle-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
    .catering-detail-inner { padding: 0.75rem 1rem; background: var(--bg-secondary); border-left: 3px solid var(--accent-primary); }
    .catering-assets-grid {
      display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem;
    }
    .catering-asset-tile {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.55rem 0.9rem;
      border: 1px solid var(--border-color); border-radius: 10px;
      background: var(--bg-card); font-size: 0.875rem;
    }
    .catering-asset-tile .asset-icon { font-size: 1.1rem; }
    .catering-asset-tile .asset-name { font-weight: 600; color: var(--text-primary); }
    .catering-asset-tile .asset-threshold { font-size: 0.78rem; color: var(--text-secondary); }

    .catering-weekly-checklist {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      max-height: min(42vh, 320px);
      overflow-y: auto;
      margin-bottom: 1rem;
    }
    .catering-weekly-check-item {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      padding: 0.65rem 0.75rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 0.875rem;
      line-height: 1.35;
      cursor: pointer;
    }
    .catering-weekly-check-item input { margin-top: 0.2rem; flex-shrink: 0; }
    .catering-weekly-check-item.is-readonly { cursor: default; opacity: 0.95; }

    /* ── Catering list pages ─────────────────────────────────────────── */
    .catering-list-wrap { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; }
    .catering-list-card {
      width: 100%;
      max-width: 100%;
    }
    .catering-list-card .card-header {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: .75rem;
    }
    .catering-list-card .card-title { margin: 0; }
    .catering-list-count {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--bg-secondary); border: 1px solid var(--border-color);
      border-radius: 999px; padding: .1rem .6rem;
      font-size: .78rem; font-weight: 600; color: var(--text-secondary);
    }
    .catering-list-count[hidden] { display: none !important; }
    .catering-list-count--alert {
      background: var(--danger-bg, rgba(220, 53, 69, 0.12));
      color: var(--danger, #dc3545);
      border-color: transparent;
    }
    #page-catering-config .btn,
    #page-catering-dashboard .btn {
      transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #page-catering-config .btn:active,
    #page-catering-dashboard .btn:active {
      transform: scale(0.97);
    }
    .catering-unmapped-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin: 0 0 0.85rem;
      padding: 0.55rem 0.75rem;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-card));
    }
    #catering-unmapped-ignore-selected:disabled {
      opacity: 0.45;
    }
    .catering-unmapped-new-field {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      margin-top: 0.45rem;
    }
    .catering-unmapped-new-field[hidden] { display: none !important; }
    .catering-unmapped-new-field > span {
      flex: 0 0 5.75rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-secondary);
    }
    .catering-unmapped-new-field .form-input {
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      margin-top: 0;
    }
    #catering-config-normalized-items-list td.catering-normalized-actions,
    #catering-config-normalized-items-list th.catering-normalized-actions {
      width: 5.5rem;
      min-width: 5.5rem;
      white-space: nowrap;
      vertical-align: middle;
      text-align: right;
    }
    #catering-config-normalized-items-list .catering-normalized-save {
      visibility: hidden;
      pointer-events: none;
    }
    #catering-config-normalized-items-list .catering-normalized-save.is-dirty {
      visibility: visible;
      pointer-events: auto;
    }
    #page-catering-config .card-title,
    #page-catering-dashboard .card-title {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.45rem;
      letter-spacing: -0.011em;
      line-height: 1.25;
    }
    #page-catering-config .card-title svg,
    #page-catering-dashboard .card-title svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      opacity: 0.72;
    }
    #page-catering-config .catering-config-lead {
      margin: 0 0 0.85rem;
      font-size: 0.875rem;
      line-height: 1.45;
    }
    #page-catering-config .page-title,
    #page-catering-dashboard .page-title {
      letter-spacing: -0.02em;
      line-height: 1.15;
    }
    #page-catering-config > .catering-config-top-grid:has(> :only-child) {
      grid-template-columns: 1fr;
    }
    #catering-config-unmapped-card .table td .form-input,
    #catering-config-unmapped-card .table td .form-select {
      padding: 0.45rem 0.7rem;
      font-size: 0.875rem;
      min-height: 2.25rem;
      border-radius: 8px;
    }
    #catering-config-unmapped-card .catering-unmapped-table th,
    #catering-config-unmapped-card .catering-unmapped-table td {
      vertical-align: middle;
    }
    #catering-config-unmapped-card td.catering-unmapped-actions {
      display: table-cell;
      white-space: nowrap;
    }
    .catering-unmapped-actions-inner {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      vertical-align: middle;
    }
    .catering-unmapped-name {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1rem;
    }
    .catering-unmapped-code {
      font-variant-numeric: tabular-nums;
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .catering-unmapped-filter {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8125rem;
      color: var(--text-secondary);
    }
    .catering-unmapped-check-cell { width: 2.25rem; }
    .catering-unmapped-check {
      width: 1.05rem;
      height: 1.05rem;
      accent-color: var(--primary, #2563eb);
    }
    #page-catering-config .catering-unmapped-row.is-selected td {
      background: var(--bg-secondary);
    }
    @media (hover: hover) and (pointer: fine) {
      #page-catering-config .catering-unmapped-row:hover td {
        background: var(--bg-card-hover, var(--bg-secondary));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #page-catering-config .btn,
      #page-catering-dashboard .btn { transition: none; }
      #page-catering-config .btn:active,
      #page-catering-dashboard .btn:active { transform: none; }
    }
    .catering-summary-row {
      display: flex; flex-wrap: wrap; gap: 1.25rem;
      padding: .9rem 1.25rem; border-bottom: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }
    .catering-summary-item { display: flex; flex-direction: column; gap: .15rem; }
    .catering-summary-value { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
    .catering-summary-label { font-size: .75rem; color: var(--text-secondary); }
    .catering-table-filter {
      display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end;
      padding: .75rem 1.25rem; border-bottom: 1px solid var(--border-color);
    }
    .catering-table-filter label {
      display: flex; flex-direction: column; gap: .2rem;
      font-size: .78rem; color: var(--text-secondary);
    }
    .catering-table-filter .form-input { font-size: .875rem; padding: .3rem .55rem; }
    .catering-summary-item-clickable {
      cursor: pointer;
      border-radius: 8px;
      padding: .2rem .5rem;
      margin: -.2rem -.5rem;
      transition: background .15s ease;
    }
    .catering-summary-item-clickable:hover { background: color-mix(in srgb, var(--warning) 10%, transparent); }

    /* Provision purchases page */
    .catering-purchases-toolbar {
      display: flex; flex-wrap: wrap; gap: .65rem; align-items: flex-end;
      padding: .85rem 1.25rem; border-bottom: 1px solid var(--border-color);
      background: var(--bg-card);
    }
    .catering-purchases-toolbar label {
      display: flex; flex-direction: column; gap: .25rem;
      font-size: .78rem; font-weight: 600; color: var(--text-secondary);
    }
    .catering-purchases-toolbar .form-input,
    .catering-purchases-toolbar .form-select { font-size: .875rem; padding: .4rem .6rem; }
    .catering-purchases-focus-banner {
      display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem;
      margin: 0 1.25rem 0; padding: .75rem 1rem;
      border-radius: 8px; border-left: 3px solid var(--warning);
      background: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
      font-size: .875rem;
    }
    .catering-purchases-focus-banner + .catering-purchases-toolbar { margin-top: 1rem; }
    .catering-purchases-empty-filtered { padding: 2rem 1rem; text-align: center; color: var(--text-secondary); font-size: .875rem; }
    .catering-purchases-table tbody tr:not([id^="catering-purchase-detail-"]):hover {
      background: color-mix(in srgb, var(--accent-primary) 4%, transparent);
    }
    .catering-purchase-row-needs-alloc {
      box-shadow: inset 3px 0 0 var(--warning);
    }
    .catering-line-row-unalloc {
      background: color-mix(in srgb, var(--warning) 9%, transparent) !important;
    }
    .catering-line-row-unalloc .catering-edit-alloc { border-color: var(--warning); }
    .catering-alloc-badge {
      display: inline-flex; align-items: center; gap: .3rem;
      padding: .18rem .6rem; border-radius: 999px;
      font-size: .72rem; font-weight: 700; white-space: nowrap;
    }
    .catering-alloc-badge.is-ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
    .catering-alloc-badge.is-warn { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
    .catering-alloc-badge.is-muted { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border-color); }

    /* Crew shop item tiles */
    .catering-shop-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 1rem; padding: 1.25rem;
    }
    .catering-shop-tile {
      background: var(--bg-secondary); border: 1px solid var(--border-color);
      border-radius: 10px; padding: 1rem 1.1rem;
      display: flex; flex-direction: column; gap: .35rem;
    }
    .catering-shop-tile-name { font-weight: 600; font-size: .9375rem; color: var(--text-primary); }
    .catering-shop-tile-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--text-secondary); }
    .catering-shop-tile-prices {
      display: flex; gap: .75rem; margin-top: .25rem;
      font-size: .875rem;
    }
    .catering-shop-tile-price { display: flex; flex-direction: column; gap: .05rem; }
    .catering-shop-tile-price .price-val { font-weight: 700; color: var(--text-primary); }
    .catering-shop-tile-price .price-lbl { font-size: .7rem; color: var(--text-secondary); }
    .catering-shop-tile-stock {
      display: inline-flex; align-items: center; gap: .3rem;
      margin-top: .2rem; font-size: .78rem;
      background: var(--bg-card); border: 1px solid var(--border-color);
      border-radius: 6px; padding: .15rem .55rem;
      color: var(--text-secondary); width: fit-content;
    }
    .catering-summary-value.is-success { color: var(--success); }
    .catering-summary-value.is-warning { color: var(--warning); }

    /* Catering budgets */
    .catering-budget-hero {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: .85rem;
      padding: 1.1rem 1.25rem 1.25rem;
      border-bottom: 1px solid var(--border-color);
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 8%, var(--bg-secondary)) 0%, var(--bg-secondary) 100%);
    }
    .catering-budget-stat {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: .85rem 1rem;
      display: flex;
      flex-direction: column;
      gap: .2rem;
      min-height: 4.5rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .catering-budget-stat.is-highlight {
      border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--border-color));
      background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-card));
    }
    .catering-budget-stat-value {
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    .catering-budget-stat-value.is-accent { color: var(--accent-primary); }
    .catering-budget-stat-label {
      font-size: .74rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--text-secondary);
    }
    .catering-budget-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
      padding: 1.25rem;
    }
    .catering-budget-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .catering-budget-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: .75rem;
      padding: 1rem 1.1rem .75rem;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }
    .catering-budget-card-title {
      margin: 0;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.25;
    }
    .catering-budget-card-dates {
      margin: .25rem 0 0;
      font-size: .8rem;
      color: var(--text-secondary);
    }
    .catering-budget-badge {
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      flex-shrink: 0;
      padding: .2rem .55rem;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .03em;
      border: 1px solid transparent;
    }
    .catering-budget-badge.is-active {
      color: var(--success);
      background: color-mix(in srgb, var(--success) 12%, transparent);
      border-color: color-mix(in srgb, var(--success) 35%, transparent);
    }
    .catering-budget-badge.is-upcoming {
      color: var(--info, #0d6efd);
      background: color-mix(in srgb, var(--info, #0d6efd) 10%, transparent);
      border-color: color-mix(in srgb, var(--info, #0d6efd) 30%, transparent);
    }
    .catering-budget-badge.is-ended {
      color: var(--text-secondary);
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    .catering-budget-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .65rem;
      padding: .95rem 1.1rem;
    }
    .catering-budget-metric {
      display: flex;
      flex-direction: column;
      gap: .15rem;
      min-width: 0;
    }
    .catering-budget-metric-val {
      font-size: .95rem;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .catering-budget-metric-lbl {
      font-size: .68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--text-secondary);
    }
    .catering-budget-card-foot {
      margin-top: auto;
      padding: .85rem 1.1rem;
      border-top: 1px solid var(--border-color);
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: .75rem;
      background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-card));
    }
    .catering-budget-total-label {
      font-size: .75rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .catering-budget-total-value {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--accent-primary);
      letter-spacing: -0.02em;
    }
    .catering-budget-progress {
      margin: 0 1.1rem .85rem;
      height: 8px;
      border-radius: 999px;
      background: var(--bg-secondary);
      overflow: hidden;
      border: 1px solid var(--border-color);
    }
    .catering-budget-progress-bar {
      height: 100%;
      border-radius: 999px;
      background: var(--accent-primary);
      transition: width .2s ease;
    }
    .catering-budget-progress-bar.is-warn { background: var(--warning); }
    .catering-budget-progress-bar.is-over { background: var(--danger); }
    .catering-budget-spend-row {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem 1rem;
      padding: 0 1.1rem .85rem;
      font-size: .8rem;
      color: var(--text-secondary);
    }
    .catering-budget-spend-row strong { color: var(--text-primary); }
    .catering-budget-pace {
      font-size: .75rem;
      font-weight: 600;
      margin: 0 1.1rem .85rem;
    }
    .catering-budget-pace.is-ahead { color: var(--danger); }
    .catering-budget-pace.is-behind { color: var(--success); }
    .catering-budget-pace.is-ontrack { color: var(--text-secondary); }
    .catering-budget-unalloc-warn {
      margin: 0 1.25rem 1rem;
      padding: .75rem 1rem;
      border-radius: 8px;
      border-left: 3px solid var(--warning);
      background: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
      font-size: .875rem;
      color: var(--text-primary);
    }
    .catering-purchase-line {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 70px 55px 80px minmax(110px, 0.9fr);
      gap: 0.5rem;
      align-items: end;
      margin-bottom: 0.5rem;
    }
    .catering-purchase-line-split {
      grid-column: 1 / -1;
      display: none;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0.5rem 0.65rem;
      background: var(--bg-secondary);
      border-radius: 8px;
      border: 1px solid var(--border-color);
      margin-bottom: 0.35rem;
    }
    .catering-purchase-line-split.is-open { display: flex; }

    /* Catering dietary */
    .catering-dietary-toolbar-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1rem 1.15rem;
      margin-bottom: 1.25rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    .catering-dietary-toolbar-card .form-label {
      margin-bottom: .45rem;
      font-size: .78rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--text-secondary);
    }
    .catering-dietary-toolbar-card .form-input {
      max-width: 100%;
    }
    .catering-dietary-overview {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 1.25rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .catering-dietary-overview-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      padding: 1rem 1.15rem;
      border-bottom: 1px solid var(--border-color);
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 7%, var(--bg-secondary)) 0%, var(--bg-secondary) 100%);
    }
    .catering-dietary-overview-title {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    .catering-dietary-overview-meta {
      margin: .3rem 0 0;
      font-size: .82rem;
      color: var(--text-secondary);
    }
    .catering-dietary-hero {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: .75rem;
      padding: 1rem 1.15rem;
      border-bottom: 1px solid var(--border-color);
    }
    .catering-dietary-stat {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: .75rem .85rem;
      display: flex;
      flex-direction: column;
      gap: .15rem;
    }
    .catering-dietary-stat-value {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.15;
    }
    .catering-dietary-stat-value.is-accent { color: var(--accent-primary); }
    .catering-dietary-stat-value.is-warning { color: var(--warning); }
    .catering-dietary-stat-label {
      font-size: .7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--text-secondary);
    }
    .catering-dietary-section {
      padding: 1rem 1.15rem 1.15rem;
    }
    .catering-dietary-section-title {
      margin: 0 0 .75rem;
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--text-secondary);
    }
    .catering-dietary-tag-grid {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
    }
    .catering-dietary-tag-chip {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .35rem .65rem;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      font-size: .8rem;
      color: var(--text-primary);
    }
    .catering-dietary-tag-chip .count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.35rem;
      height: 1.35rem;
      padding: 0 .35rem;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 700;
      background: var(--bg-card);
      border: 1px solid color-mix(in srgb, currentColor 20%, var(--border-color));
    }
    .catering-dietary-tag-chip.is-allergy {
      color: var(--danger);
      background: color-mix(in srgb, var(--danger) 10%, var(--bg-secondary));
      border-color: color-mix(in srgb, var(--danger) 28%, var(--border-color));
    }
    .catering-dietary-tag-chip.is-preference {
      color: var(--info, #0d6efd);
      background: color-mix(in srgb, var(--info, #0d6efd) 10%, var(--bg-secondary));
      border-color: color-mix(in srgb, var(--info, #0d6efd) 28%, var(--border-color));
    }
    .catering-dietary-empty-tags {
      font-size: .875rem;
      color: var(--text-muted);
      font-style: italic;
    }
    .catering-dietary-matrix-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .catering-dietary-matrix-card .card-header {
      padding: .85rem 1.15rem;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }
    .catering-dietary-matrix-wrap {
      overflow: auto;
      max-width: 100%;
    }
    .catering-dietary-matrix {
      width: 100%;
      min-width: 640px;
      border-collapse: separate;
      border-spacing: 0;
    }
    .catering-dietary-matrix th,
    .catering-dietary-matrix td {
      border-bottom: 1px solid var(--border-color);
      padding: .55rem .5rem;
      font-size: .8rem;
    }
    .catering-dietary-matrix thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--bg-secondary);
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .03em;
      color: var(--text-secondary);
      text-align: center;
      white-space: nowrap;
    }
    .catering-dietary-matrix thead th:first-child {
      left: 0;
      z-index: 3;
      text-align: left;
      min-width: 10rem;
    }
    .catering-dietary-matrix tbody tr:hover td {
      background: color-mix(in srgb, var(--accent-primary) 4%, transparent);
    }
    .catering-dietary-matrix tbody td:first-child {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--bg-card);
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
    }
    .catering-dietary-matrix-cell {
      text-align: center;
      width: 2.5rem;
      vertical-align: middle;
    }
    .catering-dietary-matrix-cell.is-on {
      color: var(--danger);
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1;
    }
    .catering-dietary-matrix-cell.is-pref.is-on {
      color: var(--info, #0d6efd);
    }
    .catering-dietary-notes-table td {
      font-size: .85rem;
      vertical-align: top;
    }
    .catering-dietary-notes-table td:first-child {
      font-weight: 600;
      white-space: nowrap;
    }

    .catering-crew-shop-toolbar {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .5rem;
      margin-left: auto;
    }
    .catering-crew-shop-toolbar label {
      font-size: .8rem;
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      gap: .35rem;
    }
    .catering-crew-shop-toolbar .form-input {
      width: auto;
      min-width: 8rem;
      padding: .28rem .5rem;
      font-size: .85rem;
    }
    .catering-crew-shop-toolbar-range {
      font-size: .8rem;
      color: var(--text-secondary);
    }
    .catering-settlement-actions {
      display: flex;
      gap: .35rem;
      flex-wrap: wrap;
    }
    .catering-settlement-readonly {
      color: var(--text-muted);
      font-size: .8rem;
      display: inline-flex;
      align-items: center;
      gap: .25rem;
    }
    .catering-crew-shop-perm-note {
      margin: .35rem 0 0;
      font-size: .85rem;
      color: var(--text-secondary);
    }
    .catering-crew-shop-toolbar .perm-help,
    .catering-settlement-readonly .perm-help {
      margin-left: 0;
    }

    /* All catering pages: tables fill cards; consistent page chrome */
    [id^="page-catering-"] {
      container-type: inline-size;
      container-name: catering-page;
    }
    [id^="page-catering-"] > .page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 0.25rem;
    }
    [id^="page-catering-"] > .page-header .page-title { margin: 0; }
    [id^="page-catering-"] > .page-header .page-subtitle {
      margin: 0.35rem 0 0;
      max-width: 42rem;
    }
    [id^="page-catering-"] .page-header-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-inline-start: auto;
    }
    #catering-dashboard-content,
    #catering-compliance-content {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      width: 100%;
      margin-top: 0.25rem;
    }
    #catering-dashboard-content > .catering-kpi-grid,
    #catering-compliance-content > .catering-kpi-grid {
      margin-bottom: 0;
    }
    [id^="page-catering-"] .catering-list-card .table-responsive,
    [id^="page-catering-"] .card .table-responsive,
    [id^="page-catering-"] .catering-dietary-matrix-wrap {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    [id^="page-catering-"] .catering-list-card .table,
    [id^="page-catering-"] .card > .table-responsive > .table,
    [id^="page-catering-"] .card-body > .table-responsive > .table,
    [id^="page-catering-"] .catering-dietary-notes-table,
    [id^="page-catering-"] .catering-purchases-table {
      width: 100%;
      min-width: 100%;
      table-layout: auto;
      border-collapse: collapse;
    }
    [id^="page-catering-"] .catering-list-card .table th,
    [id^="page-catering-"] .catering-list-card .table td,
    [id^="page-catering-"] .card > .table-responsive > .table th,
    [id^="page-catering-"] .card > .table-responsive > .table td,
    [id^="page-catering-"] .card-body > .table-responsive > .table th,
    [id^="page-catering-"] .card-body > .table-responsive > .table td,
    [id^="page-catering-"] .catering-dietary-notes-table th,
    [id^="page-catering-"] .catering-dietary-notes-table td,
    [id^="page-catering-"] .catering-purchases-table th,
    [id^="page-catering-"] .catering-purchases-table td {
      text-align: left;
      padding: 0.75rem 1.25rem;
      vertical-align: top;
      border-bottom: 1px solid var(--border-color);
    }
    [id^="page-catering-"] .catering-list-card .table th,
    [id^="page-catering-"] .card > .table-responsive > .table th,
    [id^="page-catering-"] .card-body > .table-responsive > .table th,
    [id^="page-catering-"] .catering-dietary-notes-table th,
    [id^="page-catering-"] .catering-purchases-table th {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      white-space: nowrap;
      background: var(--bg-secondary);
    }
    [id^="page-catering-"] .catering-list-card .table tbody tr:last-child td,
    [id^="page-catering-"] .card > .table-responsive > .table tbody tr:last-child td,
    [id^="page-catering-"] .card-body > .table-responsive > .table tbody tr:last-child td,
    [id^="page-catering-"] .catering-dietary-notes-table tbody tr:last-child td,
    [id^="page-catering-"] .catering-purchases-table tbody tr:last-child td {
      border-bottom: none;
    }
    [id^="page-catering-"] .catering-list-card .table tbody tr:hover td,
    [id^="page-catering-"] .card > .table-responsive > .table tbody tr:hover td,
    [id^="page-catering-"] .card-body > .table-responsive > .table tbody tr:hover td {
      background: color-mix(in srgb, var(--accent-primary) 4%, transparent);
    }
    #page-catering-config .catering-unmapped-row.is-selected td,
    #page-catering-config .catering-unmapped-row.is-selected:hover td {
      background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-card));
    }
    #catering-config-unmapped-card .catering-unmapped-table th,
    #catering-config-unmapped-card .catering-unmapped-table td {
      vertical-align: middle;
    }
    [id^="page-catering-"] .catering-empty {
      padding: 2.75rem 1.25rem;
    }
    [id^="page-catering-"] .catering-shop-grid {
      width: 100%;
      box-sizing: border-box;
    }
    #page-catering-crew-shop .catering-crew-bill-card .table-responsive {
      width: 100%;
    }
    #page-catering-crew-shop .catering-crew-bill-card .table {
      width: 100%;
      min-width: 100%;
    }
    #page-catering-config .card {
      width: 100%;
      margin-bottom: 1.5rem !important;
    }
    #page-catering-config .catering-config-top-grid {
      margin-bottom: 1.5rem !important;
    }
    #page-catering-config .catering-config-top-grid > .card {
      margin-bottom: 0 !important;
    }
    .catering-bva-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 0.85rem;
      width: 100%;
    }
    .catering-bva-card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 0.85rem 1rem;
      background: var(--bg-secondary);
      min-width: 0;
    }
    .catering-bva-card h4 {
      margin: 0 0 0.25rem;
      font-size: 0.95rem;
      color: var(--text-primary);
    }
    .catering-bva-meta {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-bottom: 0.55rem;
    }
    .catering-loading {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1.75rem 0.25rem;
      color: var(--text-secondary);
    }
    .catering-status-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem 1.75rem;
    }
    .catering-status-strip > span {
      min-width: 7rem;
    }
    .catering-status-strip strong {
      display: block;
      margin-bottom: 0.2rem;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .catering-quick-link-card .card-body {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    .catering-alert-card {
      border-left: 3px solid var(--warning);
    }
    .catering-alert-card .card-body {
      padding: 0.85rem 1.15rem;
    }
    .catering-alert-card p {
      margin: 0.25rem 0;
      color: var(--warning);
    }
    [id^="page-catering-"] .card.catering-list-card,
    #catering-dashboard-content > .card,
    #catering-compliance-content > .card {
      width: 100%;
      max-width: 100%;
    }
    @container catering-page (inline-size < 640px) {
      [id^="page-catering-"] > .page-header {
        flex-direction: column;
        align-items: stretch;
      }
      [id^="page-catering-"] .page-header-actions {
        margin-inline-start: 0;
        width: 100%;
      }
      [id^="page-catering-"] .page-header-actions .btn {
        flex: 1 1 auto;
      }
    }

    .catering-crew-bill-list {
      display: flex;
      flex-direction: column;
      gap: .75rem;
      padding: 1rem 1.25rem 1.25rem;
    }
    .catering-crew-bill-card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-secondary);
      padding: .9rem 1rem;
    }
    .catering-crew-bill-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: .75rem;
      flex-wrap: wrap;
      margin-bottom: .65rem;
    }
    .catering-crew-bill-name {
      font-weight: 600;
      color: var(--text-primary);
      font-size: .95rem;
    }
    .catering-crew-bill-meta {
      font-size: .78rem;
      color: var(--text-secondary);
      margin-top: .15rem;
    }
    .catering-crew-bill-totals {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem 1.25rem;
      font-size: .8rem;
      color: var(--text-secondary);
      margin-bottom: .65rem;
    }
    .catering-crew-bill-totals strong {
      color: var(--text-primary);
    }

    /* Config page grid */
    .catering-config-top-grid {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: 1rem;
      width: 100%;
      margin-bottom: 1rem;
      align-items: stretch;
    }
    .catering-config-top-grid > .card {
      margin-bottom: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    .catering-config-top-grid > .card .card-body {
      flex: 1;
      min-height: 0;
    }
    @container catering-page (inline-size < 900px) {
      .catering-config-top-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      .catering-config-top-grid { grid-template-columns: 1fr; }
    }
    .catering-config-add-row {
      display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
      padding-top: 1rem; margin-top: 1rem;
      border-top: 1px solid var(--border-color);
    }
    .catering-config-add-row .form-group { flex: 1 1 130px; margin-bottom: 0; }
    .catering-config-add-row .btn { flex: 0 0 auto; }
    .catering-config-sub-label {
      font-size: .78rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-secondary);
      margin: 1.25rem 0 .6rem; padding-top: 1rem;
      border-top: 1px solid var(--border-color);
    }
    .catering-config-sub-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }

    /* Suppliers-by-port table: clear bordered table */
    .catering-port-suppliers-table-wrap {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: hidden;
      margin-top: 0.5rem;
    }
    .catering-port-suppliers-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9375rem;
    }
    .catering-port-suppliers-table thead {
      background: var(--bg-secondary);
    }
    .catering-port-suppliers-table thead th {
      text-align: left;
      padding: 0.75rem 1rem;
      font-weight: 600;
      color: var(--text-primary);
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
    }
    .catering-port-suppliers-table tbody td {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-primary);
      vertical-align: middle;
    }
    .catering-port-suppliers-table tbody tr:last-child td {
      border-bottom: none;
    }
    .catering-port-suppliers-table tbody tr:hover {
      background: var(--bg-secondary);
    }
    .catering-port-suppliers-table td:first-child {
      font-weight: 500;
    }
    .catering-port-suppliers-table td:nth-child(2),
    .catering-port-suppliers-table td:nth-child(3) {
      color: var(--text-secondary);
    }
    .catering-port-suppliers-table td:last-child {
      text-align: right;
      white-space: nowrap;
    }

    .drill-config-tab .data-table {
      width: 100%;
      table-layout: auto;
    }

    .drill-config-tab .data-table th,
    .drill-config-tab .data-table td {
      padding: 0.5rem 0.75rem;
      white-space: nowrap;
      text-align: left;
      line-height: 1.4;
      vertical-align: middle;
    }

    /* PMS Config: 70/30 card layout, full-width tables, readable headers */
    .pms-config-cards-row {
      display: flex;
      gap: 1.25rem;
      align-items: stretch;
      flex-wrap: nowrap;
    }
    .pms-config-card-inspection,
    .pms-config-card-intervals { min-width: 0; }
    .pms-config-card-inspection { flex: 0 0 calc(60% - 0.625rem); }
    .pms-config-card-intervals { flex: 0 0 calc(40% - 0.625rem); }
    #page-pms-config .card-body {
      width: 100%;
      box-sizing: border-box;
    }
    #page-pms-config #pms-config-inspection-types-list,
    #page-pms-config #pms-config-intervals-list {
      width: 100%;
      box-sizing: border-box;
    }
    .pms-config-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 1rem 1.25rem;
    }
    .pms-config-card-header .card-title {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 600;
    }
    .pms-config-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .pms-config-card-desc {
      color: var(--text-secondary);
      font-size: 0.875rem;
      margin-bottom: 1rem;
      line-height: 1.4;
    }
    #page-pms-config .table-container {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      box-sizing: border-box;
    }
    #page-pms-config .data-table {
      width: 100%;
      max-width: 100%;
      table-layout: auto;
      box-sizing: border-box;
    }
    #page-pms-config .data-table th,
    #page-pms-config .data-table td {
      padding: 0.5rem 0.75rem;
      text-align: left;
      vertical-align: middle;
      white-space: nowrap;
    }
    #page-pms-config .data-table td:first-child,
    #page-pms-config .data-table th:first-child { white-space: normal; min-width: 6em; padding-left: 1.25rem; }
    #page-pms-config .data-table th {
      font-weight: 600;
      font-size: 0.8125rem;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border-color);
    }
    #page-pms-config .data-table td:last-child,
    #page-pms-config .data-table th:last-child { padding-right: 1.25rem; }
    #page-pms-config .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      padding: 0;
      min-width: 2rem;
      border-radius: 6px;
    }
    #page-pms-config .btn-icon svg { width: 1rem; height: 1rem; }
    #page-pms-config .btn-icon.btn-icon-delete { color: var(--danger); }
    #page-pms-config .btn-icon.btn-icon-delete:hover { background: rgba(239, 68, 68, 0.15); }
    #page-pms-config .data-table td:last-child { display: flex; gap: 0.25rem; align-items: center; }

    /* Migration page tabs */
    .migration-tab-btn { border-radius: 8px; }
    .migration-tab-btn.active { background: var(--accent-primary, #2563eb); color: white; border-color: var(--accent-primary); }
    /* Fuel / Bunker — HR-style underline tab bar */
    .fuel-tab-bar {
      display: flex;
      align-items: center;
      gap: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 1.5rem;
    }
    .fuel-tab-bar::-webkit-scrollbar { display: none; }
    .fuel-tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.7rem 1.1rem;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      border-radius: 0;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
      white-space: nowrap;
      letter-spacing: 0.01em;
    }
    .fuel-tab-btn:hover { color: var(--text-primary); }
    .fuel-tab-btn.active {
      color: var(--accent-primary, #3b82f6);
      border-bottom-color: var(--accent-primary, #3b82f6);
      font-weight: 600;
    }
    .pms-add-parts-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
    .med-tab-btn.active { background: var(--accent-primary); color: white; border-color: var(--accent-primary); }
    .wh-tab-btn.active { background: var(--accent-primary); color: white; border-color: var(--accent-primary); }

    /* Medical Stores – responsive config grid */
    @media (max-width: 900px) {
      #medical-tab-config > div {
        grid-template-columns: 1fr;
      }
    }
    .job-safety-docs-card { padding: 0; }
    .job-safety-tabs {
      display: flex;
      gap: 2px;
      padding: 8px 8px 0 8px;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-secondary, rgba(0,0,0,0.06));
      min-height: 44px;
      align-items: flex-end;
      border-radius: 12px 12px 0 0;
      box-sizing: border-box;
    }
    .job-safety-tab-btn {
      flex: 1;
      min-width: 0;
      max-width: none;
      margin-bottom: -1px;
      padding: 0.5rem 0.75rem;
      border: 1px solid transparent;
      border-bottom: none;
      background: rgba(0,0,0,0.06);
      color: var(--text-secondary);
      font-size: 1.05rem;
      text-align: center;
      box-sizing: border-box;
      box-shadow: none;
      border-radius: 8px 8px 0 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .job-safety-tab-btn:hover { color: var(--text-primary); background: rgba(0,0,0,0.08); }
    .job-safety-tab-btn.active {
      background: var(--bg-card);
      color: var(--accent-primary);
      font-weight: 600;
      border-color: var(--border-color);
      border-bottom: 1px solid var(--bg-card);
    }
    .job-safety-tab-panel { display: none; }
    .job-safety-tab-panel.active { display: block; }

    /* Fuel / Bunker: modals and tab cards use full width */
    #fuel-bunker-modal .modal,
    #fuel-consumption-modal .modal,
    #fuel-storage-modal .modal,
    #fuel-type-modal .modal {
      width: 100%;
      max-width: 520px;
      box-sizing: border-box;
    }
    #fuel-bunker-modal .modal-body,
    #fuel-consumption-modal .modal-body,
    #fuel-storage-modal .modal-body,
    #fuel-type-modal .modal-body {
      width: 100%;
      box-sizing: border-box;
    }
    #fuel-bunker-modal .modal-body .form-group,
    #fuel-consumption-modal .modal-body .form-group,
    #fuel-storage-modal .modal-body .form-group,
    #fuel-type-modal .modal-body .form-group {
      width: 100%;
    }
    #page-pms-fuel .card-body .table-responsive { width: 100%; }
    #page-pms-fuel .card-body .table { width: 100%; }
    #page-pms-fuel .card-body .table th { text-align: left; }

    /* Procurement Basket page: full-width cards and tables */
    #page-procurement-basket .card { width: 100%; max-width: 100%; box-sizing: border-box; }
    #page-procurement-basket .card-body { width: 100%; max-width: 100%; box-sizing: border-box; }
    #page-procurement-basket .table { width: 100%; max-width: 100%; table-layout: auto; }
    #page-procurement-basket .table th,
    #page-procurement-basket .table td { text-align: left; }

    /* Job Safety Doc's (Risk Assessments / Toolbox Talks): left-align column titles */
    #page-job-safety-docs .table thead th { text-align: left; }
    #page-job-safety-docs .table td { text-align: left; }
    /* RA builder: Could affect checkboxes */
    .ra-affects-chk { display: inline-block; margin-right: 0.5rem; font-size: 0.8rem; white-space: nowrap; cursor: pointer; }
    .ra-hazard-affects-cell { min-width: 200px; }
    /* RA builder: Hazards and controls table – left-align column titles and cells */
    #ra-builder-modal table thead th,
    #ra-builder-modal table td { text-align: left; }
    /* Allow 3-dot menu to appear above the card */
    #page-job-safety-docs .card,
    #page-job-safety-docs .card-body { overflow: visible; }
    #page-job-safety-docs .kebab-dropdown { z-index: 9999; }
    /* Next review date colour warnings */
    #page-job-safety-docs .ra-review-due-soon { color: var(--warning); font-weight: 500; }
    #page-job-safety-docs .ra-review-overdue { color: var(--danger); font-weight: 500; }
    /* SDS library: search + results use full card width */
    #page-sds-library .sds-library-catalog-card {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    #page-sds-library .sds-library-catalog-card > .card-header.sds-library-catalog-toolbar {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
    }
    #page-sds-library .sds-library-catalog-toolbar .sds-library-search-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      width: 100%;
      min-width: 0;
    }
    #page-sds-library .sds-library-search-row .form-input[type="search"],
    #page-sds-library .sds-library-search-row .form-input {
      flex: 1 1 12rem;
      min-width: 0;
      width: auto;
    }
    #page-sds-library #sds-library-results {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    #page-sds-library #sds-library-results .sds-library-table-scroll {
      display: block;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    #page-sds-library #sds-library-results .sds-library-table-scroll .table {
      width: 100%;
      min-width: 56rem;
      max-width: none;
      table-layout: fixed;
      border-collapse: collapse;
    }
    #page-sds-library #sds-library-results .sds-library-table-scroll .table thead th,
    #page-sds-library #sds-library-results .sds-library-table-scroll .table tbody td {
      text-align: left;
      overflow-wrap: anywhere;
    }
    #page-sds-library .sds-library-page-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 1rem;
    }
    #page-sds-library .sds-library-header-actions {
      display: flex;
      gap: 0.75rem;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    #page-sds-library .sds-library-public-actions-inner {
      display: none;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    #page-sds-library .sds-library-rotate-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.75rem;
      padding: 0.75rem 0.65rem;
      line-height: 1;
    }
    #page-sds-library .sds-library-empty-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.75rem;
    }
    #sds-product-modal .sds-product-barcode-row {
      display: flex;
      gap: 0.5rem;
      align-items: stretch;
    }
    #sds-product-modal .sds-product-barcode-row .form-input {
      flex: 1;
      min-width: 0;
    }
    .sds-library-scan-reader {
      min-height: 200px;
      border-radius: 10px;
      overflow: hidden;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      box-sizing: border-box;
    }
    .sds-library-scan-reader video,
    .sds-library-scan-reader img,
    .sds-library-scan-reader canvas {
      max-width: 100% !important;
      width: 100% !important;
      height: auto !important;
      display: block;
    }
    .toolbox-date-range-dropdown {
      position: absolute; right: 0; top: 100%; margin-top: 4px;
      background: var(--bg-secondary); border: 1px solid var(--border-color);
      border-radius: 8px; padding: 0 0.75rem; box-shadow: var(--dropdown-shadow);
      z-index: 1000;
    }
    .toolbox-date-range-dropdown label { color: var(--text-secondary); }
    .job-safety-toolbox-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
    .toolbox-talks-status-count { font-size: 0.875rem; color: var(--text-secondary); display: inline-flex; align-items: center; min-height: 2.75rem; }
    .job-safety-toolbox-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
    .job-safety-toolbox-toolbar-status { display: flex; align-items: center; gap: 0.5rem; height: 2.75rem; margin-bottom: 0; }
    .job-safety-toolbox-toolbar-status .form-label { margin: 0; white-space: nowrap; }
    .job-safety-toolbox-toolbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: 1.25rem; }
    .job-safety-toolbox-toolbar .btn,
    .job-safety-toolbox-toolbar .form-select { height: 2.75rem; min-height: 2.75rem; box-sizing: border-box; }
    .job-safety-toolbox-toolbar .form-select { padding: 0.5rem 0.75rem; line-height: 1.35; }
    #page-procurement-basket #procurement-basket-search-results { width: 100%; overflow-x: auto; }
    #page-procurement-basket #procurement-basket-list { width: 100%; }
    #page-procurement-basket #procurement-basket-list .table { width: 100%; }

    /* Basket search modal: table alignment */
    #procurement-basket-search-modal .table th,
    #procurement-basket-search-modal .table td { text-align: left; }

    .drill-config-tab .data-table th:not([style*="width"]),
    .drill-config-tab .data-table td:not([style*="width"]) {
      white-space: normal;
    }

    /* Modern Drill Config Tab Buttons */
    .drill-config-tab-btn {
      display: inline-flex;
      align-items: center;
      padding: 0.625rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      white-space: nowrap;
    }

    /* Keep font-weight consistent to prevent width change on active state */
    .drill-config-tab-btn,
    .drill-config-tab-btn.active {
      font-weight: 500;
    }

    .drill-config-tab-btn:hover:not(.active) {
      background: var(--bg-secondary);
      color: var(--text-primary);
    }

    .drill-config-tab-btn.active {
      color: var(--primary);
      background: var(--bg-secondary);
    }

    .drill-config-tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: calc(-1rem - 1px);
      left: 0.5rem;
      right: 0.5rem;
      height: 3px;
      background: var(--primary);
      border-radius: 3px 3px 0 0;
    }

    /* Modern Vessel Selector Container */
    .drill-config-vessel-container {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      padding: 0.5rem 1rem;
      background: var(--bg-secondary);
      border-radius: 8px;
      border: 1px solid var(--border-color);
      transition: all 0.2s ease;
    }

    .drill-config-vessel-container:hover {
      border-color: var(--primary);
      background: var(--bg-card);
    }

    .drill-config-vessel-container:hover svg {
      color: var(--primary);
    }

    /* Modern Vessel Selector */
    .drill-config-vessel-select {
      background: transparent;
      border: none;
      color: var(--text-primary);
      font-size: 0.875rem;
      font-weight: 500;
      padding: 0;
      cursor: pointer;
      outline: none;
      min-width: 180px;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.25rem center;
      padding-right: 1.5rem;
      transition: color 0.2s ease;
    }

    .drill-config-vessel-container:hover .drill-config-vessel-select {
      color: var(--primary);
    }

    .drill-config-vessel-select:focus {
      color: var(--primary);
    }

    .drill-config-vessel-select option {
      background: var(--bg-card);
      color: var(--text-primary);
      padding: 0.5rem;
    }

    /* Alerts List */
    .alert-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .alert-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 0.75rem;
      background: var(--bg-secondary);
      border-radius: 6px;
      border-left: 3px solid var(--danger);
      min-height: 44px;
    }

    .alert-item.warning {
      border-left-color: var(--warning);
    }

    .alert-icon {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      background: var(--danger-bg);
      color: var(--danger);
      flex-shrink: 0;
    }

    .alert-item.warning .alert-icon {
      background: var(--warning-bg);
      color: var(--warning);
    }

    .alert-content {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .alert-title {
      font-weight: 500;
      font-size: 0.8125rem;
      line-height: 1.2;
    }

    .alert-description {
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.2;
    }

    .alert-time {
      font-size: 0.6875rem;
      color: var(--text-muted);
      line-height: 1.2;
      white-space: nowrap;
    }

    .alert-separator {
      color: var(--text-muted);
      font-size: 0.75rem;
    }

    .alert-booked-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.125rem 0.5rem;
      background: var(--success-bg);
      color: var(--success);
      border-radius: 12px;
      font-size: 0.6875rem;
      font-weight: 500;
      white-space: nowrap;
      margin-left: auto;
    }

    .alert-booked-badge--clickable {
      border: none;
      cursor: pointer;
      font-family: inherit;
    }

    .alert-booked-badge--clickable:hover {
      filter: brightness(0.95);
    }

    /* Crew Table */
    .crew-table {
      width: 100%;
      border-collapse: collapse;
    }

    .crew-table th {
      text-align: left;
      padding: 0.75rem 1rem;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border-color);
    }

    .crew-table td {
      padding: 1rem;
      border-bottom: 1px solid var(--border-color);
    }

    .crew-table tr:last-child td {
      border-bottom: none;
    }

    .crew-table tr:hover td {
      background: var(--bg-secondary);
    }

    .crew-member {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .crew-avatar {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: var(--bg-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 0.875rem;
    }

    .crew-name {
      font-weight: 500;
    }

    .crew-role {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* Status Badges */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;
    }

    .badge-success {
      background: var(--success-bg);
      color: var(--success);
    }

    .badge-warning {
      background: var(--warning-bg);
      color: var(--warning);
    }

    .badge-danger {
      background: var(--danger-bg);
      color: var(--danger);
    }

    .badge-neutral {
      background: rgba(148, 163, 184, 0.1);
      color: var(--text-secondary);
    }

    .badge-catering-processing {
      background: var(--warning-bg);
      color: var(--warning);
      gap: 0.4rem;
      animation: catering-processing-pulse 1.6s ease-in-out infinite;
    }

    .badge-catering-processing progress {
      width: 0.55rem;
      height: 0.55rem;
      margin: 0;
      border: 0;
      border-radius: 999px;
      appearance: none;
      background: currentColor;
      overflow: hidden;
    }

    .badge-catering-processing progress::-webkit-progress-bar,
    .badge-catering-processing progress::-webkit-progress-value,
    .badge-catering-processing progress::-moz-progress-bar {
      background: transparent;
    }

    @keyframes catering-processing-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.45; }
    }

    @media (prefers-reduced-motion: reduce) {
      .badge-catering-processing { animation: none; }
    }

    .visually-hidden:where(:not(:focus-within, :active)) {
      position: absolute !important;
      clip-path: inset(50%) !important;
      overflow: hidden !important;
      width: 1px !important;
      height: 1px !important;
      margin: -1px !important;
      padding: 0 !important;
      border: 0 !important;
      white-space: nowrap !important;
    }

    .req-mention-suggestions {
      position: absolute;
      z-index: 30;
      left: 0;
      right: 3.5rem;
      bottom: calc(100% + 0.25rem);
      margin: 0;
      padding: 0.25rem 0;
      list-style: none;
      max-height: 220px;
      overflow-y: auto;
      background: var(--bg-card, var(--bg-primary));
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    .req-mention-suggestions[hidden] {
      display: none !important;
    }
    .req-mention-suggestion {
      display: block;
      width: 100%;
      text-align: left;
      border: none;
      background: transparent;
      color: var(--text-primary);
      padding: 0.45rem 0.7rem;
      font-size: 0.8rem;
      cursor: pointer;
    }
    .req-mention-suggestion:hover,
    .req-mention-suggestion--active {
      background: var(--bg-secondary);
    }
    .req-mention-suggestion-meta {
      display: block;
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-top: 0.1rem;
    }
    .req-mention-suggestion--empty {
      color: var(--text-muted);
      cursor: default;
      font-size: 0.75rem;
    }

    .badge-primary {
      background: var(--primary-bg, rgba(37, 99, 235, 0.1));
      color: var(--primary, #2563eb);
    }

    .badge-secondary {
      background: var(--bg-secondary, #f5f5f5);
      color: var(--text-secondary, #666666);
    }

    /* Toggle Switch */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 26px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--border-color, #ccc);
      transition: 0.3s;
      border-radius: 26px;
    }

    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: 0.3s;
      border-radius: 50%;
    }

    .toggle-switch input:checked + .toggle-slider {
      background-color: var(--success, #10b981);
    }

    .toggle-switch input:checked + .toggle-slider:before {
      transform: translateX(24px);
    }

    /* SMS section collapse (sections collapsed on initial load) */
    .sms-section-block { margin-bottom: 1.5rem; }
    .sms-section-block.sms-section-collapsed .sms-section-docs { display: none !important; }
    .sms-section-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      user-select: none;
      padding: 0.5rem 0;
      margin-bottom: 0;
      color: var(--text-primary);
      font-size: 1rem;
      font-weight: 600;
      border-bottom: 1px solid var(--border-color);
    }
    .sms-section-header:hover { color: var(--accent-primary, #2563eb); }
    .sms-section-arrow {
      display: inline-block;
      transition: transform 0.2s ease;
      font-size: 0.75rem;
      color: var(--text-secondary);
    }
    .sms-section-block.sms-section-collapsed .sms-section-arrow { transform: rotate(-90deg); }
    .sms-section-docs { margin-top: 1rem; }
    #page-sms .sms-page-section--documents { margin-bottom: 0; }
    #page-sms .sms-page-section--fleet {
      margin-top: 2rem;
      padding-top: 1.75rem;
      border-top: 1px solid var(--border-color);
    }
    #page-sms .fleet-notices-columns {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      width: 100%;
    }
    @media (max-width: 1100px) {
      #page-sms .fleet-notices-columns { grid-template-columns: 1fr; }
    }
    #page-sms .fleet-notices-columns > .card {
      min-width: 0;
      width: 100%;
    }
    #page-sms .fleet-notices-columns > .card > .card-header {
      padding: 0.65rem 0.5rem;
    }
    #page-sms .fleet-notices-columns > .card > .card-body[id$="-notices-list"],
    #page-sms #fleet-notices-unified-list {
      width: 100%;
      box-sizing: border-box;
      padding: 0.4rem 0.35rem 0.5rem;
    }
    #page-sms .fleet-notices-columns > .card > .card-body.fleet-notices-pager {
      padding: 0.45rem 0.35rem;
    }
    #page-sms #fleet-notices-shell-card > .card-body {
      padding-left: 0.65rem;
      padding-right: 0.65rem;
    }
    #page-sms .fleet-notice-row {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-bottom: 4px;
      background: var(--bg-primary);
      overflow: hidden;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    #page-sms .fleet-notice-row.is-active {
      border-color: var(--border-color);
    }
    #page-sms .fleet-notice-row.is-inactive {
      opacity: 0.62;
      background: var(--bg-secondary);
      border-color: var(--border-color);
    }
    #page-sms .fleet-notice-row.is-inactive .fleet-notice-row__icon,
    #page-sms .fleet-notice-row.is-inactive .fleet-notice-row__title,
    #page-sms .fleet-notice-row.is-inactive .fleet-notice-row__ref {
      color: var(--text-secondary);
    }
    #page-sms .fleet-notice-row.needs-read {
      border-color: #f59e0b;
      box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35);
    }
    #page-sms .fleet-notice-row__inner {
      display: flex;
      align-items: stretch;
      min-height: 0;
      width: 100%;
    }
    #page-sms .fleet-notice-row__pills {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
      width: 100%;
    }
    #page-sms .fleet-notice-category-tag {
      display: inline-block;
      font-size: 0.5625rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--text-secondary);
      padding: 1px 5px;
      border-radius: 3px;
      background: rgba(148, 163, 184, 0.15);
      vertical-align: middle;
      margin-right: 4px;
    }
    #page-sms .fleet-notice-row__main {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
      width: 100%;
      border: none;
      background: none;
      padding: 6px 6px;
      margin: 0;
      text-align: left;
      color: inherit;
      cursor: pointer;
      font: inherit;
    }
    #page-sms .fleet-notice-row.is-active .fleet-notice-row__main:hover .fleet-notice-row__title {
      color: var(--accent, #0ea5e9);
    }
    #page-sms .fleet-notice-row__icon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent, #0ea5e9);
    }
    #page-sms .fleet-notice-row.is-inactive .fleet-notice-row__icon {
      color: var(--text-secondary);
    }
    #page-sms .fleet-notice-row__icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    #page-sms .fleet-notice-row__body {
      flex: 1;
      min-width: 0;
    }
    #page-sms .fleet-notice-row__headline {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 3px;
      line-height: 1.25;
      width: 100%;
      min-width: 0;
    }
    #page-sms .fleet-notice-row__title-line {
      display: flex;
      align-items: baseline;
      gap: 4px;
      min-width: 0;
      width: 100%;
    }
    #page-sms .fleet-notice-row__ref {
      font-size: 0.625rem;
      color: var(--text-secondary);
      font-weight: 700;
      flex-shrink: 0;
    }
    #page-sms .fleet-notice-row__title {
      font-size: 0.8125rem;
      font-weight: 600;
      line-height: 1.3;
      color: var(--text-primary);
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      flex: 1;
      min-width: 0;
    }
    #page-sms .fleet-notice-row__snippet,
    #page-sms .fleet-notice-row__meta {
      display: none;
    }
    #page-sms .fleet-notice-row--search .fleet-notice-row__snippet {
      display: block;
      font-size: 0.6875rem;
      color: var(--text-secondary);
      font-style: italic;
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #page-sms .fleet-notice-row__chevron {
      display: none;
    }
    #page-sms .fleet-notice-row__dates {
      margin-top: 2px;
      font-size: 0.625rem;
      color: var(--text-secondary);
      line-height: 1.2;
    }
    #page-sms .fleet-notice-row__actions {
      display: flex;
      align-items: center;
      gap: 1px;
      padding: 2px 3px;
      border-left: 1px solid var(--border-color);
      flex-shrink: 0;
    }
    #safety-document-view-modal .modal.safety-document-view-modal {
      width: min(1200px, 98vw);
      max-width: 98vw;
      max-height: 96vh;
      display: flex;
      flex-direction: column;
      padding: 0;
    }
    #safety-document-view-modal .modal-header {
      flex-shrink: 0;
      padding: 0.65rem 0.85rem;
    }
    #safety-document-view-modal .safety-document-view-modal__header-actions {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      flex-wrap: wrap;
    }
    #safety-document-view-modal .modal-body {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 0.5rem 0.75rem;
      gap: 0.5rem;
    }
    #safety-document-view-modal #safety-document-view-banners {
      flex-shrink: 0;
      font-size: 0.8125rem;
    }
    #safety-document-view-modal #safety-document-view-content {
      flex: 1;
      min-height: 0;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }
    #safety-document-view-modal .fleet-notice-pdf-viewer {
      flex: 1;
      min-height: min(70vh, 640px);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    #safety-document-view-modal .fleet-notice-pdf-canvas-wrap {
      flex: 1;
      min-height: min(72vh, 720px);
      max-height: min(78vh, 820px);
      overflow: auto;
      overflow-x: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: block;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 8px;
      text-align: center;
    }
    #safety-document-view-modal #fleet-notice-pdf-canvas {
      display: inline-block;
      vertical-align: top;
      max-width: none;
      height: auto;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }
    #safety-document-view-modal .fleet-notice-pdf-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 0.75rem;
      flex-shrink: 0;
    }
    #safety-document-view-modal .fleet-notice-pdf-zoom {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      flex-wrap: wrap;
    }
    #safety-document-view-modal .fleet-notice-pdf-zoom-label {
      min-width: 3.25rem;
      text-align: center;
      font-size: 0.8125rem;
      color: var(--text-secondary);
      font-variant-numeric: tabular-nums;
    }
    #safety-document-view-modal .fleet-notice-pdf-pager {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      flex-shrink: 0;
      font-size: 0.8125rem;
      color: var(--text-secondary);
    }
    #safety-document-view-modal .modal-footer.safety-document-view-modal__footer {
      flex-shrink: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.65rem 0.85rem;
    }
    #safety-document-view-modal .fleet-notice-rich-body,
    #safety-document-view-modal .safety-document-rich-body {
      white-space: pre-wrap;
      font-size: 0.9rem;
      line-height: 1.45;
      overflow: auto;
    }
    #page-sms .fleet-notice-row__actions .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      padding: 0;
      min-width: 0;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
    }
    #page-sms .fleet-notice-row__actions .btn-icon:hover {
      background: rgba(148, 163, 184, 0.15);
      color: var(--text-primary);
    }
    #page-sms .fleet-notice-row__actions .btn-icon svg {
      width: 0.9rem;
      height: 0.9rem;
      display: block;
    }
    #page-sms .fleet-notice-row__actions .btn-icon-delete {
      color: var(--danger);
    }
    #page-sms .fleet-notice-row__actions .btn-icon-delete:hover {
      background: rgba(239, 68, 68, 0.12);
    }
    #page-sms .fleet-notice-status-pill {
      display: inline-block;
      font-size: 0.5625rem;
      font-weight: 600;
      padding: 1px 5px;
      border-radius: 4px;
      vertical-align: middle;
      line-height: 1.3;
    }
    #page-sms .sms-read-ack-footer,
    #page-sms #safety-document-view-ack-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.5rem;
    }
    #page-sms .sms-read-ack-footer .btn,
    #page-sms #safety-document-view-ack-area .btn {
      align-self: center;
    }
    #safety-document-ack-hint {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin: 0 0 0.35rem;
      text-align: center;
      max-width: 22rem;
      line-height: 1.35;
    }
    #safety-document-ack-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    #page-sms .fleet-notice-status-withdrawn { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
    #page-sms .fleet-notice-status-superseded { background: rgba(148, 163, 184, 0.2); color: var(--text-secondary); }
    #page-sms .fleet-notice-status-scheduled { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
    #page-sms .fleet-notice-status-review-due { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
    #page-sms .fleet-notice-offline-icon { font-size: 0.85rem; margin-left: 0.25rem; opacity: 0.85; }
    #page-sms .fleet-notices-summary-line { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.5rem; }
    @media print {
      body * { visibility: hidden !important; }
      #safety-document-view-modal,
      #safety-document-view-modal .modal,
      #safety-document-view-modal .modal-body,
      #safety-document-view-content,
      #safety-document-view-content * {
        visibility: visible !important;
      }
      #safety-document-view-modal .modal-header,
      #safety-document-view-modal .modal-footer,
      #safety-document-view-banners,
      #safety-document-view-modal .fleet-notice-pdf-toolbar,
      #safety-document-view-modal .fleet-notice-external-doc,
      #safety-document-view-ack-area,
      #safety-document-view-modal .btn,
      #safety-document-view-modal .modal-close {
        display: none !important;
        visibility: hidden !important;
      }
      #safety-document-view-modal,
      #safety-document-view-modal .modal,
      #safety-document-view-modal .modal-body,
      #safety-document-view-content {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
        overflow: visible !important;
      }
      #safety-document-view-modal .fleet-notice-pdf-viewer,
      #safety-document-view-modal .fleet-notice-pdf-canvas-wrap {
        border: none !important;
        background: #fff !important;
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
      }
    }
    .paint-barcode-label {
      box-sizing: border-box;
      text-align: center;
      color: #000;
      background: #fff;
      margin: 0 auto;
      max-width: 280px;
      padding: 0.5rem;
      border: 1px dashed var(--border-color);
      border-radius: 6px;
    }
    .paint-barcode-label .paint-barcode-label__name {
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.2;
      margin: 0 0 0.2rem;
      word-wrap: break-word;
    }
    .paint-barcode-label .paint-barcode-label__code {
      font-size: 0.75rem;
      color: #333;
      margin: 0 0 0.5rem;
    }
    .paint-barcode-label .paint-barcode-label__digits {
      font-family: ui-monospace, monospace;
      font-size: 0.85rem;
      margin: 0.5rem 0 0;
      letter-spacing: 0.08em;
    }
    .paint-barcode-label svg {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
    }
    @media print {
      body * { visibility: hidden !important; }
      #paint-barcode-print-modal,
      #paint-barcode-print-modal #paint-barcode-print-label,
      #paint-barcode-print-modal #paint-barcode-print-label * {
        visibility: visible !important;
      }
      #paint-barcode-print-modal .modal-header,
      #paint-barcode-print-modal .modal-footer,
      #paint-barcode-print-modal .btn,
      #paint-barcode-print-modal .modal-close {
        display: none !important;
        visibility: hidden !important;
      }
      #paint-barcode-print-modal,
      #paint-barcode-print-modal .modal,
      #paint-barcode-print-modal .modal-body {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
      }
      #paint-barcode-print-modal #paint-barcode-print-label {
        border: none !important;
        width: 62mm !important;
        padding: 2mm !important;
      }
    }
    #page-sms .fleet-notices-pager {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin-top: 0.75rem;
      flex-wrap: wrap;
      font-size: 0.8rem;
      color: var(--text-secondary);
    }
    #page-sms .sms-card-header-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.75rem;
      width: 100%;
    }
    #page-sms .sms-card-header-toolbar .card-title { margin: 0; flex-shrink: 0; }
    #page-sms .sms-card-header-toolbar .sms-header-search {
      flex: 1;
      min-width: 160px;
      max-width: 360px;
      display: flex;
      gap: 0.35rem;
      align-items: center;
      margin-left: auto;
    }
    #page-sms .sms-card-header-toolbar .sms-header-search .form-input {
      padding: 0.4rem 0.6rem;
      font-size: 0.875rem;
    }
    #page-sms .sms-card-header-toolbar .form-select--compact {
      width: auto;
      min-width: 140px;
      font-size: 0.875rem;
      padding: 0.4rem 0.6rem;
    }
    #page-sms .fleet-notices-shell-header .fleet-notices-subtitle {
      font-size: 0.8rem;
      color: var(--text-secondary);
      font-weight: normal;
      margin: 0.2rem 0 0;
      width: 100%;
    }
    .sms-update-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      border-radius: 999px;
      background: var(--danger);
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
      line-height: 1;
      padding: 0 0.35rem;
      margin-left: 0.35rem;
    }
    .sms-update-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--danger);
      display: inline-block;
    }
    .sms-ack-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      border-radius: 999px;
      padding: 0.2rem 0.55rem;
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.2;
      border: 1px solid transparent;
      align-self: center;
    }
    .sms-ack-pill.read {
      color: var(--success);
      background: var(--success-bg);
      border-color: color-mix(in srgb, var(--success) 35%, transparent);
    }
    .sms-ack-pill.pending {
      color: var(--danger);
      background: var(--danger-bg);
      border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    }
    .sms-doc-actions {
      display: flex;
      gap: 0.5rem;
      align-items: flex-start;
      justify-content: flex-end;
      flex-wrap: wrap;
      max-width: 48%;
    }
    .sms-doc-actions .btn.btn-sm {
      white-space: nowrap;
      min-height: 2rem;
    }

    /* Certificate Pills */
    .cert-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .cert-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0.5rem;
      background: var(--bg-secondary);
      border-radius: 4px;
      font-size: 0.75rem;
    }

    .cert-pill--clickable {
      cursor: pointer;
      transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }

    .cert-pill--clickable:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
      transform: translateY(-1px);
      filter: brightness(1.05);
    }

    .cert-pill--clickable:active {
      transform: translateY(0);
    }

    .cert-pill.expiring {
      background: var(--warning-bg);
      color: var(--warning);
    }

    .cert-pill.expired {
      background: var(--danger-bg);
      color: var(--danger);
    }

    /* Progress Ring */
    .compliance-ring {
      width: 140px;
      height: 140px;
      position: relative;
      margin: 0 auto 1rem;
    }

    .compliance-ring svg {
      transform: rotate(-90deg);
    }

    .compliance-ring .bg {
      fill: none;
      stroke: var(--bg-secondary);
      stroke-width: 12;
    }

    .compliance-ring .segment {
      fill: none;
      stroke-width: 12;
      transition: stroke-dashoffset 0.5s ease;
    }

    .compliance-ring .segment-valid {
      stroke: var(--success);
    }

    .compliance-ring .segment-expiring {
      stroke: var(--warning);
    }

    .compliance-ring .segment-expired {
      stroke: var(--danger);
    }

    .compliance-value {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .compliance-percent {
      font-size: 1.75rem;
      font-weight: 600;
    }

    .compliance-label {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
      border: none;
      text-decoration: none;
    }

    .btn:active {
      transform: scale(0.97);
    }

    .btn-primary {
      background: var(--accent-gradient);
      color: white;
    }

    .btn-secondary {
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
    }

    @media (hover: hover) and (pointer: fine) {
      .btn-primary:hover {
        opacity: 0.9;
        transform: translateY(-1px);
      }

      .btn-secondary:hover {
        background: var(--bg-card-hover);
      }
    }

    .btn-danger {
      background: var(--danger);
      color: #fff;
      border: 1px solid color-mix(in srgb, var(--danger) 85%, #000);
    }

    @media (hover: hover) and (pointer: fine) {
      .btn-danger:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
      }
    }

    .btn:active {
      transform: scale(0.97);
    }

    @media (prefers-reduced-motion: reduce) {
      .btn {
        transition: none;
      }
      .btn:active {
        transform: none;
        opacity: 0.85;
      }
    }

    .btn-sm {
      padding: 0.375rem 0.75rem;
      font-size: 0.75rem;
    }

    .job-safety-tabs .job-safety-tab-btn {
      border-radius: 8px 8px 0 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* Enclosed Space Register */
    #job-safety-tab-enclosed-spaces .card-header {
      padding: 0.5rem 0.75rem;
      min-height: 0;
      border-bottom: 1px solid var(--border-color);
    }
    #job-safety-tab-enclosed-spaces .card-body {
      padding: 0.5rem 0.75rem 0.75rem;
    }
    .es-toolbar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      width: 100%;
    }
    .es-toolbar-search {
      flex: 1;
      min-width: 120px;
      max-width: 200px;
    }
    .es-toolbar-search .form-input {
      padding: 0.35rem 0.55rem;
      font-size: 0.8125rem;
      height: 2.25rem;
    }
    .es-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-left: auto;
      flex-wrap: wrap;
    }
    .es-toolbar-count {
      font-size: 0.75rem;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .es-empty {
      text-align: center;
      padding: 1.25rem 0.75rem;
      color: var(--text-secondary);
      font-size: 0.875rem;
    }
    .es-space-list {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .es-space-item {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-card);
      transition: border-color 0.15s, background 0.15s;
    }
    .es-space-item:hover {
      border-color: rgba(14, 165, 233, 0.35);
    }
    .es-space-item.is-expanded {
      border-color: rgba(14, 165, 233, 0.45);
      background: var(--bg-secondary, rgba(0,0,0,0.02));
    }
    .es-space-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.6rem;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    .es-space-row--clickable {
      cursor: pointer;
      user-select: none;
    }
    .es-space-row--clickable:focus-visible {
      outline: 2px solid var(--accent-primary, #0ea5e9);
      outline-offset: -2px;
    }
    .es-expand-chevron {
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
      color: var(--text-muted, var(--text-secondary));
      transition: transform 0.15s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .es-space-item.is-expanded .es-expand-chevron {
      transform: rotate(90deg);
    }
    .es-space-detail-panel {
      display: none;
      padding: 0 0.7rem 0.7rem;
      border-top: 1px solid var(--border-color);
    }
    .es-space-item.is-expanded .es-space-detail-panel {
      display: block;
    }
    /* Stats bar */
    .es-stats-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.25rem;
      padding: 0.6rem 0;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 0.65rem;
    }
    .es-stat {
      display: flex;
      flex-direction: column;
      gap: 0.05rem;
    }
    .es-stat-label {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-secondary);
    }
    .es-stat-value {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    /* Sections */
    .es-section {
      margin-bottom: 0.6rem;
    }
    .es-section-title {
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.055em;
      color: var(--text-secondary);
      padding-bottom: 0.25rem;
      margin-bottom: 0.4rem;
      border-bottom: 1px solid var(--border-color);
    }
    .es-field-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 0.45rem 1rem;
    }
    .es-field-row--single {
      grid-template-columns: 1fr;
    }
    .es-field {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }
    .es-field-label {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--text-secondary);
    }
    .es-field-value {
      font-size: 0.8125rem;
      color: var(--text-primary);
      line-height: 1.45;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .es-field-value.is-empty {
      color: var(--text-muted, var(--text-secondary));
      font-style: italic;
    }
    /* Fan list */
    .es-fan-list {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      margin-top: 0.2rem;
    }
    .es-fan-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: rgba(14, 165, 233, 0.08);
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      font-size: 0.775rem;
      color: var(--text-primary);
    }
    .es-fan-chip-flow {
      font-weight: 600;
      color: var(--accent-primary, #0ea5e9);
    }
    /* Review badge */
    .es-review-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.8125rem;
    }
    .es-detail-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.65rem;
      padding-top: 0.55rem;
      border-top: 1px dashed var(--border-color);
    }
    .es-space-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .es-space-line {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      flex-wrap: wrap;
      min-width: 0;
    }
    .es-space-line--meta {
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.3;
    }
    .es-space-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
      min-width: 0;
    }
    .es-space-detail {
      white-space: nowrap;
    }
    .es-space-detail strong {
      color: var(--text-primary);
      font-weight: 500;
    }
    .es-space-detail + .es-space-detail::before {
      content: '·';
      margin-right: 0.4rem;
      color: var(--text-muted, var(--text-secondary));
      opacity: 0.65;
    }
    @media (min-width: 720px) {
      .es-space-row {
        padding: 0.35rem 0.65rem;
        min-height: 2.125rem;
      }
      .es-space-main {
        flex-direction: row;
        align-items: center;
        gap: 0.65rem;
        flex-wrap: nowrap;
      }
      .es-space-line {
        display: contents;
      }
      .es-space-name {
        flex: 0 1 auto;
        max-width: 28%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .es-cat-badge {
        flex-shrink: 0;
      }
      .es-space-detail {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .es-space-detail.es-space-loc,
      .es-space-detail.es-space-tank {
        flex: 1 1 0;
      }
    }
    .es-space-meta strong {
      color: var(--text-primary);
      font-weight: 500;
    }
    .es-cat-badge {
      display: inline-block;
      padding: 0.1rem 0.45rem;
      border-radius: 9999px;
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      background: rgba(148, 163, 184, 0.15);
      color: var(--text-secondary);
      vertical-align: middle;
    }
    .es-cat-badge--tank { background: rgba(14, 165, 233, 0.12); color: var(--accent-primary, #0ea5e9); }
    #enclosed-space-modal .modal {
      max-width: 580px;
      width: calc(100vw - 2rem);
      height: min(86vh, 760px);
      min-height: min(86vh, 760px);
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #enclosed-space-modal .modal-body {
      overflow: hidden;
      flex: 1;
      min-height: 0;
      padding: 0 1rem 0;
      display: flex;
      flex-direction: column;
    }
    .es-modal-sections {
      position: relative;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    #enclosed-space-modal .modal-header {
      padding: 0.75rem 1rem;
    }
    #enclosed-space-modal .modal-title {
      font-size: 1.05rem;
    }
    .es-modal-tabs {
      display: flex;
      gap: 0;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border-color);
      margin: 0 -1rem 0.75rem;
      padding: 0 0.5rem;
      overflow-x: auto;
      background: var(--bg-card);
    }
    .es-modal-tab-btn {
      flex-shrink: 0;
      padding: 0.4rem 0.6rem;
      font-size: 0.75rem;
      font-weight: 500;
      border: none;
      border-bottom: 2px solid transparent;
      background: none;
      color: var(--text-secondary);
      cursor: pointer;
      white-space: nowrap;
      margin-bottom: -1px;
    }
    .es-modal-tab-btn:hover { color: var(--text-primary); }
    .es-modal-tab-btn.active {
      color: var(--accent-primary);
      border-bottom-color: var(--accent-primary);
      font-weight: 600;
    }
    .es-modal-section {
      display: none;
      position: absolute;
      inset: 0;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      padding-bottom: 0.5rem;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }
    .es-modal-section.active {
      display: block;
    }
    .es-row-actions-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      min-width: 2rem;
      padding: 0;
      line-height: 1;
      font-size: 1.125rem;
    }
    #enclosed-space-modal .form-group {
      margin-bottom: 0.65rem;
    }
    #enclosed-space-modal .form-label {
      font-size: 0.75rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
    }
    #enclosed-space-modal .form-input,
    #enclosed-space-modal .form-select,
    #enclosed-space-modal textarea.form-input {
      padding: 0.35rem 0.5rem;
      font-size: 0.8125rem;
    }
    #enclosed-space-modal textarea.form-input {
      min-height: 2.5rem;
      resize: vertical;
    }
    .es-form-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem 0.65rem;
    }
    @media (max-width: 520px) {
      .es-form-grid-2 { grid-template-columns: 1fr; }
    }
    .tr-request-form-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0.65rem 0.85rem;
    }
    .tr-request-form-grid > *,
    .tr-request-form-grid .tr-dates-row > *,
    .tr-request-form-grid .form-input {
      min-width: 0;
      max-width: 100%;
    }
    #create-training-request-modal .modal-body { overflow-x: hidden; }
    .tr-request-form-grid .form-group { margin-bottom: 0; }
    .tr-request-form-grid .span-2 { grid-column: 1 / -1; }
    .tr-request-form-grid .tr-dates-row {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.65rem 0.85rem;
    }
    #create-training-request-modal textarea.form-input {
      min-height: 2.75rem;
      resize: vertical;
    }
    #create-training-request-modal .create-tr-cal-wrap {
      border: 1px solid var(--border-color, rgba(255,255,255,0.08));
      border-radius: 0.5rem;
      padding: 0.65rem 0.75rem;
      background: var(--surface-secondary, rgba(0,0,0,0.15));
    }
    #create-training-request-modal .create-tr-cal-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.35rem 0.75rem;
      margin-bottom: 0.5rem;
    }
    #create-training-request-modal .create-tr-cal-head strong {
      font-size: 0.85rem;
    }
    #create-training-request-modal .create-tr-cal-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 0.65rem;
      font-size: 0.68rem;
      color: var(--text-secondary);
    }
    #create-training-request-modal .create-tr-cal-legend span {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }
    #create-training-request-modal .create-tr-cal-legend i {
      width: 0.65rem;
      height: 0.65rem;
      border-radius: 2px;
      display: inline-block;
      flex-shrink: 0;
    }
    #create-training-request-modal .create-tr-cal-scroll {
      overflow-x: auto;
      max-width: 100%;
    }
    #create-training-request-modal .create-tr-cal-scroll .vcal-ops-table {
      min-width: 100%;
    }
    #create-training-request-modal .create-tr-cal-proposed {
      background: rgba(34, 197, 94, 0.35);
      border: 1px dashed rgba(34, 197, 94, 0.85);
      box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
    }
    #create-training-request-modal .create-tr-cal-free {
      background: rgba(34, 197, 94, 0.08);
    }
    #create-training-request-modal .create-tr-cal-actions {
      margin-top: 0.45rem;
      display: flex;
      justify-content: flex-end;
    }
    #create-training-request-modal .create-tr-cal-actions .btn-link {
      font-size: 0.78rem;
      padding: 0;
      min-height: 0;
    }
    #create-training-request-modal .tr-form-actions {
      grid-column: 1 / -1;
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      padding-top: 0.25rem;
    }
    @media (max-width: 640px) {
      .tr-request-form-grid,
      .tr-request-form-grid .tr-dates-row {
        grid-template-columns: minmax(0, 1fr);
      }
      #create-training-request-modal .tr-form-actions {
        flex-direction: column;
      }
      #create-training-request-modal .tr-form-actions .btn {
        width: 100%;
      }
    }
    .tr-requests-card-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.65rem 0.85rem;
      min-width: 0;
    }
    .tr-requests-card-header .card-title {
      margin: 0;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .tr-requests-filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.85rem;
      font-size: 0.8125rem;
      color: var(--text-secondary, #94a3b8);
      flex: 0 0 auto;
    }
    .tr-requests-filters label {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      cursor: pointer;
      margin: 0;
      white-space: nowrap;
    }
    .tr-requests-search {
      flex: 1 1 140px;
      min-width: 0;
      width: auto;
      max-width: none;
      height: 2rem;
      padding: 0 0.65rem;
      font-size: 0.8125rem;
      margin: 0;
    }
    #training-requests-list {
      max-height: min(52vh, 520px);
      overflow-y: auto;
    }
    .tr-requests-summary {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.5rem;
      margin: 0;
      flex: 0 0 auto;
    }
    .tr-requests-stat {
      display: inline-flex;
      align-items: baseline;
      gap: 0.35rem;
      padding: 0.3rem 0.65rem;
      background: var(--bg-secondary, #f5f5f5);
      border-radius: 6px;
      line-height: 1.2;
    }
    .tr-requests-stat-value {
      font-weight: 700;
      font-size: 0.9375rem;
    }
    .tr-requests-stat-label {
      font-size: 0.8125rem;
      color: var(--text-secondary, #666666);
    }
    .tr-requests-stat--pending .tr-requests-stat-value { color: var(--warning, #f59e0b); }
    .tr-requests-stat--approved .tr-requests-stat-value { color: var(--success, #10b981); }
    .tr-requests-stat--booked .tr-requests-stat-value { color: var(--primary, #2563eb); }
    .training-course-search-card,
    .training-course-search-card > .card-body,
    .training-course-search-card .form-group {
      overflow: visible;
    }
    .training-course-search-wrap {
      position: relative;
      flex: 1;
      min-width: 0;
    }
    .training-course-results-panel {
      display: none;
      margin-top: 0.75rem;
      background: var(--bg-primary, #ffffff);
      border: 1px solid var(--border-color, #e0e0e0);
      border-radius: 4px;
      max-height: min(320px, 50vh);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      padding-bottom: 0.5rem;
      scroll-padding-bottom: 0.5rem;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }
    .training-course-results-panel .port-search-item:last-child {
      border-bottom: none;
    }

    #page-training {
      --tr-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --tr-press: 140ms;
      --tr-space-xs: 4px;
      --tr-space-sm: 8px;
      --tr-space-md: 12px;
      --tr-space-lg: 16px;
      --tr-space-xl: 24px;
      --tr-radius-small: 8px;
      --tr-radius-control: 12px;
      --tr-radius-card: 14px;
      --tr-radius-pill: 999px;
      --tr-type-caption: 12px;
      --tr-type-body: 15px;
      --tr-type-subhead: 16px;
      --tr-type-title: 20px;
      container: training / inline-size;
    }
    #page-training .tr-page-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: var(--tr-space-lg);
      margin-bottom: var(--tr-space-lg);
    }
    #page-training .tr-page-head .page-title {
      font-size: var(--tr-type-title);
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.02em;
      text-wrap: balance;
    }
    #page-training .tr-page-head .page-subtitle {
      margin: var(--tr-space-xs) 0 0;
      max-width: 42rem;
      font-size: var(--tr-type-body);
      line-height: 1.4;
      font-weight: 400;
      color: var(--text-secondary);
      text-wrap: pretty;
    }
    #page-training .tr-accept {
      display: flex;
      align-items: center;
      gap: var(--tr-space-md);
      padding: var(--tr-space-md);
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: var(--tr-radius-control);
    }
    #page-training .tr-accept-label {
      font-size: var(--tr-type-caption);
      font-weight: 500;
      line-height: 16px;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    #page-training .card {
      border-radius: var(--tr-radius-card);
    }
    #page-training .btn {
      border-radius: var(--tr-radius-control);
      min-height: 44px;
      padding: var(--tr-space-md) var(--tr-space-lg);
      font-size: var(--tr-type-body);
      font-weight: 600;
      line-height: 21px;
      transition: transform var(--tr-press) var(--tr-ease-out), opacity var(--tr-press) var(--tr-ease-out), background-color 160ms ease, border-color 160ms ease;
    }
    #page-training .btn-sm {
      min-height: 36px;
      padding: var(--tr-space-sm) var(--tr-space-md);
      font-size: 13px;
      line-height: 16px;
    }
    #page-training .btn:hover {
      transform: none;
    }
    #page-training .btn:active {
      transform: scale(0.97);
    }
    #page-training .btn-secondary {
      background: transparent;
    }
    @media (hover: hover) and (pointer: fine) {
      #page-training .btn-primary:hover {
        opacity: 0.92;
      }
      #page-training .btn-secondary:hover {
        background: color-mix(in srgb, var(--text-primary) 5%, transparent);
      }
      #page-training .tr-row:hover {
        background: color-mix(in srgb, var(--text-primary) 4%, transparent);
      }
      #page-training button.tr-metric:hover {
        background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-secondary));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #page-training .btn,
      #page-training .tr-choice-btn {
        transition: none;
      }
      #page-training .btn:active,
      #page-training .tr-choice-btn:active {
        transform: none;
      }
    }
    #page-training .tr-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--tr-space-md);
      margin-bottom: var(--tr-space-lg);
    }
    #page-training .tr-metric {
      min-width: 0;
      padding: var(--tr-space-md);
      border-radius: var(--tr-radius-control);
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      text-align: left;
      font: inherit;
      color: inherit;
    }
    #page-training button.tr-metric {
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
    }
    #page-training button.tr-metric[aria-pressed="true"] {
      border-color: var(--accent-primary);
      box-shadow: inset 0 0 0 1px var(--accent-primary);
    }
    #page-training .tr-metric-value {
      display: block;
      font-size: var(--tr-type-title);
      font-weight: 700;
      line-height: 26px;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }
    #page-training .tr-metric-label {
      display: block;
      margin-top: 2px;
      font-size: var(--tr-type-caption);
      font-weight: 500;
      line-height: 16px;
      color: var(--text-secondary);
    }
    #page-training .tr-metric.urgent .tr-metric-value { color: var(--danger); }
    #page-training .tr-metric.warn .tr-metric-value { color: var(--warning); }
    #page-training .tr-metric.ok .tr-metric-value { color: var(--success); }
    #page-training .tr-due-card,
    #page-training .tr-side > .card {
      margin-bottom: 0;
    }
    #page-training .tr-due-header {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    #page-training .tr-due-title-row {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      min-width: 0;
    }
    #page-training .tr-due-title-row .card-title {
      flex: 0 1 auto;
    }
    #page-training .tr-due-title-row .perm-help {
      flex-shrink: 0;
      margin-left: 0;
    }
    #page-training .tr-due-header .card-title,
    #page-training .tr-side .card-title {
      margin: 0;
      font-size: var(--tr-type-subhead);
      font-weight: 600;
      line-height: 22px;
    }
    #page-training .tr-due-lead,
    #page-training .tr-side-lead {
      margin: var(--tr-space-xs) 0 0;
      font-size: var(--tr-type-caption);
      line-height: 16px;
      font-weight: 500;
      color: var(--text-secondary);
      max-width: 40rem;
    }
    #page-training .tr-due-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--tr-space-sm);
      align-items: stretch;
      margin-top: var(--tr-space-md);
    }
    #page-training .tr-filter-cluster {
      display: flex;
      align-items: stretch;
      flex: 1 1 14rem;
      min-width: 0;
    }
    #page-training .tr-filter-cluster .tr-choice-tabs {
      flex: 1 1 auto;
    }
    #page-training .tr-choice-tabs {
      display: flex;
      flex: 1 1 12rem;
      min-width: 0;
      padding: 3px;
      border-radius: var(--tr-radius-control);
      background: var(--bg-card);
      border: 1px solid var(--border-color);
    }
    #page-training .tr-choice-btn {
      appearance: none;
      flex: 1 1 0;
      border: 0;
      background: transparent;
      color: var(--text-muted);
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      line-height: 16px;
      padding: 10px var(--tr-space-xs);
      border-radius: 10px;
      min-height: 40px;
      cursor: pointer;
      transition: background-color 160ms ease, color 160ms ease, transform var(--tr-press) var(--tr-ease-out);
    }
    #page-training .tr-choice-btn[aria-pressed="true"] {
      background: var(--accent-primary);
      color: var(--primary-on);
      font-weight: 700;
    }
    #page-training .tr-choice-btn:active {
      transform: scale(0.97);
    }
    #page-training .tr-due-search,
    #page-training .tr-requests-search {
      flex: 1 1 12rem;
      min-width: 0;
      height: 44px;
      margin: 0;
      border-radius: var(--tr-radius-control);
    }
    #page-training .tr-due-list,
    #page-training #training-requests-list {
      max-height: min(62vh, 720px);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding-inline-end: 2px;
    }
    #page-training .tr-group {
      content-visibility: auto;
      contain-intrinsic-size: 1px 72px;
    }
    #page-training .tr-group + .tr-group {
      margin-top: var(--tr-space-sm);
    }
    #page-training .tr-section-head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--tr-space-xs) var(--tr-space-md);
      padding: var(--tr-space-md) 0 var(--tr-space-xs);
    }
    #page-training .tr-section-title {
      font-size: var(--tr-type-subhead);
      font-weight: 600;
      line-height: 22px;
    }
    #page-training .tr-section-sub {
      font-size: var(--tr-type-caption);
      font-weight: 500;
      line-height: 16px;
      color: var(--text-secondary);
    }
    #page-training .tr-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--tr-space-md);
      min-height: 44px;
      padding-block: var(--tr-space-md);
      padding-inline-end: 2px;
      border-top: 1px solid var(--border-color);
    }
    #page-training .tr-row-main {
      flex: 1 1 10rem;
      min-width: 0;
    }
    #page-training .tr-row-label {
      font-size: var(--tr-type-body);
      font-weight: 400;
      line-height: 21px;
      color: var(--text-primary);
    }
    #page-training .tr-row-secondary {
      margin-top: 2px;
      font-size: var(--tr-type-caption);
      font-weight: 500;
      line-height: 16px;
      color: var(--text-secondary);
    }
    #page-training .tr-row-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: var(--tr-space-sm);
      flex: 1 1 auto;
      min-width: min(100%, 11rem);
    }
    #page-training .tr-row-actions .btn,
    #page-training .tr-row-actions .tr-pill {
      flex-shrink: 0;
    }
    #page-training .tr-pill {
      display: inline-flex;
      align-items: center;
      align-self: center;
      padding: 3px var(--tr-space-sm);
      border-radius: var(--tr-radius-pill);
      font-size: var(--tr-type-caption);
      font-weight: 600;
      line-height: 15px;
    }
    #page-training .tr-pill-expired {
      background: rgba(239, 68, 68, 0.15);
      color: var(--danger);
    }
    #page-training .tr-pill-soon {
      background: rgba(245, 158, 11, 0.16);
      color: var(--warning);
    }
    #page-training .tr-pill-ok {
      background: rgba(34, 197, 94, 0.15);
      color: var(--success);
    }
    #page-training .tr-pill-muted {
      background: rgba(148, 163, 184, 0.14);
      color: var(--text-secondary);
    }
    #page-training .tr-side {
      display: grid;
      gap: var(--tr-space-lg);
      align-content: start;
    }
    #page-training .tr-page-split {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--tr-space-lg);
      align-items: start;
    }
    #page-training .tr-tools-block + .tr-tools-block {
      margin-top: var(--tr-space-lg);
      padding-top: var(--tr-space-lg);
      border-top: 1px solid var(--border-color);
    }
    #page-training .tr-empty {
      text-align: center;
      color: var(--text-secondary);
      font-size: var(--tr-type-body);
      padding: var(--tr-space-xl) var(--tr-space-lg);
    }
    #training-ignore-cert-modal .tr-ignore-lead {
      margin: 0;
      color: var(--text-secondary);
      font-size: 0.875rem;
      line-height: 1.45;
    }
    #training-ignore-cert-modal .tr-ignore-actions {
      display: grid;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    #training-ignore-cert-modal .tr-ignore-actions .btn {
      width: 100%;
    }
    #training-ignore-cert-modal .tr-ignore-actions .btn:disabled {
      opacity: 1;
      cursor: pointer;
    }
    #training-ignore-cert-modal .tr-ignore-note {
      margin: 0.75rem 0 0;
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.4;
    }
    /* Fallback: viewport. Container query wins where supported. */
    @media (min-width: 1024px) {
      #page-training .tr-page-split {
        grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.85fr);
      }
    }
    @supports (container-type: inline-size) {
      @media (min-width: 1024px) {
        #page-training .tr-page-split {
          grid-template-columns: 1fr;
        }
      }
      @container training (min-width: 900px) {
        #page-training .tr-page-split {
          grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.85fr);
        }
        #page-training:not(.tr-has-requests) .tr-page-split {
          grid-template-columns: minmax(0, 2fr) minmax(16rem, 0.7fr);
        }
      }
      @container training (max-width: 639px) {
        #page-training .tr-metrics {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        #page-training .tr-row {
          flex-wrap: wrap;
        }
        #page-training .tr-row-actions {
          width: 100%;
          justify-content: flex-start;
        }
      }
    }
    @media (max-width: 639px) {
      #page-training .tr-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #page-training .tr-row {
        flex-wrap: wrap;
      }
      #page-training .tr-row-actions {
        width: 100%;
        justify-content: flex-start;
      }
    }
    .port-search-dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--bg-primary, #ffffff);
      border: 1px solid var(--border-color, #e0e0e0);
      border-radius: 4px;
      max-height: min(320px, 50vh);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      margin-top: 4px;
      padding-bottom: 0.5rem;
      scroll-padding-bottom: 0.5rem;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }
    .port-search-dropdown .port-search-item:last-child {
      border-bottom: none;
    }
    .es-form-hint {
      font-size: 0.72rem;
      color: var(--text-secondary);
      margin: 0 0 0.5rem;
      line-height: 1.35;
    }
    .es-vent-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: rgba(14, 165, 233, 0.1);
      color: var(--accent-primary, #0ea5e9);
      border-radius: 6px;
      padding: 0.35rem 0.65rem;
      font-size: 0.8rem;
      font-weight: 600;
      margin-top: 0.5rem;
    }
    .es-vent-chip.muted {
      background: var(--bg-secondary, rgba(0,0,0,0.04));
      color: var(--text-secondary);
      font-weight: 500;
    }
    .es-fans-block { margin-top: 0.5rem; }
    .es-fan-header,
    .es-fan-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 96px 48px 32px;
      gap: 0.35rem;
      align-items: end;
    }
    .es-fan-header {
      padding: 0 0.5rem 0.2rem;
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.02em;
    }
    .es-fan-header span:last-child { text-align: center; }
    .es-fan-row {
      background: var(--bg-secondary, rgba(0,0,0,0.03));
      border-radius: 6px;
      padding: 0.4rem 0.5rem;
      margin-bottom: 0.35rem;
    }
    @media (max-width: 480px) {
      .es-fan-header,
      .es-fan-row {
        grid-template-columns: 1fr 1fr;
      }
      .es-fan-header { display: none; }
      .es-fan-row .es-fan-remove { grid-column: 1 / -1; justify-self: end; }
    }
    .es-fan-row .form-group { margin: 0; }
    .es-fan-row .form-label { font-size: 0.68rem; margin-bottom: 0.12rem; color: var(--text-secondary); }
    .es-fan-row .form-input { padding: 0.28rem 0.45rem; font-size: 0.8rem; }
    .es-fan-row .es-fan-remove {
      align-self: end;
      min-width: 28px;
      padding: 0.28rem 0.4rem;
    }
    .es-modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      flex-shrink: 0;
      margin: 0 -1rem;
      padding: 0.65rem 1rem;
      border-top: 1px solid var(--border-color);
      background: var(--bg-card);
    }
    #enclosed-space-modal .form-label.es-label-with-help {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.2rem;
      max-width: 100%;
    }
    #enclosed-space-modal .es-field-help.perm-help {
      margin-left: 0.15rem;
      flex-shrink: 0;
      vertical-align: middle;
    }
    #enclosed-space-modal .es-field-help .perm-help-tooltip {
      z-index: 12050;
      max-width: 280px;
      font-weight: 400;
    }
    #enclosed-space-modal .es-field-help .perm-help-tooltip strong {
      font-weight: 600;
    }
    .es-details-toggle {
      width: 100%;
      text-align: left;
      padding: 0.4rem 0;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--accent-primary);
      background: none;
      border: none;
      cursor: pointer;
      margin-bottom: 0.35rem;
    }
    .es-details-panel { display: none; }
    .es-details-panel.open { display: block; }

    .pms-register-btn {
      min-height: 2.75rem;
      padding: 0.5rem 1rem;
      flex: 1;
      min-width: 180px;
      justify-content: center;
    }

    /* Search Bar */
    .search-bar {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-bottom: 1.5rem;
    }

    .search-bar input {
      flex: 1;
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 0.875rem;
      outline: none;
    }

    .search-bar input::placeholder {
      color: var(--text-muted);
    }

    /* My Vessel – Crew: search + filters on one row (desktop) */
    #page-my-vessel-crew .my-vessel-crew-attention {
      margin: 0 0 1rem;
      padding: 0.75rem 0.9rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      font-size: 0.875rem;
      line-height: 1.45;
    }
    #page-my-vessel-crew .my-vessel-crew-attention[hidden] {
      display: none !important;
    }
    #page-my-vessel-crew .my-vessel-crew-attention ul {
      margin: 0.4rem 0 0.65rem;
      padding-left: 1.1rem;
    }
    #page-my-vessel-crew .my-vessel-crew-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    #page-my-vessel-crew .my-vessel-crew-toolbar .search-bar {
      flex: 1 1 220px;
      min-width: 180px;
      max-width: 320px;
      margin-bottom: 0;
    }
    #page-my-vessel-crew .my-vessel-crew-filters {
      display: flex;
      flex: 1 1 auto;
      min-width: 0;
    }
    #page-my-vessel-crew .my-vessel-crew-filter-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      min-width: 0;
    }
    /* Match selects: 8px radius (not fully round pills) */
    #page-my-vessel-crew .my-vessel-crew-filters .filter-pill {
      border-radius: 8px;
      padding: 0.5rem 0.75rem;
      line-height: 1.25;
      white-space: nowrap;
    }
    #page-my-vessel-crew .my-vessel-crew-filter-select {
      width: auto;
      min-width: 9.5rem;
      max-width: 100%;
      padding: 0.5rem 2.25rem 0.5rem 0.75rem;
      font-size: 0.875rem;
      line-height: 1.25;
      border-radius: 8px;
      background-position: right 0.65rem center;
      background-size: 12px 12px;
      flex-shrink: 0;
    }

    /* ── Reusable action-menu (+ button with dropdown) ──────────────── */
    .action-menu {
      position: relative;
      display: inline-flex;
    }
    .action-menu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;
      border: 1px solid var(--accent-primary);
      border-radius: 8px;
      background: var(--accent-gradient, var(--accent-primary));
      color: #fff;
      font-size: 1.5rem;
      font-weight: 400;
      line-height: 1;
      cursor: pointer;
      transition: transform 0.12s ease, filter 0.15s ease;
      flex-shrink: 0;
      box-shadow: 0 8px 18px rgba(24, 119, 242, 0.28);
    }
    .action-menu-toggle:hover {
      filter: brightness(1.05);
      transform: translateY(-1px);
    }
    .action-menu-toggle svg {
      display: block;
    }
    .action-menu-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 0.375rem);
      right: 0;
      min-width: 200px;
      max-width: min(280px, calc(100vw - 1rem));
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
      z-index: 200;
      overflow: hidden;
      padding: 0.25rem;
    }
    .action-menu.is-open .action-menu-dropdown {
      display: block;
    }
    .action-menu-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      width: 100%;
      padding: 0.65rem 0.85rem;
      border: none;
      border-radius: 7px;
      background: transparent;
      color: var(--text-primary);
      font-size: 0.875rem;
      text-align: left;
      cursor: pointer;
      transition: background 0.12s;
    }
    .action-menu-item:hover {
      background: var(--bg-secondary);
    }
    .action-menu-item svg {
      flex-shrink: 0;
      color: var(--text-muted);
    }

    /* Dashboard config shortcut: cog + "Config" on desktop, cog only on mobile */
    .btn-page-config {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      flex-shrink: 0;
    }
    .btn-page-config .btn-config-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    #page-crew .crew-filters-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 1.25rem;
      margin-bottom: 1rem;
      align-items: flex-end;
    }
    #page-crew .crew-filter-field {
      flex: 0 1 auto;
      min-width: 140px;
    }
    #page-crew .crew-filter-field .form-label {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      margin-bottom: 0.35rem;
    }
    #page-crew .crew-filter-field .form-input {
      width: auto;
      min-width: 140px;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
    }
    #page-crew .crew-filter-field-search {
      flex: 1 1 220px;
      min-width: 180px;
      max-width: 320px;
    }
    #page-crew .crew-filter-search {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0;
      padding: 0.5rem 0.75rem;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    #page-crew .crew-filter-search svg {
      flex-shrink: 0;
      color: var(--text-muted);
    }
    #page-crew .crew-filter-search input {
      min-width: 0;
    }
    #page-crew .crew-filter-toggle {
      display: block;
      width: 100%;
      min-width: 140px;
      padding: 0.5rem 0.75rem;
      text-align: left;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 0.875rem;
      color: var(--text-secondary);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
      white-space: nowrap;
    }
    #page-crew .crew-filter-toggle:hover {
      border-color: var(--accent-primary);
      color: var(--text-primary);
    }
    #page-crew .crew-filter-toggle.active {
      background: var(--accent-gradient);
      border-color: transparent;
      color: white;
    }

    /* Filter Pills */
    .filter-pills {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }

    .filter-pill {
      padding: 0.5rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 9999px;
      font-size: 0.875rem;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
    }

    .filter-pill:hover,
    .filter-pill.active {
      background: var(--accent-gradient);
      border-color: transparent;
      color: white;
    }

    /* ── Universal Mobile Filter Drawer ────────────────────────────────
       Naming: fdr-* classes are owned by filter-drawer.js
       Desktop (≥769px): panel renders inline via display:contents
       Mobile  (≤768px): panel is a fixed off-canvas drawer
    ─────────────────────────────────────────────────────────────────── */

    /* Toolbar wrapper */
    .filter-toolbar {
      margin-bottom: 1rem;
    }

    /* Primary row: search + trigger button */
    .fdr-primary {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .fdr-primary .crew-filter-field-search,
    .fdr-primary .search-bar,
    .fdr-primary .sms-header-search {
      flex: 1 1 200px;
      min-width: 0;
    }
    .fdr-primary .form-input,
    .fdr-primary input[type="search"] {
      flex: 1 1 auto;
      min-width: 0;
    }

    /* Trigger button — hidden on desktop, shown on mobile */
    .fdr-trigger {
      display: none;
      align-items: center;
      gap: 0.45rem;
      padding: 0.5rem 0.875rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-secondary);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
      flex-shrink: 0;
    }
    .fdr-trigger:hover {
      border-color: var(--accent-primary);
      color: var(--text-primary);
    }
    .fdr-trigger svg { flex-shrink: 0; opacity: 0.75; }

    /* Active filter badge on the trigger */
    .fdr-trigger-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.2rem;
      height: 1.2rem;
      padding: 0 0.3rem;
      border-radius: 9999px;
      background: var(--accent-primary, #0ea5e9);
      color: #fff;
      font-size: 0.68rem;
      font-weight: 700;
      line-height: 1;
    }
    .fdr-trigger-badge[hidden] { display: none !important; }

    /* Overlay — hidden by default, shown on mobile when open */
    .fdr-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0);
      z-index: 94;
      pointer-events: none;
      transition: background 0.3s ease;
    }

    /* Drawer chrome — hidden on desktop */
    .fdr-header,
    .fdr-footer { display: none; }

    /* Filter body — transparent wrapper on desktop */
    .fdr-body { display: contents; }

    /* ── Desktop: panel items render inline ─────────────────────────── */
    @media (min-width: 769px) {
      .fdr-primary { display: none; }   /* no trigger button on desktop */

      /* Action menu: show full buttons, hide + toggle */
      .action-menu-toggle { display: none; }
      .action-menu .action-menu-btn-full { display: inline-flex; }
      .page-header-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
      }

      /* For crew page: panel joins toolbar as flex children */
      #page-crew .filter-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 1.25rem;
        align-items: flex-end;
        margin-bottom: 1rem;
      }
      #page-crew .fdr-panel { display: contents; }
      #page-crew .fdr-body  { display: contents; }

      /* Vessel certificates: search + filters toolbar */
      #page-vessel-certs .vessel-certs-toolbar.filter-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 1.25rem;
        align-items: flex-end;
        margin-bottom: 1rem;
      }
      #page-vessel-certs .vessel-certs-toolbar.filter-toolbar .fdr-primary {
        display: flex !important;
        flex: 1 1 280px;
        min-width: 200px;
      }
      #page-vessel-certs .vessel-certs-toolbar.filter-toolbar [data-filter-drawer-panel],
      #page-vessel-certs .vessel-certs-toolbar.filter-toolbar .fdr-body {
        display: contents;
      }
      #page-vessel-certs .vessel-certs-filter-field {
        flex: 0 1 auto;
        min-width: 160px;
      }
      #page-vessel-certs .vessel-certs-search {
        margin-bottom: 0;
        width: 100%;
      }

      /* General case: panel items inline */
      [data-filter-drawer-panel] { display: contents; }
      .fdr-body { display: contents; }

      /* PMS equipment: selects inline in existing toolbar flex */
      .pms-equipment-library-toolbar.filter-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
      }
      .pms-equipment-library-toolbar.filter-toolbar [data-filter-drawer-panel] { display: contents; }
      .pms-equipment-library-toolbar.filter-toolbar .fdr-body .form-select {
        flex: 1 1 0;
        min-width: 96px;
        max-width: 220px;
      }

      /* SMS card header: toolbar layout preserved */
      .sms-card-header-toolbar.filter-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
      }
      .sms-card-header-toolbar.filter-toolbar [data-filter-drawer-panel] { display: contents; }
      .sms-card-header-toolbar.filter-toolbar .fdr-body { display: contents; }

      /* My Vessel Crew — single inline filter row with search */
      .my-vessel-crew-toolbar.filter-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1rem;
      }
      .my-vessel-crew-toolbar.filter-toolbar [data-filter-drawer-panel] {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
      }
      .my-vessel-crew-toolbar.filter-toolbar .fdr-body { display: contents; }

      /* Catering readings toolbar */
      .catering-readings-toolbar.filter-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: flex-end;
        width: 100%;
      }
      .catering-readings-toolbar.filter-toolbar [data-filter-drawer-panel] { display: contents; }
      .catering-readings-toolbar.filter-toolbar .fdr-body { display: contents; }

      /* Card-header hosted toolbars: collapse to contents */
      .card-header .filter-toolbar        { display: contents; }
      .card-header [data-filter-drawer-panel] { display: contents; }
      .card-header .fdr-body              { display: contents; }
      .card-header .fdr-primary           { display: none; }

      /* HR day types filter bar */
      .filter-toolbar:has(.hr-dt-filter-bar) [data-filter-drawer-panel] {
        display: block;
      }
      .filter-toolbar:has(.hr-dt-filter-bar) .fdr-body {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        align-items: flex-end;
        padding: 0.875rem 1rem;
        margin-bottom: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
      }

      /* Ballast tanks filter */
      #vessel-ballast-tanks-filter-bar.filter-toolbar [data-filter-drawer-panel] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
      }
      #vessel-ballast-tanks-filter-bar.filter-toolbar .fdr-body {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
      }

      /* Incidents / cert modal: pills-only toolbar, no primary row */
      #page-incidents .filter-toolbar,
      #crew-certificates-modal .filter-toolbar {
        margin-bottom: 1rem;
      }
      #page-incidents .filter-toolbar [data-filter-drawer-panel],
      #crew-certificates-modal .filter-toolbar [data-filter-drawer-panel] {
        display: contents;
      }
    }

    /* ── Mobile: off-canvas panel ───────────────────────────────────── */
    @media (max-width: 768px) {
      /* Show trigger button */
      .fdr-trigger { display: inline-flex; }

      /* Primary row stretches full width */
      .fdr-primary {
        width: 100%;
        flex-wrap: nowrap;
      }

      /* Hide panel items inline — only show inside the drawer */
      [data-filter-drawer-panel] { display: none !important; }

      /* Once JS adds .fdr-panel-ready: become a fixed off-canvas panel */
      [data-filter-drawer-panel].fdr-panel-ready {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 360px);
        z-index: 95;
        background: var(--bg-primary);
        border-left: 1px solid var(--border-color);
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        overscroll-behavior: contain;
      }

      /* Slide in when open */
      .fdr-host.fdr-open [data-filter-drawer-panel].fdr-panel-ready {
        transform: translateX(0);
      }

      /* Overlay */
      .fdr-overlay {
        display: block;
        background: rgba(0, 0, 0, 0);
        pointer-events: none;
        transition: background 0.28s ease;
      }
      .fdr-host.fdr-open .fdr-overlay {
        background: rgba(0, 0, 0, 0.55);
        pointer-events: auto;
      }

      /* Drawer header */
      .fdr-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: max(1.125rem, env(safe-area-inset-top)) 1.25rem 0.875rem;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
        background: var(--bg-primary);
      }
      .fdr-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        letter-spacing: -0.01em;
      }
      .fdr-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        padding: 0;
      }
      .fdr-close-btn:hover {
        background: var(--bg-secondary);
        color: var(--text-primary);
      }

      /* Scrollable body */
      .fdr-body {
        display: flex !important;
        flex-direction: column;
        gap: 1.25rem;
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem;
      }

      /* Section labels above filter groups */
      .fdr-body .form-label,
      .fdr-body .crew-filter-field .form-label {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        margin-bottom: 0.4rem;
      }

      /* Filter pills — vertical stacked list */
      .fdr-body .filter-pills {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: visible;
        padding-bottom: 0;
        margin-bottom: 0;
        gap: 0.375rem;
      }
      .fdr-body .filter-pill {
        width: 100%;
        text-align: left;
        border-radius: 8px;
        font-size: 0.875rem;
        padding: 0.6rem 0.85rem;
        flex-shrink: 0;
        justify-content: flex-start;
      }

      /* Selects and inputs */
      .fdr-body .crew-filter-field,
      .fdr-body .form-group { width: 100%; min-width: 0; }
      .fdr-body .crew-filter-field .form-input,
      .fdr-body .crew-filter-field .form-select,
      .fdr-body .form-input,
      .fdr-body .form-select,
      .fdr-body select {
        width: 100%;
        max-width: none;
        min-width: 0;
        font-size: 16px;
      }
      .fdr-body .crew-filter-toggle {
        width: 100%;
        text-align: left;
      }
      .fdr-body .pms-equipment-filter-select { width: 100%; max-width: none; }
      .fdr-body .hr-dt-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        border: none;
        background: transparent;
        padding: 0;
        margin-bottom: 0;
      }
      .fdr-body .hr-dt-filter-bar .btn { width: 100%; }
      .fdr-body label {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        font-size: 0.875rem;
        color: var(--text-secondary);
      }
      .fdr-body .catering-readings-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
      }
      .fdr-body .catering-readings-toolbar label { width: 100%; }
      .fdr-body .catering-readings-toolbar .btn  { width: 100%; }

      /* My Vessel Crew: unwrap so pills + selects stack in the drawer */
      .fdr-body .my-vessel-crew-filters,
      .fdr-body .my-vessel-crew-filter-row { display: contents; }

      /* Footer */
      .fdr-footer {
        display: flex;
        gap: 0.625rem;
        padding: 0.875rem 1.25rem;
        padding-bottom: max(0.875rem, env(safe-area-inset-bottom));
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
        background: var(--bg-primary);
      }
      .fdr-footer .btn {
        flex: 1 1 0;
        min-height: 44px;
        font-size: 0.9375rem;
      }

      /* SMS search bar stretches full width in primary row */
      .sms-card-header-toolbar.filter-toolbar .fdr-primary {
        width: 100%;
      }
      .sms-card-header-toolbar.filter-toolbar .sms-header-search {
        flex: 1 1 auto;
        min-width: 0;
      }
    }

    /* ── Internal Training: backward-compat classes (used by JS) ─────────────── */
    .internal-training-unit-card {
      transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }
    .internal-training-unit-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    }
    .internal-training-unit-card.drag-over {
      background-color: var(--bg-card-hover, rgba(255,255,255,0.04));
      transform: scale(1.01);
      border-color: var(--accent-primary) !important;
    }
    .internal-training-unit-handle {
      font-size: 0.82rem;
      color: var(--text-muted);
      padding-right: 0.3rem;
      user-select: none;
      cursor: grab;
    }
    .internal-training-unit-card.selected {
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.28);
    }
    .internal-training-unit-card.clickable { cursor: pointer; }
    .internal-training-course-name-status { display: none !important; }
    .internal-training-modal-split {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
      gap: 0.85rem;
      align-items: start;
    }
    .internal-training-preview-pane {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-secondary);
      padding: 0.65rem;
    }
    .internal-training-preview-card {
      border: 1px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      background: var(--bg-card);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }
    .internal-training-preview-slide {
      width: 100%;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.02);
      padding: 0.55rem;
    }
    .internal-training-section-preview-content {
      font-size: 0.875rem;
      line-height: 1.5;
      color: var(--text-primary);
      min-height: 180px;
      overflow-y: auto;
    }
    .internal-training-form-section {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.75rem;
      background: rgba(255, 255, 255, 0.01);
    }
    .internal-training-form-section + .internal-training-form-section { margin-top: 0.85rem; }
    .internal-training-form-section h4 { margin-top: 0; }
    .internal-training-action-btn {
      background: var(--accent-gradient);
      border-color: var(--accent-primary);
      color: #fff;
      box-shadow: 0 6px 14px rgba(14, 165, 233, 0.28);
    }
    .internal-training-action-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
    .internal-training-form-note {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin: 0 0 0.5rem 0;
    }
    .internal-training-muted {
      color: var(--text-secondary);
      font-size: 0.8rem;
      margin: 0 0 0.6rem 0;
    }
    .internal-training-flow {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .internal-training-flow-add {
      width: 100%;
      border: 1px dashed var(--border-color);
      border-radius: 999px;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0.3rem 0.6rem;
      font-size: 0.79rem;
      transition: all 0.18s ease;
    }
    .internal-training-flow-add:hover {
      border-color: var(--accent-primary);
      color: var(--text-primary);
      background: rgba(14, 165, 233, 0.07);
    }
    .internal-training-flow-add-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 999px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      margin-right: 0.3rem;
      font-weight: 700;
      line-height: 1;
      font-size: 0.75rem;
    }
    .internal-training-flow-card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
      padding: 0.6rem 0.7rem;
    }
    /* ── Internal Training: new it-* design system ─────────────────────────── */
    /* Tab bar */
    .it-tab-bar {
      display: flex;
      border-bottom: 1px solid var(--border-color);
    }
    .it-tab {
      padding: 0.55rem 1rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
      margin-bottom: -1px;
      white-space: nowrap;
    }
    .it-tab:hover { color: var(--text-primary); }
    .it-tab.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
    /* Toolbar rows */
    .it-toolbar-course-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }
    .it-toolbar-course-row select.form-input { min-width: 200px; flex: 1; }
    .it-toolbar-actions-row {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: wrap;
      padding: 0.5rem 0.7rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-bottom: 0.9rem;
      font-size: 0.82rem;
    }
    .it-toolbar-divider {
      width: 1px;
      height: 1.2rem;
      background: var(--border-color);
      margin: 0 0.2rem;
    }
    /* Status badge */
    .it-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 600;
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      background: var(--bg-secondary);
    }
    .it-status-badge.published { border-color: var(--success, #10b981); color: var(--success, #10b981); background: rgba(16, 185, 129, 0.1); }
    .it-status-badge.draft { border-color: var(--warning, #f59e0b); color: var(--warning, #f59e0b); background: rgba(245, 158, 11, 0.08); }
    /* Builder grid: flow primary (LEFT), preview secondary (RIGHT) */
    .it-builder-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
      gap: 1rem;
      align-items: start;
    }
    .it-flow-panel { display: flex; flex-direction: column; gap: 0.35rem; }
    .it-flow-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.4rem;
    }
    .it-flow-header h4 { margin: 0; font-size: 0.88rem; font-weight: 600; }
    .it-preview-panel { position: sticky; top: 0.5rem; }
    .it-preview-pane-box {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-secondary);
      padding: 0.65rem;
      min-height: 240px;
    }
    .it-preview-pane-label {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.55rem;
    }
    .it-empty-flow {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2.5rem 1.5rem;
      border: 2px dashed var(--border-color);
      border-radius: 12px;
      gap: 0.6rem;
      color: var(--text-secondary);
    }
    .it-empty-icon { font-size: 2rem; opacity: 0.3; }
    /* Section card type icons */
    .it-type-icon {
      width: 1.8rem;
      height: 1.8rem;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.82rem;
      flex-shrink: 0;
    }
    .it-type-icon.text  { background: rgba(99, 102, 241, 0.15); }
    .it-type-icon.video { background: rgba(239, 68, 68, 0.15); }
    .it-type-icon.link  { background: rgba(16, 185, 129, 0.15); }
    .it-type-icon.quiz  { background: rgba(245, 158, 11, 0.15); }
    /* Assignments panel */
    .it-assign-block {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 1rem;
      margin-bottom: 1rem;
    }
    .it-assign-block h4 { margin: 0 0 0.75rem 0; font-size: 0.88rem; }
    .it-assign-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }
    .it-assignment-item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.55rem 0.65rem;
      border-bottom: 1px solid var(--border-color);
    }
    .it-assignment-item:last-child { border-bottom: none; }
    /* Reports sections */
    .it-report-section {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 0.85rem;
    }
    .it-report-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.6rem 0.85rem;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
    }
    .it-report-section-header h4 { margin: 0; font-size: 0.88rem; font-weight: 600; }
    .it-report-section-body { padding: 0.85rem; }
    .it-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }
    .it-stat-card { padding: 0.6rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); }
    .it-stat-label { font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 0.18rem; }
    .it-stat-value { font-size: 1.05rem; font-weight: 700; }
    .it-stat-card.danger .it-stat-value { color: var(--danger, #ef4444); }
    /* Section type picker modal */
    .it-type-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      margin-top: 0.5rem;
    }
    .it-type-btn {
      text-align: left;
      border: 1.5px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-card);
      color: var(--text-primary);
      padding: 0.9rem;
      cursor: pointer;
      transition: all 0.18s ease;
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
    }
    .it-type-btn:hover {
      border-color: var(--accent-primary);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      background: var(--bg-secondary);
    }
    .it-type-btn-icon {
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
      flex-shrink: 0;
    }
    .it-type-btn-label { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.2rem; }
    .it-type-btn-desc { color: var(--text-secondary); font-size: 0.78rem; line-height: 1.3; }
    @media (max-width: 768px) {
      .it-builder-grid { grid-template-columns: 1fr; }
      .it-toolbar-course-row { flex-direction: column; align-items: stretch; }
      .it-toolbar-course-row select.form-input { min-width: 0; }
      .it-type-grid { grid-template-columns: 1fr; }
      .it-assign-grid { grid-template-columns: 1fr; }
      .it-tab-bar { overflow-x: auto; }
      .it-toolbar-divider { display: none; }
    }

    /* Empty State */
    .empty-state {
      text-align: center;
      padding: 3rem;
      color: var(--text-secondary);
    }

    .empty-state-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
      opacity: 0.5;
    }

    /* Loading Spinner */
    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 96px;
      padding: 3rem;
      text-align: center;
    }

    .loading > .spinner {
      flex-shrink: 0;
      margin: 0 auto;
    }

    td.loading {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

    .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid var(--border-color);
      border-top-color: var(--accent-primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Modal */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: var(--modal-backdrop);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition:
        opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
        visibility 200ms;
      transition-behavior: allow-discrete;
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* Cargo operational flow builder */
    .cargo-flow-workspace { display: flex; flex-direction: column; gap: 0.75rem; }
    .cargo-flow-layout {
      display: grid;
      grid-template-columns: minmax(200px, 220px) minmax(0, 1fr) minmax(240px, 300px);
      gap: 0.75rem;
      min-height: calc(100vh - 15rem);
    }
    @media (max-width: 1024px) {
      .cargo-flow-layout { grid-template-columns: 1fr; min-height: auto; }
    }
    .cargo-flow-toolbox-btn {
      display: block;
      width: 100%;
      text-align: left;
      padding: 0.5rem 0.6rem;
      margin-bottom: 0.35rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      cursor: pointer;
      font-size: 0.8rem;
      line-height: 1.35;
    }
    .cargo-flow-toolbox-btn:hover:not(:disabled) { border-color: var(--accent-primary); background: var(--bg-tertiary, var(--bg-secondary)); }
    .cargo-flow-toolbox-btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .cargo-flow-toolbox-btn strong { display: block; font-size: 0.85rem; margin-bottom: 0.15rem; }
    .cargo-flow-toolbox-btn span { color: var(--text-secondary); font-size: 0.72rem; }
    .cargo-flow-delete-btn {
      color: var(--danger);
      padding: 0.25rem 0.4rem;
      vertical-align: middle;
    }
    .cargo-flow-delete-btn:hover {
      background: rgba(239, 68, 68, 0.12);
      color: var(--danger);
    }
    .cargo-flow-canvas-host .cargo-flow-node {
      user-select: none;
      -webkit-user-select: none;
    }
    .cargo-flow-canvas-host {
      position: relative;
      min-height: 480px;
      height: 100%;
      overflow: auto;
      background: repeating-linear-gradient(0deg, transparent, transparent 19px, var(--border-color) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, var(--border-color) 20px);
      background-size: 20px 20px;
    }

    /* Internal Training modals: match app modal card style */
    #internal-training-learner-modal .modal-content,
    #internal-training-course-modal .modal-content,
    #internal-training-unit-modal .modal-content,
    #internal-training-question-builder-modal .modal-content,
    #internal-training-add-unit-modal .modal-content {
      background: var(--bg-card);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }
    #internal-training-learner-modal .modal-header,
    #internal-training-course-modal .modal-header,
    #internal-training-unit-modal .modal-header,
    #internal-training-question-builder-modal .modal-header,
    #internal-training-add-unit-modal .modal-header {
      border-bottom: 1px solid var(--border-color);
      color: var(--text-primary);
    }
    #internal-training-learner-modal .modal-body,
    #internal-training-course-modal .modal-body,
    #internal-training-unit-modal .modal-body,
    #internal-training-question-builder-modal .modal-body,
    #internal-training-add-unit-modal .modal-body {
      background: var(--bg-card);
      color: var(--text-primary);
    }
    #internal-training-learner-modal .modal-footer,
    #internal-training-course-modal .modal-footer,
    #internal-training-unit-modal .modal-footer,
    #internal-training-question-builder-modal .modal-footer,
    #internal-training-add-unit-modal .modal-footer {
      border-top: 1px solid var(--border-color);
      background: var(--bg-card);
    }

    /* When opened from Create Trip, create-group modal stacks on top */
    #create-group-modal.modal-overlay.active {
      z-index: 1100;
    }

    /* Job details modal stacks on top of equipment view when opened from equipment card */
    #pms-job-details-modal.modal-overlay.active {
      z-index: 1100;
    }
    /* Sign off stacks above equipment view (Execute closes job details but leaves equipment open) */
    #pms-execute-modal.modal-overlay.active {
      z-index: 1200;
    }
    /* Edit equipment modal stacks above equipment view (both stay open until edit is closed) */
    #pms-equipment-modal.modal-overlay.active {
      z-index: 1100;
    }
    /* Engine logbook field config opens on top of equipment edit (Configure logbook fields…) */
    #engine-logbook-fields-modal.modal-overlay.active {
      z-index: 1200;
    }
    /* Hours modal stacks above equipment view */
    #pms-equipment-hours-modal.modal-overlay.active {
      z-index: 1100;
    }
    #pms-equipment-transfer-modal.modal-overlay.active {
      z-index: 1100;
    }
    .pms-oem-matches[hidden] { display: none !important; }
    .pms-oem-matches { margin-top: 0.35rem; }
    #pms-equipment-transfer-modal .pms-equipment-transfer-steps {
      position: relative;
    }
    #pms-equipment-transfer-modal .pms-equipment-transfer-step {
      opacity: 1;
      translate: 0 0;
      transition:
        opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
        translate 200ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #pms-equipment-transfer-modal .pms-equipment-transfer-step[hidden] {
      display: none;
    }
    #pms-equipment-transfer-modal .pms-equipment-transfer-step[data-closing] {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      pointer-events: none;
    }
    #pms-equipment-transfer-modal[data-step-dir="forward"] .pms-equipment-transfer-step[data-closing] {
      opacity: 0;
      translate: -12px 0;
    }
    #pms-equipment-transfer-modal[data-step-dir="back"] .pms-equipment-transfer-step[data-closing] {
      opacity: 0;
      translate: 12px 0;
    }
    @starting-style {
      #pms-equipment-transfer-modal[data-step-dir="forward"] .pms-equipment-transfer-step:not([hidden]) {
        opacity: 0;
        translate: 12px 0;
      }
      #pms-equipment-transfer-modal[data-step-dir="back"] .pms-equipment-transfer-step:not([hidden]) {
        opacity: 0;
        translate: -12px 0;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #pms-equipment-transfer-modal .pms-equipment-transfer-step {
        translate: none;
        transition-duration: 120ms;
      }
      #pms-equipment-transfer-modal[data-step-dir="forward"] .pms-equipment-transfer-step[data-closing],
      #pms-equipment-transfer-modal[data-step-dir="back"] .pms-equipment-transfer-step[data-closing] {
        translate: none;
      }
      @starting-style {
        #pms-equipment-transfer-modal[data-step-dir="forward"] .pms-equipment-transfer-step:not([hidden]),
        #pms-equipment-transfer-modal[data-step-dir="back"] .pms-equipment-transfer-step:not([hidden]) {
          translate: none;
        }
      }
    }
    .pms-equipment-view-title-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 0.5rem;
      width: 100%;
    }
    .pms-equipment-view-title-actions {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      flex-shrink: 0;
    }
    .pms-equipment-view-edit-pencil {
      padding: 0.35rem !important;
      min-width: auto !important;
      line-height: 1;
    }
    .pms-equipment-view-edit-pencil svg {
      display: block;
    }
    .pms-equipment-view-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.75rem;
      width: 100%;
    }

    /* Job details: dark card for each data section */
    .pms-job-detail-section {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 1rem 1.25rem;
      margin-bottom: 1rem;
    }
    .pms-job-detail-section h4 {
      margin: 0 0 0.75rem 0;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .pms-job-detail-section .pms-overview-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.75rem 1.5rem;
      width: 100%;
    }
    .pms-job-detail-section .pms-overview-item {
      min-width: 0;
    }
    .pms-job-detail-section .pms-overview-item label {
      display: block;
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-bottom: 0.2rem;
    }
    .pms-job-detail-section .pms-overview-item .value {
      font-size: 0.9rem;
      color: var(--text-primary);
    }
    .pms-job-detail-section .pms-prediction-wrap[title] {
      cursor: help;
    }

    .pms-jcl-layout {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.15fr);
      gap: 1rem;
      align-items: start;
    }
    @media (max-width: 960px) {
      .pms-jcl-layout { grid-template-columns: 1fr; }
    }
    .pms-jcl-section-label {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-secondary);
      padding: 0.55rem 0.85rem 0.35rem;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }
    .pms-jcl-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 0.85rem;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
      transition: background 0.12s ease;
    }
    .pms-jcl-row:last-child { border-bottom: none; }
    .pms-jcl-row:hover { background: var(--bg-secondary); }
    .pms-jcl-row-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.35rem 0.5rem;
      line-height: 1.35;
    }
    .pms-jcl-job-title {
      font-weight: 600;
      font-size: 0.8125rem;
      color: var(--primary);
    }
    .pms-jcl-checklist-name {
      font-size: 0.8125rem;
      color: var(--text-secondary);
    }
    .pms-jcl-sep {
      color: var(--text-muted, var(--text-secondary));
      font-size: 0.75rem;
      user-select: none;
    }
    .pms-jcl-chevron {
      flex-shrink: 0;
      color: var(--text-muted, var(--text-secondary));
      opacity: 0.6;
    }
    .pms-jcl-empty {
      padding: 1rem 0.85rem;
      color: var(--text-secondary);
      font-size: 0.875rem;
      margin: 0;
    }
    .pms-jcl-delete-btn {
      flex-shrink: 0;
      padding: 0.15rem 0.4rem;
      font-size: 0.75rem;
      line-height: 1;
    }

    .pms-attention-table-wrap {
      width: 100%;
      overflow-x: auto;
    }
    .pms-attention-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
    }
    .pms-attention-table thead th {
      padding: 0.35rem 0.65rem;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-secondary);
      text-align: left;
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
    }
    .pms-attention-table tbody tr {
      cursor: pointer;
      transition: background 0.12s ease;
    }
    .pms-attention-table tbody tr:hover {
      background: var(--bg-secondary);
    }
    .pms-attention-table tbody tr.pms-attention-row--overdue {
      background: rgba(220, 53, 69, 0.05);
    }
    .pms-attention-table tbody tr.pms-attention-row--overdue:hover {
      background: rgba(220, 53, 69, 0.09);
    }
    .pms-attention-table td {
      padding: 0.4rem 0.65rem;
      border-bottom: 1px solid var(--border-color);
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 12rem;
    }
    .pms-attention-table td.pms-attention-col-job {
      max-width: min(36vw, 22rem);
      font-weight: 600;
      color: var(--primary);
    }
    .pms-attention-table td.pms-attention-col-due {
      max-width: 9rem;
      font-size: 0.8125rem;
    }
    .pms-attention-table td.pms-attention-col-due.is-overdue {
      color: var(--danger);
      font-weight: 600;
    }
    .pms-attention-table td.pms-attention-col-status,
    .pms-attention-table td.pms-attention-col-priority {
      max-width: 5.5rem;
    }
    @media (max-width: 720px) {
      .pms-attention-table .pms-attention-col-equip { display: none; }
      .pms-attention-table thead .pms-attention-col-equip { display: none; }
    }

    .pms-defect-equipment-card {
      padding: 1rem 1.25rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 0.9rem;
    }
    .pms-defect-equipment-row {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      padding: 0.4rem 0;
      border-bottom: 1px solid var(--border-color);
    }
    .pms-defect-equipment-row:last-child {
      border-bottom: none;
    }
    .pms-defect-equipment-label {
      min-width: 5.5rem;
      font-size: 0.8rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .pms-defect-equipment-value {
      color: var(--text-primary);
      font-weight: 500;
    }

    .pms-equipment-list-table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .pms-equipment-list-table {
      width: 100%;
      min-width: 860px;
      table-layout: auto;
    }
    .pms-equipment-list-table th {
      text-align: left;
      font-size: 0.875rem;
      font-weight: 600;
      padding: 0.75rem 0.5rem;
      white-space: nowrap;
    }
    .pms-equipment-list-table td {
      padding: 0.75rem 0.5rem;
      vertical-align: middle;
      font-size: 0.875rem;
    }
    .pms-equipment-list-table tbody tr.pms-equipment-table-row:hover {
      filter: brightness(1.05);
    }
    /* Equipment Library: one row on desktop; mobile shows search + optional Filters toggle */
    .pms-equipment-library-card-header {
      flex-wrap: wrap;
      gap: 0.65rem 1rem;
      align-items: center;
    }
    .pms-equipment-library-title-row {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-shrink: 0;
    }
    .pms-equipment-library-card-header .card-title {
      margin: 0;
    }
    .pms-equipment-library-print-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      padding: 0;
      min-width: 0;
      flex-shrink: 0;
    }
    .pms-equipment-library-print-btn svg {
      width: 1rem;
      height: 1rem;
    }
    .pms-equipment-library-toolbar {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.45rem;
      flex: 1 1 auto;
      min-width: 0;
      box-sizing: border-box;
    }
    .pms-equipment-library-search {
      flex: 1 1 160px;
      min-width: 0;
      max-width: 360px;
    }
    .pms-equipment-library-toolbar .form-select.pms-equipment-filter-select {
      flex: 1 1 0;
      min-width: 96px;
      max-width: 220px;
    }
    .pms-equipment-library-toolbar .form-input,
    .pms-equipment-library-toolbar .form-select {
      box-sizing: border-box;
    }
    .pms-equipment-card-list {
      display: none;
    }
    .pms-equipment-card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-secondary);
      padding: 0.55rem 0.65rem;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .pms-equipment-card--clickable {
      cursor: pointer;
    }
    .pms-equipment-card--clickable:hover {
      border-color: var(--accent-primary);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    }
    .pms-equipment-card--clickable:focus-visible {
      outline: 2px solid var(--accent-primary);
      outline-offset: 2px;
    }
    .pms-equipment-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.2rem;
    }
    .pms-equipment-card-edit-btn {
      flex-shrink: 0;
      padding: 0.35rem !important;
      min-width: auto !important;
      line-height: 1;
    }
    .pms-equipment-card-edit-btn svg {
      display: block;
    }
    .pms-equipment-card-title {
      margin: 0;
      font-size: 1.08rem;
      font-weight: 600;
      color: var(--accent-primary);
      text-decoration: none;
      word-break: break-word;
      flex: 1;
      min-width: 0;
      line-height: 1.25;
    }
    .pms-equipment-card-subtitle {
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-bottom: 0.4rem;
      word-break: break-word;
    }
    .pms-equipment-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.22rem 0.55rem;
      margin-bottom: 0.4rem;
    }
    .pms-equipment-card-field {
      min-width: 0;
    }
    .pms-equipment-card-field-label {
      display: block;
      color: var(--text-muted);
      font-size: 0.68rem;
      margin-bottom: 0.08rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .pms-equipment-card-field-value {
      display: block;
      color: var(--text-primary);
      font-size: 0.8rem;
      word-break: break-word;
      line-height: 1.25;
    }
    .pms-equipment-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-top: 0.15rem;
    }
    .pms-equipment-card-actions .btn {
      flex: 1 1 auto;
      justify-content: center;
    }
    .pms-equipment-view-manuals-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .pms-equipment-view-manual-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem 1rem;
      align-items: center;
      padding: 0.5rem 0.75rem;
      background: var(--bg-secondary);
      border-radius: 6px;
      border: 1px solid var(--border-color);
      box-sizing: border-box;
    }
    .pms-equipment-view-manual-name {
      font-size: 0.875rem;
      word-break: break-word;
      color: var(--text-primary);
      min-width: 0;
    }
    .pms-equipment-view-manual-action {
      justify-self: end;
      text-align: right;
    }
    .pms-equipment-view-manual-action .btn {
      white-space: nowrap;
    }
    @media (max-width: 520px) {
      .pms-equipment-view-manual-row {
        grid-template-columns: 1fr;
      }
      .pms-equipment-view-manual-action {
        justify-self: stretch;
        text-align: left;
      }
      .pms-equipment-view-manual-action .btn {
        width: 100%;
        justify-content: center;
      }
    }
    .pms-equipment-view-overview-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem 1.5rem;
    }
    .pms-equipment-view-two-col-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    /* Callback/Overtime: posted vs accepted shifts side-by-side on large viewports */
    .callback-overtime-shifts-jobs-grid {
      display: grid;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
    }
    .callback-overtime-shifts-jobs-grid > .card {
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
    }
    .callback-overtime-shifts-jobs-grid > .card > .card-body {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    @media (min-width: 1024px) {
      .callback-overtime-shifts-jobs-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }
    }

    .shift-post-card {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.85rem 1rem;
      margin-bottom: 0.75rem;
      box-sizing: border-box;
    }
    .shift-post-card__header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 0.45rem;
    }
    .shift-post-card__title {
      margin: 0;
      font-size: 1.0625rem;
      font-weight: 600;
      line-height: 1.3;
    }
    .shift-post-card__actions {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      justify-content: flex-end;
      flex-shrink: 0;
    }
    .shift-post-card__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 0.85rem;
      font-size: 0.8125rem;
      color: var(--text-secondary);
      margin-bottom: 0.35rem;
    }
    .shift-post-card__pay-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.85rem;
      font-size: 0.875rem;
      margin-bottom: 0.35rem;
    }
    .shift-post-card__rate {
      font-weight: 600;
      color: var(--text-primary);
    }
    .shift-post-card__filled {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.8125rem;
      font-weight: 600;
      padding: 0.15rem 0.45rem;
      border-radius: 999px;
      background: var(--bg-secondary);
      color: var(--text-secondary);
    }
    .shift-post-card__filled--partial {
      background: var(--warning-bg);
      color: var(--warning);
    }
    .shift-post-card__filled--full {
      background: var(--success-bg);
      color: var(--success);
    }
    .shift-post-card--incomplete {
      border-color: color-mix(in srgb, var(--warning) 55%, var(--border-color));
      background: color-mix(in srgb, var(--warning-bg) 55%, var(--bg-primary));
    }
    .shift-post-card__missing {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.78rem;
      font-weight: 600;
      padding: 0.2rem 0.5rem;
      border-radius: 6px;
      background: var(--warning-bg);
      color: var(--warning);
      border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    }
    .shift-post-card__missing::before {
      content: '!';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      font-size: 0.7rem;
      font-weight: 700;
      background: var(--warning);
      color: #fff;
    }
    .shift-post-card__desc {
      color: var(--text-secondary);
      font-size: 0.875rem;
      margin: 0.35rem 0 0;
      line-height: 1.4;
    }
    #post-shift-form .form-group--needs-attention > .form-label {
      color: var(--warning);
    }
    #post-shift-form .form-group--needs-attention > .form-input,
    #post-shift-form .form-input:user-invalid {
      border-color: var(--warning);
      background: color-mix(in srgb, var(--warning-bg) 70%, var(--bg-primary));
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 35%, transparent);
    }
    #post-shift-form .form-field-hint--required {
      display: none;
      margin-top: 0.25rem;
      font-size: 0.75rem;
      color: var(--warning);
      line-height: 1.35;
    }
    #post-shift-form .form-group--needs-attention > .form-field-hint--required,
    #post-shift-form .form-input:user-invalid ~ .form-field-hint--required {
      display: block;
    }
    #post-shift-form .form-input:user-valid {
      border-color: color-mix(in srgb, var(--success) 55%, var(--border-color));
    }
    #assign-crew-mid-trip-hint {
      display: none;
      margin: 0 0 0.85rem;
      padding: 0.65rem 0.75rem;
      border-radius: 8px;
      border-left: 3px solid var(--primary);
      background: var(--bg-secondary);
      font-size: 0.8rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }
    .crew-gap-card__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: nowrap;
      margin-bottom: 0.25rem;
    }
    .crew-gap-card__title {
      font-weight: 600;
      font-size: 0.9rem;
      line-height: 1.25;
      min-width: 0;
      flex: 1;
    }
    .crew-gap-card__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      flex-shrink: 0;
      justify-content: flex-end;
    }
    .crew-gap-card__post-btn {
      flex-shrink: 0;
      font-size: 0.78rem;
      padding: 0.25rem 0.5rem;
    }
    .crew-gap-card__agency-sent {
      font-size: 0.72rem;
      color: var(--success);
      margin-top: 0.3rem;
      font-weight: 500;
    }
    .crew-gap-card__agency-btn--sent {
      background: var(--success) !important;
      border-color: var(--success) !important;
      color: #fff !important;
    }
    .crew-gap-card__agency-btn--sent:hover {
      filter: brightness(0.95);
    }

    /* Accepted shifts / jobs: shift + assignees on one row; stack or trim meta on narrow screens */
    .accepted-shift-job-card {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.65rem 0.85rem;
      margin-bottom: 0.65rem;
      background: var(--success-bg);
      border-left-width: 4px;
      border-left-color: var(--success);
      box-sizing: border-box;
    }
    .accepted-shift-job-card__row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 0.6rem;
    }
    .accepted-shift-job-card__lead {
      display: flex;
      flex-flow: row wrap;
      align-items: baseline;
      gap: 0.2rem 0.35rem;
      min-width: 0;
      flex: 1;
      font-size: 0.875rem;
      line-height: 1.35;
    }
    .accepted-shift-job-card__title {
      font-weight: 600;
      font-size: 1rem;
      color: var(--text-primary);
    }
    .accepted-shift-job-card__sep {
      color: var(--text-muted);
      font-weight: 400;
      user-select: none;
    }
    .accepted-shift-job-card__meta {
      color: var(--text-secondary);
      font-size: 0.8125rem;
      display: inline;
    }
    .accepted-shift-job-card__meta-chunk + .accepted-shift-job-card__meta-chunk::before {
      content: ' ';
    }
    .accepted-shift-job-card__names {
      font-weight: 500;
      color: var(--text-primary);
      font-size: 0.875rem;
      min-width: 0;
    }
    .accepted-shift-job-card__check {
      color: var(--success);
      font-weight: 700;
      margin-right: 0.15rem;
    }
    .accepted-shift-job-card__cancel {
      padding: 0.35rem 0.65rem !important;
      font-size: 0.8125rem !important;
      flex-shrink: 0;
      background: var(--danger-bg) !important;
      border-color: var(--danger) !important;
      color: var(--danger) !important;
    }
    .accepted-shift-job-card__desc {
      color: var(--text-secondary);
      font-size: 0.8125rem;
      margin: 0.5rem 0 0 0;
      line-height: 1.4;
    }
    @media (max-width: 640px) {
      .accepted-shift-job-card__row {
        flex-direction: column;
        align-items: stretch;
      }
      .accepted-shift-job-card__lead {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
      }
      .accepted-shift-job-card__sep {
        display: none;
      }
      .accepted-shift-job-card__names {
        flex: 1 1 auto;
        width: 100%;
        padding-top: 0.15rem;
      }
    }
    @media (max-width: 480px) {
      .accepted-shift-job-card__meta-chunk:not(:first-child) {
        display: none;
      }
    }

    /* Spare part detail modal stacks on top of equipment view when opened from equipment card */
    #pms-spare-part-detail-modal.modal-overlay.active {
      z-index: 1100;
    }

    /* Work history detail popout (above equipment view modal) */
    #pms-equipment-history-detail-modal.modal-overlay.active {
      z-index: 1100;
    }

    .modal {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      width: 90%;
      max-width: 500px;
      max-height: 90vh;
      overflow-y: auto;
      transform: scale(0.95);
      transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .modal-overlay.active .modal {
      transform: scale(1);
    }

    @media (prefers-reduced-motion: reduce) {
      .modal-overlay {
        transition-duration: 120ms;
      }
      .modal,
      .modal-overlay.active .modal {
        transform: none;
        transition: none;
      }
    }

    #catering-delete-document-dialog {
      margin: auto;
      padding: 0;
      border: 1px solid var(--border-color);
      border-radius: 16px;
      background: var(--bg-card);
      color: var(--text-primary);
      width: min(440px, calc(100vw - 2rem));
      max-width: 440px;
      box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
    }
    #catering-delete-document-dialog::backdrop {
      background: var(--modal-backdrop);
    }
    #catering-delete-document-dialog form {
      display: flex;
      flex-direction: column;
    }
    #catering-delete-document-dialog header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 1.1rem 1.25rem;
      border-bottom: 1px solid var(--border-color);
    }
    #catering-delete-document-dialog h2 {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    #catering-delete-document-dialog .catering-delete-document-close {
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 1.35rem;
      line-height: 1;
      padding: 0.15rem 0.35rem;
      cursor: pointer;
    }
    #catering-delete-document-dialog p {
      margin: 0;
      padding: 1.1rem 1.25rem 1.25rem;
      color: var(--text-primary);
      line-height: 1.5;
    }
    #catering-delete-document-dialog footer {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      padding: 0.9rem 1.25rem;
      border-top: 1px solid var(--border-color);
    }

    .catering-icon-add {
      width: 2rem;
      height: 2rem;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
      color: var(--text-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      flex: 0 0 auto;
      transition: transform 120ms ease-out, background-color 120ms ease-out;
    }
    .catering-icon-add:hover {
      background: var(--bg-secondary);
    }
    .catering-icon-add:active {
      transform: scale(0.94);
    }
    .catering-icon-add svg {
      width: 1rem;
      height: 1rem;
    }
    .catering-icon-add:disabled {
      opacity: 0.4;
      cursor: default;
    }
    .catering-icon-add:disabled:active {
      transform: none;
    }
    .catering-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .catering-section-head .catering-config-sub-label {
      margin: 1.25rem 0 0;
      padding-top: 1rem;
      border-top: 1px solid var(--border-color);
      flex: 1 1 auto;
    }
    .catering-sheet-dialog {
      margin: auto;
      padding: 0;
      border: 1px solid var(--border-color);
      border-radius: 16px;
      background: var(--bg-card);
      color: var(--text-primary);
      width: min(440px, calc(100vw - 2rem));
      max-width: 440px;
      box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28);
      opacity: 1;
      transform: scale(1);
      transition: opacity 200ms ease, transform 280ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    @starting-style {
      .catering-sheet-dialog {
        opacity: 0;
        transform: scale(0.96);
      }
    }
    .catering-sheet-dialog::backdrop {
      background: var(--modal-backdrop);
    }
    .catering-sheet-dialog form {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .catering-sheet-dialog header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 1.1rem 1.25rem;
      border-bottom: 1px solid var(--border-color);
    }
    .catering-sheet-dialog h2 {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .catering-sheet-dialog .catering-add-supplier-body {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      padding: 1.1rem 1.25rem 1.25rem;
    }
    .catering-sheet-dialog .form-group { margin: 0; }
    #catering-invoice-upload-dialog {
      width: min(480px, calc(100vw - 2rem));
      max-width: 480px;
    }

    #catering-add-supplier-dialog {
      width: min(480px, calc(100vw - 2rem));
      max-width: 480px;
    }
    .catering-search-results {
      position: absolute;
      z-index: 30;
      left: 0;
      right: 0;
      top: 100%;
      margin-top: 0.25rem;
      max-height: 220px;
      overflow-y: auto;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    }
    .catering-search-results[hidden] { display: none !important; }
    .catering-search-results button {
      display: block;
      width: 100%;
      text-align: left;
      padding: 0.5rem 0.75rem;
      border: 0;
      border-bottom: 1px solid var(--border-color);
      background: transparent;
      color: inherit;
      cursor: pointer;
      font: inherit;
    }
    .catering-search-results button:last-child { border-bottom: 0; }
    .catering-search-results button:hover,
    .catering-search-results button:focus-visible { background: var(--bg-secondary); }
    .catering-add-where {
      border: 0;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .catering-add-where legend { padding: 0; }
    .catering-check-line {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0;
      font-size: 0.875rem;
      cursor: pointer;
    }
    #catering-add-port-fees { display: flex; flex-wrap: wrap; gap: 0.75rem; }
    #catering-add-port-fees[hidden] { display: none !important; }
    .catering-sheet-dialog footer {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      padding: 0.9rem 1.25rem;
      border-top: 1px solid var(--border-color);
    }
    #catering-config-supplier-suggestions[hidden] { display: none !important; }
    @media (prefers-reduced-motion: reduce) {
      .catering-icon-add,
      .catering-sheet-dialog {
        transition: none;
        transform: none;
      }
      .catering-icon-add:active { transform: none; }
    }


    .pcd-ports-checkbox-list {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.5rem 0.65rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      background: var(--bg-secondary);
    }
    .pcd-ports-checkbox-list label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      font-size: 0.875rem;
      margin: 0;
    }

    /* HR day types catalogue & payroll mappings (theme-aware, matches HR tab) */
    .hr-dt-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1rem;
      align-items: flex-end;
      padding: 0.875rem 1rem;
      margin-bottom: 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
    }
    .hr-dt-filter-bar .form-group { margin: 0; }
    .hr-dt-section-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 1.125rem 0 0.5rem 0;
      padding-bottom: 0.4rem;
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.055em;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border-color);
    }
    .hr-dt-section-title:first-of-type { margin-top: 0; }
    .hr-dt-table-wrap {
      width: 100%;
      box-sizing: border-box;
      overflow-x: auto;
      margin-bottom: 0.875rem;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-primary);
    }
    .hr-dt-table-wrap .data-table {
      width: 100%;
      margin: 0;
      font-size: 0.8125rem;
      min-width: 720px;
      table-layout: auto;
    }
    .hr-dt-table-wrap .data-table thead th {
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.045em;
      padding: 0.65rem 0.8rem;
      border-bottom: 1px solid var(--border-color);
    }
    /* HR catalogue: “Offerable” header — affordance for hover tooltip (native title + fixed tip) */
    #page-hr .hr-catalog-th-tip-label {
      cursor: help;
      border-bottom: 1px dotted color-mix(in srgb, var(--text-secondary) 50%, transparent);
    }
    .hr-dt-table-wrap .data-table tbody td {
      padding: 0.55rem 0.8rem;
      vertical-align: middle;
      border-bottom: 1px solid var(--border-color);
    }
    .hr-dt-table-wrap .data-table tbody tr:last-child td { border-bottom: none; }
    .hr-dt-table-wrap .data-table tbody tr:hover td {
      background: color-mix(in srgb, var(--accent-primary, #3b82f6) 8%, transparent);
    }
    .hr-dt-code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.78rem;
      padding: 0.2rem 0.45rem;
      border-radius: 6px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
    }
    .hr-dt-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.25rem;
      padding: 0.2rem 0.55rem;
      border-radius: 999px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .hr-dt-pill.yes {
      background: color-mix(in srgb, var(--success, #22c55e) 18%, transparent);
      color: var(--success, #22c55e);
    }
    .hr-dt-pill.no {
      background: color-mix(in srgb, var(--text-muted) 22%, transparent);
      color: var(--text-secondary);
    }
    .hr-dt-actions { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
    .hr-dt-actions .btn-sm { min-height: 32px; }
    .hr-dt-muted { color: var(--text-muted); font-size: 0.85rem; }
    .hr-dt-card-title-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: color-mix(in srgb, var(--accent-primary, #3b82f6) 14%, transparent);
      color: var(--accent-primary, #3b82f6);
    }
    .hr-dt-card-title-icon svg { display: block; }

    .hr-pdtm-add-panel {
      margin-top: 1.25rem;
      padding: 1rem 1.125rem;
      border-radius: 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
    }
    .hr-pdtm-add-heading {
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-secondary);
      margin: 0 0 0.875rem 0;
    }
    .hr-pdtm-form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
      gap: 0.875rem 1rem;
      align-items: end;
    }
    .hr-pdtm-form-grid .form-group { margin: 0; }
    .hr-pdtm-form-grid .btn { align-self: end; }
    .hr-pdtm-table-wrap {
      width: 100%;
      box-sizing: border-box;
      overflow-x: auto;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-primary);
    }
    .hr-pdtm-table-wrap .data-table {
      width: 100%;
      margin: 0;
      font-size: 0.8125rem;
      min-width: 480px;
      table-layout: auto;
    }
    .hr-pdtm-table-wrap .data-table thead th {
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.045em;
      padding: 0.65rem 0.8rem;
      border-bottom: 1px solid var(--border-color);
    }
    .hr-pdtm-table-wrap .data-table tbody td {
      padding: 0.55rem 0.8rem;
      vertical-align: middle;
      border-bottom: 1px solid var(--border-color);
    }
    .hr-pdtm-table-wrap .data-table tbody tr:last-child td { border-bottom: none; }
    .hr-pdtm-table-wrap .data-table tbody tr:hover td {
      background: color-mix(in srgb, var(--accent-primary, #3b82f6) 8%, transparent);
    }
    .hr-pdtm-code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.78rem;
      padding: 0.2rem 0.45rem;
      border-radius: 6px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
    }

    /* Catalogue body fills sub-card so Work / Leave / Absence / Other tables span full width */
    #hr-day-types-catalog-body,
    #hr-pdtm-body {
      width: 100%;
      box-sizing: border-box;
    }

    /* Day-type catalogue + payroll tables inside leave card: match rank/crew matrix tables */
    #hr-day-types-catalog-section .hr-dt-table-wrap,
    #hr-payroll-day-type-mappings-section .hr-pdtm-table-wrap {
      border-radius: 8px;
    }
    #hr-day-types-catalog-section .hr-dt-table-wrap .data-table,
    #hr-payroll-day-type-mappings-section .hr-pdtm-table-wrap .data-table {
      width: 100%;
      font-size: 0.82rem;
    }
    #hr-day-types-catalog-section .hr-dt-table-wrap .data-table thead th,
    #hr-payroll-day-type-mappings-section .hr-pdtm-table-wrap .data-table thead th {
      text-transform: none;
      letter-spacing: normal;
      font-size: 0.72rem;
      font-weight: 600;
    }

    #hr-day-type-edit-modal.modal-overlay.active { z-index: 1100; }
    #hr-offboarding-modal.modal-overlay.active { z-index: 1090; }
    #hr-121-person-modal.modal-overlay.active { z-index: 1090; }
    #hr-appraisal-templates-modal.modal-overlay.active { z-index: 1090; }
    #hr-appraisal-template-create-modal.modal-overlay.active { z-index: 1100; }
    #hr-appraisal-template-edit-modal.modal-overlay.active { z-index: 1100; }
    #crew-certificates-modal.modal-overlay.active { z-index: 1050; }
    #training-providers-modal.modal-overlay.active { z-index: 1100; }
    #vcal-qual-override-modal.modal-overlay.active { z-index: 1100; }
    #vcal-holiday-overlap-modal.modal-overlay.active { z-index: 1100; }
    #hr-offboarding-modal .modal,
    #hr-appraisal-templates-modal .modal,
    #hr-appraisal-template-edit-modal .modal {
      max-width: 720px;
      width: 94%;
      max-height: min(92vh, 900px);
      display: flex;
      flex-direction: column;
      box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4);
    }
    #hr-offboarding-modal .modal { max-width: 640px; }
    #hr-appraisal-templates-modal .modal { max-width: 640px; }
    #hr-offboarding-modal .modal-header,
    #hr-appraisal-templates-modal .modal-header,
    #hr-appraisal-template-edit-modal .modal-header {
      padding: 1.1rem 1.25rem;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-card);
      flex-shrink: 0;
    }
    #hr-offboarding-modal .modal-title,
    #hr-appraisal-templates-modal .modal-title,
    #hr-appraisal-template-edit-modal .modal-title { color: var(--text-primary); font-size: 1.05rem; }
    #hr-offboarding-modal .modal-body,
    #hr-appraisal-templates-modal .modal-body,
    #hr-appraisal-template-edit-modal .modal-body {
      padding: 1.1rem 1.25rem 1.25rem;
      background: var(--bg-card);
      color: var(--text-primary);
      overflow-y: auto;
      flex: 1 1 auto;
    }
    #hr-offboarding-modal .modal-footer,
    #hr-appraisal-templates-modal .modal-footer,
    #hr-appraisal-template-edit-modal .modal-footer {
      padding: 0.9rem 1.25rem;
      border-top: 1px solid var(--border-color);
      background: var(--bg-secondary);
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    .hr-tpl-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 0.75rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid var(--border-color);
    }
    .hr-tpl-row:last-child { border-bottom: none; }
    .hr-tpl-row-meta { min-width: 0; flex: 1 1 12rem; }
    .hr-tpl-row-meta strong { display: block; font-size: 0.9rem; color: var(--text-primary); }
    .hr-tpl-row-meta .hr-tpl-row-sub {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-top: 0.15rem;
    }
    .hr-tpl-row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      align-items: center;
    }
    .hr-tpl-section-card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-secondary);
      padding: 0.85rem 0.95rem;
      margin-bottom: 0.65rem;
    }
    .hr-tpl-section-card-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.65rem;
    }
    .hr-tpl-section-card-head .hr-tpl-sec-index {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-secondary);
    }
    .hr-tpl-section-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.65rem 0.75rem;
    }
    @media (max-width: 640px) {
      .hr-tpl-section-grid { grid-template-columns: 1fr; }
    }
    .hr-tpl-section-grid .form-group { margin: 0; }
    .hr-tpl-section-grid .hr-tpl-span-2 { grid-column: 1 / -1; }
    .hr-tpl-type-hint {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin: 0.25rem 0 0 0;
      line-height: 1.35;
    }
    .hr-tpl-required-row {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.82rem;
      color: var(--text-secondary);
      margin-top: 0.15rem;
    }
    .hr-cycle-card { container-type: inline-size; container-name: hr-cycle; }
    .hr-cycle-card .card-body { min-inline-size: 0; }
    .hr-cycle-card .form-input { width: 100%; max-inline-size: 100%; min-inline-size: 0; }
    .hr-cycle-step {
      font-size: 0.75rem;
      font-weight: 650;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin: 0 0 0.45rem;
    }
    .hr-cycle-list { display: grid; gap: 0.45rem; }
    .hr-cycle-list-item {
      appearance: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      width: 100%;
      min-inline-size: 0;
      min-block-size: 2.75rem;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
      color: var(--text-primary);
      padding: 0.8rem 0.9rem;
      text-align: left;
      cursor: pointer;
    }
    .hr-cycle-list-item:hover:not(:disabled) { border-color: var(--text-secondary); background: var(--bg-secondary); }
    .hr-cycle-list-item:focus-visible {
      outline: 2px solid var(--accent-primary, #3b82f6);
      outline-offset: 2px;
    }
    .hr-cycle-list-item.is-selected {
      border-color: var(--accent-primary, #3b82f6);
      background: var(--bg-secondary);
      box-shadow: inset 3px 0 0 var(--accent-primary, #3b82f6);
    }
    .hr-cycle-list-item-copy { min-inline-size: 0; flex: 1 1 auto; }
    .hr-cycle-list-item-title {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: wrap;
      font-weight: 650;
      font-size: 0.92rem;
    }
    .hr-cycle-list-item-meta { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.2rem; overflow-wrap: anywhere; }
    .hr-cycle-list-item-action {
      flex: 0 0 auto;
      font-size: 0.78rem;
      font-weight: 650;
      color: var(--accent-primary, #3b82f6);
      white-space: nowrap;
    }
    .hr-cycle-empty {
      margin-top: 1rem;
      padding: 1.1rem 1rem;
      border: 1px dashed var(--border-color);
      border-radius: 10px;
      color: var(--text-secondary);
      font-size: 0.88rem;
      background: var(--bg-secondary);
      text-wrap: pretty;
    }
    .hr-cycle-workspace { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--border-color); min-inline-size: 0; }
    .hr-cycle-workspace-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem 1rem;
      flex-wrap: wrap;
      margin-bottom: 0.85rem;
    }
    .hr-cycle-workspace-title {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.2rem 0.75rem;
      min-inline-size: 0;
      flex: 1 1 12rem;
    }
    .hr-cycle-workspace-title h4 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; text-wrap: balance; }
    .hr-cycle-workspace-title p { margin: 0; color: var(--text-secondary); font-size: 0.8rem; }
    .hr-cycle-workspace-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      gap: 0.4rem 0.65rem;
    }
    .hr-cycle-inline-field {
      display: flex;
      flex-direction: column;
      gap: 0.12rem;
      min-inline-size: 0;
    }
    .hr-cycle-inline-field .form-label {
      margin: 0;
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--text-muted);
    }
    .hr-cycle-inline-field .form-input {
      width: auto;
      min-width: 7.5rem;
      max-width: 13rem;
      padding: 0.28rem 0.5rem;
      font-size: 0.8rem;
    }
    .hr-cycle-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; margin-bottom: 0.35rem; }
    .hr-cycle-kpi { border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); padding: 0.65rem 0.75rem; min-inline-size: 0; }
    .hr-cycle-kpi-label { font-size: 0.72rem; color: var(--text-muted); }
    .hr-cycle-kpi-value { display: block; margin-top: 0.15rem; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
    .hr-cycle-kpi-sub { display: block; margin-top: 0.15rem; font-size: 0.7rem; color: var(--text-muted); }
    .hr-goal-prog-bar {
      height: 0.45rem;
      border-radius: 999px;
      background: var(--border-color);
      overflow: hidden;
      margin: 0.45rem 0 0.2rem;
    }
    .hr-goal-prog-bar > span {
      display: block;
      height: 100%;
      background: var(--accent-primary, #3b82f6);
      border-radius: inherit;
    }
    .hr-appr-goals-panel { margin-bottom: 0.85rem; }
    .hr-appr-goals-panel h6 {
      margin: 0 0 0.4rem;
      font-size: 0.8rem;
      font-weight: 650;
      color: var(--text-primary);
    }
    .hr-appr-goals-group { margin-bottom: 0.75rem; }
    .hr-appr-goals-group-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.35rem 0.5rem;
      margin-bottom: 0.4rem;
    }
    .hr-appr-goals-group-head p {
      margin: 0;
      font-size: 0.72rem;
      color: var(--text-muted);
    }
    .hr-appr-goal-badge {
      display: inline-block;
      font-size: 0.68rem;
      font-weight: 650;
      padding: 0.1rem 0.4rem;
      border-radius: 4px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      margin-left: 0.35rem;
      vertical-align: middle;
    }
    .hr-appr-card-goals-hint {
      display: block;
      margin-top: 0.15rem;
      font-size: 0.72rem;
      color: var(--text-secondary);
    }
    .hr-cycle-section { border-top: 1px solid var(--border-color); padding-top: 0.9rem; margin-top: 0.9rem; min-inline-size: 0; }
    .hr-cycle-section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }
    .hr-cycle-section-heading h5 { margin: 0; font-size: 0.95rem; }
    .hr-cycle-section-heading-copy { min-inline-size: 0; flex: 1 1 14rem; }
    .hr-cycle-section-heading-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
    .hr-cycle-table-wrap, #hr-appraisal-detail-goal-defs-wrap, #hr-appraisal-detail-checkins-wrap {
      max-inline-size: 100%;
      min-inline-size: 0;
    }
    .hr-checkin-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0.75rem;
      align-items: end;
      margin: 0 0 0.65rem;
    }
    .hr-checkin-toolbar .form-group { margin: 0; min-inline-size: 10rem; flex: 1 1 12rem; }
    .hr-checkin-toolbar .form-group:last-child { flex: 0 1 11rem; }
    .invite-crew-csv-disclosure { margin: 0 0 1rem; }
    .invite-crew-csv-disclosure > summary.visually-hidden {
      position: absolute;
    }
    #invite-crew-modal .invite-crew-header-start {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem 0.75rem;
      flex: 1;
      min-width: 0;
    }
    #invite-crew-modal .modal-title { margin: 0; }
    #invite-crew-csv-toggle[aria-expanded="true"] {
      border-color: var(--accent-primary, #0ea5e9);
    }
    .invite-crew-csv-panel {
      padding: 0.85rem 1rem 1rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-secondary, #f8fafc);
    }
    .hr-appr-list { display: grid; gap: 0.65rem; }
    .hr-appr-pager {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 0.75rem;
      margin-top: 0.65rem;
      font-size: 0.8rem;
      color: var(--text-secondary);
    }
    .hr-appr-pager-actions { display: flex; gap: 0.35rem; align-items: center; }
    .hr-checkin-dir-wrap {
      overflow: auto;
      max-block-size: min(28rem, 70vh);
      border: 1px solid var(--border-color);
      border-radius: 8px;
    }
    .hr-checkin-dir-wrap .crew-table { margin: 0; }
    .hr-checkin-dir-wrap tbody tr {
      content-visibility: auto;
      contain-intrinsic-size: auto 2.85rem;
    }
    .hr-checkin-note-preview {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color: var(--text-secondary);
      font-size: 0.8rem;
      max-inline-size: 22rem;
    }
    .hr-checkin-person-list { display: grid; gap: 0.5rem; }
    .hr-checkin-person-item {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0.75rem;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0.65rem 0.75rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-card);
    }
    .hr-checkin-person-item-copy { min-inline-size: 0; flex: 1 1 14rem; }
    .hr-checkin-person-item-notes {
      margin: 0.25rem 0 0;
      font-size: 0.85rem;
      color: var(--text-secondary);
      white-space: pre-wrap;
    }
    .hr-appr-pager {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 0.75rem;
      margin-top: 0.65rem;
      font-size: 0.8rem;
      color: var(--text-secondary);
    }
    .hr-appr-pager-actions { display: flex; gap: 0.35rem; align-items: center; }
    .hr-appr-card, .hr-stack-card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
      overflow: clip;
      min-inline-size: 0;
    }
    .hr-stack-card { padding: 0.8rem 0.9rem; }
    .hr-appr-open {
      appearance: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 0.75rem;
      width: 100%;
      min-block-size: 2.75rem;
      padding: 0.8rem 0.9rem;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }
    .hr-appr-open:hover { background: var(--bg-secondary); }
    .hr-appr-open:focus-visible {
      outline: 2px solid var(--accent-primary, #3b82f6);
      outline-offset: -2px;
    }
    .hr-appr-card-copy { min-inline-size: 0; flex: 1 1 10rem; }
    .hr-appr-card-copy strong { display: block; font-size: 0.92rem; overflow-wrap: anywhere; }
    .hr-stack-card-head strong { font-size: 0.92rem; overflow-wrap: anywhere; }
    .hr-appr-card-meta { display: block; margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.75rem; overflow-wrap: anywhere; }
    .hr-appr-card:has(.hr-appr-open[aria-expanded="true"]) {
      border-color: var(--accent-primary, #3b82f6);
    }
    .hr-appr-open-label {
      flex: 0 0 auto;
      font-size: 0.78rem;
      font-weight: 650;
      color: var(--accent-primary, #3b82f6);
      white-space: nowrap;
    }
    .hr-appr-card-controls {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem;
      padding: 0.75rem 0.9rem 0;
    }
    .hr-appr-card-controls .form-group { margin: 0; min-inline-size: 0; }
    .hr-appr-card-controls .btn { justify-self: start; }
    .hr-appr-card-body { padding: 0 0.9rem 0.9rem; }
    .hr-appr-card-body[hidden] { display: none !important; }
    .hr-appr-detail-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding-top: 0.75rem; }
    .hr-appr-rollup { border: 1px solid var(--border-color); border-radius: 8px; padding: 0.65rem; background: var(--bg-secondary); min-inline-size: 0; overflow-wrap: anywhere; }
    .hr-dev-plan { margin-top: 0.65rem; min-inline-size: 0; }
    .hr-dev-plan-heading { font-size: 0.8rem; font-weight: 650; margin: 0 0 0.35rem; color: var(--text-primary); }
    .hr-dev-plan-hint { font-size: 0.72rem; color: var(--text-muted); margin: 0 0 0.5rem; }
    .hr-dev-plan-items { display: grid; gap: 0.35rem; margin: 0.5rem 0 0.75rem; }
    .hr-dev-plan-item {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.5rem;
      padding: 0.45rem 0.55rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary);
      font-size: 0.78rem;
    }
    .hr-dev-plan-item-copy { min-inline-size: 0; flex: 1 1 10rem; overflow-wrap: anywhere; }
    .hr-dev-plan-item-meta { color: var(--text-muted); font-size: 0.7rem; margin-top: 0.15rem; }
    .hr-dev-plan-status { font-size: 0.7rem; font-weight: 650; }
    .hr-dev-plan-status.is-open { color: var(--warning, #d97706); }
    .hr-dev-plan-status.is-completed { color: var(--success, #16a34a); }
    .hr-appraisal-pair-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
      gap: 0.65rem 0.85rem;
      margin-top: 0.5rem;
      align-items: start;
    }
    .hr-appraisal-pair-row .form-group { margin: 0; min-inline-size: 0; }
    .hr-appraisal-pair-row .form-input { max-width: none; width: 100%; }
    .hr-dev-plan-picker {
      margin-top: 0.5rem; padding: 0.55rem; border: 1px dashed var(--border-color); border-radius: 8px;
    }
    .hr-dev-plan-picker summary { cursor: pointer; font-size: 0.78rem; font-weight: 600; }
    .hr-dev-plan-picker-body { margin-top: 0.45rem; max-height: 14rem; overflow: auto; font-size: 0.75rem; }
    .hr-dev-plan-picker-body > label { display: flex; gap: 0.35rem; align-items: flex-start; margin-bottom: 0.3rem; cursor: pointer; }
    .hr-dev-plan-picker-row { margin-bottom: 0.55rem; }
    .hr-dev-plan-picker-row > label { display: flex; gap: 0.35rem; align-items: flex-start; cursor: pointer; }
    .hr-dev-plan-picker-due {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-block-start: 0.3rem;
      margin-inline-start: 1.45rem;
      font-size: 0.72rem;
      color: var(--text-secondary);
    }
    .hr-dev-plan-picker-due[hidden] { display: none !important; }
    .hr-dev-plan-picker-due .form-input { width: auto; padding: 0.2rem 0.4rem; font-size: 0.75rem; }
    .hr-dev-plan-custom { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; align-items: end; }
    .hr-dev-plan-custom .form-group { margin: 0; flex: 1 1 12rem; min-inline-size: 0; }
    .hr-stack-card-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.65rem;
    }
    .hr-stack-fields { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
    .hr-stack-fields .form-group { margin: 0; min-inline-size: 0; }
    .hr-stack-span-2 { grid-column: 1 / -1; }
    .hr-stack-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }
    .hr-stack-meta { margin: 0; color: var(--text-muted); font-size: 0.78rem; overflow-wrap: anywhere; }
    #hr-appraisal-add-crew-modal .modal { width: min(94vw, 720px); max-height: min(90vh, 820px); display: flex; flex-direction: column; overflow: hidden; }
    #hr-appraisal-add-crew-modal .modal-body { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
    .hr-bulk-crew-toolbar { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: 0.65rem; }
    .hr-bulk-crew-toolbar .form-group { margin: 0; min-inline-size: 0; }
    .hr-bulk-crew-results { overflow: auto; min-height: 10rem; max-height: min(50vh, 28rem); border: 1px solid var(--border-color); border-radius: 8px; }
    .hr-bulk-crew-result-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.55rem; align-items: start; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border-color); font-size: 0.8rem; cursor: pointer; }
    .hr-bulk-crew-result-row:not(:last-child) { border-bottom: 1px solid var(--border-color); }
    .hr-bulk-crew-result-row.is-assigned { opacity: 0.55; cursor: default; }
    .hr-bulk-crew-result-head { display: none; }
    .hr-bulk-crew-person strong { display: block; color: var(--text-primary); overflow-wrap: anywhere; }
    .hr-bulk-crew-person span, .hr-bulk-crew-cell-muted { color: var(--text-muted); font-size: 0.72rem; }
    .hr-bulk-crew-empty { padding: 1.5rem 0.75rem; text-align: center; color: var(--text-muted); }
    .hr-bulk-crew-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.65rem; font-size: 0.78rem; color: var(--text-secondary); }
    @container hr-cycle (min-width: 640px) {
      .hr-appr-card-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 10rem) auto auto; align-items: end; }
      .hr-stack-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @container hr-cycle (min-width: 720px) {
      .hr-appr-detail-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
      .hr-bulk-crew-toolbar { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
      .hr-cycle-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 700px) {
      .hr-cycle-kpis { grid-template-columns: 1fr; }
    }

    #hr-day-type-edit-modal .modal {
      max-width: 560px;
      width: 92%;
      box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4);
    }
    #hr-day-type-edit-modal .modal-header {
      padding: 1.1rem 1.25rem;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-card);
    }
    #hr-day-type-edit-modal .modal-title { color: var(--text-primary); font-size: 1.05rem; }
    #hr-day-type-edit-modal .modal-body {
      padding: 1.1rem 1.25rem 1.25rem;
      background: var(--bg-card);
      color: var(--text-primary);
    }
    #hr-day-type-edit-modal .modal-footer {
      padding: 0.9rem 1.25rem;
      border-top: 1px solid var(--border-color);
      background: var(--bg-secondary);
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .hr-dte-chip-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem 0.65rem;
      padding: 0.85rem 0.95rem;
      border-radius: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
    }
    .hr-dte-chip-grid label {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8125rem;
      color: var(--text-primary);
      cursor: pointer;
      margin: 0;
      padding: 0.35rem 0.5rem;
      border-radius: 8px;
      transition: background 0.15s ease;
    }
    .hr-dte-chip-grid label:hover {
      background: color-mix(in srgb, var(--accent-primary, #3b82f6) 10%, transparent);
    }
    .hr-dte-section-h {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
      margin: 1rem 0 0.5rem 0;
    }
    .hr-dte-section-h:first-child { margin-top: 0; }
    .hr-dte-tabs {
      display: flex;
      gap: 0.15rem;
      margin: 0 0 0.85rem 0;
      border-bottom: 1px solid var(--border-color);
    }
    .hr-dte-tab {
      appearance: none;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      padding: 0.4rem 0.75rem;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
    }
    .hr-dte-tab:hover { color: var(--text-primary); }
    .hr-dte-tab.active {
      color: var(--text-primary);
      border-bottom-color: var(--accent-primary, #2563eb);
    }

    /* Unified Help modal: fixed viewport size so it doesn’t resize when switching tabs */
    .help-modal-inner {
      width: 92vw;
      max-width: 1200px;
      height: 88vh;
      max-height: 88vh;
      min-height: 400px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .help-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border-color);
      padding-right: 0.5rem;
    }
    .help-modal-brand {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
    }
    .help-modal-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .help-modal-subtitle {
      font-size: 0.8rem;
      color: var(--text-muted);
      font-weight: 500;
    }
    .help-modal-layout {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .help-modal-nav {
      flex: 0 0 180px;
      background: var(--bg-secondary);
      border-right: 1px solid var(--border-color);
      padding: 1rem 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .help-nav-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.6rem 0.75rem;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--text-secondary);
      font-size: 0.9rem;
      cursor: pointer;
      text-align: left;
      transition: background 0.2s, color 0.2s;
    }
    .help-nav-item:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
    }
    .help-nav-item.active {
      background: var(--accent-primary);
      color: var(--button-text, #fff);
    }
    .help-nav-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .help-modal-nav-footer {
      margin-top: auto;
      padding-top: 1rem;
      border-top: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .help-nav-action {
      padding: 0.5rem 0.75rem;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--accent-primary);
      font-size: 0.85rem;
      cursor: pointer;
      text-align: left;
      transition: background 0.2s;
    }
    .help-nav-action:hover {
      background: var(--bg-card-hover);
    }
    .help-modal-content {
      flex: 1;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      padding: 1rem 1.25rem;
      display: flex;
      flex-direction: column;
    }
    .help-pane {
      display: none;
      flex-direction: column;
    }
    .help-pane.active {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }
    #help-pane-manual.active,
    #help-pane-guides.active {
      overflow: hidden;
    }
    /* Help guides reuse the User manual layout + prose styles */
    .help-guide-content.help-manual-content {
      /* inherits .help-manual-content */
    }
    .help-guide-lede {
      font-size: 1rem;
      color: var(--text-secondary);
      margin: 0 0 1.25rem;
      line-height: 1.55;
    }
    .help-guide-section {
      margin: 1rem 0 1.25rem;
      padding: 0.85rem 1rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-secondary);
    }
    .help-guide-section > h2 {
      margin: 0 0 0.65rem !important;
      padding: 0 !important;
      border: none !important;
      font-size: 0.78rem !important;
      font-weight: 700 !important;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted) !important;
    }
    .help-guide-section--steps {
      background: var(--bg-card, var(--bg-primary));
      border-color: var(--border-color);
    }
    .help-guide-section--steps > h2 {
      color: var(--accent-primary, #3b82f6) !important;
    }
    .help-guide-section--recover {
      background: color-mix(in srgb, var(--warning, #f59e0b) 8%, var(--bg-secondary));
      border-color: color-mix(in srgb, var(--warning, #f59e0b) 35%, var(--border-color));
    }
    .help-guide-section ol,
    .help-guide-section ul {
      margin: 0.35rem 0 0 !important;
    }
    .help-guide-section li {
      margin: 0.35rem 0 !important;
      line-height: 1.45;
    }
    .help-guide-section ol {
      padding-left: 1.35rem !important;
      counter-reset: help-step;
      list-style: none;
    }
    .help-guide-section ol > li {
      position: relative;
      padding-left: 0.35rem;
      counter-increment: help-step;
    }
    .help-guide-section ol > li::marker {
      content: none;
    }
    .help-guide-section--steps ol {
      padding-left: 0 !important;
    }
    .help-guide-section--steps ol > li {
      display: flex;
      gap: 0.65rem;
      align-items: flex-start;
      padding: 0.55rem 0;
      border-bottom: 1px solid var(--border-color);
      padding-left: 0;
    }
    .help-guide-section--steps ol > li:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .help-guide-section--steps ol > li::before {
      content: counter(help-step);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 999px;
      background: var(--accent-primary-soft, rgba(59, 130, 246, 0.14));
      color: var(--accent-primary, #3b82f6);
      font-size: 0.8rem;
      font-weight: 700;
      line-height: 1;
      flex-shrink: 0;
      margin-top: 0.05rem;
    }
    .help-guide-step-body {
      flex: 1;
      min-width: 0;
    }
    .help-guide-step-body > ul {
      margin: 0.4rem 0 0 !important;
    }
    .help-guide-section h3 {
      margin: 0.85rem 0 0.35rem !important;
      font-size: 0.92rem !important;
      color: var(--text-primary) !important;
      text-transform: none;
      letter-spacing: 0;
    }
    .help-guide-section h3:first-of-type {
      margin-top: 0.35rem !important;
    }
    .help-guide-manual-link {
      margin-top: 1.25rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border-color);
    }
    .help-manual-search-wrap {
      flex-shrink: 0;
    }
    .help-manual-layout {
      display: flex;
      gap: 0;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      border: 1px solid var(--border-color);
      border-radius: 8px;
    }
    .help-manual-tree {
      flex: 0 0 230px;
      overflow-y: auto;
      font-size: 0.85rem;
      border-right: 1px solid var(--border-color);
      background: var(--bg-secondary);
      border-radius: 8px 0 0 8px;
      padding: 0.5rem 0;
    }
    .help-manual-tree-group {
      margin-bottom: 0.1rem;
    }
    .help-manual-tree-folder {
      display: block;
      width: 100%;
      text-align: left;
      padding: 0.5rem 0.75rem 0.25rem;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-weight: 700;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      cursor: default;
      margin-top: 0.5rem;
    }
    .help-manual-tree-folder:first-child { margin-top: 0; }
    .help-manual-tree-item {
      display: block;
      width: 100%;
      text-align: left;
      padding: 0.35rem 0.75rem 0.35rem 1.25rem;
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.85rem;
      line-height: 1.35;
      transition: background 0.1s, color 0.1s;
    }
    .help-manual-tree-item:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
    }
    .help-manual-tree-item.active {
      background: var(--accent-primary-soft, rgba(59,130,246,0.12));
      color: var(--accent-primary, #3b82f6);
      font-weight: 500;
      border-right: 2px solid var(--accent-primary, #3b82f6);
    }
    .help-manual-detail-wrap {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      overflow-y: auto;
    }
    .help-manual-content {
      flex: 1;
      min-width: 0;
      color: var(--text-primary);
      line-height: 1.7;
      font-size: 0.93rem;
      padding: 1rem 1.25rem;
    }
    /* Headings */
    .help-manual-content h1 {
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.25;
      color: var(--text-primary);
      margin: 0 0 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border-color);
    }
    .help-manual-content h2 {
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.3;
      color: var(--text-primary);
      margin: 1.5rem 0 0.4rem;
    }
    .help-manual-content h3 {
      font-size: 0.93rem;
      font-weight: 600;
      line-height: 1.3;
      color: var(--text-secondary);
      margin: 1rem 0 0.3rem;
    }
    /* Links — use the app's accent colour, which adapts to dark/light mode */
    .help-manual-content a {
      color: var(--accent-primary);
      text-decoration: none;
    }
    .help-manual-content a:hover {
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    /* Links inside headings look like normal heading text — just clickable */
    .help-manual-content h1 a,
    .help-manual-content h2 a,
    .help-manual-content h3 a,
    .help-manual-content h4 a {
      color: inherit;
      text-decoration: none;
      font-weight: inherit;
    }
    .help-manual-content h1 a:hover,
    .help-manual-content h2 a:hover,
    .help-manual-content h3 a:hover,
    .help-manual-content h4 a:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    /* Prose */
    .help-manual-content p,
    .help-manual-content ul,
    .help-manual-content ol {
      margin: 0.5rem 0;
    }
    .help-manual-content ul,
    .help-manual-content ol {
      padding-left: 1.5rem;
    }
    .help-manual-content li { margin: 0.2rem 0; }
    /* Blockquotes — tips, warnings */
    .help-manual-content blockquote {
      border-left: 3px solid var(--accent-primary);
      margin: 0.75rem 0;
      padding: 0.5rem 0.75rem;
      background: var(--bg-secondary);
      border-radius: 0 6px 6px 0;
      color: var(--text-secondary);
      font-style: normal;
    }
    .help-manual-content blockquote p { margin: 0; }
    /* Horizontal rules */
    .help-manual-content hr {
      border: none;
      border-top: 1px solid var(--border-color);
      margin: 1.25rem 0;
    }
    /* Tables */
    .help-manual-content table {
      width: 100%;
      border-collapse: collapse;
      margin: 0.75rem 0;
      font-size: 0.88rem;
    }
    .help-manual-content th {
      background: var(--bg-secondary);
      font-weight: 600;
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      padding: 0.4rem 0.6rem;
      text-align: left;
    }
    .help-manual-content td {
      border: 1px solid var(--border-color);
      padding: 0.4rem 0.6rem;
      text-align: left;
    }
    /* Code — inline */
    .help-manual-content code {
      font-family: ui-monospace, 'Cascadia Code', monospace;
      font-size: 0.82em;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      padding: 0.1rem 0.3rem;
      border-radius: 4px;
    }
    /* Code — fenced blocks */
    .help-manual-content pre {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 0.75rem 1rem;
      overflow-x: auto;
      margin: 0.75rem 0;
    }
    .help-manual-content pre code {
      background: none;
      border: none;
      padding: 0;
      font-size: 0.82rem;
    }
    .help-manual-breadcrumbs {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-bottom: 1rem;
      padding-bottom: 0.6rem;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.2rem;
    }
    .help-manual-breadcrumbs button {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0;
      font-size: inherit;
      transition: color 0.15s;
    }
    .help-manual-breadcrumbs button:hover {
      color: var(--accent-primary);
    }
    .help-faq-item {
      border-bottom: 1px solid var(--border-color);
      padding: 0.75rem 0;
    }
    .help-faq-item:last-child {
      border-bottom: none;
    }
    .help-faq-question {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 0.95rem;
      margin-bottom: 0.35rem;
    }
    .help-faq-answer {
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.5;
    }
    .help-guides-list button,
    .tutorials-list-item {
      display: block;
      width: 100%;
      text-align: left;
      padding: 0.6rem 0.75rem;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--text-primary);
      cursor: pointer;
      font-size: 0.9rem;
      margin-bottom: 2px;
    }
    .help-guides-list button:hover,
    .tutorials-list-item:hover {
      background: var(--bg-card-hover);
    }
    .help-guides-list button.active {
      background: var(--accent-primary);
      color: var(--button-text, #fff);
    }

    /* Edit profile modal: desktop-friendly two-column layout */
    #edit-profile-modal .modal { max-width: 920px; max-height: 90vh; display: flex; flex-direction: column; }
    #edit-profile-modal .modal-body { overflow-y: auto; flex: 1; padding: 1rem 1.5rem; }
    .edit-profile-section { margin-bottom: 1.5rem; }
    .edit-profile-section-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.75rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border-color); }

    /* Ship Docs page sections */
    .ship-docs-section-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 1.5rem 0 0.35rem 0;
      padding-bottom: 0.4rem;
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.055em;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border-color);
    }
    .ship-docs-section-title:first-of-type { margin-top: 0; }
    .ship-docs-section-intro {
      margin: 0 0 0.85rem 0;
      font-size: 0.875rem;
      color: var(--text-secondary);
    }
    .ship-docs-card-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    @media (max-width: 720px) {
      .ship-docs-card-grid { grid-template-columns: 1fr; }
    }
    .ship-docs-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
    }
    .ship-docs-card-actions .btn {
      flex: 1 1 auto;
      min-width: 8.5rem;
    }

    .edit-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.25rem; }
    .edit-profile-grid .form-group { margin-bottom: 0; }
    .edit-profile-full { grid-column: 1 / -1; }
    .edit-profile-docs-row { display: flex; gap: 1rem; flex-wrap: wrap; }
    .edit-profile-doc-box { flex: 1; min-width: 200px; padding: 1rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); }
    .edit-profile-doc-box label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; }
    .edit-profile-doc-box .form-text { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem; }
    .edit-profile-doc-uploaded { color: var(--success); font-size: 0.875rem; margin-top: 0.5rem; }

    .edit-profile-travel-wrap { position: relative; }
    .edit-profile-travel-wrap .form-input { width: 100%; }
    .edit-profile-travel-dropdown { position: absolute; left: 0; right: 0; top: 100%; z-index: 100; margin-top: 2px; max-height: 220px; overflow-y: auto; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); list-style: none; padding: 0; margin-bottom: 0; }
    .edit-profile-travel-dropdown li { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.875rem; border-bottom: 1px solid var(--border-color); }
    .edit-profile-travel-dropdown li:last-child { border-bottom: none; }
    .edit-profile-travel-dropdown li:hover { background: var(--bg-secondary); }
    .edit-profile-travel-dropdown li .code { color: var(--text-muted); font-size: 0.8em; margin-left: 0.35rem; }

    /* Crew profile modal */
    #hr-log-conduct-incident-modal.modal-overlay.active { z-index: 1100; }

    #crew-profile-modal .modal { max-width: 920px; max-height: 92vh; display: flex; flex-direction: column; }
    #crew-profile-modal .modal-body { overflow-y: auto; flex: 1; padding: 1rem 1.25rem 1.25rem; }
    .crew-profile-header { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: flex-start; }
    .crew-profile-header-main { flex: 1; min-width: 200px; }
    .crew-profile-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1.25rem; }
    .crew-profile-stat-row.crew-profile-leave-row { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); margin-bottom: 0.35rem; }
    .crew-profile-stat { padding: 0.65rem 0.5rem; border-radius: 8px; text-align: center; }
    .crew-profile-stat-val { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
    .crew-profile-stat-lbl { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
    .crew-profile-leave-hint { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.15rem; line-height: 1.25; }
    .crew-profile-section { margin-bottom: 1.25rem; }
    .crew-profile-certs-scroll { max-height: min(42vh, 360px); overflow-y: auto; padding-right: 0.25rem; }
    .crew-profile-section-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.65rem; }
    .crew-profile-section-head h3 { font-size: 0.95rem; margin: 0; font-weight: 600; }
    .crew-profile-section-note { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 0.65rem 0; }
    .crew-profile-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0; flex-wrap: wrap; }
    .crew-profile-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.5rem 0.85rem; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; margin-bottom: -1px; border-radius: 6px 6px 0 0; }
    .crew-profile-tab-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
    .crew-profile-tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
    .crew-profile-tab-panel { display: none; }
    .crew-profile-tab-panel.active { display: block; }
    .crew-profile-card { background: var(--bg-secondary); padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
    .crew-profile-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem 1rem; }
    .crew-profile-field-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.2rem; letter-spacing: 0.03em; }
    .crew-profile-field-value { font-size: 0.9rem; word-break: break-word; }
    .crew-profile-collapse { border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); margin-top: 1.25rem; }
    .crew-profile-collapse > summary { padding: 0.75rem 1rem; cursor: pointer; font-weight: 600; font-size: 0.9rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
    .crew-profile-collapse > summary::-webkit-details-marker { display: none; }
    .crew-profile-collapse > summary::after { content: '▸'; color: var(--text-muted); font-size: 0.85rem; transition: transform 0.15s; }
    .crew-profile-collapse[open] > summary::after { transform: rotate(90deg); }
    .crew-profile-collapse-body { padding: 0 1rem 1rem; border-top: 1px solid var(--border-color); }
    /* Pending Approvals on Crew Members — collapsed by default */
    #pending-approvals-section.pending-approvals-collapse > summary.card-header {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      user-select: none;
    }
    #pending-approvals-section.pending-approvals-collapse > summary.card-header::-webkit-details-marker { display: none; }
    #pending-approvals-section.pending-approvals-collapse > summary.card-header::after {
      content: '▸';
      color: var(--text-muted);
      font-size: 0.9rem;
      flex-shrink: 0;
      transition: transform 0.15s ease;
    }
    #pending-approvals-section.pending-approvals-collapse[open] > summary.card-header::after {
      transform: rotate(90deg);
    }
    #pending-approvals-section.pending-approvals-collapse > summary .card-title {
      margin: 0;
      flex: 1;
      min-width: 0;
    }
    .crew-profile-history-block { padding-top: 1rem; }
    .crew-profile-history-block + .crew-profile-history-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
    .crew-profile-history-block h4 { font-size: 0.85rem; margin: 0 0 0.35rem 0; font-weight: 600; }
    .crew-profile-cert-item {
      background: var(--bg-primary);
      padding: 0.4rem 0.65rem;
      border-radius: 8px;
      border-left: 3px solid var(--success);
      margin-bottom: 0.35rem;
      display: flex;
      align-items: center;
      gap: 0.5rem 0.65rem;
      flex-wrap: wrap;
    }
    .crew-profile-cert-item--clickable {
      cursor: pointer;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .crew-profile-cert-item--clickable:hover {
      background: var(--bg-card);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }
    .crew-profile-cert-item-main { flex: 1; min-width: 140px; }
    .crew-profile-cert-item-name { font-weight: 500; font-size: 0.875rem; line-height: 1.25; margin: 0; }
    .crew-profile-cert-item-meta { font-size: 0.7rem; color: var(--text-muted); margin: 0.1rem 0 0 0; line-height: 1.3; }
    .crew-profile-cert-item-status { text-align: right; flex-shrink: 0; }
    .crew-profile-cert-item-actions { flex-shrink: 0; }
    .mca-cert-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      font-size: 0.65rem;
      font-weight: 600;
      padding: 0.12rem 0.4rem;
      border-radius: 999px;
      line-height: 1.2;
      margin-top: 0.2rem;
    }
    .mca-cert-badge--ok { background: var(--success-bg); color: var(--success); }
    .mca-cert-badge--warn { background: var(--warning-bg); color: var(--warning); }
    .mca-cert-badge--danger { background: var(--danger-bg); color: var(--danger); }
    .mca-cert-badge--muted { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border-color); }
    .crew-profile-contract-item { background: var(--bg-primary); padding: 0.85rem 1rem; border-radius: 8px; border-left: 3px solid var(--accent-primary); margin-bottom: 0.5rem; }

    /* My certificates modal */
    #my-certificates-modal .modal { max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; }
    #my-certificates-modal .modal-body { overflow-y: auto; flex: 1; padding: 1rem 1.5rem; }
    .my-certificates-error { display: none; padding: 0.75rem 1rem; border-radius: 8px; background: var(--danger-bg); color: var(--danger); margin-bottom: 1rem; font-size: 0.875rem; }
    .my-certificates-add-section { border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; margin-bottom: 1.25rem; background: var(--bg-secondary); }
    .my-certificates-add-section h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 0.75rem 0; }
    .my-certificates-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
    .my-certificates-add-grid .form-group { margin-bottom: 0; }
    .my-certificates-add-full { grid-column: 1 / -1; }
    @media (max-width: 520px) {
      .my-certificates-add-grid { grid-template-columns: 1fr; }
    }
    .my-certificates-type-select {
      width: 100%;
      max-height: 220px;
      padding: 0.35rem 0.5rem;
      font-size: 0.875rem;
    }
    #my-certificates-type-filter { margin-bottom: 0.5rem; }
    .my-certificates-list-wrap h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 0.75rem 0; }
    .my-cert-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 0.5rem; background: var(--bg-card); }
    .my-cert-row-info { flex: 1; min-width: 0; }
    .my-cert-row-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
    .my-cert-row-meta { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; }
    .my-cert-row-actions { display: flex; gap: 0.35rem; flex-shrink: 0; flex-wrap: wrap; }
    #my-certificates-empty { display: none; text-align: center; color: var(--text-muted); padding: 1rem; font-size: 0.875rem; }

    /* Permission help tooltip */
    .perm-help {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      margin-left: 0.35rem;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      font-size: 0.7rem;
      font-weight: 600;
      cursor: pointer;
      background: var(--bg-primary);
    }

    .perm-help-tooltip {
      position: absolute;
      left: 0;
      top: 120%;
      min-width: 240px;
      max-width: 360px;
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-primary);
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      font-size: 0.75rem;
      line-height: 1.4;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
      z-index: 2000;
      pointer-events: none;
    }

    /* Rank permissions modal: unselected = dark blue, selected = light accent blue */
    .permission-btn {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
      border: 1px solid var(--border-color);
    }
    .permission-btn.active {
      background: var(--accent-primary) !important;
      color: white !important;
      border-color: var(--accent-primary);
    }

    .perm-help:hover .perm-help-tooltip,
    .perm-help.open .perm-help-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* In-place CSS tooltips are clipped by .card overflow. JS copies them into #wt-overlay-tooltip (popover top layer). */
    html.wt-overlay-tooltips .perm-help-tooltip {
      position: fixed !important;
      left: -9999px !important;
      top: 0 !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transform: none !important;
    }

    #wt-overlay-tooltip {
      box-sizing: border-box;
      inset: unset;
      margin: 0;
      min-width: 240px;
      max-width: min(22.5rem, calc(100vw - 1.25rem));
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-primary);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
      font-size: 0.75rem;
      line-height: 1.45;
      z-index: 2147483646;
      overflow: visible;
    }

    #wt-overlay-tooltip:not(:popover-open):not(.is-open) {
      display: none;
    }

    #wt-overlay-tooltip:popover-open,
    #wt-overlay-tooltip.is-open {
      display: block;
    }

    /* Procurement Modals - Fixed Overlay Style (override base .modal card sizing/scale) */
    #category-modal,
    #subcategory-modal,
    #cost-entity-modal,
    #category-approver-modal,
    #address-modal,
    #vendor-modal,
    #vendor-contract-modal,
    #catering-edit-categories-modal,
    #catering-add-frequent-supplier-modal,
    #catering-add-supplier-to-port-modal,
    #catering-edit-supplier-at-port-modal {
      position: fixed;
      inset: 0;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      background: var(--modal-backdrop);
      border: none;
      border-radius: 0;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      max-width: none;
      max-height: none;
      margin: 0;
      padding: 0;
      overflow: visible;
      transform: none;
      box-sizing: border-box;
    }
    #catering-edit-categories-modal:not(.active),
    #catering-add-frequent-supplier-modal:not(.active),
    #catering-add-supplier-to-port-modal:not(.active),
    #catering-edit-supplier-at-port-modal:not(.active) {
      display: none !important;
    }

    #catering-edit-categories-modal .modal-content,
    #catering-add-frequent-supplier-modal .modal-content,
    #catering-add-supplier-to-port-modal .modal-content,
    #catering-edit-supplier-at-port-modal .modal-content {
      position: relative;
      max-width: 560px;
      width: 90vw;
      max-height: 90vh;
      overflow-y: auto;
      z-index: 1002;
      background: var(--bg-card);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }
    #catering-add-frequent-supplier-modal .modal-content { max-width: 420px; }
    #catering-add-supplier-to-port-modal .modal-content,
    #catering-edit-supplier-at-port-modal .modal-content { max-width: 480px; }
    #catering-add-frequent-supplier-modal .modal-title,
    #catering-add-supplier-to-port-modal .modal-title,
    #catering-edit-supplier-at-port-modal .modal-title {
      color: var(--text-primary);
    }
    #catering-add-frequent-supplier-modal .modal-body,
    #catering-add-supplier-to-port-modal .modal-body,
    #catering-edit-supplier-at-port-modal .modal-body {
      color: var(--text-primary);
    }
    #catering-add-frequent-supplier-modal .form-label,
    #catering-add-supplier-to-port-modal .form-label,
    #catering-edit-supplier-at-port-modal .form-label {
      color: var(--text-primary);
    }
    #catering-add-frequent-supplier-modal .modal-body .text-muted,
    #catering-add-supplier-to-port-modal .modal-body .text-muted,
    #catering-edit-supplier-at-port-modal .modal-body .text-muted {
      color: var(--text-secondary);
    }
    #catering-add-frequent-supplier-modal .form-input,
    #catering-add-frequent-supplier-modal .form-select,
    #catering-add-supplier-to-port-modal .form-input,
    #catering-add-supplier-to-port-modal .form-select,
    #catering-edit-supplier-at-port-modal .form-input,
    #catering-edit-supplier-at-port-modal .form-select {
      background: var(--bg-secondary);
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    #category-modal .modal-backdrop,
    #subcategory-modal .modal-backdrop,
    #cost-entity-modal .modal-backdrop,
    #category-approver-modal .modal-backdrop,
    #address-modal .modal-backdrop,
    #vendor-modal .modal-backdrop,
    #vendor-contract-modal .modal-backdrop,
    #catering-edit-categories-modal .modal-backdrop,
    #catering-add-frequent-supplier-modal .modal-backdrop,
    #catering-add-supplier-to-port-modal .modal-backdrop,
    #catering-edit-supplier-at-port-modal .modal-backdrop {
      position: absolute;
      inset: 0;
      background: transparent;
    }

    #category-modal .modal-content,
    #subcategory-modal .modal-content,
    #cost-entity-modal .modal-content,
    #category-approver-modal .modal-content,
    #address-modal .modal-content,
    #vendor-contract-modal .modal-content {
      position: relative;
      max-width: 600px;
      width: 90vw;
      max-height: 90vh;
      overflow-y: auto;
      z-index: 1002;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    #vendor-modal .modal-content {
      position: relative;
      max-width: calc(100vw - 4rem);
      width: calc(100vw - 4rem);
      max-height: 90vh;
      overflow-y: auto;
      z-index: 1002;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    /* --bp-2xl (1500px): vendor modal wide layout */
    @media (min-width: 1500px) {
      #vendor-modal .modal-content {
        max-width: 1400px;
        width: 1400px;
      }
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.25rem;
      border-bottom: 1px solid var(--border-color);
    }

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

    .modal-close {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 1.5rem;
      line-height: 1;
    }

    .modal-body {
      padding: 1.25rem;
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 1.25rem 1.25rem;
      border-top: 1px solid var(--border-color);
      box-sizing: border-box;
    }

    .modal-footer .btn,
    .modal-footer button {
      height: 34px;
      min-height: 34px;
      padding: 0 1rem;
      font-size: 0.8125rem;
      font-weight: 600;
      border-radius: 6px;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
    }

    /* PMS Proposal Modal - two-column current vs proposed, scrollable */
    #pms-proposal-modal .modal {
      max-height: 90vh;
      display: flex;
      flex-direction: column;
    }
    #pms-proposal-modal .modal-body {
      overflow-y: auto;
      max-height: calc(90vh - 140px);
      flex: 1;
    }
    #pms-spare-part-modal .modal {
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #pms-spare-part-modal .modal-body {
      overflow-y: auto;
      flex: 1;
      min-height: 0;
    }
    #pms-spare-part-modal .modal-footer {
      flex-shrink: 0;
      padding: 1rem 1.25rem;
      border-top: 1px solid var(--border-color);
    }

    #pms-spare-part-modal .sp-section { margin: 0 0 1.35rem; }
    #pms-spare-part-modal .sp-section > h4 {
      margin: 0 0 0.3rem;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 650;
      color: var(--text-secondary);
    }
    #pms-spare-part-modal .sp-hint {
      margin: 0 0 0.75rem;
      color: var(--text-secondary);
      font-size: 0.875rem;
      line-height: 1.45;
    }
    #pms-spare-part-modal .sp-more { margin-top: 0.5rem; }
    #pms-spare-part-modal .sp-more summary {
      cursor: pointer;
      color: var(--text-secondary);
      font-size: 0.875rem;
    }
    #pms-spare-part-modal .sp-serial-row {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 0.65rem;
      align-items: end;
      padding: 0.75rem 0;
      border-top: 1px solid var(--border-color);
    }
    #pms-spare-part-modal .sp-serial-row .form-label { margin-bottom: 0.25rem; }
    #pms-spare-part-modal .btn { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
    #pms-spare-part-modal .btn:active { transform: scale(0.98); }
    @media (prefers-reduced-motion: reduce) {
      #pms-spare-part-modal .btn { transition: none; }
    }
    @media (max-width: 720px) {
      #pms-spare-part-modal .sp-serial-row { grid-template-columns: 1fr; }
    }
    #pms-job-details-modal .modal {
      overflow: hidden;
    }
    #pms-job-details-modal .modal-body {
      min-height: 0;
    }
    #pms-job-details-modal .modal-footer {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 1rem 1.25rem 1.25rem;
      border-top: 1px solid var(--border-color);
    }
    /* Aligned row-pair grid */
    .pms-proposal-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 1.75rem;
      row-gap: 0;
      align-items: stretch;
    }
    .pms-pf {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      padding: 0.55rem 0;
      border-bottom: 1px solid var(--border-color);
    }
    .pms-pf:nth-last-child(-n+2) { border-bottom: none; }
    .pms-pf-lbl {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin: 0;
    }
    .pms-pf-val {
      flex: 1;
      padding: 0.38rem 0.6rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      font-size: 0.875rem;
      min-height: 2.2rem;
      box-sizing: border-box;
      color: var(--text-primary);
      line-height: 1.4;
    }
    .pms-pf-val.is-pre { white-space: pre-wrap; }
    .pms-proposal-col-hdr {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-secondary);
      padding-bottom: 0.4rem;
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 0.1rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* PMS Execute Job Modal — single column, section cards */
    #pms-execute-modal .modal.pms-exec-shell,
    #pms-execute-modal .modal {
      max-width: 520px;
      width: calc(100% - 1.5rem);
      border-radius: 14px;
      overflow: hidden;
    }
    #pms-execute-modal .pms-exec-body {
      display: flex;
      flex-direction: column;
      gap: 0.875rem;
      padding: 1.1rem 1.2rem 1.25rem;
      max-height: calc(90vh - 4.5rem);
      overflow-y: auto;
    }
    #pms-execute-modal .pms-exec-section {
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 0.95rem 1.05rem;
      background: var(--bg-primary);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    #pms-execute-modal .pms-exec-section-title {
      margin: 0 0 0.75rem 0;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    #pms-execute-modal .pms-exec-field + .pms-exec-field {
      margin-top: 0.85rem;
    }
    #pms-execute-modal .pms-exec-field .form-label {
      margin-bottom: 0.35rem;
    }
    #pms-execute-modal .pms-exec-hint {
      margin: 0.35rem 0 0;
      font-size: 0.8125rem;
      color: var(--text-secondary);
      line-height: 1.45;
    }
    #pms-execute-modal .pms-exec-callout {
      border-radius: 12px;
      padding: 0.8rem 0.95rem;
      border: 1px solid var(--border-color);
      font-size: 0.875rem;
      line-height: 1.45;
    }
    #pms-execute-modal .pms-exec-callout--hours {
      background: var(--bg-secondary);
    }
    #pms-execute-modal .pms-exec-callout--info {
      background: rgba(var(--accent-rgb, 59, 130, 246), 0.07);
    }
    #pms-execute-modal .pms-exec-scroll-list {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 0.2rem 0.45rem;
      background: var(--bg-secondary);
    }
    #pms-execute-modal .pms-exec-footer {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 0.15rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border-color);
    }
    #pms-execute-modal .pms-exec-inline-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }
    @media (max-width: 520px) {
      #pms-execute-modal .pms-exec-inline-row {
        grid-template-columns: 1fr;
      }
    }

    /* Login Form */
    .login-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    }
    /* Auth shells sit outside #app and cover the viewport above sticky/fixed chrome */
    #login-view.login-container,
    #reset-password-view.login-container,
    #company-ip-verification-view.login-container {
      position: fixed;
      inset: 0;
      z-index: 50000;
      box-sizing: border-box;
      overflow-y: auto;
      background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    }

    .login-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 2.5rem;
      width: 100%;
      max-width: 400px;
    }

    .login-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      margin-bottom: 2rem;
    }

    .login-title {
      text-align: center;
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .login-subtitle {
      text-align: center;
      color: var(--text-secondary);
      margin-bottom: 2rem;
      font-size: 0.9375rem;
      line-height: 1.55;
      max-width: 22rem;
      margin-left: auto;
      margin-right: auto;
    }

    .login-card.mfa-flow {
      max-width: 520px;
    }

    .mfa-flow .login-subtitle {
      margin-bottom: 1.25rem;
      text-align: left;
    }

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

    .mfa-method-grid {
      display: grid;
      gap: 0.65rem;
      margin-bottom: 1.25rem;
    }

    .mfa-method-card {
      display: block;
      width: 100%;
      text-align: left;
      padding: 0.85rem 1rem;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-secondary);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
      font-family: inherit;
      color: inherit;
    }

    .mfa-method-card:hover {
      border-color: var(--accent-primary);
      background: var(--bg-card);
    }

    .mfa-method-card.active {
      border-color: var(--accent-primary);
      background: rgba(59, 130, 246, 0.08);
      box-shadow: 0 0 0 1px var(--accent-primary);
    }

    .mfa-method-card-title {
      font-size: 0.95rem;
      font-weight: 600;
      margin: 0 0 0.25rem 0;
      color: var(--text-primary);
    }

    .mfa-method-card-desc {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin: 0;
      line-height: 1.45;
    }

    .mfa-method-card-tag {
      display: inline-block;
      margin-top: 0.4rem;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--accent-primary);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .mfa-panel-box {
      padding: 1rem;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-secondary);
      margin-bottom: 1rem;
    }

    .mfa-settings-modal .modal {
      max-width: 640px;
    }

    .mfa-settings-intro {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.5;
      margin: 0 0 1.25rem 0;
    }

    .mfa-settings-status {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      padding: 0.85rem 1rem;
      border-radius: 10px;
      background: rgba(34, 197, 94, 0.1);
      border: 1px solid rgba(34, 197, 94, 0.35);
      margin-bottom: 1.25rem;
      font-size: 0.875rem;
    }

    .mfa-settings-methods-active {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.35rem;
    }

    .mfa-pill {
      display: inline-block;
      padding: 0.2rem 0.55rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
    }

    .mfa-settings-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }

    .mfa-settings-divider {
      border: none;
      border-top: 1px solid var(--border-color);
      margin: 1.25rem 0;
    }

    .idle-stepup-overlay {
      position: fixed;
      inset: 0;
      z-index: 12000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      background: rgba(10, 15, 26, 0.92);
      backdrop-filter: blur(6px);
    }

    .idle-stepup-overlay.visible {
      display: flex;
    }

    .idle-stepup-card {
      width: 100%;
      max-width: 360px;
      padding: 1.5rem;
      border-radius: 14px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      text-align: center;
    }

    .idle-stepup-card h2 {
      margin: 0 0 0.5rem 0;
      font-size: 1.15rem;
    }

    .idle-stepup-card p {
      margin: 0 0 1rem 0;
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .mfa-mobile-passkey-nudge {
      padding: 0.85rem 1rem;
      border-radius: 10px;
      background: rgba(59, 130, 246, 0.12);
      border: 1px solid rgba(59, 130, 246, 0.35);
      margin-bottom: 1rem;
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .form-group {
      margin-bottom: 1.25rem;
    }

    .form-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 0.5rem;
    }

    .form-input {
      width: 100%;
      padding: 0.75rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 0.875rem;
      transition: border-color 0.2s;
    }

    .form-input:focus {
      outline: none;
      border-color: var(--accent-primary);
    }

    .form-select {
      width: 100%;
      padding: 0.75rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 0.875rem;
      transition: border-color 0.2s;
      font-family: inherit;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      padding-right: 2.5rem;
      box-sizing: border-box;
    }

    .form-select.form-select-sm,
    .form-select[style*="height:32px"],
    .form-select[style*="height: 32px"] {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      padding-left: 0.65rem !important;
      padding-right: 2rem !important;
      line-height: 30px !important;
      height: 32px !important;
      min-height: 32px !important;
      font-size: 0.8125rem !important;
      box-sizing: border-box !important;
    }

    .form-select:focus {
      outline: none;
      border-color: var(--accent-primary);
    }

    .form-select:hover {
      border-color: var(--accent-primary);
    }

    /* Safety meeting agenda section open/closed — needs room for custom arrow + label text */
    .agenda-section-status.form-select {
      width: auto;
      min-width: 8.5rem;
      max-width: 100%;
      padding: 0.5rem 2.25rem 0.5rem 0.75rem;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.35;
      background-position: right 0.65rem center;
      background-size: 12px 12px;
      flex-shrink: 0;
    }

    /* Required fields in Create Job card – yellow box to match app */
    .pms-create-job-required.form-select,
    .pms-create-job-required.form-input {
      background: var(--warning-bg);
      border: 1px solid var(--warning);
    }
    .pms-create-job-required.form-select:focus,
    .pms-create-job-required.form-input:focus {
      border-color: var(--warning);
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }

    /* Required fields in Incident Report form – same yellow highlight (MAIB ARF alignment) */
    .incident-report-required.form-select,
    .incident-report-required.form-input {
      background: var(--warning-bg);
      border: 1px solid var(--warning);
    }
    .incident-report-required.form-select:focus,
    .incident-report-required.form-input:focus {
      border-color: var(--warning);
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }

    /* Equipment selection: greyed out when another option is chosen */
    .pms-job-equipment-select.pms-job-equipment-disabled {
      opacity: 0.35;
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
      cursor: not-allowed;
      pointer-events: none;
    }

    .form-select option {
      background: var(--bg-secondary);
      color: var(--text-primary);
      padding: 0.5rem;
    }

    /* Compact PMS Vessel Selector */
    .pms-vessel-selector {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.375rem 0.75rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      font-size: 0.875rem;
    }

    .pms-vessel-selector label {
      color: var(--text-secondary);
      font-size: 0.875rem;
      white-space: nowrap;
    }

    .pms-vessel-selector select {
      background: transparent;
      border: none;
      color: var(--text-primary);
      font-size: 0.875rem;
      padding: 0;
      min-width: 150px;
      cursor: pointer;
      outline: none;
    }

    .pms-vessel-selector select:focus {
      color: var(--accent-primary);
    }

    .password-wrapper {
      position: relative;
    }

    .password-wrapper .form-input {
      padding-right: 3rem;
    }

    .password-toggle {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .password-toggle svg {
      width: 20px;
      height: 20px;
    }

    .form-error {
      color: var(--danger);
      font-size: 0.75rem;
      margin-top: 0.5rem;
    }

    .login-btn {
      width: 100%;
      padding: 0.875rem;
      background: var(--accent-gradient);
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: opacity 0.2s;
    }

    .login-btn:hover {
      opacity: 0.9;
    }

    .login-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Toast */
    .toast-container {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .toast {
      padding: 1rem 1.25rem;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      animation: slideIn 0.3s ease;
    }

    .toast.success {
      border-left: 3px solid var(--success);
    }

    .toast.error {
      border-left: 3px solid var(--danger);
    }

    .toast.warning {
      border: 1px solid #d97706;
      border-left: 4px solid #b45309;
      background: #fde68a;
      color: #1c1917;
      align-items: flex-start;
      max-width: min(520px, 92vw);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    .toast.warning span:first-child {
      color: #b45309;
    }

    .toast.warning > span:last-child {
      line-height: 1.45;
      word-break: break-word;
    }

    .toast.warning .toast-action {
      background: rgba(28, 25, 23, 0.12) !important;
      color: #1c1917 !important;
    }

    @keyframes slideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* Mobile Header: burger left, logo center, theme+notifications right */
    .mobile-header-shell {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: var(--z-mobile-header, 150);
    }
    .mobile-header {
      display: flex;
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      height: 60px;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      padding: 0 0.5rem;
      flex-direction: row;
      align-items: center;
      z-index: auto;
    }
    .mobile-header-vessel-wrap {
      display: none;
      padding: 0.35rem 0.75rem 0.5rem;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      width: 100%;
      max-width: 100%;
    }
    .mobile-header-vessel-wrap .sidebar-vessel-picker-trigger {
      min-height: var(--tap-min, 44px);
    }
    .mobile-header-vessel-wrap .sidebar-vessel-picker-menu {
      left: 0;
      right: 0;
      min-width: 100%;
      max-width: 100%;
    }
    .mobile-header-left {
      flex: 1;
      display: flex;
      align-items: center;
      min-width: 0;
    }
    .mobile-header-center {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mobile-header-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
    }
    .mobile-header .logo {
      padding: 0;
      border: none;
      margin: 0;
    }
    .mobile-header .logo-icon {
      width: 32px;
      height: 32px;
    }
    .mobile-header .logo-text {
      font-size: 1rem;
      line-height: 1.1;
    }

    .burger-btn {
      display: none;
      background: none;
      border: none;
      color: var(--text-primary);
      cursor: pointer;
      padding: 0.5rem;
      border-radius: 8px;
      transition: background 0.2s;
    }

    .burger-btn:hover {
      background: var(--bg-card);
    }

    .burger-btn svg {
      width: 24px;
      height: 24px;
    }

    .header-actions { display: flex; align-items: center; gap: 0.5rem; }
    .notification-bell-btn {
      background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 0.5rem;
      border-radius: 8px; position: relative; transition: background 0.2s;
      width: 36px; height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    }
    .notification-bell-btn svg {
      width: 20px; height: 20px; display: block;
    }
    .notification-bell-btn:hover { background: var(--bg-card); }
    .notification-badge {
      position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
      font-size: 0.7rem; font-weight: 600; background: var(--danger); color: #fff; border-radius: 8px;
      display: flex; align-items: center; justify-content: center; z-index: 1;
    }
    .notification-dot {
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      background: var(--danger); flex-shrink: 0;
    }
  .nav-unread-badge {
      position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
      font-size: 0.65rem; padding: 0.15rem 0.4rem; min-width: 18px; text-align: center;
      font-weight: 600; background: var(--danger, #dc3545); color: #fff; border-radius: 999px;
      line-height: 1.2; box-sizing: border-box;
    }
    .nav-item { position: relative; }
    .nav-section-unread-badge {
      margin-left: auto; font-size: 0.62rem; padding: 0.1rem 0.35rem; min-width: 16px; text-align: center;
      font-weight: 600; background: var(--danger, #dc3545); color: #fff; border-radius: 999px; line-height: 1.2;
    }
    .nav-section-title.has-subgroups { min-width: 0; }
    .nav-section-unread-dot {
      width: 8px; height: 8px; border-radius: 50%; background: var(--danger, #dc3545);
      margin-left: auto; flex-shrink: 0; display: none;
    }
    .category-header-item > button {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .category-header-unread-badge {
      position: absolute;
      top: 2px;
      right: 2px;
      font-size: 0.58rem;
      padding: 0.05rem 0.3rem;
      min-width: 15px;
      height: 15px;
      box-sizing: border-box;
      text-align: center;
      font-weight: 700;
      background: var(--danger, #dc3545);
      color: #fff;
      border-radius: 999px;
      line-height: 14px;
      box-shadow: 0 0 0 1.5px var(--bg-secondary);
      pointer-events: none;
      z-index: 2;
    }
    .dropdown-item-unread-badge {
      margin-left: auto;
      font-size: 0.62rem; padding: 0.08rem 0.35rem; min-width: 16px; text-align: center;
      font-weight: 600; background: var(--danger, #dc3545); color: #fff; border-radius: 999px; line-height: 1.2;
      flex-shrink: 0;
    }
    .nav-unread-badge:not([hidden]),
    .dropdown-item-unread-badge:not([hidden]),
    .nav-section-unread-badge:not([hidden]),
    .category-header-unread-badge:not([hidden]) {
      display: inline-block;
    }
    .sidebar-header-row { display: flex; align-items: center; justify-content: flex-start; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border-color); margin-bottom: 0.45rem; gap: 0.25rem; }
    .sidebar-header-row .logo { padding: 0; border: none; margin: 0; flex-shrink: 0; }
    .sidebar-header-util-start { margin-left: auto; }
    .header-utilities { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
    /* Online/offline: fine border on dashboard logo icons (green = online, yellow = offline) */
    .dashboard-logo-icon {
      box-sizing: border-box;
      border: 1.5px solid var(--success);
      transition: border-color 0.2s;
    }
    .dashboard-logo-icon.offline {
      border-color: var(--warning);
    }
    .wt-conn-light {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      margin-left: 0.4rem;
      padding: 0.15rem 0.45rem 0.15rem 0.3rem;
      border-radius: 999px;
      border: 1px solid var(--border-color, #334);
      background: color-mix(in srgb, var(--bg-card, #111) 80%, transparent);
      cursor: pointer;
      font-size: 0.7rem;
      line-height: 1;
      color: var(--text-secondary, #9aa);
      flex-shrink: 0;
      vertical-align: middle;
    }
    .wt-conn-light-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 50%;
      background: #8a94a6;
      flex-shrink: 0;
    }
    .wt-conn-light[data-wt-conn="ship"] .wt-conn-light-dot,
    .wt-conn-light[data-wt-conn="ship-web"] .wt-conn-light-dot {
      background: var(--success, #22c55e);
    }
    .wt-conn-light[data-wt-conn="local"] .wt-conn-light-dot {
      background: var(--warning, #f59e0b);
    }
    .wt-conn-light[data-wt-conn="local-other"] .wt-conn-light-dot {
      background: var(--danger, #dc2626);
    }
    .wt-conn-light[data-wt-conn="web"] .wt-conn-light-dot {
      background: #8a94a6;
    }
    @keyframes wt-conn-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.45; transform: scale(0.85); }
    }
    .wt-conn-light[data-wt-conn="ship-web"] .wt-conn-light-dot {
      animation: wt-conn-pulse 1.4s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .wt-conn-light[data-wt-conn="ship-web"] .wt-conn-light-dot {
        animation: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #22c55e) 35%, transparent);
      }
    }
    .theme-menu-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      width: 100%;
      padding: 0.5rem 1rem;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font: inherit;
      font-size: 0.875rem;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      box-sizing: border-box;
    }
    .theme-menu-item:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
    }
    .theme-menu-item svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      opacity: 0.8;
    }
    /* Icon and label reflect target mode to switch into */
    .theme-menu-item .theme-icon-light { display: block; }
    .theme-menu-item .theme-icon-dark { display: none; }
    html[data-theme="light"] .theme-menu-item .theme-icon-light { display: none; }
    html[data-theme="light"] .theme-menu-item .theme-icon-dark { display: block; }
    .category-header-dropdown .theme-menu-item,
    .sidebar-help-dropdown .theme-menu-item,
    .mobile-header-config-cog .theme-menu-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      width: 100%;
      box-sizing: border-box;
    }
    .category-header-dropdown .theme-menu-item {
      padding: 0.5rem 1rem;
      border-radius: 0;
      color: var(--text-secondary);
      line-height: 1.2;
    }
    .config-dropdown-help-section {
      display: none;
    }
    .mobile-header-config-cog .config-dropdown-help-section {
      display: block;
    }
    .mobile-header-config-cog {
      display: none;
      position: relative;
    }
    .mobile-header-config-cog button {
      padding: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      border-radius: 8px;
      color: var(--text-primary);
      cursor: pointer;
    }
    .mobile-header-config-cog button:hover {
      background: var(--bg-card);
    }
    .mobile-header-config-cog .category-header-dropdown {
      left: auto;
      right: 0;
    }
    .sidebar-help-dropdown .theme-menu-item {
      border-radius: 0;
      padding: 0.5rem 0.75rem;
    }
    .sync-center-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
    .sync-center-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
    .sync-center-table th, .sync-center-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; }
    .sync-center-table th { color: var(--text-secondary); font-weight: 600; }
    .sync-center-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
    .sync-center-dl { display: grid; grid-template-columns: 120px 1fr; gap: 0.35rem 1rem; margin: 1rem 0; font-size: 0.875rem; }
    .sync-center-dl dt { color: var(--text-secondary); margin: 0; }
    .sync-center-dl dd { margin: 0; }
    .notification-dropdown {
      position: fixed; width: 360px; max-width: calc(100vw - 2rem);
      background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--dropdown-shadow);
      z-index: 200; max-height: 70vh; display: flex; flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
      /* top/left set by JS from bell position */
    }
    .notification-dropdown::before {
      content: '';
      position: absolute;
      top: -12px;
      left: 0;
      right: 0;
      height: 12px;
    }
    .notification-dropdown-header {
      padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color);
      display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
    }
    .notification-mark-all { background: none; border: none; color: var(--accent-primary); cursor: pointer; font-size: 0.8rem; }
    .notification-dropdown-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0.35rem 0.75rem 0.85rem;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }
    .notification-list { padding: 0; min-width: 0; }
    .notification-empty {
      margin: 0;
      padding: 1.25rem 0.35rem 0.5rem;
      text-align: center;
      font-size: 0.9rem;
      color: var(--text-muted);
      box-sizing: border-box;
    }
    .notification-item {
      padding: 0.75rem; border-radius: 8px; margin-bottom: 0.25rem; border: 1px solid transparent;
      transition: background 0.2s;
    }
    .notification-item:hover { background: var(--bg-card-hover); }
    .notification-item.unread { background: var(--notification-item-unread-bg); }
    .notification-item .notif-requisition { font-size: 0.8rem; color: var(--accent-primary); font-weight: 600; margin-bottom: 0.35rem; }
    .notification-item .notif-title { font-weight: 600; font-size: 0.9rem; }
    .notification-item .notif-body { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.25rem; }
    .notification-item .notif-time { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem; }
    .notification-quick-reply { margin-top: 0.5rem; display: flex; gap: 0.5rem; }
    .notification-quick-reply input { flex: 1; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-size: 0.875rem; }
    .notification-quick-reply button { padding: 0.5rem 0.75rem; border-radius: 6px; background: var(--accent-primary); color: #fff; border: none; cursor: pointer; font-size: 0.875rem; }
    .communications-fab {
      position: fixed;
      left: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid var(--border-color);
      background: var(--accent-primary);
      color: #fff;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
      cursor: pointer;
      z-index: var(--z-fab, 95);
      transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
      opacity: 0.98;
    }
    /* The docked sidebar is fixed at left:0 with z-index 100, above --z-fab (95),
       so the FAB must clear its width or it is painted over and invisible.
       Only applies where the sidebar is docked rather than off-canvas. */
    @media (min-width: 1025px), (min-width: 769px) and (orientation: landscape) {
      .app-container[data-nav-layout="sidebar"] .communications-fab {
        left: calc(260px + 22px);
      }
      .app-container[data-nav-layout="sidebar"].sidebar-collapsed .communications-fab {
        left: calc(72px + 16px);
      }
    }
    .communications-fab:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    }
    .communications-fab:active {
      transform: translateY(0);
    }
    .communications-fab-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      border-radius: 999px;
      background: var(--danger-color, #ef4444);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      line-height: 18px;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.6);
      display: none;
    }
    .communications-modal-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.45);
      z-index: 1005;
      padding: 1rem;
      box-sizing: border-box;
    }
    .communications-modal-overlay.active {
      display: flex;
    }
    .communications-modal-panel {
      width: min(1200px, 96vw);
      height: min(86vh, 860px);
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .communications-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }
    .communications-modal-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .communications-modal-close {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-secondary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .communications-modal-close:hover {
      color: var(--text-primary);
      background: var(--bg-card-hover);
    }
    #comm-modal-mount {
      display: flex;
      flex: 1;
      min-height: 0;
      border: none;
      border-radius: 0;
      overflow: hidden;
      background: var(--bg-primary);
    }
    @media (max-width: 900px) {
      .communications-modal-overlay { padding: 0.5rem; }
      .communications-modal-panel {
        width: 100%;
        height: min(92vh, 900px);
        border-radius: 12px;
      }
    }

    /* Mobile Overlay */
    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 90;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .sidebar-overlay.active {
      opacity: 1;
    }

    /* Company Profile Form - Card-based Layout (like dashboard stats-grid) */
    .profile-section {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.25rem;
    }

    .profile-section-title {
      margin: 0 0 1rem 0;
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    #company-profile-form {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
    }

    #company-profile-form .form-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }

    @media (min-width: 768px) {
      #company-profile-form .form-row {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* Full width sections */
    .profile-section-full {
      grid-column: 1 / -1;
    }

    .fleet-cert-exclude-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      align-items: center;
      margin-bottom: 0.85rem;
    }
    .fleet-cert-exclude-search {
      flex: 1 1 12rem;
      min-width: 10rem;
      max-width: 22rem;
      height: 2.25rem;
      padding: 0 0.75rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 0.875rem;
    }
    .fleet-cert-exclude-filters {
      display: inline-flex;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: hidden;
      background: var(--bg-primary);
    }
    .fleet-cert-exclude-filters button {
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 0.8rem;
      font-weight: 500;
      padding: 0.45rem 0.75rem;
      cursor: pointer;
    }
    .fleet-cert-exclude-filters button.is-active {
      background: var(--accent-primary);
      color: var(--button-text, #fff);
    }
    .fleet-cert-exclude-meta {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin: 0 0 0.65rem 0;
    }
    .fleet-cert-exclude-list {
      max-height: min(52vh, 420px);
      overflow: auto;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-primary);
      padding: 0.35rem;
    }
    .fleet-cert-exclude-group-title {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      padding: 0.55rem 0.65rem 0.25rem;
    }
    .fleet-cert-exclude-item {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      padding: 0.55rem 0.65rem;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.875rem;
      color: var(--text-primary);
    }
    .fleet-cert-exclude-item:hover {
      background: var(--bg-secondary);
    }
    .fleet-cert-exclude-item.is-excluded {
      background: color-mix(in srgb, var(--warning-bg, #fef3c7) 70%, transparent);
    }
    .fleet-cert-exclude-item input {
      margin-top: 0.15rem;
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      accent-color: var(--accent-primary);
      cursor: pointer;
    }
    .fleet-cert-exclude-item-body {
      flex: 1;
      min-width: 0;
    }
    .fleet-cert-exclude-item-name {
      display: block;
      line-height: 1.3;
      word-break: break-word;
    }
    .fleet-cert-exclude-item-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.25rem;
    }
    .fleet-cert-exclude-pill {
      display: inline-flex;
      align-items: center;
      font-size: 0.68rem;
      padding: 0.1rem 0.4rem;
      border-radius: 999px;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
    }
    .fleet-cert-exclude-pill--warn {
      background: var(--warning-bg, #fef3c7);
      color: var(--warning, #b45309);
      border-color: transparent;
    }
    .fleet-cert-exclude-empty {
      padding: 1.25rem 0.75rem;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.875rem;
    }
    .fleet-cert-exclude-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.85rem;
    }

    .company-logo-remove-btn:hover {
      background: rgba(0,0,0,0.85) !important;
      color: #fff;
    }

    /* ── Engine Logbook redesign ─────────────────────────────────── */
    /* Mirrors Deck Logbook hero header layout for #page-engine-logbook */
    #page-engine-logbook .dl-page-header-top-row--engine-logbook {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 1rem;
      row-gap: 0.35rem;
    }
    #page-engine-logbook .dl-page-header-top-row--engine-logbook .dl-deck-page-title {
      grid-column: 1;
      grid-row: 1;
    }
    #page-engine-logbook .dl-page-header-top-row--engine-logbook .dl-deck-logbook-subtitle {
      grid-column: 1 / -1;
      grid-row: 2;
    }
    #page-engine-logbook .dl-page-header-top-row--engine-logbook .dl-deck-header-controls {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      align-self: center;
      min-width: 0;
      flex: none;
      width: auto;
      max-width: 100%;
    }
    @media (max-width: 720px) {
      #page-engine-logbook .dl-page-header-top-row--engine-logbook {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        position: relative;
      }
      #page-engine-logbook .dl-page-header-top-row--engine-logbook .dl-deck-page-title {
        grid-column: 1;
        grid-row: 1;
        padding-right: calc(var(--mobile-tap-target, 42px) + 0.5rem);
      }
      #page-engine-logbook .dl-page-header-top-row--engine-logbook > .btn-page-config {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
      }
      #page-engine-logbook .dl-page-header-top-row--engine-logbook .dl-deck-logbook-subtitle {
        grid-column: 1;
        grid-row: 2;
      }
      #page-engine-logbook .dl-page-header-top-row--engine-logbook .dl-deck-header-controls {
        grid-column: 1;
        grid-row: 3;
        justify-self: stretch;
        width: 100%;
      }
      #page-engine-logbook .dl-page-header-top-row--engine-logbook .dl-date-control {
        width: 100%;
        max-width: 100%;
      }
    }
    #page-engine-logbook .dl-page-header-top-row > .page-title.dl-deck-page-title,
    #page-engine-logbook .dl-date-input--hero {
      font-size: 1.75rem;
      font-weight: 600;
      line-height: 1.2;
      font-family: inherit;
      letter-spacing: normal;
    }
    #page-engine-logbook .dl-date-input--hero {
      color: var(--text-primary);
      -webkit-text-fill-color: var(--text-primary);
    }
    @media (max-width: 640px) {
      #page-engine-logbook .dl-page-header-top-row > .page-title.dl-deck-page-title,
      #page-engine-logbook .dl-date-input--hero {
        font-size: 1.35rem;
      }
    }
    /* Day log toolbar: distinguish watch line vs general entry (no twin + icons). */
    #page-engine-logbook .el-daylog-header-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-left: auto;
      flex-wrap: wrap;
    }
    #page-engine-logbook .el-daylog-header-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      min-height: 32px;
      padding: 0 0.55rem 0 0.45rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
      flex-shrink: 0;
      color: var(--text-primary);
      background: var(--bg-secondary);
    }
    #page-engine-logbook .el-daylog-header-btn svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }
    #page-engine-logbook .el-daylog-header-btn--watch {
      border-color: rgba(14, 165, 233, 0.4);
      background: rgba(14, 165, 233, 0.1);
      color: #0ea5e9;
    }
    #page-engine-logbook .el-daylog-header-btn--general {
      border-color: rgba(99, 102, 241, 0.4);
      background: rgba(99, 102, 241, 0.1);
      color: #6366f1;
    }
    #page-engine-logbook .el-daylog-header-btn:hover {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    #page-engine-logbook .el-daylog-header-btn--watch:hover {
      background: rgba(14, 165, 233, 0.18);
      border-color: rgba(14, 165, 233, 0.55);
    }
    #page-engine-logbook .el-daylog-header-btn--general:hover {
      background: rgba(99, 102, 241, 0.16);
      border-color: rgba(99, 102, 241, 0.55);
    }
    #page-engine-logbook .el-daylog-header-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none;
    }
    /* View tabs for Engine Logbook */
    .el-tabs {
      display: flex;
      gap: 0.25rem;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 1rem;
      padding: 0 0.25rem;
    }
    .el-tab {
      appearance: none;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      padding: 0.6rem 0.9rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
    }
    .el-tab:hover {
      color: var(--text-primary);
    }
    .el-tab.is-active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
    .el-tab-panel { display: block; }
    .el-tab-panel[hidden] { display: none; }

    /* Engine logbook — equipment status board */
    .el-status-board {
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-secondary);
      padding: 0.75rem;
    }
    .el-status-board__grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 0.75rem;
    }
    .el-status-board__empty {
      grid-column: 1 / -1;
      margin: 0;
      font-size: 0.85rem;
      color: var(--text-secondary);
    }
    /* Engine logbook — Log Hours (manual PMS totals) */
    .el-log-hours-rows {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .el-log-hours-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.65rem 1rem;
      padding: 0.55rem 0.65rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-card);
    }
    .el-log-hours-row__name {
      flex: 1 1 160px;
      font-weight: 600;
      font-size: 0.9rem;
      min-width: 0;
    }
    .el-log-hours-row__input {
      width: 8.5rem;
    }
    .el-log-hours-row__status {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      min-width: 5.5rem;
    }
    .el-log-hours-row__status--saved { color: #15803d; }
    .el-log-hours-row__status--unsaved { color: #b45309; }
    /* Engine logbook — Fuel ROB / consumption (Fuel-typed ballast tanks) */
    .el-fuel-rows {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .el-fuel-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.65rem 1rem;
      padding: 0.55rem 0.65rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-card);
    }
    .el-fuel-row__name { flex: 1 1 160px; font-weight: 600; font-size: 0.9rem; min-width: 0; }
    .el-fuel-row__meta {
      display: block;
      font-weight: 500;
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-top: 0.15rem;
      line-height: 1.35;
    }
    .el-fuel-row__last {
      font-weight: 600;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .el-fuel-row__input { width: 8.5rem; }
    .el-fuel-row__grade { flex: 1 1 11rem; min-width: 9.5rem; max-width: 16rem; }
    .el-fuel-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1.25rem;
      margin-bottom: 0.75rem;
      padding: 0.65rem 0.75rem;
      border-radius: 8px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      font-size: 0.85rem;
    }
    .el-fuel-summary__item strong { font-weight: 700; }
    .el-status-card {
      border: 2px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
      padding: 0.7rem 0.85rem 0.6rem;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .el-status-card--running {
      border-color: #16a34a;
      box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18), 0 1px 2px rgba(0, 0, 0, 0.04);
      animation: el-status-running-pulse 2.6s ease-in-out infinite;
    }
    @keyframes el-status-running-pulse {
      0%, 100% { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18), 0 0 0 0 rgba(34, 197, 94, 0.0), 0 1px 2px rgba(0, 0, 0, 0.04); }
      50%      { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.32), 0 0 14px 2px rgba(34, 197, 94, 0.28), 0 1px 2px rgba(0, 0, 0, 0.04); }
    }
    @media (prefers-reduced-motion: reduce) {
      .el-status-card--running { animation: none; }
    }
    .el-status-card--compact {
      padding: 0.45rem 0.7rem;
      gap: 0;
    }
    .el-status-card--compact .el-status-card__head { align-items: center; }
    .el-status-card--compact .el-status-card__title { font-size: 0.9rem; }
    .el-status-card[role="button"] { cursor: pointer; }
    .el-status-card[role="button"]:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
    .el-status-card--stopped {
      border-color: #dc2626;
    }
    .el-status-card--unknown {
      border-color: var(--border-color);
    }
    .el-status-card--linked::before {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: var(--primary);
      border-radius: 8px 0 0 8px;
    }
    .el-status-card { position: relative; }
    .el-status-card__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }
    .el-status-card__title {
      font-weight: 600;
      font-size: 0.95rem;
      line-height: 1.2;
      min-width: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .el-status-toggle {
      flex-shrink: 0;
      width: 2rem;
      height: 2rem;
      border-radius: 999px;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    }
    .el-status-toggle:hover { transform: scale(1.06); }
    .el-status-toggle:active { transform: scale(0.96); }
    .el-status-toggle:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .el-status-toggle--start {
      background: rgba(34, 197, 94, 0.15);
      color: #16a34a;
      border-color: rgba(34, 197, 94, 0.45);
    }
    .el-status-toggle--start:hover { background: rgba(34, 197, 94, 0.28); }
    .el-status-toggle--stop {
      background: rgba(239, 68, 68, 0.12);
      color: #dc2626;
      border-color: rgba(239, 68, 68, 0.4);
    }
    .el-status-toggle--stop:hover { background: rgba(239, 68, 68, 0.22); }
    .el-status-toggle svg {
      width: 0.95rem;
      height: 0.95rem;
      display: block;
    }
    /* Legacy pill styles kept for any other callers (status board no longer uses them). */
    .el-status-pill {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      padding: 0.2rem 0.55rem;
      border-radius: 999px;
      flex-shrink: 0;
    }
    .el-status-pill--running { background: rgba(34, 197, 94, 0.18); color: #16a34a; }
    .el-status-pill--stopped { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
    .el-status-pill--unknown { background: rgba(148, 163, 184, 0.25); color: var(--text-secondary); }
    .el-status-linked-note {
      font-size: 0.78rem;
      color: var(--text-secondary);
      line-height: 1.35;
      padding: 0.35rem 0.5rem;
      border-radius: 6px;
      background: rgba(99, 102, 241, 0.08);
    }
    .el-status-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0.25rem 0.4rem;
    }
    .el-status-metric__label {
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      font-weight: 600;
    }
    .el-status-metric__val {
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }
    .el-status-metric--pending .el-status-metric__val {
      color: var(--primary);
    }
    .el-status-pms-value { color: var(--text-primary); }
    .el-status-pms-missing { color: var(--text-muted); font-weight: 500; }
    .el-status-last {
      font-size: 0.74rem;
      color: var(--text-muted);
      margin-top: 0.1rem;
    }
    .el-status-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .el-status-save-btn {
      width: 100%;
      font-size: 0.78rem;
      padding: 0.35rem 0.6rem;
    }
    .el-status-controls {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .el-status-controls__label {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin: 0;
    }
    .el-status-controls__select {
      font-size: 0.78rem;
      padding: 0.25rem 1.75rem 0.25rem 0.5rem;
      height: auto;
      max-width: 12rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-family: inherit;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.45rem center;
      line-height: 1.35;
    }
    .el-status-controls__select:focus {
      outline: none;
      border-color: var(--accent-primary);
    }
    .el-status-controls__select:hover {
      border-color: var(--accent-primary);
    }
    .el-status-controls__select option {
      background: var(--bg-card);
      color: var(--text-primary);
    }
    .el-gen-entry-list {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
      overflow: hidden;
    }
    .el-gen-entry-row {
      display: flex;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border-color);
      align-items: flex-start;
    }
    .el-gen-entry-row:last-child { border-bottom: none; }
    .el-gen-entry-time {
      min-width: 4.5rem;
      font-size: 0.78rem;
      color: var(--text-muted);
      padding-top: 0.15rem;
      font-variant-numeric: tabular-nums;
    }
    .el-gen-entry-body { flex: 1; min-width: 0; }
    .el-gen-entry-body--watch .el-watch-line-card {
      width: 100%;
      max-width: 100%;
    }
    .el-gen-entry-checklist-expanded {
      margin-top: 0.55rem;
      padding: 0.55rem 0.65rem;
      border-radius: 8px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      font-size: 0.8rem;
    }
    .el-gen-entry-checklist-head {
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 0.35rem;
      font-size: 0.78rem;
    }
    .el-gen-entry-checklist-section {
      font-weight: 600;
      font-size: 0.72rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin: 0.45rem 0 0.2rem;
    }
    .el-gen-entry-checklist-line {
      display: flex;
      align-items: baseline;
      gap: 0.35rem;
      padding: 0.12rem 0;
      flex-wrap: wrap;
    }
    .el-gen-entry-checklist-mark {
      font-size: 0.85rem;
      color: var(--text-secondary);
      flex-shrink: 0;
    }
    .el-gen-entry-checklist-meta {
      font-size: 0.7rem;
      color: var(--text-muted);
    }
    .el-gen-entry-checklist-modal .el-gen-entry-checklist-line label {
      display: flex;
      align-items: flex-start;
      gap: 0.4rem;
      cursor: pointer;
      flex: 1;
      min-width: 0;
    }
    .el-gen-entry-checklist-modal .el-gen-entry-checklist-row {
      padding: 0.2rem 0;
      font-size: 0.82rem;
    }

    /* Engine logbook fields modal — drag reorder (mirrors deck template field DnD) */
    .el-fl-field-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.65rem;
      margin-bottom: 0.45rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-secondary);
    }
    .el-fl-field-row.is-dragging {
      opacity: 0.65;
      transform: scale(0.995);
    }
    .el-fl-field-row.drag-over-before {
      border-top: 2px solid var(--primary);
    }
    .el-fl-field-row.drag-over-after {
      border-bottom: 2px solid var(--primary);
    }
    .el-fl-field-drag-handle {
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-secondary);
      border-radius: 8px;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      user-select: none;
      font-size: 0.95rem;
      line-height: 1;
    }
    .el-fl-field-drag-handle:active {
      cursor: grabbing;
    }
    .el-fl-field-info {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.18rem;
    }
    .el-fl-field-title-row {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.4rem 0.5rem;
      line-height: 1.25;
    }
    .el-fl-field-name {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 0.92rem;
      word-break: break-word;
    }
    .el-fl-field-badge {
      display: inline-flex;
      align-items: center;
      padding: 1px 7px;
      border-radius: 4px;
      font-size: 0.6875rem;
      font-weight: 500;
      line-height: 1.5;
      white-space: nowrap;
    }
    .el-fl-field-badge--catalogue {
      background: #dbeafe;
      color: #1e40af;
    }
    .el-fl-field-badge--custom {
      background: #f3f4f6;
      color: #6b7280;
    }
    .el-fl-field-required {
      color: #dc2626;
      font-weight: 600;
      font-size: 0.7rem;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .el-fl-field-meta {
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.3;
      word-break: break-word;
    }

    /* Watch line cards */
    .el-watch-line-card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
      margin-bottom: 0.65rem;
      overflow: hidden;
    }
    .el-watch-line-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      flex-wrap: wrap;
      padding: 0.65rem 0.85rem;
      background: rgba(14, 165, 233, 0.04);
      border-bottom: 1px solid var(--border-color);
      transition: background 0.15s;
    }
    .el-watch-line-header:hover {
      background: rgba(14, 165, 233, 0.08);
    }
    .el-watch-line-header-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      min-width: 0;
      flex: 1;
      cursor: pointer;
      user-select: none;
    }
    .el-watch-line-time {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text-primary);
    }
    .el-watch-line-meta {
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .el-watch-line-chevron {
      width: 16px;
      height: 16px;
      transition: transform 0.15s;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .el-watch-line-card.is-expanded .el-watch-line-chevron {
      transform: rotate(90deg);
    }
    .el-watch-line-body {
      padding: 0.5rem 0.85rem 0.85rem;
      border-top: 1px solid var(--border-color);
      display: none;
    }
    .el-watch-line-card.is-expanded .el-watch-line-body { display: block; }
    .el-watch-line-card.is-pending .el-watch-line-header-main {
      cursor: pointer;
    }
    .el-wl-inline-slot-form {
      padding: 0.25rem 0 0;
    }
    .el-wl-watch-meta-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
      margin: 0 0 0.55rem 0;
    }
    .el-wl-watch-meta-row .el-wl-watch-meta-form-group {
      margin-bottom: 0;
    }
    .el-wl-watch-meta-row .el-wl-watch-meta-form-group .form-label {
      font-size: 0.75rem;
      margin-bottom: 0.12rem;
    }
    .el-wl-watch-meta-row .form-input,
    .el-wl-watch-meta-row textarea.form-input {
      font-size: 0.8125rem;
      padding: 0.26rem 0.42rem;
      box-sizing: border-box;
    }
    /* Assembly / Recorded at / Line remarks: ~2 lines tall (compact). */
    .el-wl-watch-meta-row select.form-input,
    .el-wl-watch-meta-row input.el-wl-recorded-at-input[type="datetime-local"],
    .el-wl-watch-meta-row textarea.el-wl-line-remarks-input {
      min-height: 2.75rem;
      max-height: 2.75rem;
      padding: 0.22rem 0.42rem;
      line-height: 1.35;
      box-sizing: border-box;
    }
    .el-wl-watch-meta-row textarea.el-wl-line-remarks-input {
      resize: none;
      overflow-y: auto;
    }
    /* Merged day log: time/slot is in the left column — hide duplicate in the card header */
    .el-gen-entry-body--watch .el-watch-line-header .el-wl-slot-tag {
      display: none;
    }
    .el-gen-entry-body--watch .el-watch-line-header .el-watch-line-time {
      display: none;
    }
    @media (min-width: 768px) {
      .el-wl-watch-meta-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 0.65rem 1rem;
      }
      .el-wl-watch-meta-row--with-assembly .el-wl-watch-meta-cell--assembly {
        flex: 0 1 11rem;
        min-width: 8.5rem;
        max-width: 14rem;
      }
      .el-wl-watch-meta-row .el-wl-watch-meta-cell:not(.el-wl-watch-meta-cell--remarks) {
        flex: 0 0 auto;
      }
      .el-wl-watch-meta-row .el-wl-watch-meta-cell--remarks {
        flex: 1 1 12rem;
        min-width: 10rem;
      }
      .el-wl-watch-meta-row .el-wl-recorded-at-input {
        width: auto;
        max-width: 11.75rem;
      }
    }
    .el-wl-assembly-watch-section + .el-wl-assembly-watch-section {
      margin-top: 0.65rem;
      padding-top: 0.55rem;
      border-top: 1px solid var(--border-color);
    }
    .el-wl-assembly-watch-heading {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin: 0 0 0.4rem 0;
    }
    .el-wl-inline-slot-form .el-equipment-card {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.65rem 0.75rem;
      margin-top: 0.5rem;
      background: var(--bg-secondary, rgba(0,0,0,0.02));
    }
    .el-wl-inline-slot-form .el-wl-form-equipment-row .el-equipment-card {
      margin-top: 0;
      padding: 0.65rem 0.75rem;
    }
    .el-wl-form-equipment-rows {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .el-wl-form-equipment-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      border: 1px solid rgba(148, 163, 184, 0.4);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(148, 163, 184, 0.06);
    }
    .el-wl-form-equipment-row--single {
      border-color: transparent;
      background: transparent;
    }
    .el-wl-form-equipment-row .el-equipment-card {
      flex: 1 1 180px;
      min-width: 120px;
      margin-bottom: 0;
      margin-top: 0;
      border: none;
      border-radius: 0;
      border-right: 1px dashed var(--border-color);
      background: transparent;
    }
    .el-wl-form-equipment-row .el-equipment-card:last-child {
      border-right: none;
    }
    #engine-logbook-watch-line-form-view .el-wl-form-equipment-row .el-equipment-card {
      background: transparent;
    }
    .el-wl-inline-recorded-actions {
      margin-top: 0.65rem;
      padding-top: 0.5rem;
      border-top: 1px dashed var(--border-color);
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      align-items: center;
    }
    .el-watch-line-columns.el-wl-inline-recorded-editing .el-wl-column {
      min-width: 120px;
    }
    .el-wl-inline-part-fields .el-field-item {
      margin-bottom: 0;
    }
    /* Watch-line field inputs: short numeric readings, width follows label scale */
    .el-wl-field-item {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 100%;
    }
    .el-wl-field-item .form-label {
      font-size: 0.7rem;
      margin-bottom: 0.1rem;
      line-height: 1.2;
      max-width: 100%;
    }
    .el-wl-field-item .form-input.el-wl-field-input[type="number"],
    .el-wl-field-item .form-input.el-wl-field-input[type="text"] {
      width: auto;
      min-width: 0;
      max-width: 100%;
      padding: 0.16rem 0.3rem;
      font-size: 0.78rem;
      line-height: 1.2;
    }
    .el-wl-field-item .form-input.el-wl-field-input[type="datetime-local"] {
      width: auto;
      max-width: 100%;
      min-width: 9.5rem;
      padding: 0.18rem 0.35rem;
      font-size: 0.76rem;
    }
    .el-wl-field-item select.form-input.el-wl-field-input {
      width: auto;
      max-width: 100%;
      min-width: 0;
      padding: 0.14rem 1.45rem 0.14rem 0.28rem;
      font-size: 0.78rem;
      line-height: 1.2;
    }
    .el-wl-field-item textarea.form-input.el-wl-field-input {
      width: 100%;
      max-width: min(100%, 16rem);
      min-height: 2.1rem;
      padding: 0.22rem 0.38rem;
      font-size: 0.78rem;
      line-height: 1.25;
    }
    .el-wl-field-item.el-wl-hours-field-item .el-wl-hours-input {
      width: auto;
      max-width: 100%;
      min-width: 4.5ch;
      padding: 0.16rem 0.3rem;
      font-size: 0.78rem;
    }
    .el-wl-inline-part-fields {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.35rem 0.45rem;
    }
    .el-wl-form-equipment-row .el-equipment-card-fields,
    #engine-logbook-watch-line-form-view .el-equipment-card-fields {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.35rem 0.5rem;
    }
    .el-watch-line-columns {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 0.45rem;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 0 -0.15rem;
      padding-bottom: 0.15rem;
    }
    .el-wl-equipment-row {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      flex: 1 1 auto;
      min-width: 0;
      border: 1px solid rgba(148, 163, 184, 0.4);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(148, 163, 184, 0.06);
    }
    .el-wl-equipment-row--single {
      border-color: transparent;
      background: transparent;
      border-radius: 0;
      flex: 1 1 0;
    }
    .el-wl-equipment-row .el-wl-column {
      flex: 1 1 0;
      min-width: 100px;
    }
    .el-watch-line-columns > .el-wl-equipment-row:first-child .el-wl-column:first-child {
      padding-left: 0.15rem;
    }
    .el-watch-line-columns > .el-wl-equipment-row:last-child .el-wl-column:last-child {
      border-right: none;
      padding-right: 0.15rem;
    }
    .el-wl-column {
      flex: 1 1 0;
      min-width: 132px;
      padding: 0 0.65rem;
      border-right: 1px dashed var(--border-color);
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .el-wl-equipment-row .el-wl-column:last-child {
      border-right: none;
    }
    .el-wl-col-head-prefix {
      color: var(--text-muted);
      font-weight: 500;
      margin-right: 0.1rem;
    }
    .el-wl-col-head {
      flex-shrink: 0;
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--text-primary);
      margin-bottom: 0.45rem;
      padding-bottom: 0.35rem;
      border-bottom: 1px solid var(--border-color);
    }
    /* One vertical list per equipment; columns stretch so short lists get space before the footer. */
    .el-wl-reading-cells {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      min-height: 0.5rem;
    }
    .el-wl-reading-cell {
      flex: 0 0 auto;
      width: 100%;
      box-sizing: border-box;
      padding: 0.35rem 0.45rem;
      border-radius: 6px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      background: rgba(148, 163, 184, 0.06);
    }
    .el-wl-reading-cell .el-part-value-label {
      display: block;
      margin-bottom: 0.15rem;
      font-size: 0.72rem;
      line-height: 1.25;
    }
    .el-wl-reading-cell .el-part-value-value {
      display: block;
      font-size: 0.88rem;
      line-height: 1.35;
      word-break: break-word;
    }
    .el-wl-col-foot {
      flex-shrink: 0;
      margin-top: auto;
      padding-top: 0.5rem;
      border-top: 1px dashed rgba(148, 163, 184, 0.35);
    }
    .el-wl-col-foot .el-part-meta {
      margin-top: 0.28rem;
    }
    .el-wl-col-foot .el-part-meta:first-child {
      margin-top: 0;
    }
    .el-wl-col-foot .el-part-actions {
      margin-top: 0.35rem;
    }
    .el-watch-line-part {
      padding: 0.5rem 0;
      border-bottom: 1px dashed var(--border-color);
    }
    .el-watch-line-part:last-child {
      border-bottom: none;
    }
    .el-part-equipment {
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }
    .el-part-values {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 0.35rem 0.85rem;
      font-size: 0.825rem;
    }
    .el-part-value-label {
      color: var(--text-muted);
      font-weight: 500;
    }
    .el-part-value-value {
      color: var(--text-primary);
      font-weight: 500;
    }
    .el-part-meta {
      margin-top: 0.35rem;
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* Watch line slot column on the left of each line card */
    .el-watch-line-card.is-pending {
      border-style: dashed;
      background: rgba(148, 163, 184, 0.04);
    }
    .el-watch-line-header.has-slot {
      align-items: stretch;
      gap: 0;
      padding: 0;
    }
    .el-wl-slot-tag {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.15rem;
      min-width: 78px;
      padding: 0.6rem 0.65rem;
      border-right: 1px solid var(--border-color);
      background: rgba(14, 165, 233, 0.06);
      color: var(--text-primary);
    }
    .el-watch-line-card.is-pending .el-wl-slot-tag {
      background: rgba(148, 163, 184, 0.08);
    }
    .el-wl-slot-time {
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: 0.02em;
    }
    .el-wl-slot-label {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
    }
    .el-watch-line-header.has-slot > .el-watch-line-header-main {
      padding: 0.65rem 0.85rem;
    }
    .el-watch-line-header.has-slot .el-watch-line-pending-actions {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0 0.85rem;
    }

    /* Watch schedule editor (Engine Logbook Config) */
    .el-sched-section {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .el-sched-times {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      align-items: center;
    }
    .el-sched-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.25rem 0.5rem 0.25rem 0.6rem;
      border-radius: 999px;
      background: rgba(14, 165, 233, 0.08);
      border: 1px solid rgba(14, 165, 233, 0.25);
      color: var(--text-primary);
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .el-sched-chip-x {
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 1rem;
      line-height: 1;
      padding: 0 0.15rem;
    }
    .el-sched-chip-x:hover { color: var(--danger); }
    .el-sched-add {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }
    .el-sched-add input[type="time"] {
      width: 110px;
      padding: 0.3rem 0.4rem;
      font-size: 0.85rem;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-primary);
    }
    .el-sched-eq-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: 0.5rem;
      padding: 0.4rem 0;
      border-bottom: 1px dashed var(--border-color);
    }
    .el-sched-eq-row:last-child { border-bottom: none; }
    .el-sched-eq-name {
      font-weight: 500;
      font-size: 0.9rem;
      color: var(--text-primary);
    }
    .el-sched-eq-times {
      font-size: 0.8rem;
      color: var(--text-muted);
    }
    .el-sched-eq-times.is-override {
      color: var(--text-primary);
      font-weight: 500;
    }
    .el-sched-empty {
      font-size: 0.85rem;
      color: var(--text-muted);
      font-style: italic;
    }
    .el-part-actions {
      display: flex;
      gap: 0.35rem;
      margin-top: 0.35rem;
      flex-wrap: wrap;
    }
    .el-part-actions .btn {
      font-size: 0.75rem;
      padding: 0.25rem 0.55rem;
    }

    /* Assembly picker (in record watch line modal) */
    .el-assembly-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.65rem 0.85rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-bottom: 0.4rem;
      background: var(--bg-card);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .el-assembly-row:hover {
      border-color: var(--primary);
      background: rgba(14, 165, 233, 0.05);
    }
    .el-assembly-row-name {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text-primary);
    }
    .el-assembly-row-meta {
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .el-equipment-card {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.6rem 0.75rem;
      margin-bottom: 0.6rem;
      background: var(--bg-card);
    }
    .el-equipment-card-title {
      font-weight: 600;
      font-size: 0.875rem;
      margin-bottom: 0.4rem;
      color: var(--text-primary);
    }
    .el-equipment-card-fields {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 0.5rem 0.65rem;
    }
    .el-field-item .form-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-bottom: 0.2rem;
      display: block;
    }
    .el-field-item .form-input {
      width: 100%;
    }

    /* By equipment view */
    .el-by-equipment-assembly {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      margin-bottom: 0.65rem;
      background: var(--bg-card);
      overflow: hidden;
    }
    .el-by-equipment-assembly-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.65rem 0.85rem;
      background: rgba(14, 165, 233, 0.04);
      cursor: pointer;
      user-select: none;
    }
    .el-by-equipment-assembly-header:hover {
      background: rgba(14, 165, 233, 0.08);
    }
    .el-by-equipment-assembly .el-by-equipment-assembly-body {
      display: none;
      padding: 0 0.5rem 0.65rem;
    }
    .el-by-equipment-assembly.is-expanded .el-by-equipment-assembly-body {
      display: block;
    }
    .el-by-equipment-assembly.is-expanded .el-by-equipment-assembly-header .el-watch-line-chevron {
      transform: rotate(90deg);
    }
    .el-by-equipment-assembly-name {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text-primary);
    }
    .el-by-equipment-equipment {
      padding: 0.4rem 0.85rem 0.65rem;
      border-top: 1px solid var(--border-color);
    }
    .el-by-equipment-equipment-name {
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--text-primary);
      margin: 0.4rem 0 0.25rem;
    }
    .el-by-equipment-no-readings {
      font-size: 0.78rem;
      color: var(--text-muted);
      font-style: italic;
    }

    /* Engine logbook config equipment list */
    .el-config-equipment-row {
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      gap: 0.65rem;
      padding: 0.65rem 0.5rem;
      border-bottom: 1px solid var(--border-color);
      align-items: center;
    }
    .el-config-equipment-row:last-child {
      border-bottom: none;
    }
    .el-config-equipment-name {
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--text-primary);
    }
    .el-config-equipment-meta {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.15rem;
    }
    .el-config-fields-count {
      font-size: 0.75rem;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    @media (max-width: 640px) {
      .el-config-equipment-row {
        grid-template-columns: 1fr;
      }
      .el-config-equipment-row > * {
        grid-column: 1;
      }
    }

    /* Field schema editor rows */
    .el-field-row {
      display: grid;
      grid-template-columns: 1.4fr 1fr 0.7fr 1fr auto;
      gap: 0.4rem;
      align-items: end;
      padding: 0.4rem 0;
      border-bottom: 1px dashed var(--border-color);
    }
    .el-field-row:last-child {
      border-bottom: none;
    }
    .el-field-row .form-label {
      font-size: 0.7rem;
      margin-bottom: 0.15rem;
    }
    .el-field-row .form-input,
    .el-field-row .form-select {
      font-size: 0.825rem;
      padding: 0.35rem 0.45rem;
    }
    .el-field-row-remove {
      align-self: end;
      padding: 0.4rem 0.55rem;
    }
    @media (max-width: 700px) {
      .el-field-row {
        grid-template-columns: 1fr 1fr;
      }
      .el-field-row-remove {
        grid-column: 1 / -1;
      }
    }
    /* ── End Engine Logbook redesign ───────────────────────────── */

    /* ── Deck Logbook redesign ─────────────────────────────────────── */
    .dl-page-header {
      margin-bottom: 1.5rem;
    }
    .dl-page-header-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1.25rem;
      flex-wrap: wrap;
      margin-bottom: 0.35rem;
    }
    /* Deck Logbook: desktop = title | date on row 1, subtitle row 2; narrow = title → subtitle → date */
    #page-deck-logbook .dl-page-header-top-row--deck-logbook {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 1rem;
      row-gap: 0.35rem;
    }
    #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-deck-title-row {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      min-width: 0;
    }
    #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-deck-title-row .dl-deck-page-title {
      margin: 0;
      min-width: 0;
    }
    #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-deck-title-row .btn-page-config {
      padding: 0.2rem;
      min-width: 0;
      width: 1.65rem;
      height: 1.65rem;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 6px;
    }
    #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-deck-title-row .btn-config-label {
      display: none;
    }
    #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-deck-title-row .btn-config-icon {
      width: 14px;
      height: 14px;
    }
    #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-deck-logbook-subtitle {
      grid-column: 1 / -1;
      grid-row: 2;
    }
    #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-deck-header-controls {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      align-self: center;
      min-width: 0;
      flex: none;
      width: auto;
      max-width: 100%;
    }
    @media (max-width: 720px) {
      #page-deck-logbook .dl-page-header-top-row--deck-logbook {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
      }
      #page-deck-logbook .dl-page-header-top-row--deck-logbook {
        position: relative;
      }
      #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-deck-title-row {
        grid-column: 1;
        grid-row: 1;
      }
      #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-deck-logbook-subtitle {
        grid-column: 1;
        grid-row: 2;
      }
      #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-deck-header-controls {
        grid-column: 1;
        grid-row: 3;
        justify-self: stretch;
        width: 100%;
      }
      #page-deck-logbook .dl-page-header-top-row--deck-logbook .dl-date-control {
        width: 100%;
        max-width: 100%;
      }
      #page-engine-logbook .dl-page-header-top-row--engine-logbook .dl-date-control {
        width: 100%;
        max-width: 100%;
      }
      #page-deck-logbook .dl-date-control--title-row {
        width: 100%;
        min-width: 0;
      }
      #page-engine-logbook .dl-date-control--title-row {
        width: 100%;
        min-width: 0;
      }
      #page-deck-logbook .dl-date-input--hero {
        min-width: 0;
        flex: 1 1 0;
      }
      #page-engine-logbook .dl-date-input--hero {
        min-width: 0;
        flex: 1 1 0;
      }
      #page-deck-logbook .dl-nav-btn,
      #page-engine-logbook .dl-nav-btn {
        width: 38px;
        min-height: 46px;
      }
      #page-deck-logbook .dl-sea-status-badge,
      #page-deck-logbook .dl-timezone-badge,
      #page-deck-logbook .dl-lock-badge,
      #page-engine-logbook .dl-sea-status-badge,
      #page-engine-logbook .dl-timezone-badge,
      #page-engine-logbook .dl-lock-badge {
        min-height: 46px;
        padding: 0 0.55rem;
        font-size: 0.8rem;
      }
      .dl-timezone-badge {
        padding: 0 0.65rem;
        font-size: 0.8rem;
      }
    }
    @media (max-width: 480px) {
      #page-deck-logbook .dl-timezone-badge .dl-timezone-label,
      #page-deck-logbook .dl-lock-badge .dl-lock-label,
      #page-engine-logbook .dl-timezone-badge .dl-timezone-label,
      #page-engine-logbook .dl-lock-badge .dl-lock-label {
        display: none;
      }
      #page-deck-logbook .dl-date-input--hero {
        font-size: 1.1rem;
      }
      #page-engine-logbook .dl-date-input--hero {
        font-size: 1.1rem;
      }
    }
    .dl-deck-page-title {
      margin: 0 !important;
      flex-shrink: 0;
    }
    /* Date input uses same type scale + weight as “Deck Logbook” title */
    #page-deck-logbook .dl-deck-title-row .page-title.dl-deck-page-title,
    #page-deck-logbook .dl-date-input--hero {
      font-size: 1.75rem;
      font-weight: 600;
      line-height: 1.2;
      font-family: inherit;
      letter-spacing: normal;
    }
    #page-deck-logbook .dl-date-input--hero {
      color: var(--text-primary);
      -webkit-text-fill-color: var(--text-primary);
    }
    .dl-deck-header-controls {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      min-width: min(100%, 320px);
    }
    .dl-inline-nav {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .dl-inline-date {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1rem;
      min-width: 150px;
    }
    .dl-nav-bar {
      display: none;
    }
    /* ── Date control pill (title row — large date input) ─────────── */
    .dl-date-control {
      display: flex;
      align-items: stretch;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-card);
      overflow: hidden;
      max-width: 100%;
    }
    .dl-date-control--title-row {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .dl-nav-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      min-height: 52px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: background 0.15s, color 0.15s, opacity 0.15s;
      flex-shrink: 0;
    }
    .dl-nav-btn svg { width: 16px; height: 16px; }
    .dl-nav-btn:hover:not(:disabled) { background: rgba(14,165,233,0.08); color: var(--primary); }
    .dl-nav-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
    }
    /* Hero date — typography matched on #page-deck-logbook (see above) */
    .dl-date-input--hero {
      flex: 1;
      min-width: 10.5rem;
      max-width: 100%;
      color: var(--text-primary);
      background: transparent;
      border: none;
      border-left: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
      padding: 0.35rem 0.85rem;
      margin: 0;
      cursor: pointer;
      font-family: inherit;
      box-shadow: none;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
    }
    .dl-date-input--hero:hover,
    .dl-date-input--hero:focus {
      background: rgba(14, 165, 233, 0.06);
    }
    .dl-date-input--hero::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.65;
      padding: 0.25rem;
      margin-left: 0.25rem;
    }
    .dl-date-input--hero::-webkit-datetime-edit {
      padding: 0;
    }
    @media (max-width: 640px) {
      #page-deck-logbook .dl-deck-title-row .page-title.dl-deck-page-title,
      #page-deck-logbook .dl-date-input--hero {
        font-size: 1.35rem;
      }
      .dl-date-input--hero {
        min-width: 9rem;
        padding: 0.3rem 0.55rem;
      }
      .dl-nav-btn {
        width: 40px;
        min-height: 48px;
      }
    }
    /* Lock badge embedded in date pill */
    .dl-lock-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.9rem;
      font-weight: 600;
      padding: 0 1rem;
      min-height: 52px;
      border-left: 1px solid var(--border-color);
      line-height: 1;
      white-space: nowrap;
      user-select: none;
      transition: background 0.15s, color 0.15s;
    }
    .dl-lock-badge .dl-lock-icon { width: 15px; height: 15px; flex-shrink: 0; }
    .dl-lock-badge.unlocked { color: #22c55e; }
    .dl-lock-badge.locked { color: #f59e0b; background: rgba(245,158,11,0.07); }
    /* At sea / In port (left of date nav, same pill) */
    .dl-sea-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.9rem;
      font-weight: 600;
      padding: 0 1rem;
      min-height: 52px;
      border-right: 1px solid var(--border-color);
      line-height: 1.15;
      white-space: nowrap;
      user-select: none;
      transition: background 0.15s, color 0.15s, opacity 0.15s;
    }
    .dl-sea-status-badge .dl-sea-icon {
      width: 1.25rem;
      height: 1.25rem;
      flex-shrink: 0;
    }
    .dl-sea-status-badge.at-sea { color: #22c55e; }
    .dl-sea-status-badge.in-port { color: #f59e0b; background: rgba(245, 158, 11, 0.07); }
    .dl-timezone-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.42rem;
      font-size: 0.86rem;
      font-weight: 600;
      padding: 0 0.9rem;
      min-height: 52px;
      border-right: 1px solid var(--border-color);
      line-height: 1;
      white-space: nowrap;
      color: var(--text-secondary);
      user-select: none;
      background: color-mix(in oklab, var(--bg-secondary) 82%, transparent);
    }
    .dl-timezone-badge .dl-timezone-icon { width: 14px; height: 14px; flex-shrink: 0; }
    .dl-timezone-badge.dl-timezone-badge--interactive {
      cursor: pointer;
    }
    .dl-timezone-badge.dl-timezone-badge--interactive:hover {
      color: var(--text-primary);
      background: color-mix(in oklab, var(--primary) 14%, var(--bg-secondary));
    }
    .dl-timezone-badge.dl-timezone-badge--interactive:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
    .dl-sea-status-badge.dl-sea-clickable { cursor: pointer; }
    .dl-sea-status-badge.dl-sea-clickable:hover { opacity: 0.85; }
    .dl-lock-badge.dl-lock-clickable { cursor: pointer; }
    .dl-lock-badge.dl-lock-clickable:hover { opacity: 0.75; }
    .dl-lock-section { display: none; }
    #deck-logbook-lock-toggle-btn { display: none !important; }
    .dl-locked-banner {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.85rem 1.25rem;
      background: rgba(245, 158, 11, 0.08);
      border: 1px solid rgba(245, 158, 11, 0.25);
      color: var(--text-primary);
      font-size: 0.875rem;
      line-height: 1.5;
    }
    .dl-locked-banner svg {
      width: 16px; height: 16px; flex-shrink: 0;
      margin-top: 0.1rem; color: #f59e0b;
    }
    /* Section cards */
    .dl-section {
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-card);
      overflow: hidden;
      margin-bottom: 1rem;
    }
    .dl-section-header {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.875rem 1.25rem;
      border-bottom: 1px solid var(--border-color);
      background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);
    }
    .dl-section-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(14, 165, 233, 0.12);
      color: var(--primary);
      flex-shrink: 0;
    }
    .dl-section-icon svg {
      width: 14px;
      height: 14px;
    }
    .dl-section-title {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }
    .dl-section-body {
      padding: 1.25rem;
    }
    .dl-section-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .dl-section-row > .dl-section {
      margin-bottom: 0;
      min-width: 0;
    }
    @media (max-width: 960px) {
      .dl-section-row {
        grid-template-columns: 1fr;
      }
      .dl-section-row > .dl-section {
        margin-bottom: 1rem;
      }
      .dl-section-row > .dl-section:last-child {
        margin-bottom: 0;
      }
    }
    .dl-stability-form-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.65rem 0.75rem;
      margin-bottom: 0.75rem;
    }
    .dl-stability-form-grid .span-2 {
      grid-column: span 2;
    }
    .dl-stability-form-grid .span-3 {
      grid-column: 1 / -1;
    }
    .dl-stability-field label {
      display: block;
      font-size: 0.7rem;
      color: var(--text-secondary);
      margin-bottom: 0.2rem;
      font-weight: 500;
    }
    .dl-stability-field input,
    .dl-stability-field select,
    .dl-stability-field textarea {
      width: 100%;
      box-sizing: border-box;
    }
    .dl-stability-record {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.65rem 0.75rem;
      margin-bottom: 0.5rem;
      background: var(--bg-secondary);
    }
    .dl-stability-record:last-child {
      margin-bottom: 0;
    }
    .dl-stability-record-meta {
      font-size: 0.8125rem;
      color: var(--text-primary);
      line-height: 1.45;
    }
    .dl-stability-record-sub {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }
    #deck-logbook-night-orders-section {
      display: none;
      position: sticky;
      top: 0;
      z-index: 25;
      margin-bottom: 1rem;
    }
    #deck-logbook-night-orders-section.dl-night-orders-visible {
      display: block;
    }
    #deck-logbook-night-orders-publish-wrap {
      display: none;
      margin-bottom: 1rem;
    }
    #deck-logbook-night-orders-publish-wrap.dl-night-orders-publish-visible {
      display: block;
    }
    .dl-night-orders-card {
      border: 1px solid rgba(245, 158, 11, 0.35);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    }
    .dl-night-orders-body {
      font-size: 0.875rem;
      line-height: 1.55;
      white-space: pre-wrap;
      color: var(--text-primary);
      background: var(--bg-secondary);
      border-radius: 8px;
      padding: 0.75rem 0.85rem;
      border: 1px solid var(--border-color);
      max-height: 12rem;
      overflow-y: auto;
    }
    .dl-night-orders-meta {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-bottom: 0.65rem;
    }
    .dl-night-orders-ack-list {
      margin-top: 0.85rem;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .dl-night-orders-ack-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.45rem 0.55rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      font-size: 0.8125rem;
    }
    .dl-night-orders-ack-row.is-pending {
      border-color: rgba(245, 158, 11, 0.35);
    }
    .dl-night-orders-ack-row.is-done {
      border-color: rgba(34, 197, 94, 0.35);
    }
    .dl-night-orders-ack-signature {
      max-height: 36px;
      max-width: 120px;
      object-fit: contain;
      background: #fff;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      padding: 2px 4px;
    }
    .dl-stability-trim-display {
      display: flex;
      align-items: center;
      min-height: 2.25rem;
      padding: 0.35rem 0.5rem;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      font-size: 0.875rem;
      color: var(--text-secondary);
    }
    .dl-stability-trim-display.has-value {
      color: var(--text-primary);
      font-weight: 500;
    }
    .dl-signature-canvas-wrap {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: #fff;
      touch-action: none;
    }
    .dl-signature-canvas-wrap canvas {
      display: block;
      width: 100%;
      cursor: crosshair;
    }
    /* + button in section header */
    .dl-add-entry-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: rgba(14, 165, 233, 0.1);
      color: var(--primary);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
      flex-shrink: 0;
    }
    .dl-add-entry-btn svg {
      width: 16px;
      height: 16px;
    }
    .dl-add-entry-btn:hover {
      background: rgba(14, 165, 233, 0.2);
      border-color: var(--primary);
      transform: scale(1.08);
    }
    .dl-add-entry-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }
    .dl-entries-sort-btn {
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0.35rem 0.65rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-secondary);
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .dl-entries-sort-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(14, 165, 233, 0.08);
    }
    .dl-entry-row--expandable {
      cursor: pointer;
    }
    .dl-entry-row--expandable:hover td {
      background: rgba(14, 165, 233, 0.04);
    }
    .dl-entry-details-cell-inner {
      display: flex;
      align-items: flex-start;
      gap: 0.35rem;
      min-width: 0;
    }
    .dl-entry-chevron {
      display: inline-flex;
      flex-shrink: 0;
      margin-top: 0.1rem;
      color: var(--text-muted);
      transition: transform 0.15s ease;
    }
    .dl-entry-chevron svg {
      width: 14px;
      height: 14px;
    }
    .dl-entry-chevron.open {
      transform: rotate(90deg);
    }
    .dl-entry-preview {
      min-width: 0;
      font-size: 0.875rem;
      line-height: 1.4;
    }
    .dl-entry-expand-row td {
      padding: 0 !important;
      border-top: none !important;
      vertical-align: top;
    }
    .dl-entry-expand-body {
      padding: 0.65rem 1rem 0.85rem 1.25rem;
      background: rgba(0, 0, 0, 0.15);
      font-size: 0.84rem;
      line-height: 1.45;
      color: var(--text-primary);
      border-bottom: 1px solid var(--border-color);
    }
    .dl-entry-expand-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
      gap: 0.5rem 1.35rem;
      width: 100%;
      box-sizing: border-box;
    }
    @media (min-width: 900px) {
      .dl-entry-expand-grid {
        grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
      }
    }
    .dl-entry-expand-grid .dl-entry-line {
      margin-bottom: 0;
      min-width: 0;
      word-break: break-word;
    }
    .dl-entry-line {
      margin-bottom: 0.35rem;
    }
    .dl-entry-line:last-child {
      margin-bottom: 0;
    }
    .dl-entry-fld-label {
      color: var(--text-muted);
      font-weight: 500;
    }
    .deck-logbook-position-input.dl-position-invalid {
      border-color: var(--danger) !important;
      box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
    }
    .deck-logbook-position-input.dl-position-valid:not(:focus) {
      border-color: #16a34a;
    }
    .dl-position-feedback {
      font-size: 0.75rem;
      margin-top: 0.25rem;
      line-height: 1.35;
    }
    /* Entry modal – picker + form views */
    .dl-entry-modal .modal {
      max-width: 520px;
      display: flex;
      flex-direction: column;
      max-height: 90vh;
    }
    .dl-entry-modal .modal-body {
      overflow-y: auto;
      padding: 0;
    }
    .dl-picker-search {
      padding: 0.875rem 1.25rem 0.5rem;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      background: var(--bg-card);
      z-index: 1;
    }
    .dl-picker-search-wrap {
      position: relative;
    }
    .dl-picker-search-wrap svg {
      position: absolute;
      left: 0.65rem;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      color: var(--text-muted);
      pointer-events: none;
    }
    .dl-picker-search-wrap input {
      width: 100%;
      padding: 0.55rem 0.875rem 0.55rem 2.2rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: 0.875rem;
      outline: none;
      box-sizing: border-box;
    }
    .dl-picker-search-wrap input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(14,165,233,0.15);
    }
    .dl-picker-list {
      overflow-y: auto;
      max-height: 340px;
      padding: 0.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .dl-picker-item {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.7rem 0.875rem;
      border-radius: 10px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
      background: transparent;
      width: 100%;
      text-align: left;
    }
    .dl-picker-item:hover {
      background: rgba(14,165,233,0.07);
      border-color: rgba(14,165,233,0.25);
    }
    .dl-picker-item-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      flex-shrink: 0;
      background: rgba(14,165,233,0.1);
      color: var(--primary);
    }
    .dl-picker-item-icon.note {
      background: rgba(34,197,94,0.1);
      color: #22c55e;
    }
    .dl-picker-item-icon svg { width: 16px; height: 16px; }
    .dl-picker-item-name {
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--text-primary);
      line-height: 1.3;
    }
    .dl-picker-item-sub {
      font-size: 0.78rem;
      color: var(--text-secondary);
      margin-top: 0.1rem;
    }
    .dl-picker-empty {
      padding: 1.5rem;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.875rem;
    }
    .dl-entry-form-view {
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.875rem;
    }
    .dl-entry-form-back {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.8rem;
      color: var(--primary);
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
    }
    .dl-entry-form-back:hover { text-decoration: underline; }
    .dl-entry-type-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.78rem;
      font-weight: 600;
      padding: 0.25rem 0.7rem;
      border-radius: 20px;
      background: rgba(14,165,233,0.1);
      color: var(--primary);
    }
      display: grid;
      grid-template-columns: minmax(200px, 260px) 1fr;
      gap: 0.75rem;
      align-items: start;
    }
    .dl-entry-form .dl-form-full {
      grid-column: 1 / -1;
    }
    .dl-entry-form .dl-submit-row {
      grid-column: 1 / -1;
      display: flex;
      justify-content: flex-end;
    }
    /* Tank form */
    .dl-tank-form {
      display: grid;
      grid-template-columns: minmax(180px, 240px) 130px 110px 1fr auto;
      gap: 0.75rem;
      align-items: end;
    }
    /* Tank diagram — section header: title + type + save stay on one row */
    .dl-tank-levels-section-header {
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.75rem;
    }
    .dl-tank-levels-title-wrap {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      min-width: 0;
      flex-shrink: 1;
    }
    .dl-tank-levels-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dl-tank-levels-header-actions {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: nowrap;
      flex-shrink: 0;
      margin-left: auto;
    }
    .dl-tank-levels-type-select {
      min-width: 10rem;
      max-width: 14rem;
      padding: 0.4rem 0.65rem;
      font-size: 0.8125rem;
    }
    .tank-diagram-wrapper {
      margin-bottom: 1rem;
    }
    .tank-fwd-aft-labels {
      display: flex;
      justify-content: space-between;
      padding: 0 0.25rem;
      margin-bottom: 0.3rem;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .tank-fwd-aft-stack-note {
      display: none;
      width: 100%;
      text-align: center;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: none;
      color: var(--text-muted);
    }
    .tank-fwd-aft-inline {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .tank-vessel-outline {
      background: var(--bg-secondary);
      border: 1.5px solid var(--border-color);
      border-radius: 8px 28px 28px 8px / 8px 50% 50% 8px;
      padding: 0.75rem 2.5rem 0.75rem 0.75rem;
      overflow: hidden;
    }
    .tank-vessel-inner {
      display: flex;
      align-items: stretch;
      gap: 0.5rem;
    }
    .tank-side-labels {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      min-height: 4rem;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      flex-shrink: 0;
      gap: 0.5rem;
    }
    /* Narrow screens: stack fore–aft groups vertically; FWD groups first (bow at top) */
    @media (max-width: 720px) {
      .tank-fwd-aft-labels .tank-fwd-aft-inline {
        display: none;
      }
      .tank-fwd-aft-stack-note {
        display: block;
        font-size: 0.68rem;
        margin-bottom: 0.1rem;
      }
      /* Bow (rounded end) at top — mirror of desktop right-side rounding */
      .tank-vessel-outline {
        padding: 2.25rem 0.65rem 0.65rem 0.65rem;
        border-radius: 28px 28px 8px 8px / 50% 50% 8px 8px;
      }
      .tank-side-labels {
        display: none;
      }
      .tank-columns {
        flex-direction: column-reverse;
        overflow-x: visible;
        gap: 0.5rem;
      }
      .tank-group-col {
        min-width: 0;
        width: 100%;
        flex: 0 0 auto;
      }
    }
    .tank-columns {
      display: flex;
      gap: 0.4rem;
      flex: 1;
      overflow-x: auto;
    }
    .tank-group-col {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      min-width: 100px;
      flex: 1;
    }
    .tank-cell {
      position: relative;
      overflow: hidden;
      /* Very faint light blue card tint (works on dark + light) */
      background: var(--bg-card);
      background: color-mix(in srgb, var(--bg-card) 88%, rgba(125, 211, 252, 0.35));
      border: 1.5px solid var(--border-color);
      border-radius: 6px;
      padding: 0;
      flex: 1;
      min-height: 0;
      transition: border-color 0.15s;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    html[data-theme="light"] .tank-cell {
      background: var(--bg-card);
      background: color-mix(in srgb, var(--bg-card) 82%, rgba(186, 230, 253, 0.55));
    }
    .tank-cell-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0%;
      pointer-events: none;
      z-index: 0;
      border-radius: 4px;
      background: linear-gradient(
        90deg,
        rgba(56, 189, 248, 0.22),
        rgba(14, 165, 233, 0.38)
      );
      transition: width 0.2s ease;
    }
    html[data-theme="light"] .tank-cell-fill {
      background: linear-gradient(
        90deg,
        rgba(56, 189, 248, 0.18),
        rgba(14, 165, 233, 0.32)
      );
    }
    .tank-cell-content {
      position: relative;
      z-index: 1;
      padding: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }
    .tank-cell:hover { border-color: rgba(14, 165, 233, 0.5); }
    .tank-cell.port  { border-left: 3px solid #ef4444; }
    .tank-cell.stbd  { border-left: 3px solid #22c55e; }
    .tank-cell.centre { border-left: 3px solid #8b5cf6; }
    .tank-cell.centre-port { border-left: 3px solid #f97316; }
    .tank-cell.centre-stbd { border-left: 3px solid #84cc16; }
    .tank-cell-row {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      width: 100%;
      min-width: 0;
    }
    .tank-cell-name {
      font-size: 0.65rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 0 1 38%;
      min-width: 0;
    }
    .tank-cell-form {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      flex: 1;
      min-width: 0;
    }
    .tank-cell-input {
      flex: 1;
      min-width: 0;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-primary);
      font-size: 0.8rem;
      padding: 0.25rem 0.35rem;
      font-family: inherit;
      width: 100%;
    }
    .tank-cell-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    /* Deck logbook tank levels: plain text field — no stepper arrows */
    .tank-cell-input[type="number"] {
      -moz-appearance: textfield;
      appearance: textfield;
    }
    .tank-cell-input[type="number"]::-webkit-outer-spin-button,
    .tank-cell-input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .dl-tank-levels-save-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: rgba(14, 165, 233, 0.12);
      color: var(--primary);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      flex-shrink: 0;
      padding: 0;
    }
    .dl-tank-levels-save-btn svg {
      width: 16px;
      height: 16px;
    }
    .dl-tank-levels-save-btn:hover:not(:disabled) {
      background: rgba(14, 165, 233, 0.22);
      border-color: var(--primary);
    }
    .dl-tank-levels-save-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .tank-diagram-total {
      display: flex;
      justify-content: flex-end;
      align-items: baseline;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--border-color);
      font-size: 0.8125rem;
    }
    .tank-diagram-total-label {
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 0.7rem;
    }
    .tank-diagram-total-value {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: var(--text-primary);
    }
    .tank-diagram-total-note {
      font-weight: 400;
      font-size: 0.7rem;
      color: var(--text-muted);
    }
    /* Entry/record table */
    .dl-table-wrap {
      overflow-x: auto;
      border-radius: 8px;
      border: 1px solid var(--border-color);
    }
    .dl-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
    }
    .dl-table thead th {
      padding: 0.6rem 0.875rem;
      text-align: left;
      font-size: 0.725rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      background: rgba(255,255,255,0.03);
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
    }
    .dl-table tbody td {
      padding: 0.65rem 0.875rem;
      vertical-align: top;
      color: var(--text-primary);
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    html[data-theme="light"] .dl-table tbody td {
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    html[data-theme="light"] .dl-table thead th {
      background: rgba(0,0,0,0.02);
    }
    .dl-table tbody tr:last-child td {
      border-bottom: none;
    }
    .dl-table tbody tr:hover td {
      background: rgba(255,255,255,0.025);
    }
    html[data-theme="light"] .dl-table tbody tr:hover td {
      background: rgba(0,0,0,0.02);
    }
    .dl-time-chip {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--primary);
      background: rgba(14, 165, 233, 0.1);
      border-radius: 6px;
      padding: 0.1rem 0.4rem;
    }
    .dl-by-chip {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }
    /* General entries table: give Details more room, tighten other columns */
    #page-deck-logbook .dl-table-entries {
      table-layout: fixed;
    }
    #page-deck-logbook .dl-table-entries th:nth-child(1),
    #page-deck-logbook .dl-table-entries td:nth-child(1) {
      width: 3.75rem;
      max-width: 4rem;
      padding-left: 0.65rem;
      padding-right: 0.35rem;
    }
    #page-deck-logbook .dl-table-entries th:nth-child(2),
    #page-deck-logbook .dl-table-entries td:nth-child(2) {
      width: 11%;
      max-width: 9rem;
      padding-left: 0.45rem;
      padding-right: 0.45rem;
    }
    #page-deck-logbook .dl-table-entries th:nth-child(3),
    #page-deck-logbook .dl-table-entries td:nth-child(3) {
      width: auto;
      min-width: 0;
    }
    #page-deck-logbook .dl-table-entries th:nth-child(4),
    #page-deck-logbook .dl-table-entries td:nth-child(4) {
      width: 7.25rem;
      max-width: 8.5rem;
      padding-left: 0.45rem;
      padding-right: 0.45rem;
    }
    #page-deck-logbook .dl-table-entries .dl-by-chip {
      font-size: 0.75rem;
    }
    #page-deck-logbook .dl-table-entries th:nth-child(5),
    #page-deck-logbook .dl-table-entries td:nth-child(5) {
      width: 4.5rem;
      padding-left: 0.35rem;
      padding-right: 0.65rem;
    }
    .dl-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      padding: 2rem 1rem;
      color: var(--text-muted);
      font-size: 0.875rem;
      text-align: center;
    }
    .dl-empty svg {
      width: 32px;
      height: 32px;
      opacity: 0.35;
    }
    .dl-reminder-item {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      padding: 0.6rem 0.75rem;
      border: 1px solid rgba(245, 158, 11, 0.3);
      border-radius: 8px;
      background: rgba(245, 158, 11, 0.07);
      font-size: 0.85rem;
      margin-top: 0.5rem;
      cursor: pointer;
      text-align: left;
      width: 100%;
      font-family: inherit;
      color: inherit;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .dl-reminder-item:hover,
    .dl-reminder-item:focus-visible {
      background: rgba(245, 158, 11, 0.14);
      border-color: rgba(245, 158, 11, 0.5);
      outline: none;
    }
    .dl-reminder-item svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      margin-top: 0.15rem;
      color: #f59e0b;
    }
    .dl-reminder-action {
      display: inline-block;
      margin-left: 0.35rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: #f59e0b;
      white-space: nowrap;
    }
    .dl-field-prefill-hint {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-top: 0.25rem;
      line-height: 1.35;
    }
    .dl-field-prefill-hint button {
      font: inherit;
      color: var(--primary);
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      text-decoration: underline;
    }
    .dl-activity-item {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    html[data-theme="light"] .dl-activity-item {
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .dl-activity-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .dl-activity-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--primary);
      flex-shrink: 0;
      margin-top: 0.35rem;
    }
    .dl-activity-label {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      margin-bottom: 0.2rem;
    }
    .dl-activity-title {
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--text-primary);
    }
    /* responsive */
    .deck-logbook-date-nav {
      display: none; /* replaced by .dl-nav-bar */
    }
    .deck-logbook-entry-grid {
      display: grid;
      grid-template-columns: minmax(200px, 280px) 1fr;
      gap: 0.5rem;
      align-items: end;
    }
    .deck-logbook-entry-grid > button {
      grid-column: 1 / -1;
      justify-self: end;
    }
    #deck-logbook-template-fields-builder {
      display: grid;
      gap: 0.65rem;
    }
    .deck-template-field-row {
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
      padding: 0.7rem;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }
    .deck-template-field-row:hover {
      border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color));
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      transform: translateY(-1px);
    }
    .deck-template-field-row .deck-template-advanced {
      display: none;
    }
    .deck-template-field-row.advanced-open .deck-template-advanced {
      display: grid;
    }
    .deck-template-field-row.is-dragging {
      opacity: 0.65;
      transform: scale(0.995);
    }
    .deck-template-field-row.drag-over-before {
      border-top: 2px solid var(--primary);
    }
    .deck-template-field-row.drag-over-after {
      border-bottom: 2px solid var(--primary);
    }
    .deck-template-field-row--calc-locked {
      border-color: rgba(59, 130, 246, 0.35);
      background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
    }
    .deck-template-field-row--calc-locked:hover {
      transform: none;
    }
    .deck-template-field-calc-lock {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--primary);
      cursor: help;
      white-space: nowrap;
    }
    .deck-template-field-calc-lock svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
    }
    .deck-template-field-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .deck-template-field-meta {
      font-size: 0.75rem;
      color: var(--text-secondary);
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .deck-template-field-advanced-toggle {
      border: none;
      background: transparent;
      color: var(--primary);
      cursor: pointer;
      font-size: 0.78rem;
      padding: 0.15rem 0.25rem;
    }
    .deck-template-field-advanced-toggle:hover {
      text-decoration: underline;
    }
    .deck-template-field-drag-handle {
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-secondary);
      border-radius: 8px;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      user-select: none;
      font-size: 0.95rem;
      line-height: 1;
    }
    .deck-template-field-drag-handle:active {
      cursor: grabbing;
    }
    .deck-logbook-ballast-grid {
      display: none; /* replaced by .dl-tank-form */
    }
    #page-deck-logbook .card,
    #page-deck-logbook-config .card {
      overflow: hidden;
    }
    #page-deck-logbook .crew-table th,
    #page-deck-logbook .crew-table td,
    #page-deck-logbook-config .crew-table th,
    #page-deck-logbook-config .crew-table td,
    #vessel-ballast-tanks-list td,
    #vessel-ballast-tanks-list th {
      vertical-align: middle;
    }
    #page-deck-logbook-config .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      padding: 0;
      min-width: 2rem;
      border-radius: 6px;
    }
    #page-deck-logbook-config .btn-icon svg { width: 1rem; height: 1rem; }
    #page-deck-logbook-config .btn-icon.btn-icon-delete { color: var(--danger); }
    #page-deck-logbook-config .btn-icon.btn-icon-delete:hover { background: rgba(239, 68, 68, 0.15); }
    #page-deck-logbook-config .crew-table th:last-child,
    #page-deck-logbook-config .crew-table td:last-child {
      text-align: right;
      white-space: nowrap;
      vertical-align: middle;
    }
    #page-deck-logbook-config .crew-table td:last-child .dl-config-row-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.25rem;
      vertical-align: middle;
    }
    #page-crew-ranks .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      padding: 0;
      min-width: 2rem;
      border-radius: 6px;
    }
    #page-crew-ranks .btn-icon svg { width: 1rem; height: 1rem; }
    #page-crew-ranks .btn-icon.btn-icon-delete { color: var(--danger); }
    #page-crew-ranks .btn-icon.btn-icon-delete:hover { background: rgba(239, 68, 68, 0.15); }
    #page-crew-ranks .crew-table td:last-child {
      white-space: nowrap;
    }
    #page-crew-ranks .crew-table td:last-child .btn-icon + .btn-icon {
      margin-left: 0.25rem;
    }
    @media (max-width: 1024px) {
      .deck-logbook-config-grid {
        grid-template-columns: 1fr !important;
      }
    }
    @media (max-width: 480px) {
      .deck-logbook-date-nav #deck-logbook-date-label {
        width: 100%;
      }
      .deck-logbook-date-nav {
        grid-template-columns: 40px 1fr 40px;
      }
      .deck-logbook-date-nav > button {
        width: 40px;
        min-width: 40px;
      }
      #page-deck-logbook .page-subtitle,
      #page-deck-logbook-config .page-subtitle {
        font-size: 0.82rem;
      }
      #page-deck-logbook .card-header,
      #page-deck-logbook-config .card-header {
        padding: 0.75rem 0.875rem;
      }
      #page-deck-logbook .card-title,
      #page-deck-logbook-config .card-title {
        font-size: 0.95rem;
      }
      #vessel-ballast-tanks-list .btn-sm {
        display: block;
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 0.35rem;
      }
      #vessel-ballast-tanks-list .btn-sm:last-child {
        margin-bottom: 0;
      }
      #ballast-tank-modal .form-row {
        grid-template-columns: 1fr !important;
      }
      .deck-template-field-row .form-row {
        grid-template-columns: 1fr !important;
      }
    }
    @media (max-width: 360px) {
      #page-deck-logbook .page-title,
      #page-deck-logbook-config .page-title,
      #page-deck-logbook .dl-date-input--hero {
        font-size: 1.3rem;
      }
      #page-deck-logbook .dl-date-input--hero {
        min-width: 8.5rem;
      }
      #page-deck-logbook .card-body,
      #page-deck-logbook-config .card-body {
        padding: 0.75rem;
      }
      .deck-logbook-entry-grid,
      .deck-logbook-ballast-grid {
        gap: 0.4rem;
      }
    }

    /* Mobile chrome: phones + tablet portrait — burger header, no category bar, no vessel strip */
    @media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
      .mobile-header-shell {
        display: block;
      }
      .mobile-header-vessel-wrap,
      .mobile-header-vessel-wrap.is-visible {
        display: none !important;
      }
      .mobile-header-config-cog {
        display: inline-flex;
      }
      .app-container[data-nav-layout="header"] #category-header-vessel-wrap {
        display: none !important;
      }
      .app-container[data-nav-layout="header"] .category-header-bar {
        display: none !important;
      }
      .app-container[data-nav-layout="header"] .category-header-stack {
        position: static;
        box-shadow: none;
      }
      .app-container[data-nav-layout="sidebar"] .main-content,
      .app-container[data-nav-layout="header"] .main-content {
        padding-top: calc(56px + 0.75rem);
      }
    }

    /* Tablet landscape: desktop-style header (inline vessel in nav row, help in cog) */
    @media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
      .mobile-header-shell {
        display: none !important;
      }
      .mobile-header-vessel-wrap {
        display: none !important;
      }
      .app-container[data-nav-layout="header"] .category-header-bar {
        display: flex !important;
      }
      .app-container[data-nav-layout="header"] .category-header-right .category-header-item[data-category="help"] {
        display: none !important;
      }
      .config-dropdown-help-section {
        display: block;
      }
      .app-container[data-nav-layout="sidebar"] .main-content,
      .app-container[data-nav-layout="header"] .main-content {
        padding-top: var(--space-page-top, 0.65rem);
      }
    }
    @media (pointer: coarse) and (hover: none) and (min-width: 769px) {
      .app-container[data-nav-layout="header"] .category-header-right .category-header-item[data-category="help"] {
        display: none !important;
      }
      .config-dropdown-help-section {
        display: block;
      }
    }

    /* Tablet portrait: slide-out sidebar (same as phone) */
    @media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
      .burger-btn {
        display: flex;
        padding: 0.45rem;
      }
      .sidebar-overlay {
        display: block;
        pointer-events: none;
      }
      .sidebar-overlay.active {
        pointer-events: auto;
      }
      .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        top: 0;
        left: 0;
        width: min(88vw, 320px);
        padding: 1rem;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
      }
      .sidebar.open {
        transform: translateX(0);
      }
      .main-content {
        margin-left: 0;
      }
      .sidebar-edge-collapse {
        display: none;
      }
    }

    @media (max-width: 768px) {
      :root {
        --mobile-tap-target: 42px;
      }

      /* Match negative margins to main-content padding so sticky header does not widen the page */
      .category-header-bar {
        margin: calc(-1 * var(--space-page-top, 0.65rem)) calc(-1 * var(--space-page, 1rem)) 0.5rem calc(-1 * var(--space-page, 1rem));
        padding-left: var(--space-page, 1rem);
        padding-right: var(--space-page, 1rem);
      }

      /* Drill config (same --bp-md breakpoint) */
      .drill-config-tab-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
      }
      .drill-config-tab-btn span:first-child {
        margin-right: 0.25rem;
      }
      .drill-config-vessel-select {
        min-width: 150px;
        font-size: 0.8125rem;
      }
      .deck-logbook-entry-grid,
      .deck-logbook-ballast-grid {
        grid-template-columns: 1fr;
      }
      .deck-logbook-date-nav {
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        gap: 0.5rem;
      }
      .deck-logbook-date-nav #deck-logbook-date {
        width: 100% !important;
      }
      .deck-logbook-date-nav #deck-logbook-date-label {
        grid-column: 1 / -1;
      }
      .deck-logbook-entry-grid > button,
      .deck-logbook-ballast-grid > button {
        width: 100%;
      }
      .deck-logbook-date-nav > button {
        width: 44px;
        min-width: 44px;
        padding: 0.5rem 0;
      }
      #page-deck-logbook .card-body,
      #page-deck-logbook-config .card-body {
        padding: 0.875rem;
      }
      #page-deck-logbook .crew-table th,
      #page-deck-logbook .crew-table td,
      #vessel-ballast-tanks-list td,
      #vessel-ballast-tanks-list th {
        font-size: 0.8rem;
      }
      #vessel-ballast-tanks-list td:last-child,
      #vessel-ballast-tanks-list th:last-child {
        white-space: nowrap;
      }
      #vessel-ballast-tanks-list .btn-sm {
        padding: 0.35rem 0.5rem;
      }
      .deck-logbook-date-nav button,
      .deck-logbook-entry-grid > button,
      .deck-logbook-ballast-grid > button {
        line-height: 1.2;
      }
      .deck-logbook-config-grid {
        grid-template-columns: 1fr !important;
      }
      /* Deck Logbook redesign – mobile */
      .dl-entry-form {
        grid-template-columns: 1fr;
      }
      .dl-entry-form .dl-submit-row .btn {
        width: 100%;
      }
      .dl-tank-form {
        grid-template-columns: 1fr 1fr;
      }
      .dl-tank-form > *:nth-child(4) {
        grid-column: 1 / -1;
      }
      .dl-tank-form > *:last-child {
        grid-column: 1 / -1;
      }
      .tank-group-col {
        min-width: 80px;
      }
      .tank-cell-name {
        font-size: 0.6rem;
      }
      .dl-tank-levels-type-select {
        min-width: 7rem;
        max-width: 11rem;
      }
      .dl-lock-section {
        flex-wrap: wrap;
      }
      .dl-nav-bar {
        flex-wrap: wrap;
      }
      .mobile-header-shell {
        display: block;
      }
      .mobile-header {
        height: 56px;
        padding: 0 0.75rem;
      }
      .mobile-header .logo-icon {
        width: 30px;
        height: 30px;
      }
      .mobile-header .logo-text {
        font-size: 0.95rem;
      }
      .mobile-header-center .logo {
        gap: 0.45rem;
      }
      .mobile-header-right.header-actions {
        gap: 0.35rem;
      }

      /* Header category bar stays visible on tablet portrait; phones use mobile vessel strip */
      .burger-btn {
        display: flex;
        padding: 0.45rem;
      }

      .sidebar-overlay {
        display: block;
        pointer-events: none;
      }

      .sidebar-overlay.active {
        pointer-events: auto;
      }

      /* Sidebar becomes slide-out */
      .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        top: 0;
        left: 0;
        width: min(88vw, 320px);
        padding: 1rem;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
      }

      .sidebar.open {
        transform: translateX(0);
      }

      /* Main content adjustments */
      .main-content {
        margin-left: 0;
        padding: 1rem;
        padding-top: calc(56px + 0.75rem);
        overflow-x: hidden;
      }

      .sidebar .nav-item {
        font-size: 0.9rem;
        line-height: 1.25;
        padding: 0.65rem 0.7rem;
      }
      .sidebar .nav-icon {
        width: 18px;
        height: 18px;
      }
      .sidebar .nav-section {
        margin-bottom: 1rem;
      }
      .sidebar .nav-section-title {
        font-size: 0.7rem;
        margin-bottom: 0.55rem;
      }
      .notification-bell-btn {
        padding: 0.4rem;
      }
      .mobile-header .burger-btn,
      .mobile-header .notification-bell-btn,
      .mobile-header-config-cog button {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .btn,
      .form-input,
      .form-select,
      .search-bar,
      input[type="text"],
      input[type="search"],
      input[type="date"],
      input[type="email"],
      input[type="number"],
      textarea.form-input,
      select {
        min-height: var(--mobile-tap-target);
      }
      /* 16px+ on inputs prevents iOS auto-zoom and layout “wrong scale” feel */
      .form-input,
      .form-select,
      .search-bar,
      input[type="text"],
      input[type="search"],
      input[type="date"],
      input[type="email"],
      input[type="number"],
      textarea.form-input,
      select {
        font-size: 16px;
      }
      .btn {
        padding: 0.55rem 0.9rem;
      }
      .btn-sm {
        min-height: 36px;
        padding: 0.4rem 0.7rem;
        font-size: 0.76rem;
      }
      .form-input,
      .form-select,
      input[type="text"],
      input[type="search"],
      input[type="date"],
      input[type="email"],
      input[type="number"] {
        line-height: 1.35;
      }

      /* Stats grid */
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
      }

      .stat-card {
        padding: 1rem;
      }

      .stat-value {
        font-size: 1.5rem;
      }

      .stat-label {
        font-size: 0.75rem;
      }

      /* Page header */
      .page-header {
        margin-bottom: 1.5rem;
      }

      .page-title {
        font-size: 1.5rem;
      }

      /* Cards */
      .card-header {
        padding: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .card-body {
        padding: 1rem;
      }

      /* Tables - make scrollable */
      .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .crew-table {
        min-width: 520px;
      }
      
      #work-rest-violations .crew-table {
        min-width: 760px;
      }

      .crew-table th,
      .crew-table td {
        padding: 0.75rem;
        font-size: 0.875rem;
      }

      /* Filter pills */
      .filter-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
      }

      .filter-pill {
        flex-shrink: 0;
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
      }

      /* Search bar */
      .search-bar {
        height: var(--mobile-tap-target, 42px);
        min-height: var(--mobile-tap-target, 42px);
        padding: 0 0.875rem;
      }

      #page-my-vessel-crew .my-vessel-crew-toolbar .search-bar {
        flex: 1 1 100%;
        max-width: none;
      }

      #page-vessel-certs .vessel-certs-toolbar .fdr-primary {
        width: 100%;
      }
      #page-vessel-certs .vessel-certs-toolbar .vessel-certs-search {
        flex: 1 1 auto;
        max-width: none;
      }

      /* Action menu: hide full-text buttons, show + toggle */
      .action-menu .action-menu-btn-full { display: none; }
      .action-menu-toggle { display: inline-flex; }

      /* Ensure fdr-trigger and action-menu toggle are same height as search bar */
      .fdr-trigger,
      .action-menu-toggle {
        min-height: var(--mobile-tap-target, 42px);
        height: var(--mobile-tap-target, 42px);
      }

      /* Page header action area wraps cleanly */
      .page-header-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: nowrap;
      }

      /* Page header: flex layout instead of absolute action overlap */
      .page-header:has(.page-header-actions),
      .page-header:has(> .action-menu) {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        position: static;
      }
      .page-header:has(.page-header-actions) > :first-child,
      .page-header:has(> .action-menu) > :first-child {
        min-width: 0;
        flex: 1 1 auto;
        padding-right: 0;
      }
      .page-header .page-header-actions,
      .page-header > .action-menu {
        position: static;
        top: auto;
        right: auto;
        flex-shrink: 0;
      }
      .page-header .page-header-actions .action-menu {
        position: static;
      }

      /* Top-right + toggle: anchor menu to the right so it opens left into the viewport */
      .page-header .action-menu-dropdown,
      .page-header-actions .action-menu-dropdown {
        right: 0;
        left: auto;
      }

      .btn-page-config .btn-config-label {
        display: none;
      }
      .btn-page-config {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
        min-width: var(--mobile-tap-target, 42px);
        justify-content: center;
      }

      /* Buttons */
      .btn { font-size: 0.875rem; }
      .btn-sm { font-size: 0.76rem; }

      /* Content grid */
      .content-grid {
        gap: 1rem;
      }
      .card-body > div[style*="display: flex"][style*="gap"] {
        flex-wrap: wrap;
      }
      .card-body .form-input[style*="min-width"],
      .card-body .form-select[style*="min-width"] {
        min-width: min(100%, 180px) !important;
      }
      #page-catering-config input[style*="min-width"],
      #page-catering-config select[style*="min-width"],
      #page-safety-dashboard input[style*="min-width"],
      #page-safety-dashboard select[style*="min-width"] {
        min-width: 0 !important;
        max-width: 100% !important;
      }
      #pms-equipment-list .form-input,
      #pms-equipment-list .form-select {
        min-width: 0;
      }
      #page-pms-equipment .pms-equipment-library-toolbar {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
      }
      #page-pms-equipment .pms-equipment-library-search {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
      }
      #page-pms-equipment .pms-equipment-library-card-header {
        align-items: flex-start;
      }
      #page-procurement .card-body > div[style*="grid-template-columns: 1fr 1fr 3fr auto auto"] {
        grid-template-columns: 1fr !important;
      }
      .pms-equipment-list-table {
        min-width: 760px;
      }
      .pms-equipment-list-table th {
        font-size: 0.8125rem;
      }
      .pms-equipment-list-table td {
        font-size: 0.8125rem;
      }
      .pms-equipment-card-list {
        display: grid;
        gap: 0.75rem;
      }
      /* Keep 2 columns on narrow screens to shorten card height */
      .pms-equipment-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .pms-equipment-view-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
      }
      .pms-equipment-view-two-col-grid {
        grid-template-columns: 1fr;
      }
      #pms-equipment-view-modal .modal {
        width: 100% !important;
        height: min(100dvh, 100vh) !important;
        max-height: min(100dvh, 100vh) !important;
      }
      #pms-equipment-view-modal .modal-header.pms-equipment-view-modal-header {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
      }
      #pms-equipment-view-modal .pms-equipment-view-toolbar {
        width: 100%;
      }
      #pms-equipment-view-modal .pms-equipment-view-toolbar .btn {
        min-height: 36px;
        padding: 0.4rem 0.6rem;
        font-size: 0.78rem;
      }
      #pms-equipment-view-modal .modal-body {
        padding: 0.75rem;
      }
      #pms-equipment-view-modal .pms-job-detail-section {
        padding: 0.75rem 0.85rem;
      }

      /* Group detail back button */
      #group-detail > div:first-child {
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      #group-detail h2 {
        font-size: 1.25rem;
        width: 100%;
        order: -1;
      }

      /* Alert items */
      .alert-item {
        padding: 0.75rem;
      }

      .alert-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
      }

      .alert-title {
        font-size: 0.875rem;
      }

      .alert-description {
        font-size: 0.75rem;
      }

      /* Compliance ring */
      .compliance-ring {
        width: 120px;
        height: 120px;
      }

      .compliance-percent {
        font-size: 1.5rem;
      }

      /* Modals: full width on small screens (override base max-width:500px + inline max-width) */
      .modal-overlay {
        align-items: stretch;
        justify-content: stretch;
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
      }
      .modal-overlay .modal:not(.help-modal-inner) {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0;
        max-height: min(100dvh, 100vh);
        transform: none;
        box-sizing: border-box;
      }
      .modal-overlay.active .modal:not(.help-modal-inner) {
        transform: none;
      }
      .modal-overlay .modal-content,
      #vendor-modal .modal-content,
      #category-modal .modal-content,
      #subcategory-modal .modal-content,
      #cost-entity-modal .modal-content,
      #category-approver-modal .modal-content,
      #address-modal .modal-content,
      #vendor-contract-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        border-radius: 0;
      }
      #edit-profile-modal .modal,
      #pms-proposal-modal .modal,
      #pms-execute-modal .modal {
        width: 100% !important;
        max-width: none !important;
      }
      #pms-execute-modal .modal-body {
        grid-template-columns: 1fr !important;
      }
      #fuel-bunker-modal .modal,
      #fuel-consumption-modal .modal,
      #fuel-storage-modal .modal,
      #fuel-type-modal .modal {
        width: 100% !important;
        max-width: none !important;
      }
      #enclosed-space-modal .modal {
        height: min(86vh, 760px) !important;
        min-height: min(86vh, 760px) !important;
        max-height: min(100dvh, 100vh) !important;
        overflow: hidden !important;
      }
      #internal-training-learner-modal .modal-content,
      #internal-training-course-modal .modal-content,
      #internal-training-unit-modal .modal-content,
      #internal-training-question-builder-modal .modal-content,
      #internal-training-add-unit-modal .modal-content {
        width: 100% !important;
        max-width: none !important;
        border-radius: 0;
      }
      #catering-edit-categories-modal,
      #catering-add-frequent-supplier-modal,
      #catering-add-supplier-to-port-modal,
      #catering-edit-supplier-at-port-modal {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
      }
      #catering-edit-categories-modal .modal-content,
      #catering-add-frequent-supplier-modal .modal-content,
      #catering-add-supplier-to-port-modal .modal-content,
      #catering-edit-supplier-at-port-modal .modal-content {
        width: 100% !important;
        max-width: none !important;
        max-height: min(100dvh, 100vh) !important;
        border-radius: 0;
        flex: 1;
        min-height: 0;
      }
      #help-modal .help-modal-inner {
        width: 100% !important;
        max-width: 100% !important;
        height: min(100dvh, 100vh) !important;
        max-height: min(100dvh, 100vh) !important;
        border-radius: 0;
      }
      .help-modal-layout {
        flex-direction: column;
        flex: 1;
        min-height: 0;
      }
      .help-modal-nav {
        flex: 0 0 auto;
        max-height: 36vh;
        overflow-y: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
      }
      .help-modal-content {
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }
      .help-manual-layout {
        border-radius: 0;
      }
      .help-manual-tree {
        flex: 0 0 180px;
        border-radius: 0;
      }

      .modal-header {
        padding: 1rem;
      }

      .modal-body {
        padding: 1rem;
      }

      /* Toast adjustments */
      .toast-container {
        top: 70px;
        left: 1rem;
        right: 1rem;
      }

      .toast {
        width: 100%;
      }

      /* Login adjustments */
      .login-container {
        padding: 1rem;
      }

      .login-card {
        padding: 1.5rem;
      }

      .login-title {
        font-size: 1.25rem;
      }

      /* Crew member display */
      .crew-member {
        gap: 0.5rem;
      }

      .crew-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
      }

      .crew-name {
        font-size: 0.875rem;
      }

      /* Cert pills */
      .cert-pills {
        gap: 0.25rem;
      }

      .cert-pill {
        padding: 0.2rem 0.4rem;
        font-size: 0.65rem;
      }

      /* Badge */
      .badge {
        padding: 0.2rem 0.5rem;
        font-size: 0.65rem;
      }
    }

    @media (max-width: 480px) {
      .mobile-header {
        height: 52px;
        padding: 0 0.5rem;
      }
      .app-container[data-nav-layout="header"] .main-content {
        padding-top: calc(52px + var(--tap-min, 44px) + 0.75rem);
      }
      .app-container[data-nav-layout="sidebar"] .main-content {
        padding-top: 72px;
      }
      .mobile-header .logo {
        gap: 0.35rem;
      }
      .mobile-header .logo-icon {
        width: 26px;
        height: 26px;
      }
      .mobile-header .logo-text {
        font-size: 0.88rem;
      }
      .app-container[data-nav-layout="header"] .category-header-bar {
        display: none !important;
      }
      .notification-bell-btn svg {
        width: 18px;
        height: 18px;
      }
      :root {
        --mobile-tap-target: 40px;
      }
      .sidebar {
        width: min(92vw, 280px);
        padding: 0.875rem;
      }
      .sidebar .nav-item {
        font-size: 0.86rem;
      }
      .sidebar .nav-section-title {
        font-size: 0.68rem;
      }

      .stats-grid {
        grid-template-columns: 1fr;
      }

      .page-title {
        font-size: 1.25rem;
      }

      .page-subtitle {
        font-size: 0.875rem;
      }

      /* Hide some columns on very small screens */
      .crew-table .hide-mobile {
        display: none;
      }

      .crew-table {
        min-width: 360px;
      }
      .pms-equipment-list-table {
        min-width: 640px;
      }
      .pms-equipment-card {
        padding: 0.5rem 0.55rem;
      }
      .pms-equipment-card-title {
        font-size: 1.02rem;
      }
      .pms-equipment-card-field-value {
        font-size: 0.8rem;
      }
      #pms-equipment-view-modal .modal {
        width: 100% !important;
        height: min(100dvh, 100vh) !important;
        max-height: min(100dvh, 100vh) !important;
      }
      .pms-equipment-card-actions .btn {
        width: 100%;
      }
      .card-header,
      .card-body {
        gap: 0.6rem;
      }

      /* Stack page header buttons */
      .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
      }

      .page-header .btn {
        width: 100%;
        justify-content: center;
      }
    }

    /* --bp-xs-compact (400px): tighter page padding (legacy 390px tier) */
    @media (max-width: 400px) {
      .main-content {
        padding: 0.75rem;
        padding-top: 68px;
      }
      .category-header-bar {
        margin: -0.75rem -0.75rem 1rem -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
      }
      .form-input,
      .form-select,
      input[type="text"],
      input[type="search"],
      input[type="date"],
      input[type="email"],
      input[type="number"],
      textarea.form-input,
      select {
        font-size: 16px;
      }
      .mobile-header-right.header-actions {
        gap: 0.25rem;
      }
      .sidebar .nav-item {
        padding: 0.6rem;
        font-size: 0.83rem;
      }
      #pms-equipment-view-modal .pms-equipment-view-toolbar .btn {
        width: 100%;
        justify-content: center;
      }
    }

    /* --bp-xs (360px): narrowest devices */
    @media (max-width: 360px) {
      .mobile-header .logo-text {
        display: none;
      }
      .sidebar {
        width: 94vw;
      }
    }

    /* ── Global font floor ───────────────────────────────────────────────── */
    /* Raise body-copy text to a minimum legible 13px (0.8125rem).
       Badges, .nav-item labels, and tightly-constrained column text are
       left alone; this targets running copy, labels, and hints. */
    .form-label { font-size: 0.8125rem; }
    .card-body p,
    .card-body > .form-text,
    .page-subtitle { font-size: 0.875rem; }

    /* Data Governance hub — card nav (always visible above panels) */
    .data-gov-hub-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 0.75rem;
    }
    .data-gov-hub-card {
      padding: 0.75rem 1rem;
      border: 2px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      cursor: pointer;
      text-align: left;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .data-gov-hub-card:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    .data-gov-hub-card.active {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary);
      background: var(--bg-primary);
    }
    .data-gov-hub-card strong {
      display: block;
      font-size: 0.875rem;
      margin-bottom: 0.25rem;
      color: var(--text-primary);
    }
    .data-gov-hub-card span {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      line-height: 1.35;
    }
    .data-gov-evidence-pack {
      flex: 1 1 200px;
      padding: 0.75rem 1rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-secondary);
      color: var(--text-primary);
    }
    .data-gov-evidence-pack strong {
      color: var(--text-primary);
    }
    .data-gov-evidence-pack p { margin: 0.35rem 0 0.65rem; font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.4; }
    .data-gov-evidence-pack-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.25rem;
    }
    .data-gov-evidence-pack-included {
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: var(--text-secondary);
    }
    .data-gov-evidence-pack-included summary {
      cursor: pointer;
      color: var(--text-primary);
      font-weight: 600;
      user-select: none;
    }
    .data-gov-evidence-pack-included ul {
      margin: 0.35rem 0 0;
      padding-left: 1.1rem;
      max-height: 9rem;
      overflow-y: auto;
    }
    .data-gov-evidence-pack-included li { margin-bottom: 0.15rem; }
    .data-gov-evidence-pack-customised {
      display: inline-block;
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--accent, #2563eb);
      margin-left: 0.35rem;
    }
    .ir-kpi-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .ir-kpi {
      flex: 1 1 120px;
      min-width: 110px;
      padding: 0.75rem 1rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }
    .ir-kpi.danger { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); }
    .ir-kpi.warning { border-color: rgba(234, 179, 8, 0.45); background: rgba(234, 179, 8, 0.08); }
    .ir-kpi.ok { border-color: rgba(34, 197, 94, 0.35); }
    .ir-kpi-value { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
    .ir-kpi-label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; }
    .ir-section-card { margin-bottom: 0.75rem; }
    .ir-records-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
    .ir-records-table th, .ir-records-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border-color); text-align: left; }
    .ir-records-table th { color: var(--text-secondary); font-weight: 600; font-size: 0.75rem; }
    .ir-type-tag { font-size: 0.65rem; text-transform: uppercase; color: var(--text-muted); display: inline-block; margin-right: 0.25rem; }
    .ir-empty { margin: 0; color: var(--text-muted); font-size: 0.8125rem; }
    .ir-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
    .ir-export-footer { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
    .data-gov-permission-notice {
      padding: 0.75rem 1rem;
      border-radius: 8px;
      background: rgba(234, 179, 8, 0.12);
      border: 1px solid rgba(234, 179, 8, 0.35);
      color: var(--text-primary);
      font-size: 0.875rem;
      margin-bottom: 1rem;
    }
    .data-gov-permission-notice strong { color: var(--text-primary); }
    [data-gov-requires]:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .data-gov-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.8125rem;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
    }
    .data-gov-status-queued { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
    .data-gov-status-processing { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
    .data-gov-status-completed { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
    .data-gov-status-failed { background: rgba(239, 68, 68, 0.15); color: #f87171; }
    .data-gov-status-spinner {
      width: 12px;
      height: 12px;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: data-gov-spin 0.8s linear infinite;
    }
    @keyframes data-gov-spin { to { transform: rotate(360deg); } }

    /* ── Daily Report: compact form layout ──────────────────────────────── */
    .dr-section-label {
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      border-top: 1px solid var(--border-color);
      padding-top: 0.6rem;
      margin-top: 0.1rem;
    }
    .dr-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem 0.625rem;
      align-items: flex-end;
    }
    .dr-field {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .dr-field > label {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .dr-field > .form-input {
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
      font-size: 0.8125rem;
      min-width: 0;
    }
    .dr-field > textarea.form-input { resize: vertical; }

    /* ── Daily Report: schedule & automation card ───────────────────────── */
    .dr-schedule-body {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .dr-schedule-intro {
      margin: 0;
      padding: 0.75rem 1rem;
      border-radius: 8px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      color: var(--text-muted);
      line-height: 1.55;
      font-size: 0.875rem;
    }
    .dr-schedule-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
      gap: 1rem 1.5rem;
      align-items: end;
    }
    @media (max-width: 640px) {
      .dr-schedule-grid { grid-template-columns: 1fr; }
    }
    .dr-schedule-grid .form-group { margin-bottom: 0; }
    .dr-schedule-grid .form-input { width: 100%; box-sizing: border-box; }
    .dr-schedule-toggles {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem 1.75rem;
      align-items: center;
      padding: 0.35rem 0;
    }
    .dr-schedule-toggles label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      font-size: 0.875rem;
      color: var(--text-secondary);
    }
    .dr-schedule-actions {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding-top: 0.65rem;
      border-top: 1px solid var(--border-color);
    }

    /* ── Daily Report: status strip ─────────────────────────────────────── */
    .dr-status-strip {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem 0.75rem;
      padding: 0.4rem 0.875rem;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 0.5rem;
      width: fit-content;
      font-size: 0.8125rem;
    }
    .dr-status-strip-sep {
      width: 1px;
      height: 1.2em;
      background: var(--border-color);
      flex-shrink: 0;
    }

    /* ── Daily Report: compact status pills ─────────────────────────────── */
    .dr-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.25rem 0.65rem;
      border-radius: 999px;
      font-size: 0.8125rem;
      font-weight: 500;
      white-space: nowrap;
      line-height: 1.35;
    }
    .dr-pill svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }
    .dr-pill.at-sea   { color: #22c55e; background: rgba(34,197,94,0.1); }
    .dr-pill.in-port  { color: #f59e0b; background: rgba(245,158,11,0.1); }
    .dr-pill.done     { color: #22c55e; background: rgba(34,197,94,0.1); }
    .dr-pill.pending  { color: var(--text-muted); background: var(--bg-secondary); }
    .dr-pill.auto     { color: #0ea5e9; background: rgba(14,165,233,0.1); }

    /* ── Collapsible card via <details> ─────────────────────────────────── */
    details.card { overflow: hidden; }
    details.card > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.875rem 1rem;
      border-bottom: 1px solid transparent;
      transition: background 0.12s;
      user-select: none;
    }
    details.card > summary::-webkit-details-marker { display: none; }
    details.card > summary:hover { background: var(--bg-card-hover); }
    details.card[open] > summary { border-bottom-color: var(--border-color); }
    details.card > summary .card-title { margin: 0; }
    details.card > summary .card-chevron {
      width: 1rem; height: 1rem;
      flex-shrink: 0;
      color: var(--text-muted);
      transition: transform 0.2s;
    }
    details.card[open] > summary .card-chevron { transform: rotate(180deg); }

    /* ── HR page ─────────────────────────────────────────────────── */
    #page-hr .hr-page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 0;
    }

    /* Tab bar */
    #page-hr .hr-tab-bar {
      display: flex;
      align-items: center;
      gap: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 1.5rem;
      padding-bottom: 0;
    }
    #page-hr .hr-tab-bar::-webkit-scrollbar { display: none; }
    .hr-tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.7rem 1.1rem;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      border-radius: 0;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
      white-space: nowrap;
      letter-spacing: 0.01em;
    }
    .hr-tab-btn svg { flex-shrink: 0; opacity: 0.7; }
    .hr-tab-btn:hover { color: var(--text-primary); }
    .hr-tab-btn:hover svg { opacity: 1; }
    .hr-tab-btn.active {
      color: var(--accent-primary, #3b82f6);
      border-bottom-color: var(--accent-primary, #3b82f6);
      font-weight: 600;
    }
    .hr-tab-btn.active svg { opacity: 1; }

    /* Expenses: Training-aligned chrome */
    #page-expenses {
      --ex-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ex-press: 140ms;
      --ex-space-xs: 4px;
      --ex-space-sm: 8px;
      --ex-space-md: 12px;
      --ex-space-lg: 16px;
      --ex-space-xl: 24px;
      --ex-radius-small: 8px;
      --ex-radius-control: 12px;
      --ex-radius-card: 14px;
      --ex-radius-pill: 999px;
      --ex-type-caption: 12px;
      --ex-type-body: 15px;
      --ex-type-subhead: 16px;
      --ex-type-title: 20px;
      container: expenses / inline-size;
    }
    #page-expenses .ex-page-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: var(--ex-space-lg);
      margin-bottom: var(--ex-space-lg);
    }
    #page-expenses .ex-page-head .page-title {
      font-size: var(--ex-type-title);
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.02em;
      text-wrap: balance;
      margin: 0;
    }
    #page-expenses .ex-page-head .page-subtitle {
      margin: var(--ex-space-xs) 0 0;
      max-width: 42rem;
      font-size: var(--ex-type-body);
      line-height: 1.4;
      font-weight: 400;
      color: var(--text-secondary);
      text-wrap: pretty;
    }
    #page-expenses .ex-head-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ex-space-sm);
    }
    #page-expenses .card {
      border-radius: var(--ex-radius-card);
    }
    #page-expenses .btn {
      border-radius: var(--ex-radius-control);
      min-height: 44px;
      padding: var(--ex-space-md) var(--ex-space-lg);
      font-size: var(--ex-type-body);
      font-weight: 600;
      line-height: 21px;
      transition: transform var(--ex-press) var(--ex-ease-out), opacity var(--ex-press) var(--ex-ease-out), background-color 160ms ease, border-color 160ms ease;
    }
    #page-expenses .btn-sm {
      min-height: 36px;
      padding: var(--ex-space-sm) var(--ex-space-md);
      font-size: 13px;
      line-height: 16px;
    }
    #page-expenses .btn:hover { transform: none; }
    #page-expenses .btn:active { transform: scale(0.97); }
    #page-expenses .btn-secondary { background: transparent; }
    @media (hover: hover) and (pointer: fine) {
      #page-expenses .btn-primary:hover { opacity: 0.92; }
      #page-expenses .btn-secondary:hover {
        background: color-mix(in srgb, var(--text-primary) 5%, transparent);
      }
      #page-expenses .ex-row:hover {
        background: color-mix(in srgb, var(--text-primary) 4%, transparent);
      }
      #page-expenses button.ex-metric:hover {
        background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-secondary));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #page-expenses .btn,
      #page-expenses .ex-choice-btn {
        transition: none;
      }
      #page-expenses .btn:active,
      #page-expenses .ex-choice-btn:active {
        transform: none;
      }
    }
    #page-expenses .ex-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--ex-space-md);
      margin-bottom: var(--ex-space-lg);
    }
    #page-expenses .ex-metric {
      min-width: 0;
      padding: var(--ex-space-md);
      border-radius: var(--ex-radius-control);
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      text-align: left;
      font: inherit;
      color: inherit;
    }
    #page-expenses button.ex-metric {
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
    }
    #page-expenses button.ex-metric[aria-pressed="true"] {
      border-color: var(--accent-primary);
      box-shadow: inset 0 0 0 1px var(--accent-primary);
    }
    #page-expenses .ex-metric-value {
      display: block;
      font-size: var(--ex-type-title);
      font-weight: 700;
      line-height: 26px;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }
    #page-expenses .ex-metric-label {
      display: block;
      margin-top: 2px;
      font-size: var(--ex-type-caption);
      font-weight: 500;
      line-height: 16px;
      color: var(--text-secondary);
    }
    #page-expenses .ex-metric.urgent .ex-metric-value { color: var(--danger); }
    #page-expenses .ex-metric.warn .ex-metric-value { color: var(--warning); }
    #page-expenses .ex-metric.ok .ex-metric-value { color: var(--success); }
    #page-expenses .ex-main-card { margin-bottom: 0; }
    #page-expenses .ex-main-card > .card-header {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    #page-expenses .ex-title-row {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      min-width: 0;
    }
    #page-expenses .ex-title-row .card-title {
      margin: 0;
      font-size: var(--ex-type-subhead);
      font-weight: 600;
      line-height: 22px;
    }
    #page-expenses .ex-title-row .perm-help {
      flex-shrink: 0;
      margin-left: 0;
    }
    #page-expenses .ex-lead {
      margin: var(--ex-space-xs) 0 0;
      font-size: var(--ex-type-caption);
      line-height: 16px;
      font-weight: 500;
      color: var(--text-secondary);
      max-width: 40rem;
    }
    #page-expenses .ex-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ex-space-sm);
      align-items: stretch;
      margin-top: var(--ex-space-md);
    }
    #page-expenses .ex-choice-tabs {
      display: flex;
      flex: 1 1 16rem;
      min-width: 0;
      padding: 3px;
      border-radius: var(--ex-radius-control);
      background: var(--bg-card);
      border: 1px solid var(--border-color);
    }
    #page-expenses .ex-choice-btn {
      appearance: none;
      flex: 1 1 auto;
      min-width: 4.75rem;
      border: 0;
      background: transparent;
      color: var(--text-muted);
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      line-height: 16px;
      padding: 10px var(--ex-space-xs);
      border-radius: 10px;
      min-height: 40px;
      cursor: pointer;
      transition: background-color 160ms ease, color 160ms ease;
    }
    #page-expenses .ex-choice-btn[aria-pressed="true"],
    #page-expenses .ex-choice-btn.active {
      background: var(--accent-primary);
      color: var(--primary-on);
      font-weight: 700;
    }
    #page-expenses .ex-search,
    #page-expenses .expenses-filter-bar .form-input {
      min-height: 44px;
      margin: 0;
      border-radius: var(--ex-radius-control);
    }
    #page-expenses .expenses-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ex-space-sm);
      align-items: end;
      margin-top: var(--ex-space-md);
    }
    #page-expenses .expenses-filter-bar .form-group { margin: 0; min-width: 9rem; }
    #page-expenses .expenses-filter-bar .form-label {
      margin-bottom: 0.35rem;
      font-size: var(--ex-type-caption);
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    #page-expenses .expenses-totals {
      align-self: center;
      font-size: var(--ex-type-caption);
      color: var(--text-secondary);
    }
    #page-expenses .ex-list {
      max-height: min(62vh, 720px);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }
    #page-expenses.ex-on-config .ex-metrics,
    #page-expenses.ex-on-config .expenses-filter-bar,
    #page-expenses.ex-on-config .ex-search-wrap { display: none; }
    #page-expenses .ex-choice-tabs { flex-wrap: wrap; }
    #page-expenses .ex-toolbar search.ex-search-wrap {
      display: block;
      flex: 1 1 12rem;
      min-width: 0;
    }
    #page-expenses .ex-batch-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--ex-space-sm);
      margin-bottom: var(--ex-space-sm);
    }
    #page-expenses .ex-batch-bar label {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      min-height: 44px;
      font-size: var(--ex-type-caption);
      font-weight: 600;
      color: var(--text-secondary);
    }
    #page-expenses .ex-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--ex-space-md);
      min-height: 44px;
      padding-block: var(--ex-space-md);
      padding-inline-end: 2px;
      border-top: 1px solid var(--border-color);
    }
    #page-expenses .ex-row:first-child { border-top: 0; }
    #page-expenses .ex-row-main {
      flex: 1 1 10rem;
      min-width: 0;
    }
    #page-expenses .ex-row-label {
      font-size: var(--ex-type-body);
      font-weight: 400;
      line-height: 21px;
      color: var(--text-primary);
    }
    #page-expenses .ex-row-secondary {
      margin-top: 2px;
      font-size: var(--ex-type-caption);
      font-weight: 500;
      line-height: 16px;
      color: var(--text-secondary);
    }
    #page-expenses .ex-row-amount {
      font-size: var(--ex-type-body);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    #page-expenses .ex-row-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: var(--ex-space-sm);
      flex: 1 1 auto;
      min-width: min(100%, 11rem);
    }
    #page-expenses .ex-row-actions .btn,
    #page-expenses .ex-pill { flex-shrink: 0; }
    #page-expenses .ex-pill {
      display: inline-flex;
      align-items: center;
      padding: 3px var(--ex-space-sm);
      border-radius: var(--ex-radius-pill);
      font-size: var(--ex-type-caption);
      font-weight: 600;
      line-height: 15px;
    }
    #page-expenses .ex-pill-warn {
      background: rgba(245, 158, 11, 0.16);
      color: var(--warning);
    }
    #page-expenses .ex-pill-ok {
      background: rgba(34, 197, 94, 0.15);
      color: var(--success);
    }
    #page-expenses .ex-pill-danger {
      background: rgba(239, 68, 68, 0.15);
      color: var(--danger);
    }
    #page-expenses .ex-pill-muted {
      background: rgba(148, 163, 184, 0.14);
      color: var(--text-secondary);
    }
    #page-expenses .ex-pill-info {
      background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
      color: var(--accent-primary);
    }
    #page-expenses .ex-empty {
      text-align: center;
      color: var(--text-secondary);
      font-size: var(--ex-type-body);
      padding: var(--ex-space-xl) var(--ex-space-lg);
    }
    #page-expenses .ex-panel-lead {
      margin: 0 0 var(--ex-space-md);
      font-size: var(--ex-type-caption);
      color: var(--text-secondary);
      line-height: 1.4;
    }
    #page-expenses .ex-check {
      width: 1.15rem;
      height: 1.15rem;
      accent-color: var(--accent-primary);
    }
    #page-expenses .expenses-cat-hint {
      margin: 0.25rem 0 0;
      font-size: 0.8125rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }
    dialog#expenses-category-editor {
      --ex-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ex-press: 140ms;
      --ex-space-xs: 4px;
      --ex-space-sm: 8px;
      --ex-space-md: 12px;
      --ex-space-lg: 16px;
      --ex-space-xl: 24px;
      --ex-radius-small: 8px;
      --ex-radius-control: 12px;
      --ex-radius-card: 14px;
      --ex-type-caption: 12px;
      --ex-type-body: 15px;
      --ex-type-subhead: 16px;
      width: min(36rem, calc(100vw - 1.5rem));
      max-height: min(90vh, 44rem);
      margin: auto;
      padding: 0;
      border: 1px solid var(--border-color);
      border-radius: var(--ex-radius-card);
      background: var(--bg-card, var(--bg-primary));
      color: var(--text-primary);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    }
    dialog#expenses-category-editor[open] {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #expenses-category-editor form {
      display: flex;
      flex-direction: column;
      min-height: 0;
      max-height: min(90vh, 44rem);
    }
    dialog#expenses-category-editor::backdrop {
      background: var(--modal-backdrop, rgba(15, 23, 42, 0.45));
    }
    #expenses-category-editor .modal-header {
      align-items: flex-start;
      gap: var(--ex-space-md);
    }
    #expenses-category-editor .modal-title {
      font-size: var(--ex-type-subhead);
      font-weight: 600;
      line-height: 22px;
      margin: 0;
    }
    #expenses-category-editor .ex-lead {
      margin: var(--ex-space-xs) 0 0;
      font-size: var(--ex-type-caption);
      line-height: 16px;
      font-weight: 500;
      color: var(--text-secondary);
    }
    #expenses-category-editor .modal-body {
      overflow-y: auto;
      overscroll-behavior: contain;
      display: flex;
      flex-direction: column;
      gap: var(--ex-space-lg);
      flex: 1 1 auto;
      min-height: 0;
    }
    #expenses-category-editor .ex-cat-section {
      margin: 0;
      padding: 0;
      border: 0;
      min-width: 0;
    }
    #expenses-category-editor .ex-cat-section legend,
    #expenses-category-editor .form-label {
      margin: 0 0 var(--ex-space-sm);
      font-size: var(--ex-type-caption);
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    #expenses-category-editor .form-group { margin: 0; }
    #expenses-category-editor .form-input {
      min-height: 44px;
      border-radius: var(--ex-radius-control);
    }
    #expenses-category-editor .btn {
      border-radius: var(--ex-radius-control);
      min-height: 44px;
    }
    #expenses-category-editor .ex-cat-fields {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--ex-space-md);
      margin-top: var(--ex-space-md);
    }
    #expenses-category-editor .expenses-mode-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--ex-space-sm);
    }
    #expenses-category-editor .ex-gates-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--ex-space-sm);
    }
    #expenses-category-editor .expenses-mode-option {
      display: flex;
      flex-direction: column;
      position: relative;
      gap: 4px;
      padding: 0.75rem 0.85rem;
      border: 1px solid var(--border-color);
      border-radius: var(--ex-radius-control);
      background: var(--bg-primary);
      cursor: pointer;
      min-height: 48px;
    }
    #expenses-category-editor .expenses-mode-option input {
      width: 1.15rem;
      height: 1.15rem;
      margin: 0 0 2px;
      accent-color: var(--accent-primary);
    }
    #expenses-category-editor .expenses-mode-option:has(input:checked) {
      border-color: var(--accent-primary, #3b82f6);
      background: color-mix(in srgb, var(--accent-primary, #3b82f6) 10%, transparent);
    }
    #expenses-category-editor .expenses-mode-option:has(:focus-visible) {
      outline: 2px solid var(--accent-primary);
      outline-offset: 2px;
    }
    #expenses-category-editor .expenses-mode-option strong {
      font-size: 0.875rem;
      font-weight: 600;
    }
    #expenses-category-editor .expenses-mode-option span {
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.35;
    }
    #expenses-category-editor .expenses-cat-hint {
      margin: 0.35rem 0 0;
      font-size: 0.8125rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }
    #expenses-category-form[data-ex-mode="actual"] #expenses-cat-rate-group,
    #expenses-category-form[data-ex-mode="actual"] #expenses-cat-unit-group {
      display: none;
    }
    #expenses-category-form[data-ex-mode="actual"] .ex-cat-fields {
      grid-template-columns: 1fr;
    }
    @media (max-width: 639px) {
      #expenses-category-editor .expenses-mode-grid,
      #expenses-category-editor .ex-gates-grid,
      #expenses-category-editor .ex-cat-fields {
        grid-template-columns: 1fr;
      }
      dialog#expenses-category-editor {
        width: 100%;
        max-width: none;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
      }
    }
    #expenses-detail-modal {
      --ex-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ex-press: 140ms;
      --ex-space-xs: 4px;
      --ex-space-sm: 8px;
      --ex-space-md: 12px;
      --ex-space-lg: 16px;
      --ex-space-xl: 24px;
      --ex-radius-small: 8px;
      --ex-radius-control: 12px;
      --ex-radius-card: 14px;
      --ex-type-caption: 12px;
      --ex-type-body: 15px;
      --ex-type-subhead: 16px;
    }
    #expenses-detail-modal .modal {
      border-radius: var(--ex-radius-card);
      max-height: min(90vh, 52rem);
      display: flex;
      flex-direction: column;
    }
    #expenses-detail-modal .modal-body {
      overflow-y: auto;
      padding: var(--ex-space-lg);
    }
    #expenses-detail-modal .ex-detail {
      display: flex;
      flex-direction: column;
      gap: var(--ex-space-lg);
    }
    #expenses-detail-modal .ex-detail-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--ex-space-sm) var(--ex-space-md);
    }
    #expenses-detail-modal .ex-detail-name {
      margin: 0;
      font-size: var(--ex-type-subhead);
      font-weight: 700;
      color: var(--text-primary);
    }
    #expenses-detail-modal .ex-detail-meta,
    #expenses-detail-modal .ex-detail-note {
      margin: 0;
      font-size: var(--ex-type-body);
      line-height: 1.45;
      color: var(--text-secondary);
    }
    #expenses-detail-modal .ex-detail-section {
      display: flex;
      flex-direction: column;
      gap: var(--ex-space-sm);
    }
    #expenses-detail-modal .ex-detail-section h3 {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    #expenses-detail-modal .ex-detail-table-wrap {
      overflow-x: auto;
      border: 1px solid var(--border-color);
      border-radius: var(--ex-radius-small);
    }
    #expenses-detail-modal .ex-detail-table {
      width: 100%;
      margin: 0;
    }
    #expenses-detail-modal .ex-detail-explanation {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      min-width: 0;
    }
    #expenses-detail-modal .ex-detail-line-note {
      margin: 0;
      font-size: var(--ex-type-body);
      color: var(--text-primary);
      line-height: 1.45;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    #expenses-detail-modal .ex-detail-line-note.is-empty {
      color: var(--text-secondary);
      font-weight: 500;
    }
    #expenses-detail-modal .ex-detail-note {
      color: var(--text-primary);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    #expenses-detail-modal .expenses-file-list {
      margin: 0;
      padding-left: 1.1rem;
      color: var(--text-primary);
    }
    #expenses-detail-modal .expenses-file-list a {
      color: var(--accent-primary);
    }
    #expenses-detail-modal .ex-detail-pay-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--ex-space-md);
    }
    #expenses-detail-modal .ex-detail-pay-card {
      display: flex;
      flex-direction: column;
      gap: var(--ex-space-sm);
      padding: var(--ex-space-md);
      border: 1px solid var(--border-color);
      border-radius: var(--ex-radius-small);
      background: var(--bg-secondary);
    }
    #expenses-detail-modal .ex-detail-pay-card h4 {
      margin: 0;
      font-size: var(--ex-type-body);
      font-weight: 700;
      color: var(--text-primary);
    }
    #expenses-detail-modal .ex-detail-pay-amount {
      margin: 0;
      font-size: var(--ex-type-subhead);
      font-weight: 700;
      color: var(--text-primary);
    }
    #expenses-detail-modal .ex-detail-pay-hint {
      margin: 0;
      font-size: var(--ex-type-caption);
      line-height: 1.4;
      color: var(--text-secondary);
    }
    #expenses-detail-modal .ex-detail-pay-status {
      margin: 0;
      font-size: var(--ex-type-caption);
      color: var(--success);
      font-weight: 600;
    }
    #expenses-detail-modal .ex-detail-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ex-space-sm);
      align-items: center;
      padding-top: var(--ex-space-sm);
      border-top: 1px solid var(--border-color);
    }
    #expenses-detail-modal .ex-detail-actions .form-group {
      margin: 0;
      flex: 1 1 12rem;
    }
    #expenses-detail-modal .ex-detail-approve-bar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ex-space-sm);
      align-items: center;
    }
    #expenses-detail-modal .ex-pill {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.55rem;
      border-radius: 999px;
      font-size: var(--ex-type-caption);
      font-weight: 600;
      text-transform: capitalize;
    }
    #expenses-detail-modal .ex-pill-warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
    #expenses-detail-modal .ex-pill-ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
    #expenses-detail-modal .ex-pill-danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
    #expenses-detail-modal .ex-pill-muted { background: color-mix(in srgb, var(--text-secondary) 14%, transparent); color: var(--text-secondary); }
    #expenses-detail-modal .ex-pill-info { background: color-mix(in srgb, var(--accent-primary) 16%, transparent); color: var(--accent-primary); }
    #expenses-detail-modal.modal-overlay {
      transition: opacity 200ms var(--ex-ease-out), visibility 200ms var(--ex-ease-out);
    }
    #expenses-detail-modal .modal {
      transition: transform 200ms var(--ex-ease-out), opacity 200ms var(--ex-ease-out);
      transform: scale(0.97);
      opacity: 0;
      border: 1px solid var(--border-color);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    }
    #expenses-detail-modal.modal-overlay.active .modal {
      transform: scale(1);
      opacity: 1;
    }
    #expenses-detail-modal .modal-header,
    #expenses-detail-modal .modal-footer {
      padding: var(--ex-space-lg);
      border-color: var(--border-color);
    }
    #expenses-detail-modal .modal-footer {
      gap: var(--ex-space-sm);
    }
    #expenses-detail-modal .btn {
      border-radius: var(--ex-radius-control);
      min-height: 44px;
      font-weight: 600;
      transition: transform var(--ex-press) var(--ex-ease-out), opacity var(--ex-press) var(--ex-ease-out), background-color 160ms ease;
    }
    #expenses-detail-modal .btn:active {
      transform: scale(0.97);
    }
    #page-expenses .ex-row-actions .btn:active {
      transform: scale(0.97);
    }
    #expenses-detail-modal .ex-detail-hero {
      display: flex;
      flex-direction: column;
      gap: var(--ex-space-sm);
      padding-bottom: var(--ex-space-sm);
      border-bottom: 1px solid var(--border-color);
    }
    #expenses-detail-modal .ex-detail-alert {
      margin: 0;
      font-size: var(--ex-type-body);
      color: var(--danger);
      line-height: 1.4;
    }
    #expenses-detail-modal .ex-detail-lines {
      display: flex;
      flex-direction: column;
      gap: var(--ex-space-md);
    }
    #expenses-detail-modal .ex-detail-line-card {
      display: flex;
      flex-direction: column;
      gap: var(--ex-space-md);
      padding: var(--ex-space-md);
      border: 1px solid var(--border-color);
      border-radius: var(--ex-radius-control);
      background: var(--bg-secondary);
    }
    #expenses-detail-modal .ex-detail-line-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--ex-space-md);
    }
    #expenses-detail-modal .ex-detail-line-title {
      margin: 0;
      font-size: var(--ex-type-body);
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.35;
    }
    #expenses-detail-modal .ex-detail-line-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
      gap: var(--ex-space-md);
    }
    #expenses-detail-modal .ex-detail-stat,
    #expenses-detail-modal .ex-detail-field {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      min-width: 0;
    }
    #expenses-detail-modal .ex-detail-field-label {
      font-size: var(--ex-type-caption);
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    #expenses-detail-modal .ex-detail-stat strong {
      font-size: var(--ex-type-body);
      color: var(--text-primary);
      font-weight: 600;
    }
    #expenses-detail-modal .ex-detail-line-files {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      padding-top: var(--ex-space-xs);
      border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    }
    #expenses-detail-modal .ex-detail-file-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ex-space-sm);
    }
    #expenses-detail-modal .ex-detail-file-chip {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      padding: 0.35rem 0.65rem;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
      background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
      color: var(--accent-primary);
      font-size: var(--ex-type-caption);
      font-weight: 600;
      text-decoration: none;
      line-height: 1.3;
      transition: transform var(--ex-press) var(--ex-ease-out), background-color 160ms ease;
    }
    #expenses-detail-modal .ex-detail-file-chip.is-muted {
      border-color: var(--border-color);
      background: transparent;
      color: var(--text-secondary);
      font-weight: 500;
    }
    #expenses-detail-modal .ex-detail-file-chip.is-danger {
      border-color: color-mix(in srgb, var(--danger) 35%, var(--border-color));
      background: color-mix(in srgb, var(--danger) 12%, transparent);
      color: var(--danger);
    }
    @media (hover: hover) and (pointer: fine) {
      #expenses-detail-modal .ex-detail-file-chip:not(.is-muted):not(.is-danger):hover {
        background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
      }
    }
    #expenses-detail-modal .ex-detail-file-chip:active {
      transform: scale(0.97);
    }
    #expenses-detail-modal .ex-detail-upload {
      margin-top: var(--ex-space-sm);
    }
    @media (prefers-reduced-motion: reduce) {
      #expenses-detail-modal.modal-overlay,
      #expenses-detail-modal .modal,
      #expenses-detail-modal .btn,
      #expenses-detail-modal .ex-detail-file-chip {
        transition: none;
      }
      #expenses-detail-modal .modal {
        transform: none;
        opacity: 1;
      }
    }
    dialog.ss-entry-dialog {
      --ss-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ss-press: 140ms;
      --ss-space-xs: 4px;
      --ss-space-sm: 8px;
      --ss-space-md: 12px;
      --ss-space-lg: 16px;
      --ss-space-xl: 24px;
      --ss-radius-small: 8px;
      --ss-radius-control: 12px;
      --ss-radius-card: 14px;
      --ss-type-caption: 12px;
      --ss-type-body: 15px;
      --ss-type-subhead: 16px;
      width: min(36rem, calc(100vw - 1.5rem));
      max-height: min(90vh, 48rem);
      margin: auto;
      padding: 0;
      border: 1px solid var(--border-color);
      border-radius: var(--ss-radius-card);
      background: var(--bg-card, var(--bg-primary));
      color: var(--text-primary);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    }
    dialog.ss-entry-dialog[open] {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .ss-entry-dialog form {
      display: flex;
      flex-direction: column;
      min-height: 0;
      max-height: min(90vh, 48rem);
    }
    dialog.ss-entry-dialog::backdrop {
      background: var(--modal-backdrop, rgba(15, 23, 42, 0.45));
    }
    .ss-entry-dialog .modal-header {
      align-items: flex-start;
      gap: var(--ss-space-md);
    }
    .ss-entry-dialog .modal-title {
      font-size: var(--ss-type-subhead);
      font-weight: 600;
    }
    .ss-entry-dialog .ss-lead {
      margin: 0.25rem 0 0;
      font-size: var(--ss-type-caption);
      color: var(--text-secondary);
      line-height: 1.4;
    }
    .ss-entry-dialog .modal-body {
      display: grid;
      gap: var(--ss-space-md);
      overflow: auto;
    }
    .ss-entry-dialog .form-group { margin: 0; }
    .ss-entry-dialog .form-input {
      min-height: 44px;
      border-radius: var(--ss-radius-control);
    }
    .ss-entry-dialog fieldset {
      border: 0;
      margin: 0;
      padding: 0;
      min-inline-size: 0;
    }
    .ss-entry-dialog .ss-type-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--ss-space-sm);
    }
    .ss-entry-dialog .ss-type-option {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      margin: 0;
      padding: var(--ss-space-md);
      border: 0;
      border-radius: var(--ss-radius-control);
      background: var(--bg-secondary);
      cursor: pointer;
      min-height: 44px;
    }
    .ss-entry-dialog .ss-type-option input { position: absolute; opacity: 0; pointer-events: none; }
    .ss-entry-dialog .ss-type-option:has(input:checked) {
      background: color-mix(in srgb, var(--accent-primary, #3b82f6) 12%, transparent);
    }
    .ss-entry-dialog .ss-type-option:has(:focus-visible) {
      outline: 2px solid var(--accent-primary, #3b82f6);
      outline-offset: 2px;
    }
    .ss-entry-dialog .ss-type-option strong {
      font-size: var(--ss-type-body);
    }
    .ss-entry-dialog .ss-type-option span {
      font-size: var(--ss-type-caption);
      color: var(--text-secondary);
    }
    .ss-entry-dialog .ss-entry-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--ss-space-md);
    }
    .ss-entry-dialog .ss-entry-fields .ss-span-2 { grid-column: 1 / -1; }
    .ss-entry-dialog .ss-file-hint {
      margin: 0.35rem 0 0;
      font-size: var(--ss-type-caption);
      color: var(--text-secondary);
    }
    #ships-safe-currency-editor[data-ss-ccy-mode="opening"] .ss-ccy-pick {
      display: none;
    }
    #ships-safe-currency-editor[data-ss-ccy-mode="add"] .ss-ccy-locked {
      display: none;
    }
    @media (max-width: 639px) {
      .ss-entry-dialog .ss-type-grid,
      .ss-entry-dialog .ss-entry-fields {
        grid-template-columns: 1fr;
      }
      dialog.ss-entry-dialog {
        width: 100%;
        max-width: none;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
      }
    }
    #page-expenses .expenses-mode-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--ex-space-sm);
    }
    #page-expenses .expenses-mode-option {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      padding: 0.75rem 0.85rem;
      border: 1px solid var(--border-color);
      border-radius: var(--ex-radius-control);
      background: var(--bg-primary);
      cursor: pointer;
      min-height: 48px;
    }
    #page-expenses .expenses-mode-option:has(input:checked) {
      border-color: var(--accent-primary, #3b82f6);
      background: color-mix(in srgb, var(--accent-primary, #3b82f6) 10%, transparent);
    }
    #page-expenses .expenses-mode-option strong {
      font-size: 0.875rem;
      font-weight: 600;
    }
    #page-expenses .expenses-mode-option span {
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.35;
    }
    #page-expenses .expenses-check-row {
      display: flex;
      align-items: flex-start;
      gap: 0.55rem;
      margin: 0;
      min-height: 44px;
    }
    #page-expenses .expenses-check-row input {
      margin-top: 0.2rem;
      accent-color: var(--accent-primary, #3b82f6);
    }
    #page-expenses .expenses-editor-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    #page-expenses .ex-config-block + .ex-config-block {
      margin-top: var(--ex-space-lg);
      padding-top: var(--ex-space-lg);
      border-top: 1px solid var(--border-color);
    }
    #page-expenses .ex-gates .card-title {
      margin: 0;
      font-size: var(--ex-type-subhead);
      font-weight: 600;
      line-height: 22px;
    }
    #page-expenses .ex-gates-toggles {
      border: 0;
      margin: var(--ex-space-md) 0 0;
      padding: 0;
      min-width: 0;
    }
    #page-expenses .ex-gates-toggles legend {
      margin: 0 0 var(--ex-space-sm);
      font-size: var(--ex-type-caption);
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    #page-expenses .ex-gates-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--ex-space-sm);
    }
    #page-expenses .ex-gates .expenses-mode-option {
      position: relative;
      gap: 4px;
      padding-top: var(--ex-space-md);
      color-scheme: light dark;
    }
    #page-expenses .ex-gates .expenses-mode-option input {
      width: 1.15rem;
      height: 1.15rem;
      margin: 0 0 2px;
      accent-color: var(--accent-primary);
      flex-shrink: 0;
    }
    #page-expenses .ex-gates .expenses-mode-option:has(:focus-visible) {
      outline: 2px solid var(--accent-primary);
      outline-offset: 2px;
    }
    #page-expenses .ex-gates .expenses-mode-option:has(input:disabled) {
      opacity: 0.6;
      cursor: not-allowed;
    }
    #page-expenses .ex-gates-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--ex-space-md);
      margin-top: var(--ex-space-lg);
    }
    #page-expenses .ex-gates-fields .form-group { margin: 0; min-width: 0; }
    #page-expenses .ex-gates-fields .form-label {
      margin-bottom: 0.35rem;
      font-size: var(--ex-type-caption);
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    #page-expenses .ex-gates-fields .form-input {
      min-height: 44px;
      margin: 0;
      border-radius: var(--ex-radius-control);
    }
    @container expenses (max-width: 639px) {
      #page-expenses .ex-gates-grid,
      #page-expenses .ex-gates-fields {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 639px) {
      #page-expenses .ex-gates-grid,
      #page-expenses .ex-gates-fields {
        grid-template-columns: 1fr;
      }
    }
    #page-expenses .form-input:focus-visible {
      outline: 2px solid var(--accent-primary, #3b82f6);
      outline-offset: 2px;
    }
    #page-expenses .expenses-empty {
      padding: 1.25rem 0.25rem;
      color: var(--text-secondary);
      font-size: 0.875rem;
    }
    #page-expenses .table-wrap,
    #page-expenses .hr-dt-table-wrap {
      border: 1px solid var(--border-color);
      border-radius: var(--ex-radius-small);
      overflow: auto;
      background: var(--bg-primary);
    }
    #page-expenses table.data-table thead th { text-align: left; }
    @media (max-width: 720px) {
      #page-expenses .expenses-mode-grid { grid-template-columns: 1fr; }
    }
    @media (hover: hover) and (pointer: fine) {
      #page-expenses .expenses-mode-option:hover {
        border-color: color-mix(in srgb, var(--accent-primary, #3b82f6) 45%, var(--border-color));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #page-expenses .expenses-mode-option { transition: none; }
    }
    @media (prefers-reduced-transparency: reduce) {
      #page-expenses .expenses-mode-option:has(input:checked) {
        background: var(--bg-secondary);
      }
    }
    @container expenses (max-width: 639px) {
      #page-expenses .ex-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 639px) {
      #page-expenses .ex-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    /* Ship’s Safe: Training / Expenses-aligned chrome */
    #page-ships-safe {
      --ss-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ss-press: 140ms;
      --ss-space-xs: 4px;
      --ss-space-sm: 8px;
      --ss-space-md: 12px;
      --ss-space-lg: 16px;
      --ss-space-xl: 24px;
      --ss-radius-small: 8px;
      --ss-radius-control: 12px;
      --ss-radius-card: 14px;
      --ss-radius-pill: 999px;
      --ss-type-caption: 12px;
      --ss-type-body: 15px;
      --ss-type-subhead: 16px;
      --ss-type-title: 20px;
      container: ships-safe / inline-size;
    }
    #page-ships-safe .ss-page-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: var(--ss-space-lg);
      margin-bottom: var(--ss-space-md);
    }
    #page-ships-safe .ss-page-head .page-title {
      font-size: var(--ss-type-title);
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.02em;
      text-wrap: balance;
      margin: 0;
    }
    #page-ships-safe .ss-page-head .page-subtitle {
      margin: var(--ss-space-xs) 0 0;
      max-width: 42rem;
      font-size: var(--ss-type-body);
      line-height: 1.4;
      font-weight: 400;
      color: var(--text-secondary);
      text-wrap: pretty;
    }
    #page-ships-safe .ss-head-actions { display: flex; flex-wrap: wrap; gap: var(--ss-space-sm); }
    #page-ships-safe .ss-vessel {
      margin: 0 0 var(--ss-space-md);
      font-size: var(--ss-type-caption);
      font-weight: 500;
      line-height: 16px;
      color: var(--text-secondary);
    }
    #page-ships-safe .card {
      border-radius: var(--ss-radius-card);
      overflow: visible;
      width: 100%;
    }
    #page-ships-safe fieldset { min-inline-size: 0; }
    #page-ships-safe .ss-tab-panel { min-height: 6rem; }
    #page-ships-safe .btn {
      border-radius: var(--ss-radius-control);
      min-height: 44px;
      padding: var(--ss-space-md) var(--ss-space-lg);
      font-size: var(--ss-type-body);
      font-weight: 600;
      line-height: 21px;
      transition: transform var(--ss-press) var(--ss-ease-out), opacity var(--ss-press) var(--ss-ease-out), background-color 160ms ease, border-color 160ms ease;
    }
    #page-ships-safe .btn-sm {
      min-height: 36px;
      padding: var(--ss-space-sm) var(--ss-space-md);
      font-size: 13px;
      line-height: 16px;
    }
    #page-ships-safe .btn:hover { transform: none; }
    #page-ships-safe .btn:active { transform: scale(0.97); }
    #page-ships-safe .btn-secondary { background: transparent; }
    @media (hover: hover) and (pointer: fine) {
      #page-ships-safe .btn-primary:hover { opacity: 0.92; }
      #page-ships-safe .btn-secondary:hover {
        background: color-mix(in srgb, var(--text-primary) 5%, transparent);
      }
      #page-ships-safe button.ss-metric:hover {
        background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-secondary));
      }
      #page-ships-safe .ss-row:hover {
        background: color-mix(in srgb, var(--text-primary) 4%, transparent);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #page-ships-safe .btn,
      #page-ships-safe .ss-choice-btn { transition: none; }
      #page-ships-safe .btn:active,
      #page-ships-safe .ss-choice-btn:active { transform: none; }
    }
    #page-ships-safe .ss-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--ss-space-md);
      margin-bottom: var(--ss-space-lg);
    }
    #page-ships-safe .ss-metric {
      min-width: 0;
      padding: var(--ss-space-md);
      border-radius: var(--ss-radius-control);
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      text-align: left;
      font: inherit;
      color: inherit;
    }
    #page-ships-safe button.ss-metric {
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
    }
    #page-ships-safe button.ss-metric[aria-pressed="true"] {
      border-color: var(--accent-primary);
      box-shadow: inset 0 0 0 1px var(--accent-primary);
    }
    #page-ships-safe .ss-metric-value {
      display: block;
      font-size: var(--ss-type-title);
      font-weight: 700;
      line-height: 26px;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }
    #page-ships-safe .ss-metric-label {
      display: block;
      margin-top: 2px;
      font-size: var(--ss-type-caption);
      font-weight: 500;
      line-height: 16px;
      color: var(--text-secondary);
    }
    #page-ships-safe .ss-metric.urgent .ss-metric-value { color: var(--danger); }
    #page-ships-safe .ss-metric.warn .ss-metric-value { color: var(--warning); }
    #page-ships-safe .ss-metric.ok .ss-metric-value { color: var(--success); }
    #page-ships-safe .ss-main-card { margin-bottom: 0; }
    #page-ships-safe .ss-card-header {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    #page-ships-safe .ss-title-row {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0.35rem 0.75rem;
      min-width: 0;
      width: 100%;
    }
    #page-ships-safe .ss-title-row .card-title {
      margin: 0;
      font-size: var(--ss-type-subhead);
      font-weight: 600;
      line-height: 22px;
      flex-shrink: 0;
    }
    #page-ships-safe .ss-title-row .perm-help { flex-shrink: 0; margin-left: 0; }
    #page-ships-safe .ss-lead {
      margin: 0;
      flex: 1 1 14rem;
      min-width: 0;
      font-size: var(--ss-type-caption);
      line-height: 22px;
      font-weight: 500;
      color: var(--text-secondary);
    }
    #page-ships-safe .ss-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ss-space-sm);
      margin-top: var(--ss-space-md);
    }
    #page-ships-safe .ss-choice-tabs {
      display: flex;
      flex: 1 1 16rem;
      flex-wrap: wrap;
      min-width: 0;
      padding: 3px;
      border-radius: var(--ss-radius-control);
      background: var(--bg-card);
      border: 1px solid var(--border-color);
    }
    #page-ships-safe .ss-choice-btn {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      flex: 1 1 auto;
      min-width: 5rem;
      border: 0;
      background: transparent;
      color: var(--text-muted);
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      line-height: 16px;
      padding: 10px var(--ss-space-xs);
      border-radius: 10px;
      min-height: 40px;
      cursor: pointer;
      text-wrap: balance;
      transition: background-color 160ms ease, color 160ms ease;
    }
    #page-ships-safe .ss-tab-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.25rem;
      min-height: 1.25rem;
      padding: 0 0.35rem;
      border-radius: 999px;
      background: var(--warning, #f59e0b);
      color: #111827;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
    }
    #page-ships-safe .ss-tab-count[hidden] { display: none; }
    #page-ships-safe .ss-choice-btn[aria-pressed="true"] .ss-tab-count {
      background: var(--primary-on, #fff);
      color: var(--accent-primary);
    }
    #page-ships-safe .ss-choice-btn[aria-pressed="true"] {
      background: var(--accent-primary);
      color: var(--primary-on);
      font-weight: 700;
    }
    #page-ships-safe .form-input {
      min-height: 44px;
      border-radius: var(--ss-radius-control);
    }
    #page-ships-safe .form-label {
      font-size: var(--ss-type-caption);
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    #page-ships-safe .ss-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--ss-space-md);
      min-height: 44px;
      padding-block: var(--ss-space-md);
      border-top: 1px solid var(--border-color);
    }
    #page-ships-safe .ss-row:first-child { border-top: 0; }
    #page-ships-safe .ss-row-main { flex: 1 1 10rem; min-width: 0; }
    #page-ships-safe .ss-row-label {
      font-size: var(--ss-type-body);
      font-weight: 400;
      line-height: 21px;
      color: var(--text-primary);
    }
    #page-ships-safe .ss-row-secondary {
      margin-top: 2px;
      font-size: var(--ss-type-caption);
      font-weight: 500;
      line-height: 16px;
      color: var(--text-secondary);
    }
    #page-ships-safe .ss-row-amount {
      font-size: var(--ss-type-body);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    #page-ships-safe .ss-row-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: var(--ss-space-sm);
      flex: 1 1 auto;
      min-width: min(100%, 11rem);
    }
    #page-ships-safe .ss-empty {
      text-align: center;
      color: var(--text-secondary);
      font-size: var(--ss-type-body);
      padding: var(--ss-space-xl) var(--ss-space-lg);
    }
    #page-ships-safe .ss-book-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--ss-space-md);
      margin: 0 0 var(--ss-space-lg);
    }
    #page-ships-safe .ss-book-toolbar .form-group { margin: 0; min-width: 11rem; }
    #page-ships-safe .ss-show-counts {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin: 0;
      min-height: 2.5rem;
      font-size: var(--ss-type-body);
      color: var(--text-secondary);
      white-space: nowrap;
      cursor: pointer;
    }
    #page-ships-safe .ss-book-toolbar-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ss-space-sm);
      margin-left: auto;
    }
    #page-ships-safe .ss-files {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.25rem;
    }
    #page-ships-safe .ss-files a {
      font-size: var(--ss-type-caption);
    }
    #page-ships-safe .expenses-petty-balance { display: none; }
    #page-ships-safe .expenses-petty-safe,
    #page-ships-safe .expenses-petty-pay {
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    #page-ships-safe .expenses-petty-safe-title { display: none; }
    #page-ships-safe .expenses-petty-pay-lead { display: none; }
    #page-ships-safe .expenses-petty-stacks {
      margin: 0;
      padding: 0;
      border: 0;
    }
    #page-ships-safe .ss-till-head {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
      gap: var(--ss-space-sm);
      align-items: stretch;
      margin: 0 0 var(--ss-space-md);
    }
    #page-ships-safe .ss-till-head > * {
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    #page-ships-safe .ss-currency-card-body {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: var(--ss-space-sm);
      margin-top: auto;
      min-width: 0;
    }
    #page-ships-safe .ss-stack-row {
      display: contents;
    }
    #page-ships-safe .expenses-petty-stack-opts {
      display: flex;
      flex: 1 1 auto;
      flex-wrap: nowrap;
      align-items: stretch;
      min-width: 0;
      margin: 0;
      padding: 2px;
      border-radius: var(--ss-radius-control);
      background: var(--bg-card);
      border: 1px solid var(--border-color);
    }
    #page-ships-safe .expenses-petty-stack-opt {
      position: relative;
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 1 1 0;
      min-width: 0;
      margin: 0;
      gap: 0.25rem;
      border: 0;
      background: transparent;
      color: var(--text-muted);
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      line-height: 14px;
      padding: 4px 6px;
      border-radius: 6px;
      min-height: 28px;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color 160ms ease, color 160ms ease;
    }
    #page-ships-safe .ss-stack-default {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      opacity: 0.85;
    }
    #page-ships-safe .expenses-petty-stack-opt input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    #page-ships-safe .expenses-petty-stack-opt:has(input:checked) {
      background: var(--accent-primary);
      color: var(--primary-on);
      font-weight: 700;
      border-color: transparent;
    }
    #page-ships-safe .expenses-petty-stack-opt:has(:focus-visible) {
      outline: 2px solid var(--accent-primary, #3b82f6);
      outline-offset: 2px;
    }
    #page-ships-safe .expenses-petty-add-stack {
      display: flex;
      flex: 0 0 auto;
      align-items: stretch;
      margin: 0;
    }
    #page-ships-safe .expenses-petty-add-stack .btn {
      min-height: 0;
      height: auto;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      line-height: 16px;
      white-space: nowrap;
      border-radius: var(--ss-radius-control);
    }
    #page-ships-safe .ss-stack-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--ss-space-sm);
    }
    #page-ships-safe .ss-stack-save {
      margin-inline-start: auto;
    }
    #page-ships-safe .ss-stack-default-hint {
      margin: 0;
      font-size: var(--ss-type-caption);
      line-height: 16px;
      color: var(--text-secondary);
    }
    #page-ships-safe .ss-denom-cols {
      display: flex;
      flex-direction: column;
      gap: var(--ss-space-md);
      margin: 0 0 var(--ss-space-lg);
    }
    #page-ships-safe .ss-pay-intro {
      margin: 0 0 var(--ss-space-md);
      font-size: var(--ss-type-body);
      color: var(--text-secondary);
      line-height: 1.4;
    }
    #page-ships-safe .expenses-petty-pay-item > summary {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.35rem 0.75rem;
      cursor: pointer;
      list-style: none;
      padding: var(--ss-space-md);
      font-weight: 600;
      min-height: 44px;
    }
    #page-ships-safe .ss-pay-toggle {
      margin-left: auto;
      width: 0.55rem;
      height: 0.55rem;
      border-right: 2px solid var(--text-secondary);
      border-bottom: 2px solid var(--text-secondary);
      transform: rotate(45deg);
      translate: 0 -0.1rem;
    }
    #page-ships-safe .expenses-petty-pay-item[open] > summary .ss-pay-toggle {
      transform: rotate(-135deg);
      translate: 0 0.15rem;
    }
    #page-ships-safe .ss-pay-due {
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }
    #page-ships-safe .ss-pay-suggest-line {
      flex: 1 1 12rem;
      font-weight: 500;
      color: var(--text-secondary);
      font-size: var(--ss-type-caption);
    }
    #page-ships-safe .ss-pay-date {
      font-size: var(--ss-type-caption);
      color: var(--text-secondary);
      font-weight: 500;
    }
    #page-ships-safe .ss-pay-copy {
      margin: 0 0 var(--ss-space-md);
      font-size: var(--ss-type-body);
      line-height: 1.4;
    }
    #page-ships-safe .expenses-petty-denom.is-suggested {
      border-color: var(--accent-primary, #3b82f6);
      background: color-mix(in srgb, var(--accent-primary, #3b82f6) 10%, transparent);
    }
    #page-ships-safe .expenses-petty-stacks legend,
    #page-ships-safe .expenses-petty-denom-block legend {
      padding: 0;
      margin: 0 0 var(--ss-space-sm);
      font-size: var(--ss-type-caption);
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    #page-ships-safe .expenses-petty-compare {
      display: contents;
    }
    #page-ships-safe .expenses-petty-compare-card {
      margin: 0;
      padding: 0.5rem 0.7rem;
      border: 1px solid var(--border-color);
      border-radius: var(--ss-radius-control);
      background: var(--bg-secondary);
    }
    #page-ships-safe .expenses-petty-compare-card h4 {
      margin: 0 0 0.25rem;
      font-size: var(--ss-type-caption);
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    #page-ships-safe .expenses-petty-compare-value {
      margin: auto 0 0;
      font-size: 1.15rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    #page-ships-safe .expenses-petty-compare-meter {
      grid-column: 1 / -1;
      display: grid;
      gap: 0.3rem;
      margin: 0 0 var(--ss-space-lg);
      font-size: var(--ss-type-caption);
      color: var(--text-secondary);
    }
    #page-ships-safe .expenses-petty-compare-meter meter {
      width: 100%;
      height: 0.65rem;
      accent-color: var(--accent-primary);
    }
    #page-ships-safe .ss-till-head.is-ok .ss-till-figure {
      border-color: color-mix(in srgb, var(--success, #22c55e) 45%, var(--border-color));
    }
    #page-ships-safe .ss-till-head.is-off .ss-till-figure {
      border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border-color));
    }
    @container ships-safe (max-width: 639px) {
      #page-ships-safe .ss-till-head {
        grid-template-columns: 1fr;
      }
    }
    #page-ships-safe .expenses-petty-denom-block { margin: 0; padding: 0; border: 0; }
    #page-ships-safe .expenses-petty-denoms {
      display: flex;
      flex-flow: row wrap;
      gap: var(--ss-space-sm);
    }
    #page-ships-safe .expenses-petty-denom {
      display: flex;
      flex-direction: column;
      flex: 1 1 min(5.5rem, 100%);
      max-inline-size: 8rem;
      gap: 0.3rem;
      margin: 0;
      padding: 0.55rem 0.6rem;
      border: 1px solid var(--border-color);
      border-radius: var(--ss-radius-small);
      min-height: 48px;
    }
    #page-ships-safe .expenses-petty-denom span {
      font-size: var(--ss-type-caption);
      font-weight: 600;
    }
    #page-ships-safe .expenses-petty-log-title {
      margin: 0 0 var(--ss-space-md);
      font-size: var(--ss-type-subhead);
      font-weight: 600;
    }
    #page-ships-safe .expenses-petty-month {
      margin: 0 0 var(--ss-space-sm);
      border: 1px solid var(--border-color);
      border-radius: var(--ss-radius-control);
      background: transparent;
    }
    #page-ships-safe .expenses-petty-month > summary {
      cursor: pointer;
      list-style: none;
      padding: var(--ss-space-md);
      font-weight: 600;
      font-size: var(--ss-type-body);
      min-height: 44px;
    }
    #page-ships-safe .expenses-petty-month > summary::-webkit-details-marker { display: none; }
    #page-ships-safe .expenses-petty-month[open] > summary {
      border-bottom: 1px solid var(--border-color);
    }
    #page-ships-safe .expenses-petty-month-actions {
      display: flex;
      justify-content: flex-end;
      padding: var(--ss-space-md) var(--ss-space-md) 0;
    }
    #page-ships-safe .expenses-petty-month .ss-month-list {
      padding: 0 var(--ss-space-md) var(--ss-space-md);
    }
    #page-ships-safe .expenses-petty-post-grid { margin: 0.75rem 0 1rem; }
    #page-ships-safe .expenses-petty-pay-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: var(--ss-space-sm);
    }
    #page-ships-safe .expenses-petty-pay-item {
      border: 1px solid var(--border-color);
      border-radius: var(--ss-radius-control);
      background: transparent;
    }
    #page-ships-safe .expenses-petty-pay-item > summary::-webkit-details-marker { display: none; }
    #page-ships-safe .expenses-petty-pay-item[open] > summary {
      border-bottom: 1px solid var(--border-color);
    }
    #page-ships-safe .expenses-petty-pay-form { padding: var(--ss-space-md); }
    #page-ships-safe .expenses-petty-pay-live {
      display: block;
      margin: 0 0 0.75rem;
      padding: 0.65rem 0.8rem;
      border-radius: var(--ss-radius-control);
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      font-weight: 650;
      font-size: var(--ss-type-body);
      line-height: 1.35;
      color: var(--text-primary);
    }
    #page-ships-safe .expenses-petty-pay-live.is-ready {
      border-color: color-mix(in srgb, var(--success, #22c55e) 55%, var(--border-color));
      background: color-mix(in srgb, var(--success, #22c55e) 16%, var(--bg-card));
      color: var(--success, #16a34a);
    }
    #page-ships-safe .expenses-petty-pay-live.is-short {
      border-color: color-mix(in srgb, var(--warning, #f59e0b) 50%, var(--border-color));
      background: color-mix(in srgb, var(--warning, #f59e0b) 14%, var(--bg-card));
      color: var(--text-primary);
    }
    #page-ships-safe .expenses-petty-pay-live.is-over {
      border-color: color-mix(in srgb, var(--danger, #ef4444) 50%, var(--border-color));
      background: color-mix(in srgb, var(--danger, #ef4444) 14%, var(--bg-card));
      color: var(--danger, #b91c1c);
    }
    #page-ships-safe .expenses-petty-pay-warn {
      margin: 0 0 0.75rem;
      color: var(--danger, #b91c1c);
      font-size: var(--ss-type-caption);
    }
    #page-ships-safe .expenses-petty-pay-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ss-space-sm);
      margin-top: var(--ss-space-md);
    }
    #page-ships-safe .expenses-petty-row-cat { min-width: 9rem; }
    #page-ships-safe .expenses-empty,
    #page-ships-safe .ss-empty {
      padding: var(--ss-space-xl) var(--ss-space-lg);
      color: var(--text-secondary);
      font-size: var(--ss-type-body);
      text-align: center;
    }
    @container ships-safe (max-width: 639px) {
      #page-ships-safe .ss-metrics { grid-template-columns: 1fr; }
      #page-ships-safe .ss-stack-row { flex-wrap: wrap; }
    }
    @media (max-width: 639px) {
      #page-ships-safe .ss-metrics { grid-template-columns: 1fr; }
      #page-ships-safe .ss-stack-row { flex-wrap: wrap; }
    }

    /* Tab panes */
    .hr-tab-pane { display: none; min-width: 0; }
    .hr-tab-pane.active { display: block; overflow-x: hidden; }
    .hr-tab-pane .card + .card { margin-top: 1rem; }

    /* HR: left-align all table column titles (header cells only; body alignment unchanged) */
    #page-hr table thead th,
    #page-hr .data-table thead th {
      text-align: left;
    }

    /* Familiarisation: left-align templates and vessel compliance table headers */
    #page-familiarisation #familiarisation-templates-list .data-table thead th,
    #page-familiarisation #familiarisation-crew-status-wrap .data-table thead th {
      text-align: left;
    }

    /* Warehouse: left-align table column titles (header cells only) */
    [id^="page-warehouse-"] table thead th,
    [id^="page-warehouse-"] .data-table thead th,
    #page-config-warehouses table thead th,
    #page-config-warehouses .data-table thead th,
    .modal-overlay[id^="warehouse-"] table th {
      text-align: left;
    }
    /* PMS spare parts inventory: title + filters on one flex row; wrap on narrow/tablet */
    #page-pms-parts .action-menu-btn-full[aria-expanded="true"] {
      background: color-mix(in srgb, var(--accent-primary, #2563eb) 12%, var(--bg-card, #fff));
      border-color: color-mix(in srgb, var(--accent-primary, #2563eb) 45%, var(--border-color));
      color: var(--text-primary);
    }
    #page-pms-parts .pms-parts-inventory-toolbar {
      display: flex;
      align-items: safe center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    #page-pms-parts .pms-parts-inventory-toolbar .card-title {
      flex: 0 1 auto;
      min-inline-size: 8rem;
    }
    #page-pms-parts .pms-parts-inventory-filters {
      display: flex;
      flex: 1 1 16rem;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: stretch;
      min-inline-size: 0;
    }
    #page-pms-parts .pms-parts-inventory-filters .form-select,
    #page-pms-parts .pms-parts-inventory-filters .form-input {
      flex: 1 1 8rem;
      min-inline-size: 7rem;
      max-inline-size: 100%;
    }
    @container pms-parts-inventory (inline-size < 40rem) {
      #page-pms-parts .pms-parts-inventory-filters .form-select,
      #page-pms-parts .pms-parts-inventory-filters .form-input {
        flex: 1 1 calc(50% - 0.5rem);
      }
    }
    @container pms-parts-inventory (inline-size < 28rem) {
      #page-pms-parts .pms-parts-inventory-filters .form-select,
      #page-pms-parts .pms-parts-inventory-filters .form-input {
        flex: 1 1 100%;
      }
    }
    #page-pms-parts .pms-part-menu-btn {
      appearance: none;
      inline-size: 2rem;
      block-size: 2rem;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    #page-pms-parts .pms-part-menu-btn:hover {
      background: color-mix(in srgb, var(--text-primary) 8%, transparent);
      color: var(--text-primary);
    }
    #page-pms-parts .pms-part-menu-btn:active { transform: scale(0.96); }
    #page-pms-parts .pms-part-menu {
      margin: 0;
      inset: unset;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
      color: var(--text-primary);
      padding: 0.25rem;
      min-inline-size: 13rem;
      box-shadow: 0 8px 24px color-mix(in srgb, #000 18%, transparent);
    }
    #page-pms-parts .pms-part-menu-item {
      display: flex;
      inline-size: 100%;
      align-items: center;
      gap: 0.5rem;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 0.875rem;
      text-align: start;
      padding: 0.5rem 0.7rem;
      border-radius: 7px;
      cursor: pointer;
    }
    #page-pms-parts .pms-part-menu-item:hover { background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
    #page-pms-parts .pms-part-menu-item.danger { color: var(--danger, #b42318); }
    #page-pms-parts td.pms-part-actions,
    #page-pms-parts th.pms-part-actions { white-space: nowrap; text-align: start; width: 16%; }
    #page-pms-parts .pms-part-actions-row { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.35rem; flex-wrap: nowrap; }
    #page-pms-parts .pms-part-actions-row .btn { white-space: nowrap; flex: 0 0 auto; }
    @media (prefers-reduced-motion: reduce) {
      #page-pms-parts .pms-part-menu-btn:active { transform: none; }
    }
    @media (prefers-reduced-transparency: reduce) {
      #page-pms-parts .pms-part-menu { background: var(--bg-card); box-shadow: none; border-width: 2px; }
    }

    #page-pms-parts .wh-storage-tree ul {
      list-style: none;
      padding-left: 1rem;
      margin: 0;
    }
    #page-pms-parts .wh-storage-tree > ul {
      padding-left: 0;
    }
    #page-pms-parts .pms-storage-used {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #page-pms-parts .pms-storage-used li {
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      gap: 0.75rem;
      padding: 0.4rem 0;
      border-bottom: 1px solid var(--border-color);
    }
    #page-pms-parts .pms-storage-used li:last-child { border-bottom: 0; }
    #page-pms-parts .pms-storage-used-count {
      color: var(--text-secondary);
      font-size: 0.8125rem;
    }

    #page-warehouse-operations .warehouse-hub-toolbar {
      display: flex;
      align-items: safe center;
      gap: 0.5rem;
      flex-wrap: nowrap;
      min-inline-size: 0;
      max-inline-size: 100%;
    }
    #page-warehouse-operations .warehouse-hub-location-select {
      flex: 1 1 auto;
      min-inline-size: 0;
      max-inline-size: 16rem;
      height: 36px;
      min-height: 36px;
      padding: 0 2rem 0 0.75rem;
      font-size: 0.875rem;
      border-radius: 6px;
      box-sizing: border-box;
      field-sizing: content;
      line-height: 34px;
      display: inline-flex;
      align-items: center;
      background-position: right 0.75rem center;
    }
    #page-warehouse-operations .warehouse-hub-toolbar .btn-page-config {
      flex: 0 0 auto;
      height: 36px;
      box-sizing: border-box;
    }
    /* Warehouse Segmented Tab Navigation — Zone Inspection standard */
    #page-warehouse-operations .warehouse-nav-segmented-wrap {
      display: inline-flex;
      background: var(--bg-body, rgba(148, 163, 184, 0.12));
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 3px;
      gap: 3px;
      margin-bottom: 1.25rem;
      width: auto;
      max-width: 100%;
      box-sizing: border-box;
      user-select: none;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    #page-warehouse-operations .wh-tab-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      padding: 0 0.85rem;
      height: 32px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 0.8125rem;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      white-space: nowrap;
      transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 100ms ease;
      -webkit-tap-highlight-color: transparent;
      box-sizing: border-box;
    }
    #page-warehouse-operations .wh-tab-btn:hover {
      background: rgba(148, 163, 184, 0.08);
      color: var(--text-primary);
    }
    #page-warehouse-operations .wh-tab-btn:active {
      transform: scale(0.96);
    }
    #page-warehouse-operations .wh-tab-btn.active {
      background: var(--accent-primary, #2563eb);
      color: #ffffff;
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
    }
    html[data-theme="dark"] #page-warehouse-operations .wh-tab-btn.active {
      background: var(--accent-primary, #0ea5e9);
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(14, 165, 233, 0.35);
    }
    /* Card headers, selects and action buttons in warehouse & procurement panels */
    #page-warehouse-operations .card,
    #page-config-warehouses .card,
    #page-procurement-dashboard .card,
    #page-vessel-requisitions .card,
    #page-my-requests .card,
    #page-new-request .card,
    #page-procurement-basket .card,
    #page-procurement-config .card {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      background: var(--bg-card);
    }
    #page-warehouse-operations .card-header,
    #page-config-warehouses .card-header,
    #page-procurement-dashboard .card-header,
    #page-vessel-requisitions .card-header,
    #page-my-requests .card-header,
    #page-new-request .card-header,
    #page-procurement-basket .card-header,
    #page-procurement-config .card-header {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border-color);
    }
    #page-warehouse-operations .card-header select.form-select,
    #page-config-warehouses .card-header select.form-select,
    #page-procurement-dashboard .card-header select.form-select,
    #page-vessel-requisitions .card-header select.form-select,
    #page-my-requests .card-header select.form-select,
    #page-new-request .card-header select.form-select,
    #page-procurement-basket .card-header select.form-select,
    #page-procurement-config .card-header select.form-select {
      height: 32px;
      padding: 0 1.85rem 0 0.65rem;
      font-size: 0.8125rem;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      box-sizing: border-box;
      line-height: 30px;
      display: inline-flex;
      align-items: center;
      background-position: right 0.6rem center;
    }
    #page-warehouse-operations .btn-sm,
    #page-warehouse-operations .btn.btn-sm,
    #page-config-warehouses .btn-sm,
    #page-config-warehouses .btn.btn-sm,
    #page-procurement-dashboard .btn-sm,
    #page-procurement-dashboard .btn.btn-sm,
    #page-vessel-requisitions .btn-sm,
    #page-vessel-requisitions .btn.btn-sm,
    #page-my-requests .btn-sm,
    #page-my-requests .btn.btn-sm,
    #page-new-request .btn-sm,
    #page-new-request .btn.btn-sm,
    #page-procurement-basket .btn-sm,
    #page-procurement-basket .btn.btn-sm,
    #page-procurement-config .btn-sm,
    #page-procurement-config .btn.btn-sm {
      height: 32px;
      min-height: 32px;
      padding: 0 0.85rem;
      font-size: 0.8125rem;
      font-weight: 600;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      line-height: 1;
      white-space: nowrap;
      transition: opacity 120ms ease, transform 100ms ease;
    }
    #page-warehouse-operations .btn,
    #page-config-warehouses .btn,
    #page-procurement-dashboard .btn,
    #page-vessel-requisitions .btn,
    #page-my-requests .btn,
    #page-new-request .btn,
    #page-procurement-basket .btn,
    #page-procurement-config .btn {
      box-sizing: border-box;
    }
    #page-warehouse-operations .btn-primary,
    #page-config-warehouses .btn-primary,
    #page-procurement-dashboard .btn-primary,
    #page-vessel-requisitions .btn-primary,
    #page-my-requests .btn-primary,
    #page-new-request .btn-primary,
    #page-procurement-basket .btn-primary,
    #page-procurement-config .btn-primary {
      border: none;
    }
    #page-warehouse-operations .btn-secondary,
    #page-config-warehouses .btn-secondary,
    #page-procurement-dashboard .btn-secondary,
    #page-vessel-requisitions .btn-secondary,
    #page-my-requests .btn-secondary,
    #page-new-request .btn-secondary,
    #page-procurement-basket .btn-secondary,
    #page-procurement-config .btn-secondary {
      border: none;
    }
    #page-warehouse-operations .btn-page-config,
    #page-config-warehouses .btn-page-config {
      border: none;
    }
    #page-warehouse-operations .btn-sm:active,
    #page-config-warehouses .btn-sm:active,
    #page-procurement-dashboard .btn-sm:active,
    #page-vessel-requisitions .btn-sm:active,
    #page-my-requests .btn-sm:active,
    #page-new-request .btn-sm:active,
    #page-procurement-basket .btn-sm:active,
    #page-procurement-config .btn-sm:active {
      transform: scale(0.96);
    }
    #page-warehouse-operations textarea.form-input,
    #page-new-request textarea.form-input,
    #page-procurement-config textarea.form-input {
      resize: vertical;
      max-width: 100%;
      min-height: 72px;
      max-height: 200px;
      box-sizing: border-box;
    }
    #page-warehouse-operations .warehouse-stock-toolbar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    #page-warehouse-operations .warehouse-stock-toolbar .form-input {
      flex: 1 1 12rem;
      min-inline-size: 8rem;
      height: 32px;
      min-height: 32px;
      padding: 0 0.75rem;
      font-size: 0.8125rem;
      line-height: 30px;
      border-radius: 6px;
      box-sizing: border-box;
    }
    #page-warehouse-operations .warehouse-stock-toolbar .btn,
    #page-warehouse-operations .warehouse-stock-toolbar .btn.btn-sm {
      flex: 0 0 auto;
      height: 32px;
      min-height: 32px;
      margin-inline-start: auto;
    }
        /* Modern minimal tables (Apple / Emil Kowalski design engineering) */
    .warehouse-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border-color);
      flex-wrap: nowrap;
      min-height: 48px;
      box-sizing: border-box;
    }
    .warehouse-card-header-main {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      min-width: 0;
      flex: 1 1 auto;
    }
    .wh-header-hint {
      font-size: 0.78rem;
      color: var(--text-secondary);
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .warehouse-card-header-actions {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .warehouse-filter-select {
      height: 32px;
      min-height: 32px;
      padding: 0 1.75rem 0 0.65rem;
      font-size: 0.8125rem;
      font-weight: 500;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background-color: var(--bg-card);
      color: var(--text-primary);
      width: auto;
      min-width: 140px;
      max-width: 220px;
      box-sizing: border-box;
      cursor: pointer;
      line-height: 30px;
      display: inline-flex;
      align-items: center;
      background-position: right 0.6rem center;
    }
    @media (max-width: 640px) {
      .warehouse-card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      .warehouse-card-header-main {
        width: 100%;
        justify-content: space-between;
      }
      .warehouse-card-header-actions {
        width: 100%;
      }
      .warehouse-filter-select {
        width: 100%;
        max-width: 100%;
      }
      .wh-header-hint {
        display: none;
      }
    }
    .wh-table-container {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 0 0 8px 8px;
      box-sizing: border-box;
    }
    .wh-modern-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
      text-align: left;
      font-variant-numeric: tabular-nums;
    }
    .wh-modern-table thead th {
      background: var(--bg-secondary, rgba(148, 163, 184, 0.08));
      color: var(--text-secondary);
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 0.55rem 0.85rem;
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
      user-select: none;
    }
    .wh-modern-table thead th.th-action {
      text-align: left;
      padding-left: 0.85rem;
    }
    .wh-modern-table tbody td.td-action {
      text-align: right;
      padding-right: 1rem;
    }
    #warehouse-stock-list .wh-modern-table tbody td.td-action {
      text-align: left;
      padding-left: 0.85rem;
    }
    .wh-modern-table tbody td {
      padding: 0.6rem 0.85rem;
      border-bottom: 1px solid var(--border-color);
      vertical-align: middle;
      color: var(--text-primary);
      transition: background 100ms ease;
    }
    .wh-modern-table tbody tr:last-child td {
      border-bottom: none;
    }
    @media (hover: hover) and (pointer: fine) {
      .wh-modern-table tbody tr:hover td {
        background: color-mix(in srgb, var(--accent-primary, #3b82f6) 6%, transparent);
      }
    }
    .wh-cell-primary {
      font-weight: 600;
      color: var(--text-primary);
    }
    .wh-cell-muted {
      color: var(--text-secondary);
      font-size: 0.775rem;
    }
    .wh-order-num {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-weight: 600;
      font-size: 0.8125rem;
      color: var(--accent-primary, #2563eb);
    }
    .wh-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.15rem 0.5rem;
      font-size: 0.72rem;
      font-weight: 600;
      border-radius: 999px;
      line-height: 1.25;
      white-space: nowrap;
      user-select: none;
    }
    .wh-pill-urgent {
      background: rgba(239, 68, 68, 0.12);
      color: var(--danger, #dc2626);
      box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25) inset;
    }
    .wh-pill-high {
      background: rgba(245, 158, 11, 0.12);
      color: var(--warning, #d97706);
      box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25) inset;
    }
    .wh-pill-normal {
      background: var(--bg-secondary, rgba(148, 163, 184, 0.12));
      color: var(--text-secondary);
    }
    .wh-pill-critical {
      background: rgba(239, 68, 68, 0.14);
      color: var(--danger, #dc2626);
      font-weight: 700;
      box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3) inset;
    }
    .wh-pill-status {
      background: var(--bg-secondary, rgba(148, 163, 184, 0.14));
      color: var(--text-primary);
      text-transform: capitalize;
    }
    .wh-table-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      padding: 0 0.75rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-primary);
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 120ms ease, transform 100ms ease, border-color 120ms ease;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    @media (hover: hover) and (pointer: fine) {
      .wh-table-btn:hover {
        background: var(--bg-secondary);
        border-color: var(--accent-primary, #3b82f6);
        color: var(--accent-primary, #3b82f6);
      }
    }
    .wh-table-btn:active {
      transform: scale(0.96);
    }
    .wh-table-empty {
      padding: 2.5rem 1rem;
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.85rem;
    }
    .wh-table-empty svg {
      display: block;
      margin: 0 auto 0.5rem;
      opacity: 0.4;
    }
    #page-warehouse-operations .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.75rem;
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
    }
    #page-config-warehouses .config-warehouses-layout {
      display: grid;
      grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
      gap: 1.25rem;
      align-items: start;
    }
    @media (max-width: 960px) {
      #page-config-warehouses .config-warehouses-layout { grid-template-columns: 1fr; }
    }
    /* =========================================================================
       SAFETY MEETINGS DASHBOARD (Dashboard UI Kit Standards)
       ========================================================================= */
    #page-safety-meetings .card {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      background: var(--bg-card);
      margin-bottom: 1.5rem !important;
    }
    #page-safety-meetings .safety-meetings-top-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem !important;
    }
    #page-safety-meetings .safety-stat-card {
      padding: 1rem 1.25rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 98px;
      box-sizing: border-box;
      transition: border-color 120ms ease, box-shadow 120ms ease;
    }
    #page-safety-meetings .safety-stat-card.is-in-progress {
      border-color: rgba(245, 158, 11, 0.5);
      background: rgba(245, 158, 11, 0.03);
    }
    #page-safety-meetings .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      padding: 0.85rem 1.25rem;
      border-bottom: 1px solid var(--border-color);
      flex-wrap: nowrap;
      min-height: 52px;
      box-sizing: border-box;
    }
    #page-safety-meetings .card-header-main {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      min-width: 0;
      flex: 1 1 auto;
    }
    #page-safety-meetings .wh-header-hint {
      font-size: 0.8rem;
      color: var(--text-secondary);
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #page-safety-meetings .card-header-actions {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    #page-safety-meetings .form-select,
    #page-safety-meetings select.form-select {
      height: 32px;
      min-height: 32px;
      padding: 0 1.85rem 0 0.65rem;
      font-size: 0.8125rem;
      font-weight: 500;
      line-height: 30px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background-color: var(--bg-card);
      color: var(--text-primary);
      box-sizing: border-box;
      background-position: right 0.6rem center;
      display: inline-flex;
      align-items: center;
    }
    #page-safety-meetings .form-input,
    #page-safety-meetings input.form-input {
      height: 32px;
      min-height: 32px;
      padding: 0 0.75rem;
      font-size: 0.8125rem;
      line-height: 30px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background-color: var(--bg-card);
      color: var(--text-primary);
      box-sizing: border-box;
    }
    #page-safety-meetings .btn-sm,
    #page-safety-meetings .btn.btn-sm {
      height: 32px;
      min-height: 32px;
      padding: 0 0.85rem;
      font-size: 0.8125rem;
      font-weight: 600;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      line-height: 1;
      white-space: nowrap;
      transition: opacity 120ms ease, transform 100ms ease;
    }
    #page-safety-meetings .btn-sm:active {
      transform: scale(0.96);
    }
    @media (max-width: 768px) {
      #page-safety-meetings .card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      #page-safety-meetings .card-header-main {
        width: 100%;
        justify-content: space-between;
      }
      #page-safety-meetings .card-header-actions {
        width: 100%;
        flex-wrap: wrap;
      }
      #page-safety-meetings .card-header-actions .form-input,
      #page-safety-meetings .card-header-actions .form-select {
        flex: 1 1 auto;
      }
      #page-safety-meetings .wh-header-hint {
        display: none;
      }
    }
    #page-safety-meetings .wh-table-container {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 0 0 8px 8px;
      box-sizing: border-box;
    }
    #page-safety-meetings .wh-modern-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
      text-align: left;
      font-variant-numeric: tabular-nums;
    }
    #page-safety-meetings .wh-modern-table thead th {
      background: var(--bg-secondary, rgba(148, 163, 184, 0.08));
      color: var(--text-secondary);
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 0.5rem 0.65rem;
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
      user-select: none;
    }
    #page-safety-meetings .wh-modern-table thead th.th-action {
      text-align: left;
      padding-left: 0.65rem;
    }
    #page-safety-meetings .wh-modern-table tbody td {
      padding: 0.55rem 0.65rem;
      border-bottom: 1px solid var(--border-color);
      vertical-align: middle;
      color: var(--text-primary);
      transition: background 100ms ease;
    }
    #page-safety-meetings .wh-modern-table tbody tr:last-child td {
      border-bottom: none;
    }
    @media (hover: hover) and (pointer: fine) {
      #page-safety-meetings .wh-modern-table tbody tr:hover td {
        background: color-mix(in srgb, var(--accent-primary, #3b82f6) 6%, transparent);
      }
      #page-safety-meetings .wh-modern-table tbody tr.is-in-progress:hover td {
        background: rgba(245, 158, 11, 0.08);
      }
    }
    #page-safety-meetings .wh-modern-table tbody tr.is-in-progress td {
      background: rgba(245, 158, 11, 0.03);
    }
    #page-safety-meetings .wh-cell-primary {
      font-weight: 600;
      color: var(--text-primary);
    }
    #page-safety-meetings .wh-cell-muted {
      color: var(--text-secondary);
      font-size: 0.775rem;
    }
    #page-safety-meetings .wh-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.15rem 0.55rem;
      font-size: 0.72rem;
      font-weight: 600;
      border-radius: 999px;
      line-height: 1.25;
      white-space: nowrap;
      user-select: none;
    }
    #page-safety-meetings .wh-pill-normal {
      background: var(--bg-secondary, rgba(148, 163, 184, 0.12));
      color: var(--text-secondary);
    }
    #page-safety-meetings .wh-pill-status {
      background: rgba(16, 185, 129, 0.12);
      color: #059669;
      box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25) inset;
    }
    #page-safety-meetings .wh-pill-in-progress {
      background: rgba(245, 158, 11, 0.14);
      color: #b45309;
      box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35) inset;
    }
    #page-safety-meetings .wh-table-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      padding: 0 0.75rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-primary);
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 120ms ease, transform 100ms ease, border-color 120ms ease;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    @media (hover: hover) and (pointer: fine) {
      #page-safety-meetings .wh-table-btn:hover {
        background: var(--bg-secondary);
        border-color: var(--accent-primary, #3b82f6);
        color: var(--accent-primary, #3b82f6);
      }
      #page-safety-meetings .wh-table-btn-resume:hover {
        border-color: #d97706;
        color: #d97706;
        background: rgba(245, 158, 11, 0.08);
      }
      #page-safety-meetings .wh-table-btn-danger:hover {
        border-color: var(--danger);
        color: var(--danger);
        background: rgba(239, 68, 68, 0.08);
      }
    }
    #page-safety-meetings .wh-table-btn:active {
      transform: scale(0.96);
    }
    #page-safety-meetings .wh-table-empty {
      padding: 3rem 1.5rem;
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.85rem;
    }
    #record-meeting-modal textarea.form-input,
    #record-meeting-modal textarea {
      resize: vertical;
      max-width: 100%;
      min-height: 72px;
      max-height: 220px;
      box-sizing: border-box;
    }
    #record-meeting-modal select.form-select {
      height: 36px;
      line-height: 34px;
      padding-top: 0;
      padding-bottom: 0;
      box-sizing: border-box;
    }
    #page-config-warehouses .config-wh-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.65rem 0.75rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 0.5rem;
      cursor: pointer;
      background: var(--bg-card);
    }
    #page-config-warehouses .config-wh-row.is-selected {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary);
    }
    #page-config-warehouses .config-wh-row-meta {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }
    #page-config-warehouses .wh-storage-tree ul {
      list-style: none;
      padding-left: 1rem;
      margin: 0.25rem 0;
    }
    #page-config-warehouses .wh-storage-tree > ul {
      padding-left: 0;
    }
    .fam-page-layout {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.4fr);
      gap: 1rem;
      align-items: start;
      margin-bottom: 1rem;
    }
    @media (max-width: 960px) {
      .fam-page-layout { grid-template-columns: 1fr; }
    }
    .fam-editor-meta-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.45rem 0.65rem;
    }
    .fam-editor-meta-grid .form-group { margin-bottom: 0; }
    .fam-editor-meta-grid .form-group--full { grid-column: 1 / -1; }
    @media (max-width: 640px) {
      .fam-editor-meta-grid { grid-template-columns: 1fr; }
    }
    .fam-editor-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.65rem;
      padding-top: 0.65rem;
      border-top: 1px solid var(--border-color);
    }

    /* Badge on tab (inbox count) */
    .hr-tab-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      font-size: 0.68rem;
      font-weight: 700;
      line-height: 18px;
      text-align: center;
      font-variant-numeric: tabular-nums;
      border-radius: 999px;
      background: var(--danger, #ef4444);
      color: #fff;
    }

    /* Quick-stat tiles */
    .hr-stat-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 0.875rem;
      margin-bottom: 1.25rem;
    }
    #page-hr .hr-conduct-help {
      padding: 0.875rem 1rem;
      margin-bottom: 1rem;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    #page-hr .hr-conduct-help strong { color: var(--text-primary); }
    #page-hr .hr-conduct-policy-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.875rem 1rem;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      margin-bottom: 0.625rem;
      background: var(--bg-card, var(--bg-primary));
    }
    #page-hr .hr-conduct-policy-row.is-inactive { opacity: 0.72; }
    #page-hr .hr-conduct-policy-row-title {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }
    #page-hr .hr-conduct-policy-row-meta {
      font-size: 0.8rem;
      color: var(--text-secondary);
      line-height: 1.45;
    }
    #page-hr .hr-conduct-policy-row-actions {
      display: flex;
      flex-shrink: 0;
      gap: 0.35rem;
    }
    #page-hr .hr-conduct-ladder-step {
      padding: 0.75rem;
      margin-bottom: 0.625rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-secondary);
    }
    #page-hr .hr-conduct-ladder-step:last-child { margin-bottom: 0; }

    .hr-stat-tile {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 1rem 1.1rem;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }
    .hr-stat-tile-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .hr-stat-tile-value {
      font-size: 1.65rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1;
    }
    .hr-stat-tile-value.accent  { color: var(--accent-primary, #3b82f6); }
    .hr-stat-tile-value.warning { color: var(--warning, #f59e0b); }
    .hr-stat-tile-value.danger  { color: var(--danger, #ef4444); }

    /* ── Leave entitlement matrix toolbar ───────────────────────── */
    .hr-ent-toolbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--bg-primary);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: nowrap;
      padding: 0.5rem 0;
      margin-bottom: 0.75rem;
      border-bottom: 1px solid var(--border-color);
    }
    .hr-ent-toolbar .hr-ent-search {
      flex: 1 1 10rem;
      min-width: 8rem;
      max-width: 18rem;
    }
    .hr-ent-toolbar .hr-ent-rows-label {
      font-size: 0.78rem;
      color: var(--text-secondary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .hr-ent-toolbar .hr-ent-rows-select {
      width: 5.25rem;
      flex-shrink: 0;
    }
    .hr-ent-toolbar .hr-ent-save-all {
      flex-shrink: 0;
      white-space: nowrap;
    }
    .hr-ent-toolbar .hr-ent-spacer { flex: 1; }
    .hr-ent-toolbar .hr-ent-page-info {
      font-size: 0.78rem;
      color: var(--text-secondary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .hr-ent-pager {
      display: flex;
      gap: 0.25rem;
      flex-shrink: 0;
    }

    /* ── Matrix table: uniform column colours ───────────────────── */
    #hr-ent-rank-matrix-table th,
    #hr-ent-crew-matrix-table th {
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
      border-bottom: 2px solid var(--border-color);
    }
    #hr-ent-rank-matrix-table td,
    #hr-ent-crew-matrix-table td {
      vertical-align: middle;
      border-bottom: 1px solid var(--border-color);
    }
    /* Sticky name column */
    #hr-ent-rank-matrix-table td:first-child,
    #hr-ent-crew-matrix-table td:first-child {
      background: var(--bg-primary) !important;
      font-weight: 500;
      border-right: 1px solid var(--border-color);
    }
    #hr-ent-rank-matrix-table th:first-child,
    #hr-ent-crew-matrix-table th:first-child {
      background: var(--bg-secondary) !important;
      border-right: 1px solid var(--border-color);
      min-width: 11rem;
      text-align: left;
    }
    /* Last (Actions) column — body cells only; headers follow #page-hr left-aligned titles */
    #hr-ent-rank-matrix-table td:last-child,
    #hr-ent-crew-matrix-table td:last-child {
      text-align: right;
      padding-right: 0.6rem;
    }
    /* Unsaved amber left-edge */
    #hr-ent-rank-matrix-body tr[style*="inset 3px 0 0 #f59e0b"],
    #hr-ent-crew-matrix-body tr[style*="inset 3px 0 0 #f59e0b"] {
      background: rgba(245,158,11,0.03);
    }

    /* Company-defaults table */
    #hr-day-types-catalog-body tr.hr-ent-catalog-flash td {
      background: color-mix(in srgb, var(--accent-primary, #3b82f6) 14%, var(--bg-primary)) !important;
      transition: background 0.35s ease;
    }
    tr.hr-dt-lt-subrow td {
      background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
      border-top: 1px dashed var(--border-color);
    }
    tr.hr-dt-lt-subrow td:first-child {
      box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-primary, #3b82f6) 45%, var(--border-color));
    }

    /* Nested sub-cards (catalogue, mappings, custom day type, rank, crew) inside leave allowances */
    #hr-leave-entitlements-admin-card .hr-ent-sub-card.card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-primary);
      box-shadow: none;
      margin-bottom: 1rem;
    }
    #hr-leave-entitlements-admin-card .hr-ent-sub-card.card:last-child {
      margin-bottom: 0;
    }
    #hr-leave-entitlements-admin-card .hr-ent-sub-card .card-header {
      background: var(--bg-secondary);
      border-radius: 10px 10px 0 0;
      border-bottom: 1px solid var(--border-color);
      padding: 0.65rem 1rem;
    }
    #hr-leave-entitlements-admin-card .hr-ent-sub-card .card-body {
      padding: 0.875rem 1rem;
    }

    /* Leave matrix <details> (rank + per-person) */
    .hr-ent-matrix-details > summary {
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      color: var(--text-secondary);
      margin-bottom: 0;
      padding: 0.1rem 0;
    }
    .hr-ent-matrix-details > summary::-webkit-details-marker { display: none; }
    .hr-ent-matrix-details > summary::before {
      content: '';
      display: inline-block;
      width: 0.55rem;
      height: 0.55rem;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
      transition: transform 0.15s;
      flex-shrink: 0;
    }
    .hr-ent-matrix-details[open] > summary::before { transform: rotate(45deg); }
    .hr-ent-matrix-details[open] > summary { color: var(--text-primary); margin-bottom: 0.5rem; }

    /* Unsaved-count badges on card headers */
    .hr-ent-unsaved-badge {
      display: none;
      font-size: 0.7rem;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #f59e0b;
      font-weight: 600;
      vertical-align: middle;
    }
    [data-theme="dark"] .hr-ent-unsaved-badge {
      background: rgba(245,158,11,0.15);
      color: #fbbf24;
      border-color: rgba(245,158,11,0.4);
    }

    @media (max-width: 700px) {
      .hr-tab-btn { padding: 0.6rem 0.75rem; font-size: 0.8rem; }
      .hr-stat-row { grid-template-columns: 1fr 1fr; }
      .hr-ent-toolbar { flex-wrap: wrap; }
      .hr-ent-toolbar .hr-ent-search { max-width: 100%; }
      .hr-ent-toolbar .hr-ent-spacer { display: none; }
    }