* { box-sizing: border-box; }
:root {
  --navy: #1B2C9B;
  --navy-dark: #141f72;
  --purple: #5C3D96;
  --purple-bg: #ece4f7;
  --green: #1a8c5b;
  --green-bg: #e3f5ed;
  --red: #c0392b;
  --red-bg: #fdecea;
  --amber: #c47b0b;
  --amber-bg: #fef3dc;
  --ink: #2c3356;
  --ink-soft: #5a6282;
  --ink-faint: #9299b8;
  --border: #dde0ec;
  --bg: #f7f8fc;
  --navy-bg: #e4e7f8;
}
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--navy); }
a:hover { color: var(--navy-dark); }

/* ---------- Auth pages (no sidebar) ---------- */
.icp-auth-main {
  display: grid;
  grid-template-columns: minmax(340px, 40%) 1fr;
  min-height: 100vh;
  background: #ffffff;
}
.icp-auth-brand {
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,0.16), transparent 45%),
    linear-gradient(160deg, #16217a 0%, var(--navy) 45%, var(--purple) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 5.5em 4.5em 3em;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.icp-auth-brand::after {
  content: '';
  position: absolute;
  right: -18%;
  bottom: -22%;
  width: 60%;
  padding-bottom: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
  pointer-events: none;
}
.icp-brand-map {
  position: absolute;
  inset: 0;
  background-image: url('brand-globe.png');
  background-size: cover;
  background-position: center 78%;
  background-repeat: no-repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 30%, black 55%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 30%, black 55%);
}
.icp-auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,33,122,0.62) 0%, rgba(22,33,122,0.68) 25%, rgba(22,33,122,0.74) 45%, rgba(22,33,122,0.86) 65%, #16217a 90%, #16217a 100%);
  z-index: 0;
  pointer-events: none;
}
.icp-brand-blob {
  position: absolute;
  background-image: radial-gradient(rgba(255,255,255,0.42) 1px, transparent 1.6px);
  background-size: 9px 9px;
  opacity: 0.55;
}
.icp-brand-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.icp-brand-routes path {
  fill: none;
  stroke: rgba(196, 181, 253, 0.55);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  animation: icp-route-flow 3.5s linear infinite;
}
@keyframes icp-route-flow { to { stroke-dashoffset: -72; } }
.icp-brand-pin {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c4b5fd;
  transform: translate(-50%, -50%);
  animation: icp-pin-pulse 2.4s ease-out infinite;
}
@keyframes icp-pin-pulse {
  0% { box-shadow: 0 0 0 0 rgba(196, 181, 253, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(196, 181, 253, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 181, 253, 0); }
}
.icp-auth-brand-content { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.icp-auth-brand-logo-badge { display: inline-flex; align-items: center; background: #fff; padding: 16px 22px; border-radius: 14px; margin-bottom: 2.6em; align-self: flex-start; }
.icp-auth-brand-logo-badge img { height: 48px; width: auto; display: block; }
.icp-auth-brand h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 auto 0.55em;
  max-width: 560px;
  text-align: center;
}
.icp-auth-brand-title { display: block; font-size: clamp(1.6em, 8.5cqw, 2.7em); white-space: nowrap; }
.icp-auth-brand-accent { display: block; color: #c4b5fd; font-size: clamp(1.15em, 5.4cqw, 1.7em); white-space: nowrap; margin-top: 0.2em; }
.icp-auth-brand p { font-size: 1.1em; line-height: 1.55; font-weight: 400; color: rgba(255,255,255,0.8); max-width: 400px; margin: auto 0 0; }
.icp-auth-brand-lead { font-size: 1.2em; line-height: 1.5; font-weight: 500; color: rgba(255,255,255,0.88); max-width: 460px; margin: 0 auto 2em; text-align: center; }
.icp-auth-brand-list { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.5em; }
.icp-auth-brand-list li {
  display: flex;
  align-items: center;
  gap: 1.1em;
}
.icp-auth-brand-item-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.icp-auth-brand-item-text strong { font-size: 1.25em; font-weight: 700; color: #fff; }
.icp-auth-brand-item-text small { font-size: 1em; font-weight: 400; color: rgba(255,255,255,0.68); }
.icp-auth-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
}
.icp-auth-brand-icon svg { width: 19px; height: 19px; color: #fff; }
.icp-brand-footer {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 1.6em;
  padding-top: 2em;
  color: rgba(255,255,255,0.65);
  font-size: 0.85em;
  font-weight: 600;
}
.icp-brand-footer svg { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255,255,255,0.7); }
.icp-auth-form-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 7em 2.5em 3em;
}
.icp-card {
  background: #fff;
  padding: 0;
  max-width: 440px;
  width: 100%;
}
.icp-card-logo { display: block; height: 88px; width: auto; max-width: 380px; margin: 0 0 3.2em; object-fit: contain; }
.icp-card h1 { margin-top: 0; margin-bottom: 0.3em; font-size: 1.2em; font-weight: 600; color: var(--ink); text-align: left; }
.icp-card-sub { text-align: left; font-size: 1em; color: var(--ink-soft); margin: 0 0 2em; }
.icp-card form p { margin-bottom: 1em; }
.icp-card label { display: block; font-weight: 600; margin-bottom: 0.5em; font-size: 0.88em; color: var(--ink-soft); }
.icp-card-forgot-row { display: flex; justify-content: flex-end; margin-top: -0.9em; margin-bottom: 1.5em; }
.icp-card-forgot { font-size: 0.85em; font-weight: 600; text-decoration: none; }
.icp-card input[type="text"],
.icp-card input[type="email"],
.icp-card input[type="password"] {
  width: 100%;
  padding: 0.85em 1em;
  margin-bottom: 1.3em;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1.05em;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.icp-card input:focus { border-color: var(--navy); }
.icp-card button {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 0.9em 1.4em;
  border-radius: 8px;
  font-size: 1.05em;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  transition: background 0.15s;
  margin-top: 0.4em;
}
.icp-card button:hover { background: var(--navy-dark); }
.icp-help { font-size: 0.92em; color: var(--ink-faint); text-align: left; margin-top: 1.6em; }
.icp-help-center { text-align: center; }
.icp-help a { font-weight: 600; text-decoration: none; }
.icp-auth-contact-below { font-size: 0.92em; color: var(--ink-faint); text-align: left; margin-top: 0.8em; }
.icp-auth-contact-below a { font-weight: 600; text-decoration: none; }
.icp-notice { padding: 0.8em 1em; border-radius: 8px; margin-bottom: 1.3em; font-size: 0.92em; }
.icp-notice-error { background: var(--red-bg); color: var(--red); }
.icp-notice-success { background: var(--green-bg); color: var(--green); }

@media (max-width: 860px) {
  .icp-auth-main { grid-template-columns: 1fr; }
  .icp-auth-brand { display: none; }
  .icp-auth-form-panel { padding: 24px; }
}

.icp-auth-loading {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  background: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--ink);
}
.icp-atom { width: 100px; height: 100px; position: relative; margin-bottom: 30px; }
.icp-atom-orbit {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(27, 44, 155, 0.35);
  border-radius: 50%;
  transform: rotate(var(--tilt)) scaleY(0.42);
  animation: icp-atom-spin 1.8s linear infinite;
}
.icp-atom-orbit-dot {
  position: absolute;
  inset: 0;
  transform: rotate(var(--tilt));
  pointer-events: none;
}
.icp-atom-orbit-dot-path {
  position: absolute;
  inset: 0;
  animation: icp-orbit-dot-path 1.8s linear infinite;
}
.icp-atom-orbit-dot-path::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 250, 1) 0%, rgba(167, 139, 250, 0.7) 45%, transparent 75%);
  box-shadow: 0 0 3px 1px rgba(167, 139, 250, 0.85);
}
.icp-atom-orbit-dot-2 .icp-atom-orbit-dot-path { animation-duration: 2.3s; animation-direction: reverse; }
.icp-atom-orbit-dot-3 .icp-atom-orbit-dot-path { animation-duration: 2.9s; }
/* Pure translate keyframes (no scale) so the dot itself is never squished —
   it just moves along the ring's ellipse (radius 50% horizontal, 21%
   vertical, matching the ring's own scaleY(0.42)). Percentages here resolve
   against this element's own box, which is the same size as the ring
   (inset:0 on both) — then the parent's static rotate(var(--tilt)) tilts
   the whole path the same way the ring is tilted, keeping the dot on it. */
@keyframes icp-orbit-dot-path {
  0%   { transform: translate(50%, 0); }
  8.33%  { transform: translate(43.3%, 10.5%); }
  16.67% { transform: translate(25%, 18.19%); }
  25%  { transform: translate(0, 21%); }
  33.33% { transform: translate(-25%, 18.19%); }
  41.67% { transform: translate(-43.3%, 10.5%); }
  50%  { transform: translate(-50%, 0); }
  58.33% { transform: translate(-43.3%, -10.5%); }
  66.67% { transform: translate(-25%, -18.19%); }
  75%  { transform: translate(0, -21%); }
  83.33% { transform: translate(25%, -18.19%); }
  91.67% { transform: translate(43.3%, -10.5%); }
  100% { transform: translate(50%, 0); }
}
.icp-atom-orbit:nth-child(2) { animation-duration: 2.3s; animation-direction: reverse; }
.icp-atom-orbit:nth-child(3) { animation-duration: 2.9s; }
.icp-atom-nucleus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px;
  background: linear-gradient(160deg, var(--navy), var(--purple));
  border-radius: 50%;
  animation: icp-nucleus-pulse 1.5s ease-in-out infinite;
}
@keyframes icp-atom-spin {
  from { transform: rotate(var(--tilt)) scaleY(0.42) rotate(0deg); }
  to   { transform: rotate(var(--tilt)) scaleY(0.42) rotate(360deg); }
}
@keyframes icp-nucleus-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(27, 44, 155, 0.35); }
  50% { transform: scale(1.3); box-shadow: 0 0 24px rgba(27, 44, 155, 0.6); }
}
.icp-auth-loading-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  animation: icp-loading-text-fade 1.6s ease-in-out infinite;
}
@keyframes icp-loading-text-fade {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ---------- Portal shell (sidebar + content) ---------- */
.icp-shell { display: flex; min-height: 100vh; }
.icp-sidebar {
  width: 248px;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--navy) 0%, var(--purple) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}
.icp-sidebar-logo {
  padding: 6px 4px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icp-sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.icp-sidebar nav a {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.icp-sidebar nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.icp-sidebar nav a.active { background: rgba(255,255,255,0.16); font-weight: 600; color: #fff; }
.icp-sidebar-welcome-top {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  padding: 0 4px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  word-break: break-word;
}
.icp-sidebar-footer { padding: 14px 4px 0; margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.15); }
.icp-sidebar-user {
  opacity: 0.85;
  margin-bottom: 10px;
  word-break: break-all;
  font-size: 12px;
}
.icp-sidebar-footer a {
  display: block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  transition: background 0.12s;
}
.icp-sidebar-footer a:hover { background: rgba(255,255,255,0.22); }

.icp-content { flex: 1; padding: 32px 36px; max-width: 1400px; position: relative; min-width: 0; }
/* Table pages use the whole screen: on a wide monitor the 1400px cap left a
   third of the screen empty while the table scrolled sideways. Text pages keep
   the cap — long lines of prose are harder to read, wide tables are not. */
.icp-content:has(.icp-table-scroll) { max-width: none; }
/* …but the banner artwork stays at its designed size rather than growing
   to 2000px wide and pushing the table below the fold. */
.icp-content:has(.icp-table-scroll) .icp-event { max-width: 1330px; }

.icp-content-loading {
  position: absolute;
  inset: 0;
  /* Covers the viewport, not just the content box: on a long table the content
     box is many screens tall, so an inset overlay would only cover the top. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(247, 248, 252, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.icp-content-loading .icp-atom { width: 64px; height: 64px; margin-bottom: 20px; }
.icp-content-loading-text { font-size: 14px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.01em; }

.icp-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--navy), var(--purple));
  opacity: 0;
  z-index: 300;
}
.icp-progress-bar.icp-progress-active { opacity: 1; width: 80%; transition: width 4s cubic-bezier(0.1, 0.7, 0.3, 1), opacity 0.2s; }

.icp-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 60, 0.55);
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.icp-modal-overlay.icp-modal-open { display: flex; }
.icp-modal {
  background: #fff;
  border-radius: 12px;
  width: min(760px, 100%);
  height: min(820px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 14, 40, 0.35);
}
.icp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.icp-modal-title { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.icp-modal-actions { display: flex; align-items: center; gap: 16px; }
.icp-modal-link { font-size: 13px; font-weight: 600; text-decoration: none; }
.icp-modal-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.icp-modal-close:hover { color: var(--ink); }
/* The order form window. Wide enough for the form's two-column layout and as
   tall as the screen allows, so far less of the form sits below the fold.
   The width is FIXED on desktop (not a percentage) because the padlock over
   the locked fields is positioned for one exact width — /admin/forms-lock
   previews at this same 1000px. */
#icp-form-modal .icp-modal { width: min(1000px, 100%); height: 100%; }
.icp-modal iframe { flex: 1; width: 100%; border: 0; }
.icp-modal-iframe-wrap {
  position: relative;
  flex: 1;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.icp-modal-iframe-wrap iframe {
  width: calc(100% - 14px);
  height: 4200px; /* fixed & generous: the WRAP scrolls, not the iframe, so the lock box (and this scrollbar/these buttons) track the form correctly */
  border: 0;
  display: block;
}
.icp-modal-scroll-btn { display: none; }
.icp-modal-lock-overlay {
  display: none;
  position: absolute;
  top: var(--icp-lock-top, 120px);
  left: 0;
  width: 100%;
  height: var(--icp-lock-height, 76px);
  background: rgba(255, 255, 255, 0.01);
  cursor: not-allowed;
  z-index: 40;
}
.icp-modal-lock-overlay.icp-modal-lock-visible { display: block; }
.icp-modal-lock-overlay .icp-modal-lock-icon {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 13px;
  opacity: 0.55;
  pointer-events: none;
}
.icp-modal-lock-overlay.icp-modal-lock-adjusting {
  background: rgba(27, 44, 155, 0.16);
  border: 2px dashed var(--navy);
  cursor: move;
}
.icp-modal-lock-handle {
  display: none;
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--navy);
  cursor: ns-resize;
}
.icp-modal-lock-overlay.icp-modal-lock-adjusting .icp-modal-lock-handle { display: block; }
.icp-modal-adjust-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--navy-bg);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink);
}
.icp-modal-adjust-bar.icp-modal-adjust-bar-visible { display: flex; }
.icp-modal-adjust-bar span { flex: 1; }
.icp-modal-adjust-bar button {
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
#icp-form-modal-adjust-save { background: var(--navy); color: #fff; }
#icp-form-modal-adjust-cancel { background: transparent; color: var(--ink-soft); }
.icp-content h1 {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.icp-customer-picker { margin: 0 0 20px; max-width: 420px; }
.icp-customer-picker label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 12px; color: var(--ink-soft); }
.icp-customer-picker select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.icp-customer-picker select:focus { border-color: var(--navy); }
.icp-customer-single-value {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-weight: 600;
  font-size: 13.5px;
}

.icp-count { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 12px; }

.icp-table-scroll {
  overflow: auto;
  max-height: 70vh;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(27,44,155,0.06);
}
.icp-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.icp-orders-table th, .icp-orders-table td {
  padding: 15px 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #eef0f6;
}
.icp-orders-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
  transition: color 0.12s;
}
.icp-orders-table th:hover { color: var(--navy); background: #fff; }
.icp-th-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  border-radius: 50%;
  background: rgba(146, 153, 184, 0.18);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  position: relative;
}
.icp-th-tooltip {
  display: none;
  /* The header row is uppercase with wide tracking; a sentence of prose must
     not inherit that, and must not be clipped by the column's own width. */
  text-transform: none;
  letter-spacing: normal;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  width: 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(27,44,155,0.18);
  padding: 14px 16px;
  text-align: left;
  z-index: 20;
  white-space: normal;
}
.icp-th-info:hover .icp-th-tooltip, .icp-th-info:focus .icp-th-tooltip { display: block; }
.icp-th-tooltip dt { font-weight: 700; font-size: 12px; color: var(--ink); margin-top: 10px; }
.icp-th-tooltip dt:first-child { margin-top: 0; }
.icp-th-tooltip dd:first-child { margin-top: 0; }
/* Columns clip their contents for resizing, which would cut the tooltip off —
   release that only while the badge is actually hovered. */
