/* 05-components.css — Print modal, clear modal, client blocks */
.print-modal{width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:var(--shadow)}.print-modal-title{font-size:.95rem;font-weight:750;color:var(--ink);margin-bottom:4px}.print-modal-sub{font-size:.82rem;color:var(--muted);margin-bottom:16px}.print-option-btn{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;margin-bottom:8px;text-align:left;transition:background .12s;color:var(--ink)}.print-option-btn:hover{background:var(--bg)}.print-option-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}.print-option-title{font-size:.84rem;font-weight:650;color:var(--ink)}.print-option-sub{font-size:.76rem;color:var(--muted);margin-top:2px}.print-preview-area{margin-top:14px;border:1px solid var(--line);border-radius:8px;overflow:hidden}.print-preview-bar{background:var(--bg);padding:7px 12px;font-size:.72rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.print-preview-page{background:#fff;margin:10px;border:0.5px solid #d9d3c6;border-radius:4px;padding:12px;min-height:100px}.print-preview-line{height:5px;background:#e8e4dc;border-radius:3px;margin-bottom:5px}.print-preview-line.title{width:40%;background:#c8d3cc;margin-bottom:8px}.print-preview-line.med{width:75%}.print-preview-line.short{width:50%}.print-cancel-btn{width:100%;margin-top:10px;padding:8px;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:pointer;font-size:.82rem;color:var(--muted)}.print-cancel-btn:hover{background:var(--bg)}.client-block{margin-bottom:18px;border:1px solid var(--line);border-radius:8px;overflow:hidden}.client-block-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--line)}.client-block-head .client-block-meta{margin-left:auto}.client-header-row td{padding:0!important;border-bottom:0!important;border-top:2px solid var(--line)}.client-header-row:first-child td{border-top:0}.client-block table{border-collapse:collapse}.client-block tbody tr:last-child td{border-bottom:none}.client-block-name{font-size:.92rem;font-weight:800;color:var(--ink)}.client-block-meta{font-size:.72rem;color:var(--ink);font-weight:700;opacity:.45}
.clear-modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:rgba(28,37,32,.22)}.clear-modal{width:min(520px,100%);background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:16px;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;overflow:hidden}.clear-modal h2{margin:0 0 8px;flex:0 0 auto}.clear-modal p{margin:0 0 14px;color:var(--muted);font-size:.88rem;line-height:1.4;flex:0 0 auto}.clear-modal-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;padding-top:2px}.clear-modal-actions button{flex:1 1 140px;min-width:120px;max-width:100%;min-height:42px}.clear-modal-actions .danger{border-color:#e1b8b8;background:#fff8f8}@media(max-width:560px){.clear-modal-actions button{flex:1 1 45%}}

/* ── Accounts Receivable panel ── */
.ar-kpi-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.ar-kpi-card{flex:1 1 130px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.ar-kpi-card--warn{border-color:#f5c6a0}
.ar-kpi-card--good{border-color:#a8d5b8}
.ar-kpi-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.ar-kpi-value{font-size:.92rem;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}

.ar-invoice-list{display:flex;flex-direction:column;gap:12px}
.ar-invoice-row{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ar-invoice-row[data-financial-status="paid"]{opacity:.75}
.ar-invoice-row[data-financial-status="cancelled"]{opacity:.55}

.ar-invoice-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.ar-invoice-ref{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.ar-ref-code{font-family:monospace;font-size:.82rem;font-weight:750;color:var(--ink)}
.ar-ref-client{font-size:.82rem;color:var(--ink)}
.ar-ref-date{font-size:.78rem;color:var(--muted)}
.ar-ref-due{font-size:.75rem;color:var(--gold);font-weight:650}
.ar-invoice-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.ar-add-btn{min-height:30px;padding:3px 10px;font-size:.78rem;background:var(--green);border-color:var(--green);color:#fff;border-radius:6px;cursor:pointer;font-weight:650}
.ar-add-btn:hover{background:var(--green-dark);border-color:var(--green-dark)}
.ar-cancel-btn{min-height:30px;padding:3px 10px;font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;cursor:pointer;background:transparent}
.ar-cancel-btn:hover{background:var(--bg)}

.ar-invoice-body{display:flex;flex-wrap:wrap;gap:16px;padding:12px 14px}
.ar-amounts{display:flex;flex-direction:column;gap:3px;min-width:180px}
.ar-amount-row{display:flex;justify-content:space-between;gap:16px;font-size:.82rem}
.ar-amount-row--balance{border-top:1px solid var(--line);margin-top:3px;padding-top:3px}
.ar-amount-label{color:var(--muted)}
.ar-amount-val{font-variant-numeric:tabular-nums;text-align:right}
.ar-balance-open{color:var(--red)}
.ar-balance-zero{color:var(--green)}
.ar-cur-divider{border:none;border-top:1px dashed var(--line);margin:6px 0}

.ar-payment-history{flex:1;min-width:200px}
.ar-history-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.ar-history-row{display:flex;flex-wrap:wrap;gap:8px;font-size:.80rem;padding:3px 0;border-bottom:1px solid var(--line)}
.ar-history-row:last-child{border-bottom:none}
.ar-history-date{color:var(--muted);white-space:nowrap}
.ar-history-cur{font-weight:650;color:var(--ink)}
.ar-history-amt{font-variant-numeric:tabular-nums;font-weight:650;color:var(--green)}
.ar-history-note{color:var(--muted);font-style:italic;flex:1}

.ar-payment-panel{border-top:1px solid var(--line);background:var(--bg);padding:12px 14px}
.ar-payment-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ar-payment-form label{display:flex;flex-direction:column;font-size:.78rem;font-weight:650;color:var(--muted);gap:3px}
.ar-payment-form label input,.ar-payment-form label select{min-height:32px;font-size:.84rem;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
.ar-notes-label{flex:1;min-width:200px}
.ar-form-actions{display:flex;gap:8px;align-items:center}
.ar-form-actions .primary{min-height:32px;padding:4px 14px;font-size:.82rem}

/* ── Management Reports ── */
.mgmt-report-section{margin-bottom:24px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mgmt-report-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--line);flex-wrap:wrap;gap:6px}
.mgmt-report-title{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.mgmt-report-divider{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-top:2px solid var(--line);padding-top:18px;margin:24px 0 12px}
.mgmt-report-note{font-size:.82rem;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px 14px;margin-bottom:16px}
.mgmt-report-section table{width:100%;border-collapse:collapse;font-size:.82rem}
.mgmt-report-section thead th{background:var(--bg);padding:7px 10px;text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.mgmt-report-section tbody td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.mgmt-report-section tbody tr:last-child td{border-bottom:none}
.mgmt-report-section tfoot td{padding:7px 10px;background:var(--bg);border-top:2px solid var(--line);font-size:.84rem}
.profit-positive{color:var(--green-dark)}
.profit-negative{color:var(--red)}

/* ── Executive Dashboard ── */
.dash-section { margin-bottom: 28px; }
.dash-section-title {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 12px;
}

/* KPI grid */
.dash-kpi-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-kpi {
  flex: 1 1 140px; min-width: 120px; max-width: 220px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px; transition: box-shadow .15s;
}
.dash-kpi[role="button"]:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); border-color: var(--green); }
.dash-kpi--good { border-left: 3px solid var(--green); }
.dash-kpi--warn { border-left: 3px solid #f5a623; }
.dash-kpi--bad  { border-left: 3px solid var(--red);  }
.dash-kpi-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.dash-kpi-value { font-size: 1.25rem; font-weight: 800; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-kpi-sub   { font-size: .7rem; color: var(--muted); margin-top: 4px; }

/* Quick actions */
.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-action-btn {
  min-height: 36px; padding: 6px 16px; font-size: .84rem; font-weight: 650;
  background: var(--green); color: #fff; border: none; border-radius: 6px;
  cursor: pointer; transition: background .15s;
}
.dash-action-btn:hover { background: var(--green-dark); }

/* Activity cards */
.dash-activity-grid { display: flex; flex-direction: column; gap: 16px; }
.dash-activity-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
}
.dash-activity-card-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg);
}

/* Dashboard tables */
.dash-table { width: 100%; border-collapse: collapse; font-size: .81rem; }
.dash-table thead th {
  background: var(--bg); padding: 6px 10px; text-align: left;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.dash-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--line-light, var(--line)); vertical-align: top; }
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table .empty { color: var(--muted); font-style: italic; text-align: center; padding: 14px; }

/* ── Global Search ── */
.gs-wrap {
  position: relative;
  flex: 0 1 360px;
  min-width: 180px;
}
/* Utility row: date on the left, global search + Missing info grouped on the right */
.utility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.utility-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  margin-left: auto;
}
.utility-tools .gs-wrap {
  flex: 1 1 280px;
  min-width: 160px;
}
.utility-tools #missingInfoBtn {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Status stack (left): current date with Last saved directly below it */
.utility-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.last-saved-line {
  font-size: .76rem;
  color: var(--muted);
  white-space: nowrap;
}
.last-saved-line:empty { display: none; }
/* Cue when no user is selected and an important action is attempted */
.user-selector-needed {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 2px rgba(184,59,59,.25) !important;
}
@media (max-width: 560px) {
  .utility-tools { flex-wrap: wrap; width: 100%; }
  .utility-tools .gs-wrap { flex: 1 1 100%; }
  .utility-tools #missingInfoBtn { flex: 1 1 100%; }
}
.gs-input-row {
  display: flex;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 8px;
  gap: 6px;
  transition: border-color .15s, box-shadow .15s;
}
.gs-input-row:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(22,122,74,.15);
}
.gs-icon { font-size: .85rem; color: var(--muted); flex-shrink: 0; }
#globalSearchInput {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .82rem;
  color: var(--ink);
  outline: none;
  min-width: 0;
  padding: 3px 0;
}
#globalSearchInput:focus {
  outline: 2px solid var(--accent, #185fa5);
  outline-offset: 1px;
  border-radius: 3px;
}
#globalSearchInput::placeholder { color: var(--muted); }
/* Hide browser's default search clear button */
#globalSearchInput::-webkit-search-cancel-button { display: none; }
.gs-clear {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}
.gs-clear:hover { background: var(--bg); color: var(--ink); }

/* Dropdown */
.gs-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 9000;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gs-group-label {
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  padding: 8px 12px 4px;
  border-top: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
}
.gs-group-label:first-child { border-top: none; }
.gs-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .1s;
  outline: none;
}
.gs-result:hover, .gs-result:focus { background: var(--bg); outline: 2px solid var(--accent, #185fa5); outline-offset: -2px; }
.gs-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 70px;
  text-align: center;
}
.gs-result-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gs-result-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-result-sub {
  font-size: .73rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-result-arrow { color: var(--muted); font-size: .8rem; flex-shrink: 0; }
.gs-empty { padding: 14px 12px; font-size: .82rem; color: var(--muted); font-style: italic; }

/* ── Container Detail rows (mirrors .bl-row pattern) ── */
.container-detail-row { margin-bottom: 6px; }

/* ── Shipment workspace permanent header (Sub-phase A) ── */
#shipmentWorkspaceHeader {
  display: none;          /* hidden when form is empty (Add mode, nothing typed) */
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  gap: 0;
}
#shipmentWorkspaceHeader.swh-visible {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.swh-field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.swh-label {
  font-size: .62rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
.swh-value {
  font-size: .84rem;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swh-value:empty::before {
  content: "—";
  color: var(--muted);
  font-weight: 400;
}
.swh-status-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Tariff costCode audit panel (Phase 15B) ── */
.tariff-audit {
  border-radius: 7px;
  padding: 10px 14px;
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tariff-audit--ok {
  background: #e7f3ec;
  border: 1px solid #a8d5b8;
  color: var(--green-dark);
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.tariff-audit--warn {
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #5d4037;
}
.tariff-audit-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tariff-audit-icon { font-size: 1rem; flex-shrink: 0; }
.tariff-audit-header span { flex: 1; min-width: 0; }
.tariff-audit-toggle {
  min-height: 28px;
  padding: 3px 10px;
  font-size: .76rem;
  font-weight: 650;
  border: 1px solid #ffe082;
  border-radius: 5px;
  background: #fff8e1;
  color: #5d4037;
  cursor: pointer;
  flex-shrink: 0;
}
.tariff-audit-toggle:hover { background: #fff3cd; }
.tariff-audit-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  margin-top: 4px;
}
.tariff-audit-table th {
  text-align: left;
  padding: 5px 8px;
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #5d4037;
  border-bottom: 1px solid #ffe082;
}
.tariff-audit-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #fff3cd;
}
.tariff-audit-table tr:last-child td { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════════════════
   SHIPMENT DOSSIER — Phase 17
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dossier layout: form | dossier | table ──────────────────────────────── */
.shipments-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  gap: 16px;
  align-items: start;
}
/* Fix v1.0.1: give the shipments table more room and reduce horizontal scrolling.
   The Add Shipment panel is narrower and the table cells use tighter padding so
   more columns fit on a normal laptop. No columns are removed; #tableWrap still
   scrolls internally if the screen is very narrow. */
#shipmentTablePanel #tableWrap table th,
#shipmentTablePanel #tableWrap table td {
  padding: 9px 10px;
}
.shipments-layout.dossier-open {
  grid-template-columns: minmax(330px, 430px) minmax(380px, 680px);
}
#shipmentTablePanel { min-width: 0; }
#shipmentDossierPanel {
  display: none;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
#shipmentDossierPanel.dossier-visible { display: flex; }

/* ── Expanded permanent header (Phase 17) ───────────────────────────────── */
#swhExpanded {
  display: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
#swhExpanded.swh-exp-visible { display: block; }

.swh-exp-top {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line);
}
.swh-exp-ref {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1;
  margin-bottom: 4px;
}
.swh-exp-client {
  font-size: .88rem;
  font-weight: 650;
  color: var(--ink);
}
.swh-exp-contract {
  font-size: .82rem;
  color: var(--muted);
  margin-top: 1px;
}
.swh-exp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.swh-exp-meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.swh-exp-meta-label {
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
.swh-exp-meta-value {
  font-size: .82rem;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.swh-exp-meta-value.empty-val { color: var(--muted); font-weight: 400; }
.swh-exp-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  flex-wrap: wrap;
}
.swh-exp-stage {
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink);
}
.swh-exp-stage-label {
  font-size: .68rem;
  color: var(--muted);
  margin-right: 5px;
  font-weight: 500;
}
.swh-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}
.swh-progress-bar {
  height: 5px;
  flex: 1;
  max-width: 120px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.swh-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: inherit;
  transition: width .4s ease;
}
.swh-progress-label {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
}
.swh-type-badge {
  font-size: .68rem;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.swh-type-badge.container { background: #e8f0fe; color: #2554c7; border-color: #c7d7fa; }
.swh-type-badge.breakbulk { background: #fff3e0; color: #b45309; border-color: #fcd9a0; }

/* ── Dossier section card ─────────────────────────────────────────────────── */
.dossier-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dossier-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.dossier-card-head:hover { background: var(--bg); }
.dossier-card-title {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dossier-card-title-icon {
  font-size: .9rem;
  opacity: .7;
}
.dossier-card-toggle {
  font-size: .88rem;
  color: var(--muted);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s;
}
.dossier-card-body {
  border-top: 1px solid var(--line);
  padding: 16px;
}
.dossier-card-body[hidden] { display: none; }

/* ── Operations section ──────────────────────────────────────────────────── */
.ops-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.ops-cell {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.ops-cell-label {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 4px;
}
.ops-cell-value {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.ops-cell-value.muted { color: var(--muted); font-weight: 400; font-style: italic; }
.ops-cell.full { grid-column: 1 / -1; }
.ops-alert {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 7px;
  padding: 8px 12px;
  font-size: .82rem;
  color: #7c5a00;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.ops-alert-icon { flex-shrink: 0; }

/* ── Related documents section ───────────────────────────────────────────── */
.doc-group { margin-bottom: 14px; }
.doc-group:last-child { margin-bottom: 0; }
.doc-group-label {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 6px;
}
.doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
  min-height: 32px;
}
.doc-item:last-child { border-bottom: 0; }
.doc-status {
  font-size: .8rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.doc-status.doc-ok    { color: var(--green); }
.doc-status.doc-none  { color: var(--muted); }
.doc-status.doc-wip   { color: var(--gold); }
.doc-name {
  font-weight: 600;
  color: var(--ink);
  flex: 0 0 auto;
  min-width: 90px;
}
.doc-ref {
  color: var(--muted);
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* ── Financial snapshot section ──────────────────────────────────────────── */
.fin-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: .84rem;
  gap: 8px;
}
.fin-row:last-child { border-bottom: 0; }
.fin-label { color: var(--muted); flex: 1; min-width: 0; }
.fin-value {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fin-value.positive { color: var(--green); }
.fin-value.negative { color: var(--red); }
.fin-value.muted    { color: var(--muted); font-weight: 400; font-style: italic; }
.fin-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 0;
}
.fin-invoice-block {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: .82rem;
}
.fin-invoice-block.warn {
  background: #fff8e1;
  border-color: #ffe082;
  color: #7c5a00;
}
.fin-invoice-block.ok {
  background: #e7f3ec;
  border-color: #a8d5b8;
  color: var(--green-dark);
}
.fin-invoice-block strong { display: block; font-size: .84rem; margin-bottom: 2px; }

/* ── Closure readiness section ───────────────────────────────────────────── */
.closure-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.closure-bar {
  flex: 1;
  height: 6px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.closure-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width .4s ease;
}
.closure-bar-fill.all-done { background: var(--green); }
.closure-bar-fill.partial  { background: var(--gold); }
.closure-label { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.closure-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
.closure-item:last-child { border-bottom: 0; }
.closure-check {
  font-size: .85rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.closure-check.ok   { color: var(--green); }
.closure-check.fail { color: var(--muted); }
.closure-item-body { flex: 1; min-width: 0; }
.closure-item-name { font-weight: 600; color: var(--ink); }
.closure-item-hint { color: var(--muted); font-size: .76rem; margin-top: 1px; }

/* ── Activity log section ─────────────────────────────────────────────────── */
.activity-empty {
  text-align: center;
  color: var(--muted);
  font-size: .84rem;
  padding: 20px 0 8px;
}

/* ── Responsive: stack on narrow screens ─────────────────────────────────── */
@media (max-width: 980px) {
  .shipments-layout,
  .shipments-layout.dossier-open {
    grid-template-columns: 1fr;
  }
  .swh-exp-meta { gap: 8px 10px; }
  .ops-control { grid-template-columns: 1fr; }
}

/* ── Overdue receivable indicator ── */
.ar-ref-overdue {
  color: var(--red) !important;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   DOCUMENT MANAGEMENT — Phase 19
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Document summary checklist strip ─────────────────────────────────────── */
.doc-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.doc-sum-item {
  font-size: .72rem;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.doc-sum-ok   { background: #e7f3ec; color: var(--green-dark); border-color: #a8d5b8; }
.doc-sum-none { background: var(--bg); color: var(--muted); }

.doc-total-label {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ── Upload form ───────────────────────────────────────────────────────────── */
.doc-upload-form {
  margin-bottom: 14px;
}
.doc-upload-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.doc-upload-select {
  flex: 1 1 160px;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  font-size: .82rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: var(--panel);
  color: var(--ink);
}
.doc-upload-notes {
  flex: 1 1 100px;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  font-size: .82rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 9px;
  background: var(--panel);
  color: var(--ink);
}
.doc-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid var(--green);
  border-radius: 7px;
  background: var(--panel);
  color: var(--green);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-upload-btn:hover { background: #e7f3ec; }
.doc-upload-status {
  margin-top: 6px;
  font-size: .8rem;
  color: var(--muted);
  padding: 4px 0;
}
.doc-upload-status.doc-upload-error { color: var(--red); }

/* ── Document list ─────────────────────────────────────────────────────────── */
.doc-list { display: flex; flex-direction: column; gap: 0; }
.doc-list-empty {
  font-size: .82rem;
  color: var(--muted);
  padding: 12px 0 4px;
  line-height: 1.5;
}
.doc-cat-group { margin-bottom: 12px; }
.doc-cat-group:last-child { margin-bottom: 0; }
.doc-cat-label {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 4px;
}
.doc-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  min-height: 34px;
  font-size: .82rem;
}
.doc-row:last-child { border-bottom: 0; }
.doc-ext-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 22px;
  border-radius: 4px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  flex-shrink: 0;
  background: #e8eaf6;
  color: #3949ab;
}
.doc-ext-pdf { background: #fce8e8; color: #c62828; }
.doc-ext-jpg, .doc-ext-jpeg { background: #fff8e1; color: #f57f17; }
.doc-ext-png { background: #e8f5e9; color: #2e7d32; }
.doc-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
}
.doc-row-meta {
  font-size: .74rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.doc-action-btn {
  min-height: 26px;
  height: 26px;
  padding: 0 7px;
  font-size: .72rem;
  font-weight: 650;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.doc-action-btn:hover { border-color: var(--muted); }
.doc-action-delete { color: var(--red); border-color: #f7c1c1; }
.doc-action-delete:hover { background: #f8e8e8; }

@media (max-width: 600px) {
  .doc-upload-row { flex-direction: column; }
  .doc-upload-select, .doc-upload-notes, .doc-upload-btn { width: 100%; flex: none; }
  .doc-row-meta { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACTIVITY LOG — Phase 20
   ══════════════════════════════════════════════════════════════════════════ */

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.activity-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
.activity-entry:last-child { border-bottom: 0; }
.activity-icon {
  font-size: .9rem;
  line-height: 1.4;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.activity-body { flex: 1; min-width: 0; }
.activity-summary {
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}
.activity-meta {
  color: var(--muted);
  font-size: .74rem;
  margin-top: 2px;
}
.activity-empty {
  color: var(--muted);
  font-size: .82rem;
  padding: 4px 0 8px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   USER ACCOUNTABILITY & OWNERSHIP — Phase 22
   ══════════════════════════════════════════════════════════════════════════ */

/* ── User selector in toolbar ─────────────────────────────────────────────── */
.user-selector-wrap { display: flex; align-items: center; }
.user-selector-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
}
.user-selector-select {
  height: 36px;
  min-height: 36px;
  padding: 0 8px;
  font-size: .82rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  max-width: 160px;
}
.user-selector-empty { font-size: .78rem; color: var(--muted); }

/* ── Owner chip in dossier header ─────────────────────────────────────────── */
.owner-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 9px 2px 7px;
  border-radius: 99px;
  background: #e7f3ec;
  color: var(--green-dark);
  border: 1px solid #a8d5b8;
  white-space: nowrap;
}
.owner-chip--unassigned {
  background: var(--bg);
  color: var(--muted);
  border-color: var(--line);
  font-weight: 500;
}
.owner-transfer-btn {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: .8rem;
  cursor: pointer;
  min-height: 0;
  color: var(--green-dark);
  line-height: 1;
}
.owner-transfer-btn:hover { opacity: .7; }

/* ── Team management in Company Profile ───────────────────────────────────── */
.team-section { margin-bottom: 8px; }
.team-heading {
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 0 0 10px;
}
.team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  margin-bottom: 14px;
}
.team-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.team-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.team-table tr:last-child td { border-bottom: 0; }
.team-inactive td { opacity: .55; }
.team-name { font-weight: 650; }
/* Divider fix: the Actions cell carries the global .row-actions rule
   (display:flex), which removes it from the table layout and makes its
   border-bottom render at a different height than the other cells — leaving a
   gap before the Actions column and an offset line on the right. Restore it to
   a normal table cell so a single, full-width separator spans every column and
   the Director row (empty actions) lines up identically to Operator rows.
   Scoped to desktop widths so the global mobile "stacked card" table layout
   (max-width:700px) is left exactly as it was. */
@media (min-width: 701px){
  .team-table td.row-actions {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
  }
  .team-table td.row-actions button { vertical-align: middle; }
  .team-table td.row-actions button + button { margin-left: 6px; }
}
.team-add-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.team-add-input {
  flex: 1 1 180px;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  font-size: .82rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
}
.team-add-select {
  height: 36px;
  min-height: 36px;
  padding: 0 8px;
  font-size: .82rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  flex-shrink: 0;
}

/* ── Ownership dashboard sections ─────────────────────────────────────────── */
.ownership-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ownership-row {
  display: grid;
  grid-template-columns: 100px 70px 1fr;
  gap: 8px;
  align-items: center;
  font-size: .84rem;
}
.ownership-owner  { font-weight: 650; color: var(--ink); }
.ownership-count  { color: var(--muted); font-size: .78rem; text-align: right; }
.ownership-bar-wrap {
  height: 7px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.ownership-bar {
  height: 100%;
  background: var(--green);
  border-radius: inherit;
  transition: width .4s ease;
  min-width: 4px;
}
.ownership-unassigned {
  font-size: .8rem;
  color: var(--gold);
  padding: 6px 0 2px;
  font-weight: 600;
}
.ownership-stale {
  font-size: .8rem;
  color: var(--muted);
  padding: 4px 0;
}
.my-shipments-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.my-shipment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
  gap: 12px;
}
.my-shipment-row:last-child { border-bottom: 0; }
.my-ship-ref   { font-weight: 650; color: var(--ink); }
.my-ship-status{ color: var(--muted); font-size: .76rem; }

/* ── Company Profile v1.0.1: view/edit mode + document preview ───────────── */
input.cp-ro, textarea.cp-ro, select.cp-ro {
  background: var(--bg);
  color: var(--ink);
  cursor: default;
}
input.cp-ro:focus, textarea.cp-ro:focus, select.cp-ro:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--accent-light, rgba(24,95,165,.18));
  border-color: var(--line);
}
.cp-preview-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  min-width: 220px;
}
.cp-preview-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 8px;
}
.cp-doc-header { min-height: 56px; display: flex; align-items: center; }
.cp-doc-footer {
  font-size: .76rem;
  color: #555;
  line-height: 1.5;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOOLBAR REDESIGN (UI/layout only) — two-row header
   Row 1: logo · EUR/XAF + Who are you? · Last saved + Backup / Notifications / Settings
   Row 2: ERP modules on two lines · Missing info + Search
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Row 1: right-hand control cluster ───────────────────────────────────── */
.toolbar-actions{ align-items:center; gap:10px; justify-content:flex-end; width:auto; }
.toolbar-actions .rate-label{ margin-left:0; width:auto; }
/* ── Two-row header layout (stable for every role) ───────────────────────────
   Row 1: EUR/XAF rate + date/status. Row 2: user badge + admin controls
   (Missing Info, Notifications, Archive, Backup, Settings). The badge must never
   sit beside the EUR/XAF field. The badge + admin cluster live together in a
   single no-wrap group (.tb-row2) that always sits on its own second row. */
.toolbar{ width:auto; }
/* Header: brand + toolbar (EUR/XAF) on row 1; the user-info + admin controls
   row spans the full width below them so the badge sits with the controls and
   never beside the EUR/XAF field, with room for every button. The .tb-row2
   element is always present in the main header, so we target the header that
   contains the toolbar directly (no :has() dependency needed). */
.tb-row2{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; width:100%; grid-column:1 / -1; }
.app > header{ display:grid; grid-template-columns:1fr auto; align-items:flex-start; column-gap:18px; row-gap:10px; }
.app > header .brand{ grid-column:1; grid-row:1; }
.app > header .toolbar{ grid-column:2; grid-row:1; }
.app > header .tb-row2{ grid-column:1 / -1; grid-row:2; }
@media (max-width: 760px){
  .app > header{ grid-template-columns:1fr; }
  .app > header .toolbar{ grid-column:1; grid-row:2; }
  .app > header .tb-row2{ grid-row:3; justify-content:flex-start; }
}
.tb-divider{ width:1px; align-self:stretch; min-height:26px; background:var(--line); margin:0 2px; }
.tb-status{ display:flex; flex-direction:column; gap:1px; align-items:flex-end; text-align:right; line-height:1.2; }
/* The auth badge sits inside .tb-row2 (the full-width second header row), so it
   always lines up with the admin controls and never beside the EUR/XAF field.
   Compact width + name ellipsis keep it tidy regardless of role. */
/* #authUserBadge is now inside .brand-title-row beside the company h1 */
.tb-status .tb-date{ margin:0; font-size:.72rem; color:var(--muted); white-space:nowrap; }
.tb-status .last-saved-line{ font-size:.72rem; color:var(--muted); white-space:nowrap; }

/* ── Dropdown menus (Backup · Notifications · Settings) ──────────────────── */
.tb-menu{ position:relative; display:inline-flex; }
.tb-menu-btn{
  display:inline-flex; align-items:center; gap:6px;
  min-height:38px; padding:0 12px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:8px; cursor:pointer; font-size:.84rem; font-weight:650; white-space:nowrap;
}
.tb-menu-btn:hover{ border-color:#b8ae9f; }
.tb-menu-btn .tb-menu-ico{ font-size:1rem; line-height:1; }
.tb-menu-btn .tb-caret{ font-size:.7rem; color:var(--muted); }
.tb-menu-btn[aria-expanded="true"]{ border-color:var(--green); box-shadow:0 0 0 2px rgba(22,122,74,.12); }
.tb-icon-btn{ position:relative; padding:0 12px; }

.tb-menu-panel{
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:210px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  z-index:9500; padding:6px; display:flex; flex-direction:column; gap:2px;
}
.tb-menu-panel[hidden]{ display:none; }
.tb-menu-item{
  display:flex; align-items:center; gap:10px; width:100%;
  justify-content:flex-start; text-align:left;
  min-height:38px; padding:8px 10px;
  border:0; background:transparent; color:var(--ink);
  border-radius:7px; cursor:pointer; font-size:.85rem; font-weight:600;
}
.tb-menu-item:hover{ background:var(--bg); border-color:transparent; }
.tb-menu-item .tb-menu-ico{ font-size:1rem; width:20px; text-align:center; flex-shrink:0; }
.tb-menu-item.danger{ color:var(--red); }
.tb-menu-item.danger:hover{ background:rgba(184,59,59,.08); }
.tb-menu-sep{ height:1px; background:var(--line); margin:4px 6px; }

/* ── Notifications bell + panel (read-only summary of existing signals) ──── */
.tb-bell-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--red); color:#fff;
  font-size:.64rem; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.tb-bell-badge[hidden]{ display:none; }
.tb-notif-panel{ min-width:286px; max-width:340px; }
.tb-notif-title{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:6px 10px 4px; }
.tb-notif-item{ display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:7px; }
.tb-notif-item:hover{ background:var(--bg); }
.tb-notif-ico{ font-size:1rem; flex-shrink:0; width:20px; text-align:center; }
.tb-notif-text{ font-size:.82rem; color:var(--ink); line-height:1.35; min-width:0; }
.tb-notif-text .tb-notif-sub{ display:block; color:var(--muted); font-size:.76rem; margin-top:1px; }
.tb-notif-link{ background:none; border:0; color:var(--green-dark); font-weight:700; cursor:pointer; font-size:.8rem; padding:4px 6px; border-radius:6px; margin-top:2px; }
.tb-notif-link:hover{ background:var(--bg); border-color:transparent; }
.tb-notif-empty{ padding:16px 10px; color:var(--muted); font-size:.84rem; text-align:center; }

/* ── Row 2: ERP modules on two lines + tools ─────────────────────────────── */
.nav-region{
  display:flex; flex-wrap:wrap; gap:12px 20px;
  align-items:flex-start; justify-content:space-between;
  margin:-2px 0 18px;
}
.view-tabs{
  display:flex; flex-direction:row; gap:8px;
  flex:0 1 auto; min-width:0; margin:0; align-items:center; flex-wrap:wrap;
}
.view-tabs > .view-tab, .view-tabs .modules-menu{ flex:0 0 auto; }
.view-tabs-line{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.view-tab-action{ margin-left:4px; }

.nav-tools{
  display:flex; gap:8px; align-items:center;
  flex:0 1 auto; flex-wrap:nowrap; justify-content:flex-end;
}
/* Missing info + Search Everything stay on ONE line, both at the standard 42px
   control height (same as the filter controls). */
.nav-tools .nav-missing-btn{
  flex:0 0 auto; height:42px; min-height:42px; padding:0 14px;
  display:inline-flex; align-items:center;
  font-size:.82rem; white-space:nowrap;
}
.nav-tools .gs-wrap{ flex:0 1 220px; min-width:160px; max-width:260px; }
.nav-tools .gs-input-row{ height:42px; min-height:42px; padding:0 12px; align-items:center; }

/* Toolbar admin cluster: Notifications · Archive · Backup · Settings stay
   together on one line with identical spacing (never split across rows).
   width:100% forces this cluster onto its own row inside the wrapping
   .toolbar-actions flex container, so the layout stays identical for every
   role — hiding permission-gated controls (e.g. the Switch-User selector for
   non-owners) can no longer pull this row upward onto the EUR/XAF line. */
.tb-admin{ display:inline-flex; align-items:center; gap:10px; flex-wrap:nowrap; justify-content:flex-end; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 700px){
  .nav-region{ flex-direction:column; }
  .view-tabs{ flex:1 1 100%; }
  .nav-tools{ width:100%; justify-content:flex-start; }
  .nav-tools .gs-wrap{ flex:1 1 100%; }
}
@media (max-width: 560px){
  .tb-menu-panel{ right:auto; left:0; }
  .tb-status{ align-items:flex-start; text-align:left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Ordre de Transit — shipment picker + inherited/aggregated preview
   (workflow: select shipment(s) → OT inherits & aggregates their data)
   ══════════════════════════════════════════════════════════════════════════ */
.ot-step-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700; margin:18px 0 8px;
}
.ot-ship-picker{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:8px; max-height:280px; overflow-y:auto;
  padding:6px; border:1px solid var(--line); border-radius:8px; background:var(--bg);
}
.ot-pick{
  display:flex; align-items:flex-start; gap:9px;
  padding:9px 11px; border:1px solid var(--line); border-radius:7px;
  background:var(--panel); cursor:pointer; transition:border-color .12s, box-shadow .12s, background .12s;
}
.ot-pick:hover{ border-color:var(--green); }
.ot-pick input{ margin-top:2px; flex:0 0 auto; width:16px; height:16px; cursor:pointer; accent-color:var(--green-dark); }
.ot-pick:has(input:checked){ border-color:var(--green-dark); box-shadow:0 0 0 1px var(--green-dark) inset; background:rgba(22,122,74,.05); }
.ot-pick-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ot-pick-ref{ font-weight:700; font-size:.86rem; color:var(--ink); }
.ot-pick-meta{ font-size:.74rem; color:var(--muted); line-height:1.35; word-break:break-word; }

.ot-preview{
  border:1px solid var(--line); border-radius:8px; background:var(--bg);
  padding:12px 14px; min-height:48px;
}
.ot-preview-empty{ margin:0; color:var(--muted); font-size:.84rem; }
.ot-preview-error{
  color:var(--red); font-size:.85rem; line-height:1.45; font-weight:500;
}
.ot-preview-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px 18px;
}
.ot-kv{
  display:flex; justify-content:space-between; gap:10px; font-size:.82rem;
  border-bottom:1px dotted var(--line); padding-bottom:4px;
}
.ot-kv span{ color:var(--muted); }
.ot-kv strong{ color:var(--ink); text-align:right; }

.ot-breakdown-title{
  margin:14px 0 6px; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--green-dark); font-weight:700;
}
.ot-breakdown{ width:100%; border-collapse:collapse; font-size:.8rem; }
.ot-breakdown th{
  text-align:left; color:var(--muted); font-weight:600; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.03em; padding:4px 8px; border-bottom:1px solid var(--line);
}
.ot-breakdown td{ padding:4px 8px; border-bottom:1px solid var(--line); color:var(--ink); }
.ot-breakdown th:nth-child(n+4), .ot-breakdown td:nth-child(n+4){
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ── Ordre de Transit: one-shipment-one-active-OT picker + history ───────── */
.ot-pick-disabled{ opacity:.55; cursor:not-allowed; background:#f7f7f5; }
.ot-pick-disabled input{ cursor:not-allowed; }
.ot-pick-attached{ display:block; margin-top:3px; font-size:.7rem; font-weight:700; color:var(--red,#A32D2D); }
.ot-src-link{ color:var(--green-dark,#167A4A); text-decoration:underline; cursor:pointer; }
.ot-src-link:hover{ color:var(--ink,#1a1a1a); }
.ot-src-missing{ color:var(--red,#A32D2D); }
.ot-hist-line{ display:block; }
tr.row-flash{ animation:rowFlash 1.8s ease-out; }
@keyframes rowFlash{ 0%{ background:#fff6cf; } 100%{ background:transparent; } }

/* ── Supplier Costs (provider invoices) ─────────────────────────────────────── */
.sup-report-tabs{ display:flex;flex-wrap:wrap;gap:6px; }
.sup-tab{ padding:6px 12px;border:1px solid var(--line,#ddd);background:#fff;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--muted,#555);cursor:pointer; }
.sup-tab:hover{ border-color:var(--green-dark,#167A4A);color:var(--ink,#1a1a1a); }
.sup-tab.active{ background:var(--green-dark,#167A4A);border-color:var(--green-dark,#167A4A);color:#fff; }
.sup-alloc-summary{ margin-bottom:12px; }
.sup-alloc-grid{ display:flex;gap:10px;flex-wrap:wrap; }
.sup-alloc-grid > div{ flex:1 1 110px;background:#f7f7f5;border:1px solid var(--line,#eee);border-radius:10px;padding:8px 12px; }
.sup-alloc-grid > div span{ display:block;font-size:.68rem;color:var(--muted,#777);text-transform:uppercase;letter-spacing:.03em; }
.sup-alloc-grid > div strong{ font-size:1rem;color:var(--ink,#1a1a1a); }
.sup-alloc-grid > div.sup-alloc-over strong{ color:#b83b3b; }
.sup-alloc-warn{ margin-top:8px;color:#b83b3b;font-size:.8rem;font-weight:600; }

/* ── Modal overlay (provider payment, complementary invoice) ────────────────── */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:9000; display:flex; align-items:flex-start; justify-content:center; padding:48px 16px; overflow:auto; }
.modal-overlay[hidden]{ display:none; }
.modal-card{ background:var(--card,#fff); border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.32); width:100%; max-width:640px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line,#eee); }
.modal-head h2{ margin:0; font-size:1.08rem; }
.modal-body{ padding:18px 20px; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--line,#eee); }
.icon-btn{ border:1px solid var(--line,#ccc); background:#f4f4f2; border-radius:8px; min-width:32px; height:32px; cursor:pointer; font-size:1.15rem; line-height:1; }

/* ── Receivables dashboard (derived financial view) ───────────────────────── */
.ar-top-summary{grid-template-columns:repeat(6,1fr)}
@media(max-width:980px){.ar-top-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ar-top-summary{grid-template-columns:1fr}}
.ar-aging-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:980px){.ar-aging-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ar-aging-grid{grid-template-columns:1fr}}
.ar-aging-cell{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--bg)}
.ar-aging-label{color:var(--muted);font-size:.78rem;font-weight:650;margin-bottom:6px}
.ar-aging-amount{font-size:1.12rem;font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.ar-aging-meta{color:var(--muted);font-size:.74rem;margin-top:2px}
.ar-aging-bar{height:6px;border-radius:999px;background:var(--line);margin-top:8px;overflow:hidden}
.ar-aging-bar>span{display:block;height:100%;background:var(--green);border-radius:inherit}
.ar-aging-warn .ar-aging-bar>span{background:var(--gold)}
.ar-aging-bad .ar-aging-amount{color:var(--red)}
.ar-aging-bad .ar-aging-bar>span{background:var(--red)}
.ar-aging-good .ar-aging-bar>span{background:var(--green)}
.ar-detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
@media(max-width:760px){.ar-detail-grid{grid-template-columns:1fr}}
.ar-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.ar-detail-ref{font-family:monospace;font-weight:800;font-size:1rem}
.ar-detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.ar-detail-facts>div{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--bg)}
.ar-detail-facts span{color:var(--muted);font-size:.74rem}
.ar-detail-facts strong{font-size:.95rem}
.ar-detail-subtitle{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);margin:16px 0 8px}
.ar-detail-table{width:100%;border-collapse:collapse;font-size:.86rem}
.ar-detail-table th,.ar-detail-table td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}
.ar-detail-table th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.ar-payment-box{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--bg);margin-top:10px}
.ar-timeline{display:grid;gap:0;position:relative}
.ar-timeline-item{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:0 0 14px;position:relative}
.ar-timeline-item:before{content:"";position:absolute;left:13px;top:24px;bottom:0;width:2px;background:var(--line)}
.ar-timeline-item:last-child:before{display:none}
.ar-timeline-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);font-size:.86rem;z-index:1}
.ar-timeline-text{font-size:.86rem;line-height:1.3}
.ar-timeline-date{color:var(--muted);font-size:.74rem;margin-top:2px}
.ar-client-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:6px}
@media(max-width:760px){.ar-client-stats{grid-template-columns:repeat(2,1fr)}}
.ar-client-stats .metric{min-height:auto}

/* ── Transitaire expected-costs preview (shipment form) ── */
.te-expected{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg); margin-top:4px; }
.te-expected-head{ font-size:.78rem; font-weight:700; color:var(--ink); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.te-expected-auto{ font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--green-dark); background:#e8f5e9; padding:1px 7px; border-radius:999px; }
.te-expected-table{ width:100%; border-collapse:collapse; font-size:.74rem; }
.te-expected-table th{ text-align:left; color:var(--muted); font-weight:600; padding:3px 6px; border-bottom:1px solid var(--line); }
.te-expected-table td{ padding:3px 6px; border-bottom:1px solid var(--line); }
.te-expected-table td.amount, .te-expected-table th.amount{ text-align:right; white-space:nowrap; }
.te-expected-total td{ font-weight:700; border-bottom:none; padding-top:6px; }
.te-expected-note{ font-size:.66rem; color:var(--muted); margin-top:6px; }
.te-expected-empty{ font-size:.76rem; color:var(--muted); }
.te-link{ background:none; border:none; color:var(--accent,#1f6feb); cursor:pointer; font-size:.74rem; padding:0; text-decoration:underline; }

/* ── Single "Modules" grouped menu + toolbar refinements (Phase: UX) ───────── */
.modules-menu .tb-menu-panel{ left:0; right:auto; min-width:240px; max-height:min(72vh,540px); overflow-y:auto; }
.modules-panel .mod-group{ padding:2px 0; }
.modules-panel .mod-group + .mod-group{ border-top:1px solid var(--line); margin-top:2px; padding-top:6px; }
.modules-panel .mod-group-title{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:4px 10px 2px; }
.modules-panel .tb-menu-item.active{ background:var(--bg); color:var(--ink); font-weight:750; box-shadow:inset 2px 0 0 #b8ae9f; }
/* Navigation buttons use the neutral toolbar style — green is reserved for
   positive actions (Add / Save / Confirm / Paid). */
.view-tabs .view-tab{ background:var(--panel); border:1px solid var(--line); color:var(--ink); font-weight:700; }
.view-tabs .view-tab:hover{ border-color:#b8ae9f; background:var(--bg); }
.view-tabs .view-tab.active{ background:#ece7da; border-color:#b8ae9f; color:var(--ink); box-shadow:inset 0 -2px 0 #8c8170; }
.modules-btn{ display:inline-flex; align-items:center; gap:6px; }
.modules-btn, .modules-btn.active{ background:var(--panel); border:1px solid var(--line); color:var(--ink); }
.modules-btn.active{ background:#ece7da; border-color:#b8ae9f; box-shadow:inset 0 -2px 0 #8c8170; }
.modules-btn[aria-expanded="true"]{ border-color:#b8ae9f; box-shadow:0 0 0 2px rgba(140,129,112,.18); }
.modules-btn .tb-caret{ color:var(--muted); }
/* Attention cluster: Missing info immediately left of Notifications */
.tb-admin .nav-missing-btn{ display:inline-flex; align-items:center; gap:6px; }
.tb-admin .nav-missing-btn .tb-menu-label{ font-size:.82rem; font-weight:650; }
/* Shorter per-view "Search all fields" filter box (no longer dominates the toolbar) */
.toolbar-filter-row #filterBuilder{ width:100%; max-width:620px; margin-left:auto; }

/* ── Reports category tabs (categories live INSIDE the Reports module) ─────── */
.report-cat-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 16px; border-bottom:1px solid var(--line); padding-bottom:2px; }
.report-cat-tab{ border:0; background:transparent; color:var(--muted); font-weight:750; font-size:.86rem; padding:9px 14px; border-radius:8px 8px 0 0; min-height:40px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-3px; }
.report-cat-tab:hover{ background:var(--bg); color:var(--ink); border-color:transparent; }
.report-cat-tab.active{ color:var(--green-dark); border-bottom-color:var(--green); background:transparent; }
.report-cat-body{ display:block; }

/* ── Reports: compact period toolbar + professional Operations layout ─────── */
.rpt-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:2px 0 4px; }
.rpt-period{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rpt-period-label{ font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.rpt-date{ width:150px; min-height:38px; height:38px; padding:4px 10px; font-size:.84rem; }
.rpt-period-sep{ color:var(--muted); }
.rpt-presets{ display:inline-flex; gap:6px; flex-wrap:wrap; margin-left:4px; }
.rpt-presets button{ min-height:38px; padding:4px 12px; font-size:.82rem; font-weight:650; }
.rpt-actions{ display:inline-flex; align-items:center; gap:10px; }
.rpt-period-current{ font-size:.78rem; color:var(--muted); }
.rpt-print{ min-height:38px; padding:4px 14px; font-size:.82rem; font-weight:650; }
@media print{ .rpt-toolbar .rpt-presets, .rpt-toolbar .rpt-print, .report-cat-tabs{ display:none!important; } }

.rpt-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:4px 0 14px; }
.rpt-title{ margin:0; font-size:1.12rem; font-weight:800; letter-spacing:-.01em; }
.rpt-sub{ margin:4px 0 0; color:var(--muted); font-size:.84rem; }
.rpt-kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:20px; }
.rpt-kpi{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:3px; min-height:78px; }
.rpt-kpi-label{ font-size:.74rem; color:var(--muted); font-weight:650; }
.rpt-kpi-val{ font-size:1.5rem; line-height:1.05; font-weight:800; }
.rpt-kpi-foot{ font-size:.72rem; color:var(--muted); }
.rpt-kpi--warn{ border-color:#f0c7c7; background:#fbf1f1; }
.rpt-kpi--warn .rpt-kpi-val{ color:var(--red); }
.rpt-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.rpt-sec{ background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:18px; }
.rpt-sec-head{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--line); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); }
.rpt-sec-count{ background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:1px 9px; font-size:.72rem; color:var(--muted); letter-spacing:0; }
.rpt-table{ width:100%; border-collapse:collapse; font-size:.84rem; }
.rpt-table th{ background:var(--bg); text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.rpt-table td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.rpt-table tr:last-child td{ border-bottom:0; }
.rpt-table tbody tr:hover{ background:var(--bg); }
.rpt-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rpt-muted{ color:var(--muted); }
.rpt-ref{ font-weight:750; }
.rpt-table-scroll{ overflow-x:auto; }
.rpt-table--detail th, .rpt-table--detail td{ white-space:nowrap; }
.rpt-badge{ display:inline-block; border-radius:999px; padding:3px 10px; font-size:.74rem; font-weight:700; background:#eceae4; color:var(--ink); border:1px solid var(--line); white-space:nowrap; }
.rpt-badge--bol_sent, .rpt-badge--delivered, .rpt-badge--arrived{ background:#e7f0ec; color:#2c6149; border-color:#cfe3d8; }
.rpt-badge--in_transit, .rpt-badge--loaded, .rpt-badge--shipped{ background:#e9eef5; color:#33506f; border-color:#d4deea; }
.rpt-ok{ color:#2c6149; font-weight:800; }
.rpt-flag{ display:inline-block; border-radius:999px; padding:2px 8px; font-size:.72rem; font-weight:700; background:#fbeaea; color:var(--red); border:1px solid #f0c7c7; }
@media(max-width:980px){ .rpt-kpis{ grid-template-columns:repeat(2,1fr); } .rpt-grid-2{ grid-template-columns:1fr; } }
/* Neutral report category tabs (green reserved for positive actions) */
.report-cat-tab.active{ color:var(--ink); border-bottom-color:#8c8170; background:transparent; }


/* ── REFERENCE LIST DESIGN — Shipment list (visual standard for ERP list pages) ──
   Standardized status tones (reusable: OT, Receivables, Payables, Reports, …).    */
.st-badge{ display:inline-block; border-radius:999px; padding:2px 9px; font-size:.73rem; font-weight:700; white-space:nowrap; border:1px solid transparent; line-height:1.35; }
.st-gray{ background:#edeae3; color:#6b6457; border-color:#ddd7c9; }
.st-blue{ background:#e9eef6; color:#2f4f72; border-color:#d3deeb; }
.st-orange{ background:#fbf0e1; color:#945c10; border-color:#f1dcbd; }
.st-green{ background:#e6f1ea; color:#2c6149; border-color:#cde3d6; }
.st-red{ background:#fbe9e9; color:#a3261f; border-color:#f1c6c6; }
.st-purple{ background:#efe9f6; color:#5b3b86; border-color:#ddd1ed; }

/* Quick filter chips (compact) */
.ship-quickfilters{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
.qf-group{ display:inline-flex; gap:4px; flex-wrap:wrap; }
.qf-sep{ width:1px; align-self:stretch; background:var(--line); margin:2px 4px; }
.qf-chip{ border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:999px; padding:2px 10px; min-height:24px; font-size:.73rem; font-weight:600; cursor:pointer; }
.qf-chip:hover{ border-color:#cdd7e6; color:var(--ink); background:#f6f8fb; }
.qf-chip.active{ background:#eef2f8; border-color:#cfd9e8; color:#33506f; font-weight:700; }

/* Table */
.ship-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.ship-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.ship-table thead th{ background:var(--bg); text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.045em; color:var(--muted); font-weight:800; padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.ship-table th.c-acts, .ship-table td.c-acts{ width:78px; text-align:right; }
/* Primary row — slightly denser (≈12% less vertical padding) */
.ship-row > td{ padding:8px 12px; border-top:1px solid var(--line); vertical-align:middle; cursor:pointer; }
.ship-table tbody tr.ship-row:first-child > td{ border-top:0; }
.ship-row:hover > td{ background:#faf8f3; }
.ship-row:focus-visible{ outline:2px solid #8c8170; outline-offset:-2px; }
.ship-row.needs-attention > td.c-ref{ box-shadow:inset 3px 0 0 var(--red); }
.ship-ref{ font-weight:800; font-size:.84rem; letter-spacing:-.01em; color:var(--ink); }
.ship-sub-ref{ display:block; color:var(--muted); font-size:.7rem; font-weight:700; margin-top:1px; }
.ship-client{ font-weight:750; color:var(--ink); }
.ship-muted{ color:var(--muted); }
.nat-badge{ display:inline-block; border-radius:6px; padding:2px 8px; font-size:.72rem; font-weight:700; background:#f1ede4; color:#6b6457; border:1px solid #e2dccd; white-space:nowrap; }
.ot-badge{ display:inline-block; border-radius:6px; padding:2px 8px; font-size:.74rem; font-weight:700; background:#eef1f6; color:#33506f; border:1px solid #dbe2ec; white-space:nowrap; }
.qv{ display:flex; flex-direction:column; line-height:1.2; }
.qv-q{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.qv-v{ font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums; }
/* Compact icon actions */
.ship-acts{ display:inline-flex; gap:4px; justify-content:flex-end; }
.icon-act{ width:30px; height:30px; min-height:30px; padding:0; display:inline-grid; place-items:center; border:1px solid var(--line); background:var(--panel); border-radius:7px; font-size:.92rem; cursor:pointer; color:var(--ink); }
.icon-act:hover{ border-color:#b8ae9f; background:var(--bg); }
/* Secondary metadata line */
.ship-subrow > td{ padding:0 12px 8px 12px; cursor:pointer; }
.ship-subrow:hover > td{ background:#faf8f3; }
.ship-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:.76rem; color:var(--muted); }
.ship-meta .meta{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.ship-meta .meta.ok{ color:#2c6149; font-weight:650; }
.ship-meta .meta.miss{ color:var(--red); font-weight:700; }
.ship-sep{ color:#cbc3b3; }
/* Empty state */
.ship-empty{ text-align:center; padding:48px 20px; border:1px dashed var(--line); border-radius:12px; background:var(--bg); }
.ship-empty-icon{ font-size:2rem; margin-bottom:8px; }
.ship-empty-title{ font-weight:800; font-size:1.05rem; color:var(--ink); }
.ship-empty-sub{ color:var(--muted); margin:6px auto 16px; max-width:420px; font-size:.86rem; line-height:1.45; }
.ship-empty-btn{ min-height:38px; padding:8px 16px; font-weight:700; border-radius:8px; cursor:pointer; }
.ship-empty-btn.primary{ background:var(--green); border-color:var(--green); color:#fff; }
.ship-empty-btn.primary:hover{ background:var(--green-dark); }
/* Responsive — medium + small windows */
@media(max-width:900px){
  .ship-table thead{ display:none; }
  .ship-table, .ship-table tbody, .ship-row, .ship-subrow, .ship-row > td, .ship-subrow > td{ display:block; width:100%; }
  .ship-row{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 12px; border-top:1px solid var(--line); }
  .ship-row > td{ padding:0; border:0; }
  .ship-row > td.c-ref{ grid-row:1; }
  .ship-row > td.c-acts{ grid-row:1; grid-column:2; }
  .ship-row > td[data-label="Client"]{ grid-row:2; }
  .ship-row > td[data-label="Status"]{ grid-row:2; grid-column:2; justify-self:end; }
  .ship-row > td[data-label="Specs"],.ship-row > td[data-label="Current OT"],.ship-row > td[data-label="User"]{ font-size:.82rem; color:var(--muted); }
  .ship-row > td[data-label="User"]{ display:inline-flex; align-items:center; gap:6px; }
  .ship-row > td[data-label="User"]::before{ content:"👤"; }
  .ship-row > td[data-label="Specs"],.ship-row > td[data-label="Current OT"],.ship-row > td[data-label="User"]{ grid-column:1/-1; }
  .ship-row.needs-attention > td.c-ref{ box-shadow:none; }
  .ship-row.needs-attention{ box-shadow:inset 3px 0 0 var(--red); }
  .ship-subrow > td{ padding:6px 12px 2px; }
}
@media(max-width:560px){
  .ship-quickfilters .qf-sep{ display:none; }
  .ship-meta{ font-size:.72rem; gap:5px; }
  .ship-ref{ font-size:.82rem; }
}

/* Reports: 6-up KPI grid (Operations) */
.rpt-kpis--6{ grid-template-columns:repeat(6,1fr); }
@media(max-width:1100px){ .rpt-kpis--6{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .rpt-kpis--6{ grid-template-columns:repeat(2,1fr); } }

/* ── Cost Control dashboard + summary ─────────────────────────────────────── */
.cc-kpis{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin:2px 0 18px; }
.cc-kpi{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:3px; min-height:84px; }
.cc-kpi-label{ font-size:.72rem; color:var(--muted); font-weight:650; line-height:1.25; }
.cc-kpi-val{ font-size:1.25rem; line-height:1.05; font-weight:800; overflow-wrap:anywhere; }
.cc-kpi-foot{ font-size:.68rem; color:var(--muted); }
.cc-kpi--good .cc-kpi-val{ color:var(--green); }
.cc-kpi--bad .cc-kpi-val{ color:var(--red); }
.cc-kpi--warn{ border-color:#f0dcbf; background:#fdf6ea; }
.cc-kpi--warn .cc-kpi-val{ color:#945c10; }
.cc-summary-panel{ margin:0 0 18px; }
.cc-table-wrap{ overflow-x:auto; }
.cc-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.cc-table thead th{ background:var(--bg); text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.045em; color:var(--muted); font-weight:800; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.cc-table th.amount, .cc-table td.amount{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cc-table .cc-tcol{ width:32px; }
.cc-row > td{ padding:9px 10px; border-top:1px solid var(--line); vertical-align:middle; }
.cc-table tbody tr.cc-row:hover > td{ background:#faf8f3; }
.cc-ref{ font-weight:800; }
.cc-sub{ font-size:.72rem; color:var(--muted); }
.cc-arrow{ color:#c2baa8; text-align:center; width:18px; padding:0; }
.cc-toggle{ width:24px; height:24px; min-height:24px; padding:0; display:inline-grid; place-items:center; border:1px solid var(--line); background:var(--panel); border-radius:6px; font-weight:800; cursor:pointer; }
.cc-var{ display:inline-flex; flex-direction:column; align-items:flex-end; gap:1px; }
.cc-var-pct{ font-size:.68rem; color:var(--muted); }
.cc-bd-row > td{ padding:0 10px 12px 10px; background:#faf8f3; }
.cc-bd-table{ width:100%; border-collapse:collapse; font-size:.8rem; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.cc-bd-table th{ background:var(--bg); text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:800; padding:6px 10px; border-bottom:1px solid var(--line); }
.cc-bd-table td{ padding:6px 10px; border-bottom:1px solid var(--line); }
.cc-bd-table tr:last-child td{ border-bottom:0; }
.cc-muted{ color:var(--muted); }
.cc-config{ border:1px solid var(--line); border-radius:10px; background:var(--panel); margin-top:4px; }
.cc-config[open]{ box-shadow:var(--shadow); }
.cc-config-summary{ cursor:pointer; padding:12px 16px; font-weight:750; font-size:.92rem; list-style:none; }
.cc-config-summary::-webkit-details-marker{ display:none; }
.cc-config-summary::before{ content:"▸ "; color:var(--muted); }
.cc-config[open] .cc-config-summary::before{ content:"▾ "; }
.cc-config .accounting-grid{ padding:0 16px 16px; }
@media(max-width:1200px){ .cc-kpis{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:760px){ .cc-kpis{ grid-template-columns:repeat(2,1fr); } }

/* ── Profit Analysis ──────────────────────────────────────────────────────── */
.pa-kpis{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.pa-kpi-sm{ font-size:.95rem !important; }
.pa-tabs{ margin:4px 0 14px; }
.pa-tabbody{ margin-top:4px; }
.pa-note{ color:var(--muted); font-size:.84rem; margin:0 0 10px; line-height:1.45; }
.pa-table th, .pa-table td{ white-space:nowrap; }
.pa-profit{ display:inline-block; border-radius:999px; padding:2px 9px; font-size:.73rem; font-weight:700; }
.pa-row > td{ padding:9px 10px; border-top:1px solid var(--line); vertical-align:middle; }
.pa-table tbody tr.pa-row:hover > td{ background:#faf8f3; }
/* drill-down */
.pa-dd-row > td{ background:#faf8f3; padding:0 10px 14px; }
.pa-dd{ border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:14px; }
.pa-dd-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.pa-dd-card{ border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--bg); }
.pa-dd-h{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; font-weight:800; color:var(--muted); margin-bottom:6px; display:block; }
.pa-dd-list{ margin:0; padding-left:0; list-style:none; display:grid; gap:5px; font-size:.84rem; }
.pa-dd-list li{ line-height:1.4; }
.pa-dd-margin{ margin-top:12px; padding:10px 12px; border:1px dashed var(--line); border-radius:8px; font-size:.9rem; background:var(--bg); }
/* monthly trend */
.pa-trend{ display:grid; gap:8px; padding:4px 0; }
.pa-trend-row{ display:grid; grid-template-columns:74px 1fr 130px; gap:10px; align-items:center; }
.pa-trend-m{ font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.pa-trend-bar{ height:14px; background:#ece7da; border-radius:999px; overflow:hidden; }
.pa-trend-bar > span{ display:block; height:100%; background:var(--green); border-radius:inherit; }
.pa-trend-bar > span.neg{ background:var(--red); }
.pa-trend-v{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; font-size:.86rem; }
@media(max-width:760px){ .pa-dd-grid{ grid-template-columns:1fr; } .pa-trend-row{ grid-template-columns:58px 1fr 96px; } }

/* ── Shipment table — Specs / Status / Commercial cells (final reference) ──── */
.ship-table colgroup .cg-acts{ width:104px; }
.ship-sub-ref{ display:block; color:var(--muted); font-size:.7rem; font-weight:600; margin-top:1px; line-height:1.3; }
.ship-sub-k{ color:#a89e8c; font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.62rem; }
/* Specs */
.ship-specs{ display:flex; flex-direction:column; line-height:1.28; gap:0; }
.ship-specs .spec-nature{ font-weight:750; color:var(--ink); font-size:.8rem; }
.ship-specs .spec-qty{ font-size:.76rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.ship-specs .spec-type{ font-size:.74rem; color:var(--muted); }
.ship-specs .spec-vol{ font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums; }
/* Status cell */
.ship-stcell{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.ship-stcell .stcell-sub{ font-size:.72rem; color:var(--muted); white-space:nowrap; }
/* Danger action */
.icon-act--danger:hover{ border-color:#e3a0a0; background:#fbeaea; }

/* ── ERP nav history (Back/Forward) toolbar buttons ───────────────────────── */
.nav-hist{ display:inline-flex; gap:4px; margin-right:4px; }
.nav-hist-btn{ width:36px; min-height:36px; height:36px; padding:0; display:inline-grid; place-items:center; border:1px solid var(--line); background:var(--panel); border-radius:8px; font-size:1.05rem; font-weight:800; color:var(--ink); cursor:pointer; }
.nav-hist-btn:hover:not(:disabled){ border-color:#b8ae9f; background:var(--bg); }
.nav-hist-btn:disabled{ opacity:.4; cursor:default; }

/* ════════════════════════════════════════════════════════════════════════════
   SHIPMENT LIST — VERSION 1 (true table, disclosure rows, BL→Invoice→Income)
   Restores a real multi-column table with desktop disclosure arrows. Each
   shipment can expand into one row per BL Parcel plus one full-width metadata row.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 6. Full workspace width ─────────────────────────────────────────────── */
@media (min-width: 1100px){
  /* All modules + header + nav share the SAME page container as the Shipment
     module (single source of truth for left/right margins). */
  header,
  .nav-region,
  .app-view{ width:min(86vw,1480px); margin-left:calc(50% - min(43vw,740px)); margin-right:calc(50% - min(43vw,740px)); }
}
.shipments-layout{ grid-template-columns:minmax(300px,360px) minmax(0,1fr); }
.shipments-layout.dossier-open{ grid-template-columns:minmax(300px,360px) minmax(380px,1fr); }

/* ── Compact filters bar (retained) ──────────────────────────────────────── */
.ship-listbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; flex-wrap:wrap; }
.ship-count{ color:var(--muted); font-size:.84rem; } .ship-count strong{ color:var(--ink); font-weight:800; }
.ship-filters-btn{ display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 12px; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:999px; font-size:.82rem; font-weight:700; cursor:pointer; }
.ship-filters-btn:hover{ border-color:#b8ae9f; background:var(--bg); }
.ship-filters-btn.is-active{ background:#eef2f8; border-color:#cfd9e8; color:#33506f; }
.ship-filters-badge,.tb-filters-badge{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--green); color:#fff; font-size:.68rem; font-weight:800; }
.tb-filters-badge{ margin-left:4px; }

/* ── The table ───────────────────────────────────────────────────────────── */
.ship-tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); }
table.ship-table{ width:100%; border-collapse:collapse; font-size:.82rem; }
/* very narrow disclosure column (item 1) */
.ship-table col.cg-arrow{ width:26px; }
.ship-table col.cg-ship{ width:17%; } .ship-table col.cg-specs{ width:12%; }
.ship-table col.cg-shipping{ width:13%; } .ship-table col.cg-fob{ width:9%; }
.ship-table col.cg-status{ width:15%; } .ship-table col.cg-income{ width:11%; }
.ship-table col.cg-pay{ width:11%; } .ship-table col.cg-acts{ width:46px; }
.ship-table thead th{ text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:800; padding:9px 10px; background:var(--bg); border-bottom:1px solid var(--line); white-space:nowrap; }
.ship-table thead th.amount{ text-align:right; }
.ship-table td{ padding:8px 10px; vertical-align:top; border-bottom:1px solid var(--line); }
.ship-table .table-line{ display:block; line-height:1.3; }
.ship-table .table-line.primary{ font-weight:750; color:var(--ink); }
.ship-table .table-line.muted{ color:var(--muted); font-size:.95em; }
.ship-table .ship-muted{ color:var(--muted); }
.ship-table th.col-arrow, .ship-table td.col-arrow{ text-align:center; width:26px; min-width:26px; max-width:26px; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box; }
.ship-table .col-acts{ width:46px; }

/* Disclosure arrow (item 1) — standard desktop triangle, centered */
.disclosure{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; min-height:0; padding:0; margin:0 auto; border:0; background:transparent; color:var(--muted); font-size:.72rem; line-height:1; cursor:pointer; border-radius:5px; }
.disclosure:hover{ background:var(--bg); color:var(--ink); }

/* Group header rows */
.ship-grp-row td{ background:var(--bg); border-top:2px solid var(--line); }
.ship-grp-row td:nth-child(2){ padding:8px 10px; }
.ship-grp-code{ font-weight:800; font-size:.8rem; color:var(--green-dark); background:#e7f3ec; border:1px solid #cfe6da; border-radius:6px; padding:1px 7px; }
.ship-grp-dash{ color:var(--muted); margin:0 6px; }
.ship-grp-name{ font-weight:800; font-size:.82rem; color:var(--ink); }

/* Summary rows */
tr.ship-sum{ cursor:pointer; }
tr.ship-sum:hover{ background:#faf8f3; }
tr.ship-sum.is-expanded{ background:#f6f8fb; }
tr.ship-sum.is-expanded td{ border-bottom-color:transparent; }
.ship-ref-line{ text-transform:uppercase; letter-spacing:.01em; }
.cell-income{ text-align:right; } .cell-income .table-line{ font-variant-numeric:tabular-nums; }
.cell-fob{ white-space:nowrap; }

/* Specs — strictly one line, never wraps (item 4) */
.specs-1line{ display:inline-block; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Payment colours (item 9) — colour conveys meaning, no words */
.cell-pay .pay-paid{ color:var(--green-dark); font-weight:700; white-space:nowrap; }
.cell-pay .pay-due{ color:var(--red); font-weight:700; white-space:nowrap; }

/* Lifecycle conveyed by row styling (no extra column) */
tr.ship-sum.lc-cancelled{ opacity:.7; }
tr.ship-sum.lc-cancelled .ship-ref-line{ text-decoration:line-through; text-decoration-color:#b89; }

/* Stacked vertical action icons (item 12) */
.ship-acts-grid{ display:flex; flex-direction:column; gap:4px; align-items:center; }
.ship-acts-grid .ship-acts-row{ display:flex; gap:4px; justify-content:center; }
.ship-acts-grid .icon-act{ width:28px; height:26px; min-height:0; padding:0; display:inline-grid; place-items:center; border:1px solid var(--line); background:var(--panel); border-radius:6px; font-size:.82rem; cursor:pointer; color:var(--ink); }
.ship-acts-grid .icon-act:hover{ border-color:#b8ae9f; background:var(--bg); }
.ship-acts-grid .icon-act--warn:hover{ border-color:#f0dcbf; background:#fbf0e1; }
.ship-acts-grid .icon-act--danger{ color:var(--red); } .ship-acts-grid .icon-act--danger:hover{ border-color:#f1c6c6; background:#fbe9e9; }

/* Expanded section (items 10 & 11) */
tr.ship-divider-row td{ padding:0; height:0; border-bottom:2px solid #d8e0ea; background:#f6f8fb; }
tr.ship-exp-row{ background:#fbfcfe; }
tr.ship-exp-row td{ border-bottom:1px solid #eef1f5; padding-top:6px; padding-bottom:6px; }
tr.ship-exp-row .exp-bl{ font-weight:750; color:#33506f; white-space:nowrap; }
tr.ship-exp-row .exp-inv{ font-weight:700; color:var(--ink); }
tr.ship-exp-row .cell-income .table-line{ font-variant-numeric:tabular-nums; }
/* Full-width metadata row — spans the whole table (item 11) */
tr.ship-meta-row td.ship-meta-cell{ background:#eef2f7; border-bottom:2px solid var(--line); padding:7px 14px; white-space:normal; overflow:visible; }
.ship-meta-line{ display:flex; flex-wrap:wrap; align-items:baseline; row-gap:3px; font-size:.74rem; color:#4a5560; line-height:1.5; }
.ship-meta-line .meta-bit{ white-space:nowrap; }
.ship-meta-line .msep{ color:#b9c2cc; margin:0 7px; }

/* Empty state */
.ship-empty{ text-align:center; padding:46px 20px; border:1px dashed var(--line); border-radius:12px; background:var(--bg); }
.ship-empty-icon{ font-size:1.9rem; opacity:.8; } .ship-empty-title{ font-weight:800; margin:8px 0 4px; color:var(--ink); }
.ship-empty-sub{ color:var(--muted); font-size:.86rem; margin-bottom:14px; }
.ship-empty-btn{ min-height:36px; padding:7px 16px; border:1px solid var(--line); background:var(--panel); border-radius:8px; font-weight:700; cursor:pointer; }
.ship-empty-btn.primary{ background:var(--green); border-color:var(--green); color:#fff; }

@media (max-width:980px){ header, .nav-region, .app-view{ width:auto; margin-left:0; margin-right:0; } }

/* Refinements: centered column titles (item 5) + invoices-total emphasis (item 3) */
.ship-table thead th, .ship-table thead th.amount{ text-align:center; }
.ship-meta-line .meta-invtotal{ color:var(--ink); font-weight:800; }

/* ════════════════════════════════════════════════════════════════════════════
   COST CONTROL — Shipment Cost Summary, redesigned in the Shipment-table language
   (item 8): proper columns, centered headers, compact multi-row cells, badges,
   client invoice codes, disclosure arrows.
   ════════════════════════════════════════════════════════════════════════════ */
.cc-table--v2{ font-size:.84rem; }
.cc-table--v2 thead th{ text-align:center; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:800; padding:9px 10px; background:var(--bg); border-bottom:1px solid var(--line); white-space:nowrap; }
.cc-table--v2 th.amount{ text-align:center; }
.cc-table--v2 td{ padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.cc-table--v2 td.amount, .cc-table--v2 td.cc-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cc-table--v2 tbody tr.cc-row:hover > td{ background:#faf8f3; }
.cc-table--v2 tbody tr.cc-row.is-open > td{ background:#f5f8fb; }
.cc-table--v2 col.cgc-arrow{ width:30px; }
.cc-table--v2 col.cgc-num{ width:118px; }
.cc-table--v2 col.cgc-var{ width:132px; }
.cc-table--v2 col.cgc-acts{ width:74px; }
.cc-table--v2 .cc-tcol{ text-align:center; width:30px; padding-left:0; padding-right:0; }
.cc-table--v2 .cc-cell-ship{ text-align:center; }
.cc-table--v2 .cc-cell-ship .cc-ref{ font-weight:800; letter-spacing:-.01em; }
.cc-table--v2 .cc-cell-ship .cc-sub{ font-size:.68rem; color:var(--muted); margin-top:1px; }
.cc-table--v2 .cc-cell-ship .cc-ship-code{ font-weight:400; font-size:.68rem; color:var(--muted); letter-spacing:.01em; }
/* Client invoice-code badge (falls back to full name styling when no code) */
.cc-client-badge{ display:inline-block; font-weight:800; font-size:.78rem; color:var(--green-dark); background:#e7f3ec; border:1px solid #cfe6da; border-radius:6px; padding:1px 8px; letter-spacing:.02em; }
.cc-client-badge.is-name{ font-weight:650; font-size:.8rem; color:var(--ink); background:transparent; border:0; padding:0; letter-spacing:0; }
.cc-missing{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.cc-cell-missing .st-badge, .cc-cell-status .st-badge{ white-space:nowrap; }
.cc-table--v2 .cc-cell-acts{ text-align:center; }
.cc-table--v2 .disclosure{ color:var(--muted); }

/* ── Round 4 refinements ─────────────────────────────────────────────────── */
/* Item 3 — Shipment Overview title (top-left of the table) */
.ship-overview-title{ margin:0 0 0 22px; font-size:1.05rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); line-height:1; }

/* Item 4 — center everything in the Shipment table (headers + cells); amounts stay readable */
.ship-table thead th, .ship-table thead th.amount{ text-align:center !important; }
.ship-table tbody td{ text-align:center; }
.ship-table tbody td.cell-income,
.ship-table tr.ship-exp-row .cell-income{ text-align:center; }
.ship-table .cell-income .table-line,
.ship-table tr.ship-exp-row .cell-income .table-line{ font-variant-numeric:tabular-nums; }
.ship-table .ship-grp-row td{ text-align:left; }
.ship-table .ship-meta-cell{ text-align:left; }
.ship-table .ship-meta-cell .ship-meta-line{ justify-content:flex-start; }
.ship-table td.col-arrow{ text-align:center; }   /* keep arrow centered */
.ship-table td.cell-acts{ text-align:center; }

/* Item 5/6 — metadata invoice chips emphasis */
.ship-meta-line .meta-invtotal{ color:var(--ink); font-weight:800; }

/* Item 2 — Expected Shipment Costs: one line per expected service (no multiline blocks) */
.expected-cost-list{ display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.expected-cost-item{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; white-space:nowrap; font-size:.68rem; line-height:1.3; }
.expected-cost-item .expected-cost-label{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
.expected-cost-item > span:last-child{ font-variant-numeric:tabular-nums; flex:none; }

/* Item 7 — cost code under service in the Tariffs table */
.tariff-costcode-line{ font-size:.68rem; font-style:italic; opacity:.85; }

/* ── Round 5 ─────────────────────────────────────────────────────────────── */
/* Item 5 — Expected Shipment Costs table: center headers + cells; keep the
   listed services (breakdown) left-aligned. (The section title is an <h2>
   outside the table, so it stays left by default.) */
#expectedCostTableWrap table thead th{ text-align:center; }
#expectedCostTableWrap table tbody td{ text-align:center; }
#expectedCostTableWrap table tbody td.amount{ text-align:center; font-variant-numeric:tabular-nums; }
#expectedCostTableWrap .two-line-title{ display:inline-block; text-align:center; }
/* listed expected services stay left-aligned and one-per-line */
#expectedCostTableWrap .expected-services-cell .expected-cost-list{ text-align:left; }
#expectedCostTableWrap .expected-cost-item{ text-align:left; }

/* ── Closed Shipments tab controls ───────────────────────────────────────── */
.closed-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.closed-presets{ display:flex; gap:4px; flex-wrap:wrap; }
.closed-preset-btn{ min-height:30px; padding:4px 10px; font-size:.78rem; font-weight:650; border-radius:6px; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--ink); }
.closed-preset-btn:hover{ border-color:#b8ae9f; background:var(--bg); }
.closed-preset-btn.active{ background:var(--green); border-color:var(--green); color:#fff; }
.closed-custom{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.closed-stats{ width:100%; display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); margin-bottom:6px; padding:5px 8px; background:var(--bg); border-radius:6px; border:1px solid var(--line); }
.closed-stat{ white-space:nowrap; }
.closed-stat-val{ font-weight:700; color:var(--ink); }
.closed-sep{ color:var(--line); }

/* ── Cost Control tabs (Active / Closed) ──────────────────────────────────── */
.cc-tabs{ display:flex; gap:4px; }
.cc-tab-btn{ min-height:30px; padding:4px 14px; font-size:.8rem; font-weight:650; border-radius:6px; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--ink); transition:background .12s,border-color .12s; }
.cc-tab-btn:hover{ border-color:#b8ae9f; background:var(--bg); }
.cc-tab-btn.active{ background:var(--green); border-color:var(--green); color:#fff; }

/* ── Shipment Active / Closed tab bar ───────────────────────────────────── */
.ship-tab-inline{ display:flex; gap:4px; margin-left:auto; margin-right:6px; }
/* Persistent header row: "Shipment Overview" on the left, tabs on the right */
.ship-tab-header{ display:flex; align-items:center; gap:12px; margin-top:10px; margin-bottom:12px; }


/* ── Expected Shipment Costs — tfoot totals row ────────────────────────── */
.expected-cost-tfoot td{
  border-top:2px solid var(--line); background:var(--bg);
  padding:6px 8px; font-size:.78rem;
}
.tfoot-label{ font-weight:750; color:var(--ink); white-space:nowrap; }
.tfoot-count{ display:block; font-size:.68rem; font-weight:500; color:var(--muted); margin-top:1px; }
.tfoot-val{ font-weight:750; color:var(--ink); display:block; font-size:.78rem; }
/* ── Financial Summary additions ─────────────────────────────────────────── */
.fin-cash-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0; }
@media(max-width:640px){ .fin-cash-grid{ grid-template-columns:1fr; } }
.fin-cash-card{ padding:14px 16px; border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-tertiary); background:var(--color-background-primary); }
.fin-cash--in{ border-color:#97C459; background:#EAF3DE; }
.fin-cash--out{ border-color:#F09595; background:#FCEBEB; }
.fin-cash--net{ border-color:var(--color-border-secondary); }
.fin-cash--good{ border-color:#97C459; background:#EAF3DE; }
.fin-cash--bad{ border-color:#F09595; background:#FCEBEB; }
.fin-cash-label{ font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-secondary); margin-bottom:4px; }
.fin-cash-val{ font-size:1.15rem; font-weight:750; color:var(--color-text-primary); margin-bottom:3px; }
.fin-cash-sub{ font-size:11px; color:var(--color-text-secondary); }
.fin-dossier{ padding:4px 0; }
.fin-dossier-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
@media(max-width:640px){ .fin-dossier-kpis{ grid-template-columns:1fr 1fr; } }
.fin-kpi{ padding:8px 12px; border-radius:6px; background:var(--color-background-secondary); border:0.5px solid var(--color-border-tertiary); font-size:12px; }
.fin-kpi span{ display:block; color:var(--color-text-secondary); font-size:11px; margin-bottom:3px; }
.fin-kpi strong{ font-size:14px; font-weight:700; }
.fin-kpi--warn{ border-color:#FAC775; background:#FDF5E0; }
.fin-kpi--profit{ border-color:var(--color-border-secondary); }
.fin-dossier-sub{ font-size:12px; font-weight:650; color:var(--color-text-primary); margin:14px 0 6px; }
.mgmt-report-count{ font-size:12px; font-weight:400; color:var(--color-text-secondary); margin-left:8px; }


/* ── Shipment transfer buttons (Export / Import) in Shipment Overview header ── */
.ship-transfer-btns{ display:flex; gap:4px; margin-left:8px; align-items:center; }
.ship-transfer-btn{
  min-height:28px; padding:3px 10px; font-size:.74rem; font-weight:650;
  border-radius:6px; cursor:pointer; border:1px solid var(--line);
  background:var(--panel); color:var(--muted);
  transition:background .12s, border-color .12s, color .12s;
  white-space:nowrap;
}
.ship-transfer-btn:hover{ border-color:#b8ae9f; background:var(--bg); color:var(--ink); }
/* ── Financial Journal ────────────────────────────────────────────────────── */
.fj-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px; padding:10px 12px; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.fj-filter-sel{ min-height:30px; padding:3px 8px; font-size:.78rem; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); cursor:pointer; }
.fj-filter-inp{ min-height:30px; padding:3px 8px; font-size:.78rem; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); width:130px; }
.fj-filter-chk{ font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap; }

.fj-totals-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-bottom:10px; }
.fj-total-card{ background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:8px 12px; }
.fj-total-card.fj-total-accent{ border-color:var(--green); background:color-mix(in srgb,var(--green) 8%,var(--bg)); }
.fj-total-label{ font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px; }
.fj-total-val{ font-size:.9rem; font-weight:750; font-variant-numeric:tabular-nums; }

.fj-table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.fj-table thead th{ background:var(--bg); border-bottom:2px solid var(--line); padding:6px 8px; font-size:.72rem; font-weight:700; text-align:left; white-space:nowrap; color:var(--muted); }
.fj-table tbody td{ padding:5px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.fj-table tbody tr:last-child td{ border-bottom:none; }

.fj-row-muted td{ opacity:.65; }
.fj-row-cash-in td{ background:color-mix(in srgb,var(--green) 5%,transparent); }
.fj-row-cash-out td{ background:color-mix(in srgb,#e53935 4%,transparent); }
.fj-row-cn td{ background:color-mix(in srgb,#f59e0b 5%,transparent); }

.fj-badge{ display:inline-block; padding:2px 6px; border-radius:4px; font-size:.68rem; font-weight:700; white-space:nowrap; }
.fj-ci   { background:#e8f5e9; color:#1b5e20; }
.fj-cn   { background:#fff3e0; color:#e65100; }
.fj-cp   { background:#e3f2fd; color:#0d47a1; }
.fj-app  { background:#fce4ec; color:#880e4f; }
.fj-ap   { background:#fbe9e7; color:#bf360c; }
.fj-rev  { background:#f3e5f5; color:#4a148c; }
.fj-void { background:#eceff1; color:#546e7a; }

.fj-status-badge{ display:inline-block; margin-left:4px; padding:1px 5px; border-radius:3px; font-size:.63rem; font-weight:700; text-transform:uppercase; }
.fj-status-reversed  { background:#ede7f6; color:#4a148c; }
.fj-status-cancelled { background:#eceff1; color:#546e7a; }
.fj-status-voided    { background:#eceff1; color:#546e7a; }

.fj-date  { white-space:nowrap; font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.fj-mono  { font-family:var(--font-mono,monospace); font-size:.75rem; }
.fj-dim   { color:var(--muted); }
.fj-desc  { font-size:.76rem; color:var(--ink); max-width:200px; }
.fj-cur   { font-size:.72rem; color:var(--muted); white-space:nowrap; }
.fj-amount-cell{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fj-amount{ font-weight:600; color:var(--ink); }
.fj-pos   { color:var(--green-dark,#1a6b35); font-weight:700; }
.fj-neg   { color:var(--red,#c0392b);        font-weight:700; }

/* ══════════════════════════════════════════════════════════════════════════
   Finance Dashboard + Financial Operations (Phase 1)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────────────────────────────────── */
.fi-page-head{ padding:16px 20px 8px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.fi-page-title{ font-size:1.1rem; font-weight:800; margin:0 0 3px; color:var(--ink); }
.fi-page-desc{ font-size:.78rem; color:var(--muted); margin:0; }

/* ── Dashboard KPI grid ─────────────────────────────────────────────────── */
.fi-kpi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; padding:0 20px 16px; }
.fi-kpi{ background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:12px 14px; cursor:default; transition:box-shadow .15s; }
.fi-kpi[data-nav-finance]{ cursor:pointer; }
.fi-kpi[data-nav-finance]:hover{ box-shadow:0 2px 8px rgba(0,0,0,.08); border-color:#b8ae9f; }
.fi-kpi--good{ border-left:3px solid var(--green); }
.fi-kpi--warn{ border-left:3px solid #f59e0b; }
.fi-kpi--bad { border-left:3px solid var(--red,#c0392b); }
.fi-kpi-label{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:5px; }
.fi-kpi-value{ font-size:.95rem; font-weight:750; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.2; }
.fi-kpi-sub  { font-size:.7rem; color:var(--muted); margin-top:3px; }

/* ── Dashboard panels (overdue / urgent) ────────────────────────────────── */
.fi-dash-panels{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 20px 20px; }
@media(max-width:700px){ .fi-dash-panels{ grid-template-columns:1fr; } }
.fi-panel{ background:var(--panel); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.fi-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg); }
.fi-panel-title{ font-size:.82rem; font-weight:700; color:var(--ink); }
.fi-panel-link{ font-size:.76rem; color:var(--green-dark,#1a6b35); background:none; border:none; cursor:pointer; font-weight:600; padding:0; }
.fi-panel-link:hover{ text-decoration:underline; }
.fi-see-more{ font-size:.74rem; color:var(--muted); padding:6px 14px; margin:0; cursor:pointer; }
.fi-see-more:hover{ color:var(--ink); }
.fi-empty{ font-size:.8rem; color:var(--muted); padding:14px; margin:0; }

/* ── Urgent / overdue table inside panels ───────────────────────────────── */
.fi-urgent-table{ width:100%; border-collapse:collapse; font-size:.78rem; }
.fi-urgent-table th{ padding:5px 10px; font-size:.68rem; font-weight:700; color:var(--muted); text-align:left; border-bottom:1px solid var(--line); background:var(--bg); }
.fi-urgent-table td{ padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.fi-urgent-table tbody tr:last-child td{ border-bottom:none; }

/* ── Tab bar (Financial Operations) ─────────────────────────────────────── */
.fi-tab-bar{ display:flex; gap:4px; padding:0 20px 12px; flex-wrap:wrap; }
.fi-tab-btn{ min-height:32px; padding:5px 14px; font-size:.8rem; font-weight:650; border-radius:7px; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--ink); transition:background .12s,border-color .12s; }
.fi-tab-btn:hover{ border-color:#b8ae9f; background:var(--bg); }
.fi-tab-btn.active{ background:var(--green); border-color:var(--green); color:#fff; }
.fi-tab-body{ padding:0 20px 20px; }

/* ── Mini KPI row (inside tab content) ──────────────────────────────────── */
.fi-kpi-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.fi-mini-kpi{ background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:9px 13px; min-width:140px; }
.fi-mini-kpi--good{ border-left:3px solid var(--green); }
.fi-mini-kpi--warn{ border-left:3px solid #f59e0b; }
.fi-mini-kpi--bad { border-left:3px solid var(--red,#c0392b); }
.fi-mini-kpi-label{ font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:3px; }
.fi-mini-kpi-value{ font-size:.88rem; font-weight:750; color:var(--ink); font-variant-numeric:tabular-nums; }
.fi-mini-kpi-sub  { font-size:.68rem; color:var(--muted); margin-top:2px; }

/* ── Operations table ───────────────────────────────────────────────────── */
.fi-ops-table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.fi-ops-table thead th{ background:var(--bg); border-bottom:2px solid var(--line); padding:6px 9px; font-size:.71rem; font-weight:700; color:var(--muted); text-align:left; white-space:nowrap; }
.fi-ops-table tbody td{ padding:7px 9px; border-bottom:1px solid var(--line); vertical-align:middle; }
.fi-ops-table tbody tr:last-child td{ border-bottom:none; }
.fi-ops-table tbody tr:hover td{ background:color-mix(in srgb,var(--green) 4%,transparent); }
.fi-amount{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fi-strong{ font-weight:700; color:var(--ink); }
.fi-mono  { font-family:var(--font-mono,monospace); font-size:.75rem; }
.fi-dim   { color:var(--muted); }
.fi-sub-line{ display:block; font-size:.7rem; color:var(--muted); }

/* ── Action link button inside table ────────────────────────────────────── */
.fi-action-link{ background:none; border:1px solid var(--green); border-radius:5px; color:var(--green-dark,#1a6b35); font-size:.73rem; font-weight:650; padding:3px 8px; cursor:pointer; white-space:nowrap; }
.fi-action-link:hover{ background:var(--green); color:#fff; }

/* ── Status badges ──────────────────────────────────────────────────────── */
.fi-badge{ display:inline-block; padding:2px 7px; border-radius:4px; font-size:.69rem; font-weight:700; white-space:nowrap; }
.fi-badge--bad    { background:#fde8e8; color:#b91c1c; }
.fi-badge--warn   { background:#fff3cd; color:#92400e; }
.fi-badge--neutral{ background:var(--bg); color:var(--muted); border:1px solid var(--line); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.fi-empty-state{ padding:28px 20px; text-align:center; color:var(--muted); font-size:.84rem; }
.fi-phase-note{ border:1px dashed var(--line); border-radius:8px; }
.fi-phase-note strong{ color:var(--ink); }

/* ── Shipment Transfer (Export / Import) modal ───────────────────────────── */
.stx-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9100;display:flex;align-items:center;justify-content:center;padding:16px; }
.stx-modal  { background:var(--panel);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.22);width:min(700px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden; }
.stx-modal-head{ display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line); }
.stx-modal-title{ font-size:1rem;font-weight:800;margin:0;color:var(--ink); }
.stx-close  { background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--muted);padding:2px 6px;border-radius:4px; }
.stx-close:hover{ background:var(--bg);color:var(--ink); }
.stx-modal-meta{ display:flex;gap:14px;padding:8px 18px;font-size:.76rem;color:var(--muted);background:var(--bg);border-bottom:1px solid var(--line); }
.stx-mode-row{ padding:12px 18px;border-bottom:1px solid var(--line); }
.stx-mode-label{ font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:block;margin-bottom:6px; }
.stx-mode-btns{ display:flex;flex-wrap:wrap;gap:6px; }
.stx-mode-btn{ min-height:30px;padding:4px 12px;font-size:.78rem;font-weight:650;border-radius:6px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink);transition:background .1s; }
.stx-mode-btn:hover,.stx-mode-btn.active{ background:var(--green);border-color:var(--green);color:#fff; }
.stx-mode-danger{ border-color:#f87171; }
.stx-mode-danger:hover,.stx-mode-danger.active{ background:#ef4444;border-color:#ef4444;color:#fff; }
#shipImportPreview{ flex:1;overflow-y:auto;padding:10px 18px; }
.stx-summary{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px; }
.stx-pill   { display:inline-block;padding:3px 8px;border-radius:4px;font-size:.72rem;font-weight:700;white-space:nowrap; }
.stx-add    { background:#dcfce7;color:#166534; }
.stx-upd    { background:#dbeafe;color:#1e40af; }
.stx-skip   { background:#f3f4f6;color:#6b7280; }
.stx-warn   { background:#fef3c7;color:#92400e; }
.stx-table  { width:100%;border-collapse:collapse;font-size:.78rem; }
.stx-table thead th{ background:var(--bg);border-bottom:2px solid var(--line);padding:5px 8px;font-size:.7rem;font-weight:700;color:var(--muted);text-align:left;white-space:nowrap;position:sticky;top:0; }
.stx-table tbody td{ padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:middle; }
.stx-table tbody tr:last-child td{ border-bottom:none; }
.stx-ref    { font-family:var(--font-mono,monospace);font-size:.74rem; }
.stx-more-note{ font-size:.73rem;color:var(--muted);margin:4px 0 0;text-align:right; }
.stx-modal-foot{ display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:var(--bg); }
.stx-cancel { min-height:32px;padding:5px 14px;font-size:.82rem;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer; }
.stx-cancel:hover{ background:var(--bg); }
.stx-confirm{ min-height:32px;padding:5px 16px;font-size:.82rem;font-weight:700;border-radius:6px;border:none;background:var(--green);color:#fff;cursor:pointer; }
.stx-confirm:hover{ filter:brightness(1.08); }

/* ── Finance module sub-groups (Phase 4 nav reorganization) ─────────────────
   .mod-sub-group  — collapsible sub-section inside a mod-group
   .mod-sub-title  — the clickable header that toggles the sub-group
   .mod-sub-items  — the indented list of items inside the sub-group
   .mod-future     — future/upcoming item (disabled, no hover)
   ──────────────────────────────────────────────────────────────────────────── */
.mod-sub-group { border-top:1px solid var(--line); margin-top:1px; }
.mod-sub-group:first-child { border-top:none; }
.mod-sub-title {
  display:flex; align-items:center; gap:6px;
  width:100%; background:none; border:none; cursor:pointer;
  padding:5px 10px 3px; text-align:left;
  font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted);
  transition:color .12s;
}
.mod-sub-title:hover { color:var(--ink); }
.mod-sub-title .mod-sub-caret { font-size:.6rem; margin-left:auto; transition:transform .15s; }
.mod-sub-title[aria-expanded="true"] .mod-sub-caret { transform:rotate(90deg); }
.mod-sub-items { padding-bottom:2px; }
.mod-sub-items .tb-menu-item { padding-left:22px; }
.mod-future {
  display:flex; align-items:center; gap:8px;
  padding:5px 10px 5px 22px;
  font-size:.80rem; color:var(--muted);
  cursor:default; opacity:.55;
  user-select:none;
}
.mod-future .tb-menu-ico { font-size:.85rem; width:20px; text-align:center; flex-shrink:0; }

/* ── Cloud sync indicator (Phase 2B Step 5) ─────────────────────────────── */
.cloud-sync-indicator {
  font-size: .72rem;
  white-space: nowrap;
  line-height: 1.2;
  display: inline-block;
  transition: color .3s, opacity .3s;
}
/* Empty = cloud disabled = invisible (no width taken) */
.cloud-sync-indicator:empty { display: none; }

.cloud-sync-synced  { color: var(--green-dark, #1a7a4a); }
.cloud-sync-syncing { color: var(--muted); opacity: .8; animation: cloud-pulse .9s ease-in-out infinite; }
.cloud-sync-pending { color: var(--amber-dark, #8a6200); }
.cloud-sync-offline { color: var(--muted); }
.cloud-sync-error   { color: var(--red, #c0392b); }

@keyframes cloud-pulse {
  0%,100% { opacity: .8; }
  50%      { opacity: .4; }
}

/* ── Sync Diagnostics Panel (Phase 2B Step 6) ──────────────────────────── */
.sync-diag-section {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.sync-diag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
.sync-diag-row:last-child { border-bottom: none; }
.sync-diag-label { color: var(--muted); font-size: .78rem; }
.sync-diag-heading {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sync-diag-count {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 700;
  background: var(--muted);
  color: #fff;
}
.sync-diag-count.active { background: var(--amber-dark, #8a6200); }
.sync-diag-count.error  { background: var(--red, #c0392b); }
.sync-diag-empty { font-size: .8rem; color: var(--muted); margin: 4px 0 10px; }
.sync-diag-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 10px;
}
.sync-diag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.sync-diag-table th {
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sync-diag-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.sync-diag-table tr:last-child td { border-bottom: none; }
.sync-diag-table tr:hover td { background: var(--bg); }

/* .cloud-only elements are hidden when cloud is disabled */
.cloud-only { display: none; }
body.cloud-active .cloud-only { display: flex; }
button.cloud-only { display: none; }
body.cloud-active button.cloud-only { display: block; }

/* ── Skip-to-content link (Phase 2B Step 7 – accessibility) ──────────────── */
.skip-to-content {
  position: absolute;
  top: -48px;
  left: 8px;
  padding: 8px 16px;
  background: var(--accent, #185fa5);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  z-index: 10000;
  transition: top .15s;
}
.skip-to-content:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }