/** stylesheets/src/variables.css **/
/* ============================================================
   AZIMUTH — Ocean Theme
   Dark blues palette + gold accents
   ============================================================ */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  --color-ocean-deepest: #050d1a;
  --color-ocean-deep: #0a1628;
  --color-ocean-mid: #0f2240;
  --color-ocean-surface: #163358;
  --color-ocean-light: #1e4a7a;
  --color-ocean-mist: #2a6099;

  --color-gold: #c9a84c;
  --color-gold-light: #e2c46a;
  --color-gold-dark: #9e7d33;
  --color-gold-subtle: rgba(201, 168, 76, 0.15);

  --color-text-primary: #e8edf5;
  --color-text-secondary: #8fa8c8;
  --color-text-muted: #4e6a8a;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-gold: rgba(201, 168, 76, 0.3);

  --color-danger: #c0392b;
  --color-danger-light: rgba(192, 57, 43, 0.15);

  --color-warning: #f39c12;
  --color-warning-light: rgba(243, 156, 18, 0.15);
  --color-warning-text: #f7c373;

  --color-success: #1a8a5a;
  --color-success-light: rgba(26, 138, 90, 0.15);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 8px 48px rgba(0, 0, 0, 0.7);

  --transition: 180ms ease;
}


/** stylesheets/src/base.css **/
/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background-color: var(--color-ocean-deepest);
  color: var(--color-text-primary);
  min-height: 100vh;
  background-image: radial-gradient(ellipse at 20% 0%, rgba(30, 74, 122, 0.4) 0%, transparent 60%),
  radial-gradient(ellipse at 80% 100%, rgba(10, 22, 40, 0.8) 0%, transparent 60%);
}

a {
  color: var(--color-gold-light);
  text-decoration: none;
}

a:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

ul {
  list-style: none;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-ocean-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--color-ocean-mist);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-dark);
}


/** stylesheets/src/navbar.css **/
/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 60px;
  background: var(--color-ocean-deep);
  border-bottom: 1px solid var(--color-border-gold);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-brand {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.navbar-logo {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.account-menu {
  position: relative;
}

.account-menu-trigger {
  width: 38px;
  height: 38px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-border-gold);
  background: var(--color-ocean-surface);
  color: var(--color-gold-light);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.account-menu-avatar {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.account-menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vessel-websocket-status-indicator {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--color-ocean-deep);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 3;
  pointer-events: none;
}

.account-menu-trigger-with-image {
  overflow: visible;
}

.account-menu-trigger-with-image .account-menu-avatar {
  z-index: 1;
}

.vessel-websocket-status-connected {
  background: #2bc16c;
}

.vessel-websocket-status-stale {
  background: #f4a641;
}

.vessel-websocket-status-disconnected {
  background: #df4f4f;
}

@keyframes vessel-websocket-message-glow-pulse {
  0% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 4px 0 rgba(43, 193, 108, 0.4);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 12px 2px rgba(43, 193, 108, 0.6);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 4px 0 rgba(43, 193, 108, 0.4);
  }
}

.vessel-websocket-status-indicator-with-message-glow {
  animation: vessel-websocket-message-glow-pulse 600ms ease-out;
}

.account-menu-trigger:hover {
  background: var(--color-ocean-light);
  border-color: var(--color-gold);
}

.account-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  min-width: 180px;
  background: var(--color-ocean-mid);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 300;
}

.account-menu-item {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.account-menu-section-label {
  padding: 0.3rem 0.55rem 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.account-menu-vessel-section {
  max-height: 40vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.account-menu-vessel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-menu-vessel-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.75rem;
}

.account-menu-vessel-selected {
  color: var(--color-gold-light);
  font-size: 0.72rem;
  border: 1px solid var(--color-border-gold);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.account-menu-divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  margin: 0.25rem 0;
}

.account-menu-item:hover {
  background: var(--color-ocean-surface);
  border-color: var(--color-border);
}

.account-menu-item-danger {
  color: #f1a39e;
}

.account-menu-item-danger:hover {
  border-color: var(--color-danger);
  background: var(--color-danger-light);
}

.app-shell {
  opacity: 0;
  transition: opacity 380ms ease;
}

.app-shell-visible {
  opacity: 1;
}

.startup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(30, 74, 122, 0.18) 0%, rgba(5, 13, 26, 0.98) 65%);
  opacity: 1;
  transition: opacity 420ms ease;
}

.startup-overlay-fading {
  opacity: 0;
}

.startup-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.startup-overlay-logo {
  width: min(340px, 58vw);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
}

.startup-overlay-spinner {
  width: 52px;
  height: 52px;
  border-width: 4px;
}


/** stylesheets/src/layout.css **/
/* ── Main content ───────────────────────────────────────────── */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

/* ── Section header ─────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.section-header-action {
  margin-left: auto;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .navbar {
    padding: 0 1rem;
  }

  .main-content {
    padding: 1.5rem 1rem;
  }

  .form-row {
    flex-direction: column;
  }

  .relationship-form {
    flex-direction: column;
  }

  .permission-assignment-header {
    flex-direction: column;
    align-items: stretch;
  }

  .permission-assignment-row {
    grid-template-columns: 1fr;
  }

  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 95vh;
  }
}


/** stylesheets/src/chrome.css **/
/* ── Badge ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em 0.6em;
  background: var(--color-gold-subtle);
  border: 1px solid var(--color-border-gold);
  color: var(--color-gold-light);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 20px;
}

/* ── Loading indicator ──────────────────────────────────────── */
.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--color-text-secondary);
  gap: 1rem;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-ocean-surface);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.alert-error {
  background: var(--color-danger-light);
  border: 1px solid var(--color-danger);
  color: #f1a39e;
}

.alert-warning {
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
  color: var(--color-warning-text);
}

.alert-icon {
  flex-shrink: 0;
  color: var(--color-warning);
  font-size: 1rem;
  line-height: 1.3;
  margin-top: 0.1rem;
}

.alert-error .alert-icon {
  color: var(--color-danger);
}

.alert-close {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  opacity: 0.7;
}

.alert-close:hover {
  opacity: 1;
}

.error-list {
  padding-left: 1.25rem;
  list-style: disc;
}

.error-list li {
  margin-bottom: 0.2rem;
}

/* ── Empty state ────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  text-align: center;
  color: var(--color-text-secondary);
  gap: 1rem;
}

.empty-state-icon {
  font-size: 3.5rem;
  opacity: 0.3;
}


/** stylesheets/src/components.css **/
/* ── Component grid ─────────────────────────────────────────── */
.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* ── Component card ─────────────────────────────────────────── */
.component-card {
  background: var(--color-ocean-mid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
}

.component-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-gold);
  box-shadow: 0 4px 24px rgba(201, 168, 76, 0.15);
}

.component-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0;
}

.component-card-body {
  padding: 0.5rem 1rem 1rem;
}

.component-card-actions {
  display: flex;
  gap: 0.25rem;
}

.component-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0.35rem 0 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.component-description {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.component-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
}

.meta-label {
  color: var(--color-text-muted);
  min-width: 44px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.meta-value {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Component type badges ──────────────────────────────────── */
.component-type-badge {
  display: inline-block;
  padding: 0.18em 0.6em;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.type-vessel {
  background: rgba(21, 94, 117, 0.5);
  color: #7dd3e8;
  border: 1px solid rgba(125, 211, 232, 0.3);
}

.type-engine {
  background: rgba(120, 40, 20, 0.5);
  color: #f4a07a;
  border: 1px solid rgba(244, 160, 122, 0.3);
}

.type-tank {
  background: rgba(10, 55, 90, 0.5);
  color: #6ab8e8;
  border: 1px solid rgba(106, 184, 232, 0.3);
}

.type-filter {
  background: rgba(30, 80, 30, 0.5);
  color: #7dcc88;
  border: 1px solid rgba(125, 204, 136, 0.3);
}

.type-pump {
  background: rgba(60, 30, 100, 0.5);
  color: #b89cf5;
  border: 1px solid rgba(184, 156, 245, 0.3);
}

.type-impeller {
  background: rgba(20, 70, 100, 0.5);
  color: #7ab8e8;
  border: 1px solid rgba(122, 184, 232, 0.3);
}

.type-anode {
  background: rgba(90, 80, 10, 0.5);
  color: #e8d46a;
  border: 1px solid rgba(232, 212, 106, 0.3);
}

.type-battery {
  background: rgba(10, 70, 50, 0.5);
  color: #6adbb0;
  border: 1px solid rgba(106, 219, 176, 0.3);
}

.type-appliance {
  background: rgba(80, 50, 10, 0.5);
  color: #e8b56a;
  border: 1px solid rgba(232, 181, 106, 0.3);
}

.type-document {
  background: rgba(15, 25, 80, 0.5);
  color: #8a9ef0;
  border: 1px solid rgba(138, 158, 240, 0.3);
}

.type-other {
  background: rgba(50, 55, 70, 0.5);
  color: #a8aec8;
  border: 1px solid rgba(168, 174, 200, 0.3);
}

.type-water {
  background: rgba(8, 60, 120, 0.5);
  color: #5caee4;
  border: 1px solid rgba(92, 174, 228, 0.3);
}

.type-fire {
  background: rgba(140, 50, 0, 0.5);
  color: #ff7040;
  border: 1px solid rgba(255, 112, 64, 0.3);
}

.type-power {
  background: rgba(60, 55, 0, 0.6);
  color: #f5d840;
  border: 1px solid rgba(245, 216, 64, 0.3);
}

/* ── Component type icons (hierarchy + relationship tree) ────── */
/* Fixed-width Tabler-icon replacement for the textual component-type badge.
   Each instance is a square cell so adjacent component names stay aligned
   regardless of which icon a node uses. */
.component-type-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  margin: -0.15rem -0.1rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  line-height: 1;
  overflow: visible;
}
.component-type-icon .ti {
  font-size: 1.875rem;
  line-height: 1;
}

/* Per-type accent colors carried over from the previous badge palette. */
.component-type-icon-vessel    { color: #7dd3e8; }
.component-type-icon-engine    { color: #f4a07a; }
.component-type-icon-tank      { color: #6ab8e8; }
.component-type-icon-filter    { color: #7dcc88; }
.component-type-icon-pump      { color: #b89cf5; }
.component-type-icon-impeller  { color: #7ab8e8; }
.component-type-icon-anode     { color: #e8d46a; }
.component-type-icon-battery   { color: #6adbb0; }
.component-type-icon-appliance { color: #e8b56a; }
.component-type-icon-document  { color: #8a9ef0; }
.component-type-icon-water     { color: #5caee4; }
.component-type-icon-fire      { color: #ff7040; }
.component-type-icon-power     { color: #f5d840; }
.component-type-icon-other     { color: #a8aec8; }

/* Name-driven override: any component whose name contains "heater" reads in a
   warm red regardless of its base ComponentType (e.g. "Water Heater" overrides
   the cool blue water tint). Higher specificity than the per-type rules above
   so it wins without !important. */
.component-type-icon.component-type-icon-heater {
  color: #ff7040;
}

/* Nautical port (red) / starboard (green) indicator dot.
   Glows via layered box-shadows so it reads as a status light, not just a pip. */
.component-type-side-dot {
  position: absolute;
  bottom: -0.15rem;
  right: -0.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.component-type-icon-port .component-type-side-dot {
  background: #ff4d4f;
  box-shadow:
    0 0 4px rgba(255, 77, 79, 0.95),
    0 0 10px rgba(255, 77, 79, 0.6),
    0 0 18px rgba(255, 77, 79, 0.35);
}
.component-type-icon-starboard .component-type-side-dot {
  background: #3ddc6f;
  box-shadow:
    0 0 4px rgba(61, 220, 111, 0.95),
    0 0 10px rgba(61, 220, 111, 0.6),
    0 0 18px rgba(61, 220, 111, 0.35);
}

/* ── Relationship tree ──────────────────────────────────────── */
.relationship-tree {
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
  overflow-x: auto;
}

.tree-node {
  padding-left: 1.25rem;
  position: relative;
}

.tree-node::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}

.tree-node:first-child {
  padding-left: 0;
}

.tree-node:first-child::before {
  display: none;
}

.tree-node-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.4rem;
  background: var(--color-ocean-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--color-text-primary);
  position: relative;
}

.tree-node-label-button {
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.tree-node-label-button:hover {
  border-color: var(--color-border-gold);
  background: rgba(22, 51, 88, 0.95);
  box-shadow: 0 2px 12px rgba(201, 168, 76, 0.12);
}

.tree-node-label-active {
  border-color: var(--color-border-gold);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.4);
}

.tree-node-label::before {
  content: '─ ';
  color: var(--color-border);
  position: absolute;
  left: -1.1rem;
}

.tree-node:first-child > .tree-node-row > .tree-node-label::before {
  display: none;
}

.tree-node-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.tree-node-row > .tree-node-label {
  margin-bottom: 0;
}

.tree-node-add-child {
  opacity: 0;
  transition: opacity var(--transition);
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  color: var(--color-text-secondary);
}

.tree-node-row:hover .tree-node-add-child {
  opacity: 1;
}

.tree-node-add-child:hover {
  color: var(--color-gold);
}

.tree-children {
  margin-left: 1.25rem;
  border-left: 1px solid var(--color-border);
  padding-left: 0.75rem;
  margin-top: 0.25rem;
}

/* ── Relationship form ──────────────────────────────────────── */
.relationship-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

/* ── Interactive Component Hierarchy view ─────────────────────────── */
.component-hierarchy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section-header-controls {
  display: flex;
  gap: 0.4rem;
  margin-left: 0.75rem;
  flex-wrap: wrap;
}
.nested-component-card {
  background: var(--color-ocean-mid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.nested-component-card:hover {
  border-color: var(--color-border-gold);
}
.nested-component-card-depth-0 {
  background: var(--color-ocean-mid);
}
.nested-component-card-depth-1,
.nested-component-card-depth-3,
.nested-component-card-depth-5 {
  background: var(--color-ocean-surface);
}
.nested-component-card-depth-2,
.nested-component-card-depth-4,
.nested-component-card-depth-6 {
  background: var(--color-ocean-deep);
}
.nested-component-card-drop-target {
  border: 1px dashed var(--color-gold) !important;
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25), 0 4px 24px rgba(201, 168, 76, 0.18);
}
.nested-component-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
}
.nested-component-card-header:active {
  cursor: grabbing;
}
.nested-component-card-header .nested-component-drag-handle {
  cursor: grab;
}
.nested-component-card-header .nested-component-drag-handle:active {
  cursor: grabbing;
}
.nested-component-drag-handle {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
  letter-spacing: -2px;
}
.nested-component-toggle {
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
}
.nested-component-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nested-component-card-actions {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
.nested-component-unlink {
  color: var(--color-gold-light);
  border-color: rgba(201, 168, 76, 0.3);
}
.nested-component-unlink:hover:not(:disabled) {
  background: var(--color-gold-subtle);
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.nested-component-details {
  padding: 0.6rem 0.85rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.nested-component-description {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0 0 0.6rem;
}
.nested-component-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.4rem 1rem;
  margin-bottom: 0.6rem;
}
.nested-component-images {
  margin-top: 0.6rem;
}
.nested-component-details-with-images {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}
.nested-component-details-main {
  flex: 1 1 auto;
  min-width: 0;
}
.nested-component-details-images {
  flex: 0 0 auto;
  max-width: 60%;
}
.nested-component-details-images .image-carousel {
  gap: 0.4rem;
  justify-content: flex-end;
}
.nested-component-details-images .image-carousel-item {
  max-width: none;
}
.nested-component-image-thumbnail {
  /* Inline ng-style provides the actual width/height per depth + image count. */
  width: auto;
  height: auto;
}
@media (max-width: 720px) {
  .nested-component-details-with-images {
    flex-direction: column;
  }
  .nested-component-details-images {
    max-width: 100%;
  }
  .nested-component-details-images .image-carousel {
    justify-content: flex-start;
  }
}
.nested-component-children-toggle-row {
  padding: 0.4rem 0.85rem;
}
.nested-component-children {
  padding: 0.4rem 0.85rem 0.85rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-left: 2px solid var(--color-border);
  margin-left: 1.25rem;
}
/* ── Component drop action modal ──────────────────────────────────── */
.component-drop-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0;
}
.component-drop-actions .btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
  padding: 0.7rem 0.9rem;
}
.component-drop-actions .btn-help {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: normal;
}

/* ── Allowed measurement types checkboxes (component create/edit) ─── */
.component-measurement-type-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.35rem;
}

.component-measurement-type-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}

.component-measurement-type-checkbox input[type="checkbox"] {
  cursor: pointer;
}

/** stylesheets/src/buttons.css **/
/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
  white-space: nowrap;
  line-height: 1.4;
}

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

.btn-primary {
  background: var(--color-gold);
  color: var(--color-ocean-deepest);
  border-color: var(--color-gold);
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-ocean-surface);
  border-color: var(--color-ocean-mist);
  color: var(--color-text-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--color-gold);
  border-color: var(--color-border-gold);
  font-size: 0.8rem;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-gold-subtle);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.btn-icon:hover {
  background: var(--color-ocean-surface);
  color: var(--color-gold-light);
}

.btn-danger {
  background: transparent;
  color: var(--color-danger);
  border-color: rgba(192, 57, 43, 0.3);
  font-size: 0.8rem;
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
  color: #f1a39e;
}

.btn-small {
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
}

.btn-deactivate {
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
}

/* ── Complete-task button ────────────────────────────────────── */
.btn-complete-task {
  background: transparent;
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.5);
  font-weight: 500;
}

.btn-complete-task:hover:not(:disabled) {
  background: rgba(76, 175, 80, 0.15);
  border-color: #4caf50;
  color: #a5d6a7;
}

/* ── Solid danger button (used in confirm dialogs) ───────────── */
.btn-danger-solid {
  background: var(--color-danger);
  color: #fff;
  border: 1px solid var(--color-danger);
}

.btn-danger-solid:hover:not(:disabled) {
  background: #a93226;
  border-color: #a93226;
  color: #fff;
}

/* ── Task nav buttons ────────────────────────────────────────── */
.btn-task-nav {
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn-task-nav:hover:not([disabled]) {
  background: var(--color-ocean-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-gold);
}

.btn-task-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Link button ─────────────────────────────────────────────── */
.btn-link {
  background: transparent;
  border: none;
  color: var(--color-gold-light);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  justify-content: flex-start;
}

/* ── Google sign-in button ───────────────────────────────────── */
.btn-google {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border: 1px solid #dadce0;
  color: #3c4043;
  font-weight: 600;
  gap: 0.55rem;
}

.btn-google:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%);
  border-color: #b8c4d6;
}

.btn-google::before {
  content: 'G';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #4285f4 0%, #34a853 45%, #fbbc05 70%, #ea4335 100%);
}


/** stylesheets/src/modals.css **/
/* ── Modal overlay ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 13, 26, 0.85);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: fadeIn 150ms ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal {
  background: var(--color-ocean-mid);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 180ms ease;
}

.modal-large {
  max-width: 800px;
}

/* ── Task detail modal prev/next navigation ─────────────────── */
.task-detail-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-ocean-deep);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
}

.task-detail-nav-position {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

@keyframes slideUp {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: 0.25rem;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.modal-close:hover {
  background: var(--color-ocean-surface);
  color: var(--color-text-primary);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.empty-modal-text {
  color: var(--color-text-secondary);
}

/* ── Detail view ────────────────────────────────────────────── */
.detail-section {
  margin-bottom: 2rem;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--color-border-gold);
  padding-bottom: 0.5rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.detail-description {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.detail-item {
  background: var(--color-ocean-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.85rem;
}

.detail-item-wide {
  grid-column: 1 / -1;
}

.detail-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}

.detail-value {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-primary);
  word-break: break-word;
}

.inventory-ledger-table-wrapper {
  overflow-x: auto;
}

.inventory-ledger-location-table-section {
  margin-top: 1rem;
}

.inventory-ledger-location-table-section:first-of-type {
  margin-top: 0.75rem;
}

.inventory-ledger-location-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.inventory-ledger-location-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(76, 117, 201, 0.28);
  border: 1px solid rgba(110, 152, 239, 0.55);
  color: var(--color-text-primary);
  font-size: 0.78rem;
  line-height: 1;
}

.inventory-ledger-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.inventory-ledger-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.inventory-ledger-table td {
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.inventory-ledger-column-header-row td {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
  background: var(--color-ocean-deep);
}

.inventory-ledger-table tbody tr.inventory-ledger-entry-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.inventory-ledger-location-header-row td {
  padding: 0.15rem 0.1rem 0.5rem;
  background: transparent;
  border-top: none;
  border-bottom: none;
}

.inventory-ledger-location-spacer-row td {
  padding: 0.45rem 0;
  background: transparent;
  border-top: none;
  border-bottom: none;
}

.inventory-ledger-location-balance-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(76, 117, 201, 0.28);
  border: 1px solid rgba(110, 152, 239, 0.55);
  color: var(--color-text-primary);
  font-size: 0.78rem;
  line-height: 1;
}

.inventory-ledger-aggregate-row {
  background: rgba(76, 117, 201, 0.08);
}

.inventory-ledger-expand-button {
  margin-right: 0.5rem;
  min-width: 1.7rem;
}

.inventory-ledger-adjustment-details-row td {
  background: rgba(13, 25, 43, 0.52);
  border-bottom: 1px solid var(--color-border);
}

.inventory-ledger-adjustment-details-table {
  width: 100%;
  border-collapse: collapse;
}

.inventory-ledger-adjustment-details-table td {
  padding: 0.45rem 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.detail-links {
  margin-top: 0.75rem;
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.link-chip {
  display: inline-block;
  padding: 0.25em 0.7em;
  background: var(--color-gold-subtle);
  border: 1px solid var(--color-border-gold);
  border-radius: 20px;
  color: var(--color-gold-light);
  font-size: 0.75rem;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background var(--transition);
}

.link-chip:hover {
  background: rgba(201, 168, 76, 0.25);
  text-decoration: none;
}

.detail-subsection {
  margin-top: 1.25rem;
}

.detail-subsection-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Modal subsection (e.g. tasks list inside schedule detail modal) ── */
.modal-subsection {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.modal-subsection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-subsection-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
}

.empty-state-compact {
  padding: 1rem 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ── Confirm dialog modal ────────────────────────────────────── */
.modal-overlay-confirm {
  z-index: 300;
}

.modal-confirm {
  max-width: 420px;
}

.modal-confirm-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 1.75rem 1.5rem;
}

.modal-confirm-message {
  font-size: 1rem;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.modal-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}


/** stylesheets/src/tables.css **/
/* ── Data table ─────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: var(--color-ocean-deep);
}

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

.data-table tbody tr:hover td {
  background: var(--color-ocean-surface);
}

/* ── Table action cell ──────────────────────────────────────── */
.table-actions {
  display: flex;
  gap: 0.25rem;
  white-space: nowrap;
}


/** stylesheets/src/forms.css **/
/* ── Forms ──────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 1rem;
  flex: 1;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.required {
  color: var(--color-gold);
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-gold-dark);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

/* Make the native calendar / clock picker icon visible on dark backgrounds */
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75);
  opacity: 0.8;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px;
}

.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.form-control[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-control[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--color-gold-subtle);
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.inventory-template-suggestion-field {
  position: relative;
}

.inventory-template-suggestion-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  background: var(--color-ocean-deep);
  box-shadow: var(--shadow-card);
  max-height: 14rem;
  overflow-y: auto;
}

.inventory-template-suggestion-loading {
  padding: 0.6rem 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.inventory-template-suggestion-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
}

.inventory-template-suggestion-item:last-child {
  border-bottom: none;
}

.inventory-template-suggestion-item:hover {
  background: var(--color-ocean-surface);
}

.inventory-template-suggestion-item-name {
  font-weight: 600;
}

.inventory-template-suggestion-item-meta {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234e6a8a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

select.form-control option {
  background: var(--color-ocean-mid);
  color: var(--color-text-primary);
}

.form-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.form-legend {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  padding: 0 0.5rem;
}

.form-static-value {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
}

.link-entry {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.link-entry .form-control {
  flex: 1;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  margin-top: 1rem;
}


/* ── Fieldset variant for execution notes ────────────────────── */
.form-fieldset-execution {
  border-color: rgba(122, 184, 232, 0.3);
}

.form-fieldset-execution .form-legend {
  color: #7ab8e8;
}

/* ── Form hint ──────────────────────────────────────────────── */
.form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ── Custom checkbox ─────────────────────────────────────────
   Applied globally to all input[type="checkbox"] elements so
   every checkbox in the app — event-modal row includes,
   accordion includes, component measurement-type pickers, and
   any other ad-hoc checkbox — shares a consistent gold-accented
   dark-theme appearance. No HTML changes required.

   Exceptions that hide the native input behind a custom
   indicator span (e.g. .checklist-checkbox, .drive-checkbox)
   are unaffected because those inputs have opacity:0 and the
   visual rendering is delegated entirely to the sibling span.
   ──────────────────────────────────────────────────────────── */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 0.25rem;
  background: var(--color-ocean-mid);
  vertical-align: middle;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72%;
}

input[type="checkbox"]:hover {
  border-color: var(--color-border-gold);
  background-color: var(--color-ocean-surface);
}

input[type="checkbox"]:checked {
  background-color: var(--color-gold-subtle);
  border-color: var(--color-gold);
  /* SVG checkmark — stroke colour matches --color-gold (#c9a84c).
     The day theme redefines --color-gold but we embed the dark-theme
     hex directly here; the day-theme override block below swaps it. */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.8 2.8 4.2-4.8' stroke='%23c9a84c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}


/** stylesheets/src/tabs.css **/
/* ── View tabs ──────────────────────────────────────────────── */
.view-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0;
}

.view-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color var(--transition), border-color var(--transition);
  margin-bottom: -1px;
}

.view-tab-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.view-tab-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.view-tab:hover {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-ocean-mist);
}

.view-tab-active {
  color: var(--color-gold-light);
  border-bottom-color: var(--color-gold);
  font-weight: 600;
}

/* Scale the badge down slightly so it sits neatly inside the tab label */
.view-tab-unread-badge {
  font-size: 0.6rem;
  min-width: 1.1rem;
  height: 1.1rem;
}

/** stylesheets/src/tasks.css **/

/* ── Task status badges ──────────────────────────────────────── */
.status-badge {
  display: inline-block;
  padding: 0.18em 0.55em;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.status-badge.status-created {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.35);
}

.status-badge.status-warn {
  background: rgba(255, 193, 7, 0.15);
  color: #ffd54f;
  border: 1px solid rgba(255, 193, 7, 0.35);
}

.status-badge.status-due {
  background: rgba(255, 152, 0, 0.15);
  color: #ffb74d;
  border: 1px solid rgba(255, 152, 0, 0.35);
}

.status-badge.status-late {
  background: rgba(239, 83, 80, 0.15);
  color: #ef9a9a;
  border: 1px solid rgba(239, 83, 80, 0.35);
}

/* ── Task progress badges ────────────────────────────────────── */
.progress-badge {
  display: inline-block;
  padding: 0.18em 0.55em;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.progress-badge.progress-unstarted {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.progress-badge.progress-started {
  background: rgba(122, 184, 232, 0.15);
  color: #7ab8e8;
  border: 1px solid rgba(122, 184, 232, 0.35);
}

.progress-badge.progress-dismissed {
  background: rgba(78, 106, 138, 0.12);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.progress-badge.progress-complete {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.35);
}

/* ── Task row left-border status accent ──────────────────────── */
.task-row {
  cursor: pointer;
}

.task-row.status-created {
  border-left: 3px solid #4caf50;
}

.task-row.status-warn {
  border-left: 3px solid #ffd54f;
}

.task-row.status-due {
  border-left: 3px solid #ff9800;
}

.task-row.status-late {
  border-left: 3px solid #ef5350;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.breadcrumb-back {
  background: none;
  border: none;
  color: var(--color-gold-light);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
}

.breadcrumb-back:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--color-text-muted);
}

.breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* ── Schedule active / inactive badges ───────────────────────── */
.schedule-active-badge {
  display: inline-block;
  padding: 0.18em 0.55em;
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.35);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.schedule-inactive-badge {
  display: inline-block;
  padding: 0.18em 0.55em;
  background: rgba(78, 106, 138, 0.1);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Show-inactive toggle ────────────────────────────────────── */
.show-inactive-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-left: auto;
  user-select: none;
}

.show-inactive-toggle input[type="checkbox"] {
  cursor: pointer;
}

/* ── Work items inline panel ─────────────────────────────────── */
.work-items-cell {
  padding: 0 !important;
  background: var(--color-ocean-deep) !important;
  border-left: none !important;
}

.work-items-panel {
  padding: 1.25rem 1.5rem 1rem;
  border-top: 2px solid var(--color-gold-dark);
  border-bottom: 1px solid var(--color-border);
}

.work-items-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.work-items-panel-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.work-items-panel-description {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: 0.2rem;
  line-height: 1.5;
}

.work-items-panel-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: flex-start;
}

.work-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.work-item {
  background: var(--color-ocean-mid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7rem 1rem;
}

.work-item-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.work-item-progress-btn,
.work-item-progress-indicator {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.work-item-progress-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition), color var(--transition);
}

.work-item-progress-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
}

.work-item-progress-btn:hover {
  transform: scale(1.25);
}

.work-item-progress-btn.progress-unstarted,
.work-item-progress-indicator.progress-unstarted {
  color: var(--color-text-muted);
}

.work-item-progress-btn.progress-started,
.work-item-progress-indicator.progress-started {
  color: #7ab8e8;
}

.work-item-progress-btn.progress-complete,
.work-item-progress-indicator.progress-complete {
  color: #81c784;
}

.work-item-title-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

.work-item-title-text.complete {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.component-tag {
  display: inline-block;
  padding: 0.12em 0.5em;
  background: var(--color-gold-subtle);
  border: 1px solid var(--color-border-gold);
  border-radius: 20px;
  color: var(--color-gold-light);
  font-size: 0.7rem;
  white-space: nowrap;
}

/* ── Work item template / execution detail sections ──────────── */
.work-item-template-section {
  margin-top: 0.65rem;
  padding: 0.65rem 0.85rem;
  background: rgba(201, 168, 76, 0.05);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-sm);
}

.work-item-execution-section {
  margin-top: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: rgba(122, 184, 232, 0.05);
  border: 1px solid rgba(122, 184, 232, 0.2);
  border-radius: var(--radius-sm);
}

.work-item-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.5rem;
}

.template-section-label {
  color: var(--color-gold-dark);
}

.execution-section-label {
  color: #5a9bc0;
}

.work-item-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.83rem;
}

.work-item-detail-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  min-width: 85px;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.work-item-detail-value {
  color: var(--color-text-secondary);
  flex: 1;
  word-break: break-word;
}

.parts-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 1;
}

.part-tag {
  display: inline-block;
  padding: 0.12em 0.45em;
  background: var(--color-ocean-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.73rem;
  color: var(--color-text-secondary);
}

.work-items-empty-state {
  padding: 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.work-item-inline-form {
  background: var(--color-ocean-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-top: 0.75rem;
}

.add-work-item-row {
  margin-top: 0.75rem;
}

/* ── Work item work log inline section ──────────────────────── */
.work-item-work-log-section {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}


/** stylesheets/src/images.css **/
/* ── Image Thumbnail Strip (edit modal) ─────────────────────── */
.image-thumbnail-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.image-thumbnail-entry {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100px;
}

.image-thumbnail-container {
  position: relative;
  width: 80px;
  height: 80px;
}

.image-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.image-thumbnail-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 10px;
  border-radius: 50%;
  background: var(--color-danger);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.image-thumbnail-description {
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  width: 100%;
  min-width: 0;
}

/* ── Image Upload Section (edit modal) ───────────────────────── */
/* Compact 3-button image-upload affordance. Every upload site across the app collapses to
   the same layout:
     [file-picker icon] [camera icon] [clipboard icon]   …status text…
   The native `<input type="file">` elements are kept in the DOM (still the actual file
   targets) but visually hidden via `.sr-only`; each visible icon-button calls
   `app.triggerHiddenFileInputById('<inputId>')` to programmatically open the native picker. */
.image-upload-section {
  margin-top: 0.5rem;
}

.image-upload-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Shared chrome for all three buttons in the row — gold border, ghost background, sized so
   the row stays slim on a single line. Used as a modifier alongside `.btn .btn-ghost` so the
   base button styling (disabled state, focus ring, etc.) is inherited. */
.image-upload-icon-btn {
  flex-shrink: 0;
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-sm);
  color: var(--color-gold);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.image-upload-icon-btn:hover:not(:disabled) {
  background: var(--color-gold-subtle);
}

.image-upload-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.image-upload-status {
  margin-top: 0.4rem;
}

.upload-success {
  color: var(--color-success);
  font-size: 0.85rem;
}

.upload-error {
  color: var(--color-danger);
  font-size: 0.85rem;
}

/* ── Screen-reader-only / visually hidden ────────────────────── */
.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;
}

.image-upload-status-warning {
  margin-top: 0.35rem;
}

.upload-warning {
  color: var(--color-gold);
  font-size: 0.85rem;
}

/* ── Paperclip popover variant ─────────────────────────────────
   Compact alternative to the inline 3-button row. Used by the checklist
   run row (and any other future row that needs the image upload to
   collapse into a single icon-button to save horizontal space). The
   paperclip-anchor wraps the trigger button + an absolutely-positioned
   popover panel that holds the file / camera / clipboard menu items.
   Visual values mirror the legacy `.checklist-run-item-popover*` rules
   so existing layouts stay unchanged while the partial decouples from
   checklist-specific class names. */
.image-upload-paperclip-anchor {
  position: relative;
  display: inline-flex;
}

.image-upload-popover {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  min-width: 12rem;
  max-width: 18rem;
  padding: 0.4rem;
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.image-upload-popover-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}

.image-upload-popover-action:hover {
  background: var(--color-ocean-surface);
  color: var(--color-gold-light);
}

.inventory-image-entry {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.inventory-image-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inventory-image-preview .image-thumbnail {
  cursor: pointer;
}

/* ── Profile Image Upload (account menu) ──────────────────────── */
.profile-image-upload-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.profile-image-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.profile-image-preview-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border-gold);
}

/* Note: the profile-modal upload row used to carry its own
   `.profile-image-upload-row` class for tighter spacing; now that profile
   shares the unified `imageUploadControls` partial, the `.image-upload-row`
   styles apply directly and the override has been removed. */

/* ── Account Menu Icon with Profile Image ──────────────────────── */
.account-menu-trigger-with-image {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-gold);
  background: var(--color-ocean-surface);
  overflow: visible;
  transition: border-color var(--transition);
  cursor: pointer;
}

.account-menu-trigger-with-image:hover {
  border-color: var(--color-gold);
}

.account-menu-trigger-with-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* ── Image Carousel (detail modal) ───────────────────────────── */
.image-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.image-carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-width: 200px;
}

.image-carousel-thumbnail {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--transition), opacity var(--transition);
}

.image-carousel-thumbnail:hover {
  border-color: var(--color-gold);
  opacity: 0.9;
}

.image-carousel-description {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  text-align: center;
  word-break: break-word;
}

/* ── Lightbox Overlay ─────────────────────────────────────────── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.lightbox-close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-ocean-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.lightbox-close:hover {
  background: var(--color-ocean-light);
  color: var(--color-gold);
}

.lightbox-counter {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  align-self: center;
}

/* Wrapper is position:relative so the half-image nav zones can be placed
   absolutely over the left and right halves of the image. */
.lightbox-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  display: block;
}

/* Each nav zone covers exactly one half of the image area. A pointer cursor
   indicates they are clickable; no background so the image shows through. */
.lightbox-nav-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  cursor: pointer;
  z-index: 1;
}

.lightbox-nav-prev {
  left: 0;
}

.lightbox-nav-next {
  right: 0;
}

.lightbox-description {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  text-align: center;
  max-width: min(90vw, 700px);
  padding: 0 1rem;
  line-height: 1.5;
}


/** stylesheets/src/users.css **/
/* ===== ROLE UI ===== */
.role-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-gold);
  background: var(--color-gold-subtle);
  color: var(--color-gold-light);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: lowercase;
}

.role-chip-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.role-chip-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-ocean-deep);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.role-chip-option:hover {
  border-color: var(--color-border-gold);
  color: var(--color-gold-light);
}

.role-chip-option-selected {
  border-color: var(--color-border-gold);
  background: rgba(201, 168, 76, 0.2);
  color: var(--color-gold-light);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.2);
}

.role-chip-check {
  font-size: 0.75rem;
}

.role-chip-label {
  text-transform: lowercase;
  letter-spacing: 0.03em;
}

.permission-assignment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.permission-assignment-add-button,
.permission-assignment-remove-button {
  flex-shrink: 0;
}

.permission-assignment-empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.permission-assignment-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.permission-assignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

.permission-assignment-summary-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.permission-assignment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(5, 13, 26, 0.22);
}

.permission-assignment-summary-name {
  color: var(--color-text-primary);
  font-size: 0.85rem;
}


/** stylesheets/src/auth.css **/
/* ===== AUTH OVERLAY ===== */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.auth-modal {
  width: 100%;
  max-width: 420px;
  background: var(--color-ocean-mid);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-modal-title {
  text-align: center;
  color: var(--color-gold-light);
  margin-bottom: 0.5rem;
}

.auth-error {
  background: var(--color-danger-light);
  border: 1px solid var(--color-danger);
  color: #f1a39e;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}

/* Pre-release welcome / contact block shown at the top of the signup
   modal only (see app/views/auth/overlay.scala.html). Uses the same
   gold-on-ocean palette as the surrounding auth modal so it reads as a
   first-class element of the form, not an injected banner. */
.auth-welcome {
  background: var(--color-gold-subtle);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  color: var(--color-gold-light);
  font-size: 0.9rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth-welcome p {
  margin: 0;
}

.auth-welcome-heading {
  font-weight: 600;
  color: var(--color-gold-light);
}

.auth-welcome-link {
  color: var(--color-gold-light);
  text-decoration: underline;
}

/** stylesheets/src/work-log.css **/
/* ── Work Log entries ───────────────────────────────────────── */
.work-log-entries-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.work-log-entry {
  background: var(--color-ocean-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
}

.work-log-entry-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.work-log-entry-times {
  display: flex;
  gap: 0.75rem;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

.work-log-entry-time {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.work-log-entry-time-label {
  color: var(--color-text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.work-log-entry-actions {
  display: flex;
  gap: 0.2rem;
  margin-left: auto;
  flex-shrink: 0;
}

.work-log-entry-notes {
  margin-top: 0.45rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.work-log-entry-inline-form {
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-top: 0.5rem;
}

.work-log-add-row {
  margin-bottom: 0.5rem;
}

.work-log-toggle-btn {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  min-height: 26px;
}

/* ── Work log status badges ─────────────────────────────────── */
.work-log-status-badge {
  display: inline-block;
  padding: 0.18em 0.55em;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.work-log-status-badge.work-log-status-unstarted {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.work-log-status-badge.work-log-status-started {
  background: rgba(122, 184, 232, 0.15);
  color: #7ab8e8;
  border: 1px solid rgba(122, 184, 232, 0.35);
}

.work-log-status-badge.work-log-status-completed {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.35);
}


/** stylesheets/src/onboarding.css **/
/* ── Onboarding UI ───────────────────────────────────────────── */
.onboarding-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1rem;
}

.onboarding-chat-panel,
.onboarding-tree-panel {
  background: var(--color-ocean-mid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
}

.onboarding-start-help {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}

.onboarding-start-row {
  margin-bottom: 0.75rem;
}

.onboarding-chat-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.onboarding-chat-toolbar {
  display: flex;
  justify-content: flex-end;
}

.onboarding-audio-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-ocean-deep);
  color: var(--color-text-secondary);
  padding: 0.32rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.onboarding-audio-toggle-button-enabled {
  color: #7dcc88;
  border-color: rgba(125, 204, 136, 0.45);
  background: rgba(26, 138, 90, 0.22);
}

.onboarding-audio-toggle-button-disabled {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: rgba(78, 106, 138, 0.12);
}

.onboarding-audio-toggle-button:hover {
  border-color: var(--color-border-gold);
}

.onboarding-audio-toggle-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.onboarding-messages {
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-right: 0.25rem;
}

.onboarding-message {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem;
  background: var(--color-ocean-surface);
}

.onboarding-message-user {
  border-color: rgba(122, 184, 232, 0.4);
}

.onboarding-message-agent {
  border-color: rgba(201, 168, 76, 0.35);
}

.onboarding-message-role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

.onboarding-message-text {
  color: var(--color-text-primary);
}

.onboarding-message-media {
  margin-top: 0.4rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.onboarding-message-image-carousel {
  gap: 0.4rem;
}

.onboarding-message-image-carousel .image-carousel-item {
  max-width: 90px;
}

.onboarding-message-image-carousel .image-carousel-thumbnail {
  width: 90px;
  height: 90px;
}

.onboarding-message-audio-play-button {
  padding: 0.22rem 0.6rem;
  min-height: 1.65rem;
  font-size: 0.78rem;
}

.onboarding-composer {
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
}

.onboarding-upload-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.onboarding-audio-controls {
  margin-bottom: 0.75rem;
}

.onboarding-audio-instruction {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  margin-bottom: 0.45rem;
}

.onboarding-audio-control-row {
  flex-wrap: wrap;
}

.onboarding-hold-record-button {
  min-width: 130px;
}

.onboarding-recording-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #f1a39e;
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}

.onboarding-recording-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ef5350;
  box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.6);
  animation: onboardingRecordPulse 1s ease-out infinite;
}

@keyframes onboardingRecordPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0.55rem rgba(239, 83, 80, 0);
  }
}

.onboarding-audio-review {
  margin-bottom: 0.5rem;
}

.onboarding-auto-upload-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  user-select: none;
}

.onboarding-auto-upload-toggle input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-gold);
  cursor: pointer;
}

.onboarding-upload-status {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}

.onboarding-actions {
  margin-top: 0.5rem;
}

.onboarding-tree-title {
  color: var(--color-gold-light);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.onboarding-tree-list {
  margin-left: 1rem;
}

.onboarding-tree-node-label {
  margin-bottom: 0.3rem;
}

.onboarding-tree-node-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.onboarding-tree-node-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.onboarding-tree-node-fact {
  font-size: 0.76rem;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
}

.onboarding-tree-node-description {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-text-primary);
  white-space: pre-line;
}

.onboarding-tree-placeholder {
  opacity: 0.8;
  border-style: dashed;
}

@media (max-width: 980px) {
  .onboarding-layout {
    grid-template-columns: 1fr;
  }
}


/** stylesheets/src/checklists.css **/
/* ── Checklists ──────────────────────────────────────────────── */
.checklist-root-filter {
  max-width: 420px;
  margin-bottom: 1rem;
}

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.checklist-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ocean-deep);
  padding: 1rem;
}

.checklist-panel-header {
  margin-bottom: 0.75rem;
}

.checklist-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checklist-list-entry {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  background: var(--color-ocean-mid);
}

.checklist-list-entry-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.checklist-template-modal,
.checklist-run-modal {
  max-width: 980px;
}

.checklist-template-item-row,
.checklist-run-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
  margin-bottom: 0.4rem;
}

/* ── Single-row checklist run item layout ────────────────────────────────────
 * The badge cell and title cell have fixed widths so every row's title starts
 * at the same x position. The right-cluster (notes → attachment → status) is
 * pinned to the right via `margin-left: auto` on `.checklist-run-item-actions`.
 * Measurement / warning / thumbnails only render when relevant and flow in
 * between the title and the right-cluster.
 *
 * Column-width tokens — local to the checklist run row, not promoted to global
 * variables.css because nothing else in the app cares about them.
 */
.checklist-run-item-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.85rem;
}