.icp-orders-table th:has(.icp-th-info:hover) { overflow: visible; }
.icp-th-tooltip dd { margin: 2px 0 0; font-size: 12px; font-weight: 400; color: var(--ink-soft); line-height: 1.4; }
.icp-sort-arrow { display: inline-block; width: 12px; font-size: 10px; color: var(--navy); }
.icp-col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
  z-index: 2;
}
.icp-col-resize-handle:hover, .icp-col-resize-handle.icp-col-resize-active {
  background: rgba(27, 44, 155, 0.25);
}

.icp-msel { position: relative; }
.icp-msel-btn {
  padding: 9px 30px 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239299b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  cursor: pointer;
  color: var(--ink);
  min-width: 140px;
  text-align: left;
}
.icp-msel-btn:hover { border-color: var(--navy); }
.icp-msel-btn-active { border-color: var(--navy); background-color: #eef0fb; font-weight: 600; }
.icp-msel-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(27,44,155,0.14);
  padding: 6px;
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
}
.icp-msel-panel-open { display: block; }
.icp-msel-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; border-radius: 6px; cursor: pointer; }
.icp-msel-opt:hover { background: var(--bg); }
.icp-msel-opt input { margin: 0; cursor: pointer; }

.icp-sum-row td {
  font-weight: 700;
  color: var(--ink);
  background: var(--bg);
  border-top: 2px solid var(--border);
}
.icp-orders-table tr:last-child td { border-bottom: none; }
.icp-orders-table tbody tr:nth-child(even) td { background: #fcfbfe; }
.icp-orders-table tbody tr td { transition: background 0.12s; }
.icp-orders-table tbody tr:hover td { background: var(--navy-bg); }
.icp-orders-table td.icp-row-action { padding: 8px 12px; white-space: nowrap; }

/* Denser horizontally: 20px side padding × ~12 columns was ~480px of padding
   alone. Vertical rhythm is unchanged. */
.icp-orders-table th, .icp-orders-table td { padding-left: 14px; padding-right: 14px; }
/* Short values never wrap; long ones (customer, catalogue) get a sensible
   minimum instead of collapsing to three or four lines. */
.icp-orders-table td { white-space: nowrap; }
.icp-orders-table td.icp-col-customer { white-space: normal; min-width: 220px; max-width: 280px; }

/* Pinned columns: the action button and, on "All relevant customers", the
   customer name stay put while the rest scrolls sideways — so a row is always
   identifiable without scrolling back. */
.icp-table-pinned th:first-child,
.icp-table-pinned td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 136px;
  min-width: 136px;
  background: #fff;
}
.icp-table-pinned-2 .icp-col-customer {
  position: sticky;
  left: 136px;
  z-index: 2;
  background: #fff;
}
.icp-table-pinned th:first-child,
.icp-table-pinned-2 th.icp-col-customer { z-index: 4; }
/* Edge shadow on the last pinned column, so it reads as lying over the rest. */
.icp-table-pinned:not(.icp-table-pinned-2) td:first-child,
.icp-table-pinned:not(.icp-table-pinned-2) th:first-child,
.icp-table-pinned-2 .icp-col-customer { box-shadow: 6px 0 8px -6px rgba(27, 44, 155, 0.18); }
.icp-table-pinned tbody tr:nth-child(even) td:first-child,
.icp-table-pinned-2 tbody tr:nth-child(even) td.icp-col-customer { background: #fcfbfe; }
.icp-table-pinned tbody tr:hover td:first-child,
.icp-table-pinned-2 tbody tr:hover td.icp-col-customer { background: var(--navy-bg); }

@media (max-width: 820px) {
  /* On a phone two pinned columns would take most of the screen. */
  .icp-table-pinned-2 .icp-col-customer { position: static; box-shadow: none; }
  .icp-table-pinned-2 td:first-child, .icp-table-pinned-2 th:first-child { box-shadow: 6px 0 8px -6px rgba(27, 44, 155, 0.18); }
}

.icp-filter-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.icp-filter-bar input[type="text"] {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  min-width: 240px;
  outline: none;
}
.icp-filter-bar input[type="text"]:focus { border-color: var(--navy); }
.icp-filter-bar { opacity: 0; transition: opacity 0.18s ease; }
.icp-filter-bar.icp-filter-ready { opacity: 1; }
/* Hide the whole content area (table + filters together) until the filter
   bar has finished building, so the table never appears first with filters
   popping in a beat later — both fade in together. Only applies to pages
   that actually have a filter bar; other pages render immediately. */
/* Hides the CHILDREN, never .icp-content itself: the loading atom lives inside
   .icp-content, so fading the parent to 0 made the loader invisible too — the
   page just looked blank while the table built. */
.icp-content:has([data-filter-table]):not(.icp-content-ready) > :not(.icp-content-loading):not(script) { opacity: 0; }
.icp-content.icp-content-ready > * { opacity: 1; transition: opacity 0.18s ease; }
.icp-btn-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: icp-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 7px;
}
@keyframes icp-spin { to { transform: rotate(360deg); } }
.icp-filter-bar select {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.icp-filter-bar .icp-count { margin: 0 0 0 auto; }

.icp-nav-toggle { display: none; }

.icp-contact-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--navy), var(--purple));
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(27, 44, 155, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.icp-contact-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(27, 44, 155, 0.45); }
.icp-contact-fab-icon { font-size: 16px; line-height: 1; }
@media (max-width: 820px) {
  .icp-contact-fab { right: 16px; bottom: 16px; padding: 12px 14px; }
  .icp-contact-fab-label { display: none; }
}

@media (max-width: 820px) {
  .icp-modal-overlay { padding: 0; }
  .icp-modal { width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
  .icp-modal-iframe-wrap iframe { height: 5000px; }
  .icp-modal-link { display: none; }
}

@media (max-width: 820px) {
  .icp-shell { flex-direction: column; }
  .icp-nav-toggle {
    display: block;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--navy);
    color: #fff;
    border: none;
    padding: 14px 18px;
    font-size: 18px;
    text-align: left;
    width: 100%;
    cursor: pointer;
  }
  .icp-sidebar { display: none; width: 100%; }
  .icp-sidebar.icp-sidebar-open { display: flex; }
  .icp-content { padding: 20px; }
}

.icp-btn-row {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--red-bg);
  color: var(--red);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.icp-btn-row:hover { background: var(--red); color: #fff; }


.icp-guidelines {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(27,44,155,0.06);
  padding: 22px 24px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 900px;
}
.icp-guidelines p { margin: 0 0 12px; font-weight: 700; color: var(--ink); font-size: 13.5px; }
.icp-guidelines ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.icp-guidelines li { position: relative; padding-left: 18px; line-height: 1.5; }
.icp-guidelines li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
}

.icp-guideline-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--amber-bg);
  color: var(--amber);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
}
.icp-guideline-callout svg { flex-shrink: 0; margin-top: 1px; }

