@import url("assets/fonts/fonts.css");

/* ============================================================
   Design tokens — ported from the Euromar Prototype design
   system (DESIGN_SYSTEM.md / globals.css). Use these vars in
   new/updated rules; do not hardcode brand hex values.
   ============================================================ */
:root {
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Brand palette */
  --navy: #1a2e4a;
  --navy-hover: #243d5f;
  --navy-deep: #162640;
  --slate: #596d80;
  --slate-soft: #7690a8;
  --surface: #f5f7fa;
  --surface-2: #f0f2f4;

  /* Neutrals (Tailwind gray) */
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;

  /* Semantic badge tokens */
  --info-bg: #e9f7fe;     --info: #2f61bb;     --info-border: #c0dcea;
  --success-bg: #def9e5;  --success: #276e48;  --success-border: #cbf3d5;
  --warning-bg: #fff4ca;  --warning: #705402;  --warning-border: #feecc3;
  --orange-bg: #fff0e0;   --orange: #9a4a00;   --orange-border: #ffe0c0;
  --danger-bg: #ffebeb;   --danger: #a63338;   --danger-border: #fedcdf;
  --neutral-bg: #e8ecf0;  --neutral-border: #dee2e5;

  /* Radii (prototype: rounded-lg / -xl / -2xl) */
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
}

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

html, body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--navy);
  font-size: 14px;
  line-height: 1.4;
}

.hidden {
  display: none !important;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Header ---------- */
.header {
  background: #fff;
  color: var(--navy);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--navy);
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-btn {
  background: transparent;
  border: none;
  color: var(--slate);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.9;
}
.close-btn:hover { opacity: 1; }

/* ---------- Toggle ---------- */
.toggle-wrap {
  display: flex;
  background: var(--surface-2);
  margin: 16px 18px 0;
  border-radius: var(--radius-lg);
  padding: 4px;
  flex-shrink: 0;
}

.toggle-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.15s;
}

.toggle-btn.active {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ---------- Views ---------- */
.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.view.hidden { display: none; }

.view-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 18px;
}

.view-footer {
  flex-shrink: 0;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--gray-200);
  background: var(--surface);
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.req { color: var(--danger); font-weight: 700; }
.opt { color: var(--slate-soft); font-weight: 400; font-size: 12px; }

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"] {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 9px 11px;
  font-size: 14px;
  color: var(--navy);
  outline: none;
  transition: border 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 46, 74, 0.12);
}

.run-btn {
  width: 100%;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-lg);
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s;
}

.run-btn:hover { background: var(--navy-hover); }
.run-btn:disabled { background: var(--navy); opacity: 0.4; cursor: not-allowed; }

.footer-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--slate);
  text-align: center;
}
.footer-note a {
  color: var(--navy);
  text-decoration: none;
  margin-left: 6px;
}
.footer-note a:hover { text-decoration: underline; }

/* ---------- Loading ---------- */
.loading-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}

.spinner {
  width: 42px;
  height: 42px;
  border: 4px solid var(--gray-200);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.loading-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}
.loading-sub {
  font-size: 13px;
  color: var(--slate);
}

/* ---------- Error ---------- */
.error-box {
  background: var(--danger-bg);
  border: 1px solid var(--danger-bg);
  color: var(--danger);
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  margin-bottom: 12px;
  word-break: break-word;
}

/* ---------- Result Header ---------- */
.result-header {
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
  border-radius: var(--radius-lg) 8px 0 0;
}

.result-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  word-break: break-word;
}
.result-imo {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 2px;
}

/* ---------- Company Result Banner ---------- */
.result-banner {
  padding: 16px;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #fff;
  text-transform: uppercase;
  border-radius: 0 0 8px 8px;
  margin-bottom: 16px;
}
.result-banner.green  { background: var(--success); }
.result-banner.amber  { background: var(--warning); }
.result-banner.red    { background: var(--danger); }

/* ---------- Vessel Global Assessment ---------- */
.global-assessment {
  margin-top: 12px;
  margin-bottom: 14px;
}
.global-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.global-banner {
  text-align: center;
  padding: 16px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: var(--radius-lg);
  color: #fff;
  text-transform: uppercase;
}
.global-banner.green { background: var(--success); }
.global-banner.amber { background: var(--warning); }
.global-banner.red   { background: var(--danger); }

/* ---------- Vessel Factor Cards (stacked) ---------- */
.factor-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.factor-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.factor-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.factor-pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.factor-pill.green {
  background: var(--success-bg);
  color: var(--success);
}
.factor-pill.amber {
  background: var(--warning-bg);
  color: var(--warning);
}
.factor-pill.red {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---------- Share Box ---------- */
.share-box {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.share-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 6px;
}
.share-url {
  font-size: 12px;
  color: var(--navy);
  word-break: break-all;
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 8px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.share-actions {
  display: flex;
  gap: 8px;
}

/* ---------- Secondary Buttons ---------- */
.secondary-btn {
  flex: 1;
  background: #fff;
  border: 1px solid var(--gray-200);
  color: var(--slate);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s;
}
.secondary-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}
.secondary-btn.primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.secondary-btn.primary:hover {
  background: var(--navy-hover);
}
.secondary-btn.full {
  width: 100%;
}
.table-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* ---------- Outlook-specific additions ---------- */

.settings-btn {
  background: transparent;
  border: none;
  color: var(--slate);
  font-size: 18px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.settings-btn:hover { background: var(--gray-100); color: var(--navy); }

/* ---------- ISM Company collapsible ---------- */
.ism-collapse-header {
  margin-top: 4px;
}

.ism-collapse-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}

.ism-collapse-btn:hover {
  background: var(--gray-200);
}

.ism-collapse-icon {
  font-size: 10px;
  color: var(--slate);
  flex-shrink: 0;
}

.ism-collapse-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.settings-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}

.btn-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.status-msg {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 600;
}
.status-msg.ok    { background: var(--success-bg); color: var(--success); }
.status-msg.error { background: var(--danger-bg); color: var(--danger); }