.checklist-run-item-title {
  /* Fixed-width title column → uniform left edge. Now a flex container
     to hold both the title text and the warning badge inline.
     align-items: baseline so the warning icon sits on the same baseline
     as the title text — feels like a glyph, not a stacked button. */
  flex: 0 0 16rem;
  width: 16rem;
  max-width: 16rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.checklist-run-item-title-text {
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The warning badge is now inside the title container. Make it bigger. */
.checklist-run-item-warning {
  flex-shrink: 0;
}

/* ── Title leading icon ─────────────────────────────────────────────────────
 * Resolved at runtime from componentType + title keywords. Sits at the start
 * of the title cell and takes a fixed width so titles align across rows even
 * when icons differ. Critical items get a soft glow via drop-shadow. */
.checklist-run-item-title-icon {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.checklist-run-item-title-icon-critical {
  filter: drop-shadow(0 0 0.25rem currentColor);
}

/* Tone classes — applied to .checklist-run-item-title-icon when the title text
 * matches a keyword. Color hierarchy (first match wins):
 *   port      → danger red
 *   starboard → success green
 *   fire      → warning orange
 *   fuel      → gold (matches the fuel tank semantics elsewhere in the app)
 *   water     → ocean blue
 *   battery   → warning yellow-ish
 */
.checklist-run-item-title-icon-tone-port      { color: var(--color-danger); }
.checklist-run-item-title-icon-tone-starboard { color: var(--color-success); }
.checklist-run-item-title-icon-tone-fire      { color: var(--color-warning); }
.checklist-run-item-title-icon-tone-fuel      { color: var(--color-gold-light); }
.checklist-run-item-title-icon-tone-water     { color: var(--color-ocean-accent, var(--color-info, #4aa3df)); }
.checklist-run-item-title-icon-tone-battery   { color: var(--color-warning); }

.checklist-run-item-badges {
  /* Fixed-width badge cell sized for up to 3 symmetrical FontAwesome icons.
     Math: 3 icons × 1rem + 2 gaps × 0.1rem = 3.2rem. */
  flex: 0 0 3.2rem;
  width: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
}

.checklist-run-item-badges .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

.checklist-run-item-badges .badge-critical {
  background: var(--color-danger-light);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.checklist-run-item-badges .badge-type-measurement {
  background: var(--color-gold-subtle);
  color: var(--color-gold-light);
  border: 1px solid var(--color-border-gold);
}

/* Badge icon — used by the warning triangle badge.
 *
 * Deliberately NOT wrapped in a flex container with explicit width/height: when an
 * inline-flex element has fixed dimensions its "baseline" becomes the bottom of the
 * box, which makes the icon float above the text it sits next to. By letting the
 * icon flow as a native inline element (just an <i> with a font-size) its baseline
 * follows the surrounding text glyph baseline. Combined with `align-items: baseline`
 * on the parent flex container, the icon sits like the next letter in the title.
 */
.checklist-run-item-badge-icon {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}

.checklist-run-item-badge-icon-warning {
  color: var(--color-warning);
}

/* Status icon strip — one button per status; active gets tone-tinted background */
.checklist-run-item-status-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.checklist-run-item-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.checklist-run-item-status-icon:hover {
  background: var(--color-ocean-surface);
  color: var(--color-text-primary);
}

.checklist-run-item-status-icon-active.checklist-run-item-status-tone-neutral {
  background: var(--color-ocean-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.checklist-run-item-status-icon-active.checklist-run-item-status-tone-success {
  background: var(--color-success-light);
  color: var(--color-success);
  border-color: var(--color-success);
}

.checklist-run-item-status-icon-active.checklist-run-item-status-tone-danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.checklist-run-item-status-icon-active.checklist-run-item-status-tone-warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.checklist-run-item-status-icon-active.checklist-run-item-status-tone-muted {
  background: var(--color-ocean-surface);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  opacity: 0.85;
}

/* Compact measurement value group */
.checklist-run-item-measurement {
  /* No auto margin here — the row uses .checklist-run-item-spacer to consume
     free space immediately after the title, which pushes the measurement (and
     the right-cluster after it) to the right edge of the row. */
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.checklist-run-item-value-group {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.checklist-run-item-value-input {
  width: 5.5rem;
  height: 1.75rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.85rem;
  text-align: right;
}

.checklist-run-item-value-input-narrow {
  width: 2.75rem;
  text-align: center;
}

.checklist-run-item-value-separator {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0 0.05rem;
}

.checklist-run-item-unit-pill {
  /* Renders as plain text alongside the measurement value, not a pill. Reserves a fixed
     MIN width so the title column starts at the same x position across rows with no
     capacity, but lets the pill grow to accommodate the optional `/<capacity>` suffix
     (e.g. "gal/100") on tank rows without truncating it. Widest base abbreviation is
     "psi"/"gal"/"h:m" at 3 chars; the suffix appends up to a few more digits. */
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  min-width: 2.25rem;
  padding: 0 0.15rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: default;
  white-space: nowrap;
}

/* Capacity suffix on the unit pill, rendered slightly de-emphasized so the primary
   unit symbol still reads as the main label. */
.checklist-run-item-unit-pill-capacity {
  margin-left: 0.05rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Right-cluster: notes → attachment → status. `margin-left: auto` pins it to
 * the right edge so the status strip is always last regardless of what
 * (measurement / warning / thumbnails) renders before it. */
/* Right-cluster: notes → attachment → status. Sits flush against the measurement
 * (or the spacer / thumbnails when no measurement is present). The row's spacer
 * does the right-alignment work; this cluster carries no margin-left auto so it
 * always packs directly against whatever element precedes it. */
.checklist-run-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Flex spacer between the title and the measurement / right-cluster. Consumes
 * all free space so everything to its right is pinned to the row's right edge,
 * regardless of which optional pieces (thumbnails, measurement) are rendering.
 * Has zero intrinsic size so it doesn't add any visible gap. */
.checklist-run-item-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

/* Visual divider between the notes/attachment pair and the status strip so the
 * status group reads as a distinct cluster from the meta-action icons. */
.checklist-run-item-actions .checklist-run-item-status-strip {
  margin-left: 0.25rem;
  padding-left: 0.4rem;
  border-left: 1px solid var(--color-border);
}

/* Notes button — dot indicator when notes exist */
.checklist-run-item-notes-trigger {
  position: relative;
}

.checklist-run-item-notes-trigger-active {
  color: var(--color-gold-light);
}

.checklist-run-item-notes-dot {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--color-gold);
  border-radius: 50%;
}

/* Warning icon — orange triangle, inherits .alert-icon palette via direct color */
.checklist-run-item-warning {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* The wrapper anchors the popover; it must not add any visual chrome of its own
     so the warning icon sits flush with the critical/measurement icons. */
  flex-shrink: 0;
}

.checklist-run-item-warning-trigger {
  /* Strip all native button chrome so this button looks identical to the plain
     <i> badge icons. The visible bounds come from the icon's own font-size.
     display: inline (not inline-flex) so the button's baseline IS the icon's
     glyph baseline — that's what makes it sit on the same baseline as text. */
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.checklist-run-item-warning-trigger:hover .checklist-run-item-badge-icon-warning {
  filter: brightness(1.2);
}

/* Warning popover panel — anchored bottom-right of its trigger.
   Mirrors the geometry of `.image-upload-popover` (shared upload partial)
   but with a distinct warning palette (orange border / warning-light
   background) so the auto-measurement caution reads as advisory rather
   than as an action menu. The attachment popover lives in images.css now
   that it uses the shared `imageUploadPaperclipMenu` partial. */
.checklist-run-item-popover {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  min-width: 12rem;
  max-width: 18rem;
  padding: 0.4rem;
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.checklist-run-item-warning-popover {
  border-color: var(--color-warning);
  background: var(--color-warning-light);
  max-width: 22rem;
}

.checklist-run-item-popover-text {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-warning-text);
  line-height: 1.35;
}

.checklist-run-item-error {
  margin-top: 0.4rem;
  margin-bottom: 0;
  font-size: 0.78rem;
  padding: 0.4rem 0.6rem;
}

/* Inline clamp warning surfaced beneath the row when the user types a value that exceeds
 * the row's effective `[min, max]` bounds (linked-component capacity OR the 0..100 percent
 * envelope). Inherits the chrome-wide `.alert-warning` palette (orange icon + tinted bg)
 * for visual parity with every other warning in the app; the overrides below just tighten
 * the geometry to match `.checklist-run-item-error` so the warning fits the compact
 * one-line run-item layout without pushing the next row down by an unreasonable amount. */
.checklist-run-item-clamp-warning {
  margin-top: 0.4rem;
  margin-bottom: 0;
  font-size: 0.78rem;
  padding: 0.4rem 0.6rem;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.3;
}

.checklist-run-item-clamp-warning .fa-triangle-exclamation {
  flex: 0 0 auto;
}

.checklist-run-item-notes-modal {
  max-width: 540px;
}

/* Images indicator — concise single-icon affordance with a count badge that lives in the
 * row's action cluster between notes and attachment. Mirrors the notes-trigger geometry so
 * the icons line up visually; the badge sits in the upper-right and shows the count rather
 * than a dot so the user knows at-a-glance how many images are attached without opening
 * the modal. Only rendered when count > 0 — empty rows never carry the icon. */
.checklist-run-item-images-trigger {
  position: relative;
}

.checklist-run-item-images-trigger:hover {
  color: var(--color-gold-light);
}

.checklist-run-item-images-count {
  position: absolute;
  top: -0.2rem;
  right: -0.35rem;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 0.2rem;
  background: var(--color-gold);
  color: var(--color-ocean-deep);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 0.95rem;
  text-align: center;
  border-radius: 0.6rem;
  pointer-events: none;
}

/* Images modal — same geometry envelope as the notes modal so the two feel like a pair. */
.checklist-run-item-images-modal {
  max-width: 540px;
}

.checklist-run-item-images-modal-empty {
  padding: 1rem 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.checklist-run-item-images-modal-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 60vh;
  overflow-y: auto;
}

/* One row per image: thumbnail | description input | remove button. The description input
 * is the flex-grower so it eats the leftover horizontal space; thumbnail and remove button
 * stay at intrinsic size. */
.checklist-run-item-images-modal-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-ocean-deep);
}

.checklist-run-item-images-modal-thumbnail img {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.checklist-run-item-images-modal-description {
  flex: 1 1 auto;
  min-width: 0;
}

.checklist-run-item-images-modal-remove {
  flex-shrink: 0;
}

/* Tone the whole card subtly based on the active status so a scanning user picks up state. */
.checklist-run-item-status-complete {
  border-color: rgba(26, 138, 90, 0.45);
  background-color: rgba(26, 138, 90, 0.06);
}

.checklist-run-item-status-failed,
.checklist-run-item-status-cannot_complete {
  border-color: rgba(192, 57, 43, 0.4);
  background-color: rgba(192, 57, 43, 0.06);
}

.checklist-run-item-status-issue_found {
  border-color: rgba(243, 156, 18, 0.45);
  background-color: rgba(243, 156, 18, 0.06);
}

/* Striped "marked done but still missing a measurement" overlay. Applied on top of the
   status-tone background above via repeating-linear-gradient so the row reads as "user
   clicked the status icon but never filled in the number — still needs work". The stripe
   color comes from the same tone palette as the solid backgrounds so the meaning is:
     solid green   = complete AND measured
     striped green = marked complete BUT measurement still missing.
   The `!important` overrides the solid status-tone background only when both classes
   coexist; no other rule in this file uses `!important` on `background`. */
.checklist-run-item-marked-done-but-incomplete.checklist-run-item-status-complete {
  background: repeating-linear-gradient(
    -45deg,
    rgba(26, 138, 90, 0.18),
    rgba(26, 138, 90, 0.18) 10px,
    rgba(26, 138, 90, 0.05) 10px,
    rgba(26, 138, 90, 0.05) 20px
  ) !important;
}

.checklist-run-item-marked-done-but-incomplete.checklist-run-item-status-failed,
.checklist-run-item-marked-done-but-incomplete.checklist-run-item-status-cannot_complete {
  background: repeating-linear-gradient(
    -45deg,
    rgba(192, 57, 43, 0.18),
    rgba(192, 57, 43, 0.18) 10px,
    rgba(192, 57, 43, 0.05) 10px,
    rgba(192, 57, 43, 0.05) 20px
  ) !important;
}

.checklist-run-item-marked-done-but-incomplete.checklist-run-item-status-issue_found {
  background: repeating-linear-gradient(
    -45deg,
    rgba(243, 156, 18, 0.22),
    rgba(243, 156, 18, 0.22) 10px,
    rgba(243, 156, 18, 0.06) 10px,
    rgba(243, 156, 18, 0.06) 20px
  ) !important;
}

/* Realtime presence avatar strip in the modal header. One chip per distinct user; chips
   are deduped server-side so two devices for the same human render as a single circle. */
.checklist-run-viewer-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 1rem;
  flex-wrap: wrap;
}

.checklist-run-viewer-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 0 0 2px var(--color-surface, #ffffff);
  user-select: none;
  overflow: hidden; /* Clip the avatar <img> to the circle */
}

/* When the chip wraps a real profile photo, drop the tinted background entirely and let the
   image fill the circle. The wrapper still owns the border-radius / box-shadow so the photo
   and the initials fallback render identically aside from the contents. */
.checklist-run-viewer-chip-with-image {
  background-color: transparent;
}

.checklist-run-viewer-chip-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.checklist-run-viewer-chip-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Remote-update glow — one-shot keyframe driven by a JS class toggle. The keyframe starts
   with a vivid ring + tint and fades to none over the duration; the CSS lasts exactly
   `CHECKLIST_RUN_ITEM_REMOTE_UPDATE_GLOW_DURATION_MILLISECONDS` in checklists.js so the
   class can be cleared at the same moment the animation finishes. Restart-on-reapply is
   handled by a JS clear-then-set-across-microtask trick — CSS alone cannot restart a
   keyframe on a class re-application without removing it for one render frame. */
@keyframes checklist-run-item-remote-update-glow-keyframes {
  0%   {
    box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.6);
    background-color: rgba(58, 134, 255, 0.15);
  }
  60%  {
    box-shadow: 0 0 0 2px rgba(58, 134, 255, 0.3);
    background-color: rgba(58, 134, 255, 0.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(58, 134, 255, 0);
    background-color: transparent;
  }
}

.checklist-run-item-remote-update-glow {
  animation: checklist-run-item-remote-update-glow-keyframes 1500ms ease-out;
  /* Lift this row above the static striped/solid status background so the keyframe's
     transient `background-color` actually paints visibly. */
  position: relative;
  z-index: 1;
}


.checklist-signature-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.checklist-signature-row {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-secondary);
}

.checklist-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.checklist-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checklist-checkbox-indicator {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.2rem;
  background: var(--color-ocean-mid);
  display: inline-block;
  position: relative;
}

.checklist-checkbox input[type="checkbox"]:checked + .checklist-checkbox-indicator {
  background: var(--color-ocean-light);
  border-color: var(--color-ocean-light);
}

.checklist-checkbox input[type="checkbox"]:checked + .checklist-checkbox-indicator::after {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.08rem;
  width: 0.25rem;
  height: 0.55rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/** stylesheets/src/chat.css **/
/* Chat */
.chat-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1rem;
  min-height: 520px;
}

.chat-section .section-header {
  align-items: center;
}

.chat-channel-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
}

.chat-channel-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.chat-channel-group + .chat-channel-group {
  margin-top: 0.5rem;
}

.chat-channel-group-header {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  padding: 0.25rem 0.25rem 0.1rem;
}

.chat-sidebar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ocean-deep);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 70vh;
  overflow: auto;
}

.chat-channel-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--color-border);
  background: var(--color-ocean-mid);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
}

.chat-channel-item-unread {
  font-weight: 700;
}

/* Unread message count badge shown on sidebar channel rows */
.chat-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  background: var(--color-gold-subtle);
  border: 1px solid var(--color-border-gold);
  color: var(--color-gold-light);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 20px;
  flex-shrink: 0;
}

.chat-channel-item-active {
  border-color: var(--color-ocean-light);
  box-shadow: 0 0 0 1px var(--color-ocean-light) inset;
}

.chat-channel-settings-button {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 2.1rem;
  background: var(--color-ocean-mid);
  color: var(--color-text-primary);
}

.chat-thread {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ocean-deep);
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}

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

.chat-thread-header-actions {
  display: flex;
  gap: 0.4rem;
}

.chat-messages {
  padding: 0.8rem 1rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.chat-message-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  background: var(--color-ocean-mid);
  position: relative;
}

.chat-message-row-own {
  background: rgba(162, 116, 22, 0.18);
  border-color: rgba(162, 116, 22, 0.42);
}

.chat-message-row-own .chat-message-meta {
  color: var(--color-gold-light);
}

.chat-message-meta {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
  font-size: 0.86rem;
}

.chat-message-text {
  margin: 0;
  white-space: pre-wrap;
}

.chat-message-deleted {
  margin: 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

.chat-message-menu-button {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1rem;
}

.chat-message-menu {
  position: absolute;
  top: 1.8rem;
  right: 0.4rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-ocean-deep);
  z-index: 2;
}

.chat-composer {
  border-top: 1px solid var(--color-border);
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chat-typing-indicator {
  padding: 0 1rem 0.55rem;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  font-style: italic;
}

.chat-composer .form-control {
  border-radius: 0.7rem;
  border-width: 2px;
  min-height: 4.5rem;
}

.chat-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.chat-send-button {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.chat-modal {
  max-width: 560px;
}

.chat-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.chat-modal .modal-body h3 {
  margin: 0;
}

.chat-modal .modal-footer {
  margin-top: 0.35rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.chat-invite-list {
  margin-top: 0.75rem;
  max-height: 320px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chat-role-selector {
  margin-top: 0.55rem;
  margin-bottom: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.chat-invite-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-ocean-mid);
  color: var(--color-text-primary);
  padding: 0.45rem 0.55rem;
  text-align: left;
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
}
/* ── Chat read receipts ──────────────────────────────────────── */
/* Displayed below own messages only.  The ::before pseudo-element renders
   the checkmark character(s); using ::before instead of inline text means
   the span itself has zero width and the cursor stays as default (not text). */
.chat-read-receipt {
  display: block;
  text-align: right;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  cursor: default;
  user-select: none;
  margin-top: 0.15rem;
  line-height: 1;
}
/* Single grey check = sent (received by server, not yet read by anyone else). */
.chat-read-receipt::before {
  content: '✓';
  letter-spacing: -0.05em;
}
/* Double gold check = read by at least one other active channel member. */
.chat-read-receipt-read::before {
  content: '✓✓';
  color: var(--color-gold-light);
}

/** stylesheets/src/event.css **/
/* ============================================================
   Events ("Ship's Log") feature — Ocean theme base styles
   ------------------------------------------------------------
   Layout primitives are organized top-down to match the visual
   layout of app/views/event/section.scala.html:
     1. Maritime Bridge   — control bar (grid + time + omnibox + filters)
     2. Maritime Feed     — timeline list of events
     3. Per-category accents (left border, badge tint, icon tint)
   ============================================================ */

/* ------------------------------------------------------------
   Category accent tokens. One source of truth for every color
   used inside an event card / pill / tile. Keeps the rest of
   the file DRY and lets the day theme override only one block.
   ------------------------------------------------------------ */
:root {
  --events-color-navigation:   #4aa3ff;
  --events-color-fuel:         var(--color-gold-light);
  --events-color-engine:       #7dd3a0;
  --events-color-maintenance:  #65c08a;
  --events-color-weather:      #9bb3e8;
  --events-color-wildlife:     #5fd2a3;
  --events-color-guests:       #d59be6;
  --events-color-safety:       #ff8a5c;
  --events-color-mooring:      #5cc6ff;
  --events-color-provisioning: #e8b56a;
  --events-color-general:      #8fa8c8;
  --events-color-checklist:    #a6d4ff;
}

/* ------------------------------------------------------------
   Section frame
   ------------------------------------------------------------ */
.events-view {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ============================================================
   1. Maritime Bridge — sticky cohesive control bar
   ============================================================ */
.events-bridge {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.85rem 1rem 0.95rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-ocean-mid) 96%, transparent) 0%,
    color-mix(in srgb, var(--color-ocean-deep) 96%, transparent) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
}

/* ------------------------------------------------------------
   Action Grid — wrapping pill button row
   ------------------------------------------------------------ */
.events-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.events-action-tile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  background: var(--color-ocean-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

.events-action-tile:hover:not(:disabled) {
  background: var(--color-ocean-light);
  border-color: var(--color-border-gold);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.events-action-tile:active:not(:disabled) {
  transform: translateY(0);
}

.events-action-tile:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.events-action-tile-icon {
  font-size: 0.92rem;
  line-height: 1;
  width: 1.1em;
  display: inline-flex;
  justify-content: center;
}

.events-action-tile-label {
  white-space: nowrap;
}

/* Per-category accent on the tile icon. */
.event-tile-navigation   .events-action-tile-icon { color: var(--events-color-navigation); }
.event-tile-fuel         .events-action-tile-icon { color: var(--events-color-fuel); }
.event-tile-engine       .events-action-tile-icon { color: var(--events-color-engine); }
.event-tile-maintenance  .events-action-tile-icon { color: var(--events-color-maintenance); }
.event-tile-weather      .events-action-tile-icon { color: var(--events-color-weather); }
.event-tile-wildlife     .events-action-tile-icon { color: var(--events-color-wildlife); }
.event-tile-guests       .events-action-tile-icon { color: var(--events-color-guests); }
.event-tile-safety       .events-action-tile-icon { color: var(--events-color-safety); }
.event-tile-mooring      .events-action-tile-icon { color: var(--events-color-mooring); }
.event-tile-provisioning .events-action-tile-icon { color: var(--events-color-provisioning); }
.event-tile-general      .events-action-tile-icon { color: var(--events-color-general); }

/* ------------------------------------------------------------
   Hybrid Time row + Omnibox in a single line
   ------------------------------------------------------------ */
.events-write-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.events-time-row {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  flex-wrap: wrap;
}

.events-time-button {
  padding: 0.35rem 0.8rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.events-time-button:hover:not(.events-time-button-active) {
  background: var(--color-ocean-surface);
  color: var(--color-text-primary);
}

.events-time-button-active {
  background: var(--color-gold-subtle);
  border-color: var(--color-border-gold);
  color: var(--color-gold-light);
}

.events-omnibox {
  flex: 1 1 320px;
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.25rem 0.4rem 0.25rem 0.85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.events-omnibox:focus-within {
  border-color: var(--color-border-gold);
  box-shadow: 0 0 0 3px var(--color-gold-subtle);
}

.events-omnibox-icon {
  align-self: center;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.events-omnibox-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  padding: 0.45rem 0.25rem;
}

.events-omnibox-input::placeholder {
  color: var(--color-text-muted);
}

.events-omnibox-save {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   Pill bar — category filters
   ------------------------------------------------------------ */
.events-pill-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.events-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.events-pill i {
  font-size: 0.78rem;
}

.events-pill:hover:not(.events-pill-active) {
  background: var(--color-ocean-surface);
  border-color: var(--color-border-gold);
  color: var(--color-text-primary);
}

.events-pill-active {
  background: var(--color-ocean-light);
  border-color: var(--color-border-gold);
  color: var(--color-gold-light);
}

/* Per-pill accent when active. */
.events-pill-navigation.events-pill-active   { color: var(--events-color-navigation);   border-color: color-mix(in srgb, var(--events-color-navigation) 50%, transparent); }
.events-pill-fuel.events-pill-active         { color: var(--events-color-fuel);         border-color: color-mix(in srgb, var(--events-color-fuel) 50%, transparent); }
.events-pill-engine.events-pill-active       { color: var(--events-color-engine);       border-color: color-mix(in srgb, var(--events-color-engine) 50%, transparent); }
.events-pill-maintenance.events-pill-active  { color: var(--events-color-maintenance);  border-color: color-mix(in srgb, var(--events-color-maintenance) 50%, transparent); }
.events-pill-weather.events-pill-active      { color: var(--events-color-weather);      border-color: color-mix(in srgb, var(--events-color-weather) 50%, transparent); }
.events-pill-wildlife.events-pill-active     { color: var(--events-color-wildlife);     border-color: color-mix(in srgb, var(--events-color-wildlife) 50%, transparent); }
.events-pill-guests.events-pill-active       { color: var(--events-color-guests);       border-color: color-mix(in srgb, var(--events-color-guests) 50%, transparent); }
.events-pill-safety.events-pill-active       { color: var(--events-color-safety);       border-color: color-mix(in srgb, var(--events-color-safety) 50%, transparent); }
.events-pill-mooring.events-pill-active      { color: var(--events-color-mooring);      border-color: color-mix(in srgb, var(--events-color-mooring) 50%, transparent); }
.events-pill-provisioning.events-pill-active { color: var(--events-color-provisioning); border-color: color-mix(in srgb, var(--events-color-provisioning) 50%, transparent); }
.events-pill-general.events-pill-active      { color: var(--events-color-general);      border-color: color-mix(in srgb, var(--events-color-general) 50%, transparent); }

/* ============================================================
   2. Maritime Feed — timeline list
   ============================================================ */
.events-feed {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.events-entry {
  background: var(--color-ocean-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem 0.95rem 1rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.events-entry:hover {
  background: var(--color-ocean-light);
  transform: translateX(2px);
}

.events-entry-expanded {
  background: var(--color-ocean-light);
}

/* Category accent on the left border + the badge tint. */
.events-entry-category-navigation    { border-left-color: var(--events-color-navigation); }
.events-entry-category-fuel          { border-left-color: var(--events-color-fuel); }
.events-entry-category-engine        { border-left-color: var(--events-color-engine); }
.events-entry-category-maintenance   { border-left-color: var(--events-color-maintenance); }
.events-entry-category-weather       { border-left-color: var(--events-color-weather); }
.events-entry-category-wildlife      { border-left-color: var(--events-color-wildlife); }
.events-entry-category-guests        { border-left-color: var(--events-color-guests); }
.events-entry-category-safety        { border-left-color: var(--events-color-safety); }
.events-entry-category-mooring       { border-left-color: var(--events-color-mooring); }
.events-entry-category-provisioning  { border-left-color: var(--events-color-provisioning); }
.events-entry-category-general       { border-left-color: var(--events-color-general); }
.events-entry-category-checklist_completed { border-left-color: var(--events-color-checklist); }

/* ------------------------------------------------------------
   Entry header
   ------------------------------------------------------------ */
.events-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.events-entry-time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.events-entry-time i {
  color: var(--color-text-secondary);
}

.events-entry-date {
  margin-left: 0.35rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 0.75rem;
}

.events-entry-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2em 0.7em;
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Tint the badge icon by category. */
.events-entry-category-navigation    .events-entry-category-badge { color: var(--events-color-navigation);   border-color: color-mix(in srgb, var(--events-color-navigation) 30%, transparent); }
.events-entry-category-fuel          .events-entry-category-badge { color: var(--events-color-fuel);         border-color: color-mix(in srgb, var(--events-color-fuel) 30%, transparent); }
.events-entry-category-engine        .events-entry-category-badge { color: var(--events-color-engine);       border-color: color-mix(in srgb, var(--events-color-engine) 30%, transparent); }
.events-entry-category-maintenance   .events-entry-category-badge { color: var(--events-color-maintenance);  border-color: color-mix(in srgb, var(--events-color-maintenance) 30%, transparent); }
.events-entry-category-weather       .events-entry-category-badge { color: var(--events-color-weather);      border-color: color-mix(in srgb, var(--events-color-weather) 30%, transparent); }
.events-entry-category-wildlife      .events-entry-category-badge { color: var(--events-color-wildlife);     border-color: color-mix(in srgb, var(--events-color-wildlife) 30%, transparent); }
.events-entry-category-guests        .events-entry-category-badge { color: var(--events-color-guests);       border-color: color-mix(in srgb, var(--events-color-guests) 30%, transparent); }
.events-entry-category-safety        .events-entry-category-badge { color: var(--events-color-safety);       border-color: color-mix(in srgb, var(--events-color-safety) 30%, transparent); }
.events-entry-category-mooring       .events-entry-category-badge { color: var(--events-color-mooring);      border-color: color-mix(in srgb, var(--events-color-mooring) 30%, transparent); }
.events-entry-category-provisioning  .events-entry-category-badge { color: var(--events-color-provisioning); border-color: color-mix(in srgb, var(--events-color-provisioning) 30%, transparent); }
.events-entry-category-general       .events-entry-category-badge { color: var(--events-color-general);      border-color: color-mix(in srgb, var(--events-color-general) 30%, transparent); }
.events-entry-category-checklist_completed .events-entry-category-badge { color: var(--events-color-checklist); border-color: color-mix(in srgb, var(--events-color-checklist) 30%, transparent); }

/* ------------------------------------------------------------
   Entry content — per-category bodies
   ------------------------------------------------------------ */
.events-entry-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.events-headline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-primary);
  font-size: 1rem;
}

.events-headline strong {
  font-weight: 600;
}

.events-headline i {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.events-notes {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0.15rem 0 0 0;
}

.events-notes-prose {
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

/* The big gold metric used for fuel volumes — readable across spray and glare. */
.events-metric {
  margin-top: 0.15rem;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-light);
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.events-metric-unit {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-left: 0.25rem;
}

/* ------------------------------------------------------------
   Entry chevron
   ------------------------------------------------------------ */
.events-entry-chevron {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: color var(--transition);
}

.events-entry:hover .events-entry-chevron,
.events-entry-expanded .events-entry-chevron {
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------
   Expanded detail panel
   ------------------------------------------------------------ */
.events-entry-detail {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.events-detail-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.events-detail-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.events-detail-text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.events-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.events-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.events-detail-row-name {
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.events-detail-row-type {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.events-detail-row-value {
  color: var(--color-text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.events-detail-row-unit {
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-left: 0.2rem;
}

.events-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem 1rem;
}

.events-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.events-detail-meta-full {
  grid-column: 1 / -1;
}

.events-detail-meta-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.events-detail-meta-value {
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

/* ============================================================
   3. Empty / loading states
   ============================================================ */
.events-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
}

.events-empty-icon {
  font-size: 2.5rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

.events-empty-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ============================================================
   4. Universal Log Modal — accordion sections
   ============================================================ */
.events-universal-modal {
  max-width: 720px;
  width: 100%;
}

.events-universal-modal .modal-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.events-universal-modal .modal-title i {
  color: var(--color-gold-light);
  font-size: 1.05rem;
}

.events-universal-modal-body {
  max-height: 75vh;
  overflow-y: auto;
}

.events-universal-prefill-spinner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
}

.events-universal-modal-hint {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin: 0 0 0.85rem 0;
}

.events-universal-modal-hint strong {
  color: var(--color-gold-light);
  text-transform: capitalize;
}

.events-universal-modal-actions {
  position: sticky;
  bottom: 0;
  background: var(--color-ocean-mid);
  padding-top: 0.85rem;
  margin-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* ── Accordion ────────────────────────────────────────────── */
.events-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.events-accordion-section {
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}

.events-accordion-section-included {
  border-color: var(--color-border-gold);
}

.events-accordion-section-expanded {
  background: var(--color-ocean-surface);
}

/* The header IS the click target — full row, large enough for touch. */
.events-accordion-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 52px;
  padding: 0.65rem 0.95rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  transition: background var(--transition);
}

.events-accordion-header:hover,
.events-accordion-header:focus-visible {
  background: var(--color-ocean-light);
  outline: none;
}

.events-accordion-header-chevron {
  display: inline-flex;
  width: 1.2em;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: transform var(--transition);
}

.events-accordion-section-expanded .events-accordion-header-chevron {
  color: var(--color-gold-light);
}

.events-accordion-header-icon {
  display: inline-flex;
  width: 1.3em;
  justify-content: center;
  color: var(--color-text-secondary);
}

.events-accordion-section-included .events-accordion-header-icon {
  color: var(--color-gold-light);
}

.events-accordion-header-label {
  font-weight: 600;
}

.events-accordion-header-included {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.events-accordion-header-included:has(input[type='checkbox']:checked) {
  border-color: var(--color-border-gold);
  color: var(--color-gold-light);
}

.events-accordion-header-included input[type='checkbox'] {
  width: 0.85rem;
  height: 0.85rem;
}

.events-accordion-body {
  padding: 0.95rem 1rem 1.05rem 1rem;
  border-top: 1px solid var(--color-border);
}

/* ── Shared row styling for engines, tanks ────────────────── */
.events-engine-row,
.events-tank-row {
  display: grid;
  grid-template-columns: auto 1fr minmax(220px, 2fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}

.events-engine-row:last-child,
.events-tank-row:last-child {
  border-bottom: 0;
}

.events-row-include input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
}

.events-row-label strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.events-row-control {
  min-width: 0;
}

.events-tank-row {
  grid-template-columns: auto 1fr minmax(220px, 2fr);
}

.events-tank-row-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.events-tank-row-type-and-unit {
  display: flex;
  gap: 0.4rem;
}

.form-control-compact {
  padding: 0.25rem 0.45rem;
  font-size: 0.78rem;
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

/* ── Wildlife rows ────────────────────────────────────────── */
.events-wildlife-species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.events-species-quick-pick {
  padding: 0.55rem 0.65rem;
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.events-species-quick-pick:hover {
  background: var(--color-ocean-light);
  border-color: var(--color-border-gold);
}

.events-species-quick-pick-custom {
  border-style: dashed;
  color: var(--color-text-secondary);
}

.events-wildlife-sighting-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(110px, auto) minmax(70px, auto) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--color-border);
}

.events-wildlife-sighting-row:last-of-type {
  border-bottom: 0;
}

.events-wildlife-sighting-species input,
.events-wildlife-sighting-quantity input,
.events-wildlife-sighting-action select {
  width: 100%;
}

.events-wildlife-row-remove {
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.25rem 0.45rem;
}

.events-wildlife-row-remove:hover {
  color: var(--events-color-safety);
}

/* ── Weather / Location grids ─────────────────────────────── */
.events-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.events-form-grid .events-form-grid-full {
  grid-column: 1 / -1;
}

/* ── Location section: geolocation status indicator ───────── */
.events-location-geolocation-status {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.events-location-geolocation-status p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.events-location-geolocation-pending {
  color: var(--color-text-secondary);
}

.events-location-geolocation-captured {
  color: var(--color-success, #4caf50);
}

.events-location-geolocation-failed {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  color: var(--events-color-safety, #d97757);
}

.events-location-retry-gps {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Misc helpers ─────────────────────────────────────────── */
.events-section-empty-state {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
  padding: 0.5rem 0;
}

.events-add-row-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ============================================================
   5. <scroll-wheel-input> directive
   ------------------------------------------------------------
   Layout:
     .scroll-wheel-input              ← outer container
       .unit-pill-bar                ← always visible row of pills
         .unit-pill                  ← inactive pill
         .unit-pill-active           ← (modifier) currently-selected pill
       .scroll-wheel-input-desktop-row  (rendered on fine pointer / wide viewport)
         <input> or <input>:<input>  ← native number / time inputs
         .scroll-wheel-input-previous-hint
       .scroll-wheel-input-touch-row    (rendered on coarse pointer / narrow viewport)
         .scroll-wheel-input-touch-typed  ← typed <input> mirroring the wheels
         .scroll-wheel-touch-wheels       ← one or two scroll wheels
           .scroll-wheel-pair
             .scroll-wheel              ← scroll-snappable column
               .scroll-wheel-center-mark  (decorative)
               .scroll-wheel-item       ← every selectable value
             .scroll-wheel-separator    ← "." or ":"
   ============================================================ */
.scroll-wheel-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

/* ------------------------------------------------------------
   Unit pill bar — Ocean theme: inactive pills sit on the ocean
   surface and gain a gold-light text + outlined background when
   selected. The bar wraps freely so a 4–5 pill list (Engine,
   Fluid) still fits on a phone-width viewport.
   ------------------------------------------------------------ */
.unit-pill-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.unit-pill {
  appearance: none;
  background: var(--color-ocean-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  min-height: 32px;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.unit-pill:hover {
  background: var(--color-ocean-light);
  color: var(--color-text-primary);
}

.unit-pill-active {
  background: color-mix(in srgb, var(--color-gold-light) 14%, var(--color-ocean-deep));
  border-color: var(--color-gold-light);
  color: var(--color-gold-light);
  font-weight: 600;
}

/* ------------------------------------------------------------
   Desktop branch
   ------------------------------------------------------------ */
.scroll-wheel-input-desktop-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.scroll-wheel-input-numeric {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.scroll-wheel-input-input {
  flex: 0 1 140px;
  min-width: 100px;
  max-width: 220px;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

.scroll-wheel-input-time-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.scroll-wheel-input-time-hours {
  flex: 0 0 100px;
  min-width: 90px;
  text-align: center;
}

.scroll-wheel-input-time-minutes {
  flex: 0 0 70px;
  min-width: 60px;
  text-align: center;
}

.scroll-wheel-input-time-separator {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-gold-light);
}

.scroll-wheel-input-unit-suffix {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

.scroll-wheel-input-previous-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.scroll-wheel-input-previous-hint-touch {
  margin: 0;
  text-align: center;
}

.scroll-wheel-input-reset-link {
  background: transparent;
  border: 0;
  color: var(--color-gold-light);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* Clamp-warning banner. Surfaced by the directive the instant a typed entry is reduced
   to the active pill's bounds, so the user always sees the cause of the snap rather than
   a silent rewrite. Takes its own row inside the flex container so it doesn't squeeze
   the input + previous-hint pair on a narrow desktop. */
.scroll-wheel-input-clamp-warning {
  flex-basis: 100%;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-danger, #ff8a5c);
  line-height: 1.3;
}

/* ------------------------------------------------------------
   Touch branch — typed input on top, wheels below
   ------------------------------------------------------------ */
.scroll-wheel-input-touch-row {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.scroll-wheel-input-touch-typed {
  display: flex;
  justify-content: center;
}

.scroll-wheel-touch-wheels {
  display: flex;
  justify-content: center;
}

.scroll-wheel-pair {
  display: inline-flex;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}

.scroll-wheel-separator,
.scroll-wheel-suffix {
  align-self: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-gold-light);
}

/* ------------------------------------------------------------
   The wheels themselves — native scroll-snap. The fixed item
   height (44px) MUST match WHEEL_ITEM_HEIGHT_PX in the directive
   so the scroll-snap math agrees with the model commit math.
   ------------------------------------------------------------ */
.scroll-wheel {
  position: relative;
  width: 72px;
  height: 220px;             /* 5 × 44px */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;     /* Firefox */
}

.scroll-wheel::-webkit-scrollbar {
  display: none;
}

.scroll-wheel-spacer {
  /* (220 - 44) / 2 = 88px — pads the list so the centre slot lines
     up with the centre mark. */
  height: 88px;
}

.scroll-wheel-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  transition: color var(--transition), font-weight var(--transition);
}

.scroll-wheel-item-active {
  color: var(--color-gold-light);
  font-weight: 700;
  font-size: 1.25rem;
}

.scroll-wheel-center-mark {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  border-top: 1px solid color-mix(in srgb, var(--color-gold-light) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-gold-light) 35%, transparent);
  pointer-events: none;
}

/* ------------------------------------------------------------
   Tank capacity hint — shown next to each tank-row name when the
   underlying component has attributes.capacity / capacityUnit set.
   ------------------------------------------------------------ */
.events-tank-row-capacity {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.events-tank-row-type {
  margin-top: 0.4rem;
}

.events-tank-row-type-label {
  display: inline-block;
  padding: 0.18em 0.65em;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(201, 168, 76, 0.12);
  color: var(--color-gold-light);
  border: 1px solid rgba(201, 168, 76, 0.3);
  user-select: none;
}

/* ============================================================
   6. Settings modal — Wildlife species editor
   ============================================================ */
.settings-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.settings-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.settings-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.35rem 0;
  color: var(--color-text-primary);
}

.settings-section-hint {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin: 0 0 0.65rem 0;
}

.settings-wildlife-textarea {
  width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.settings-section-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.65rem;
  justify-content: flex-end;
}

.settings-section-saved-message {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: right;
}

.settings-section-error-message {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-danger, #ff8a5c);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-align: left;
}

.settings-feature-toggle-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.35rem 1rem;
}

.settings-feature-toggle-row {
  display: flex;
  align-items: center;
}

.settings-feature-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

.settings-feature-toggle-label input[type="checkbox"] {
  margin: 0;
}

/* ============================================================
   5. Responsive tweaks
   ============================================================ */
@media (max-width: 720px) {
  .events-bridge {
    padding: 0.7rem 0.75rem 0.8rem;
  }

  .events-write-row {
    flex-direction: column;
    align-items: stretch;
  }

  .events-omnibox {
    width: 100%;
  }

  .events-metric {
    font-size: 1.3rem;
  }
}

/** stylesheets/src/gpx.css **/
/* ── GPX Viewer ──────────────────────────────────────────────── */
.gpx-view {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.gpx-controls {
  align-items: center;
  flex-wrap: wrap;
}

.gpx-control-item {
  margin-bottom: 0;
}

.gpx-file-input {
  max-width: 260px;
}

.gpx-upload-trigger {
  min-width: 170px;
}

.gpx-select {
  width: 110px;
}

.gpx-range {
  width: 130px;
}

.gpx-dashboard {
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  min-height: 42px;
  display: flex;
  align-items: center;
}

.gpx-dashboard-empty-state {
  color: var(--color-text-secondary);
  font-style: italic;
}

.locked-badge {
  background: #e74c3c;
  color: #ffffff;
  border-radius: var(--radius-sm);
  padding: 0.12rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  margin-right: 0.45rem;
}

.gpx-map {
  height: 450px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: crosshair;
  overflow: hidden;
}

.gpx-histogram {
  height: 220px;
  width: 100%;
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.4rem;
}

.gpx-histogram-empty {
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-style: italic;
}

.gpx-bar {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.gpx-bar:hover {
  opacity: 1;
}


/** stylesheets/src/drive.css **/
/* ── drive ────────────────────────────────────────────── */
.drive-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.drive-toolbar label {
  color: var(--color-text-secondary);
  min-width: 110px;
}

.drive-toolbar .input {
  max-width: 360px;
}

.drive-root-component-select {
  min-width: 280px;
  max-width: 420px;
  background: rgba(10, 24, 43, 0.7);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.drive-layout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.drive-summary {
  display: flex;
  gap: 1rem;
  color: var(--color-text-secondary);
}

.drive-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.drive-bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.drive-bulk-actions-summary {
  color: var(--color-text-secondary);
  min-width: 86px;
}

.drive-bulk-destination-select {
  min-width: 280px;
  max-width: 420px;
}

.drive-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

.drive-panel {
  background: var(--color-ocean-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

.drive-panel h3 {
  margin-bottom: 0.5rem;
}

.drive-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.drive-panel-header h3 {
  margin-bottom: 0;
}

.drive-upload-status {
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

.drive-upload-status-success {
  color: var(--color-success);
}

.drive-upload-status-error {
  color: var(--color-danger);
}

.drive-upload-queue {
  margin-bottom: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.55rem;
  background: rgba(5, 13, 26, 0.18);
}

.drive-upload-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.drive-upload-queue-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.drive-upload-queue-progress {
  margin-bottom: 0.35rem;
  font-size: 0.74rem;
  color: var(--color-gold-light);
}

.drive-upload-queue-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  min-width: 0;
}

.drive-upload-queue-name {
  color: var(--color-text-primary);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-upload-queue-status {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.drive-upload-queue-status-uploading {
  color: var(--color-gold-light);
}

.drive-upload-queue-status-success {
  color: var(--color-success);
}

.drive-upload-queue-status-error {
  color: var(--color-danger);
}

.drive-upload-queue-message {
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-upload-queue-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}

.drive-upload-hint {
  margin-bottom: 0.6rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.drive-file-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.drive-file-search {
  min-width: 220px;
  max-width: 320px;
}

.drive-file-sort,
.drive-file-sort-direction {
  min-width: 140px;
  max-width: 180px;
}

.drive-select-all-visible {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

.drive-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.drive-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.drive-checkbox-indicator {
  width: 1rem;
  height: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.75);
  border-radius: 0.2rem;
  background: rgba(8, 18, 33, 0.7);
  position: relative;
}

.drive-checkbox input[type="checkbox"]:checked + .drive-checkbox-indicator {
  border-color: var(--color-gold-light);
  background: rgba(201, 168, 76, 0.2);
}

.drive-checkbox input[type="checkbox"]:checked + .drive-checkbox-indicator::after {
  content: '';
  position: absolute;
  left: 0.28rem;
  top: 0.04rem;
  width: 0.28rem;
  height: 0.58rem;
  border: solid var(--color-gold-light);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.drive-checkbox-compact {
  justify-content: center;
}

.drive-file-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.drive-file-preview-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.drive-file-preview-toggle-slider {
  width: 2.1rem;
  height: 1.2rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  position: relative;
  transition: background 0.2s ease;
}

.drive-file-preview-toggle-slider::after {
  content: '';
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  transition: transform 0.2s ease;
}

.drive-file-preview-toggle input[type="checkbox"]:checked + .drive-file-preview-toggle-slider {
  background: rgba(201, 168, 76, 0.55);
}

.drive-file-preview-toggle input[type="checkbox"]:checked + .drive-file-preview-toggle-slider::after {
  transform: translateX(0.9rem);
}

.drive-panel-drag-active {
  border-color: var(--color-border-gold);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.35);
  background: rgba(22, 51, 88, 0.4);
}

.drive-directory-tree {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.drive-directory-tree-node {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.drive-directory-tree-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  border-radius: var(--radius-sm);
}

.drive-directory-tree-row-selected {
  background: rgba(74, 120, 181, 0.18);
  box-shadow: inset 0 0 0 1px rgba(133, 170, 230, 0.28);
}

.drive-directory-tree-toggle,
.drive-directory-tree-toggle-spacer {
  width: 1.5rem;
  min-width: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.drive-directory-tree-toggle {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0.25rem;
}

.drive-directory-tree-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
}

.drive-directory-tree-label {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  padding: 0.35rem 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.drive-directory-tree-label:hover {
  background: rgba(255, 255, 255, 0.04);
}

.drive-directory-tree-row-selected .drive-directory-tree-label {
  color: var(--color-gold-light);
}

.drive-directory-tree-folder-icon {
  width: 1.2rem;
  min-width: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.drive-directory-tree-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  padding-right: 0.1rem;
}

.drive-directory-tree-children {
  margin-left: 0.8rem;
  padding-left: 0.7rem;
  border-left: 1px solid rgba(148, 163, 184, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.drive-directory-tree-files {
  margin-left: 0.8rem;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.drive-directory-file-node {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.22rem 0.25rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.drive-directory-file-node:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
}

.drive-directory-file-icon {
  width: 1rem;
  min-width: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.drive-file-preview-cell {
  min-width: 220px;
}

.drive-file-preview-image-shell {
  width: 210px;
}

.drive-file-preview-image {
  width: 100%;
  height: auto;
  display: block;
}

.drive-file-preview-status {
  color: var(--color-text-muted);
  font-size: 0.74rem;
}

.drive-preview-modal {
  width: min(92vw, 1040px);
}

.drive-preview-modal-body {
  min-height: min(70vh, 680px);
}

.drive-preview-image-shell {
  width: 100%;
  min-height: min(68vh, 640px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(7, 18, 34, 0.88);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drive-preview-image {
  width: 100%;
  max-height: min(68vh, 640px);
  object-fit: contain;
  display: block;
}

.drive-folder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.drive-folder-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.drive-file-table {
  width: 100%;
  border-collapse: collapse;
}

.drive-file-table th,
.drive-file-table td {
  text-align: left;
  padding: 0.45rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.drive-file-table th {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.drive-file-actions {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.drive-file-name {
  color: var(--color-text-primary);
}

.drive-file-info-line {
  margin-top: 0.18rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}


/** stylesheets/src/home.css **/
/* ── Home dashboard (bento-box widget canvas) ──────────────────────────────
   Free-form positioning canvas. The canvas itself is sized to an integer
   number of grid blocks via inline width/height set by `home.js`
   (`app.homeCanvasPixelStyle()`), then centered horizontally and
   top-aligned within the viewport. Widgets are absolutely positioned
   inside the canvas in pixel space derived from that same block grid.
*/

.home-section {
  /* Break out of the .main-content max-width:1200px constraint so the
     bento canvas can be centered against the FULL viewport on giant
     monitors instead of inside a 1200px column. */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.home-canvas {
  /* Width/height come from app.homeCanvasPixelStyle() so the canvas always
     measures an integer number of grid blocks. Margin auto centers it
     horizontally; vertically it sits at the top of the section, which is
     itself directly under the view tabs. */
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
  background-image:
    linear-gradient(to right, var(--surface-border-subtle, rgba(255, 255, 255, 0.04)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--surface-border-subtle, rgba(255, 255, 255, 0.04)) 1px, transparent 1px);
  background-size: 150px 150px;
  border: 1px solid var(--surface-border-subtle, rgba(255, 255, 255, 0.06));
  border-radius: 8px;
  overflow: hidden;
}

.home-widget {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated, #1f2630);
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

.home-widget-invalid {
  border-color: #e34a4a;
  box-shadow: 0 0 0 2px rgba(227, 74, 74, 0.6), 0 4px 12px rgba(0, 0, 0, 0.25);
}

.home-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-elevated-strong, #2a323f);
  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  cursor: move;
  user-select: none;
  font-weight: 600;
}

.home-widget-header-icon {
  font-size: 1rem;
}

.home-widget-header-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-widget-body {
  flex: 1 1 auto;
  padding: 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
  overflow: hidden;
}

.home-widget-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 50%,
      var(--surface-border, rgba(255, 255, 255, 0.4)) 50%,
      var(--surface-border, rgba(255, 255, 255, 0.4)) 60%,
      transparent 60%,
      transparent 70%,
      var(--surface-border, rgba(255, 255, 255, 0.4)) 70%,
      var(--surface-border, rgba(255, 255, 255, 0.4)) 80%,
      transparent 80%
    );
}

/* ── Saved-layouts list (rendered in the Settings modal) ─────────────────
   The dashboard saves an ordered list of named layouts. The settings modal
   renders that list using these classes, letting the user rename or delete
   individual entries.
*/
.settings-home-layout-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-home-layout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-elevated, #1f2630);
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
}

.settings-home-layout-row-active {
  border-color: var(--color-gold, #d6af5c);
  box-shadow: 0 0 0 1px var(--color-gold, #d6af5c);
}

.settings-home-layout-row-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.settings-home-layout-row-name-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 6px 10px;
  background: var(--surface-base, #14181f);
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  color: inherit;
  font: inherit;
  font-weight: 600;
}

.settings-home-layout-row-name-input:focus {
  outline: none;
  border-color: var(--color-gold, #d6af5c);
}

.settings-home-layout-row-count {
  color: var(--text-muted);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.settings-home-layout-row-current-badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-gold-subtle, rgba(214, 175, 92, 0.18));
  color: var(--color-gold, #d6af5c);
  flex-shrink: 0;
}

.settings-home-layout-row-delete {
  flex-shrink: 0;
}

/* ── Drive widget ────────────────────────────────────────────────────────
   Compact file-browser tile that lives inside a `.home-widget-body`. The
   widget body sets its own pixel height/width (computed from the bento
   block grid), so the drive widget fills that with a vertical layout:
   toolbar on top, scrollable content below.
*/
.home-widget-body-drive {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.home-drive-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  font-size: 0.78rem;
  color: var(--color-text-primary);
}

.home-drive-widget-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.06));
  margin-bottom: 0.4rem;
}

.home-drive-widget-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.home-drive-widget-breadcrumbs-segment-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.home-drive-widget-breadcrumbs-segment {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0.1rem 0.25rem;
  font-size: 0.74rem;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-drive-widget-breadcrumbs-segment:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary);
}

.home-drive-widget-breadcrumbs-segment-current {
  color: var(--color-gold-light);
  font-weight: 600;
  cursor: default;
  /* The current segment is rendered as `<button disabled>` so the user can't
     click it. Browsers default disabled buttons to the system GrayText / lower
     opacity, which on the day-theme's light background made the label look
     completely invisible. Lock the appearance to our explicit colors. */
  opacity: 1;
}

.home-drive-widget-breadcrumbs-segment-current:hover {
  background: transparent;
  color: var(--color-gold-light);
}

.home-drive-widget-breadcrumbs-separator {
  color: var(--color-text-muted);
  font-size: 0.74rem;
}

.home-drive-widget-view-toggles {
  display: inline-flex;
  gap: 0.2rem;
  flex-shrink: 0;
}

.home-drive-widget-view-toggle {
  padding: 0.2rem 0.4rem;
  line-height: 1;
  font-size: 0.78rem;
}

.home-drive-widget-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.home-drive-widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1rem 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.home-drive-widget-empty-icon {
  font-size: 1.6rem;
}

.home-drive-widget-loading {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  padding: 0.4rem;
}

.home-drive-widget-loading-spinner {
  margin-right: 0.3rem;
}

/* ── List view ───────────────────────────────────────────────────────── */
.home-drive-widget-list {
  width: 100%;
  /* `table-layout: fixed` is REQUIRED for `overflow: hidden` + `text-overflow:
     ellipsis` to work on `<td>` cells. Without it the table sizes columns to
     content and the Name cell keeps expanding instead of truncating, so the
     filename gets clipped by the row width while the icon (start) and the
     date column (end) stay visible. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.74rem;
}

.home-drive-widget-list thead th {
  position: sticky;
  top: 0;
  background: var(--surface-elevated-strong, #2a323f);
  color: var(--color-text-secondary);
  font-weight: 600;
  text-align: left;
  padding: 0.25rem 0.35rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  white-space: nowrap;
}

.home-drive-widget-list thead th:hover {
  color: var(--color-text-primary);
}

.home-drive-widget-list-column-active {
  color: var(--color-gold-light);
}

.home-drive-widget-list-sort-indicator {
  font-size: 0.7rem;
  margin-left: 0.15rem;
}

.home-drive-widget-list tbody tr {
  cursor: pointer;
}

.home-drive-widget-list tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.home-drive-widget-list tbody td {
  padding: 0.25rem 0.35rem;
  border-bottom: 1px solid var(--surface-border-subtle, rgba(255, 255, 255, 0.04));
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-drive-widget-list-cell-name {
  /* Stay a normal `display: table-cell` so the cell's bottom border lines up
     pixel-perfectly with the Size/Created cells in the same row. The flex
     layout for [icon][label] lives on the inner wrapper below, NOT on the
     `<td>` itself — mixing `display: flex` with `display: table-cell` siblings
     causes a ~1–2px height mismatch and a jagged row separator. */
  min-width: 0;
}

.home-drive-widget-list-cell-name-inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.home-drive-widget-list-name-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-drive-widget-list-icon {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.home-drive-widget-list-row-folder .home-drive-widget-list-icon {
  color: var(--color-gold-light);
}

.home-drive-widget-list-cell-muted {
  color: var(--color-text-muted);
}

/* In `table-layout: fixed`, column widths come from the first row (header).
   Pin Size + Created to small fixed widths so Name absorbs the remaining
   horizontal space (and its `text-overflow: ellipsis` actually has somewhere
   to truncate at). */
.home-drive-widget-list-column-name {
  width: auto;
}

.home-drive-widget-list-column-size,
.home-drive-widget-list-cell-size {
  width: 4.5rem;
  text-align: right;
}

.home-drive-widget-list-column-created-at,
.home-drive-widget-list-cell-created-at {
  width: 5.5rem;
  text-align: right;
}

/* ── Preview (tile) view ─────────────────────────────────────────────── */
.home-drive-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.4rem;
  padding: 0.1rem 0.05rem;
}

.home-drive-widget-tile {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-primary);
  padding: 0.3rem 0.2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  min-width: 0;
}

.home-drive-widget-tile:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--surface-border, rgba(255, 255, 255, 0.08));
}

.home-drive-widget-tile-thumbnail {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 18, 34, 0.55);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.home-drive-widget-tile-icon {
  font-size: 2rem;
  color: var(--color-text-secondary);
}

.home-drive-widget-tile-folder .home-drive-widget-tile-icon {
  color: var(--color-gold-light);
}

.home-drive-widget-tile-icon-loading {
  opacity: 0.5;
}

.home-drive-widget-tile-image-shell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-drive-widget-tile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-drive-widget-tile-label {
  width: 100%;
  font-size: 0.7rem;
  line-height: 1.15;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Ship's Log widget ───────────────────────────────────────────────────
   Compact, filterable, expand/collapse feed of the same `app.eventState.events`
   the full /event view consumes. Reuses the per-category color classes
   (`events-pill-<key>` and `events-pill-active`) defined in event.css so a
   category recolor only needs to happen in one place.
*/
.home-widget-body-ship-log {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.home-ship-log-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  font-size: 0.78rem;
  color: var(--color-text-primary);
  gap: 0.35rem;
  overflow: hidden;
}

.home-ship-log-widget-loading,
.home-ship-log-widget-no-vessel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.home-ship-log-widget-spinner {
  width: 0.9rem;
  height: 0.9rem;
}

.home-ship-log-widget-no-vessel-icon {
  font-size: 1.1rem;
}

/* Compact override of the standard `.events-pill` look so 11 pills fit
   inside a 2×2 tile without horizontal overflow. The base padding / colour
   rules still come from event.css; we only override what we need to make
   the pill tighter. */
.home-ship-log-widget-pill-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.06));
  flex-shrink: 0;
}

.home-ship-log-widget-pill.events-pill {
  padding: 0.15rem 0.4rem;
  font-size: 0.66rem;
  font-weight: 600;
  gap: 0.2rem;
  line-height: 1.1;
}

.home-ship-log-widget-pill.events-pill i {
  font-size: 0.7rem;
}

.home-ship-log-widget-pill-label {
  /* When the widget is squeezed narrow there's room for an icon but not the
     label; the `title` attribute keeps the meaning discoverable on hover. */
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ship-log-widget-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.home-ship-log-widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.home-ship-log-widget-empty-icon {
  font-size: 1.4rem;
}

.home-ship-log-widget-entry {
  background: var(--color-ocean-surface, rgba(7, 18, 34, 0.4));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-left: 3px solid var(--color-border, rgba(255, 255, 255, 0.16));
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.45rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.home-ship-log-widget-entry:hover {
  background: var(--color-ocean-light, rgba(74, 120, 181, 0.08));
}

.home-ship-log-widget-entry-expanded {
  background: var(--color-ocean-light, rgba(74, 120, 181, 0.1));
}

/* Per-category left-border accent — mirrors the full /event view's
   `events-entry-category-<key>` colors via the same CSS variables. */
.home-ship-log-widget-entry-category-navigation   { border-left-color: var(--events-color-navigation); }
.home-ship-log-widget-entry-category-fuel         { border-left-color: var(--events-color-fuel); }
.home-ship-log-widget-entry-category-engine       { border-left-color: var(--events-color-engine); }
.home-ship-log-widget-entry-category-maintenance  { border-left-color: var(--events-color-maintenance); }
.home-ship-log-widget-entry-category-weather      { border-left-color: var(--events-color-weather); }
.home-ship-log-widget-entry-category-wildlife     { border-left-color: var(--events-color-wildlife); }
.home-ship-log-widget-entry-category-guests       { border-left-color: var(--events-color-guests); }
.home-ship-log-widget-entry-category-safety       { border-left-color: var(--events-color-safety); }
.home-ship-log-widget-entry-category-mooring      { border-left-color: var(--events-color-mooring); }
.home-ship-log-widget-entry-category-provisioning { border-left-color: var(--events-color-provisioning); }
.home-ship-log-widget-entry-category-general      { border-left-color: var(--events-color-general); }
.home-ship-log-widget-entry-category-checklist_completed { border-left-color: var(--events-color-general); }

.home-ship-log-widget-entry-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.72rem;
}

.home-ship-log-widget-entry-time {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.home-ship-log-widget-entry-time-icon {
  font-size: 0.7rem;
}

.home-ship-log-widget-entry-date {
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: 0.15rem;
}

.home-ship-log-widget-entry-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.home-ship-log-widget-entry-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
}

.home-ship-log-widget-entry-expanded .home-ship-log-widget-entry-summary {
  white-space: normal;
  text-overflow: clip;
}

.home-ship-log-widget-entry-chevron {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* ── Expanded detail panel ─────────────────────────────────────────── */
.home-ship-log-widget-entry-detail {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--surface-border, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.7rem;
}

.home-ship-log-widget-detail-section {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.home-ship-log-widget-detail-section-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.home-ship-log-widget-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.7rem;
  line-height: 1.3;
}

.home-ship-log-widget-detail-row-meta .home-ship-log-widget-detail-meta-label {
  color: var(--color-text-muted);
}

.home-ship-log-widget-detail-row-meta .home-ship-log-widget-detail-meta-value {
  color: var(--color-text-primary);
  text-align: right;
}

.home-ship-log-widget-detail-row-name {
  color: var(--color-text-secondary);
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-ship-log-widget-detail-row-type {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home-ship-log-widget-detail-row-value {
  color: var(--color-text-primary);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.home-ship-log-widget-detail-row-unit {
  color: var(--color-text-muted);
  margin-left: 0.15rem;
}

.home-ship-log-widget-detail-text {
  margin: 0;
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Layout-selector strip (above the canvas) ────────────────────────────
   One dot per saved layout, plus a "+" button. The highlighted dot is the
   active layout — clicking another dot switches; clicking + appends a new
   layout seeded with the bundled default widgets and switches to it.
*/
.home-layout-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  margin: 0 auto 8px;
}

.home-layout-selector-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.25));
  background: var(--surface-elevated, #1f2630);
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.home-layout-selector-dot:hover {
  transform: scale(1.15);
  border-color: var(--color-gold, #d6af5c);
}

.home-layout-selector-dot-active {
  background: var(--color-gold, #d6af5c);
  border-color: var(--color-gold, #d6af5c);
  box-shadow: 0 0 0 2px rgba(214, 175, 92, 0.25);
}

.home-layout-selector-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px dashed var(--surface-border, rgba(255, 255, 255, 0.35));
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.home-layout-selector-add:hover {
  color: var(--color-gold, #d6af5c);
  border-color: var(--color-gold, #d6af5c);
  transform: scale(1.1);
}

.home-layout-selector-add i {
  font-size: 0.7rem;
}

/* ── Ship's Log + widget ─────────────────────────────────────────────────
   Compact "write half" of the Ship's Log feature. Reuses the same
   `.events-action-tile`, `.events-time-button`, `.events-omnibox` base
   styles as the full /event view's Maritime Bridge; this section only
   contains the widget-specific overrides (tighter padding, smaller fonts)
   so 10-15 pills + a time row + an omnibox can fit inside a 2×2 tile.
*/
.home-widget-body-ship-log-create {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  /* `container-type: inline-size` turns this body into a query container so
     the pill grid + omnibox styles below can scale their font/padding off
     the widget's CURRENT rendered width (set by the bento layout), not the
     viewport. Without this, a 2×2 widget and a 6×4 widget would render
     identical pill sizes. */
  container-type: inline-size;
  container-name: shiplogcreate;
}

.home-ship-log-create-widget {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 0.4rem;
  overflow: hidden;
  font-size: 0.78rem;
  color: var(--color-text-primary);
}

.home-ship-log-create-widget-settings-button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.home-ship-log-create-widget-settings-button:hover {
  color: var(--color-gold, #d6af5c);
  border-color: var(--color-gold, #d6af5c);
  background: var(--color-gold-subtle, rgba(214, 175, 92, 0.12));
}

.home-ship-log-create-widget-settings-button i {
  font-size: 0.72rem;
}

/* Pill grid: tighter than the /event default (smaller padding/font, narrow
   wrap gap) so more pills fit per row inside the widget. The action-tile
   per-category icon colour still comes from event.css.

   Pills use `flex-grow: 1` with a small flex-basis so they EXPAND to fill
   their wrap row when there are few of them (instead of clustering on the
   left and leaving empty space), and SHRINK to wrap when there are many.
   `flex-basis` is intentionally smaller than the natural pill width so the
   browser's wrap algorithm only triggers when the natural row would overflow. */
.home-ship-log-create-widget-action-grid {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-right: 1.6rem; /* leave room for the absolutely-positioned gear */
  overflow-y: auto;
  align-content: flex-start;
}

.home-ship-log-create-widget-tile.events-action-tile {
  /* `flex: 1 1 5.5rem` — grow to fill row, shrink as needed, basis ~5.5rem.
     Combined with `max-width` this gives "fill the row when there's space,
     wrap and stay legible when there isn't". */
  flex: 1 1 5.5rem;
  min-width: 4.5rem;
  max-width: 14rem;
  justify-content: center;
  padding: 0.28rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  gap: 0.3rem;
  line-height: 1.1;
}

.home-ship-log-create-widget-tile.events-action-tile .events-action-tile-icon {
  font-size: 0.72rem;
}

.home-ship-log-create-widget-tile.events-action-tile .events-action-tile-label {
  /* Let labels truncate when the pill is at its minimum (many-pills case);
     when the pill grows (few-pills case) the label has room to render in full. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Container-query scaling: bump pill font/padding when the widget itself
   is rendered wider, so a 6-block-wide widget doesn't show pills the same
   tiny size as a 2-block-wide widget. Breakpoints are in container-relative
   `cqw`/`px` to track the WIDGET, not the viewport. */
@container shiplogcreate (min-width: 360px) {
  .home-ship-log-create-widget-tile.events-action-tile {
    flex-basis: 6.5rem;
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
  }
  .home-ship-log-create-widget-tile.events-action-tile .events-action-tile-icon {
    font-size: 0.8rem;
  }
}

@container shiplogcreate (min-width: 560px) {
  .home-ship-log-create-widget-tile.events-action-tile {
    flex-basis: 7.5rem;
    font-size: 0.86rem;
    padding: 0.45rem 0.85rem;
  }
  .home-ship-log-create-widget-tile.events-action-tile .events-action-tile-icon {
    font-size: 0.9rem;
  }
}

@container shiplogcreate (min-width: 800px) {
  .home-ship-log-create-widget-tile.events-action-tile {
    flex-basis: 8.5rem;
    font-size: 0.95rem;
    padding: 0.55rem 1.05rem;
  }
  .home-ship-log-create-widget-tile.events-action-tile .events-action-tile-icon {
    font-size: 1rem;
  }
}

/* Empty-state — surfaces a deep-link to Settings when every pill is hidden. */
.home-ship-log-create-widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-align: center;
}

.home-ship-log-create-widget-empty-icon {
  font-size: 1.2rem;
}

.home-ship-log-create-widget-empty-action {
  font-size: 0.7rem;
}

/* Hybrid time row — smaller pill buttons than the /event default so 5
   presets fit on one line at typical widget widths. */
.home-ship-log-create-widget-time-row {
  flex-shrink: 0;
  padding: 0.2rem;
  gap: 0.2rem;
}

.home-ship-log-create-widget-time-row .events-time-button {
  padding: 0.22rem 0.55rem;
  font-size: 0.66rem;
}

/* Omnibox — keep its full-width look but shrink the padding so the Log
   button and input still fit at the widget's narrowest size.

   IMPORTANT: the base `.events-omnibox` rule sets `flex: 1 1 320px`, which is
   correct in the full /event view (where the omnibox sits in a ROW flex
   parent and that means "width-basis 320px"). Inside the home widget the
   omnibox sits in a COLUMN flex parent, so the same shorthand is interpreted
   as "HEIGHT-basis 320px + grow to fill remaining height" — making the
   single-row text input render as a ~320px-tall slab. We MUST reset the
   shorthand here, not just `flex-shrink`, to undo the unwanted height grow. */
.home-ship-log-create-widget-omnibox {
  flex: 0 0 auto;
  align-items: center;
  padding: 0.18rem 0.3rem 0.18rem 0.55rem;
}

.home-ship-log-create-widget-omnibox .events-omnibox-input {
  /* `align-self: center` (via parent `align-items: center` above) keeps the
     input vertically centered without stretching to the row's intrinsic
     height. The fixed `line-height` + padding produces a stable ~1.6rem
     single-row input. */
  flex: 1 1 auto;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.32rem 0.2rem;
}

.home-ship-log-create-widget-omnibox .events-omnibox-save {
  flex: 0 0 auto;
  padding: 0.32rem 0.65rem;
  font-size: 0.72rem;
}

/* ── Settings modal — Ship's Log pill button reorder list ────────────────
   Drag-to-reorder list of all known action tiles with a per-row visibility
   checkbox. Reuses the same `settings-section-*` outer styling other
   sections in the modal use; only the row layout + drag-handle styling
   lives here.
*/
.settings-ship-log-pill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-ship-log-pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-elevated, #1f2630);
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  transition: border-color 120ms ease, background 120ms ease, opacity 120ms ease;
}

.settings-ship-log-pill-row-disabled {
  opacity: 0.55;
}

.settings-ship-log-pill-row-dragging {
  opacity: 0.4;
}

.settings-ship-log-pill-row-drop-target {
  border-color: var(--color-gold, #d6af5c);
  background: var(--color-gold-subtle, rgba(214, 175, 92, 0.12));
}

.settings-ship-log-pill-row-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
}

.settings-ship-log-pill-row-drag-handle:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.settings-ship-log-pill-row-drag-handle:active {
  cursor: grabbing;
}

.settings-ship-log-pill-row-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.settings-ship-log-pill-row-label input[type="checkbox"] {
  flex-shrink: 0;
}

/* The "tile preview" mirrors the actual pill the user sees in the widget,
   minus the click affordance — same `.event-tile-*` category accent class
   is applied so colours stay consistent. */
.settings-ship-log-pill-row-tile-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.7rem;
  background: var(--color-ocean-surface, #1f2630);
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.settings-ship-log-pill-row-tile-icon {
  font-size: 0.85rem;
}

.settings-ship-log-pill-row-tile-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}

/* Inherit the per-category icon accent from event.css by applying the same
   class names on the preview wrapper (e.g. `event-tile-navigation`). */
.settings-ship-log-pill-row-tile-preview.event-tile-navigation   .settings-ship-log-pill-row-tile-icon { color: var(--events-color-navigation); }
.settings-ship-log-pill-row-tile-preview.event-tile-fuel         .settings-ship-log-pill-row-tile-icon { color: var(--events-color-fuel); }
.settings-ship-log-pill-row-tile-preview.event-tile-engine       .settings-ship-log-pill-row-tile-icon { color: var(--events-color-engine); }
.settings-ship-log-pill-row-tile-preview.event-tile-maintenance  .settings-ship-log-pill-row-tile-icon { color: var(--events-color-maintenance); }
.settings-ship-log-pill-row-tile-preview.event-tile-weather      .settings-ship-log-pill-row-tile-icon { color: var(--events-color-weather); }
.settings-ship-log-pill-row-tile-preview.event-tile-wildlife     .settings-ship-log-pill-row-tile-icon { color: var(--events-color-wildlife); }
.settings-ship-log-pill-row-tile-preview.event-tile-guests       .settings-ship-log-pill-row-tile-icon { color: var(--events-color-guests); }
.settings-ship-log-pill-row-tile-preview.event-tile-safety       .settings-ship-log-pill-row-tile-icon { color: var(--events-color-safety); }
.settings-ship-log-pill-row-tile-preview.event-tile-mooring      .settings-ship-log-pill-row-tile-icon { color: var(--events-color-mooring); }
.settings-ship-log-pill-row-tile-preview.event-tile-provisioning .settings-ship-log-pill-row-tile-icon { color: var(--events-color-provisioning); }
.settings-ship-log-pill-row-tile-preview.event-tile-general      .settings-ship-log-pill-row-tile-icon { color: var(--events-color-general); }

.settings-ship-log-pill-row-visibility-hint {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ── Inventory widget ────────────────────────────────────────────────────
   Two stacked sections (low supply + all items) with an optional
   per-location pill bar at the top. When a location pill is active, a
   LOUD orange banner pins itself above the lists so the user can never
   miss that they're looking at a sub-total instead of vessel-wide
   numbers. Every quantity number shows its unit so unit-confusion is
   impossible.
*/
.home-widget-body-inventory {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.home-inventory-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  font-size: 0.78rem;
  color: var(--color-text-primary);
  gap: 0.35rem;
  overflow: hidden;
}

.home-inventory-widget-loading,
.home-inventory-widget-no-vessel,
.home-inventory-widget-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.home-inventory-widget-spinner {
  width: 0.9rem;
  height: 0.9rem;
}

.home-inventory-widget-no-vessel-icon,
.home-inventory-widget-empty-icon {
  font-size: 1.1rem;
}

.home-inventory-widget-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.4rem;
  overflow: hidden;
}

/* The "you are looking at a sub-count" banner. Saturated background +
   left border keep this readable even when the widget is rendered very
   small. The user explicitly asked for this to be visually obvious so
   they don't mistake a sub-count for vessel-wide. */
.home-inventory-widget-filter-banner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  background: rgba(229, 122, 31, 0.18); /* warm amber wash */
  border: 1px solid rgba(229, 122, 31, 0.55);
  border-left: 4px solid #f4a23a;
  border-radius: 6px;
  color: #f9d8a8;
  font-size: 0.78rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(229, 122, 31, 0.18);
}

.home-inventory-widget-filter-banner-icon {
  font-size: 0.88rem;
  color: #f4a23a;
  flex-shrink: 0;
}

.home-inventory-widget-filter-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}

.home-inventory-widget-filter-banner-text strong {
  color: #ffe8c2;
}

.home-inventory-widget-filter-banner-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease;
}

.home-inventory-widget-filter-banner-clear:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
}

/* Location pill bar — multi-location vessels only. Compact so several
   pills fit per row. */
.home-inventory-widget-pill-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.06));
  flex-shrink: 0;
}

.home-inventory-widget-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: transparent;
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.home-inventory-widget-pill i {
  font-size: 0.7rem;
}

.home-inventory-widget-pill:hover:not(.home-inventory-widget-pill-active) {
  background: var(--surface-elevated, #1f2630);
  border-color: var(--color-border-gold, #d6af5c);
  color: var(--color-text-primary);
}

/* Active pill: high-contrast warm amber to PAIR with the filter banner
   above. The two pieces together make the filtered state unmistakable. */
.home-inventory-widget-pill-active {
  background: #f4a23a;
  border-color: #f4a23a;
  color: #1a1d22;
  box-shadow: 0 0 0 2px rgba(244, 162, 58, 0.32);
}

.home-inventory-widget-pill-active:hover {
  background: #ffb45a;
  border-color: #ffb45a;
  color: #1a1d22;
}

.home-inventory-widget-pill-label {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sections. The low-supply section is sticky-at-top via order, while the
   all-items section gets the remaining flex space and scrolls
   internally. */
.home-inventory-widget-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
}

.home-inventory-widget-section-low-supply {
  flex: 0 0 auto;
  max-height: 40%;
  overflow-y: auto;
}

.home-inventory-widget-section-all-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.home-inventory-widget-section-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0;
  position: sticky;
  top: 0;
  background: var(--color-ocean-deep, #14181f);
  z-index: 1;
}

.home-inventory-widget-section-icon {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.home-inventory-widget-low-supply-icon {
  color: #f4a23a;
}

.home-inventory-widget-section-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  flex: 1 1 auto;
}

.home-inventory-widget-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--surface-elevated, #1f2630);
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.home-inventory-widget-section-count-attention {
  background: rgba(229, 122, 31, 0.25);
  color: #ffd6a0;
}

.home-inventory-widget-section-empty {
  margin: 0;
  padding: 0.35rem 0.45rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.home-inventory-widget-section-empty i {
  color: #6ab86a;
}

.home-inventory-widget-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.home-inventory-widget-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.28rem 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  line-height: 1.2;
}

.home-inventory-widget-row:last-child {
  border-bottom: none;
}

.home-inventory-widget-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
}

.home-inventory-widget-row-quantity {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.home-inventory-widget-row-quantity-value {
  color: var(--color-text-primary);
  font-weight: 700;
}

.home-inventory-widget-row-quantity-unit {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.home-inventory-widget-row-quantity-min {
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

/* Low-supply rows get a left accent both in the low-supply section AND
   when surfaced in the all-items section. */
.home-inventory-widget-row-low-supply {
  border-left: 3px solid #f4a23a;
  padding-left: calc(0.35rem - 3px + 0.35rem);
  background: rgba(229, 122, 31, 0.08);
}

.home-inventory-widget-row-low-supply .home-inventory-widget-row-quantity-value {
  color: #f4a23a;
}

.home-inventory-widget-row-low-supply-highlight {
  background: rgba(229, 122, 31, 0.06);
}

.home-inventory-widget-row-low-supply-highlight .home-inventory-widget-row-quantity-value {
  color: #f4a23a;
}

.home-inventory-widget-error {
  margin: 0;
  padding: 0.4rem 0.5rem;
  background: rgba(193, 53, 53, 0.18);
  border: 1px solid rgba(193, 53, 53, 0.55);
  border-radius: 6px;
  color: #f5b5b5;
  font-size: 0.74rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Checklists widget ───────────────────────────────────────────────────
   Two stacked sections (running + recently run). The Running section is
   capped at ~50% of the widget height so the Recently-run section is
   always visible without scrolling the outer widget; both sections
   scroll internally when their lists overflow.
*/
.home-widget-body-checklist {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.home-checklist-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  font-size: 0.78rem;
  color: var(--color-text-primary);
  gap: 0.4rem;
  overflow: hidden;
}

.home-checklist-widget-loading,
.home-checklist-widget-no-vessel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.home-checklist-widget-spinner {
  width: 0.9rem;
  height: 0.9rem;
}

.home-checklist-widget-no-vessel-icon {
  font-size: 1.1rem;
}

.home-checklist-widget-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.4rem;
  overflow: hidden;
}

/* Sections. Running is capped at ~50% so the Recently-run list always
   gets some screen real estate; both sections internally scroll. */
.home-checklist-widget-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
}

.home-checklist-widget-section-running {
  flex: 0 1 auto;
  max-height: 55%;
  overflow-y: auto;
}

.home-checklist-widget-section-recent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.home-checklist-widget-section-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0;
  position: sticky;
  top: 0;
  background: var(--color-ocean-deep);
  z-index: 1;
}

.home-checklist-widget-section-icon {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.home-checklist-widget-running-icon {
  /* Active runs get an "in progress" navy/blue dot. We reuse
     `--events-color-navigation` (theme-aware: pale blue on the night
     theme, deep navy on the day theme) so the badge auto-adapts. */
  color: var(--events-color-navigation);
}

.home-checklist-widget-recent-icon {
  color: var(--color-text-muted);
}

.home-checklist-widget-section-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  flex: 1 1 auto;
}

.home-checklist-widget-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--color-ocean-surface);
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.home-checklist-widget-section-count-attention {
  /* The widget uses the same `--events-color-navigation` accent as
     other "in progress" affordances around the app to flag a non-zero
     running count. */
  background: color-mix(in srgb, var(--events-color-navigation) 22%, transparent);
  color: var(--events-color-navigation);
}

.home-checklist-widget-section-empty {
  margin: 0;
  padding: 0.35rem 0.45rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.home-checklist-widget-section-empty i {
  color: var(--color-success);
}

.home-checklist-widget-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Generic row layout — applies to both running and recently-run rows.
   Running rows wrap the row content in a button (`row-button`) so it's
   clickable; recently-run rows have no button (display-only). */
.home-checklist-widget-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.32rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.78rem;
  line-height: 1.25;
}

.home-checklist-widget-row:last-child {
  border-bottom: none;
}

/* Running rows expose a button for the entire row so the click target
   is the full row. The button strips its native chrome so the row still
   looks like a list item. */
.home-checklist-widget-row-button {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-checklist-widget-row-running:hover {
  background: var(--color-ocean-light);
}

.home-checklist-widget-row-running-complete .home-checklist-widget-row-progress-bar-fill {
  /* When every item in a running run has been addressed, the fill turns
     green to signal "ready to sign + close". */
  background: var(--color-success);
}

.home-checklist-widget-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
  font-weight: 600;
}

.home-checklist-widget-row-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.home-checklist-widget-row-progress {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 6rem;
  min-width: 4rem;
}

/* The progress bar is intentionally chunky enough to read at a glance
   even when the widget is rendered at its narrowest 2-column size. */
.home-checklist-widget-row-progress-bar {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  background: var(--color-ocean-surface);
  border-radius: 2px;
  overflow: hidden;
}

.home-checklist-widget-row-progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--events-color-navigation);
  transition: width 200ms ease;
}

.home-checklist-widget-row-progress-text {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.home-checklist-widget-row-timestamp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.home-checklist-widget-row-timestamp i {
  font-size: 0.66rem;
}

.home-checklist-widget-row-completed-count {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.home-checklist-widget-row-completed-count i {
  font-size: 0.66rem;
}

.home-checklist-widget-error {
  margin: 0;
  padding: 0.4rem 0.5rem;
  background: rgba(193, 53, 53, 0.18);
  border: 1px solid rgba(193, 53, 53, 0.55);
  border-radius: 6px;
  color: #f5b5b5;
  font-size: 0.74rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   Home dashboard "Upcoming Maintenance" widget
   ──────────────────────────────────────────────────────────────────────────
   Four stacked sections (Late / Due / Not yet due / No due date). Empty
   sections collapse entirely so a clean maintenance state shows only the
   empty-state hint. Each section's row list scrolls independently when it
   overflows so a runaway Late list doesn't push the other three off-screen.
*/
.home-widget-body-maintenance {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.home-maintenance-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  font-size: 0.78rem;
  color: var(--color-text-primary);
  gap: 0.4rem;
  overflow: hidden;
}

.home-maintenance-widget-loading,
.home-maintenance-widget-no-vessel,
.home-maintenance-widget-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.home-maintenance-widget-spinner {
  width: 0.9rem;
  height: 0.9rem;
}

.home-maintenance-widget-no-vessel-icon,
.home-maintenance-widget-empty-icon {
  font-size: 1.1rem;
}

.home-maintenance-widget-empty-icon {
  color: var(--color-success);
}

.home-maintenance-widget-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.4rem;
  overflow-y: auto;
}

/* Section container — every section shares this layout so visual rhythm
   stays consistent. Tone/urgency is applied via the section-icon and
   row accent rules below. */
.home-maintenance-widget-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
}

.home-maintenance-widget-section-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0;
  position: sticky;
  top: 0;
  background: var(--color-ocean-deep);
  z-index: 1;
}

.home-maintenance-widget-section-icon {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* Late uses the danger accent (theme-aware). Due uses the warning amber
   the rest of the app already uses for the "Due" badge so the widget
   matches the table-status colours users already know. The two
   informational sections (Not yet due, No due date) use muted neutrals
   so they don't compete visually with the urgent ones. */
.home-maintenance-widget-section-icon-late {
  color: var(--color-danger);
}

.home-maintenance-widget-section-icon-due {
  color: var(--color-warning);
}

.home-maintenance-widget-section-icon-not-yet-due,
.home-maintenance-widget-section-icon-no-due-date {
  color: var(--color-text-muted);
}

.home-maintenance-widget-section-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  flex: 1 1 auto;
}

.home-maintenance-widget-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--color-ocean-surface);
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Late + Due counts get attention-coloured chips so the user sees at a
   glance "you have X late tasks" without having to scan section text. */
.home-maintenance-widget-section-count-late {
  background: color-mix(in srgb, var(--color-danger) 22%, transparent);
  color: var(--color-danger);
}

.home-maintenance-widget-section-count-due {
  background: color-mix(in srgb, var(--color-warning) 22%, transparent);
  color: var(--color-warning);
}

.home-maintenance-widget-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Generic row layout — applies to every section. The whole row is a
   button so the click target is the full row (parallels the checklist
   widget's running-row pattern). */
.home-maintenance-widget-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.78rem;
  line-height: 1.25;
}

.home-maintenance-widget-row:last-child {
  border-bottom: none;
}

.home-maintenance-widget-row-button {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  width: 100%;
  padding: 0.32rem 0.4rem;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-maintenance-widget-row-button:hover {
  background: var(--color-ocean-light);
}

/* Late rows get a left urgency stripe so a quick glance picks out the
   highest-priority section even if the user scrolls past the header. */
.home-maintenance-widget-row-late .home-maintenance-widget-row-button {
  border-left: 3px solid var(--color-danger);
}

.home-maintenance-widget-row-due .home-maintenance-widget-row-button {
  border-left: 3px solid var(--color-warning);
}

.home-maintenance-widget-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
  font-weight: 600;
}

.home-maintenance-widget-row-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.home-maintenance-widget-row-due,
.home-maintenance-widget-row-due-hours,
.home-maintenance-widget-row-schedule {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.home-maintenance-widget-row-due i,
.home-maintenance-widget-row-due-hours i,
.home-maintenance-widget-row-schedule i {
  font-size: 0.66rem;
}

/* When a row is in the Late or Due bucket, tint its due-date pill so the
   date itself reads as urgent (not just the section header). */
.home-maintenance-widget-row-due-late {
  color: var(--color-danger);
  font-weight: 600;
}

.home-maintenance-widget-row-due-due {
  color: var(--color-warning);
  font-weight: 600;
}

.home-maintenance-widget-row-schedule {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 50%;
}

/* ──────────────────────────────────────────────────────────────────────────
   Home dashboard "Chat" widget
   ──────────────────────────────────────────────────────────────────────────
   Cross-channel newest-first feed. Each row is a single-line "channel pill +
   author + timestamp" header above a truncated one-line preview of the
   message body. Designed to read like a glanceable activity stream rather
   than a full chat surface — clicking a row jumps the user to the /chat
   page on the appropriate channel.
*/
.home-widget-body-chat {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.home-chat-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  font-size: 0.78rem;
  color: var(--color-text-primary);
  overflow: hidden;
}
.home-chat-widget-loading,
.home-chat-widget-no-vessel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.1rem 0.85rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.home-chat-widget-spinner {
  width: 0.95rem;
  height: 0.95rem;
}
.home-chat-widget-no-vessel-icon {
  font-size: 1rem;
  opacity: 0.85;
}
.home-chat-widget-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.home-chat-widget-section-empty {
  margin: 0;
  padding: 1.1rem 0.85rem;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.home-chat-widget-section-empty i {
  font-size: 0.95rem;
  opacity: 0.7;
}
.home-chat-widget-row-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.home-chat-widget-row {
  display: block;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.home-chat-widget-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
.home-chat-widget-row-own-message {
  background: rgba(64, 158, 255, 0.06);
}
.home-chat-widget-row-own-message:hover {
  background: rgba(64, 158, 255, 0.10);
}
.home-chat-widget-row-button {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.42rem 0.55rem;
  gap: 0.2rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.home-chat-widget-row-button:focus-visible {
  outline: 2px solid var(--color-accent-primary, #409eff);
  outline-offset: -2px;
  border-radius: 6px;
}
.home-chat-widget-row-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  min-width: 0;
  font-size: 0.7rem;
}
/* Channel pill — the always-visible "indicator of which channel they came
   through" the user explicitly requested. Tinted with the accent colour so
   it reads as a tag rather than body copy and never gets lost next to the
   author name. Truncates with an ellipsis at narrow widths. */
.home-chat-widget-row-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: rgba(64, 158, 255, 0.18);
  color: var(--color-accent-primary, #409eff);
  border: 1px solid rgba(64, 158, 255, 0.32);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 1;
  min-width: 0;
  max-width: 55%;
  overflow: hidden;
  white-space: nowrap;
}
.home-chat-widget-row-channel-icon {
  font-size: 0.62rem;
  opacity: 0.85;
  flex-shrink: 0;
}
.home-chat-widget-row-channel-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.home-chat-widget-row-author {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.home-chat-widget-row-timestamp {
  margin-left: auto;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  flex-shrink: 0;
}
.home-chat-widget-row-preview {
  color: var(--color-text-secondary, var(--color-text-muted));
  font-size: 0.74rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.home-chat-widget-error {
  margin: 0.6rem 0.85rem;
  padding: 0.45rem 0.6rem;
  background: rgba(232, 76, 76, 0.12);
  border: 1px solid rgba(232, 76, 76, 0.32);
  border-radius: 6px;
  color: #f5b5b5;
  font-size: 0.74rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* ── Calendar widget ─────────────────────────────────────────────────────
   One-month calendar (always full Sun→Sat weeks padded from the previous /
   next month so every row has 7 cells). Driven by `homeCalendarWidget.js`.
   Reuses the per-category color classes (`events-pill-<key>` and
   `events-pill-active`) defined in event.css so a category recolor only
   happens in one place.
*/
.home-widget-body-calendar {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.home-calendar-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  font-size: 0.78rem;
  color: var(--color-text-primary);
  gap: 0.35rem;
  overflow: hidden;
}
.home-calendar-widget-loading,
.home-calendar-widget-no-vessel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.home-calendar-widget-spinner {
  width: 0.9rem;
  height: 0.9rem;
}
.home-calendar-widget-no-vessel-icon {
  font-size: 1.1rem;
}
.home-calendar-widget-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 0.35rem;
  overflow: hidden;
}
/* ── Toolbar ──────────────────────────────────────────────────────────── */
.home-calendar-widget-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.06));
  flex-shrink: 0;
}
.home-calendar-widget-toolbar-button {
  background: var(--surface-elevated-strong, rgba(255, 255, 255, 0.06));
  color: var(--color-text-primary);
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1.1;
}
.home-calendar-widget-toolbar-button:hover {
  background: var(--surface-elevated-stronger, rgba(255, 255, 255, 0.12));
}
.home-calendar-widget-toolbar-button-today {
  margin-left: auto;
  font-weight: 600;
}
.home-calendar-widget-toolbar-select {
  background: var(--surface-elevated-strong, rgba(255, 255, 255, 0.06));
  color: var(--color-text-primary);
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
}
.home-calendar-widget-toolbar-select-year {
  width: 4.5rem;
}
/* ── Filter pill rows ─────────────────────────────────────────────────── */
.home-calendar-widget-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}
.home-calendar-widget-pill-row-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-right: 0.15rem;
}
.home-calendar-widget-pill.events-pill {
  padding: 0.1rem 0.35rem;
  font-size: 0.62rem;
  font-weight: 600;
  gap: 0.18rem;
  line-height: 1.1;
}
.home-calendar-widget-pill.events-pill i {
  font-size: 0.65rem;
}
.home-calendar-widget-pill-label {
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Task pill colour overrides — drive off the task-kind enum value so a
   late / due / completed pill always reads at a glance, even in
   monochrome event-category zones. */
.home-calendar-widget-pill-task-late {
  border-color: var(--color-danger, #d9534f);
  color: var(--color-danger, #d9534f);
}
.home-calendar-widget-pill-task-late.events-pill-active {
  background: var(--color-danger, #d9534f);
  color: #fff;
}
.home-calendar-widget-pill-task-due {
  border-color: var(--color-warning, #d9a14a);
  color: var(--color-warning, #d9a14a);
}
.home-calendar-widget-pill-task-due.events-pill-active {
  background: var(--color-warning, #d9a14a);
  color: #fff;
}
.home-calendar-widget-pill-task-upcoming {
  border-color: var(--color-info, #5fa9d3);
  color: var(--color-info, #5fa9d3);
}
.home-calendar-widget-pill-task-upcoming.events-pill-active {
  background: var(--color-info, #5fa9d3);
  color: #fff;
}
.home-calendar-widget-pill-task-completed {
  border-color: var(--color-success, #5ab760);
  color: var(--color-success, #5ab760);
}
.home-calendar-widget-pill-task-completed.events-pill-active {
  background: var(--color-success, #5ab760);
  color: #fff;
}
/* ── Weekday header ─────────────────────────────────────────────────── */
.home-calendar-widget-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.home-calendar-widget-weekday-cell {
  padding: 0.15rem 0.2rem;
  text-align: center;
}
/* ── Week grid ──────────────────────────────────────────────────────── */
.home-calendar-widget-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface-border-subtle, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  overflow: hidden;
  flex-grow: 1;
  min-height: 0;
}
.home-calendar-widget-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  flex: 1 1 0;
  min-height: 0;
}
.home-calendar-widget-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.2rem;
  padding: 0.2rem 0.25rem;
  background: var(--surface-elevated, #1f2630);
  color: var(--color-text-primary);
  border: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  min-height: 0;
}
.home-calendar-widget-day:hover {
  background: var(--surface-elevated-stronger, rgba(255, 255, 255, 0.08));
}
.home-calendar-widget-day-other-month {
  color: var(--color-text-muted);
  opacity: 0.5;
}
.home-calendar-widget-day-today {
  outline: 1px solid var(--color-info, #5fa9d3);
  outline-offset: -1px;
}
.home-calendar-widget-day-selected {
  background: var(--color-info-soft, rgba(95, 169, 211, 0.18));
}
.home-calendar-widget-day-number {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  align-self: flex-start;
}
.home-calendar-widget-day-count {
  position: absolute;
  top: 0.18rem;
  right: 0.25rem;
  font-size: 0.55rem;
  font-weight: 700;
  background: var(--surface-elevated-strong, rgba(255, 255, 255, 0.18));
  color: var(--color-text-primary);
  border-radius: 999px;
  padding: 0 0.25rem;
  min-width: 0.85rem;
  text-align: center;
  line-height: 1.2;
}
.home-calendar-widget-day-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  margin-top: auto;
}
.home-calendar-widget-day-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-text-muted);
}
.home-calendar-widget-day-dot-event {
  background: currentColor;
}
.home-calendar-widget-day-dot-task-late      { background: var(--color-danger,  #d9534f); }
.home-calendar-widget-day-dot-task-due       { background: var(--color-warning, #d9a14a); }
.home-calendar-widget-day-dot-task-upcoming  { background: var(--color-info,    #5fa9d3); }
.home-calendar-widget-day-dot-task-completed { background: var(--color-success, #5ab760); }
/* ── Selected-date strip ─────────────────────────────────────────────── */
.home-calendar-widget-selected-strip {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
  border-top: 1px solid var(--surface-border, rgba(255, 255, 255, 0.06));
  padding-top: 0.3rem;
  max-height: 40%;
  overflow: hidden;
}
.home-calendar-widget-selected-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.home-calendar-widget-selected-strip-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
}
.home-calendar-widget-selected-strip-close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.1rem 0.25rem;
}
.home-calendar-widget-selected-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow-y: auto;
  min-height: 0;
}
.home-calendar-widget-selected-strip-empty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  padding: 0.25rem;
}
.home-calendar-widget-selected-strip-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
  background: var(--surface-elevated-strong, rgba(255, 255, 255, 0.05));
  cursor: pointer;
  font-size: 0.72rem;
  min-width: 0;
}
.home-calendar-widget-selected-strip-row:hover {
  background: var(--surface-elevated-stronger, rgba(255, 255, 255, 0.1));
}
.home-calendar-widget-selected-strip-row-icon {
  flex-shrink: 0;
  width: 0.95rem;
  text-align: center;
}
.home-calendar-widget-selected-strip-row-title {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.home-calendar-widget-selected-strip-row-tag {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  background: var(--surface-elevated-stronger, rgba(255, 255, 255, 0.1));
  color: var(--color-text-muted);
}
.home-calendar-widget-selected-strip-row-tag-late      { background: var(--color-danger,  #d9534f); color: #fff; }
.home-calendar-widget-selected-strip-row-tag-due       { background: var(--color-warning, #d9a14a); color: #fff; }
.home-calendar-widget-selected-strip-row-tag-upcoming  { background: var(--color-info,    #5fa9d3); color: #fff; }
.home-calendar-widget-selected-strip-row-tag-completed { background: var(--color-success, #5ab760); color: #fff; }