:root {
  /* Power BI CEO cockpit palette (Ameer, 2026-07-13): warm-white canvas,
     white tiles with #E9E4DE hairlines, SMC orange #F58220, charcoal #333 */
  --bg: #f4f1ed;
  --bg-accent: #eae6e1;
  --panel: #ffffff;
  --panel-soft: #f8f5f1;
  --ink: #111111; /* readability pass 2026-08-28: values jet black (was charcoal #333) */
  --muted: #3d4247; /* labels one step darker (was #6b7177) - hierarchy kept, clearly readable */
  --line: #e9e4de;
  --accent: #f58220;
  --accent-deep: #d2690e;
  --amber: #b45309;
  --orange: #c2410c;
  --green: #2e7d32;
  --red: #d32f2f;
  --focus: #f7a24d;
  --shadow: 0 4px 14px rgba(184, 178, 170, 0.35);
  --radius: 10px;
  --radius-soft: 8px;
  --font-body: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Segoe UI Semibold", "Segoe UI", "Sora", sans-serif;
  font-family: var(--font-body);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

/* ---- modern type system: Sora on display text, Inter on everything else ---- */
h1, h2, h3,
.brand-title,
.imports-head h2,
.panel-subhead,
.eyebrow,
.session-user-text strong,
#sessionUserName {
  font-family: var(--font-display);
}

/* KPI numbers: display font + tabular figures so a row of counts lines up */
.imports-metrics .metric strong,
.metrics .metric strong,
.metric strong {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

html,
body {
  margin: 0;
  min-height: 100%;
  /* Always reserve the scrollbar gutter so switching to a taller tab (e.g. Sales
     Analysis) doesn't add/remove the scrollbar and shift the page sideways. */
  scrollbar-gutter: stable;
  background:
    radial-gradient(circle at top left, rgba(245, 130, 31, 0.08), transparent 28%),
    linear-gradient(180deg, #fafafb 0%, var(--bg) 42%, #eff0f2 100%);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.is-hidden {
  display: none !important;
}

.login-shell,
.app-shell {
  min-height: 100vh;
}

.login-shell {
  padding: 32px 18px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: #14100c;
}

.login-kbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

.login-kbg.is-on {
  opacity: 1;
}

.login-koverlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.22));
}

.login-panel {
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  border-radius: 14px;
}

.login-brand {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 8px 0 20px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.login-logo {
  width: 200px;
  height: 54px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.login-title {
  margin: 4px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.login-tagline {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.login-credit {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-form {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.login-status {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  display: flex;
  align-items: center;
}

.login-status.success {
  border-color: #9de3cf;
  background: #ebfbf4;
  color: #0f5132;
}

.login-status.error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.login-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.app-shell {
  display: flex;
  flex-direction: column;
}

.topbar {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(215, 218, 221, 0.9);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  max-width: 760px;
}

.brand-mark {
  width: 172px;
  height: 46px;
  flex: 0 0 172px;
  object-fit: contain;
}

.brand-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.brand-subtitle,
.eyebrow,
label span,
.metric span,
.search span,
.side-title,
.system-pill span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.top-actions,
.form-actions,
.status-actions,
.worklist-toolbar,
.session-strip,
.scope-toggle,
.module-list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.active-user-pill {
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid #e8edf3;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(23, 37, 53, 0.04), 0 6px 16px rgba(23, 37, 53, 0.05);
  display: flex;
  align-items: center;
  gap: 10px;
}

.active-user-text {
  display: grid;
  gap: 2px;
}

.active-user-pill span {
  color: var(--muted);
  font-size: 12px;
}

.active-user-pill strong {
  font-size: 15px;
}

.avatar,
.avatar.avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}

.avatar.avatar-initials {
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
}

.avatar.avatar-lg {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.avatar.avatar-xl {
  width: 64px;
  height: 64px;
  font-size: 22px;
}

.avatar-photo {
  cursor: pointer;
}

.avatar-photo:hover {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.chat-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 55;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--accent-deep);
  background: linear-gradient(135deg, var(--accent), #e06d10);
  color: #ffffff;
  font-size: 24px;
  box-shadow: 0 10px 24px rgba(43, 46, 49, 0.25);
}

.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- WhatsApp-shaped two-pane chat: conversation list + thread ----
   cockpit colors throughout, WhatsApp in shape only */
.chat-panel {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 56;
  width: min(880px, calc(100vw - 40px));
  height: min(640px, calc(100vh - 120px));
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(43, 46, 49, 0.28);
}

.chat-close {
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--muted);
  line-height: 1;
  cursor: pointer;
}

/* left pane: searchable conversation list */
.chat-list-pane {
  flex: 0 0 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.chat-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 8px;
}

.chat-list-head strong {
  font-size: 15px;
}

.chat-list-head .chat-close {
  display: none;
}

.chat-search-wrap {
  padding: 0 10px 8px;
}

.chat-search {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
}

.chat-search:focus {
  outline: none;
  border-color: var(--accent);
}

.chat-conv-list {
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}

.chat-conv-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(233, 228, 222, 0.55);
}

.chat-conv-row:hover {
  background: var(--panel-soft);
}

.chat-conv-row.active {
  background: #f4ede4;
  box-shadow: inset 3px 0 0 var(--accent);
}

.chat-conv-avatar {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.chat-conv-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--panel);
}

.chat-group-avatar {
  background: #cdc5b9;
}

.chat-conv-main {
  flex: 1;
  min-width: 0;
}

.chat-conv-top,
.chat-conv-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-conv-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conv-time {
  font-size: 10.5px;
  color: var(--muted);
  flex: 0 0 auto;
}

.chat-conv-time.has-unread {
  color: var(--accent-deep);
  font-weight: 700;
}

.chat-conv-preview {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conv-preview.is-empty {
  font-style: italic;
  opacity: 0.75;
}

/* unread rows read like WhatsApp: bold name, bold preview, orange pill */
.chat-conv-row.has-unread .chat-conv-name {
  font-weight: 700;
}

.chat-conv-row.has-unread .chat-conv-preview {
  color: var(--ink);
  font-weight: 600;
}

.chat-conv-unread {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* oversight: read-only conversations a manager/superuser may observe */
.chat-conv-section {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 12px 5px;
  background: #efe9e0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.chat-conv-row.is-oversight .chat-conv-name {
  font-weight: 500;
}

.chat-oversight-avatar {
  background: #a9a196;
}

.chat-oversight-banner {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid #f0c294;
  border-radius: 999px;
  background: #fdf3ea;
  color: var(--accent-deep);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.chat-oversight-banner.is-hidden {
  display: none;
}

.chat-composer-note {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.chat-composer-note.is-hidden {
  display: none;
}

/* right pane: the thread */
.chat-thread-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
}

.chat-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.chat-back {
  display: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.chat-thread-avatar {
  display: inline-flex;
  flex: 0 0 auto;
}

.chat-thread-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-thread-title strong {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-dm-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--muted);
}

.chat-dm-status.is-hidden {
  display: none;
}

.chat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6b7177;
  flex: none;
}

.chat-dot.on {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
}

/* flat warm thread background - pattern feel without image assets */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 10px 16px 12px;
  background: #f8f5f1;
}

.chat-day-chip {
  align-self: center;
  flex: 0 0 auto;
  margin: 10px 0 4px;
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #efe9e0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.chat-msg {
  display: flex;
  align-items: flex-end;
  margin-top: 2px;
}

.chat-msg.is-first {
  margin-top: 8px;
}

.chat-msg.mine {
  justify-content: flex-end;
}

.chat-msg-avatar {
  width: 26px;
  flex: 0 0 auto;
  display: inline-flex;
  align-self: flex-start;
}

.chat-bubble {
  position: relative;
  max-width: 72%;
  padding: 6px 9px 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 1px 1px rgba(43, 46, 49, 0.05);
  font-size: 13px;
}

.chat-msg.mine .chat-bubble {
  background: #fdf3ea;
  border-color: #f0c294;
}

/* subtle tail on the first bubble of every run */
.chat-msg.is-first .chat-bubble {
  border-top-left-radius: 4px;
}

.chat-msg.mine.is-first .chat-bubble {
  border-top-left-radius: 10px;
  border-top-right-radius: 4px;
}

.chat-msg.is-first:not(.mine) .chat-bubble::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -8px;
  border-style: solid;
  border-width: 0 8px 10px 0;
  border-color: transparent var(--line) transparent transparent;
}

.chat-msg.is-first:not(.mine) .chat-bubble::after {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  border-style: solid;
  border-width: 0 7px 9px 0;
  border-color: transparent var(--panel) transparent transparent;
}

.chat-msg.mine.is-first .chat-bubble::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -8px;
  border-style: solid;
  border-width: 0 0 10px 8px;
  border-color: transparent transparent transparent #f0c294;
}

.chat-msg.mine.is-first .chat-bubble::after {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  border-style: solid;
  border-width: 0 0 9px 7px;
  border-color: transparent transparent transparent #fdf3ea;
}

.chat-sender {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 1px;
}

.chat-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* WhatsApp-style stamp: floats into the last line of the text */
.chat-stamp {
  float: right;
  margin: 7px -2px -4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
  line-height: 1;
}

.chat-stamp-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 3px;
}

.chat-stamp-row .chat-stamp {
  float: none;
  margin: 0;
}

.chat-tick {
  color: #6b7177; /* readability pass: darker grey, still clearly grey vs the read-blue tick */
  flex: 0 0 auto;
}

/* double blue tick = read (server-confirmed read pointer) */
.chat-tick.is-read {
  color: #2f9fd8;
}

.chat-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 12px 0;
}

/* input bar: rounded field + circular SMC-orange send */
.chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.chat-input {
  flex: 1;
  min-width: 0;
  max-height: 96px;
  resize: none;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.35;
  overflow-y: auto;
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
}

.chat-attach {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-soft);
  font-size: 16px;
  cursor: pointer;
}

.chat-attach:hover {
  border-color: var(--accent);
}

.chat-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--accent-deep);
  background: var(--accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chat-send svg {
  margin-left: 2px;
}

.chat-send:hover {
  background: var(--accent-deep);
}

/* single-pane below 760px: list and thread swap like WhatsApp mobile */
@media (max-width: 759px) {
  .chat-panel {
    right: 10px;
    left: 10px;
    bottom: 80px;
    width: auto;
    height: min(640px, calc(100vh - 100px));
  }

  .chat-list-pane {
    flex: 1 1 auto;
    border-right: none;
  }

  .chat-thread-pane {
    display: none;
  }

  .chat-panel.is-thread .chat-list-pane {
    display: none;
  }

  .chat-panel.is-thread .chat-thread-pane {
    display: flex;
  }

  .chat-back {
    display: inline-flex;
  }

  .chat-list-head .chat-close {
    display: inline-flex;
  }
}

.chat-image {
  display: block;
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  margin-top: 4px;
}

.chat-file {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.chat-file:hover {
  text-decoration: underline;
}

/* incoming-message pop-up: small card above the chat bubble; click opens the
   conversation it came from */
.chat-toast {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 57;
  width: min(320px, calc(100vw - 40px));
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(43, 46, 49, 0.28);
  cursor: pointer;
  animation: chat-toast-in 0.22s ease-out;
}

/* if the panel is open on another conversation, slide the toast above it */
.chat-panel:not(.is-hidden) ~ .chat-toast {
  bottom: calc(94px + min(640px, calc(100vh - 120px)));
}

.chat-toast-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.chat-toast-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.chat-toast-preview {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

@keyframes chat-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chat-toggle-pulse {
  0% { box-shadow: 0 10px 24px rgba(43, 46, 49, 0.25), 0 0 0 0 rgba(245, 130, 32, 0.55); }
  70% { box-shadow: 0 10px 24px rgba(43, 46, 49, 0.25), 0 0 0 14px rgba(245, 130, 32, 0); }
  100% { box-shadow: 0 10px 24px rgba(43, 46, 49, 0.25), 0 0 0 0 rgba(245, 130, 32, 0); }
}

.chat-toggle.is-pulsing {
  animation: chat-toggle-pulse 0.9s ease-out 2;
}

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 24, 33, 0.82);
  cursor: zoom-out;
}

.photo-viewer figure {
  display: grid;
  gap: 10px;
  justify-items: center;
  max-width: min(92vw, 640px);
}

.photo-viewer img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.photo-viewer figcaption {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.photo-viewer.is-hidden {
  display: none;
}

.avatar.avatar-sm {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.avatar.avatar-xs {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.avatar-slot {
  display: inline-flex;
  flex: 0 0 auto;
}

.session-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.session-user-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.user-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.session-roles {
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.imports-panel {
  margin: 14px 18px 0;
  padding: 14px 16px;
  border: 1px solid rgba(215, 218, 221, 0.92);
  background: var(--panel);
  box-shadow: var(--shadow);
  border-radius: var(--radius-soft);
  display: grid;
  gap: 12px;
}

.imports-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.imports-head h2 {
  margin: 0;
  font-size: 17px;
}

.imports-updated {
  color: var(--muted);
  font-size: 12px;
}

.imports-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.panel-subhead {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.doc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.doc-filter {
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}

.doc-filter.active {
  background: var(--accent);
  border-color: var(--accent-deep);
  color: #ffffff;
}

.num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.imports-status.closed {
  background: #f1f2f3;
  color: var(--muted);
  border-color: var(--line);
}

.imports-metrics .metric em {
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
}

.imports-table-wrap {
  overflow-x: auto;
}

.imports-table {
  width: 100%;
  border-collapse: collapse;
}

.imports-empty {
  padding: 8px 2px;
  color: var(--muted);
  font-size: 13px;
}

.imports-status {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #fef3e7;
  color: var(--accent-deep);
  border: 1px solid #f0c294;
}

@media (max-width: 900px) {
  .imports-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- procurement tracking board (2026-07-08) ---- */

/* tracking tables: exact column widths, exact table totals, NO stretching -
   the only way the doc# and vendor rails align pixel-for-pixel across all
   four tables. Same nature = same width at the same position everywhere. */
.imports-table th:nth-child(n),
.imports-table td:nth-child(n) {
  width: auto;
}

.imports-table {
  min-width: 0;
  table-layout: fixed;
}

/* per-table exact width = sum of its column widths (update when columns change) */
.imports-table.t-po { width: 1980px; } /* wave-2: +Adv Paid column */
.imports-table.t-ship { width: 1746px; } /* 18-Oct: +26 = the Invoice # series rail (130 -> 156px, fw-docinv) */
.imports-table.t-grpo { width: 1080px; }
.imports-table.t-docs { width: 1128px; }
/* G11: attendance register fits 1366px - contact columns behind a toggle */
.imports-table.t-att { width: 100%; }
.imports-table.t-att th:nth-child(1) { width: 76px; }
.imports-table.t-att th:nth-child(2) { width: 62px; }
.imports-table.t-att th:nth-child(3) { width: 230px; }
.imports-table.t-att th:nth-child(4) { width: 112px; }
.imports-table.t-att th:nth-child(5) { width: 122px; }
.imports-table.t-att th:nth-child(6) { width: 112px; }
.imports-table.t-att th:nth-child(7) { width: 190px; }
.imports-table.t-att th:nth-child(8),
.imports-table.t-att th:nth-child(9) { width: 60px; }
.imports-table.t-att th:nth-child(10) { width: 96px; }
.imports-table.t-att th:nth-child(11),
.imports-table.t-att th:nth-child(12),
.imports-table.t-att th:nth-child(13),
.imports-table.t-att th:nth-child(14) { width: 56px; }
.imports-table.t-att th:nth-child(15) { width: 90px; }
.imports-table.t-att th:nth-child(6), .imports-table.t-att td:nth-child(6),
.imports-table.t-att th:nth-child(7), .imports-table.t-att td:nth-child(7) { display: none; }
.imports-table.t-att.att-contact-on th:nth-child(6), .imports-table.t-att.att-contact-on td:nth-child(6),
.imports-table.t-att.att-contact-on th:nth-child(7), .imports-table.t-att.att-contact-on td:nth-child(7) { display: table-cell; }

/* net minutes: positive = lateness not covered by over-stay, negative = surplus */
.imports-table td.net-owe { color: #c22929; font-weight: 700; }
.imports-table td.net-plus { color: #1e7d32; font-weight: 700; }

/* branch group rows on the attendance board (Lahore / Islamabad blocks) */
.imports-table tr.att-branch td {
  background: #e8f0fa;
  color: #1f3864;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  border-top: 2px solid #c6d6ec;
  padding: 6px 10px;
}

.imports-table tr.att-branch .att-branch-tally {
  float: right;
  font-weight: 600;
  color: #4a6288;
}

.imports-table td.att-email {
  text-transform: lowercase;
}

/* status/punch filter pills sit right-aligned above the attendance table */
.att-status-filters {
  justify-content: flex-end;
  margin: -4px 0 8px;
}

/* punch indicator boxes in the remarks cell */
.att-box {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: -1px;
}

.att-box-in { background: #2e9e4f; }
.att-box-out { background: #f0932b; }
.att-box-abs { background: #e05252; }

/* leave balance table (G11: shared width, columns via table-class rails) */
.imports-table.t-leave { width: 100%; }
.imports-table.t-leave th:nth-child(1) { width: 76px; }
.imports-table.t-leave th:nth-child(2) { width: 62px; }
.imports-table.t-leave th:nth-child(3) { width: 230px; }
.imports-table.t-leave th:nth-child(4) { width: 112px; }
.imports-table.t-leave th:nth-child(5),
.imports-table.t-leave th:nth-child(6),
.imports-table.t-leave th:nth-child(7) { width: 120px; }
.imports-table.t-leave th:nth-child(8),
.imports-table.t-leave th:nth-child(9) { width: 90px; }

/* leave request table + decision buttons */
.imports-table.t-lreq { width: 100%; }
.imports-table.t-lreq th:nth-child(1) { width: 56px; }
.imports-table.t-lreq th:nth-child(2) { width: 76px; }
.imports-table.t-lreq th:nth-child(3) { width: 210px; }
.imports-table.t-lreq th:nth-child(4) { width: 112px; }
.imports-table.t-lreq th:nth-child(5) { width: 96px; }
.imports-table.t-lreq th:nth-child(6),
.imports-table.t-lreq th:nth-child(7) { width: 92px; }
.imports-table.t-lreq th:nth-child(8) { width: 56px; }
.imports-table.t-lreq th:nth-child(9) { width: 200px; }
.imports-table.t-lreq th:nth-child(10) { width: 110px; }
.imports-table.t-lreq th:nth-child(11) { width: 170px; }

/* late league */
.imports-table.t-lleague { width: 100%; }
.imports-table.t-lleague th:nth-child(1) { width: 44px; }
.imports-table.t-lleague th:nth-child(2) { width: 76px; }
.imports-table.t-lleague th:nth-child(3) { width: 230px; }
.imports-table.t-lleague th:nth-child(4) { width: 130px; }
.imports-table.t-lleague th:nth-child(5) { width: 86px; }
.imports-table.t-lleague th:nth-child(6),
.imports-table.t-lleague th:nth-child(7) { width: 96px; }

.req-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
}

.req-btn.req-approve {
  border-color: #2e9e4f;
  color: #1e7d32;
}

.req-btn.req-approve:hover { background: #eaf6ec; }

.req-btn.req-reject {
  border-color: #d64545;
  color: #c22929;
  margin-left: 4px;
}

.req-btn.req-reject:hover { background: #fdeeee; }

.leave-head {
  margin-top: 18px;
}

/* HR leave entry form */
.leave-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
}

.leave-entry select,
.leave-entry input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 12.5px;
  background: #fff;
}

.leave-entry #lvEmp { min-width: 280px; }
.leave-entry #lvDays { width: 88px; }
.leave-entry #lvRemarks { flex: 1; min-width: 180px; }

.leave-entry button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 7px 16px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.leave-entry button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* HR EMPLOYEES tab (Ameer 2026-08-31 HR wave) - salary register + forms.
   Reuses the leave-entry form language; only the deltas live here. */
.t-hremp th.hr-num,
.t-hremp td.hr-num { text-align: right; white-space: nowrap; }
.hr-chip { margin-left: 6px; font-size: 9.5px; padding: 2px 7px; vertical-align: 1px; white-space: nowrap; }
.hr-month { font-size: 11.5px; font-weight: 500; color: var(--muted, #6b7280); }
.hr-form { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.hr-form-title { flex-basis: 100%; font-size: 12.5px; font-weight: 700; }
.hr-form-note { font-weight: 500; font-size: 11px; color: var(--muted, #6b7280); }
.hr-form input, .hr-form select { min-width: 120px; }
.hr-form #hrAddTitle { min-width: 70px; }
.hr-form #hrSalBase, .hr-form #hrSalHouse, .hr-form #hrSalTrans, .hr-form #hrSalOther { width: 110px; min-width: 110px; text-align: right; }
.hr-form button.hr-cancel { background: transparent; color: inherit; border-color: var(--line); font-weight: 600; }
.hr-ext-hint { flex-basis: 100%; font-size: 11px; color: var(--muted, #6b7280); }
.hr-form .leave-status { flex-basis: 100%; }

.leave-status {
  font-size: 12px;
  font-weight: 600;
}

.leave-status.ok { color: #1e7d32; }
.leave-status.err { color: #c22929; }

.imports-table td.lv-warn {
  color: #b36c09;
  font-weight: 700;
}

.imports-table td.lv-out {
  color: #c22929;
  font-weight: 700;
}

.imports-table th {
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 7px 8px;
  white-space: nowrap;
  overflow: hidden;
  background: #f4f6f8;
  color: #5c6b7a;
  border-bottom: 1.5px solid #e2e7ec;
}

.imports-table td {
  padding: 4px 8px;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #eef1f4;
}

.imports-table tr:nth-child(even):not(.att-branch) td {
  background: #fafbfc;
}

.imports-table tr:not(.att-branch):hover td {
  background: #fff4e9;
}

/* ---- finance board: reuse imports styling, auto-width tables + mode pills ---- */
.fin-block { margin-top: 2px; }
.imports-table.t-fin { table-layout: fixed; }
.imports-table.t-fin td { white-space: nowrap; }
/* G11: shared column rails (fw-* is the ONLY column-class system) - every
   board table takes the full board width and fits 1366px without sideways
   scroll; the fixed-width zoo (1006/1374/926/1100px) is retired. */
.imports-table.t-fin { width: 100%; }
.imports-table th.fw-doc { width: 90px; }
/* 18-Oct-2026 document numbers with their series: a SERIES-NUMBER (LHR-SQT-1000001 = 15 characters, ~96px at
   11.5px) gets its own 120px rail on every document-number column; fw-doc stays 90px for the short columns that
   share it (Type, Code, Whs ...). In the .jobs-table tracking tables the jobs-table column rules win (column 1 =
   130px, already wide enough) - except the shipments Invoice # ("Res Inv LHR-API-1000001" = ~133px), which takes
   156px through the higher-specificity rule below (t-ship width +26 to match). */
.imports-table th.fw-docno { width: 120px; }
.imports-table.t-ship th.fw-docinv { width: 156px; }
.imports-table th.fw-date { width: 88px; }
.imports-table th.fw-bp { width: 200px; }
.imports-table th.fw-money { width: 112px; }
.imports-table th.fw-status { width: 84px; }
.imports-table th.fw-mode { width: 96px; }
.imports-table th.fw-chq { width: 100px; }
.imports-table th.fw-bank { width: 140px; }
.imports-table th.fw-ref { width: 120px; }
.imports-table th.fw-rmk { width: 160px; }
.imports-table th.fw-acct { width: 108px; }
.imports-table th.fw-desc { width: 320px; }
.imports-table th.fw-proj { width: 168px; }
.imports-table th.fw-src { width: 130px; }
/* fw-* equivalents of the retired w-* sizes (wide-scroll imports tables) */
.imports-table th.fw-type { width: 112px; }
.imports-table th.fw-sm { width: 100px; }
.imports-table th.fw-md { width: 128px; }
.imports-table th.fw-lg { width: 150px; }
.imports-table th.fw-xl { width: 220px; }
.imports-table th.fw-inc { width: 68px; }
.imports-table th.fw-stlg { width: 150px; }
.imports-table th.pw-opp { width: 260px; }
.imports-table th.pw-rep { width: 150px; }
/* rates table and the 4 graph boxes share the exact same rail width */
.imports-table.t-rates { width: 100%; table-layout: fixed; }
.imports-table.t-rates th.fw-date { width: 122px; }
/* G5: tint stays, ink stays readable - the old #ffb066 text was a dark-theme leftover */
.imports-table.t-rates .rate-today td { background: rgba(245, 130, 31, 0.16); color: var(--ink); font-weight: 700; }
/* active search/filter results get the same highlight treatment everywhere */
tr.row-hit td { background: rgba(245, 130, 31, 0.16); color: var(--ink); font-weight: 600; }
.rates-block { max-width: 640px; }
/* G11 shared board-table rail: one max width per board page, no sideways scroll at 1366px */
.fin-two-col .rates-block, .fin-two-col .cash-spark { max-width: none; }
.fin-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.fin-two-col > .fin-block { margin-top: 0; }
@media (max-width: 1100px) { .fin-two-col { grid-template-columns: 1fr; } }
.rate-graphs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rate-spark { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: rgba(255, 255, 255, 0.02); }
@media (max-width: 700px) { .rate-graphs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rate-spark-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.rate-spark-cur { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.rate-spark-val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-spark-chg { margin-left: auto; font-size: 10px; font-weight: 700; }
.rate-spark-chg.up { color: #1e7d32; }
.rate-spark-chg.down { color: #d32f2f; }
.rate-spark-svg { width: 100%; height: 42px; display: block; }
.rates-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rates-head .panel-subhead { margin: 0; }
.rates-controls { display: flex; align-items: center; gap: 8px; }
.rseg { border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; cursor: pointer; }
.rseg:hover { color: var(--ink); border-color: var(--accent); }
.rseg.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.rates-monthnav { display: inline-flex; align-items: center; gap: 6px; }
.rates-monthnav[hidden] { display: none; }
.rnav { border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 14px; width: 22px; height: 22px; line-height: 1; border-radius: 6px; cursor: pointer; padding: 0; }
.rnav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rnav:disabled { opacity: 0.35; cursor: default; }
.rmonth-label { font-size: 11px; font-weight: 700; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
/* pipeline search (orders + shipments tabs) */
.pipe-search { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; flex-wrap: wrap; }
.pipe-search-input { width: 420px; max-width: 100%; }
.pipe-search-hits { font-size: 11px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* quick-launch strip (external portals - always new tab, never iframed) */
.quick-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; }
.ql-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ql-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--ink); text-decoration: none; }
.ql-btn:hover { border-color: var(--accent); color: var(--accent); }

.ledger-fold { margin-top: 16px; }
.ledger-fold .ledger-block { margin-top: 0; }

/* customer ledger block (sales + finance boards): G11 shared width, no private cap */
.ledger-block { max-width: none; }
.ledger-controls { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.ledger-field { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; }
.ledger-search { width: 240px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.ledger-search:focus { outline: none; border-color: var(--accent); }
.ledger-pick { flex: 1; min-width: 260px; max-width: 440px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; }
.ledger-summary { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 10px; }
.ledger-summary.search-hit { background: rgba(245, 130, 31, 0.08); border: 1px solid rgba(245, 130, 31, 0.35); border-radius: 8px; padding: 10px 12px; }
.ledger-summary span { display: flex; flex-direction: column; gap: 2px; }
.ledger-summary label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ledger-summary strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.ledger-owes { color: #b45309; }
.ledger-lead { color: #1d6fb8; }
/* Store/IT reuse the procurement board with money hidden - the vendor ledger
   is all money, so the whole block disappears there */
.hide-financials .ledger-block { display: none !important; }

/* "Financial Data = no" (access matrix): strip money everywhere for this user */
body.no-financials td.num-cell,
body.no-financials td.fin-amt,
body.no-financials th.fw-money,
body.no-financials .ledger-block,
body.no-financials #impPoTotal,
body.no-financials #financePanel .imports-metrics,
body.no-financials #dispQuotTotal,
body.no-financials #dispSoTotal { display: none !important; }
.ledger-counts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lcount { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.lcount strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.lcount-lead strong { color: #1d6fb8; }
.imports-table.t-ledger td { white-space: nowrap; }
.imports-table.t-ledger td:nth-child(4) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* chat DM online / last-seen strip */
/* .chat-dm-status / .chat-dot now live with the two-pane chat block above */

/* access-control matrix modal */
.ac-overlay { position: fixed; inset: 0; background: rgba(10, 12, 14, 0.66); display: flex; align-items: center; justify-content: center; z-index: 900; padding: 24px; }
.ac-overlay.is-hidden { display: none; }
.ac-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: min(980px, 96vw); max-height: 90vh; overflow: auto; padding: 20px 22px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); }
.ac-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ac-head h3 { margin: 0; font-size: 16px; letter-spacing: 0.02em; }
.ac-close { border: none; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 2px 8px; }
.ac-close:hover { color: var(--ink); }
.ac-hint { font-size: 11px; color: var(--muted); margin: 0 0 12px; }
.ac-cell-demo { display: inline-block; min-width: 20px; text-align: center; border: 1px solid var(--line); border-radius: 5px; font-weight: 700; font-size: 11px; }
.ac-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.ac-table-wrap { max-height: 46vh; overflow: auto; }
.ac-table th { position: sticky; top: 0; background: var(--panel); z-index: 1; font-size: 10px; }
.ac-table td, .ac-table th { text-align: center; }
.ac-table .ac-name { text-align: left; font-weight: 700; white-space: nowrap; }
.ac-cell { width: 40px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font-weight: 800; font-size: 13px; cursor: pointer; }
.ac-expand { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; margin-right: 4px; padding: 0; }
.ac-expand:hover { border-color: var(--accent); color: var(--accent); }
.ac-user-row { background: rgba(255, 255, 255, 0.025); }
.ac-user-row .ac-user-name { padding-left: 40px; font-weight: 500; font-size: 11px; color: var(--muted); }
.ac-cell:hover { border-color: var(--accent); }
.ac-cell.ac-allow, .ac-cell-demo.ac-allow { color: #1e7d32; border-color: rgba(30, 125, 50, 0.45); background: rgba(30, 125, 50, 0.08); }
.ac-cell.ac-deny, .ac-cell-demo.ac-deny { color: #d32f2f; border-color: rgba(211, 47, 47, 0.45); background: rgba(211, 47, 47, 0.08); }
.ac-user-pick { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; min-width: 320px; }
.ac-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.ac-actions .imports-updated { margin-right: auto; }

/* sales KPI cards are buttons: same look as .metric, plus filter affordances */
button.metric { cursor: pointer; font: inherit; text-align: left; color: inherit; }
button.metric:hover { border-color: var(--accent); }
button.metric.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
button.metric.active span { color: var(--accent); }
.sched-block { max-width: 980px; }
.track-block { max-width: 980px; }
.track-form { display: flex; gap: 8px; margin: 4px 0 10px; }
.track-input { flex: 1; max-width: 420px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; }
.track-input:focus { outline: none; border-color: var(--accent); }
.track-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.track-event { display: flex; gap: 12px; padding: 7px 0 7px 4px; position: relative; }
.track-event::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: -8px; width: 2px; background: var(--line); }
.track-event:last-child::before { display: none; }
.track-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); margin-top: 5px; flex: none; z-index: 1; }
.track-event.latest .track-dot { background: var(--accent); box-shadow: 0 0 8px rgba(245, 130, 31, 0.6); }
.track-event-body { display: flex; flex-direction: column; gap: 1px; }
.track-event-body strong { font-size: 12px; }
.track-event.latest .track-event-body strong { color: var(--accent); }
.track-event-body span { font-size: 11px; color: var(--muted); }
.track-event-body em { font-size: 10px; color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; }
.imports-table.t-sched td { white-space: nowrap; }
.t-sched .sched-own td { background: rgba(245, 130, 31, 0.14); font-weight: 600; }
.sched-own-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 800; background: #f5821f; color: #fff; letter-spacing: 0.04em; vertical-align: 1px; }
.sched-carriers { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sched-carrier { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.sched-carrier.sched-ok { color: #1e7d32; border-color: rgba(30, 125, 50, 0.4); }
.sched-carrier.sched-pending { color: #b45309; border-color: rgba(180, 83, 9, 0.4); }
.sched-carrier.sched-err { color: #d32f2f; border-color: rgba(211, 47, 47, 0.4); }
.online-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: default; }
.online-chip strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); }
/* Store board = Procurement board with every money value hidden (rates kept as reference) */
.hide-financials #impPoTotal { display: none; }
.hide-financials td.num-cell { display: none; }
/* mirror viewers (store fallback): a money-less board must not show clickable
   ledger tabs above nothing, nor procurement-only furniture (G-board IT/Store) */
.hide-financials .ledger-fold { display: none !important; }
.imports-mirror .sched-block,
.imports-mirror .track-block,
.imports-mirror .quick-links { display: none !important; }
/* G15: cockpit-skin pill palette (the old pastels were dark-theme leftovers) */
.plan-st { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.plan-st-open { background: rgba(29, 111, 184, 0.12); color: #1d6fb8; }
.plan-st-won { background: rgba(30, 125, 50, 0.12); color: #1e7d32; }
.plan-st-lost { background: rgba(211, 47, 47, 0.10); color: #d32f2f; }
.plan-st-closed,
.plan-st-other { background: rgba(0, 0, 0, 0.05); color: #6b7280; }
.opp-status-strip { display: flex; gap: 8px; margin: 2px 0 8px; flex-wrap: wrap; }
.opp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.opp-chip strong { font-size: 13px; }
.opp-chip-open { background: rgba(29, 111, 184, 0.12); color: #1d6fb8; }
.opp-chip-won { background: rgba(30, 125, 50, 0.12); color: #1e7d32; }
.opp-chip-lost { background: rgba(211, 47, 47, 0.10); color: #d32f2f; }
.imports-table td.fin-amt { text-align: right; font-variant-numeric: tabular-nums; }
.fin-mode {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.fin-mode-cheque { background: rgba(245, 130, 31, 0.16); color: #ff9a3d; }
.fin-mode-cash { background: rgba(30, 125, 50, 0.12); color: #1e7d32; }
.fin-mode-transfer { background: rgba(29, 111, 184, 0.12); color: #1d6fb8; }
.fin-mode-card { background: rgba(196, 160, 245, 0.18); color: #c4a0f5; }
.fin-mode-mixed,
.fin-mode-other { background: rgba(0, 0, 0, 0.05); color: #6b7280; }
.fin-dp-cust { color: #1d6fb8; font-weight: 700; }
.fin-dp-vend { color: #ff9a3d; font-weight: 700; }

/* ---- finance cash-flow period switch ---- */
.fin-period { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
.fin-period-lead { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.fin-period-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.fin-per-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.fin-per-btn:last-child { border-right: none; }
.fin-per-btn:hover:not(.active) { background: rgba(245, 130, 31, 0.10); color: var(--accent); }
.fin-per-btn.active { background: linear-gradient(135deg, #f5821f, #e06d10); color: #ffffff; }
.fin-period-custom { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-period-custom label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.fin-period-custom input[type="date"] { min-height: 32px; width: auto; }
.fin-period-custom input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.65); cursor: pointer; }

/* th-qualified so these outrank the nth-child reset above */
/* w-* column classes retired (G11): fw-* is the one rail system */
.imports-table th.w-zk { width: 62px; }
.imports-table th.w-time { width: 64px; }
.imports-table th.fw-emp { width: 280px; }
.imports-table th.w-rmk { width: 300px; }

.session-card .team-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 4px 10px;
  max-height: 104px;
  overflow-y: auto;
  align-content: start;
}

.session-card .team-member {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* the session cards style <strong> at 22px for the user name - team rows stay small */
.session-card .team-member-text {
  display: grid;
  min-width: 0;
}

.session-card .team-member-text strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-card .team-member.lead strong {
  color: var(--accent-deep);
}

/* identity line under the user name: MANAGER - SALES - LAHORE */
#sessionUserMeta {
  text-transform: uppercase;
}

.session-card .team-branch {
  grid-column: 1 / -1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  margin-top: 2px;
}

.team-empty {
  font-size: 12px;
  color: var(--muted);
}

.module-pill.clickable {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.module-pill.clickable:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}


.imports-alerts {
  display: grid;
  gap: 6px;
}

.alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  font-size: 12.5px;
}

.alert-row .alert-tag {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.alert-row .alert-party {
  color: var(--muted);
}

.alert-row .alert-message {
  color: var(--ink);
  flex: 1;
  min-width: 180px;
}

.alert-danger {
  border-color: #f2b8b5;
  background: #fdf1f0;
}

.alert-danger .alert-tag {
  background: #b3261e;
  color: #ffffff;
}

.alert-warn {
  border-color: #f0c294;
  background: #fef6ec;
}

.alert-warn .alert-tag {
  background: #b26a00;
  color: #ffffff;
}

.alert-info {
  border-color: #a8c7fa;
  background: #eef4fe;
}

.alert-info .alert-tag {
  background: #0b57d0;
  color: #ffffff;
}

.pipeline-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.pipe-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-top: 5px;
  min-width: 122px;
}

.pipeline-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  align-items: center;
  flex: 1;
  min-width: 240px;
}

.stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

.stage-chip strong {
  font-size: 11px;
}

.stage-chip.active {
  background: #fef3e7;
  border-color: #f0c294;
  color: var(--accent-deep);
}

.stage-arrow {
  color: var(--muted);
  font-size: 11px;
  opacity: 0.6;
  padding: 0 1px;
}

.chip-danger {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #fdf1f0;
  color: #b3261e;
  border: 1px solid #f2b8b5;
}

.chip-ok {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #eef7ee;
  color: #1e7d32;
  border: 1px solid #b7dfb9;
}

.chip-warn {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #fef6ec;
  color: #b26a00;
  border: 1px solid #f0c294;
}

.chip-info {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #eef4fe;
  color: #0b57d0;
  border: 1px solid #a8c7fa;
}

.imports-status.danger {
  background: #fdf1f0;
  color: #b3261e;
  border-color: #f2b8b5;
}

.assignee-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.server-state,
.button,
.status-filter,
.segment,
.status-button,
.assignee-filter,
.scope-button,
.module-pill,
.system-pill,
.active-user-pill,
.login-panel {
  border-radius: var(--radius-soft);
}

.server-state {
  height: 38px;
  min-width: 104px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
}

.server-state.online {
  border-color: #9de3cf;
  color: #0f5132;
  background: #ebfbf4;
}

.server-state.online::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  margin-right: 7px;
  animation: smcLivePulse 2s infinite;
}

@keyframes smcLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.server-state.error {
  border-color: #fecaca;
  color: #991b1b;
  background: #fef2f2;
}

.button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 32, 42, 0.05);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}

.button.primary {
  background: linear-gradient(135deg, var(--accent) 0%, #e06d10 100%);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(245, 130, 31, 0.28);
}

.button.secondary {
  background: #ffffff;
  border-color: var(--line);
}

.button:disabled {
  opacity: 0.55;
  cursor: default;
}

.button:hover,
.status-filter:hover,
.segment:hover,
.status-button:hover,
.assignee-filter:hover,
.scope-button:hover,
.archive-button:hover {
  filter: brightness(0.99);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 32, 42, 0.10);
}

.button.secondary:hover {
  border-color: #f0c294;
}

.button.primary:hover {
  box-shadow: 0 7px 18px rgba(245, 130, 31, 0.42);
}

.session-strip {
  padding: 14px 18px 0;
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 1.3fr;
  align-items: stretch;
}

.session-card,
.metric,
.pipeline,
.worklist,
.detail-pane {
  border: 1px solid rgba(215, 218, 221, 0.92);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.session-card {
  min-height: 102px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}

.session-card strong {
  font-size: 22px;
  line-height: 1.1;
}

.scope-toggle {
  flex-wrap: wrap;
}

.scope-button {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.scope-button.active {
  color: #ffffff;
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.scope-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.module-list {
  flex-wrap: wrap;
}

.module-pill {
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.module-pill:not(.active):hover {
  background: #fff4e9;
  color: var(--accent-deep);
  border-color: #f0c294;
  transform: translateY(-1px);
}

.module-pill.active {
  color: #ffffff;
  background: linear-gradient(135deg, #f5821f, #e06d10);
  border-color: #d2690e;
  box-shadow: 0 3px 10px rgba(245, 130, 31, 0.30);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px 18px;
}

.metric {
  min-height: 64px;
  padding: 10px 12px;
  border-left: 5px solid var(--accent);
}

.metric strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  line-height: 1;
}

.metric-request {
  border-left-color: var(--orange);
}

.metric-active {
  border-left-color: var(--amber);
}

.metric-done {
  border-left-color: var(--green);
}

.metric-overdue {
  border-left-color: #ef4444;
}

.design-head {
  padding: 16px 18px 2px;
  margin: 0;
}

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(560px, 1fr) minmax(420px, 500px);
  gap: 14px;
  padding: 0 18px 18px;
}

.pipeline,
.worklist,
.detail-pane {
  min-height: 0;
}

.pipeline {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.side-section {
  display: grid;
  gap: 8px;
}

.status-filter,
.assignee-filter {
  min-height: 46px;
  width: 100%;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink);
  text-align: left;
}

.status-filter.active,
.assignee-filter.active {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}

.status-filter strong,
.assignee-filter strong {
  font-size: 18px;
}

.assignee-list {
  display: grid;
  gap: 8px;
}

.worklist {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.worklist-toolbar {
  min-height: 68px;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 250, 249, 0.88);
}

.segmented {
  display: inline-grid;
  grid-template-columns: repeat(3, 98px);
  border: 1px solid var(--line);
  background: #ffffff;
  overflow: hidden;
}

.segment {
  height: 38px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
}

.segment:last-child {
  border-right: 0;
}

.segment.active {
  color: #ffffff;
  background: var(--accent-deep);
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search input {
  width: 260px;
}

.table-wrap,
.card-list {
  min-height: 0;
  position: relative;
  overflow: auto;
}

.jobs-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  table-layout: fixed;
}

.jobs-table th:nth-child(1),
.jobs-table td:nth-child(1) {
  width: 130px;
}

.jobs-table th:nth-child(2),
.jobs-table td:nth-child(2) {
  width: 180px;
}

.jobs-table th:nth-child(3),
.jobs-table td:nth-child(3) {
  width: 190px;
}

.jobs-table th:nth-child(4),
.jobs-table td:nth-child(4) {
  width: 150px;
}

.jobs-table th:nth-child(5),
.jobs-table td:nth-child(5) {
  width: 125px;
}

.jobs-table th:nth-child(6),
.jobs-table td:nth-child(6) {
  width: 150px;
}

.jobs-table th:nth-child(7),
.jobs-table td:nth-child(7) {
  width: 110px;
}

.jobs-table th:nth-child(8),
.jobs-table td:nth-child(8) {
  width: 120px;
}

.jobs-table th,
.jobs-table td {
  min-height: 42px;
  padding: 10px 10px;
  border-bottom: 1px solid #dce7e5;
  border-right: 1px solid #e3edeb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jobs-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #dce9e6;
  text-align: left;
  font-weight: 700;
}

.jobs-table tr {
  background: rgba(255, 255, 255, 0.92);
}

.jobs-table tr:nth-child(even) {
  background: #f7f8f9;
}

.jobs-table tr.selected {
  background: #fef3c7;
}

.jobs-table tr.overdue td {
  color: #7f1d1d;
}

.empty-state {
  display: none;
  margin: 34px auto;
  width: min(360px, calc(100% - 32px));
  padding: 22px;
  border: 1px dashed var(--line);
  background: var(--panel-soft);
  text-align: center;
}

.empty-state.show {
  display: grid;
  gap: 6px;
}

.status-chip,
.sync-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 12px;
}

.status-chip.DESIGN_PENDING {
  border-color: #7dd3fc;
  color: #075985;
  background: #ecfeff;
}

.status-chip.CHANGE_REQUESTED {
  border-color: #fed7aa;
  color: #9a3412;
  background: #fff7ed;
}

.status-chip.CHANGE_IN_DESIGN {
  border-color: #fcd34d;
  color: #854d0e;
  background: #fffbeb;
}

.status-chip.DESIGN_DONE,
.sync-ready {
  border-color: #86efac;
  color: #166534;
  background: #ecfdf5;
}

.sync-not-ready {
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #eff6ff;
}

.sync-sent {
  border-color: #bbf7d0;
  color: #15803d;
  background: #f0fdf4;
}

.sync-error {
  border-color: #fecaca;
  color: #991b1b;
  background: #fef2f2;
}

.card-list {
  display: none;
  padding: 12px;
  gap: 10px;
}

.job-card {
  padding: 14px;
  border: 1px solid var(--line);
  background: #ffffff;
  display: grid;
  gap: 10px;
}

.job-card.selected {
  border-color: var(--amber);
  background: #fffaf0;
}

.job-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.job-card-head strong {
  font-size: 18px;
  line-height: 1.2;
}

.job-card-head span,
.job-card-meta,
.job-card-grid label,
.auto-note {
  color: var(--muted);
}

.job-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.job-card-grid span {
  display: grid;
  gap: 3px;
}

.job-card-grid label {
  font-size: 11px;
  text-transform: uppercase;
}

.detail-pane {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.job-form {
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.form-head h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.form-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.archive-button {
  min-width: 88px;
}

.system-banner {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.system-pill {
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  display: grid;
  gap: 4px;
}

.system-pill strong {
  font-size: 15px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

label {
  display: grid;
  gap: 5px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  border-radius: var(--radius-soft);
}

input,
select {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 13px;
}

textarea {
  min-height: 64px;
  padding: 8px 9px;
  font-size: 13px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.wide-field {
  margin-top: 10px;
}

.auto-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px dashed #f0c294;
  background: #fef7ef;
  font-size: 13px;
}

.status-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 12px;
}

.status-button {
  min-height: 38px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
}

.status-button.pending {
  border-color: #7dd3fc;
}

.status-button.request {
  border-color: #fed7aa;
}

.status-button.active {
  border-color: #fcd34d;
}

.status-button.done {
  border-color: #86efac;
}

.form-actions {
  justify-content: flex-end;
  margin-top: 12px;
}

.history {
  padding: 14px;
}

.history h2 {
  margin: 0 0 10px;
  font-size: 16px;
}

.history-list {
  display: grid;
  gap: 8px;
}

.history-item {
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.history-item strong {
  display: block;
  font-size: 13px;
}

.history-item span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1440px) {
  .workspace {
    grid-template-columns: 210px minmax(460px, 1fr) minmax(360px, 440px);
  }
}

@media (max-width: 1180px) {
  .session-strip {
    grid-template-columns: 1fr;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

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

  .pipeline {
    flex-direction: row;
    overflow-x: auto;
  }

  .side-section {
    min-width: 260px;
  }
}

@media (max-width: 820px) {
  .login-shell {
    padding: 18px 12px;
  }

  .login-panel {
    padding: 20px;
  }

  .topbar,
  .top-actions,
  .worklist-toolbar,
  .login-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .search input {
    width: 100%;
  }

  .table-wrap {
    display: none;
  }

  .card-list {
    display: grid;
  }

  .system-banner,
  .field-grid,
  .status-actions {
    grid-template-columns: 1fr;
  }

  .form-actions {
    justify-content: stretch;
  }

  .form-actions .button,
  .top-actions .button,
  .top-actions .server-state,
  .top-actions .active-user-pill,
  .login-actions .button {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .metrics {
    grid-template-columns: 1fr;
  }

  .scope-toggle {
    display: grid;
    grid-template-columns: 1fr;
  }

  .job-card-grid {
    grid-template-columns: 1fr;
  }

  .segmented {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

  .search {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ==========================================================================
   Design pass 2026-07-09 - one visual system for every board.
   Calm neutrals, brand orange only as the active accent, one card style,
   one section-header style, badge counts in pipelines.
   ========================================================================== */
:root {
  --line: #dfe4ea;
  --panel-soft: #f6f8fa;
  --shadow: 0 6px 18px rgba(30, 35, 40, 0.06);
}

/* ---- cards & panels ---- */
.imports-panel {
  border-radius: 14px;
  border-color: #e8edf3;
  padding: 16px 18px;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(23, 37, 53, 0.03), 0 12px 34px rgba(23, 37, 53, 0.055);
}

/* ---- section headers: one style everywhere ---- */
.imports-head {
  border-bottom: 1px solid #edf1f5;
  padding-bottom: 8px;
}

.imports-head h2 {
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #22303d;
  text-transform: uppercase;
}

.panel-subhead {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #5c6b7a;
}

.imports-updated {
  font-size: 11.5px;
  color: #93a0ad;
}

/* ---- KPI cards: uniform, quiet, readable ---- */
.imports-metrics {
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 8px;
}

.imports-metrics .metric,
.metrics .metric {
  position: relative;
  overflow: hidden;
  min-height: 60px;
  padding: 9px 12px 8px;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
  box-shadow: 0 1px 2px rgba(23, 37, 53, 0.04), 0 8px 20px rgba(23, 37, 53, 0.05);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.imports-metrics .metric::before,
.metrics .metric::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  opacity: 0.9;
}

.imports-metrics .metric:hover,
.metrics .metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(23, 37, 53, 0.06), 0 14px 30px rgba(23, 37, 53, 0.11);
}

.imports-metrics .metric span,
.metrics .metric span {
  font-size: 9.5px;
  letter-spacing: 0.07em;
  color: #7b8794;
}

.imports-metrics .metric strong,
.metrics .metric strong {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
  color: #1f2937;
}

.imports-metrics .metric em,
.metrics .metric em {
  font-size: 10px;
  color: #98a2ae;
}

/* ---- Inventory KPI chips: three fixed size classes (Ameer, 2026-07-20) ----
   ITEMS / VENDORS are small counts, ON HAND / COMMITTED / AVAILABLE / ON ORDER
   are quantities up to ~999,999.99, and the three money chips are dimensioned
   for the business ceiling "PKR 15,000,000,000" (stock value can never exceed
   15 billion) and no wider. Every chip inside a class is pixel-identical, and
   the numbers anchor to a shared bottom line so the row reads level even when
   a long caption wraps. Developed By: Ameer Shahryar */
.imports-metrics.smc-inv-kpis { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; }
.smc-inv-kpis .metric { display: flex; flex-direction: column; min-height: 56px; }
.smc-inv-kpis .metric strong { margin-top: auto; padding-top: 4px; white-space: nowrap; }
/* Row spreads FULL WIDTH (Ameer 2026-07-20): each class keeps its base size but
   grows to fill the line, money chips absorbing the most extra space. Money base
   224px = room for "PKR 15,000,000,000" plus two digits of headroom. */
.smc-inv-kpis .metric--count { flex: 1 1 88px; }
.smc-inv-kpis .metric--qty { flex: 2 1 132px; }
.smc-inv-kpis .metric--money { flex: 3 1 224px; }
/* narrow screens: same three sizes as minimums, chips grow to fill each line */
@media (max-width: 820px) {
  .smc-inv-kpis .metric--count { flex: 1 1 88px; }
  .smc-inv-kpis .metric--qty { flex: 1 1 132px; }
  .smc-inv-kpis .metric--money { flex: 1 1 200px; }
}
/* Stock Value (Price) + Potential Profit chips (inventory): custom SMC metrics
   => orange accent on the number, per the add-on/board convention.
   Developed By: Ameer Shahryar */
.imports-metrics .metric--retail strong { color: #F58220; }

/* the design board keeps its stage colors - on the number, not the frame */
.metric-request strong { color: var(--orange); }
.metric-active strong { color: var(--amber); }
.metric-done strong { color: var(--green); }
.metric-overdue strong { color: #ef4444; }

/* ---- pipelines: compact chips, count as a badge ---- */
.pipeline-block {
  gap: 8px;
}

.pipe-label {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  color: #8a95a1;
  padding-top: 6px;
}

/* pipeline chips share the exact column grid of the KPI cards above:
   same template, same gap, same left edge - every chip aligns under a box */
.pipeline-block {
  display: block;
}

/* pipeline titles: orange boxes sized EXACTLY one chip column
   (8 columns, 7 gaps of 10px - same math as the shared grid) */
.pipe-label {
  display: inline-block;
  width: calc((100% - 70px) / 8);
  min-width: 0;
  margin: 0 0 8px;
  padding: 6px 12px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 7px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* G4: identical breakpoints as the KPI grid (1500px / 760px) so the chip
   strip columns sit exactly under the tile columns at every width */
@media (max-width: 1500px) {
  .pipe-label {
    width: calc((100% - 30px) / 4);
  }
}
@media (max-width: 760px) {
  .pipe-label {
    width: calc((100% - 10px) / 2);
  }
}

/* step numbers inside the chips: 01, 02, 03 ... per pipeline */
.stage-no {
  color: #a8b3bd;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  min-width: 14px;
}

.stage-chip .stage-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-chip.active .stage-no {
  color: var(--accent);
}

.imports-metrics,
.pipeline-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

/* G4: same 1500/760 breakpoints as .imports-panel .imports-metrics below */
@media (max-width: 1500px) {
  .imports-metrics,
  .pipeline-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .imports-metrics,
  .pipeline-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stage-chip {
  width: 100%;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 5px 5px 9px;
  border-radius: 8px;
  border-color: #e8edf3;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
  color: #000000;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(23, 37, 53, 0.045);
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}

.stage-chip:hover {
  box-shadow: 0 5px 12px rgba(23, 37, 53, 0.09);
  transform: translateY(-1px);
}

.stage-chip strong {
  font-size: 10px;
  background: #e8edf2;
  color: #1f2937;
  border-radius: 5px;
  padding: 2px 6px;
  min-width: 15px;
  text-align: center;
}

.stage-chip.active {
  background: #fff7ef;
  border-color: #f0c294;
  color: #a85a0a;
}

.stage-chip.active strong {
  background: var(--accent);
  color: #ffffff;
}

.stage-arrow {
  opacity: 0.35;
  font-size: 10px;
}

/* ---- tables: one chrome for every board ---- */
.jobs-table th,
.imports-table th {
  background: #f2f5f8;
  color: #5c6b7a;
  font-weight: 700;
  border-bottom: 1px solid #e4e9ef;
}

.imports-table td {
  border-bottom: 1px solid #f0f3f6;
}

.imports-table tbody tr:hover td {
  background: #fbfcfe;
}

.imports-table tr.att-branch td {
  background: #eef3f9;
  border-top: 1px solid #d9e4f0;
}

/* ---- empty states ---- */
.imports-empty {
  padding: 12px 2px 4px;
  font-size: 12.5px;
  color: #93a0ad;
}

/* ---- filter pills: one case with the uppercase department names ---- */
.doc-filter {
  border-radius: 7px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- forms on the boards ---- */
.leave-entry select,
.leave-entry input {
  border-color: #dbe2e9;
}

/* ---- SAP-style folder tabs (General / Inventory / SMC pattern) ---- */
.sap-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-bottom: 1px solid #d8dfe6;
  padding: 0 2px;
}

.sap-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;               /* one chip scale everywhere: pills = tabs = 30px / 12px */
  box-sizing: border-box;
  border: 1px solid #d8dfe6;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #eef1f5;
  color: #67737f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 14px;
  margin-bottom: -1px;
}

.sap-tab:hover {
  background: #f5f7fa;
  color: #40505f;
}

.sap-tab.active {
  background: #ffffff;
  color: #22303d;
  border-bottom: 1px solid #ffffff;
  box-shadow: inset 0 2px 0 var(--accent);
}

.sap-tab-badge {
  background: var(--accent);
  color: #ffffff;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  padding: 3px 7px;
}

.sap-fold [data-pane] {
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

/* ---- view-scope card + module pills: one language with the filter pills ---- */
.scope-button,
.module-pill {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 7px;
}

.scope-button {
  height: 34px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

.scope-button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

#scopeHint {
  font-size: 11.5px;
  color: var(--muted);
}

/* session strip fits 3 or 4 cards evenly (team card now shows on all apps) */
.session-strip {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

/* department switcher lives in the topbar: one inline badge for users;
   the superuser's full pill set takes its own full-width row below */
.topbar {
  flex-wrap: wrap;
}

.topbar-apps {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

.topbar-apps:has(> :nth-child(2)) {
  order: 10;
  flex: 1 1 100%;
  padding: 8px 0 0;
}

.topbar-apps .module-pill {
  min-height: 30px;
}

/* attendance head: Sync Machine button beside the freshness note */
.att-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.att-sync-btn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  border-radius: 7px;
  padding: 6px 14px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.att-sync-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ============================================================================
   COCKPIT THEME — matches the Power BI CEO Cockpit / SMC mockup design
   (warm cream canvas, white tiles, charcoal table headers, orange captions)
   Appended as an override block: remove this section to restore the old look.
   Developed By: Ameer Shahryar
   ============================================================================ */
:root {
  --bg: #f4f1ed;
  --bg-accent: #eae6e1;
  --panel: #ffffff;
  --panel-soft: #f8f5f1;
  --ink: #111111; /* readability pass 2026-08-28: values jet black (was charcoal #333) */
  --muted: #3d4247; /* labels one step darker (was #6b7177) - hierarchy kept, clearly readable */
  --line: #e9e4de;
  --shadow: 0 10px 24px rgba(184, 178, 170, 0.28);
  --radius: 10px;
  --radius-soft: 8px;
}

/* cockpit signature: charcoal table headers with white text */
.imports-table th,
.jobs-table th,
.fin-table th,
.att-table th,
.ac-table th,
table.data th,
thead th {
  background: #333333 !important;
  color: #ffffff !important;
  border-bottom: 1.5px solid #2b2b2b !important;
}

/* warm zebra rows (cockpit register look) */
.imports-table tbody tr:nth-child(even) td,
.jobs-table tbody tr:nth-child(even) td,
.fin-table tbody tr:nth-child(even) td {
  background: #f8f5f1;
}

/* KPI tiles: white card, warm border/shadow, orange caption like the cockpit */
.imports-metrics .metric,
.metrics .metric {
  border: 1px solid #e9e4de;
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
  box-shadow: 0 1px 2px rgba(184, 178, 170, 0.18), 0 8px 20px rgba(184, 178, 170, 0.22);
}

.imports-metrics .metric span,
.metrics .metric span,
.metric span {
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
}

.imports-metrics .metric strong,
.metrics .metric strong,
.metric strong {
  color: var(--ink);
}

/* panels pick up the warm line + soft warm shadow */
.panel, .fin-block, .card, .sap-fold {
  border-color: #e9e4de;
}

/* ---- Executive / CEO board (Ameer, 2026-07-12) ------------------------- */
.ceo-fx-strip {
  display: flex; align-items: center; gap: 14px;
  margin: 12px 0 4px; padding: 8px 12px;
  border: 1px solid #e8edf3; border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
}
.ceo-fx-lead { font-size: 9.5px; letter-spacing: .08em; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ceo-fx-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.ceo-fx-chip {
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 8px; background: #fff; border: 1px solid #eef1f5;
}
.ceo-fx-chip span { font-size: 10px; font-weight: 700; color: var(--accent); }
.ceo-fx-chip strong { font-size: 13px; font-weight: 800; color: var(--ink); }
.ceo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 760px) { .ceo-grid { grid-template-columns: 1fr; } }
.ceo-bars { display: flex; flex-direction: column; gap: 6px; }
.ceo-bar-row { display: grid; grid-template-columns: 128px 1fr auto; align-items: center; gap: 8px; }
.ceo-bar-label { font-size: 11px; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ceo-bar-track { height: 12px; border-radius: 6px; background: #eef1f5; overflow: hidden; }
.ceo-bar-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.ceo-bar-val { font-size: 11px; font-weight: 700; color: #1f2937; white-space: nowrap; }
.ceo-sev { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ceo-sev-high { background: var(--red); }
.ceo-sev-medium { background: var(--amber); }
.ceo-sev-low { background: #9ca3af; }
.ceo-sev-info { background: var(--green); }

/* ---- department-board rollout switches in the Controls center (2026-07-13) */
.ac-rollout-strip { margin: 0 0 12px; }
.ac-rollout-lead { font-size: 10px; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.ac-rollout {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 6px 6px 0; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-soft); color: var(--ink);
  font: 600 12px/1 var(--font-body); cursor: pointer;
}
.ac-rollout span { font-size: 9px; letter-spacing: .08em; font-weight: 800; color: var(--muted); }
.ac-rollout.on { border-color: var(--accent); background: #fdf3ea; }
.ac-rollout.on span { color: var(--green); }

/* ==========================================================================
   PBI COCKPIT SKIN (Ameer, 2026-07-13) — makes the web app visually identical
   to the Power BI CEO cockpit: warm-white canvas, flat white tiles with
   #E9E4DE hairlines + soft shadow, orange labels, charcoal numbers, dark
   table headers, Segoe UI. Appended last so these rules win by source order.
   ========================================================================== */
body { background: var(--bg); color: var(--ink); }

/* header strip = the cockpit's white band */
.topbar {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.brand-title, .brand-subtitle { color: var(--ink); }

/* KPI tiles = cockpit cards: flat white, hairline, radius 10, soft shadow */
.imports-metrics .metric,
.metrics .metric {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(184, 178, 170, 0.30);
}
.imports-metrics .metric::before,
.metrics .metric::before { display: none; }
.imports-metrics .metric span,
.metrics .metric span {
  color: var(--accent);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.imports-metrics .metric strong,
.metrics .metric strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
}
/* currency code inside KPI callouts: title-sized, muted - the number owns the tile */
.imports-metrics .metric strong .cur,
.metrics .metric strong .cur {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-right: 4px;
  vertical-align: 3px;
}
.imports-metrics .metric em,
.metrics .metric em { color: var(--muted); }

/* section cards */
.imports-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.imports-head h2, .panel-subhead {
  color: var(--ink);
  font-family: var(--font-display);
}

/* tables = cockpit tables: charcoal header, white rows, warm zebra */
.imports-table th {
  background: #333333 !important;
  color: #ffffff !important;
  font-size: 10px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.imports-table td { color: var(--ink); }
.imports-table tbody tr:nth-child(even) td { background: var(--panel-soft); }

/* pills = cockpit slicer buttons: putty base, orange when active */
.module-pill, .branch-pill {
  background: #f1eee9;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
}
.module-pill.active, .branch-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* cockpit LIVE badge */
.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 16px;
  background: #eaf4eb; border: 1px solid var(--line);
  color: var(--green); font: 700 10px/1.4 var(--font-display);
  letter-spacing: 0.04em; white-space: nowrap;
}

/* FX strip + chips already white; align chip accents with cockpit */
.ceo-fx-strip { background: #ffffff; }
.ceo-fx-chip { border-color: var(--line); }

/* ---- Administrator full-cockpit tabs (stacked sections, 2026-07-13) ----- */
/* nav is a TOP folder-tab strip; each section is its own card and the page
   background shows through the gaps (restored to top per Ameer 2026-07-24) */
#ceoPanel { background: transparent; border: none; box-shadow: none; padding: 0; gap: 24px; }
#ceoPanel .ceo-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
#ceoTop { display: grid; gap: 12px; }
.ceo-fold-card { padding: 10px 12px 0; }
.ceo-fold-card .sap-tabs { border-bottom: none; }
/* One common size for every Administrator cockpit folder tab (Ameer 2026-07-14) */
.ceo-fold-card .sap-tab { margin-bottom: 0; border-bottom: 1px solid #d8dfe6; width: 152px; justify-content: center; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ceo-fold-card .sap-tab.active { border-bottom: 1px solid var(--line); }
.ceo-tab-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ceo-tab-head h2 {
  margin: 0;
  font: 700 15px/1.3 var(--font-display);
  color: var(--ink);
  letter-spacing: 0.04em;
}
.ceo-tab-head h2::before { content: "▎"; color: var(--accent); margin-right: 6px; }
.ceo-tab .imports-metrics { margin-bottom: 10px; }

/* ==========================================================================
   Partner-brand logo strip on the profile header card
   Brand strip - Developed By: Ameer Shahryar
   ========================================================================== */
.smc-brand-strip {
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(72px, 118px));
  gap: 8px;
  justify-content: end;
  align-self: center;
  min-width: 0;
  overflow: hidden;
}

.smc-brand-card {
  /* stays white even under a dark theme so logos remain legible */
  background: #ffffff;
  border: 1px solid #e5e0d9;
  border-radius: var(--radius-soft, 8px);
  height: 48px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(51, 51, 51, 0.06);
}

.smc-brand-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* the profile row may wrap so the strip drops below the user info cleanly */
.session-user-row.smc-has-brands {
  flex-wrap: wrap;
  row-gap: 10px;
}

@media (max-width: 1500px) {
  .smc-brand-strip {
    grid-template-columns: repeat(7, minmax(64px, 1fr));
  }
}

@media (max-width: 1180px) {
  .smc-brand-strip {
    margin-left: 0;
    flex-basis: 100%;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    justify-content: start;
  }

  .smc-brand-card {
    height: 44px;
  }
}

/* ==========================================================================
   Inventory tab - vendor-wise stock by Sub FolderType (Ameer, 2026-07-14)
   Collapsible vendor -> folder-type -> item -> warehouse tree. Colours ride the
   cockpit CSS variables so a future dark theme flows through automatically.
   Inventory tab - Developed By: Ameer Shahryar
   ========================================================================== */
.smc-inv-updated { margin-left: auto; font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* vendor folder tabs: reuse the .sap-tab chips but force a UNIFORM width so the
   ~23-tab strip reads as a tidy, even grid regardless of name length. Text is
   centred; long vendor names ellipsize (full name in the button title tooltip).
   One "All" chip + one per VendorName. */
.smc-inv-tabs { margin: 2px 0 14px; }
.smc-inv-tabs .sap-tab {
  text-transform: none; letter-spacing: 0.02em;
  width: 128px; justify-content: center; padding: 0 8px;
}
.smc-inv-tabs .smc-inv-tabtxt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Model -> Finish cascade strips (Ameer 2026-07-24): the SAME chips as the vendor
   strip, stacked below it, each led by a small caption so the three levels read
   as Vendor -> Model -> Finish. Hidden (is-hidden) until their parent is chosen.
   Developed By: Ameer Shahryar */
.smc-inv-cascadetabs { margin: 0 0 12px; }
.smc-inv-tablead {
  align-self: flex-end; flex: none; height: 30px; line-height: 30px;
  margin: 0 6px -1px 2px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-deep);
}

.smc-inv-controls { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin: 6px 0 12px; }
.smc-inv-ctl { display: flex; flex-direction: column; gap: 4px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.smc-inv-ctl select,
.smc-inv-ctl input {
  font: inherit; text-transform: none; letter-spacing: normal;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-soft);
  padding: 6px 10px; min-width: 240px;
}
.smc-inv-ctl select:focus,
.smc-inv-ctl input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(245, 130, 31, 0.18); }

.smc-inv-tree { border: 1px solid var(--line); border-radius: var(--radius-soft); overflow: hidden; }
.smc-inv-row {
  display: grid;
  /* item name/description gets the generous share; Manufacturer/Article#/Foreign
     fit their codes; On Hand/Committed/Available/On Order are tight (values are
     small); Unit Cost, Sales Price and Stock Value stay wide for the full PKR
     figures. Sales Price, Margin % AND Markup % sit immediately AFTER Unit
     Cost (Ameer 2026-07-20: "we need to have both... both tells different
     stories" - margin is the business lens, markup audits the cost-plus rule:
     every x2.5 shutter must read exactly 150.0%). Retail Value (stock at
     SELLING price, added 2026-07-20) closes the row after Stock Value: cost
     lens, then retail lens. Model + Finish (OITM.U_LivMod / U_LivFin, added
     2026-07-23) are two more text tracks after Foreign Name, before On Hand.
     16 columns total - the text and qty tracks are trimmed a touch so the
     second money pair still fits. Keep this list in step with the 820px
     override below. Developed By: Ameer Shahryar */
  grid-template-columns: minmax(180px, 2fr) minmax(60px, 88px) minmax(60px, 88px) minmax(60px, 88px) minmax(70px, 112px) minmax(72px, 120px) repeat(4, minmax(42px, 56px)) minmax(80px, 104px) minmax(80px, 104px) minmax(48px, 62px) minmax(48px, 62px) minmax(90px, 120px) minmax(92px, 128px);
  align-items: center; gap: 6px; padding: 6px 12px;
  border-top: 1px solid var(--line);
}
.smc-inv-row:first-child { border-top: none; }
.smc-inv-row > span:not(.smc-inv-label) {
  text-align: right; font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--ink); white-space: nowrap;
}
/* Article# / Foreign Name: text columns, left-aligned, ellipsis when long */
.smc-inv-row > span.smc-inv-txt {
  text-align: left; font-size: 11px; color: var(--muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.smc-inv-label { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smc-inv-label em { font-style: normal; color: var(--muted); font-weight: 500; font-size: 10.5px; }
.smc-inv-caret { width: 14px; flex: none; text-align: center; color: var(--accent); font-size: 10px; }
.smc-inv-money { font-weight: 700; }
/* Unit Cost = SAP's moving-average cost, read-only. A dash (never 0.00) marks an
   item that has never been received, so the gaps are obvious at a glance.
   Developed By: Ameer Shahryar */
.smc-inv-cost { font-weight: 600; }
.smc-inv-row > span.smc-inv-nocost { text-align: right; color: var(--muted); opacity: .75; }
/* Sales Price = price list '03 RETAIL PKR'; Margin % = profit on that price.
   Both render a dash (never 0.00 / 0%) until a real price is decided, so the
   un-priced items stand out instead of looking like giveaways. A NEGATIVE
   margin - selling below moving-average cost - is called out in red.
   Developed By: Ameer Shahryar */
.smc-inv-price { font-weight: 600; }
.smc-inv-row > span.smc-inv-noprice { text-align: right; color: var(--muted); opacity: .75; }
.smc-inv-row > span.smc-inv-margin { font-weight: 700; color: var(--accent); }
.smc-inv-row > span.smc-inv-margin--loss { color: #c0392b; }
/* Retail Value = stock at SELLING price (On Hand x price list 03 RETAIL PKR).
   Dash when unpriced and on the damaged/dead stores (excluded by design).
   Roll-ups sum it and append a small muted coverage suffix - "84%" = share of
   that group's COST value that is actually priced, so a partial retail total
   can never silently understate. The suffix inherits the row's ink (white on
   the dark grand-total band) and reads muted via opacity, not a fixed color.
   Developed By: Ameer Shahryar */
.smc-inv-retail { font-weight: 700; }
.smc-inv-cov {
  font-style: normal; font-weight: 600; font-size: 9.5px;
  margin-left: 4px; opacity: .65; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* Inventory UoM suffix inside the On Hand cell ("94 PCS") - item + warehouse
   rows only; roll-ups stay bare numbers because mixed UoMs must never sum
   visually. Muted via opacity so it inherits any row band's ink, same recipe
   as .smc-inv-cov. Developed By: Ameer Shahryar */
.smc-inv-uom {
  font-style: normal; font-weight: 600; font-size: 9px;
  margin-left: 3px; opacity: .65; letter-spacing: .02em;
}

.smc-inv-colhead {
  background: #333333; color: #fff;
  text-transform: uppercase; letter-spacing: .05em; font-size: 10px; font-weight: 700;
}
.smc-inv-colhead span,
.smc-inv-colhead .smc-inv-label { color: #fff !important; }

.smc-inv-vendor { cursor: pointer; background: linear-gradient(180deg, #ffffff 0%, #fbf7f2 100%); }
.smc-inv-vendor:hover { background: #fdf3e8; }
.smc-inv-vendor .smc-inv-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--ink); }
.smc-inv-vendor > span:not(.smc-inv-label) { font-weight: 700; }

.smc-inv-group { cursor: pointer; background: var(--panel-soft); }
.smc-inv-group .smc-inv-label { padding-left: 18px; font-weight: 600; color: var(--accent-deep); font-size: 12px; }

.smc-inv-item { background: var(--panel); }
/* Show the FULL item description: let it wrap to a second line instead of
   clipping with an ellipsis. Font is dropped ~1.5px so long names fit without
   dominating the row. Developed By: Ameer Shahryar */
.smc-inv-item .smc-inv-label {
  padding-left: 42px; font-weight: 600;
  white-space: normal; overflow: visible; text-overflow: clip;
  flex-wrap: wrap; line-height: 1.25; font-size: 11.5px;
}
.smc-inv-item .smc-inv-code { margin-left: 4px; }

/* Edit-description affordance on an item row: an SMC-orange pencil that stays
   faint until the row is hovered, so the list still reads as a report. Custom
   (non-SAP) action => SMC orange. Developed By: Ameer Shahryar */
.smc-inv-edit {
  flex: none; margin-left: 6px; padding: 0 5px; height: 18px; line-height: 16px;
  border: 1px solid transparent; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--accent); font-size: 11px;
  opacity: 0; transition: opacity .12s ease, background .12s ease, border-color .12s ease;
}
.smc-inv-item:hover .smc-inv-edit,
.smc-inv-edit:focus-visible { opacity: 1; }
.smc-inv-edit:hover { background: rgba(245, 130, 32, 0.12); border-color: var(--accent); }

/* Item master-data editor panel (pre-go-live cleanup tool). Two-column field
   grid so all ~16 fields are reachable without scrolling on a normal screen.
   Developed By: Ameer Shahryar */
.smc-inv-editor {
  position: fixed; inset: 0; z-index: 9100; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); padding: 24px;
}
.smc-inv-editor.is-open { display: flex; }
.smc-inv-editcard {
  width: min(880px, 100%); max-height: 88vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-soft); box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  padding: 18px 20px 14px;
}
.smc-inv-edithead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.smc-inv-edittitle { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.smc-inv-edithead .smc-inv-editcode {
  font-size: 11.5px; font-weight: 700; color: var(--accent-deep);
  background: #fdf3e8; border: 1px solid var(--accent); border-radius: 5px; padding: 2px 8px;
}
.smc-inv-editx {
  margin-left: auto; width: 26px; height: 26px; line-height: 1; font-size: 18px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft);
  color: var(--muted); cursor: pointer;
}
.smc-inv-editx:hover { border-color: var(--accent); color: var(--accent); }
.smc-inv-editnote { font-size: 10.5px; color: var(--muted); line-height: 1.45; margin-bottom: 12px; }
.smc-inv-editloading { padding: 26px 4px; font-size: 12px; color: var(--muted); text-align: center; }
.smc-inv-editgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
@media (max-width: 720px) { .smc-inv-editgrid { grid-template-columns: minmax(0, 1fr); } }
.smc-inv-editrow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.smc-inv-editlabel {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.smc-inv-editreq { color: var(--accent); }
.smc-inv-editfield {
  width: 100%; min-width: 0; padding: 6px 9px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.smc-inv-editfield:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.18);
}
.smc-inv-editfield:disabled { background: var(--panel-soft); color: var(--muted); }
/* UoM inputs: short uppercase unit codes (PCS, SET, SQM). The transform is the
   visual cue; app.js uppercases the actual value as typed and the server
   re-coerces, so display and stored value can never disagree. */
.smc-inv-editfield--uom { text-transform: uppercase; max-width: 130px; }
.smc-inv-editfoot {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.smc-inv-editmsg { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 600; color: var(--muted); }
.smc-inv-editmsg.is-error { color: #b3261e; white-space: pre-wrap; }
/* inline below-cost warning under the Sales Price input - warn, never block */
.smc-inv-editwarn { font-size: 10.5px; font-weight: 700; color: #b3261e; line-height: 1.35; }
.smc-inv-editcredit { margin-top: 8px; font-size: 9.5px; color: var(--muted); text-align: right; letter-spacing: .04em; }
.smc-inv-editbtn {
  flex: none; padding: 4px 12px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink);
}
.smc-inv-editbtn:hover:not(:disabled) { background: #fdf3e8; border-color: var(--accent); }
.smc-inv-editsave { background: #F58220; border-color: #F58220; color: #fff; }
.smc-inv-editsave:hover:not(:disabled) { background: #dc7018; border-color: #dc7018; color: #fff; }
.smc-inv-editbtn:disabled { opacity: .55; cursor: progress; }

/* Update-picture panel inside the item editor: current picture + an SMC-orange
   "Update picture…" button (custom action => SMC orange). The new image is saved
   to D:\IMAGES and written through to OITM.PicturName via the Service Layer, so
   the corrected picture shows in the SAP client AND the dashboard.
   Developed By: Ameer Shahryar */
.smc-inv-editpic {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-soft);
}
.smc-inv-piccur { flex: 0 0 auto; }
.smc-inv-picimg {
  width: 68px; height: 68px; border-radius: 8px; object-fit: cover;
  background: #fff; border: 1px solid var(--line); display: block;
}
.smc-inv-picimg--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-align: center;
  color: var(--muted); text-transform: uppercase;
}
.smc-inv-picctl { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.smc-inv-piclabel {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.smc-inv-picrow { display: flex; align-items: center; gap: 8px; }
.smc-inv-picbtn {
  flex: none; padding: 5px 14px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: #F58220; border: 1px solid #F58220; color: #fff;
}
.smc-inv-picbtn:hover:not(:disabled) { background: #dc7018; border-color: #dc7018; }
.smc-inv-picbtn:disabled { opacity: .55; cursor: progress; }
.smc-inv-picmsg { font-size: 10.5px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.smc-inv-picmsg.is-error { color: #b3261e; white-space: pre-wrap; }
.smc-inv-picmsg.is-ok { color: #1a7f37; }

/* Item picture thumbnails in the Inventory list. Developed By: Ameer Shahryar */
.smc-inv-thumb {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 6px;
  object-fit: cover; background: var(--panel-2, #f1f1f1);
  border: 1px solid var(--border, #e0e0e0); margin-right: 2px;
  cursor: zoom-in; vertical-align: middle;
}
/* CAD dimensional drawing for shutter/panel items: show the whole drawing on
   white (contain, not cropped) so the line-work reads. Developed By: Ameer Shahryar */
.smc-inv-thumb--draw {
  object-fit: contain; background: #fff; cursor: zoom-in;
}
.smc-inv-thumb--empty {
  cursor: default; display: inline-block; position: relative;
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(245,130,32,.08) 5px 10px),
    var(--panel-2, #f1f1f1);
}
.smc-inv-thumb--empty::after {
  content: ""; position: absolute; inset: 10px; border-radius: 3px;
  border: 1.5px solid var(--border, #d8d8d8);
}

/* Click-to-enlarge, zoomable/pannable overlay. Developed By: Ameer Shahryar */
.smc-inv-lightbox {
  position: fixed; inset: 0; z-index: 9000; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .82); padding: 24px; gap: 10px;
}
.smc-inv-lightbox.is-open { display: flex; }
/* the stage clips the zoomed image and hosts the pan/zoom interactions */
.smc-lb-stage {
  position: relative; width: 90vw; height: 84vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 8px; touch-action: none;
}
.smc-lb-img {
  max-width: 90vw; max-height: 84vh;
  border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  background: #fff; cursor: zoom-in;
  transform-origin: center center; will-change: transform;
  /* keep vector drawings crisp; never let the browser smooth-blur on upscale */
  image-rendering: -webkit-optimize-contrast;
  user-select: none; -webkit-user-drag: none;
}
.smc-lb-cap { color: #fff; font-weight: 600; font-size: 14px; text-align: center; }
.smc-lb-tools {
  position: fixed; top: 18px; right: 18px; z-index: 9001;
  display: flex; gap: 8px;
}
.smc-lb-btn {
  width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(20, 20, 20, .55); color: #fff;
  font-size: 20px; line-height: 1; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .12s, border-color .12s, transform .06s;
}
.smc-lb-btn:hover { background: #F58220; border-color: #F58220; }
.smc-lb-btn:active { transform: scale(.94); }
.smc-lb-btn--fit { width: auto; padding: 0 12px; font-size: 13px; }
.smc-lb-close { background: rgba(20, 20, 20, .55); }
.smc-lb-close:hover { background: #b33; border-color: #b33; }

.smc-inv-whs { background: var(--panel); }
.smc-inv-whs .smc-inv-label { padding-left: 62px; color: var(--muted); font-size: 11.5px; }
.smc-inv-whs > span:not(.smc-inv-label) { color: var(--muted); font-size: 11.5px; }

.smc-inv-grand {
  background: #333333; color: #fff;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 800;
}
.smc-inv-grand span,
.smc-inv-grand .smc-inv-label { color: #fff !important; font-family: var(--font-display); }

@media (max-width: 820px) {
  /* 16 columns (Model + Finish added after Foreign Name, 2026-07-23; Retail
     Value after Stock Value, 2026-07-20) - this track list must stay in step
     with the desktop one above, or the cells shift out from under their
     headers. Developed By: Ameer Shahryar */
  .smc-inv-row { grid-template-columns: minmax(130px, 2fr) repeat(3, minmax(52px, 1fr)) minmax(60px, 1.1fr) minmax(62px, 1.1fr) repeat(4, minmax(38px, .8fr)) minmax(64px, 1fr) minmax(64px, 1fr) minmax(40px, .8fr) minmax(40px, .8fr) minmax(72px, 1.1fr) minmax(76px, 1.2fr); font-size: 11px; gap: 4px; }
  .smc-inv-ctl select, .smc-inv-ctl input { min-width: 160px; }
}

/* ====================================================================
   Vendor -> Model -> Finish -> Item stock browser (Inventory tab).
   Cascade: pick a vendor chip, list its models, drill a model to its
   finishes, drill a finish to the item rows. Reuses the cockpit chips,
   money style and dark band from the vendor board above so the two views
   read as one board. Developed By: Ameer Shahryar
   ==================================================================== */
/* the By Vendor / By Model view switch - .sap-tabs gives it the seam line */
.smc-inv-modetabs { margin: 0 0 14px; }
/* vendor chips strip (reuses .smc-inv-tabs uniform-width chips) */
.smc-mf-vendors { margin: 2px 0 12px; }

/* breadcrumb / back trail */
.smc-mf-crumb { display: flex; align-items: center; gap: 10px; min-height: 24px; margin: 0 0 12px; flex-wrap: wrap; }
.smc-mf-crumb:empty { display: none; }
.smc-mf-trail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.smc-mf-crumbitem {
  border: none; background: none; cursor: pointer; padding: 2px 5px;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  color: var(--accent-deep); border-radius: 5px;
}
.smc-mf-crumbitem:hover { background: #fdf3e8; }
.smc-mf-crumbcur { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--ink); }
.smc-mf-sep { color: var(--muted); font-size: 12px; }
.smc-mf-back {
  margin-left: auto; border: 1px solid var(--line); background: var(--panel-soft);
  color: var(--muted); border-radius: 6px; padding: 3px 11px; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.smc-mf-back:hover { border-color: var(--accent); color: var(--accent-deep); }

/* two side-by-side columns: Models | Finishes */
.smc-mf-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.smc-mf-col { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-soft); overflow: hidden; background: var(--panel); }
.smc-mf-colcap {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-soft); border-bottom: 1px solid var(--line);
  padding: 7px 12px; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-deep);
}
.smc-mf-colcap > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smc-mf-colsearch {
  margin-left: auto; flex: none; width: 150px; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--ink); background: #fff;
  text-transform: none; letter-spacing: 0;
}
.smc-mf-colsearch:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(245, 130, 32, .18); }
.smc-mf-list { overflow: hidden auto; max-height: 440px; }
.smc-mf-note { padding: 16px 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.smc-mf-note--hint { font-style: italic; }
.smc-mf-note--err { color: #c0392b; }

/* shared row grid (list rows + item rows; item rows override to 3 cols) */
.smc-mf-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(42px, 60px) minmax(52px, 76px) minmax(74px, 104px);
  align-items: center; gap: 6px; padding: 7px 12px;
  border-top: 1px solid var(--line); font-size: 12px; width: 100%;
}
.smc-mf-row:first-child { border-top: none; }
.smc-mf-row > span:not(.smc-mf-flabel) {
  text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
/* clickable list rows are <button> - strip the default button chrome */
.smc-mf-pick {
  -webkit-appearance: none; appearance: none; text-align: left; cursor: pointer;
  background: var(--panel); border: 0; border-top: 1px solid var(--line); border-radius: 0; font: inherit;
}
.smc-mf-pick:hover { background: #fdf3e8; }
.smc-mf-pick.active { background: #fdf3e8; box-shadow: inset 3px 0 0 var(--accent); }
.smc-mf-flabel { min-width: 0; overflow: hidden; display: flex; align-items: baseline; gap: 8px; }
.smc-mf-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.smc-mf-pick.active .smc-mf-nm { color: var(--accent-deep); font-weight: 700; }
.smc-mf-tag { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--accent-deep); opacity: .85; flex: none; text-transform: uppercase; letter-spacing: .02em; }
.smc-mf-code { font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); flex: none; }
.smc-mf-money { font-weight: 700; }
.smc-mf-zero { color: var(--muted); opacity: .75; }

.smc-mf-colhead {
  background: #333333; color: #fff; position: sticky; top: 0; z-index: 1;
  text-transform: uppercase; letter-spacing: .05em; font-size: 10px; font-weight: 700;
}
.smc-mf-colhead span,
.smc-mf-colhead .smc-mf-flabel { color: #fff !important; }
.smc-mf-row--blank { background: var(--panel-soft); }
.smc-mf-row--blank .smc-mf-nm { color: var(--muted); }

/* item rows panel (Vendor + Model + Finish), below the two columns */
.smc-mf-items { margin-top: 16px; }
.smc-mf-items:empty { margin-top: 0; }
.smc-mf-itemshead { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.smc-mf-title { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.3; }
.smc-mf-summary { margin: 0; }
.smc-mf-itemstable { border: 1px solid var(--line); border-radius: var(--radius-soft); overflow: hidden; }
.smc-mf-itemrow { grid-template-columns: minmax(160px, 1fr) minmax(64px, 96px) minmax(96px, 132px); }
.smc-mf-total {
  background: #333333; color: #fff;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 800;
}
.smc-mf-total span,
.smc-mf-total .smc-mf-flabel { color: #fff !important; font-family: var(--font-display); }

@media (max-width: 720px) {
  .smc-mf-cols { grid-template-columns: minmax(0, 1fr); }
  .smc-mf-list { max-height: 300px; }
  .smc-mf-colsearch { width: 120px; }
}

/* ---- SMC logo "light" effect (Ameer 2026-07-30): a breathing glow that reads
   as the logo lighting up and dimming - the web version of the light-on/off he
   wanted for the SAP background (impossible there, natural here).
   Respectful of users who prefer reduced motion. Developed By: Ameer Shahryar */
@keyframes smcLogoLight {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 130, 32, 0)) brightness(0.96); }
  50%      { filter: drop-shadow(0 0 16px rgba(245, 130, 32, 0.9)) brightness(1.06); }
}
.brand-mark { animation: smcLogoLight 3.6s ease-in-out infinite; }
.login-logo { animation: smcLogoLight 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .login-logo { animation: none; }
}

/* ---- department-board enhancement pass (2026-07-30) — Developed By: Ameer Shahryar ---- */
/* STORE / IT reuse the imports board with money hidden: cover the new money spots */
.hide-financials #impBalDueTotal { display: none; }
.hide-financials [data-tab="balances"], .hide-financials [data-pane="balances"] { display: none !important; }
.imports-table.t-bal { min-width: 1180px; }
.alert-row .alert-date { margin-left: auto; color: var(--muted, #8a8478); font-style: normal; font-size: 11px; white-space: nowrap; }
/* overdue row tint + design-board age cells + leave balance hint */
tr.is-overdue td { background: rgba(211, 47, 47, 0.07); }
.age-late { color: #D32F2F; font-weight: 600; white-space: nowrap; }
.age-left { color: #8a8478; white-space: nowrap; }
.req-bal { display: inline-block; margin-left: 8px; font-size: 11px; color: #8a8478; white-space: nowrap; }
.req-bal.lv-out { color: #D32F2F; font-weight: 600; }
#overdueTile { cursor: pointer; }
#overdueTile.active { outline: 2px solid #F58220; outline-offset: -2px; }

/* ---- BOARD FRAME (Ameer 2026-08-01): every department board shares one rhythm -
   8 equal KPI tiles, uniform height, then strip -> alerts -> work area.
   Scoped to department panels; the cockpit keeps its own layouts. ---- */
.imports-panel .imports-metrics, section.metrics#jobMetrics {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px;
}
.imports-panel .imports-metrics .metric, section.metrics#jobMetrics .metric {
  min-height: 88px; margin: 0;
}
@media (max-width: 1500px) {
  .imports-panel .imports-metrics, section.metrics#jobMetrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .imports-panel .imports-metrics, section.metrics#jobMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- per-tab financial-values hiding (Ameer 2026-08-03): .hide-financials is
   the panel-scoped money-off switch, driven by the Controls matrix finTabs map.
   Extends the original imports/store coverage to every money surface. ---- */
.hide-financials td.fin-amt,
.hide-financials th.fw-money,
.hide-financials .metric--money,
.hide-financials .metric em .cur,
.hide-financials #dispQuotTotal,
.hide-financials #dispSoTotal,
.hide-financials .ceo-bar-val,
.hide-financials .smc-mf-money,
.hide-financials .num-cell { display: none !important; }
.hide-financials#financePanel .imports-metrics { display: none !important; }

/* per-tab money-off also blanks ROW-level cost / price / margin / markup /
   stock+retail values in the inventory tree (Ameer 2026-08-03). visibility
   (not display) keeps the grid columns aligned; headers 11+ are the money
   columns (Unit Cost, Sales Price, Margin %, Markup %, Stock Value, Retail). */
.hide-financials .smc-inv-money,
.hide-financials .smc-inv-margin,
.hide-financials .smc-inv-noprice { visibility: hidden; }
.hide-financials .smc-inv-colhead span:nth-child(n+11) { visibility: hidden; }

/* ---- two-line inventory rows (Ameer 2026-08-03): line 1 = one-line description
   + the numeric columns aligned to it; line 2 = muted meta (code · maker ·
   article · foreign name · model · finish). 11 grid tracks now: label + 4 qty
   + 6 money. Overrides the earlier 16-track templates by source order. ---- */
.smc-inv-row {
  grid-template-columns: minmax(260px, 3fr) repeat(4, minmax(46px, 64px)) minmax(84px, 112px) minmax(84px, 112px) minmax(50px, 64px) minmax(50px, 64px) minmax(92px, 124px) minmax(94px, 130px);
}
@media (max-width: 820px) {
  .smc-inv-row { grid-template-columns: minmax(150px, 2fr) repeat(4, minmax(38px, .8fr)) minmax(64px, 1fr) minmax(64px, 1fr) minmax(40px, .8fr) minmax(40px, .8fr) minmax(72px, 1.1fr) minmax(76px, 1.2fr); }
}
/* ---- Reveal-Margins gating (2026-08-17): users WITHOUT the revealMargins grant
   never receive MarginPct / RetailValue / PotentialProfit (stripped server-side)
   and the client omits the Margin %, Markup % and Retail Value column spans from
   every row. That leaves 8 tracks (label + 4 qty + Unit Cost + Sales Price +
   Stock Value), so the grid must re-template to 8 or the cells shift out from
   under their headers. Host #invTree carries .smc-inv--nomargins; the id keeps
   these rules above the plain .smc-inv-row templates at every breakpoint.
   Privileged users and superuser keep the 11-track layout untouched.
   Developed By: Ameer Shahryar ---- */
#invTree.smc-inv--nomargins .smc-inv-row {
  grid-template-columns: minmax(260px, 3fr) repeat(4, minmax(46px, 64px)) minmax(84px, 112px) minmax(84px, 112px) minmax(92px, 124px);
}
@media (max-width: 820px) {
  #invTree.smc-inv--nomargins .smc-inv-row {
    grid-template-columns: minmax(150px, 2fr) repeat(4, minmax(38px, .8fr)) minmax(64px, 1fr) minmax(64px, 1fr) minmax(72px, 1.1fr);
  }
}
.smc-inv-lines { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.smc-inv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.smc-inv-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--muted); letter-spacing: 0.2px; }
.smc-inv-label--item { align-items: center; }
/* money-off header hiding under the new 11-track layout: money headers are 6+ */
.hide-financials .smc-inv-colhead span:nth-child(n+6) { visibility: hidden; }

/* ---- Inventory Model/Finish DONUT pair (Ameer 2026-08-03): SVG donuts, top-5
   slices + neutral OTHER, legend carries every value; slice palette
   CVD-validated on the white card. Money values wear .ceo-bar-val so the
   per-tab financial-values switch hides them. Developed By: Ameer Shahryar ---- */
.smc-donut-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .smc-donut-duo { grid-template-columns: 1fr; } }
.smc-donut-block { min-width: 0; }
.smc-donut-wrap { display: flex; align-items: center; gap: 16px; }
.smc-donut-svg { width: 190px; height: 190px; flex: none; }
.smc-donut-svg [data-slice] { transition: opacity 0.12s ease; }
.smc-donut-svg .is-pick, .smc-donut-lgrow.is-pick { cursor: pointer; }
.smc-donut-total { font: 700 20px/1 var(--font-display); fill: var(--ink); font-variant-numeric: tabular-nums; }
.smc-donut-cap { font: 700 9px/1 var(--font-body); letter-spacing: 0.14em; fill: var(--muted); }
.smc-donut-legend { display: grid; gap: 5px; min-width: 0; flex: 1 1 auto; align-content: center; }
.smc-donut-lgrow { display: grid; grid-template-columns: 12px minmax(80px, 1fr) auto 46px; gap: 8px; align-items: center; font-size: 12px; padding: 3px 6px; border-radius: 6px; }
.smc-donut-lgrow.is-hot { background: var(--panel-soft); }
.smc-donut-sw { width: 12px; height: 12px; border-radius: 4px; }
.smc-donut-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.smc-donut-val { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.smc-donut-share { color: var(--muted); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.smc-donut-tip { position: fixed; z-index: 80; background: #ffffff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 7px 11px; font-size: 12px; color: var(--ink); pointer-events: none; }

/* ============================================================================
   BOARDS = COCKPIT THEME, PASS 2 (Ameer 2026-08-03: "the theme of the
   Departmental Dashboard still not same as CEO Cockpit"). One appended layer,
   wins by source order; remove to restore. Four fixes: (1) board section
   headers get the cockpit's orange U+258E signature, (2) the last square /
   cool-grey card chrome goes warm + rounded, (3) stage chips, folder tabs and
   bar charts drop their pre-skin blue-greys for the warm putty set, (4) the
   dark-theme leftover status colors (light pastels on white) become the deep
   cockpit statuses. Developed By: Ameer Shahryar
   ============================================================================ */

/* (1) board headers wear the cockpit signature */
.imports-head { border-bottom-color: var(--line); }
.imports-head h2::before { content: "\258E"; color: var(--accent); margin-right: 6px; }
.imports-updated, .imports-empty { color: var(--muted); }

/* (2) the last cool / square cards: session strip + Design three-pane */
.session-card, .pipeline, .worklist, .detail-pane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.worklist { overflow: hidden; }
.worklist-toolbar { background: rgba(248, 245, 241, 0.88); }
.active-user-pill { border-color: var(--line); border-radius: var(--radius-soft); }
.leave-entry select, .leave-entry input { border-color: var(--line); }

/* (3) pre-skin blue-greys -> warm putty (stage chips, folder tabs, bars, cells) */
.stage-chip {
  border-color: var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f8f5f1 100%);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(184, 178, 170, 0.20);
}
.stage-chip:hover { box-shadow: 0 5px 12px rgba(184, 178, 170, 0.30); }
.stage-chip strong { background: #efe9e2; color: var(--ink); }
.stage-no { color: #6b7177; } /* readability pass: was #a39b8f (2.9:1) - now ~4.9:1, still lighter than names */
.imports-metrics .metric:hover,
.metrics .metric:hover { box-shadow: 0 2px 4px rgba(184, 178, 170, 0.24), 0 14px 30px rgba(184, 178, 170, 0.36); }
.sap-tabs { border-bottom-color: #ddd6cd; }
.sap-tab { border-color: #ddd6cd; background: #f1eee9; color: var(--muted); }
.sap-tab:hover { background: #f7f4f0; color: var(--ink); } /* hover must stay darker than the darkened base */
.sap-tab.active { color: var(--ink); }
.ceo-fold-card .sap-tab { border-bottom-color: #ddd6cd; }
.imports-table td { border-bottom-color: #f0ece6; }
.imports-table tr:nth-child(even):not(.att-branch) td { background: #f8f5f1; }
.imports-table tr.att-branch td { background: #f1eee9; border-top-color: #ddd6cd; }
.jobs-table th, .jobs-table td { border-bottom-color: var(--line); border-right-color: #f0ece6; }
.ceo-bar-label { color: var(--muted); }
.ceo-bar-track { background: #efe9e2; }
.ceo-bar-val { color: var(--ink); }

/* (4) dark-theme leftovers -> deep cockpit statuses (readable on white) */
.plan-st-open, .opp-chip-open, .fin-mode-transfer { background: rgba(29, 111, 184, 0.12); color: #1d6fb8; }
.plan-st-won, .opp-chip-won, .fin-mode-cash { background: rgba(46, 125, 50, 0.12); color: var(--green); }
.plan-st-lost, .opp-chip-lost { background: rgba(211, 47, 47, 0.10); color: var(--red); }
.plan-st-closed, .plan-st-other,
.fin-mode-mixed, .fin-mode-other { background: #f1eee9; color: var(--muted); }
.fin-mode-cheque { background: rgba(245, 130, 31, 0.15); color: var(--accent-deep); }
.fin-mode-card { background: rgba(124, 77, 190, 0.12); color: #7c4dbe; }
.fin-dp-cust { color: #1d6fb8; }
.fin-dp-vend { color: var(--accent-deep); }
.ledger-owes { color: #b26a00; }
.ledger-lead { color: #1d6fb8; }
.rate-spark-chg.up { color: var(--green); }
.rate-spark-chg.down { color: var(--red); }
.sched-carrier.sched-ok { color: var(--green); border-color: rgba(46, 125, 50, 0.45); }
.sched-carrier.sched-pending { color: #b26a00; border-color: rgba(178, 106, 0, 0.45); }
.sched-carrier.sched-err { color: var(--red); border-color: rgba(211, 47, 47, 0.45); }
.ac-cell.ac-allow, .ac-cell-demo.ac-allow { color: var(--green); border-color: rgba(46, 125, 50, 0.5); background: rgba(46, 125, 50, 0.07); }
.ac-cell.ac-deny, .ac-cell-demo.ac-deny { color: var(--red); border-color: rgba(211, 47, 47, 0.5); background: rgba(211, 47, 47, 0.06); }
.plan-st-open, .plan-st-won, .plan-st-lost, .opp-chip-open, .opp-chip-won, .opp-chip-lost { font-weight: 700; }
.age-left, .req-bal, .alert-row .alert-date { color: var(--muted); }
.smc-donut-val, .smc-donut-name { white-space: nowrap; }

/* ---- warehouse MULTI-SELECT chips (Ameer 2026-08-05): same chip grammar as
   vendor tabs; several chips can be active at once. Developed By: Ameer Shahryar ---- */
.smc-inv-whsctl { min-width: 0; }
.smc-whs-tabs { border-bottom: none; gap: 4px; }
.smc-whs-tabs .sap-tab { border-radius: 7px; border-bottom: 1px solid #ddd6cd; margin-bottom: 0; height: 26px; font-size: 11px; padding: 0 10px; }
.smc-whs-tabs .sap-tab.active { background: var(--accent); border-color: var(--accent-deep); color: #ffffff; box-shadow: none; }
.smc-whs-hint { font-style: normal; font-size: 9px; color: var(--muted); letter-spacing: 0.04em; }

/* ---- MISSING model/finish warning chips (Ameer 2026-08-05): the gap is a
   filter - red-tinted pills at the front of the cascade strips.
   Developed By: Ameer Shahryar ---- */
.sap-tab[data-model="__nomod__"], .sap-tab[data-finish="__nofin__"] {
  background: #fdf1f0; border-color: #f2b8b5; color: #b3261e;
}
.sap-tab[data-model="__nomod__"].active, .sap-tab[data-finish="__nofin__"].active {
  background: #b3261e; border-color: #b3261e; color: #ffffff;
  box-shadow: inset 0 2px 0 #7f1d1d;
}
.sap-tab[data-model="__nomod__"] .sap-tab-badge, .sap-tab[data-finish="__nofin__"] .sap-tab-badge {
  background: #b3261e;
}

/* ---- CUSTOMER REGISTER (Customers tab, Ameer 2026-08-06): every OCRD
   customer, balance-state pills, inline statements. Warm cockpit tokens; the
   NO ACTIVITY pill wears the same red tint as the MISSING chips above.
   Developed By: Ameer Shahryar ---- */
.cusreg-head { margin-top: 26px; }
.cusreg-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; }
.cusreg-controls .doc-filters { margin-right: auto; }
.cusreg-controls .doc-filter strong { font-variant-numeric: tabular-nums; margin-left: 2px; }
.doc-filter.cus-noact { background: #fdf1f0; border-color: #f2b8b5; color: #b3261e; }
.doc-filter.cus-noact.active { background: #b3261e; border-color: #b3261e; color: #ffffff; }
.imports-table.t-cusreg th.fw-status { width: 128px; }
.cusreg-row { cursor: pointer; }
.cusreg-row.open td { background: rgba(245, 130, 32, 0.10); }
.cus-docs { text-align: right; font-variant-numeric: tabular-nums; }
.cus-state { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; }
.cus-state-balance { background: rgba(245, 130, 31, 0.14); color: var(--accent-deep); }
.cus-state-zero { background: rgba(46, 125, 50, 0.10); color: var(--green); }
.cus-state-noact { background: rgba(211, 47, 47, 0.08); color: #b3261e; }
/* inline statement panel - same ledger chrome, framed in the accent */
.cusreg-ledger-row > td { padding: 0 0 14px; }
.cusreg-ledger { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--panel-soft); padding: 12px 14px; margin: 6px 2px 2px; }
.cusreg-ledger-cap { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cusreg-ledger-cap strong { font-size: 13px; }
.cusreg-ledger-cap span { font-size: 11px; color: var(--muted); }
.imports-table.t-cusstmt { width: 100%; }
.cusreg-close td { font-weight: 700; border-top: 2px solid var(--line); background: rgba(245, 130, 31, 0.07); }
.cusreg-close td:first-child { text-align: right; letter-spacing: 0.05em; font-size: 11px; color: var(--muted); }
.cusreg-warn { margin-top: 8px; padding: 8px 12px; border: 1px solid rgba(211, 47, 47, 0.45); border-radius: 8px; background: rgba(211, 47, 47, 0.06); color: var(--red); font-size: 12px; font-weight: 600; }
/* money-hiding for the "cus" finTab: list, pills and states stay; the balance
   column (td.fin-amt / th.fw-money) is stripped by the shared rules above, the
   TOTAL BALANCE metric and the all-money statements go dark here */
.hide-financials #cusSum { visibility: hidden; }
.hide-financials .cusreg-ledger-row { display: none !important; }

/* ======================================================================
   Department Board Wave 2 - client side
   Developed By: Ameer Shahryar
   ====================================================================== */

/* clickable pipeline stage chips (imports Orders / Shipments filters) */
.stage-chip.chip-click { cursor: pointer; user-select: none; }
.stage-chip.chip-click:hover { border-color: var(--focus); }
.stage-chip.picked {
  background: var(--accent);
  border-color: var(--accent-deep);
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(245, 130, 31, 0.25);
}
.stage-chip.picked .stage-no,
.stage-chip.picked strong { color: #ffffff; }

/* finance: branch column + PDC register */
.imports-table th.fw-branch { width: 64px; }
.imports-table.t-pdc { width: 100%; }

/* cash sparkline - FX-spark lineage; cap lifted (board overhaul 2026-08-11) */
.cash-spark { max-width: none; }
.cash-spark-svg { height: 120px; }

/* cockpit honest charts: 30-day muster LINE (replaces the dates-as-donut) */
.smc-trend-svg { width: 100%; height: auto; display: block; }
.smc-trend-grid { stroke: var(--line); stroke-width: 1; }
.smc-trend-tick { font-size: 9.5px; fill: var(--ink); font-variant-numeric: tabular-nums; } /* axis numbers = values -> jet black */
.smc-trend-area { fill: rgba(245, 130, 31, 0.10); stroke: none; }
.smc-trend-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.smc-trend-dot { fill: var(--accent-deep); }
.smc-trend-last { font-size: 11px; font-weight: 700; fill: var(--accent-deep); font-variant-numeric: tabular-nums; }

/* HR muster roll - per-employee day grid, sticky employee column */
.hr-muster-wrap { max-height: 560px; overflow: auto; }
.hr-muster-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.hr-muster-table th.mr-emp, .hr-muster-table td.mr-emp {
  position: sticky; left: 0; z-index: 2;
  min-width: 210px; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.hr-muster-table thead th.mr-emp { z-index: 3; background: inherit; }
.hr-muster-table th.mr-dept, .hr-muster-table td.mr-dept { min-width: 96px; white-space: nowrap; }
.hr-muster-table th.mr-day { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.hr-muster-table td.mr-cell {
  text-align: center; padding: 3px 2px; min-width: 26px;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.hr-muster-table td.mr-p  { background: rgba(46, 125, 50, 0.12); color: var(--green); }
.hr-muster-table td.mr-l  { background: rgba(180, 83, 9, 0.14); color: var(--amber); }
.hr-muster-table td.mr-a  { background: rgba(211, 47, 47, 0.14); color: var(--red); }
.hr-muster-table td.mr-hd { background: rgba(29, 111, 184, 0.12); color: #1d6fb8; }
.hr-muster-table td.mr-wo { background: var(--panel-soft); color: var(--muted); }
.hr-muster-table td.mr-lv { background: rgba(124, 77, 190, 0.12); color: #7c4dbe; }
.hr-muster-table td.mr-sum { white-space: nowrap; font-size: 10.5px; color: var(--ink); }
.imports-table.t-lleague { width: 100%; }

/* ======================================================================
   Composed empty states (Ameer 2026-08-07: "This visibility of the
   departmental dashboard is not appealing") - a zero-data board must look
   intentional, not broken. Developed By: Ameer Shahryar
   ====================================================================== */

/* all-zero pipeline strips collapse to one calm line (any real count
   restores the full chip rail) */
.pipeline-strip.pipe-empty {
  display: flex;
  align-items: center;
  min-height: 0;
}
.pipe-empty-note {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 2px;
  font-style: normal;
}

/* zero-valued KPI tiles dim so live numbers carry the eye; tiles never hide,
   so the layout cannot jump when data arrives. Readability pass 2026-08-28:
   0.55 -> 0.75 so even a dimmed zero stays ~4.5:1 readable; the muted-grey
   number (vs jet-black live values) still reads clearly as dimmed. */
.metric.metric-zero { opacity: 0.75; }
.metric.metric-zero strong { color: var(--muted); }
.metric.metric-zero:hover { opacity: 1; } /* still readable on inspection */

/* FX card, Today view: one row never earns a full-width table - a single
   inline line under the spark cards instead */
.rates-today-line {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  padding: 6px 2px 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.rates-today-line strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
}
.rates-today-date {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
}

/* empty tables: keep the charcoal head + a single tight message line */
.imports-table-wrap .imports-empty { padding: 8px 2px 6px; }

/* ======================================================================
   Store stock board (wave-2 "Enhance it", Ameer 2026-08-07) - quantities
   only, money-hidden by doctrine (the feed carries none).
   Developed By: Ameer Shahryar
   ====================================================================== */
#storePanel .smc-inv-ctl { margin: 2px 0 4px; }
.imports-table.t-store-whs, .imports-table.t-store-low { width: 100%; }
#storeSearch { min-width: 260px; }

/* ======================================================================
   Inventory row redesign + catalog view (Ameer "go", 2026-08-09)
   Line 1: description (larger) + MODEL / FINISH chips + bold dims.
   Line 2: quiet meta. Money tracks untouched - the grid columns are the
   same; only the label cell's inner layout changed.
   Developed By: Ameer Shahryar
   ====================================================================== */
.smc-inv-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; row-gap: 3px; }
.smc-inv-item .smc-inv-title {
  font-size: 13.5px; font-weight: 650; color: var(--ink);
  min-width: 0; flex: 0 1 auto;
}
.smc-inv-chip {
  flex: 0 0 auto; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 1px 8px; border-radius: 6px;
  background: #f1eee9; border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--accent-deep);
}
.smc-inv-chip--finish { color: #a3540b; background: #f6efe6; }
.smc-inv-dims {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink); letter-spacing: 0.02em;
}
/* a touch more breathing room now that line 1 carries chips */
.smc-inv-row.smc-inv-item { padding-top: 8px; padding-bottom: 8px; }

/* ======================================================================
   NEW SALES QUOTATION (Customers tab - unannounced, 2026-08-11)
   Modal follows the item-editor chrome (.smc-inv-editor family); the
   create button is SMC orange (custom non-SAP action = #F58220).
   Developed By: Ameer Shahryar
   ====================================================================== */
.smc-quo-btn {
  flex: none; padding: 5px 14px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: #F58220; border: 1px solid #F58220; color: #fff;
}
.smc-quo-btn:hover:not(:disabled) { background: #dc7018; border-color: #dc7018; }
.smc-quo-btn:disabled { opacity: .55; cursor: progress; }
.smc-quo-btn--row { margin-left: auto; padding: 3px 10px; font-size: 10.5px; }
/* Print Ledger + New Quotation side by side in a statement cap: only the
   FIRST takes the auto push-right margin, the second keeps a small gap */
.smc-quo-btn--row + .smc-quo-btn--row { margin-left: 8px; }
.smc-quo-btn2 {
  flex: none; padding: 5px 12px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink);
}
.smc-quo-btn2:hover { background: #fdf3e8; border-color: var(--accent); }

.smc-quo-overlay {
  position: fixed; inset: 0; z-index: 9100; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); padding: 24px;
}
.smc-quo-overlay.is-open { display: flex; }
.smc-quo-card {
  width: min(860px, 100%); max-height: 90vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-soft); box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  padding: 18px 20px 12px;
}
.smc-quo-loading { padding: 26px 4px; font-size: 12px; color: var(--muted); text-align: center; }
/* restyle 2026-08-28: the title row pins while the body scrolls inside the card */
.smc-quo-head {
  position: sticky; top: 0; z-index: 45;
  display: flex; align-items: center; gap: 10px;
  margin: -18px -20px 14px; padding: 14px 20px 11px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  border-radius: var(--radius-soft) var(--radius-soft) 0 0;
}
.smc-quo-title { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--ink); }
.smc-quo-livechip {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-deep); background: #fdf3e8; border: 1px solid var(--accent);
  border-radius: 5px; padding: 2px 8px;
}
.smc-quo-x {
  margin-left: auto; width: 26px; height: 26px; line-height: 1; font-size: 18px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft);
  color: var(--muted); cursor: pointer;
}
.smc-quo-x:hover { border-color: var(--accent); color: var(--accent); }

.smc-quo-grid { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.smc-quo-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.smc-quo-field > span {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
/* fields (restyle 2026-08-28): 34px controls, 13px jet-black values */
.smc-quo-field input, .smc-quo-field textarea {
  padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.smc-quo-field input { height: 34px; }
.smc-quo-field textarea { min-height: 56px; }
.smc-quo-field input:focus, .smc-quo-field textarea:focus,
.smc-quo-line input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.22);
}
.smc-quo-field--cust { flex: 1 1 300px; }
.smc-quo-field--remarks { display: flex; }
.smc-quo-field--remarks textarea { resize: vertical; }

.smc-quo-drop {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  max-height: 260px; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22); margin-top: 3px;
}
.smc-quo-opt {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  padding: 6px 10px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; cursor: pointer; font: inherit; font-size: 11.5px;
  color: var(--ink); min-width: 0;
}
.smc-quo-opt:last-child { border-bottom: 0; }
.smc-quo-opt:hover { background: #fdf3e8; }
.smc-quo-opt strong { flex: none; font-weight: 800; color: var(--accent-deep); }
.smc-quo-opt em {
  flex: none; font-style: normal; font-size: 10px; font-weight: 700;
  color: var(--accent-deep); background: #f1eee9; border: 1px solid var(--line);
  border-radius: 5px; padding: 0 6px; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.smc-quo-optprice { margin-left: auto; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.smc-quo-optempty { padding: 10px 12px; font-size: 11px; color: var(--muted); }

/* section headers (restyle 2026-08-28): 11px caps with the SMC orange bar;
   the <em> hint drops to a muted footnote line under the header */
.smc-quo-lines-cap {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); font-weight: 800; margin: 0 0 10px;
  padding-left: 8px; border-left: 3px solid var(--accent); line-height: 1.35;
}
.smc-quo-lines-cap em {
  display: block; font-style: normal; text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: 10.5px; color: var(--muted); margin-top: 1px;
}
.smc-quo-line {
  /* LIVING parity (2026-08-11): Item | Prod.Selection | Prod.Type | Location |
     Qty | Unit price | Disc % | Est. | remove */
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 118px 118px 100px 58px 88px 58px 86px 26px;
  gap: 6px; align-items: start; margin-bottom: 6px; min-width: 880px;
}
.smc-quo-line--head {
  margin-bottom: 3px;
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
/* Est. header sits over a right-aligned tabular column */
.smc-quo-line--head span:nth-child(8) { text-align: right; }
.smc-quo-line input {
  width: 100%; min-width: 0; height: 32px; padding: 6px 8px; font: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 6px;
}
.smc-quo-itemcell { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.smc-quo-itemname {
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.smc-quo-est {
  align-self: center; text-align: right; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* remove-x stays quiet until the row is hovered */
.smc-quo-rm {
  align-self: center; width: 24px; height: 24px; line-height: 1; font-size: 15px;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--muted); cursor: pointer; opacity: .35;
}
.smc-quo-line:hover .smc-quo-rm, .smc-quo-rm:focus-visible { opacity: 1; }
.smc-quo-rm:hover { border-color: #b3261e; color: #b3261e; background: #fdf2f2; opacity: 1; }
.smc-quo-addline {
  margin-top: 4px; padding: 6px 14px; border-radius: 6px; cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 700; border: 1px dashed rgba(245, 130, 32, .55);
  background: transparent; color: var(--accent-deep);
}
.smc-quo-addline:hover { border-color: var(--accent); background: #fdf3e8; }

/* footer (restyle 2026-08-28): the estimated-total summary bar docks above the
   button row in the quotation modal; the opp/lead feet (no wrappers) keep the
   original single-row flex flow */
.smc-quo-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.smc-quo-foot-total {
  flex: 1 1 100%; display: flex; justify-content: flex-end;
  background: #fafbfc; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 14px;
}
.smc-quo-foot-total:has(.smc-quo-total:empty) { display: none; }
.smc-quo-foot-row { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; }
.smc-quo-total {
  font-size: 13.5px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
}
.smc-quo-foot .smc-quo-btn {
  height: 38px; padding: 0 22px; font-size: 12px;
  box-shadow: 0 3px 8px rgba(245, 130, 32, .3);
}
.smc-quo-foot .smc-quo-btn2 { height: 38px; padding: 0 16px; font-size: 12px; background: transparent; }
.smc-quo-foot-row .smc-quo-btn2 { margin-left: auto; }
.smc-quo-msg { flex: 1 1 160px; min-width: 0; font-size: 11px; font-weight: 600; color: var(--muted); }
.smc-quo-msg.is-error { color: #b3261e; white-space: pre-wrap; }

.smc-quo-success { padding: 26px 8px 10px; text-align: center; }
.smc-quo-success-check {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: #fff; background: #1a7f37;
}
.smc-quo-success-big {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  color: var(--ink); margin-bottom: 6px;
}
.smc-quo-success-sub { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 16px; }
.smc-quo-success-btns { display: flex; align-items: center; justify-content: center; gap: 10px; }

.smc-quo-hist { margin-top: 16px; }
.smc-quo-hist-cap {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); font-weight: 800; margin-bottom: 8px;
  padding-left: 8px; border-left: 3px solid var(--accent);
}
.smc-quo-histload { font-size: 11px; color: var(--muted); padding: 4px 0 8px; }
.smc-quo-histtable { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.smc-quo-histtable th, .smc-quo-histtable td {
  padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left;
  white-space: nowrap;
}
.smc-quo-histtable th {
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.smc-quo-histtable td.fin-amt, .smc-quo-histtable th.fin-amt { text-align: right; font-variant-numeric: tabular-nums; }
.smc-quo-histtable tr.is-cancelled td { color: var(--muted); text-decoration: line-through; }
.smc-quo-credit { margin-top: 10px; font-size: 9.5px; color: var(--muted); text-align: right; letter-spacing: .04em; }

/* ---- New Quotation: LIVING-tab parity (2026-08-11) ---------------------- */
/* Full form width + horizontal room for the 9-column line grid */
.smc-quo-card--full { width: min(1180px, 100%); }
.smc-quo-card--full .smc-quo-lines { overflow-x: auto; overflow-y: visible; padding-bottom: 2px; }
/* section cards (restyle 2026-08-28): each logical group is its own panel */
.smc-quo-sec {
  background: #fafbfc; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 12px;
}
.smc-quo-sec .smc-quo-grid, .smc-quo-sec .smc-quo-livgrid,
.smc-quo-sec .smc-quo-discgrid { margin-bottom: 0; }
.smc-quo-sec .smc-quo-discsum { margin-bottom: 0; }
/* remarks section: the field label takes the section-header treatment */
.smc-quo-sec--remarks .smc-quo-field--remarks > span {
  font-size: 11px; letter-spacing: .07em; color: var(--ink); font-weight: 800;
  padding-left: 8px; border-left: 3px solid var(--accent);
  margin-bottom: 6px; line-height: 1.35;
}
/* the LIVING header grids: project info, product cascade, opportunity/team */
.smc-quo-livgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 14px; margin-bottom: 12px;
}
@media (max-width: 860px) { .smc-quo-livgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the six per-category discount %% fields (DISCOUNTS (%) block): one strip */
.smc-quo-discgrid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 14px; margin-bottom: 12px;
}
@media (max-width: 860px) { .smc-quo-discgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.smc-quo-sel {
  width: 100%; min-width: 0; height: 34px; padding: 6px 8px; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 6px;
}
.smc-quo-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 130, 32, .22); }
.smc-quo-sel--line { height: 32px; font-size: 11.5px; padding: 6px 4px; }
/* three-way model view: All / Running / Discontinued (default Running) -
   segmented pills, right-aligned on the MODEL label line (restyle 2026-08-28) */
.smc-quo-modfilter {
  position: absolute; top: -4px; right: 0; margin: 0;
  display: inline-flex; gap: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
}
.smc-quo-modfilter button {
  padding: 2px 9px; font-size: 9px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); background: transparent;
  border: 0; border-right: 1px solid var(--line); cursor: pointer;
}
.smc-quo-modfilter button:last-child { border-right: 0; }
.smc-quo-modfilter button.is-on { color: #fff; background: #F58220; border-color: #F58220; }
@media (max-width: 860px) { .smc-quo-modfilter { position: static; margin-top: 4px; align-self: flex-start; } }
.smc-quo-req {
  font-weight: 800; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-deep); background: #fdf3e8; border-radius: 4px; padding: 1px 5px; margin-left: 4px;
}
.smc-quo-oppnote { font-size: 11px; font-weight: 600; color: var(--muted); padding: 6px 0; display: block; }
.smc-quo-oppnote.is-missing { color: #b3261e; }
/* opportunity gate (restyle 2026-08-28): message + "Create one now" live in
   one soft-red callout card with a red left bar */
.smc-quo-oppgate {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: #fdf2f2; border: 1px solid #f3d6d3; border-left: 3px solid #b3261e;
  border-radius: 8px; padding: 10px 12px; margin-top: 2px;
}
.smc-quo-oppgate .smc-quo-oppnote { padding: 0; }
.smc-quo-oppgate .smc-quo-btn--oppnew { margin-top: 0; }
/* DISCOUNT SUMMARY strip (estimate - final figures from SAP) */
.smc-quo-discsum {
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
  margin: 8px 0 2px; padding: 8px 10px; background: var(--panel-soft);
  border: 1px dashed var(--line); border-radius: 8px; font-size: 11px;
}
.smc-quo-discsum:empty { display: none; }
.smc-quo-discsum-cap {
  flex: 1 1 100%; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.smc-quo-discsum-cap em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }
.smc-quo-discsum-row { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.smc-quo-discsum-total { font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.smc-quo-success-warn {
  margin: -8px 0 14px; font-size: 11px; font-weight: 600; color: #8a6d00;
  background: #fdf6e3; border: 1px solid #e6d9a8; border-radius: 6px;
  display: inline-block; padding: 4px 10px;
}

/* OPPORTUNITY QUICK CREATE (2026-08-11): small modal stacked ABOVE the
   quotation form (the gate's "Create one now" opens it inline); everything
   else reuses the smc-quo-* system. Developed By: Ameer Shahryar */
.smc-quo-overlay--opp { z-index: 9110; }
.smc-quo-card--opp { width: min(680px, 100%); }
/* the small opp/lead cards breathe better at two columns (restyle 2026-08-28) */
.smc-quo-card--opp .smc-quo-livgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.smc-quo-card--opp .smc-quo-field--remarks { margin-top: 12px; }
.smc-quo-btn--oppnew {
  display: inline-block; margin-top: 6px; padding: 4px 12px; font-size: 10.5px;
}

/* LEAD QUICK CREATE (2026-08-11): sits BELOW the opportunity overlay (9110)
   so "New Sales Opportunity" from the lead success card always stacks on
   top; everything else reuses the smc-quo-* system.
   Developed By: Ameer Shahryar */
.smc-quo-overlay--lead { z-index: 9105; }
.smc-quo-success-hint {
  margin: -6px 0 14px; font-size: 11.5px; font-weight: 600; color: var(--muted);
}

/* ======================================================================
   HISTORY tab - the LEGACY company record (read-only reflection of
   SMC_Living_Main). Amber LEGACY chips keep before/after go-live
   unmistakable on every panel. Developed By: Ameer Shahryar
   ====================================================================== */
.hist-sub {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #b26a00; margin: 2px 0 12px;
}
.hist-foot { margin-top: 14px; font-size: 10.5px; color: var(--muted); text-align: right; }
.hist-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.hist-panel {
  position: relative; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; background: var(--card, #fff);
}
.hist-title { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.04em; }
.hist-chip {
  position: absolute; top: 12px; right: 14px; display: inline-block;
  padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: #fef6ec; color: #b26a00; border: 1px solid #f0c294; white-space: nowrap;
}
.hist-take {
  margin: 12px 0 0; padding: 8px 12px; font-size: 12px; line-height: 1.5;
  border-left: 3px solid var(--accent, #F58220); background: rgba(245, 130, 32, 0.06);
  border-radius: 0 8px 8px 0;
}
.hist-note { margin-top: 6px; font-size: 10.5px; color: var(--muted); line-height: 1.5; }
.hist-lock {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; vertical-align: middle;
  background: #fdf1f0; color: #b3261e; border: 1px solid #f2b8b5;
}
.hist-years { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.hist-year { font-size: 11px; color: var(--muted); white-space: nowrap; }
.hist-year b { color: var(--accent-deep, #c05a00); }
.hist-year-recon { color: var(--muted); font-style: italic; }
.hist-comp { display: grid; gap: 4px; }
.hist-comp-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  font-size: 11.5px; padding: 3px 0; border-bottom: 1px dashed var(--line);
}
.hist-annot {
  margin-top: 10px; padding: 8px 12px; font-size: 11.5px; line-height: 1.5;
  border: 1px dashed #f0c294; border-radius: 8px; background: #fef6ec; color: #6b4a12;
}
.hist-trend-recon { stroke: #b9b3ab; stroke-dasharray: 5 4; stroke-width: 1.8; }
.hist-stack-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.hist-stack-label { font-size: 11px; color: var(--muted); }
.hist-stack-track {
  display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: #eef1f5;
}
.hist-stack-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden;
}
.hist-stack-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.hist-stack-key { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); }
/* G2 on the HISTORY grid: ONE shared tile rail - auto-fill keeps every KPI
   tile the same width whether a panel carries one tile or three (a 2-tile
   row no longer stretches to double width), and the 170px floor is sized
   so the compact B/M callout from histMoneyTile() can never clip. The G2
   clamp + nowrap rule already applies (hist lives inside .imports-panel);
   the em sub-line wraps freely and carries the exact rupee figure. */
.hist-panel .imports-metrics {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
/* ONE chip contract: amber LEGACY (.hist-chip) and red CEO/SUPERUSER-ONLY
   (.hist-lock) share a single height, padding and type size - only the
   colorway differs. Both keep their own placement rules. */
.hist-chip,
.hist-lock {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (min-width: 1400px) {
  .hist-grid { grid-template-columns: 1fr 1fr; }
  .hist-panel-wide, #histP1, #histP4 { grid-column: 1 / -1; }
}

/* ======================================================================
   BOARD OVERHAUL - GLOBAL SHARED STANDARDS (G1-G15), 2026-08-11
   Developed By: Ameer Shahryar
   ====================================================================== */

/* G2: nine-digit money never clips - the value scales down before it hits
   the tile edge; overflow stays hidden as the last guard */
.imports-panel .imports-metrics .metric strong,
section.metrics#jobMetrics .metric strong {
  font-size: clamp(14px, 1.45vw, 24px);
  white-space: nowrap;
}
/* currency code inside an em caption (PDC amount, PO total): same muted
   treatment as inside the big callout */
.imports-metrics .metric em .cur,
.metrics .metric em .cur {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-right: 3px;
}

/* G3: action KPIs are buttons - same face as passive tiles, hand cursor,
   focus ring for keyboards */
button.metric.kpi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* G7: shared inline error card - a failed board is a card with a Retry,
   never a silent void */
.board-error {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 10px;
  padding: 12px 16px;
  border: 1px solid rgba(211, 47, 47, 0.35);
  border-radius: 10px;
  background: rgba(211, 47, 47, 0.05);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.board-error .board-retry { white-space: nowrap; }

/* G8: shared loading skeleton - a dimmed 8-tile grid instead of a blank flash */
#boardSkeleton .metric { min-height: 88px; }
#boardSkeleton .metric,
#boardSkeleton .skel-title {
  animation: skel-pulse 1.2s ease-in-out infinite;
}
#boardSkeleton .skel-title {
  display: inline-block;
  width: 220px;
  height: 16px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.07);
}
#boardSkeleton .metric span,
#boardSkeleton .metric em {
  display: inline-block;
  height: 9px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
}
#boardSkeleton .metric span { width: 70%; }
#boardSkeleton .metric em { width: 50%; }
#boardSkeleton .metric strong {
  display: inline-block;
  width: 40%;
  height: 18px;
  margin-top: 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.08);
}
@keyframes skel-pulse { 50% { opacity: 0.45; } }

/* G9: freshness stamp goes amber once the feed is older than 2 hours */
.imports-updated.stamp-stale,
.stamp-stale { color: #b45309 !important; font-weight: 700; }

/* SALES/board captions under a subhead (truth notes) */
.board-note { font-size: 11px; color: var(--muted); margin: 2px 0 8px; }
.subhead-note {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 10px;
}

/* ADMIN-HR: 7-day strip chip variant - tally in the name slot, present
   count alone in the badge */
.att-day-chip .stage-no { min-width: 36px; color: var(--muted); }
.att-day-chip .stage-name { font-weight: 600; color: var(--muted); letter-spacing: 0.01em; }

/* ADMIN-HR: labelled leave forms (field-grid pattern, compact) */
.leave-entry label.lv-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.leave-entry label.lv-field > select,
.leave-entry label.lv-field > input { font-size: 12px; }

/* DESIGN: the New Job detail pane collapses until a job is selected or
   + New Job is pressed - the right third is not an empty form at rest */
.workspace.detail-collapsed { grid-template-columns: 220px minmax(560px, 1fr); }
.workspace.detail-collapsed .detail-pane { display: none; }

/* PROCUREMENT: vessel-schedules block collapses to one calm line while no
   carrier key works; auto-restores when any carrier goes ok */
.sched-block.sched-collapsed #schedPortChips,
.sched-block.sched-collapsed .imports-table-wrap,
.sched-block.sched-collapsed .sched-carriers { display: none; }
.sched-note { font-size: 12px; color: var(--muted); padding: 6px 0 2px; }

/* PROCUREMENT: FX card + quick-launch + tracking share one row below the
   work tabs; quick links stack as a column card beside the rates */
.fin-two-col .imp-side-col { display: flex; flex-direction: column; gap: 12px; }
.fin-two-col .imp-side-col .quick-links { margin: 0; }
.fin-two-col .imp-side-col .track-block { margin-top: 0; }

/* SERVICES: donut sits beside the calls table - narrow chart rail, table
   takes the rest; stacks on small screens */
.fin-two-col.svc-row { grid-template-columns: 380px minmax(0, 1fr); }
@media (max-width: 1100px) { .fin-two-col.svc-row { grid-template-columns: 1fr; } }

/* G6/DESIGN: one chart language - turnaround bars wear the donut palette
   (flat SMC-orange lead on the neutral OTHER-grey track, no gradients) */
#designTurnRows .ceo-bar-fill { background: #F58220; }
#designTurnRows .ceo-bar-track { background: rgba(185, 179, 171, 0.28); }

/* ======================================================================
   Document-flow funnels (funnel wave, 2026-08-25) - the doc-flow variant
   of the pipeline strips: Sales order-to-cash hero + Procurement purchase
   funnel (secondary, under the import-journey hero). Cards ride the same
   8/4/2 column grid as the KPI tiles (G4 alignment doctrine).
   Developed By: Ameer Shahryar
   ====================================================================== */
.doc-funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1500px) { .funnel-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .funnel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.funnel-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 9px;
  border: 1px solid #e8edf3; border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
  font-size: 9.5px; letter-spacing: 0.02em; color: var(--muted);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(23, 37, 53, 0.045);
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.funnel-card.chip-click { cursor: pointer; user-select: none; }
.funnel-card.chip-click:hover {
  border-color: var(--focus);
  box-shadow: 0 5px 12px rgba(23, 37, 53, 0.09);
  transform: translateY(-1px);
}
.funnel-card.picked { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(245, 130, 31, 0.30); }

.fn-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 14px; }
.fn-name {
  font-weight: 700; color: #33404d;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.funnel-card.active .fn-name { color: #1f2937; }
.funnel-card.picked .fn-name { color: var(--accent-deep); }

/* snapshot drop-off badge: stage-vs-stage counts NOW, never cohort % -
   the title attribute and the strip legend both say so */
.fn-drop { font-weight: 800; font-size: 8.5px; border-radius: 5px; padding: 1px 5px; white-space: nowrap; cursor: help; }
.fn-drop-down { background: #fdf0e3; color: #b45309; }
.fn-drop-up { background: #eef7ef; color: #2e7d32; }

.fn-mid { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.fn-count { font-size: 15px; color: var(--ink); line-height: 1.1; }
.funnel-card.picked .fn-count { color: var(--accent-deep); }
.fn-money { font-size: 9.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fn-money .cur { font-style: normal; font-size: 8px; color: var(--muted); margin-right: 2px; }
.fn-split { font-size: 8.5px; color: var(--muted); }

/* Reserve | Final sub-chips inside the A/P Invoices card */
.fn-subs { display: flex; gap: 5px; flex-wrap: wrap; }
.fn-sub { border: 1px solid #e8edf3; border-radius: 5px; padding: 1px 6px; font-size: 8.5px; background: #ffffff; }
.fn-sub.chip-click { cursor: pointer; }
.fn-sub.chip-click:hover { border-color: var(--focus); }
.fn-sub.picked { background: var(--accent); border-color: var(--accent-deep); color: #ffffff; }
.fn-sub.picked strong { color: #ffffff; }

/* side cards (A/R Down Payments, Outgoing Payments): reference lanes, not
   funnel stages - dashed frame keeps them out of the drop-off narrative */
.funnel-card.fn-side { border-style: dashed; background: #fbfcfe; }

/* branch lane (returns / credit memos): visually distinct row under the spine */
.funnel-row.funnel-branch { margin-left: 18px; }
.fn-branch-tag {
  align-self: center; justify-self: start;
  font-size: 9px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: #b45309; background: #fdf0e3; border-radius: 6px; padding: 4px 10px;
}
.funnel-card.fn-branch-card {
  background: linear-gradient(180deg, #fffdfa 0%, #fbf4ec 100%);
  border-color: #efdfcc;
}

/* honest-label legend under the strip */
.fn-legend { font-size: 9px; color: var(--muted); padding: 0 2px; }

/* all-zero funnel collapses to the same calm line as the pipeline strips */
.doc-funnel.pipe-empty { display: flex; align-items: center; min-height: 0; }

/* money masks: funnel money obeys the same board-scoped hide as every other
   money surface (server-stripped feeds simply never carry the values) */
.hide-financials .fn-money { display: none !important; }

/* ======================================================================
   READABILITY PASS (Ameer 2026-08-28): "all the values in light grey or
   grey text, make them Jet black for more visibility."
   - --ink #333333 -> #111111: every value/data surface (table cells, KPI
     numbers, money figures, ledger/statement rows, funnel counts, chart
     axis numbers) rides var(--ink) and is now jet black.
   - --muted #6b7177 -> #3d4247: labels/captions darken one step - clearly
     readable (~10:1) without competing with the values.
   - Dark charcoal table headers keep their hardcoded white text; status
     colors and the #F58220 accent are untouched.
   - The LOGIN SCREEN is explicitly out of scope: the scope below pins its
     original palette so nothing there shifts.
   Developed By: Ameer Shahryar
   ====================================================================== */
.login-shell {
  --ink: #333333;
  --muted: #6b7177;
}

/* ======================================================================
   DOCUMENT PREVIEW slide-over (2026-08-28): click any document row anywhere
   -> a right-side panel rendering the document formally (letterhead, title
   band, meta grid, lines, totals, remarks, CANCELLED watermark). Inherits
   the 2026-08-28 restyle language: section cards, 11px caps labels, #F58220
   accents, jet-black values on var(--ink).
   Developed By: Ameer Shahryar
   ====================================================================== */
tr[data-prevtype] { cursor: pointer; }
tr[data-prevtype]:hover > td { background: #fff4e8; }

.smc-docprev-overlay {
  position: fixed; inset: 0; z-index: 9400; display: none;
  background: rgba(17, 17, 17, .45);
}
.smc-docprev-overlay.is-open { display: block; }
.smc-docprev-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(640px, 100vw);
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column;
  transform: translateX(28px); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.smc-docprev-overlay.is-open .smc-docprev-panel { transform: translateX(0); opacity: 1; }
.smc-docprev-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.smc-docprev-bar-title {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.smc-docprev-print {
  margin-left: auto; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 6px 16px; border-radius: 6px; color: #fff;
  background: #F58220; border: 1px solid var(--accent-deep);
  box-shadow: 0 2px 6px rgba(245, 130, 32, .3);
}
.smc-docprev-print:hover { background: var(--accent-deep); }
.smc-docprev-x {
  width: 28px; height: 28px; line-height: 1; font-size: 18px; flex: none;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft);
  color: var(--muted); cursor: pointer;
}
.smc-docprev-x:hover { border-color: var(--accent); color: var(--accent); }
/* 2026-10-17 Print Layout (house A4 document, web/doc-layout.js) - an
   outlined twin of Print; it takes the auto margin so the pair sits right */
.smc-docprev-layout {
  margin-left: auto; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 6px 14px; border-radius: 6px; color: var(--accent-deep);
  background: #fff; border: 1px solid #F58220;
}
.smc-docprev-layout:hover { background: #fff4e8; color: #F58220; }
.smc-docprev-layout:not(.is-hidden) + .smc-docprev-print { margin-left: 0; }
/* document references inside a preview (Based On / origin / applied) */
.smc-docprev-ref {
  color: var(--accent-deep); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.smc-docprev-ref:hover, .smc-docprev-ref:focus-visible { color: #F58220; text-decoration-style: solid; outline: none; }
/* 18-Oct-2026: a reference wraps at its spaces, never inside its SERIES-NUMBER (LHR-SQT-1000001) */
.smc-docprev-row strong .smc-docprev-ref { white-space: normal; }
.smc-docno { white-space: nowrap; }
.smc-docprev-body { flex: 1; overflow: auto; padding: 16px 18px 28px; background: var(--panel-soft); }
.smc-docprev-doc {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-soft);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
  padding: 22px 24px 26px;
}
.smc-docprev-loading, .smc-docprev-error { padding: 30px 8px; font-size: 12.5px; color: var(--muted); text-align: center; }
.smc-docprev-error { color: #b3261e; }
/* letterhead - same shape as the Print Ledger statement */
.smc-docprev-lh { text-align: center; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.smc-docprev-logo { display: block; height: 54px; width: auto; margin: 0 auto 8px; }
.smc-docprev-lh h1 { font-family: var(--font-display); font-size: 18px; letter-spacing: .04em; color: var(--ink); margin: 0; }
.smc-docprev-lh p { font-size: 10.5px; color: var(--muted); margin: 3px 0 0; }
/* title band: doc type + number */
.smc-docprev-band {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 4px;
}
.smc-docprev-band h2 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0;
}
.smc-docprev-band .docnum { font-size: 14px; font-weight: 700; color: var(--accent-deep); }
.smc-docprev-status {
  margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 5px;
  color: #1d6f42; background: #e9f6ee; border: 1px solid #bfe3cd;
}
.smc-docprev-status.closed { color: #5c6b7a; background: #f0f2f4; border-color: #d7dce1; }
.smc-docprev-status.cancelled { color: #b3261e; background: #fdf2f2; border-color: #f0c6c3; }
.smc-docprev-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px; margin: 12px 0;
  background: #fafbfc; border: 1px solid var(--line); border-radius: var(--radius-soft);
  padding: 12px 14px;
}
.smc-docprev-meta > div { min-width: 0; }
.smc-docprev-meta span {
  display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 2px;
}
.smc-docprev-meta strong { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
/* BILL TO / SHIP TO two-column block + contact line */
.smc-docprev-parties {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 10px 0;
}
.smc-docprev-parties > div {
  min-width: 0; background: #fafbfc; border: 1px solid var(--line);
  border-radius: var(--radius-soft); padding: 10px 12px;
}
.smc-docprev-parties span {
  display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 3px;
}
.smc-docprev-parties p { margin: 0; font-size: 11.5px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* 2026-10-17 owner: customer LEFT, document dates + sales employee RIGHT, product strip below */
.smc-docprev-hz { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; margin: 10px 0; }
.smc-docprev-hz.one { grid-template-columns: minmax(0, 1fr); }
.smc-docprev-cust, .smc-docprev-docbox { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.smc-docprev-cust { border-left: 3px solid var(--accent, #F58220); }
.smc-docprev-tag { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.smc-docprev-name { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.smc-docprev-sub { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.smc-docprev-subtag { margin: 8px 0 0; }
.smc-docprev-addr { margin: 3px 0 6px; font-size: 11.5px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.smc-docprev-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11.5px; padding: 2px 0; }
.smc-docprev-row span { color: var(--muted); white-space: nowrap; }
.smc-docprev-row strong { font-weight: 600; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.smc-docprev-person, .smc-docprev-ship { border-top: 1px solid var(--line, #ddd); margin-top: 8px; padding-top: 8px; }
/* field switches (2026-10-17): the Sales Employee opens the document card when every document fact is off */
.smc-docprev-person.first { border-top: 0; margin-top: 0; padding-top: 0; }
/* payment means (19-Oct): the facts under a means row; the cheque state tag; the statement's means line */
.smc-docprev-paynote { padding-left: 10px; overflow-wrap: anywhere; }
.smc-paytag { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.smc-paytag.is-pdc { color: #c25e00; }
.smc-paytag.is-bad { color: #b3261e; }
.smc-paymeans { color: var(--ink); }
.smc-docprev-protostrip { display: flex; flex-wrap: wrap; gap: 6px 26px; border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }
.smc-docprev-protostrip span { display: block; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.smc-docprev-protostrip strong { font-size: 12.5px; font-weight: 600; color: var(--ink); }
@media (max-width: 640px) { .smc-docprev-hz { grid-template-columns: minmax(0, 1fr); } }
.smc-docprev-contact { font-size: 11.5px; color: var(--ink); margin: 0 0 4px; overflow-wrap: anywhere; }
.smc-docprev-contact .sep { color: var(--muted); margin: 0 8px; }
/* per-line item thumbnail */
.smc-docprev-itemcell { white-space: nowrap; }
.smc-docprev-thumb {
  width: 42px; height: 42px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line); background: #f8f5f1; vertical-align: middle; margin-right: 8px;
}
.smc-docprev-itemcell span { vertical-align: middle; }
.smc-docprev-totals .disc span:last-child { color: #b3261e; }
.smc-docprev-cap {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin: 16px 0 6px; padding-left: 8px;
  border-left: 3px solid var(--accent);
}
.smc-docprev-tablewrap { overflow-x: auto; }
.smc-docprev-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.smc-docprev-table th {
  background: #f2f3f5; border: 1px solid #d7dce1; padding: 5px 8px; text-align: left;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.smc-docprev-table td { border: 1px solid var(--line); padding: 4px 8px; color: var(--ink); vertical-align: top; }
.smc-docprev-table th.num, .smc-docprev-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.smc-docprev-proto { font-size: 10px; color: var(--muted); margin-top: 2px; }
.smc-docprev-totals {
  margin: 12px 0 0 auto; width: min(300px, 100%);
  font-size: 12px; color: var(--ink);
}
.smc-docprev-totals div { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
.smc-docprev-totals div span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.smc-docprev-totals .grand { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 6px; font-weight: 700; font-size: 13px; }
.smc-docprev-remarks {
  margin-top: 14px; font-size: 11.5px; color: var(--ink);
  background: #fafbfc; border: 1px solid var(--line); border-radius: var(--radius-soft);
  padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.smc-docprev-note { margin-top: 10px; font-size: 10.5px; font-style: italic; color: var(--muted); }
/* CANCELLED watermark - diagonal across the document */
.smc-docprev-wm {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 5;
}
.smc-docprev-wm span {
  font-family: var(--font-display); font-size: 64px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(179, 38, 30, .16);
  border: 6px solid rgba(179, 38, 30, .14); border-radius: 12px; padding: 6px 28px;
  transform: rotate(-24deg); white-space: nowrap;
}
@media (max-width: 700px) {
  .smc-docprev-body { padding: 10px; }
  .smc-docprev-doc { padding: 14px; }
  .smc-docprev-wm span { font-size: 38px; }
}
/* ==== EMPLOYEE PROFILE (owner 18-Oct-2026: "for Employee master data, also need a preview
   form with its picture on it.") - every employee name that opens the profile, and the
   slide-over (the document preview's panel): the photo sits top-right of the employment
   box, no photo = the initials on the avatar colour. Developed By: Ameer Shahryar */
.emp-prof-link {
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px;
  text-decoration-color: rgba(245, 130, 32, .6);
}
.emp-prof-link:hover, .emp-prof-link:focus-visible { color: #F58220; text-decoration-style: solid; outline: none; }
/* the employment side is the wider one here - its rows sit beside the photo */
.smc-docprev-hz.smc-empprof-hz { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.smc-empprof-box { display: flow-root; }
.smc-empprof-box .smc-docprev-person { clear: both; }
.smc-empprof-box .smc-docprev-row strong { overflow-wrap: break-word; }
.smc-empprof-photo {
  float: right; position: relative; width: 92px; height: 115px; margin: 0 0 8px 12px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--line, #ddd);
  background: hsl(var(--emp-hue, 28), 42%, 38%);
  display: flex; align-items: center; justify-content: center;
}
.smc-empprof-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.smc-empprof-ini { font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: .04em; color: #fff; }
@media (max-width: 700px) {
  .smc-empprof-photo { width: 80px; height: 100px; }
  .smc-empprof-ini { font-size: 28px; }
}
@media (max-width: 640px) { .smc-docprev-hz.smc-empprof-hz { grid-template-columns: minmax(0, 1fr); } }

/* ==== FULL CUSTOMER DETAILS (owner 18-Oct-2026) ====
   The slide-over with every document of one customer (it sits just below the
   document preview, which opens on top of it), the selection control, and the
   "Full Customer Details" links: the register row (on hover; a tap opens the
   statement, which has its own button; always shown when the statement never
   opens), the opened statement, the document-preview customer card.
   Developed By: Ameer Shahryar */
.smc-dossier-overlay {
  position: fixed; inset: 0; z-index: 9300; display: none;
  background: rgba(17, 17, 17, .45);
}
.smc-dossier-overlay.is-open { display: block; }
.smc-dossier-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(940px, 100vw);
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column;
}
.smc-dossier-panel .smc-docprev-bar-title { flex: 1; }
.smc-dossier-body { flex: 1; overflow: auto; padding: 16px 18px 28px; background: var(--panel-soft); }
.smc-dossier-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
.smc-dossier-top > div { background: var(--panel); }
.smc-dossier-bal strong { color: var(--accent-deep); font-size: 13px; }
.smc-dossier-trow strong em { font-style: normal; color: var(--muted); font-weight: 600; margin-left: 6px; }
.smc-dossier-ctrl {
  position: sticky; top: -16px; z-index: 2;
  margin: 12px 0 4px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.smc-dossier-ctrl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12px; color: var(--ink); }
.smc-dossier-mini {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 3px 10px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink);
}
.smc-dossier-mini:hover { border-color: var(--accent); color: var(--accent-deep); }
.smc-dossier-refresh { margin-left: auto; }
/* the app's global form rules (label = grid, input = full width, 32 px high) do not fit a
   control bar: every box and date field here is sized explicitly */
.smc-dossier-body input[type="checkbox"] {
  width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; flex: none;
  accent-color: #F58220; cursor: pointer; vertical-align: middle;
}
.smc-dossier-body input[type="checkbox"]:disabled { cursor: not-allowed; }
.smc-dossier-date { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.smc-dossier-date input {
  width: auto; min-height: 0; font: inherit; font-size: 12px; font-weight: 400; padding: 2px 4px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink);
}
.smc-dossier-count { margin-left: auto; font-weight: 700; color: var(--accent-deep); }
.smc-dossier-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.smc-dossier-opt.is-off { color: var(--muted); cursor: default; }
.smc-dossier-actions .smc-docprev-print, .smc-dossier-actions .smc-docprev-layout { margin-left: 0; }
.smc-dossier-actions button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.smc-dossier-sep { width: 1px; height: 22px; background: var(--line); }
.smc-dossier-progress { font-size: 11.5px; color: var(--muted); min-height: 1.2em; }
.smc-dossier-progress:empty { display: none; }
.smc-dossier-group { margin-top: 14px; }
.smc-dossier-ghead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 6px; }
.smc-dossier-gname {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  padding-left: 8px; border-left: 3px solid var(--accent);
}
span.smc-dossier-gname { cursor: default; }
.smc-dossier-gmeta { font-size: 11px; color: var(--muted); }
/* the same column widths in every group, so the groups line up */
.smc-dossier-table { table-layout: fixed; }
.smc-dossier-table th.chk, .smc-dossier-table td.chk { width: 34px; text-align: center; }
.smc-dossier-table th.dt { width: 92px; }
.smc-dossier-table th.num { width: 150px; }
.smc-dossier-table th.st { width: 136px; }
.smc-dossier-table td { overflow-wrap: anywhere; }
.smc-dossier-table tr.is-unticked > td { opacity: .5; }
.smc-dossier-table tr.is-cancelled td.ref { text-decoration: line-through; }
.smc-dossier-table tr.is-na > td { color: var(--muted); }
.smc-dossier-table .smc-docprev-status { margin-left: 0; }
.smc-dossier-due { font-size: 10px; color: #b3261e; }
.smc-dossier-sub { font-size: 10.5px; color: var(--muted); }
/* production orders (18-Oct): the sales order link under the number; the unit beside the quantities */
.smc-dossier-sub .smc-docprev-ref { font-weight: 600; }
.smc-dossier-table td.num .smc-dossier-sub { display: inline; }
.smc-dossier-warn { margin-top: 10px; font-size: 11.5px; color: #b3261e; }
.smc-dossier-empty { margin-top: 16px; padding: 22px; text-align: center; font-size: 12.5px; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; }
/* the links */
.cus-dossier-link, .smc-dossier-link {
  font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
  color: var(--accent-deep); background: none; border: 0; padding: 0;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.cus-dossier-link:hover, .smc-dossier-link:hover,
.cus-dossier-link:focus-visible, .smc-dossier-link:focus-visible { color: #F58220; text-decoration-style: solid; outline: none; }
/* register row: the link floats over the right end of the name cell while the row is hovered
   (no column ever changes width); the open row has the button in its statement instead; a
   user whose statement never opens (money hidden) sees it always, inline */
.imports-table td.cus-name { position: relative; }
.cus-dossier-link {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 1px 7px; border-radius: 4px; background: var(--panel); box-shadow: 0 0 0 1px var(--line);
  opacity: 0; pointer-events: none;
}
tr.cusreg-row:hover .cus-dossier-link, .cus-dossier-link:focus-visible { opacity: 1; pointer-events: auto; }
tr.cusreg-row.open .cus-dossier-link { opacity: 0; pointer-events: none; }
.cus-dossier-link.always, tr.cusreg-row.open .cus-dossier-link.always {
  position: static; transform: none; margin-left: 10px; padding: 0; background: none; box-shadow: none;
  opacity: 1; pointer-events: auto;
}
.smc-dossier-link { display: inline-block; margin-top: 8px; font-size: 11.5px; }
@media (max-width: 520px) {
  .smc-dossier-table th.dt { width: 70px; }
  .smc-dossier-table th.num { width: 96px; }
  .smc-dossier-table th.st { width: 100px; }
}
@media (max-width: 700px) {
  .smc-dossier-top { grid-template-columns: minmax(0, 1fr); }
  .smc-dossier-body { padding: 10px; }
  .smc-dossier-ctrl { top: -10px; }
  .smc-dossier-count { margin-left: 0; width: 100%; }
}

/* ==== OPERATIONS order-fulfilment board (Ameer 2026-08-31 "go") ====
   Quantity-only styling: progress bar in the cockpit palette (#F58220 fill
   on a putty track), status chips in the house chip grammar. Qty cells are
   deliberately NOT .num-cell / .fin-amt - hide-financials must never eat a
   quantity. Developed By: Ameer Shahryar */
.imports-table th.fw-qty { width: 84px; }
.imports-table th.fw-prog { width: 170px; }
.imports-table th.fw-dels { width: 92px; }
.imports-table td.qty-cell { text-align: right; font-variant-numeric: tabular-nums; }
.ops-prog { display: inline-flex; align-items: center; gap: 8px; }
.ops-prog-track { width: 104px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; flex: none; display: inline-block; }
.ops-prog-fill { display: block; height: 100%; border-radius: 4px; background: #F58220; }
.ops-prog-pct { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.ops-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.ops-chip-notstarted { background: #f1eee9; color: var(--muted); }
.ops-chip-partial { background: rgba(245, 130, 31, 0.15); color: var(--accent-deep); }
.ops-chip-done { background: rgba(46, 125, 50, 0.12); color: var(--green); }
.ops-chip-overdue { background: rgba(211, 47, 47, 0.10); color: var(--red); }
.ops-dels-btn { border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; cursor: pointer; }
.ops-dels-btn.open { border-color: #F58220; color: var(--accent-deep); }
.ops-dels-row > td { background: rgba(245, 130, 31, 0.04); }
.imports-table.t-ops-dels { width: 480px; margin: 4px 0 4px 24px; }

/* WORK ORDER TRACKER (Ameer 2026-08-31 Operations wave) — the 17-step
   installation journey. Custom action buttons ride the house #F58220
   (.smc-quo-btn); chips reuse the ops palette. Developed By: Ameer Shahryar */
.wo-open-btn { border: 1px solid var(--line); background: transparent; color: var(--accent-deep); font: inherit; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; cursor: pointer; }
.wo-open-btn:hover { border-color: #F58220; }
.wo-new-btn { margin-left: 0; }
.t-wo-list tbody tr.wo-row { cursor: pointer; }
.t-wo-list tbody tr.wo-row:hover td { background: rgba(245, 130, 31, 0.06); }
.wo-prio { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.wo-prio-l { background: #f1eee9; color: var(--muted); }
.wo-prio-m { background: rgba(42, 120, 214, 0.12); color: #2a78d6; }
.wo-prio-h { background: rgba(211, 47, 47, 0.12); color: var(--red); }
.wo-chip-na { background: #f1eee9; color: var(--muted); text-decoration: line-through; }
.wo-team-chip { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; background: rgba(74, 58, 167, 0.10); color: #4a3aa7; }
.wo-cond-chip, .wo-pass-chip { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; border: 1px dashed var(--line); color: var(--muted); }
.wo-pass-chip { border-style: solid; border-color: #F58220; color: var(--accent-deep); }
.wo-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
.wo-detail-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wo-detail-title strong { font-size: 15px; letter-spacing: 0.03em; }
.wo-detail-cust { font-weight: 700; }
.wo-detail-so, .wo-detail-meta { color: var(--muted); font-size: 12px; }
.wo-detail-head .smc-quo-btn { margin-left: auto; }
.wo-detail-meta { margin: 2px 0 8px; }
.wo-steps { display: flex; flex-direction: column; margin-top: 8px; }
.wo-step { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.wo-step-rail { flex: none; width: 30px; display: flex; justify-content: center; position: relative; }
.wo-step-rail::before { content: ""; position: absolute; top: 26px; bottom: -2px; left: 50%; width: 2px; background: var(--line); }
.wo-step:last-child .wo-step-rail::before { display: none; }
.wo-step-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; border: 2px solid var(--line); background: var(--panel-soft, #fff); color: var(--muted); z-index: 1; }
.wo-step-done .wo-step-num { border-color: var(--green); color: var(--green); }
.wo-step-inprogress .wo-step-num { border-color: #F58220; color: var(--accent-deep); }
.wo-step-reopened .wo-step-num { border-color: var(--red); color: var(--red); }
.wo-step-na .wo-step-num { border-style: dashed; }
.wo-step-overdue .wo-step-num { border-color: var(--red); color: var(--red); }
.wo-step-main { flex: 1; min-width: 0; padding-top: 3px; }
.wo-step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wo-step-head strong { font-size: 12.5px; }
.wo-step-dates { margin-top: 3px; font-size: 11px; color: var(--muted); }
.wo-step-notes { margin-top: 4px; font-size: 11.5px; background: rgba(245, 130, 31, 0.05); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; white-space: pre-wrap; word-break: break-word; }
.wo-step-actions { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.wo-act-btn { padding: 3px 12px; font-size: 10.5px; }
#woTeamBlock { max-width: 560px; }
/* owner 2026-11-03: the operations report's Print button rides the right
   edge of the queue / tracker tab strip */
.sap-tabs .ops-print-btn { margin-left: auto; align-self: center; margin-bottom: 3px; }

/* ==========================================================================
   COCKPIT & BOARDS VISIBILITY panel (Ameer ruling 2026-09-05) - owner switches
   on the Administrator board. Compact, collapsed by default. Custom switches
   in the house orange #F58220 (native controls keep their defaults).
   ========================================================================== */
.vis-card { padding: 0 !important; overflow: hidden; }
.vis-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 14px; border: 0; background: transparent; color: var(--ink);
  font: 700 12px/1.2 var(--font-body); letter-spacing: .02em; cursor: pointer; text-align: left;
}
.vis-head strong { font-weight: 800; }
.vis-summary { font-size: 11px; font-weight: 600; color: var(--muted); }
.vis-caret { margin-left: auto; color: var(--muted); font-size: 12px; }
.vis-body { padding: 4px 14px 10px; border-top: 1px solid var(--line); }
.vis-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 24px; }
.vis-lead { font-size: 10px; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin: 8px 0 4px; }
.vis-row {
  display: grid; grid-template-columns: 10px minmax(96px, 128px) 1fr 56px; align-items: center; gap: 8px;
  padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: 11.5px;
}
.vis-row:last-child { border-bottom: 0; }
.vis-row.changed .vis-label { color: var(--accent-deep); }
.vis-label { font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.vis-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9aa0a6; }
.vis-dot.on { background: var(--green); }
.vis-dot.off { background: #9aa0a6; }
.vis-dot.pending { background: var(--amber); }
.vis-state { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vis-state.on { color: var(--green); }
.vis-state.pending { color: var(--amber); }
.vis-state em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.vis-switch {
  display: inline-flex; align-items: center; gap: 5px; justify-self: end;
  padding: 2px 3px; width: 56px; height: 20px; border-radius: 12px; border: 1px solid #c9c4bd;
  background: #d9d5cf; color: #4b4f54; cursor: pointer; font: 800 9px/1 var(--font-body); letter-spacing: .06em;
}
.vis-switch span { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .12s ease; }
.vis-switch b { flex: 1; text-align: center; }
.vis-switch.on { background: #F58220; border-color: #d2690e; color: #fff; }
.vis-switch.on span { order: 2; }
.vis-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vis-legend { margin-top: 8px; font-size: 10px; color: var(--muted); }
.vis-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.vis-btn {
  padding: 5px 14px; border-radius: 8px; border: 1px solid #d2690e; background: #F58220; color: #fff;
  font: 700 11px/1 var(--font-body); letter-spacing: .04em; cursor: pointer;
}
.vis-btn.vis-revert { background: transparent; color: var(--ink); border-color: var(--line); }
.vis-btn:disabled { opacity: .45; cursor: default; }
.vis-status { font-size: 11px; color: var(--green); }
.vis-status.err { color: #b42318; }
.vis-meta { margin-top: 6px; font-size: 10.5px; color: var(--muted); }
.vis-hint { margin-top: 4px; font-size: 10.5px; color: var(--muted); }
.vis-credit { margin-top: 4px; font-size: 10px; color: var(--muted); }
.vis-empty { font-size: 11px; color: var(--muted); padding: 4px 0; }
.metric.is-owner-off { display: none !important; }

/* ==========================================================================
   DOCUMENT LAYOUT FIELDS card (owner 2026-10-17) - one switch per document
   field, grouped; reuses the visibility card chrome (.vis-head / .vis-switch /
   .vis-btn). Superusers only, collapsed by default. Developed By: Ameer Shahryar
   ========================================================================== */
.dlf-intro { margin: 8px 0 2px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.dlf-cols { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.dlf-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-items: center; gap: 8px;
  padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: 11.5px;
}
.dlf-row:last-child { border-bottom: 0; }
.dlf-row.changed .dlf-label { color: var(--accent-deep); }
.dlf-row.muted { opacity: .5; }
.dlf-label { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.dlf-only { font-style: normal; font-weight: 600; font-size: 9.5px; letter-spacing: .03em; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.dlf-actions { flex-wrap: wrap; }
.dlf-preview { font: 700 11px/1.2 var(--font-body); color: #d2690e; text-decoration: underline; cursor: pointer; margin-left: 4px; }
.dlf-preview:hover, .dlf-preview:focus-visible { color: #F58220; }
.dlf-loading { padding: 8px 0 2px; font-size: 11px; color: var(--muted); }
.dlf-loading.err { color: #b42318; }

/* ==========================================================================
   DAILY FINANCE REPORT card (stage26, owner 19-Oct-2026: "daily report of incoming
   expeses outgoing on finance tab or give me control to show any of the department").
   Grid standard: the pairs sit on equal halves (.fin-two-col), every grid has a bounded
   height with its own vertical + horizontal scrollbars, a sticky header and a sticky
   footer total; one column under 1100 px; at phone width the grids scroll inside
   themselves (no page-level sideways scroll). Developed By: Ameer Shahryar
   ========================================================================== */
#dfrPanel { gap: 10px; }
.dfr-card { display: grid; gap: 10px; min-width: 0; }
.dfr-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.dfr-toggle {
  width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft);
  color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; flex: 0 0 auto;
}
.dfr-toggle:hover { border-color: var(--accent); color: var(--accent); }
.dfr-title { margin: 0; font-size: 17px; min-width: 0; }
.dfr-title span { font-weight: 500; font-size: 13px; color: var(--muted); }
.dfr-stamp { flex: 1 1 200px; }
.dfr-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.dfr-btn { min-height: 30px; padding: 4px 12px; font-size: 12px; }
.dfr-oneline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink); }
.dfr-one b { font-weight: 700; margin-right: 4px; }
.dfr-one em { font-style: normal; color: var(--muted); font-size: 12px; }
.dfr-one .cur, .dfr-tiles .cur { font-style: normal; font-size: 10px; color: var(--muted); margin-right: 3px; }
.dfr-masked-note { color: var(--muted); font-style: italic; }
.dfr-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.dfr-dates, .dfr-branches { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dfr-nav { padding: 5px 10px; }
.dfr-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dfr-date input[type="date"] { min-height: 30px; width: auto; }
.dfr-range { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; }
/* the app's global form rules (label = grid, input = full width, 32 px high) do not fit a control bar */
.dfr-range input[type="checkbox"] { width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: #F58220; cursor: pointer; }
.dfr-lbl { font-size: 10px; letter-spacing: .08em; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.dfr-pill {
  border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink); border-radius: 999px;
  padding: 4px 12px; font: 600 12px/1.2 var(--font-body); cursor: pointer;
}
.dfr-pill:hover { border-color: var(--accent); }
.dfr-pill.active { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
.dfr-note { font-size: 12px; color: var(--amber); background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 6px 10px; }
.imports-metrics.dfr-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.imports-metrics.dfr-tiles.dfr-tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .imports-metrics.dfr-tiles, .imports-metrics.dfr-tiles.dfr-tiles-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .imports-metrics.dfr-tiles, .imports-metrics.dfr-tiles.dfr-tiles-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dfr-tiles .metric strong { white-space: nowrap; }
.dfr-tiles .metric.dfr-neg strong { color: var(--red); }
.dfr-explain { font-size: 12px; color: var(--muted); line-height: 1.45; }
.dfr-explain .cur { font-style: normal; font-size: 9px; margin-right: 2px; }
.dfr-body { display: grid; gap: 12px; min-width: 0; transition: opacity .15s ease; }
.dfr-busy { opacity: .55; pointer-events: none; }
.dfr-pair { align-items: start; }
.dfr-block { min-width: 0; display: grid; gap: 6px; align-content: start; }
.dfr-grid {
  max-height: 440px; overflow: auto; border: 1px solid var(--line); border-radius: 8px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--panel);
}
.imports-table.dfr-table { table-layout: auto; width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; }
.imports-table.dfr-t-pos { min-width: 500px; }
.dfr-grid thead th { position: sticky; top: 0; z-index: 2; }
.dfr-grid tfoot td {
  position: sticky; bottom: 0; z-index: 1; background: #fdf3ea !important; color: var(--ink);
  font-weight: 700; border-top: 1px solid var(--accent); font-size: 11.5px;
}
.imports-table.dfr-table td { vertical-align: top; white-space: normal; overflow: visible; text-overflow: clip; }
.imports-table.dfr-table td.dfr-amt, .imports-table.dfr-table td.dfr-time, .imports-table.dfr-table td.dfr-ref,
.imports-table.dfr-table td.dfr-num { white-space: nowrap; }
.imports-table.dfr-table td.dfr-how, .imports-table.dfr-table td.dfr-party, .imports-table.dfr-table td.dfr-rmkcell,
.imports-table.dfr-table td.dfr-acct, .imports-table.dfr-table td.dfr-proj { white-space: normal; overflow: visible; text-overflow: clip; }
.imports-table.dfr-table td.dfr-how { min-width: 190px; }
.imports-table.dfr-table td.dfr-party { min-width: 110px; }
.imports-table.dfr-table td.dfr-rmkcell { min-width: 130px; }
.dfr-num, .imports-table td.dfr-num, .imports-table th.dfr-num { text-align: right; font-variant-numeric: tabular-nums; }
.imports-table td.dfr-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dfr-fc, .dfr-entered, .dfr-rmk, .dfr-acl, .dfr-code {
  display: block; font-style: normal; font-size: 10.5px; color: var(--muted); font-weight: 400; white-space: normal;
}
.dfr-code { display: inline; font-size: 10px; }
.dfr-time { white-space: nowrap; }
.dfr-ref { white-space: nowrap; }
.dfr-m + .dfr-m { margin-top: 3px; padding-top: 3px; border-top: 1px dashed var(--line); }
.dfr-mamt { float: right; margin-left: 8px; font-variant-numeric: tabular-nums; color: var(--muted); }
.dfr-tag {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 1px 6px;
  border-radius: 999px; border: 1px solid var(--line); vertical-align: 1px; white-space: nowrap;
}
.dfr-tag-cur { background: #f1f2f3; color: #4b4f54; }
.dfr-tag-pdc { background: #fff1e6; color: var(--orange); border-color: #f5b98a; }
.dfr-tag-nc { background: transparent; color: var(--muted); border-style: dashed; border-color: #b7b2ab; }
.dfr-tag-bc { background: #f3f0ff; color: #5b4bb7; border-color: #d3cbf7; }
.imports-table tr.dfr-adjust td { color: var(--muted); }
.imports-table tr.dfr-sub td { background: var(--panel-soft) !important; font-weight: 700; }
.dfr-subhead { font-size: 11px; letter-spacing: .06em; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.imports-table.dfr-mini { table-layout: auto; width: 100%; }
.imports-table.dfr-mini td:first-child { white-space: normal; }
.imports-table.dfr-mini tr.dfr-notcash td { color: var(--muted); }
.dfr-small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.dfr-warn { color: var(--red); font-weight: 600; }
.dfr-notes p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.dfr-notes b { color: var(--ink); }
.dfr-credit { font-size: 10px; color: var(--muted); text-align: right; }
.dfr-table tr[data-prevtype], .dfr-mini tr[data-prevtype] { cursor: pointer; }
/* Controls > Department Defaults strip */
.dfr-ac-note { font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); }
.ac-rollout.dfr-ac-locked { cursor: default; opacity: .9; }
.ac-rollout.dfr-ac-changed { box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 700px) {
  .dfr-controls { justify-content: flex-start; }
  .dfr-actions { margin-left: 0; }
  .dfr-title { font-size: 15px; }
  .dfr-grid { max-height: 380px; }
}
/* ---- Sales order board: the one list PLANNING and PRODUCTION share (Ameer 2026-11-03) ---- */
.so-board { margin-top: 10px; }
.so-board-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.so-board-head .panel-subhead { margin: 0; }
.so-board-count { font-size: 11px; color: var(--muted); }
.so-board-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.so-board-filters .so-filter-label { font-size: 10px; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-left: 8px; }
.imports-metrics.so-board-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
.so-board-table th.fw-pro { width: 330px; }
.imports-table.t-fin.so-board-table td.so-pro-cell { white-space: normal; overflow: visible; }
.so-pro-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0; line-height: 1.3; }
.so-pro-line + .so-pro-line { border-top: 1px dashed var(--line, #e3dfd8); }
.so-pro-ref { font-weight: 600; white-space: nowrap; }
.so-pro-qty, .so-pro-due { font-size: 11px; color: var(--muted); white-space: nowrap; }
.so-pro-overdue { font-size: 10px; font-weight: 700; color: var(--red, #d32f2f); letter-spacing: .04em; }
.so-pro-line.is-late .so-pro-due { color: var(--red, #d32f2f); }
.so-muted { color: var(--muted); font-style: italic; }
.so-sub { display: block; font-size: 11px; color: var(--muted); }
.so-board-table tr[data-prevtype] { cursor: pointer; }
.so-board-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.so-board-foot .so-board-note { margin: 0; }
.so-board-stamp { margin-left: auto; }
@media (max-width: 700px) {
  .imports-metrics.so-board-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so-board-filters, .so-board-stamp { margin-left: 0; }
}
/* DESIGN BOARD - the job's opportunity / quotation link (Ameer 2026-11-03) */
.dj-hidden { display: none !important; }
.dj-customer-field { position: relative; }
.dj-customer-field .smc-quo-drop { top: 100%; }
.dj-cust-count { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dj-link-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.dj-link-note.is-missing { color: #D32F2F; font-weight: 600; }
.dj-link-chip { display: inline-block; margin-right: 5px; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; background: #f1eee9; color: var(--accent-deep); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.dj-assign-pending { display: block; font-size: 10px; font-weight: 600; color: #b26a00; white-space: nowrap; }
.dj-link-none { color: var(--muted); font-weight: 500; font-style: italic; }
input.dj-readonly[readonly] { background: var(--panel-soft); color: var(--muted); }
/* PROCUREMENT - the note while the import-tracking fields are not on this company (Ameer 2026-11-03) */
.imports-note { margin: 2px 0 8px; padding: 7px 12px; border: 1px solid #f0c294; border-radius: 10px; background: #fef6ec; color: #7a4a00; font-size: 12.5px; }
.imports-status.untracked { background: var(--panel-soft); color: var(--muted); border-color: var(--line); font-style: italic; }
/* STORE - issues to production and receipts from production (Ameer 2026-11-03) */
.sp-board { margin-top: 10px; }
.sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.sp-head .panel-subhead { margin: 0; }
.sp-count { font-size: 11px; color: var(--muted); }
.sp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-left: auto; }
.sp-filters .sp-filter-label { font-size: 10px; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-left: 8px; }
#storePanel .sp-filters .sp-ctl { margin: 0; }
.sp-filters .sp-ctl select { min-width: 180px; padding: 5px 8px; font-size: 12px; }
.imports-metrics.sp-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 8px; }
.sp-sub-head { margin-top: 10px; }
.imports-table.t-fin.sp-table td.sp-pro-cell { white-space: normal; overflow: visible; }
.sp-sub { display: block; font-size: 11px; color: var(--muted); }
.sp-muted { color: var(--muted); font-style: italic; }
.sp-table tr[data-prevtype] { cursor: pointer; }
.sp-note { margin-top: 6px; }
@media (max-width: 700px) {
  .imports-metrics.sp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-filters { margin-left: 0; }
}
/* SHIPMENT STATUS ON EVERY BOARD (Ameer 2026-11-03) - one panel below the board; amount columns only when the server sends them */
#shipmentsPanel { gap: 10px; }
.ship-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.ship-toggle {
  width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft);
  color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; flex: 0 0 auto;
}
.ship-toggle:hover { border-color: var(--accent); color: var(--accent); }
.ship-title { margin: 0; font-size: 17px; min-width: 0; }
.ship-title span { font-weight: 500; font-size: 13px; color: var(--muted); }
.ship-stamp { flex: 1 1 200px; }
.ship-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.ship-btn { min-height: 30px; padding: 4px 12px; font-size: 12px; }
.ship-oneline { font-size: 13px; color: var(--ink); }
.ship-oneline b { font-weight: 700; }
.ship-empty { padding: 14px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.ship-phases { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ship-phase-group { font-size: 10px; letter-spacing: .08em; font-weight: 700; color: var(--muted); text-transform: uppercase; margin: 0 4px 0 2px; flex: none; }
.ship-phase {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-soft); color: var(--muted); font: 600 10.5px/1.2 var(--font-body); white-space: nowrap; cursor: default;
}
.ship-phase:disabled { opacity: .75; }
.ship-phase strong { font-size: 11px; color: var(--ink); }
.ship-phase.has-count { color: var(--ink); border-color: #f0c294; background: #fef3e7; cursor: pointer; }
.ship-phase.has-count:hover { border-color: var(--accent); }
.ship-phase.picked { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
.ship-phase.picked strong { color: #fff; }
.ship-phase-no { font-size: 9px; opacity: .7; }
.ship-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ship-filters .ship-count { font-size: 11px; color: var(--muted); margin-right: auto; }
.ship-filters .ship-ctl { margin: 0; }
.ship-filters .ship-ctl select { min-width: 170px; padding: 5px 8px; font-size: 12px; }
.imports-table.t-fin.ship-table { width: 1656px; }
.imports-table.t-fin.ship-table.ship-money { width: 1992px; }
.ship-table th.fw-branch { width: 52px; }
.ship-table th.fw-ship { width: 130px; }
.ship-table th.fw-status { width: 150px; }
.ship-table th.fw-phase { width: 64px; }
.ship-table th.fw-fwd { width: 150px; }
.ship-table th.fw-vessel { width: 220px; }
.ship-table th.fw-days { width: 60px; }
.ship-table th.fw-remarks { width: 260px; }
.ship-sub { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ship-muted { color: var(--muted); font-style: italic; }
.imports-table.t-fin.ship-table td.ship-remarks { white-space: normal; overflow: visible; }
.ship-remarks.is-danger { color: var(--red); font-weight: 600; }
.ship-remarks.is-warn { color: var(--amber); font-weight: 600; }
.ship-table tr[data-prevtype] { cursor: pointer; }
.ship-note { margin: 0; }
@media (max-width: 700px) {
  .ship-title { font-size: 15px; }
  .ship-filters .ship-count { margin-right: 0; }
  .ship-actions { margin-left: 0; }
}
/* ---- work-order step controls (Ameer 2026-11-03: Hold / Resume / Not applicable / Reopen / Back to pending): the yellow ON HOLD chip, the hold and N/A reason lines, the inline reason form ---- */
.wo-chip-hold { background: #fff3c4; color: #7a5c00; }
.wo-step-onhold .wo-step-num { border-color: #e0b400; color: #7a5c00; }
.wo-step-hold, .wo-step-na { margin-top: 4px; font-size: 11.5px; font-weight: 600; }
.wo-step-hold { color: #7a5c00; }
.wo-step-na { color: var(--muted); }
.wo-act-form { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: rgba(245, 130, 31, 0.04); }
.wo-act-form label { font-size: 11px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.wo-act-form select, .wo-act-form input[type="text"] { font: inherit; font-size: 11.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft, #fff); color: inherit; }
.wo-act-form input[type="text"] { flex: 1 1 220px; min-width: 160px; }
/* ---- automatic steps (Ameer 2026-11-03 ~12:45: steps 3 / 4 / 5 follow SAP's production orders, receipts and deliveries): the blue AUTO chip on the step and on the work-order row ---- */
.wo-chip-auto { background: #e3f0ff; color: #0f4c8a; }
.wo-step-auto .wo-step-num { border-color: #4a90d9; color: #0f4c8a; }