/* ---------- Input wrap (plain inputs with paste button) ---------- */
.input-wrap {
  position: relative;
  width: 100%;
}

.input-wrap input[type="text"] {
  width: 100%;
  padding-right: 52px;
}

/* ---------- Paste button (shared by .ts-wrap and .input-wrap) ---------- */
.paste-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-soft);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 3px;
  transition: color 0.12s;
  z-index: 1;
}

.paste-btn:hover {
  color: var(--navy);
}

/* ---------- Autocomplete (Tom Select style) ---------- */
.ts-wrap {
  position: relative;
  width: 100%;
}

/* magnifying glass icon via CSS background on the input */
.ts-wrap input[type="text"] {
  width: 100%;
  padding-left: 30px;
  padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 14px 14px;
}

/* dropdown is fixed so it isn't clipped by the scrollable view-body */
.ts-dropdown {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
  max-height: 230px;
  overflow-y: auto;
}

.ts-option {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--surface);
  transition: background 0.1s;
}
.ts-option:last-child { border-bottom: none; }

.ts-option:hover,
.ts-option.active {
  background: var(--navy);
  color: #fff; /* plain-text options (report/list filters) stay readable on the navy hover */
}
.ts-option:hover .ts-opt-primary,
.ts-option.active .ts-opt-primary  { color: #fff; }
.ts-option:hover .ts-opt-secondary,
.ts-option.active .ts-opt-secondary { color: rgba(255,255,255,0.75); }

.ts-opt-primary {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.ts-opt-secondary {
  font-size: 12px;
  color: var(--slate);
  margin-top: 1px;
}

.ts-option-create {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--slate);
  background: var(--surface);
  border-top: 1px solid var(--gray-200);
}

.ts-option-create kbd {
  background: var(--gray-200);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: inherit;
  color: var(--navy);
}

.ts-option-loading {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--slate-soft);
  text-align: center;
}

/* ---------- Company-exists confirmation ---------- */
.confirm-box {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}
.confirm-msg {
  font-size: 14px;
  font-weight: 600;
  color: var(--info);
  margin-bottom: 8px;
  line-height: 1.5;
}
.confirm-question {
  font-size: 13px;
  color: var(--info);
}
.confirm-actions {
  display: flex;
  gap: 8px;
}
.confirm-proceed-btn {
  flex: 1;
  margin-top: 0 !important;
}

/* ---------- Maritime Team attachments ---------- */
.attach-box {
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.attach-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.attach-hint {
  font-size: 12px;
  color: var(--slate);
  margin-top: 6px;
}
.attach-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.attach-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 13px;
}
.attach-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--navy);
}
.attach-remove {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--danger);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.attach-remove:hover { color: var(--danger); }

/* ---------- Send to Maritime Team ---------- */
.escalate-btn {
  width: 100%;
  background: var(--warning);
  color: #fff;
  border: none;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-lg);
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 12px;
  transition: background 0.15s;
}
.escalate-btn:hover    { background: var(--warning); }
.escalate-btn:disabled { background: var(--slate-soft); cursor: not-allowed; }

.zammad-status {
  margin-top: -4px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 600;
}
.zammad-status.ok    { background: var(--success-bg); color: var(--success); }
.zammad-status.error { background: var(--danger-bg); color: var(--danger); }

/* ---------- Back button ---------- */
.back-btn {
  background: transparent;
  border: none;
  color: var(--slate);
  font-size: 20px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.back-btn:hover { background: var(--gray-100); color: var(--navy); }

/* ---------- Main menu ---------- */
.main-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 340px;
}

.menu-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 12px 18px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
  min-height: 108px;
}

.menu-tile:not([disabled]):hover {
  background: var(--surface);
  border-color: var(--gray-300);
  box-shadow: 0 1px 3px rgba(26, 46, 74, 0.06);
}

.menu-tile[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  background: var(--surface);
}

.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-xl);
  background: var(--info-bg);
  color: var(--info);
  line-height: 1;
}
.menu-icon svg { width: 24px; height: 24px; }

.menu-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.menu-soon {
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: 9px;
  font-weight: 700;
  color: var(--slate-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--surface-2);
  padding: 2px 5px;
  border-radius: 4px;
}

/* ---------- Maritime feature list ---------- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.feature-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.feature-tile:hover {
  background: var(--surface);
  border-color: var(--gray-300);
  box-shadow: 0 1px 3px rgba(26, 46, 74, 0.06);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--info-bg);
  color: var(--info);
}
.feature-icon svg { width: 20px; height: 20px; }

.feature-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}

.feature-desc {
  font-size: 12px;
  color: var(--slate);
  line-height: 1.35;
}

/* ---------- Vessel search ---------- */
.zvl-search-wrap {
  margin-bottom: 10px;
}

.zvl-search-wrap input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border 0.15s;
}

.zvl-search-wrap input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 46, 74, 0.12);
}

.zvl-status {
  font-size: 12px;
  color: var(--slate);
  min-height: 16px;
  margin-bottom: 8px;
}

.zvl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zvl-result-item {
  padding: 10px 13px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: 6px;
  cursor: pointer;
  background: #fff;
  transition: background 0.1s, border-color 0.1s;
}

.zvl-result-item:hover {
  background: var(--surface);
  border-color: var(--navy);
}

.zvl-result-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.zvl-result-imo {
  font-size: 12px;
  color: var(--slate);
  margin-top: 2px;
}

.zvl-back-btn {
  background: none;
  border: none;
  color: var(--navy);
  font-size: 13px;
  cursor: pointer;
  padding: 0 0 10px 0;
  font-weight: 600;
  display: block;
}

.zvl-back-btn:hover { text-decoration: underline; }

.zvl-detail-card {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
}

.zvl-detail-header {
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
}

.zvl-detail-vessel-name {
  font-size: 15px;
  font-weight: 700;
  word-break: break-word;
}

.zvl-detail-imo {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 3px;
}

.zvl-detail-body {
  padding: 4px 0;
  background: #fff;
}