.icp-action-hero {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(27,44,155,0.09);
  max-width: 900px;
  margin-bottom: 24px;
  overflow: hidden;
}
.icp-action-hero-accent {
  height: 5px;
  background: linear-gradient(90deg, var(--navy), var(--purple));
}
.icp-action-hero-body { padding: 30px 32px 32px; }
.icp-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 10px;
}
.icp-eyebrow-spaced { margin-top: 26px; }
.icp-action-hero .icp-customer-picker { max-width: 460px; margin-bottom: 0; }
.icp-action-hero .icp-customer-picker label { display: none; }
.icp-action-hero .icp-customer-picker select,
.icp-action-hero .icp-customer-single-value {
  font-size: 15px;
  padding: 13px 16px;
  border-color: var(--navy);
  font-weight: 700;
  color: var(--navy);
}
.icp-action-hero .icp-empty { border: none; padding: 0; margin-top: 4px; }

.icp-guidelines-quiet {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 2px;
  font-size: 12.5px;
}
.icp-guidelines-quiet p { font-size: 12.5px; color: var(--ink-soft); }
.icp-guidelines-quiet li::before { width: 5px; height: 5px; background: var(--ink-faint); }

.icp-order-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.icp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  flex: 1;
  justify-content: center;
  min-width: 220px;
  transition: filter 0.12s, transform 0.12s, box-shadow 0.12s;
  font-family: inherit;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(27,44,155,0.12);
}
.icp-btn:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27,44,155,0.18); }
.icp-btn:active { transform: translateY(0); }
.icp-btn-green { background: var(--green); }
.icp-btn-red { background: var(--red); }
.icp-btn-purple { background: var(--purple); }
.icp-btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); flex: none; box-shadow: none; }
.icp-btn-outline:hover { background: var(--navy); color: #fff; }

/* The label is one flex item, not a bare text node beside the icon: when it
   wraps, the icon stays aligned to the whole block instead of to the first
   line only. The arrow lives inside the label and is glued to the last word by
   a non-breaking space, so it can never be orphaned onto a line of its own. */
.icp-btn-label { min-width: 0; text-wrap: balance; }
.icp-btn-arrow { display: inline-block; margin-left: 0.4em; }

@media (max-width: 620px) {
  /* Full-width stacked buttons — at phone width two 220px minimums can't sit
     side by side, and a half-width red button next to a wrapped green one
     reads as a layout bug. */
  .icp-order-actions { flex-direction: column; gap: 10px; }
  .icp-btn {
    width: 100%;
    flex: none;
    min-width: 0;
    /* Left-aligned so the icon, label and every wrapped line share one edge.
       Centring a wrapped label around a fixed-width icon is what made the
       pencil look detached from its text. */
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    padding: 15px 18px;
    font-size: 14.5px;
  }
  .icp-btn svg { flex: 0 0 auto; }
  .icp-btn-outline { width: 100%; }
}

.icp-mailing-grid { display: grid; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0 0 24px; max-width: 900px; }
.icp-mailing-grid > div {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(27,44,155,0.06);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}
.icp-mailing-grid h3 { font-size: 12px; font-weight: 700; color: var(--ink); margin: 0 0 10px; text-transform: none; line-height: 1.4; min-height: 2.8em; display: flex; align-items: flex-start; }
.icp-mailing-grid p {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--navy);
  font-weight: 600;
  font-size: 13px;
  word-break: break-word;
}
.icp-mailing-emails {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.icp-mailing-emails li {
  padding: 6px 12px;
  color: var(--navy);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.45;
  /* One address per row: break only at the @ or dots if a single address is
     still too long for the column, never mid-label. */
  overflow-wrap: anywhere;
}
.icp-mailing-emails li + li { border-top: 1px solid rgba(221, 224, 236, 0.7); }

.icp-doc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.icp-doc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.75em;
  transition: transform 0.1s;
}
.icp-doc-card:hover { transform: translateY(-2px); }
.icp-doc-card img {
  width: 64px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(27,44,155,0.1);
}
.icp-doc-card:hover img { border-color: var(--navy); }
.icp-doc-card span {
  margin-top: 6px;
  text-align: center;
  word-break: break-word;
  line-height: 1.25;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.icp-doc-card-noimg {
  font-size: 1.8em;
  justify-content: center;
}
.icp-doc-card-noimg span { font-size: 0.5em; }
#shipping-docs-table .icp-doc-card,
#shipping-docs-table .icp-doc-card span { color: #000; }

/* ---------- Status badges (rendered by renderCell.js) ---------- */
.icp-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.icp-badge-blue { background: #e8ebf9; color: var(--navy); }
.icp-badge-amber { background: var(--amber-bg); color: var(--amber); }
.icp-badge-purple { background: var(--purple-bg); color: var(--purple); }
.icp-badge-green { background: var(--green-bg); color: var(--green); }
.icp-badge-red { background: var(--red-bg); color: var(--red); }
.icp-badge-gray { background: #eef0f6; color: var(--ink-soft); }

.icp-empty {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  color: var(--ink-soft);
  font-size: 13.5px;
  max-width: 700px;
}

.icp-service-card {
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(27,44,155,0.06);
}
.icp-service-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--purple-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 20px;
}
.icp-service-card p { color: var(--ink-soft); line-height: 1.6; }
.icp-service-card form { max-width: 480px; }
.icp-service-card label { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; }
.icp-service-card textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.icp-service-card textarea:focus { border-color: var(--purple); }
.icp-service-fallback { font-size: 12.5px; margin-top: 14px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Account manager. Set off from the form by a rule rather than a box — it is
   the secondary route, and a second card would compete with the form. The name
   and address are one stacked unit beside the avatar, not a label at one end of
   a wide row and an address at the other: a person reads as a person only when
   their details sit together. */
.icp-am { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.icp-am-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.icp-am-person { display: flex; align-items: center; gap: 12px; }
.icp-am-person + .icp-am-person { margin-top: 12px; }
.icp-am-avatar {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy-bg);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.icp-am-id { min-width: 0; }
.icp-am-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.icp-am-reach { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.icp-am-email { font-size: 13px; word-break: break-all; }

@media (max-width: 480px) {
  /* The avatar is decoration; at phone width the address needs the whole line. */
  .icp-am-person { gap: 10px; align-items: flex-start; }
  .icp-am-avatar { width: 32px; height: 32px; font-size: 12px; }
}
.icp-copy-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
}
.icp-copy-btn:hover { border-color: var(--purple); color: var(--purple); }

/* ── Congress / exhibition invitation ─────────────────────────────────────── */

.icp-event {
  margin: 0 0 18px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(27, 44, 155, 0.06);
}
.icp-event-art { display: block; line-height: 0; }
.icp-event-art img { display: block; width: 100%; height: auto; }
/* The artwork is the primary click target, so it has to read as one. */
.icp-event-art-button { width: 100%; padding: 0; border: none; background: none; cursor: pointer; font: inherit; }
.icp-event-art:hover img { filter: saturate(1.06) brightness(1.02); }
.icp-event-art:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }

/* The strip's own typography is baked in at ~7:1, so it stops being legible
   well before phone width. Below the breakpoint the artwork is dropped and the
   same information is rebuilt from the Airtable fields as real text. */
.icp-event-fallback { display: none; padding: 16px 18px 0; }
.icp-event-fallback-title { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.icp-event-fallback-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.icp-event-fallback-booth { font-size: 13px; font-weight: 700; color: var(--purple); margin-top: 6px; }

.icp-event-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px 11px 16px;
  border-top: 1px solid var(--border);
  background: #fbfbfe;
}
.icp-event-status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 20px;
}
.icp-event-status-live { background: var(--green-bg); color: #13724a; }
.icp-event-status-soon { background: var(--amber-bg); color: #9a5f06; }
.icp-event-status-upcoming { background: var(--navy-bg); color: var(--navy); }
.icp-event-status-past { background: #eef0f6; color: var(--ink-soft); }
.icp-event-meta { font-size: 13px; color: var(--ink-soft); min-width: 0; }
.icp-event-meta strong { color: var(--ink); font-weight: 700; }
.icp-event-programme { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.icp-event-programme:hover { color: var(--navy); text-decoration: underline; }
.icp-event-spacer { flex: 1 1 auto; }
.icp-event-cta {
  flex: 0 0 auto;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 20px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.icp-event-cta:hover { background: var(--navy-dark); color: #fff; }
.icp-event-dismiss {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  color: var(--ink-faint); font-size: 14px; line-height: 1;
  padding: 6px;
}
.icp-event-dismiss:hover { color: var(--ink-soft); }

/* Login brand panel: artwork only, no CTA — there is no customer yet. */
.icp-event-compact { margin: 22px 0 0; border: none; box-shadow: none; background: transparent; border-radius: 10px; }
.icp-event-compact .icp-event-art img { border-radius: 10px; }

@media (max-width: 760px) {
  .icp-event-art { display: none; }
  .icp-event-fallback { display: block; cursor: pointer; }
  .icp-event-fallback + .icp-event-bar { border-top: none; background: transparent; padding-top: 12px; }
  .icp-event-bar { padding-bottom: 14px; }
  .icp-event-cta { flex: 1 1 auto; text-align: center; }
}

/* ── Sidebar pill: the invitation's permanent home ────────────────────────── */
.icp-sidebar-event {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 24px);
  margin: 14px 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.icp-sidebar-event:hover { background: rgba(255, 255, 255, 0.14); }
.icp-sidebar-event-dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: #6ee7a8; box-shadow: 0 0 0 3px rgba(110, 231, 168, 0.2);
}
.icp-sidebar-event-text { display: block; min-width: 0; line-height: 1.3; }
.icp-sidebar-event-text small { display: block; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.65); margin-top: 2px; }

/* ── Meeting request form ────────────────────────────────────────────────── */
.icp-event-form { padding: 18px 22px 22px; }
.icp-event-form-lede { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.icp-event-form-row { margin-bottom: 14px; }
.icp-event-form-row label { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; }
.icp-event-form-optional { font-weight: 500; color: var(--ink-faint); }
.icp-event-form-row select,
.icp-event-form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
}
.icp-event-form-row textarea { resize: vertical; }
.icp-event-form-who { margin: 0 0 16px; font-size: 12px; color: var(--ink-faint); }
.icp-event-form-error { margin: 0 0 12px; font-size: 12.5px; color: var(--red); }
.icp-event-form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.icp-event-form-cancel { background: transparent; border: none; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 8px; cursor: pointer; }
.icp-event-form-submit { background: var(--navy); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.icp-event-form-submit:hover { background: var(--navy-dark); }
.icp-event-form-submit:disabled { opacity: 0.6; cursor: default; }

.icp-event-sent { padding: 32px 26px 28px; text-align: center; }
.icp-event-sent-mark {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--green-bg); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
}
.icp-event-sent-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.icp-event-sent-text { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 20px; }

/* ── Sales: view-only staff ─────────────────────────────────────────────── */

/* Customer portal while viewing as a customer. Order buttons stay visible —
   the point is to see what the customer sees — but read as unavailable. */
.icp-view-only a[data-form-modal],
.icp-view-only a[href*="hsforms"] { opacity: 0.45; filter: grayscale(0.5); cursor: not-allowed; }
.icp-view-only a[data-form-modal]:hover,
.icp-view-only a[href*="hsforms"]:hover { transform: none; box-shadow: none; }
.icp-view-only form[method="post"] button:disabled { opacity: 0.5; cursor: not-allowed; }
.icp-vo-bar-note { font-weight: 500; opacity: 0.8; }
@media (max-width: 820px) { .icp-vo-bar-note { display: none; } }
.icp-vo-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 300;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600;
  padding: 11px 18px; border-radius: 10px; box-shadow: 0 10px 30px rgba(10, 14, 40, 0.3);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.icp-vo-toast-show { opacity: 1; transform: translate(-50%, 0); }

/* Staff shell */
.icp-staff { margin: 0; background: var(--bg); min-height: 100vh; }
.icp-staff-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 28px; background: linear-gradient(90deg, #1B2C9B, #3b2a84);
  color: #fff; position: sticky; top: 0; z-index: 20;
}
.icp-staff-logo { height: 24px; filter: brightness(0) invert(1); }
.icp-staff-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16); padding: 4px 9px; border-radius: 20px;
}
.icp-staff-nav { display: flex; gap: 4px; }
.icp-staff-nav a {
  color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px;
}
.icp-staff-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.icp-staff-nav a.active { color: #fff; background: rgba(255, 255, 255, 0.16); }
.icp-staff-spacer { flex: 1; }
.icp-staff-user { font-size: 12.5px; color: rgba(255, 255, 255, 0.75); }
.icp-staff-logout { color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.icp-staff-logout:hover { text-decoration: underline; color: #fff; }
.icp-staff-main { padding: 32px 28px 48px; max-width: 1280px; margin: 0 auto; }
.icp-staff-h1 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 24px; color: var(--ink); margin: 0 0 6px; }
.icp-staff-lede { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; max-width: 640px; line-height: 1.55; }
.icp-staff-search { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.icp-staff-search input {
  flex: 1 1 320px; max-width: 460px; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 10px; font: inherit; font-size: 14px; background: #fff;
}
.icp-staff-search .icp-count { margin: 0; }
.icp-staff-view-btn {
  background: var(--navy); color: #fff; border: none; border-radius: 20px;
  padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.icp-staff-view-btn:hover { background: var(--navy-dark); }
.icp-staff-scope { display: flex; gap: 6px; margin-bottom: 14px; }
.icp-staff-scope a {
  font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border); background: #fff;
}
.icp-staff-scope a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.icp-staff-scope a span { opacity: 0.7; margin-left: 4px; }
.icp-orders-table td.icp-staff-topic { white-space: normal; min-width: 220px; max-width: 360px; color: var(--ink-soft); }
.icp-staff-pill { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.icp-staff-pill-amber { background: var(--amber-bg); color: #9a5f06; }
.icp-staff-pill-green { background: var(--green-bg); color: #13724a; }
.icp-staff-pill-red { background: #fde8e8; color: #a32020; }
.icp-staff-pill-navy { background: var(--navy-bg); color: var(--navy); }

/* Admin invite: account type */
.icp-role-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.icp-role-opt {
  flex: 1; display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.icp-role-opt:has(input:checked) { border-color: var(--navy); background: var(--navy-bg); }
.icp-role-opt input { margin: 0; width: auto; }