.zvl-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 16px;
  border-bottom: 1px solid var(--surface);
  font-size: 13px;
}

.zvl-detail-row:last-child { border-bottom: none; }

.zvl-detail-key {
  color: var(--slate);
  flex-shrink: 0;
  margin-right: 12px;
}

.zvl-detail-val {
  color: var(--navy);
  font-weight: 600;
  text-align: right;
}

/* ---------- Zammad Reports ---------- */
.rpt-status {
  margin-top: 10px;
  font-size: 13px;
  min-height: 18px;
  font-weight: 600;
}
.rpt-status.ok   { color: var(--success); }
.rpt-status.err  { color: var(--danger); }
.rpt-status.info { color: var(--slate); }

.rpt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 16px;
  text-align: center;
}

.rpt-loading-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.rpt-loading-sub {
  font-size: 12px;
  color: var(--slate);
}

.rpt-options-status {
  font-size: 12px;
  font-weight: 600;
  min-height: 0;
  margin-bottom: 4px;
}
.rpt-options-status:empty { display: none; }
.rpt-options-status.info  { color: var(--slate); }
.rpt-options-status.err   { color: var(--danger); }

.rpt-states-section {
  margin-bottom: 14px;
}

.rpt-states-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

.rpt-states-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  max-height: 140px;
  overflow-y: auto;
}

.rpt-state-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--navy) !important;
  cursor: pointer;
  margin: 0 !important;
  white-space: nowrap;
}

.rpt-state-item input[type="checkbox"] {
  width: auto !important;
  flex-shrink: 0;
}

.rpt-states-loading {
  font-size: 12px;
  color: var(--slate-soft);
}

.rpt-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.rpt-actions .run-btn {
  flex: 2;
}

.rpt-actions .secondary-btn {
  flex: 1;
}

/* Searchable selects in report filters (override the search-icon defaults from .ts-wrap) */
.rpt-sel-wrap input[type="text"] {
  padding-left: 10px;
  padding-right: 30px;
  background-image: none;
  cursor: pointer;
}
.rpt-sel-wrap input[type="text"]:focus {
  cursor: text;
}
.rpt-sel-wrap input[type="text"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: var(--surface);
}
.rpt-sel-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--slate-soft);
  font-size: 16px;
  line-height: 1;
  padding: 2px 3px;
}
.rpt-sel-clear:hover { color: var(--navy); }
.rpt-opt-all {
  font-style: italic;
  color: var(--slate);
}
.rpt-states-hint {
  font-weight: 400;
  font-size: 11px;
  color: var(--slate-soft);
  margin-left: 4px;
}

.check-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--navy) !important;
  cursor: pointer;
  line-height: 1.4;
  margin-bottom: 16px;
}

.check-label input[type="checkbox"] {
  width: auto !important;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ---------- Favorites section (main view) ---------- */
.favorites-section {
  width: 100%;
  max-width: 340px;
  margin-bottom: 16px;
}

.fav-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding: 0 2px;
}

/* ---------- Favorite star button (on feature tiles) ---------- */
.fav-star-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 19px;
  color: var(--gray-300);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, transform 0.1s;
  user-select: none;
}

.fav-star-btn:hover {
  color: #f59e0b;
  transform: scale(1.2);
}

.fav-star-btn.fav-active {
  color: #f59e0b;
}

/* Compact override for Favorites tiles on the main page */
.fav-tile {
  padding: 10px 12px;
  gap: 10px;
}
.fav-tile .feature-icon {
  width: 30px;
  height: 30px;
}
.fav-tile .feature-icon svg { width: 18px; height: 18px; }
.fav-tile .feature-name {
  font-size: 13px;
}

/* ---------- Vessel result — ISM Manager card ---------- */
.ism-result-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.ism-result-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.ism-result-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.ism-result-imo {
  font-size: 12px;
  color: var(--slate);
  margin-top: 1px;
}

/* ---------- Seafarers Zoho Bridge ---------- */
.sfbr-how-to {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sfbr-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--info);
  line-height: 1.45;
}

.sfbr-step-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--info);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.sfbr-status {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
  line-height: 1.4;
}
.sfbr-status.ok    { color: var(--success); }
.sfbr-status.error { color: var(--danger); }
.sfbr-status.info  { color: var(--slate); }

.sfbr-version {
  margin-top: 16px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  font-size: 11px;
  color: var(--slate);
  line-height: 1.5;
  word-break: break-all;
}
.sfbr-version code {
  background: var(--gray-200);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

.info-note {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.5;
}
.info-note-sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--slate);
}

/* ---------- Company Search — stats card ---------- */
.cs-stats-grid {
  display: flex;
  border-top: 1px solid var(--gray-200);
}

.cs-stat-item {
  flex: 1;
  padding: 12px 14px;
  background: #fff;
  text-align: center;
}

.cs-stat-item + .cs-stat-item {
  border-left: 1px solid var(--gray-200);
}

.cs-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cs-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
}

/* ---------- Company Search — fleet list ---------- */
.cs-fleet-section {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.cs-fleet-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cs-fleet-status {
  font-size: 12px;
  color: var(--slate);
  min-height: 16px;
  margin-bottom: 6px;
}

/* Tier subheader rows inside the CRM Matches lists (not clickable). */
.crm-match-subhead {
  list-style: none;
  font-size: 10px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 8px 0 4px;
}
/* Divider line between the "Best matches" and "Possibly related" groups. */
.crm-match-subhead:not(:first-child) {
  border-top: 1px solid var(--gray-200);
  margin-top: 8px;
  padding-top: 12px;
}

/* ---------- Seafarers — Zoho → BMAR Auto Complete ---------- */

.ztb-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.ztb-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  font-size: 12px;
  color: var(--slate);
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.ztb-step-n {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--gray-200);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ztb-step.active {
  background: var(--info-bg);
  color: var(--info);
}
.ztb-step.active .ztb-step-n { background: var(--info); }

.ztb-step.completed {
  background: var(--success-bg);
  color: var(--success);
}
.ztb-step.completed .ztb-step-n { background: var(--success); }

.ztb-file-section {
  margin: 14px 0;
}

.ztb-file-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

.ztb-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
}

.ztb-opt-group {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.ztb-opt-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.ztb-opt-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}

.ztb-opt-hint {
  font-size: 11px;
  color: var(--slate);
  margin-top: 4px;
  font-style: italic;
}

.ztb-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.ztb-checkbox-label input[type="checkbox"] {
  cursor: pointer;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ztb-mt { margin-top: 10px; }

.ztb-dropdown-group {
  margin-top: 8px;
  padding: 10px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ztb-dropdown-row label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 3px;
}

.ztb-dropdown-row select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
  color: var(--navy);
}

.ztb-progress {
  width: 100%;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
  margin: 12px 0 4px;
}

.ztb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--navy-hover));
  width: 0%;
  transition: width 0.4s ease;
}

.ztb-summary {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  font-size: 12px;
}

.ztb-summary-title {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  font-size: 12px;
}

.ztb-summary-subtitle {
  font-weight: 700;
  font-size: 11px;
  margin: 6px 0 3px;
}

.ztb-summary-item {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid var(--surface);
  gap: 8px;
}
.ztb-summary-item:last-child { border-bottom: none; }

.ztb-summary-label {
  font-weight: 600;
  color: var(--slate);
  flex-shrink: 0;
}

.ztb-summary-value {
  color: var(--slate);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}

.ztb-ok  { color: var(--success); }
.ztb-err { color: var(--danger); }

#ztbNewAppBtn { margin-top: 12px; }

/* ── SRA Auto-Fill ──────────────────────────────────────────────────────── */

.sra-drop-zone {
  border: 2px dashed var(--info-border);
  border-radius: var(--radius-lg);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--info-bg);
  margin: 12px 0;
  transition: background .15s, border-color .15s;
}
.sra-drop-zone:hover,
.sra-drop-zone.drag-over {
  border-color: var(--info);
  background: var(--info-bg);
}
.sra-drop-icon {
  font-size: 30px;
  margin-bottom: 6px;
}
.sra-drop-text {
  font-size: 13px;
  color: var(--navy);
  line-height: 1.5;
}
.sra-drop-text small {
  color: var(--slate);
  font-size: 11px;
}
.sra-files-list {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sra-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 7px 10px;
  font-size: 12px;
  color: var(--navy);
}
.sra-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}
.sra-file-remove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 15px;
  padding: 0 2px;
  line-height: 1;
}
.sra-extracted-data {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-lg);
  padding: 11px 12px;
  margin: 10px 0;
}
.sra-sp-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
}
.sra-sp-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.sra-sp-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: 13px;
  margin-bottom: 7px;
  box-sizing: border-box;
}
.sra-sp-input:focus {
  outline: none;
  border-color: var(--info);
}

/* ---------- Knowledge Base ---------- */
.kb-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.kb-tab {
  flex: 1;
  padding: 7px 0;
  border: 1.5px solid var(--gray-200);
  border-radius: 7px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.kb-tab.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.kb-tab:not(.active):hover {
  background: var(--surface);
  border-color: var(--navy);
  color: var(--navy);
}

.kb-tree {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb-category-header {
  padding: 9px 13px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}

.kb-category-header:hover {
  background: var(--info-bg);
}

.kb-category .kb-answer-list {
  margin-top: 4px;
  padding-left: 12px;
  display: none;
}

.kb-category.open .kb-answer-list {
  display: block;
}

.kb-answer-item {
  padding: 8px 11px;
}

.kb-article-card {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.kb-article-header {
  background: var(--navy);
  color: #fff;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  word-break: break-word;
}

.kb-article-body {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.55;
  background: #fff;
  max-height: 340px;
  overflow-y: auto;
}

.kb-article-body h1,
.kb-article-body h2,
.kb-article-body h3 {
  font-size: 14px;
  margin: 10px 0 4px;
  color: var(--navy);
}

.kb-article-body p  { margin: 0 0 8px; }
.kb-article-body ul,
.kb-article-body ol { padding-left: 18px; margin: 0 0 8px; }
.kb-article-body a  { color: var(--navy); }

.kb-article-actions {
  display: flex;
  flex-direction: column;
}

.kb-attachments {
  border-top: 1px solid var(--gray-200);
  padding: 10px 16px 12px;
  background: var(--surface);
}

.kb-attachments-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate);
  margin-bottom: 7px;
}

.kb-attachment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--surface);
  font-size: 13px;
}

.kb-attachment-row:last-child { border-bottom: none; }

.kb-attachment-name {
  flex: 1;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-attachment-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.kb-attachment-btn:hover {
  background: var(--surface);
  border-color: var(--navy);
}

.zvl-result-name em {
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
}

/* ---------- Login (email OTP) ---------- */
.login-box {
  max-width: 360px;
  margin: 24px auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: 28px 24px;
  box-shadow: 0 1px 3px rgba(26, 46, 74, 0.06);
}
.login-logo {
  display: block;
  width: 240px;
  max-width: 80%;
  height: auto;
  margin: 0 auto 4px;
}
.login-title {
  margin: 8px 0 4px;
  color: var(--navy);
  font-weight: 600;
}
.login-sub {
  color: var(--slate);
  font-size: 13px;
  margin: 8px 0 16px;
}
.login-box input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  font-size: 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
}
#loginCode {
  letter-spacing: 8px;
  text-align: center;
  font-size: 22px;
}
.login-status {
  margin-top: 12px;
  font-size: 13px;
  min-height: 18px;
}
.login-status.err { color: var(--danger); }

/* ---------- Account / settings ---------- */
.account-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.account-label {
  font-size: 12px;
  color: var(--slate-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.account-email {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  word-break: break-all;
}

/* ---------- Mobile / PWA responsiveness ---------- */

/* Use dynamic viewport height so the layout fills the screen correctly on
   mobile (accounts for the browser's collapsing address bar). */
.container {
  height: 100vh;     /* fallback */
  height: 100dvh;
}

@media (max-width: 600px) {
  body { font-size: 15px; }

  .container { max-width: 100%; }

  /* Comfortable edge spacing + room for the iOS home indicator */
  .view-body {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  /* Header sits below the notch/status bar in standalone PWA mode */
  .header { padding-top: calc(14px + env(safe-area-inset-top)); }

  /* Bigger touch targets */
  .menu-tile { min-height: 110px; }
  .feature-tile { padding: 16px 14px; }
  .run-btn, .secondary-btn { padding: 14px; font-size: 16px; }
  .back-btn, .settings-btn { font-size: 24px; padding: 6px 10px; }

  /* 16px inputs stop iOS Safari from auto-zooming on focus */
  input[type="text"], input[type="password"], input[type="email"],
  input[type="date"], .zvl-search-wrap input, .login-box input {
    font-size: 16px;
  }
}

/* Tighten the two-column menu grid on very narrow phones */
@media (max-width: 360px) {
  .menu-grid { gap: 10px; }
  .menu-tile { min-height: 96px; }
}

@supports (padding: max(0px)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- Registration — Closing List ---------- */
.cl-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.cl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 120px;
  min-width: 0;          /* allow children (esp. date inputs) to shrink */
}
.cl-field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
}
.cl-field select,
.cl-field input {
  padding: 8px 10px;
  /* Focus-zoom is suppressed by maximum-scale=1 in the viewport meta, so we
     can use a normal 14px field font without iOS zooming on focus. */
  font-size: 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--navy);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 38px;
}
/* Normalise the native date control so it can't overflow its grid cell. */
.cl-field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Additional filters — collapsible */
.cl-advanced {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: 12px;
  background: var(--surface);
}
.cl-advanced > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  user-select: none;
}
.cl-advanced > summary::-webkit-details-marker { display: none; }
.cl-advanced > summary::before {
  content: "▸ ";
  color: var(--slate);
}
.cl-advanced[open] > summary::before { content: "▾ "; }
.cl-more-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}
.cl-load-btn { margin-bottom: 14px; }

.cl-more-actions {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
}
.cl-more-btn {
  flex: 1 1 0;
  padding: 9px 14px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cl-more-btn:hover { background: var(--gray-100); border-color: var(--gray-300); }

.cl-status {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 10px;
  min-height: 18px;
}
.cl-status.cl-error { color: var(--danger); }

.cl-table-wrap {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.cl-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11.5px;
}
/* Column widths so all four columns fit the panel and wrap (no clipping). */
.cl-table th:nth-child(1), .cl-table td:nth-child(1) { width: 33%; }
.cl-table th:nth-child(2), .cl-table td:nth-child(2) { width: 20%; }
.cl-table th:nth-child(3), .cl-table td:nth-child(3) { width: 23%; }
.cl-table th:nth-child(4), .cl-table td:nth-child(4) { width: 24%; }
/* Transaction + Status columns: hidden by default (narrow pane keeps the
   four-column layout); promoted to real columns on wide screens (see the
   min-width: 1180px block). */
.cl-col-extra { display: none; }
/* IMO is a 7-digit number — keep it on one line. */
.cl-table td:nth-child(2) { white-space: nowrap; }
.cl-table thead th {
  text-align: left;
  padding: 9px 5px;
  background: #fff;
  color: var(--slate);
  font-weight: 500;
  border-bottom: 1px solid var(--gray-200);
}
.cl-sortable { cursor: pointer; user-select: none; }
.cl-sort-arrow { font-size: 10px; color: var(--slate); }

.cl-row { cursor: pointer; border-bottom: 1px solid var(--gray-200); transition: background 0.15s; }
.cl-row:last-child { border-bottom: 0; }
.cl-row:hover { background: var(--surface); }
.cl-row.cl-row-open { background: var(--info-bg); }
.cl-row td {
  padding: 9px 5px;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

/* Closing-date cell — warning (yellow) normally, danger (red) when overdue.
   Rendered as a prototype-style pill using the semantic badge tokens. */
.cl-date {
  text-align: center;
  white-space: nowrap;
  background: var(--warning-bg);
  color: var(--warning);
  font-weight: 600;
}
.cl-date.cl-overdue { background: var(--danger-bg); color: var(--danger); }

.cl-detail-row td { padding: 0 10px 10px; background: var(--surface); }
.cl-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 16px;
  padding: 10px 0 4px;
}
.cl-detail-item { display: flex; flex-direction: column; }
.cl-detail-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cl-detail-val { font-size: 13px; color: var(--navy); word-break: break-word; }
.cl-detail-empty { font-size: 13px; color: var(--slate); font-style: italic; }

/* ---------- CRM Search (HubSpot) ---------- */
.crm-auto-label {
  font-size: 12px;
  color: var(--navy);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-lg);
  padding: 6px 10px;
  margin-bottom: 10px;
}

.crm-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.crm-toggle-btn {
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.crm-toggle-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.crm-retry-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  background: none;
  border: 1px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: 2px 8px;
  cursor: pointer;
}

.crm-detail-card {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}
.crm-detail-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  word-break: break-word;
  margin-bottom: 12px;
}

.crm-rows { display: flex; flex-direction: column; gap: 8px; }
.crm-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--surface);
  padding-bottom: 6px;
}
.crm-row:last-child { border-bottom: none; padding-bottom: 0; }
.crm-row-key { color: var(--slate); flex: 0 0 auto; }
.crm-row-val { color: var(--navy); text-align: right; word-break: break-word; }
.crm-row-val a { color: var(--navy); }

.crm-desc {
  margin-top: 12px;
  font-size: 13px;
  color: var(--navy);
}
.crm-desc .crm-row-key { display: block; margin-bottom: 4px; }
.crm-desc summary {
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 4px;
}

.crm-section { border-top: 1px solid var(--gray-200); }
.crm-section:first-child { margin-top: 12px; }
.crm-section-count { color: var(--slate-soft); font-weight: 600; margin-left: 2px; }
.crm-collapse-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.crm-collapse-caret { transition: transform 0.15s; }
.crm-collapse-toggle.open .crm-collapse-caret { transform: rotate(90deg); }
.crm-collapse-body { margin-top: 8px; }

.crm-inline-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}

.crm-clickable { cursor: pointer; }
.crm-subhead {
  margin: 16px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.crm-meeting-body {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy);
  word-break: break-word;
}
.crm-meeting-body h1,
.crm-meeting-body h2,
.crm-meeting-body h3,
.crm-meeting-body h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin: 12px 0 4px;
}
.crm-meeting-body p { margin: 4px 0; }
.crm-meeting-body ul,
.crm-meeting-body ol { margin: 4px 0 4px 18px; padding: 0; }
.crm-meeting-body li { margin-bottom: 3px; }
.crm-meeting-body a { color: var(--navy); word-break: break-all; }

.crm-assignee { margin-top: 2px; }

/* ---------- Deals Pipeline ---------- */
.dp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.dp-field select,
#dpFiltersBody select {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--navy);
}
#dpFiltersBody input[type="text"] { width: 100%; margin-bottom: 10px; }
#dpFiltersBody .secondary-btn { margin-top: 2px; }

/* ---------- Q Check saved results (list + edit) ---------- */
.qc-saved { margin-top: 22px; border-top: 1px solid var(--gray-200); padding-top: 14px; }
.qc-saved-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 8px;
}
.qc-filters-toggle { padding: 4px 0; }
.qc-filters .dp-field input[type="text"],
.qc-filters .dp-field textarea,
#qcEditView .dp-field input[type="text"],
#qcEditView .dp-field textarea,
#qcEditView .dp-field select,
.qc-filters .dp-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--navy);
}
#qcEditView .dp-field textarea { resize: vertical; }
.qc-saved-status { font-size: 12px; color: var(--slate-soft); margin: 4px 0 6px; }
.qc-saved-status.error { color: var(--danger); }
.qc-saved-list { display: block; }

/* Breathing room between the record header and the first field in the editor */
#qcEditView .result-header { margin-bottom: 18px; }

.qc-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; text-align: left; }
.qc-item-date { font-size: 12px; color: var(--slate-soft); font-weight: 600; }
.qc-item-name { font-weight: 700; color: var(--navy); }
.qc-item-imo { font-size: 12px; color: var(--slate-soft); }
.qc-item-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; color: var(--navy); }
.qc-item-label {
  min-width: 92px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--slate-soft);
}
.qc-item-notes { margin: 6px 0 10px; }
.qc-item-notes .qc-item-label { display: block; margin-bottom: 3px; }
.qc-item-notes-text { font-size: 13px; color: var(--navy); white-space: pre-wrap; word-break: break-word; }
.qc-item-actions { display: flex; gap: 8px; padding-bottom: 10px; }
.qc-item-actions .secondary-btn { flex: 1; }

.qc-check-row {
  display: flex;
  flex-direction: row;   /* override global `label { flex-direction: column }` */
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 10px;
  cursor: pointer;
}
.qc-check-row input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.qc-check-row span { flex: 1; }
.qc-check-row input[type="checkbox"] { width: 16px; height: 16px; }
.qc-edit-actions { display: flex; gap: 8px; margin-top: 6px; }
.qc-edit-actions .secondary-btn { flex: 1; }
.qc-edit-actions .run-btn { flex: 2; margin-top: 0; }

/* Checkbox multi-select (owner filters) */
.ms { position: relative; font-weight: 400; }
.ms-toggle {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}
.ms-toggle::after { content: " ▾"; color: var(--slate); }
.ms-panel {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15);
  padding: 4px;
}
.ms-opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--navy);
  cursor: pointer;
  border-radius: 4px;
}
.ms-opt:hover { background: var(--surface); }
.ms-opt input { width: auto; margin: 0; }
.dp-status-toggle { margin-bottom: 10px; }
.dp-summary {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  margin: 10px 0;
}
/* Tasks Management — due-date accents (mirrors the Closing List date colors). */
.tm-group-overdue { color: var(--orange); }
.tm-group-today { color: var(--warning); }
.tm-due { font-weight: 600; }
.tm-due-overdue { color: var(--orange); }
.tm-due-today { color: var(--warning); }

/* Team Holidays */
.hol-quick {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.hol-chip {
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.hol-chip.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.hol-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--navy);
  cursor: pointer;
  margin: 4px 0 12px;
}
.hol-check input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}
.hol-dates { font-weight: 600; }

/* e-Phone on-call panel (always shown at the top of Team Holidays) */
.hol-ephone {
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.hol-ephone-head {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.hol-ephone-list { display: flex; flex-direction: column; gap: 6px; }
.hol-ephone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--info-border);
  border-radius: var(--radius-lg);
  padding: 7px 10px;
}
.hol-ephone-current {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.hol-ephone-when { display: flex; flex-direction: column; }
.hol-ephone-wk { font-size: 12px; font-weight: 700; color: var(--slate); }
.hol-ephone-dates { font-size: 12px; color: var(--slate); }
.hol-ephone-who {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
}
.hol-ephone-none { font-weight: 500; color: var(--slate-soft); font-style: italic; }
.hol-ephone-loading { font-size: 13px; color: var(--slate); }

/* Holidays action buttons */
.hol-load-btn {
  margin-top: 2px;
  font-size: 15px;
  padding: 12px;
}
#holFiltersBody .secondary-btn.full { margin-top: 2px; }

.crm-item-desc {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--slate);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}

.crm-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 0 4px;
  background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0));
}
.crm-action-btn {
  flex: 1;
  min-width: 120px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.crm-action-btn.secondary {
  background: #fff;
  color: var(--navy);
}
.crm-action-btn.success {
  background: var(--success);
  border-color: var(--success);
}
.crm-action-btn.danger {
  background: var(--danger);
  border-color: var(--danger);
}
.crm-action-btn:hover { opacity: 0.92; }

/* CRM Entry (create / update) */
.ce-type-bar { margin-bottom: 12px; flex-wrap: wrap; }
.ce-field input[type="text"],
.ce-field input[type="email"],
.ce-field input[type="tel"],
.ce-field input[type="number"],
.ce-field input[type="date"],
.ce-field input[type="datetime-local"],
.ce-field textarea,
.ce-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  background: #fff;
  color: var(--navy);
}
.ce-field textarea { resize: vertical; }

/* Rich-text body editor */
.ce-rich {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
.ce-rich-area img { max-width: 100%; height: auto; border-radius: 4px; }
.ce-mention {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  background: var(--info-bg);
  border-radius: 4px;
  padding: 0 3px;
}
.ce-mention-dd {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}
.ce-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--gray-200);
}
.ce-rich-btn {
  min-width: 30px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  cursor: pointer;
}
.ce-rich-btn:hover { background: var(--gray-200); }
.ce-rich-btn-bold { font-weight: 800; }
.ce-rich-btn-italic { font-style: italic; }
.ce-rich-btn-underline { text-decoration: underline; }
.ce-rich-area {
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--navy);
  min-height: 90px;
  outline: none;
  overflow-wrap: anywhere;
}
.ce-rich-area:focus { box-shadow: inset 0 0 0 2px rgba(26, 46, 74, 0.15); }
.ce-rich-area p { margin: 0 0 8px; }
.ce-rich-area ul, .ce-rich-area ol { margin: 0 0 8px; padding-left: 20px; }

.ce-assoc { margin-top: 6px; }
.ce-assoc-field { margin-bottom: 12px; }
.ce-assoc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 5px;
}
.ce-assoc-field > input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--navy);
}
.ce-assoc-dd { max-height: 220px; overflow-y: auto; margin-top: 4px; }

/* Multi-select association chips */
.ce-assoc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ce-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  font-size: 13px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 14px;
  color: var(--navy);
}
.ce-chip-x {
  border: none;
  background: transparent;
  color: var(--navy);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

/* Deal line-item add row (Vessel Name / IMO Number + Add) */
.ce-li-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ce-li-input {
  flex: 1 1 120px;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--navy);
}

/* Multi-select enumeration (checkbox list) */
.ce-multi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  background: #fff;
}
.ce-multi-opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--navy);
}
.ce-multi-opt input { width: auto; }

/* Phone field: country-prefix select + number input side by side */
.ce-phone-row {
  display: flex;
  gap: 8px;
}
.ce-phone-row select { flex: 0 0 128px; min-width: 0; }
.ce-phone-row input { flex: 1; min-width: 0; }

/* Linked phone/email lines on contact rows and the contact detail card */
.crm-contact-line { font-size: 12px; color: var(--slate); margin-top: 2px; }
.crm-contact-line a { color: var(--navy); font-weight: 600; text-decoration: none; }
.crm-contact-line a:hover { text-decoration: underline; }

/* Inline checkbox field (e.g. reminder "same as due date") */
.ce-check-field {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--navy);
  cursor: pointer;
}
.ce-check-field input { width: auto; margin: 0; }
.ce-assoc-chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 14px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-lg);
}
.ce-assoc-clear {
  border: none;
  background: transparent;
  color: var(--navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.ce-edit-link { margin-left: 12px; }
.ce-denied {
  max-height: none;
  padding: 14px;
  font-size: 14px;
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-lg);
}

.ia-copy-btn {
  margin: 8px 0 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--info);
  background: #fff;
  border: 1px solid var(--info);
  border-radius: 5px;
  cursor: pointer;
}
.ia-copy-btn:hover { background: var(--info-bg); }

/* ============================================================
   Prototype card model — top-level panels read as white cards
   on the surface-colored page (the global token sweep had mapped
   their old light-gray tints to --surface, which made them blend
   into the page). Nested insets keep --surface for contrast.
   ============================================================ */
.account-box,
.factor-card,
.ism-result-card,
.rpt-states-box,
.cs-fleet-section,
.share-box,
.attach-box {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

/* Informational callout — light info tint, like the Prototype's Info badge. */
.info-note {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-lg);
  color: var(--navy);
}

/* ── Card Scan (business-card OCR) ─────────────────────────────────────────── */
.cs-slots {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.cs-slot { flex: 1; min-width: 0; }
.cs-slot-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.cs-optional { font-weight: 400; color: var(--slate); }
.cs-preview {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cs-preview.cs-empty {
  border-style: dashed;
  background: var(--neutral-bg);
}
.cs-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cs-preview-hint { color: var(--slate); font-size: 12px; }
.cs-slot-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.cs-slot-actions .secondary-btn { padding: 8px; font-size: 13px; }
.cs-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
}
#csResults .crm-detail-card { margin-top: 12px; }
.cs-raw { margin-top: 12px; }
.cs-raw-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  margin: 8px 0 0;
}
.cs-hint {
  font-size: 12px;
  color: var(--slate);
  margin: 0 0 12px;
}
/* Editable mapped-field rows */
.cs-fields { display: flex; flex-direction: column; gap: 10px; }
.cs-field-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.cs-field-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
}
.cs-field-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  box-sizing: border-box;
}
textarea.cs-field-input { resize: vertical; }
.cs-field-remove {
  flex: 0 0 auto;
  width: 32px;
  height: 36px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--neutral-bg);
  color: var(--slate);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.cs-field-remove:hover { color: var(--danger); border-color: var(--danger); }
.cs-addfield { margin-top: 12px; }
.cs-addfield-sel input {
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed var(--gray-200);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  box-sizing: border-box;
}
/* Possible-matches section */
.cs-matches-card { margin-top: 12px; }
.cs-matches-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cs-matches-head .cs-section-title { margin: 0; }
.cs-refresh { padding: 6px 12px; font-size: 12px; }
.cs-match-item { cursor: default; }
.cs-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cs-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.cs-badge-email { background: var(--success-bg); color: var(--success); }
.cs-badge-name { background: var(--warning-bg); color: var(--warning); }

/* ============================================================
   Desktop / laptop layout (Phase 1)

   The base stylesheet above targets a narrow pane (Outlook task
   pane, Chrome extension side panel ~320–500px) and scales DOWN
   for phones. This block scales UP for laptop/desktop browsers.

   It is purely additive — every rule sits behind min-width media
   queries, so the Outlook pane and the extension side panel (which
   are always narrow) never trigger any of it and keep rendering
   exactly as before. No JS, env, or extension changes are needed:
   width alone distinguishes the contexts.

   Two tiers:
     >= 760px  "comfortable"  centered content + multi-column layouts
     >= 1180px "wide"         extra grid columns for dense data tools

   Content width is per-view (via --view-max), not global: reading
   and form views stay a comfortable ~780px, while data-dense tools
   (tables, pipelines, task lists, search results) widen to ~1200px.
   ============================================================ */

@media (min-width: 760px) {

  /* ---- App framing: full-bleed header/background, centered body ---- */
  .header {
    padding: 12px 28px;
  }
  .header-title { font-size: 20px; }

  /* Center each view's scroll column and cap its width. --view-max is
     overridden per-view below for the wide data tools. */
  .view-body {
    --view-max: 780px;
    width: 100%;
    max-width: var(--view-max);
    margin-left: auto;
    margin-right: auto;
    padding: 24px 28px 32px;
  }

  /* Data-dense tools get more room. */
  #closingListView .view-body,
  #invoiceAddressView .view-body,
  #holidaysView .view-body,
  #dealsPipelineView .view-body,
  #tasksManagementView .view-body,
  #crmSearchView .view-body,
  #companySearchView .view-body,
  #zammadReportsView .view-body,
  #kbView .view-body,
  #cardScanView .view-body {
    --view-max: 1200px;
  }

  /* The Q-Check mode toggle is a sibling of the views; align it to the
     form width instead of stretching across the window. */
  .toggle-wrap {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Primary buttons should not stretch the full content width on desktop;
     cap and center them. Login keeps its full-width button (it lives in a
     narrow 360px card). */
  .run-btn {
    display: block;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .login-box .run-btn { max-width: none; }

  /* ---- Login: center the card in the viewport ---- */
  #loginView .view-body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-box { margin-top: 0; margin-bottom: 0; }

  /* ---- Home menu + category tiles ---- */
  .main-body { justify-content: flex-start; }

  .menu-grid {
    max-width: 780px;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 16px;
  }
  .menu-tile { min-height: 128px; }

  .favorites-section { max-width: 780px; }

  /* Stacked feature-tile lists (Favorites + every category view) become a
     responsive card grid. */
  .feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
  }

  /* ---- Q Check form: two-column field layout ---- */
  #formView .field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
  }
  /* Full-width rows inside the vessel field group. */
  #formView .ism-collapse-header,
  #formView .ism-collapse-body { grid-column: 1 / -1; }
  #formView .ism-collapse-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
  }

  /* Q Check saved-list filters spread horizontally. */
  .qc-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4px 16px;
    align-items: end;
  }

  /* ---- Search-result lists become card grids ---- */
  /* Used by Vessel Search + CRM Search result lists. */
  .zvl-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
  }
  .zvl-result-item { margin-bottom: 0; }

  /* ---- Detail cards: key/value rows two-per-row, sized action bars ---- */
  .crm-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 28px;
  }
  /* Keep the sticky action row from stretching across a wide view, and
     center it. */
  .crm-actions {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- Collapsible filter panels (Deals / Tasks / Holidays) ---- */
  #dpFiltersBody,
  #tmFiltersBody,
  #holFiltersBody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 6px 16px;
    align-items: end;
  }
  /* Free-text search spans the whole band; Clear sits on its own row. */
  #dpFiltersBody #dpSearch,
  #tmFiltersBody #tmSearch { grid-column: 1 / -1; }
  #dpClear,
  #tmClear,
  #holClear {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
    max-width: 220px;
  }
  #holFiltersBody .hol-check { align-self: center; }

  /* ---- Closing List / Invoice tables: denser and more legible ---- */
  .cl-table { font-size: 13px; }
  .cl-table thead th { padding: 11px 10px; }
  .cl-table td { padding: 11px 10px; }
  /* More columns for the inline expand detail on desktop. */
  .cl-detail {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  /* Segmented toggles and lone selects shouldn't stretch across a wide
     data view before results load. */
  .crm-toggle,
  .dp-status-toggle,
  .tm-status-toggle { max-width: 480px; }
  #dpList > .dp-field { max-width: 480px; }
  #tmList .dp-field > select { max-width: 340px; }

  /* ---- Card Scan: larger, side-by-side capture slots ---- */
  .cs-slots { max-width: 720px; }

  /* ---- Loading / error / confirm: centered, not left-hugging ---- */
  #loadingView .view-body,
  #errorView .view-body,
  #confirmView .view-body { --view-max: 560px; }
}

@media (min-width: 1180px) {
  /* Extra breathing room for the widest data tools. */
  #closingListView .view-body,
  #invoiceAddressView .view-body,
  #holidaysView .view-body,
  #dealsPipelineView .view-body,
  #tasksManagementView .view-body,
  #crmSearchView .view-body,
  #companySearchView .view-body { padding-left: 32px; padding-right: 32px; }

  /* Closing List inline detail gets more columns on very wide screens. */
  .cl-detail { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  /* Promote Transaction + Status out of the expand row into real columns
     when there's room. (They stay in the expand detail too.) Re-balance the
     six-column widths. */
  .cl-col-extra { display: table-cell; }
  .cl-table th:nth-child(1), .cl-table td:nth-child(1) { width: 23%; }
  .cl-table th:nth-child(2), .cl-table td:nth-child(2) { width: 12%; }
  .cl-table th:nth-child(3), .cl-table td:nth-child(3) { width: 16%; }
  .cl-table th:nth-child(4), .cl-table td:nth-child(4) { width: 18%; }
  .cl-table th:nth-child(5), .cl-table td:nth-child(5) { width: 16%; }
  .cl-table th:nth-child(6), .cl-table td:nth-child(6) { width: 15%; }
}