*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  --navy-950: #031d15;
  --navy-900: #05281d;
  --navy-800: #073728;
  --green-700: #0f6e56;
  --green-600: #158468;
  --green-100: #dcefe9;
  --green-50: #f1f8f5;
  --blue-900: #0f2a52;
  --blue-800: #143c75;
  --blue-700: #1e5ba8;
  --blue-600: #2f6fb7;
  --blue-300: #9bbee0;
  --blue-200: #cfe0f1;
  --blue-100: #e8f0fa;
  --blue-50: #f4f8fd;
  --blue-500: #3b82c4;
  --blue-400: #5b9bd5;
  --green: #2e7d4f;
  --green-bg: #e5f2ea;
  --green-border: #b8d9c5;
  --amber: #b8770b;
  --amber-bg: #fff4dd;
  --amber-border: #f0d89c;
  --catalogue-grid-header-bg: #f0f4ff;
  --catalogue-grid-header-line: #1a56db;
  --catalogue-ux16-warning-bg: #fcf4d6;
  --catalogue-ux16-warning-accent: #f1c21b;
  --catalogue-ux16-warning-message: #9e5e00;
  --catalogue-ux16-warning-icon: #8e6a00;
  --red: #b83a3a;
  --red-bg: #fbecec;
  --red-border: #e8b5b5;
  --rail: #eff2f6;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --surface: #ffffff;
  --surface-soft: #f7f9fb;
  --panel: #f8f9fb;
  --border: #d9e0e6;
  --border-soft: #e5e9ef;
  --ink: #1f2a3d;
  --ink-2: #445069;
  --ink-3: #6b778c;
  --ink-4: #7a8499;
  --ink-soft: #4c596f;
  --ink-muted: #78849a;
  --danger: #b83a3a;
  --danger-bg: #fbecec;
  --warning-bg: #fff5df;
  --warning: #9b6509;
  --focus: #2f83d0;
  --r: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --shadow-1: 0 8px 22px rgba(15, 42, 82, 0.08);
  --shadow-3: 0 24px 70px rgba(15, 42, 82, 0.26);
  --shadow: 0 24px 70px rgba(3, 29, 21, 0.28);
  --shadow-soft: 0 12px 36px rgba(15, 42, 82, 0.14);
  font-family: "Segoe UI", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  color: var(--ink);
  background: var(--navy-900);
}

body.mws-page-loading {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 36%, transparent);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

#pageLoader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  background: rgba(15, 23, 42, 0.97);
}

#pageLoader[hidden] {
  display: none !important;
}

.page-loader-brand {
  display: block;
  user-select: none;
}

.page-loader-brand-logo {
  display: block;
  width: min(74vw, 680px);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

#pageLoader::after {
  content: "";
  width: 48px;
  height: 48px;
  border: 5px solid rgba(47, 111, 183, 0.28);
  border-top-color: var(--blue-600);
  border-radius: 50%;
  animation: mws-page-loader-spin 1s linear infinite;
  box-shadow: 0 0 15px rgba(47, 111, 183, 0.32);
}

@keyframes mws-page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.login-shell {
  min-height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
}

.login-visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--navy-950);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5vw;
}

.login-backdrop-stage {
  position: absolute;
  inset: -1%;
  overflow: hidden;
}

.login-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(4, 35, 24, 0.45) 0%, rgba(4, 35, 24, 0.12) 50%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.login-backdrop {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: left center;
    transform: scale(1.14);
    transform-origin: left center;
    filter: brightness(0.8);
}

.login-card {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 440px;
  max-width: 100%;
  background: #fff;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.16);
  overflow-y: auto;
}

.login-brand {
  display: flex;
  align-items: center;
  margin-bottom: 36px;
}

/* ==========================================================================
   Login Visual Overlay & Fluid Typography
   ========================================================================== */

/* Inner layout container sitting inside .login-backdrop-stage */
.login-visual-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;

}

/* Overlapping green vector graphics */
.brand-vectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Overlay text container */
.login-backdrop-overlay {
    position: absolute;
    z-index: 2;
    max-width: 85%;
    pointer-events: none;
}

/* Serif Tagline with fluid font sizing across monitor resolutions */
.hero-tagline {
    font-family: 'DM Serif Display';
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.02em;
    padding-left: 5vw;
    opacity: 80%;
    /* Dynamically scales text based on monitor width */
    font-size: clamp(2rem, 4.2vw, 10.5rem);
}

/* Top line (White text) */
.hero-tagline .text-white {
    color: #E2E8F0;
    display: block;
}

/* Bottom line (Green italic text) */
.hero-tagline .text-green {
    color: #10B981; /* Emerald green matching brand vectors */
    font-style: italic;
    display: block;
    margin-top: 0.15em;
}

.brand-logo {
  width: auto;
  max-width: 100%;
  height: 55px;
  display: block;
}

.login-h {
  margin: 0 0 6px;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.login-sub {
  margin: 0 0 28px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.5;
}

.error-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px;
  margin-bottom: 18px;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid #e8b5b5;
  border-radius: 4px;
  font-size: 13px;
}

.error-banner-text {
  flex: 1 1 auto;
  line-height: 1.45;
}

.error-banner-dismiss {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: -2px 2px 0 -2px;
  display: grid;
  place-items: center;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.error-banner-dismiss:hover,
.error-banner-dismiss:focus-visible {
  background: rgba(180, 40, 40, 0.12);
}

.error-banner-dismiss svg {
  width: 14px;
  height: 14px;
}

.error-banner svg,
.primary-button svg,
.icon-button svg,
.confirm-dialog svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.login-form {
  display: block;
}

.login-card .field {
  margin-bottom: 16px;
}

.field {
  display: grid;
  gap: 6px;
}

.field-label,
.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.text-input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13.5px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.text-input::placeholder {
  color: #677895;
}

.text-input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
  outline: none;
}

.text-input.invalid {
  border-color: var(--danger);
}

.login-card .text-input {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 12.5px;
  border-radius: var(--r);
}

.password-wrap {
  position: relative;
}

.password-wrap .text-input {
  padding-right: 46px;
}

.login-card .password-wrap .text-input {
  padding-right: 36px;
}

.login-card .icon-button {
  top: 50%;
  right: 8px;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
}

.login-card .icon-button svg,
.login-card .password-eye {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.login-card .password-wrap .password-eye[hidden] {
  display: none !important;
}

.password-wrap input::-ms-reveal,
.password-wrap input::-ms-clear {
  display: none;
}

.icon-button {
  width: 36px;
  height: 36px;
  position: absolute;
  top: 2px;
  right: 4px;
  display: grid;
  place-items: center;
  color: #34270e;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.icon-button:hover {
  background: var(--green-50);
  color: var(--green-700);
}

.field-error {
  color: var(--danger);
  font-size: 12px;
}

.field-error:empty {
  display: none;
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 40px;
  border-radius: 4px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.primary-button {
  width: 100%;
  margin-top: 8px;
  color: #fff;
  background: var(--green-700);
  border-color: var(--navy-800);
}

.primary-button:hover:not(:disabled) {
  background: var(--green-600);
}

.primary-button.compact {
  width: auto;
  min-width: 168px;
  margin-top: 0;
  padding: 0 15px;
}

.primary-button:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.secondary-button {
  padding: 0 15px;
  background: #fff;
  border-color: var(--border);
  color: var(--ink-soft);
}

.secondary-button:hover {
  background: var(--green-50);
  color: var(--ink);
}

.danger-button {
  padding: 0 15px;
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

.danger-button:hover {
  background: #9f2f2f;
}

.icon-button svg,
.password-eye {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-card .primary-button {
  min-height: 44px;
  padding: 12px;
  font-weight: 600;
  background: var(--blue-700);
  border-color: var(--blue-800);
}

.login-card .primary-button:hover:not(:disabled) {
  background: var(--blue-600);
}

.login-card .sign-in-arrow {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

.sign-in-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
}

.sign-in-spinner[hidden] {
  display: none !important;
}

.sign-in-arrow {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.login-foot {
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-3);
}

.forgot-link {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.forgot-link:hover {
  text-decoration: underline;
}

.modal-overlay,
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 42, 82, 0.45);
  backdrop-filter: blur(3px);
}

/* Confirm (decline) dialog sits above the main EULA overlay */
.confirm-overlay {
  z-index: 10001;
}

.eula-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.eula-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--blue-900), var(--blue-800));
  border-bottom: 1px solid var(--blue-900);
}

.eula-mark {
  width: 28px;
  height: 28px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 5px;
}

.eula-head-text {
  min-width: 0;
}

.eula-modal-title {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.eula-modal-sub {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11.5px;
}

.eula-body {
  flex: 1;
  min-height: 0;
  padding: 18px 22px;
  overflow-y: auto;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
  scroll-behavior: smooth;
}

.eula-body h1 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.eula-body h2 {
  margin: 16px 0 6px;
  padding-bottom: 4px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-soft);
}

.eula-body p {
  margin: 0 0 9px;
}

.eula-body ul {
  margin: 0 0 9px 18px;
  padding: 0;
}

.eula-body li {
  margin-bottom: 4px;
}

.eula-preamble {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--r-md);
}

.eula-caps {
  margin-bottom: 14px;
  padding: 10px 12px;
  color: var(--ink-2);
  background: #f8fafc;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.55;
  text-transform: uppercase;
}

.eula-final-caps {
  margin-top: 18px;
}

.eula-scroll-hint {
  position: sticky;
  bottom: 8px;
  display: flex;
  justify-content: center;
  margin: 14px 0 4px;
  pointer-events: none;
}

.eula-scroll-hint span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  color: var(--ink-3);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  font-size: 10.5px;
}

.eula-scroll-hint.hidden {
  display: none;
}

.eula-foot {
  flex-shrink: 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

/* CAB-361: pricing key create / unlock modals */
.pricing-key-modal.eula-modal {
  width: min(520px, calc(100vw - 32px));
}

.pricing-key-body {
  display: grid;
  gap: 14px;
  padding: 18px 20px 10px;
  background: #fff;
}

.pricing-key-body .field {
  gap: 6px;
}

.pricing-key-hint {
  margin: 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}

.pricing-key-hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--green-50);
  border: 1px solid var(--border-soft);
  font-size: 11px;
}

.pricing-key-body .text-input,
.pricing-key-body input[type="file"] {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13.5px;
}

.pricing-key-file-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.pricing-key-file-row input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pricing-key-file-row .secondary-button {
  flex: 0 0 auto;
  margin: 0;
  min-height: 32px;
  padding: 6px 12px;
}

.pricing-key-file-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-key-body .text-input:focus,
.pricing-key-body input[type="file"]:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
  outline: none;
}

.pricing-key-file-row:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
}

.pricing-key-body .pricing-key-password-wrap .text-input {
  padding-right: 72px;
}

.pricing-key-body .pricing-key-password-wrap .password-clear {
  right: 36px;
}

.pricing-key-body .pricing-key-password-wrap .password-toggle {
  right: 8px;
}

.pricing-key-body .pricing-key-password-wrap .icon-button {
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
}

.pricing-key-body .pricing-key-password-wrap .password-clear[hidden] {
  display: none !important;
}

.pricing-key-body .pricing-key-password-wrap input::-ms-reveal,
.pricing-key-body .pricing-key-password-wrap input::-ms-clear {
  display: none;
}

.pricing-key-modal .eula-foot .primary-button {
  margin-top: 0;
}

.pricing-key-modal .eula-foot .eula-btn-row {
  gap: 10px;
}

.pricing-key-modal .eula-foot .secondary-button,
.pricing-key-modal .eula-foot .primary-button {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}

.pricing-key-save-path {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--green-50);
  border: 1px solid var(--border-soft);
  color: var(--ink);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
}

.eula-modal .pricing-key-save-path {
  display: block;
}

.eula-agree-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 10px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.eula-agree-row:has(input:checked) {
  background: var(--blue-50);
  border-color: var(--blue-300);
}

.eula-agree-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--blue-700);
}

.eula-agree-row input:disabled {
  opacity: 0.56;
}

.eula-agree-label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  user-select: none;
}

.eula-agree-label.locked {
  color: var(--ink-3);
}

.eula-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.eula-btn-r,
.confirm-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eula-version {
  min-width: 0;
  color: var(--ink-4);
  font-size: 10.5px;
  line-height: 1.35;
}

.eula-btn-r .secondary-button {
  min-height: 32px;
  padding: 0 14px;
  border-color: var(--ink-3);
  color: var(--ink-2);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.eula-btn-r .secondary-button:hover {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: var(--danger);
}

.eula-accept {
  min-width: 154px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  color: #fff;
  background: var(--blue-700);
  border: 1px solid var(--blue-800);
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.eula-accept:hover:not(:disabled) {
  background: var(--blue-600);
}

.eula-accept:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.eula-accept svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confirm-dialog {
  width: min(390px, 100%);
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  padding: 24px;
}

.confirm-dialog > svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confirm-dialog-danger {
  text-align: center;
}

.confirm-dialog-danger > svg {
  color: var(--danger);
}

.confirm-dialog-danger .confirm-actions {
  justify-content: center;
}

.confirm-dialog-info {
  text-align: center;
}

.confirm-dialog-info .confirm-actions {
  justify-content: center;
}

.hub-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
}

.hub-alert-overlay[hidden] {
  display: none !important;
}

.hub-alert-dialog {
  width: min(520px, 100%);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 12px 36px rgba(15, 42, 82, 0.22);
  overflow: hidden;
}

.hub-alert-title {
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--blue-50);
  border-bottom: 1px solid var(--border);
}

.hub-alert-body {
  padding: 18px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre-line;
}

.hub-alert-actions {
  display: flex;
  justify-content: center;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border-soft);
}

.hub-alert-ok {
  min-width: 72px;
  min-height: 32px;
  padding: 0 14px;
  color: #fff;
  background: var(--blue-700);
  border: 1px solid var(--blue-800);
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.hub-alert-ok:hover {
  background: var(--blue-600);
}

.project-confirm-dialog .hub-alert-actions {
  justify-content: flex-end;
  gap: 8px;
}

.project-confirm-dialog .hub-alert-title {
  font-size: 15px;
}

/* Project action toggle (three-dot button) */
.proj-action-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm, 4px);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}

.proj-action-toggle:hover:not(:disabled) {
  background: var(--surface-soft, #f3f6f9);
  color: var(--ink);
}

.proj-action-toggle:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

/* Project action dropdown */
.proj-action-wrap {
  position: relative;
  display: inline-flex;
}

.proj-action-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 1000;
  min-width: 148px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 22px rgba(15, 42, 82, 0.14);
  padding: 4px 0;
  list-style: none;
  margin: 0;
}

.proj-action-menu[hidden] {
  display: none !important;
}

.proj-action-menu li button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  background: transparent;
  border: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}

.proj-action-menu li button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.proj-action-menu li button.danger {
  color: var(--danger);
}

.proj-action-menu li button.danger:hover {
  background: var(--danger-bg);
}

.proj-action-menu li button:disabled {
  opacity: 0.42;
  color: var(--ink-4);
  cursor: not-allowed;
  pointer-events: none;
}

.proj-action-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 0;
}

body.hub-alert-open {
  overflow: hidden;
}

.success-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 11000;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 12px 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue-700);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  font-size: 12.5px;
  line-height: 1.45;
}

.success-toast-copy {
  display: grid;
  gap: 2px;
}

.success-toast-copy strong {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

.success-toast-copy span {
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.4;
}

.success-toast svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--blue-700);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confirm-dialog h2 {
  margin: 12px 0 8px;
  font-size: 20px;
}

.confirm-dialog p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: #f3f6f9;
}

.app-shell > #homeWrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-shell.home-mode-new-project .home-search-lite,
.app-shell.home-mode-dashboard .home-search-lite,
.app-shell.home-mode-catalogue .home-search-lite,
.app-shell.home-mode-general-settings .home-search-lite,
.app-shell.home-mode-about .home-search-lite {
  display: none;
}

html.home-mode-new-project,
html.home-mode-new-project body {
  height: 100%;
  overflow: hidden;
}

.app-shell.home-mode-new-project {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.app-shell.home-mode-new-project > #homeWrap {
  overflow: hidden;
}

.app-shell.home-mode-dashboard {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

html.home-mode-dashboard,
html.home-mode-dashboard body {
  height: 100%;
  overflow: hidden;
}

.app-shell.home-mode-dashboard > #homeWrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-shell.home-mode-catalogue {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

html.home-mode-catalogue,
html.home-mode-catalogue body {
  height: 100%;
  overflow: hidden;
}

.app-shell.home-mode-catalogue > #homeWrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html.home-global-busy,
html.home-global-busy body,
html.home-global-busy body * {
  cursor: wait !important;
}

#homeGlobalBusyShield {
  position: fixed;
  inset: 0;
  z-index: 100002;
  pointer-events: auto;
  background: transparent;
  display: none;
}

/* DevExpress alert/dialog must sit above ribbon flyouts, backstage shells, and the home busy shield. */
.dx-dialog-wrapper,
.dx-overlay-wrapper.dx-dialog-wrapper {
  z-index: 200020 !important;
}

/*
 * CAB-754 / ITEMIZED 1a–1b: dialog actions must stay readable.
 * Softblue (and some dark skins) paint contained dialog buttons dark; all dialog
 * actions use the blue primary surface with white label text for consistent contrast.
 */
.dx-dialog-wrapper .dx-dialog-button.dx-button,
.dx-dialog-wrapper .dx-dialog-button.dx-button-default,
.dx-dialog-wrapper .dx-dialog-button.dx-button-default.dx-button {
  background-color: #1e5ba8 !important;
  border-color: #174a8a !important;
  color: #ffffff !important;
}

.dx-dialog-wrapper .dx-dialog-button .dx-button-content,
.dx-dialog-wrapper .dx-dialog-button .dx-button-text,
.dx-dialog-wrapper .dx-dialog-button.dx-button-default .dx-button-content,
.dx-dialog-wrapper .dx-dialog-button.dx-button-default .dx-button-text {
  color: #ffffff !important;
}

#homeGlobalBusyShield.home-global-busy-shield--visible {
  display: block;
}

/* CAB-424: bottom-of-screen upload progress for new-project drawing uploads */
.home-upload-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100003;
  padding: 10px 18px 12px;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--border-color, #d8dee8);
  box-shadow: 0 -4px 18px rgba(15, 42, 82, 0.12);
}

.home-upload-progress-label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1a2b42);
}

.home-upload-progress-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 42, 82, 0.12);
}

.home-upload-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-600, #2563eb) 0%, var(--blue-500, #3b82f6) 100%);
  transition: width 0.15s ease-out;
}

[data-theme="dark"] .home-upload-progress {
  background: rgba(22, 30, 42, 0.97);
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .home-upload-progress-label {
  color: #e8eef7;
}

[data-theme="dark"] .home-upload-progress-track {
  background: rgba(255, 255, 255, 0.12);
}

.home-topbar {
  height: 54px;
  position: sticky;
  top: 0;
  z-index: 700;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px 0 0;
  color: #fff;
  background: linear-gradient(180deg, var(--blue-900) 0%, var(--blue-800) 100%);
  border-bottom: 1px solid var(--blue-900);
  box-shadow: 0 4px 18px rgba(15, 42, 82, 0.18);
}

.home-topbar-left,
.home-topbar-right,
.home-greeting-actions,
.home-hi,
.deadline-strip-head,
.home-section-h,
.app-foot,
.side-panel-head,
.project-toolbar,
.view-toggle,
.breadcrumb {
  display: flex;
  align-items: center;
}

.home-topbar-left {
  min-width: 0;
  gap: 10px;
  align-items: stretch;
}

.home-topbar-right {
  gap: 6px;
  align-self: center;
  padding: 0 0 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.home-icon-button,
.home-logo-button,
.home-text-button,
.home-drawer-item,
.app-card,
.view-toggle button,
.breadcrumb button,
.project-row,
.project-card,
.board-card {
  cursor: pointer;
}

.home-icon-button {
  width: 34px;
  height: 34px;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
}

.home-icon-button:hover,
.home-icon-button:focus-visible {
  color: var(--blue-700);
  background: var(--blue-50);
  border-color: var(--blue-200);
}

.home-topbar .home-icon-button {
  align-self: center;
  color: rgba(255, 255, 255, 0.82);
  border-color: transparent;
}

.home-topbar .home-icon-button:hover,
.home-topbar .home-icon-button:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-color: transparent;
}

body.help-guide-open {
  overflow: hidden;
}

.help-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 20, 38, 0.68);
  backdrop-filter: blur(2px);
}

.help-guide-overlay[hidden] {
  display: none;
}

.help-guide-dialog {
  width: min(1180px, 96vw);
  height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(20, 44, 78, 0.18);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(6, 18, 37, 0.34);
  outline: none;
}

.help-guide-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 20px;
  color: #fff;
  background: linear-gradient(180deg, var(--blue-900) 0%, var(--blue-800) 100%);
}

.help-guide-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.help-guide-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-guide-download,
.help-guide-close {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}

.help-guide-download {
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.help-guide-close {
  width: 36px;
  padding: 0;
}

.help-guide-download:hover,
.help-guide-download:focus-visible,
.help-guide-close:hover,
.help-guide-close:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.38);
  outline: none;
}

.help-guide-download svg,
.help-guide-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.help-guide-content {
  min-height: 0;
  flex: 1;
  background: #e8edf3;
}

.help-guide-content object {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.help-guide-content p {
  margin: 24px;
  color: #17283e;
}

@media (max-width: 640px) {
  .help-guide-overlay {
    padding: 0;
  }

  .help-guide-dialog {
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .help-guide-header {
    padding-left: 14px;
  }

  .help-guide-download span {
    display: none;
  }
}

.home-topbar #homeMenuButton {
  width: 44px;
  height: 54px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  margin-left: 0;
}

html[data-hide-home-menu="true"] #homeMenuButton {
  display: none;
}

html[data-hide-home-menu="true"] .home-topbar-left .home-logo-button {
  border-left: 0;
}

.home-icon-button svg,
.home-user-chip svg,
.home-search-lite svg,
.app-icon svg,
.project-search svg,
.view-toggle svg,
.deadline-pin svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-icon-button.has-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  top: 7px;
  right: 7px;
  background: var(--danger);
  border: 2px solid #fff;
  border-radius: 50%;
}

.home-topbar .home-icon-button.has-dot::after {
  border-color: var(--blue-800);
}

.home-logo-button {
  height: 38px;
  align-self: center;
  padding: 0 4px;
  background: transparent;
  border: 0;
}

.home-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 4px;
  color: #fff;
}

.home-brand-mark {
  width: 30px;
  height: 28px;
  flex: 0 0 30px;
}

.home-brand-mark img {
  display: block;
  width: auto;
  height: 28px;
  max-width: none;
}

.home-brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #fff;
  white-space: nowrap;
}

.home-brand-accent {
  color: var(--blue-300);
  font-weight: 600;
}

.home-logo-button img {
  width: auto;
  height: 27px;
  display: block;
}

.home-search-lite {
  align-self: center;
  min-width: 260px;
  max-width: 420px;
  height: 34px;
  gap: 8px;
  padding: 0 11px;
  color: var(--ink-4);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  font-size: 13px;
  margin-left : 125px;
}

.home-topbar .home-search-lite {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.home-user-wrap,
.home-help-wrap {
  position: relative;
}

.home-user-menu.home-help-menu {
  left: 0;
  right: auto;
}

.home-user-chip {
  min-width: 210px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 0 6px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.home-user-chip:hover {
  border-color: var(--blue-300);
  background: var(--blue-50);
}

.home-topbar .home-user-chip {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}

.home-topbar .home-user-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
}

.home-topbar .home-user-copy span:first-child {
  color: #fff;
}

.home-topbar .home-user-copy span:last-child {
  color: rgba(255, 255, 255, 0.6);
}

.home-topbar .home-avatar {
  background: linear-gradient(135deg, var(--blue-400), var(--blue-700));
}

.home-user-chip[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.home-avatar,
.home-avatar-lg {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--green-700));
  font-weight: 700;
}

.home-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
}

.home-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 14px;
  box-shadow: 0 0 0 3px var(--blue-100);
}

.home-user-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.home-user-copy span:first-child {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-user-copy span:last-child {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-user-menu {
  width: 210px;
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 760;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-1);
}

.home-user-menu button {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  color: var(--ink-2);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 12.5px;
  cursor: pointer;
}

.home-user-menu button:hover {
  color: var(--ink);
  background: var(--surface-soft);
}

.home-drawer-backdrop {
  position: fixed;
  inset: 54px 0 0;
  z-index: 720;
  background: rgba(15, 42, 82, 0.32);
}

.home-drawer {
  width: 280px;
  position: fixed;
  top: 54px;
  bottom: 0;
  left: 0;
  z-index: 730;
  padding: 14px;
  background: #fff;
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 30px rgba(15, 42, 82, 0.13);
  display: flex;
  flex-direction: column;
}

.home-drawer-group {
  display: grid;
  gap: 5px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

.home-drawer-item {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.home-drawer-item:hover:not(:disabled),
.home-drawer-item.active {
  color: var(--blue-800);
  background: var(--blue-50);
  border-color: var(--blue-200);
}

.home-drawer-item.muted {
  color: var(--ink-4);
  cursor: not-allowed;
  opacity: 0.64;
}

.home-drawer-label {
  display: block;
  padding: 8px 12px 4px;
  color: var(--ink-4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-drawer-parent {
  justify-content: space-between;
}

.home-drawer-chevron {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.15s ease;
}

.home-drawer-parent.open .home-drawer-chevron {
  transform: rotate(90deg);
}

.home-drawer-sub-group {
  display: grid;
  gap: 5px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}

.home-drawer-sub-group.open {
  max-height: 120px;
}

.home-drawer-sub {
  padding-left: 28px;
  font-size: 12px;
}

.home-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 30px 52px;
}

.home-greeting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.home-hi {
  gap: 12px;
  min-width: 0;
}

.home-hi h1 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}

.home-hi p {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: 12px;
}

.home-greeting-actions {
  gap: 8px;
  flex-shrink: 0;
}

.deadline-strip {
  margin-bottom: 22px;
  padding: 12px 16px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.deadline-strip-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bid-strip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.bid-strip-leg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--ink-3);
}

.bid-strip-leg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bid-strip-leg-dot.urgent {
  background: var(--red);
}

.bid-strip-leg-dot.active {
  background: var(--amber);
}

.bid-strip-leg-dot.upcoming {
  background: var(--blue-400);
}

.bid-strip-leg-dot.review {
  background: var(--purple, #7c5cbf);
}

.bid-zone-urgent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 23%;
  background: rgba(184, 58, 58, 0.06);
  pointer-events: none;
}

.home-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-view-toggle {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.app-view-btn {
  min-height: 30px;
  padding: 0 10px;
  color: var(--ink-3);
  background: #fff;
  border: 0;
  border-right: 1px solid var(--border-soft);
  font-size: 11px;
}

.app-view-btn:last-child {
  border-right: 0;
}

.app-view-btn.active {
  color: var(--blue-700);
  background: var(--blue-50);
}

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

.app-list .app-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  text-align: left;
}

.home-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  background: var(--red);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.act-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.act-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}

.act-item:last-child {
  border-bottom: 0;
}

.act-item:hover {
  background: var(--blue-50);
}

.act-item-empty {
  cursor: default;
}

.act-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
}

.act-icon-urgent {
  background: var(--red-bg);
  box-shadow: inset 0 0 0 1px var(--red-border);
}

.act-icon-review {
  background: var(--amber-bg);
  box-shadow: inset 0 0 0 1px var(--amber-border);
}

.act-icon-info {
  background: var(--blue-100);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}

.act-body {
  flex: 1;
  min-width: 0;
}

.act-title {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.act-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-3);
}

.act-btn {
  flex-shrink: 0;
}

.home-wrap.view-dashboard {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-wrap.view-dashboard .project-dashboard h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.home-section-label {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.deadline-range {
  color: var(--ink-3);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
}

.deadline-track {
  min-height: 76px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(184, 58, 58, 0.08) 0 23%, transparent 23%),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--border-soft) calc(25% - 1px) 25%);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.today-marker {
  position: absolute;
  top: 6px;
  left: 8px;
  color: var(--blue-700);
  font-size: 10px;
  font-weight: 700;
}

.deadline-pin {
  min-width: 110px;
  max-width: 180px;
  position: absolute;
  top: 28px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 7px;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 42, 82, 0.08);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deadline-pin::after {
  content: "";
  width: 1px;
  height: 18px;
  position: absolute;
  top: 100%;
  left: 50%;
  background: currentColor;
}

.deadline-pin.red {
  color: var(--danger);
  border-color: #e8b5b5;
}

.deadline-pin.amber {
  color: var(--warning);
  border-color: #edd59e;
}

.deadline-pin.blue {
  color: var(--blue-700);
  border-color: var(--blue-200);
}

.home-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

.home-section {
  margin-bottom: 22px;
}

.home-section-h {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.home-text-button {
  padding: 0;
  color: var(--blue-700);
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 700;
}

.home-text-button:hover {
  text-decoration: underline;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.app-card {
  min-height: 160px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 14px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.app-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--blue-300);
  box-shadow: 0 14px 30px rgba(15, 42, 82, 0.12);
}

.app-card:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.app-request {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.app-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
}

.app-icon-blue {
  color: var(--blue-700);
  background: var(--blue-50);
}

.app-icon-amber {
  color: var(--warning);
  background: var(--warning-bg);
}

.app-icon-gray {
  color: var(--ink-3);
  background: var(--surface-soft);
}

.app-icon-dashed {
  color: var(--green-700);
  background: #fff;
  border: 1px dashed var(--green-600);
}

.app-name {
  font-size: 14px;
  font-weight: 800;
}

.app-desc {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.4;
}

.app-foot {
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-3);
  font-size: 11px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.status-pill.green {
  color: #116045;
  background: #dff3ea;
}

.status-pill.amber {
  color: #8a5b0b;
  background: #fff0cb;
}

.status-pill.gray {
  color: var(--ink-3);
  background: var(--surface-soft);
}

.status-pill.red {
  color: var(--danger);
  background: var(--danger-bg);
}

.status-pill.blue {
  color: var(--blue-700);
  background: var(--blue-50);
}

.home-proj-list,
.project-list-view {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.home-proj-head,
.home-proj-row,
.project-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 110px 105px 110px;
  gap: 12px;
  align-items: center;
}

.home-proj-head {
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border-soft);
}

.home-proj-head span,
.project-row.head span {
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-proj-row,
.project-row {
  width: 100%;
  padding: 11px 16px;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

.home-proj-row:last-child,
.project-row:last-child {
  border-bottom: 0;
}

.home-proj-row:hover,
.project-row:hover {
  background: var(--blue-50);
}

.home-proj-name,
.project-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-proj-client,
.project-meta {
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money,
.date-cell,
.number-cell {
  color: var(--ink-2);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px;
  text-align: right;
}

.date-cell {
  text-align: left;
}

.home-side {
  display: grid;
  gap: 14px;
}

.side-panel {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.side-panel-head {
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.side-panel-head span:last-child {
  color: var(--ink-3);
  font-weight: 600;
}

.week-days,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.week-days span {
  min-height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: var(--surface-soft);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

.week-days span.today {
  color: #fff;
  background: var(--blue-700);
}

.week-events,
.activity-feed {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.week-event,
.activity-item {
  display: grid;
  gap: 2px;
  padding-left: 10px;
  border-left: 3px solid var(--green-700);
  color: var(--ink-2);
  font-size: 11.5px;
}

.week-event {
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
  cursor: pointer;
}

.week-event:hover {
  color: var(--ink);
}

.week-event.red {
  border-left-color: var(--danger);
}

.week-event.amber {
  border-left-color: var(--warning);
}

.stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stat-grid div {
  min-height: 68px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.stat-grid strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.stat-grid span {
  color: var(--ink-3);
  font-size: 10.5px;
}

.project-dashboard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 0;
  overflow: hidden;
}

.home-wrap.view-dashboard > #projectDashboardView {
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* Grid row 1 stays fixed; only .dash-body scrolls. Page-level sticky overlapped thead (CAB-408). */
.home-wrap.view-dashboard .project-dashboard-sticky {
  position: relative;
  top: auto;
  z-index: 2;
  background: #fff;
  box-shadow: 0 1px 0 var(--border-soft);
}

.project-dashboard-sticky {
  position: sticky;
  top: 54px;
  z-index: 650;
  background: #fff;
  box-shadow: 0 1px 0 var(--border-soft);
}

.project-page-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
}

.project-dashboard .project-page-head.page-h {
  padding: 20px 28px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
}

.breadcrumb,
.page-h-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--ink-3);
  font-size: 11px;
}

.breadcrumb button,
.page-h-crumb button,
.page-h-crumb-link {
  padding: 0;
  color: var(--blue-700);
  background: transparent;
  border: 0;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.breadcrumb button:hover,
.page-h-crumb button:hover,
.page-h-crumb-link:hover {
  text-decoration: underline;
}

.page-h-crumb-static {
  cursor: default;
  pointer-events: none;
}

.page-h-crumb-static:hover {
  text-decoration: none;
}

.project-page-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.dash-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: auto;
  padding: 6px 14px;
  border-radius: var(--r);
  border: 1px solid var(--blue-800);
  background: var(--blue-700);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.dash-btn-primary:hover:not(:disabled) {
  background: var(--blue-600);
  border-color: var(--blue-700);
}

.dash-btn-primary:active:not(:disabled) {
  background: var(--blue-800);
}

.dash-btn-primary:disabled,
.dash-btn-primary[aria-disabled="true"] {
  background: var(--rail);
  border-color: var(--border);
  color: var(--ink-4);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.78;
}

.dash-btn-primary svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.project-page-head p {
  margin: 5px 0 0;
  color: var(--ink-3);
  font-size: 12px;
}

.project-toolbar {
  gap: 8px;
  flex-wrap: nowrap;
}

.project-search {
  width: 280px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.project-search input {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
}

.dash-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  overflow-x: auto;
}

/* Tab rows only — no vertical scrollbar (overflow-x:auto otherwise forces overflow-y:auto). */
.dash-toolbar.account-toolbar {
  overflow: visible;
}

.dash-search {
  flex: 0 0 280px;
}

.dash-filter {
  position: relative;
  height: 38px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  flex-shrink: 0;
  gap: 5px;
  padding: 0 28px 0 10px;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.dash-filter-label {
  flex: 0 0 auto;
}

.dash-filter-select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: 0;
}

.dash-filter-val {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: 3px;
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.dash-filter-select-host {
  flex: 0 0 auto;
  min-width: 0;
}

.dash-filter-select-host .dx-selectbox,
.dash-filter-select-host .dx-texteditor {
  border: 0;
  background: transparent;
  box-shadow: none;
  width: auto !important;
  min-width: 0;
  max-width: none;
}

.dash-filter-select-host .dx-texteditor-input {
  min-height: 0;
  width: auto !important;
  max-width: none;
  padding: 0;
  margin-left: 3px;
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-overflow: clip;
  overflow: visible;
}

.dash-filter-select-host .dx-texteditor-input-container {
  max-width: none;
}

.dash-filter-select-host .dx-texteditor.dx-editor-outlined {
  border: 0;
  border-radius: 0;
}

.dash-filter-select-host .dx-texteditor.dx-editor-outlined.dx-state-hover,
.dash-filter-select-host .dx-texteditor.dx-editor-outlined.dx-state-focused,
.dash-filter-select-host .dx-texteditor.dx-editor-outlined.dx-state-active {
  border: 0;
  box-shadow: none;
}

.dash-filter-select-host .dx-dropdowneditor-input-wrapper {
  padding: 0;
}

.dash-filter-select-host .dx-dropdowneditor-button {
  display: none;
}

.dash-filter-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.dash-filter-chevron {
  width: 11px;
  height: 11px;
  stroke: var(--ink-4);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
  transform: translateY(1px);
  transition: transform 0.18s ease, stroke 0.15s;
}

.dash-filter:hover .dash-filter-chevron,
.dash-filter.open .dash-filter-chevron,
.dash-filter-toggle:hover .dash-filter-chevron,
.dash-filter-toggle:focus-visible .dash-filter-chevron {
  stroke: var(--blue-700);
}

.dash-filter:hover {
  border-color: var(--blue-400);
  background: var(--blue-50);
}

.dash-filter.active,
.dash-filter.open {
  color: var(--blue-700);
  background: var(--blue-100);
  border-color: var(--blue-200);
  font-weight: 600;
}

.dash-filter.active .dash-filter-select-host .dx-texteditor-input,
.dash-filter.open .dash-filter-select-host .dx-texteditor-input {
  color: var(--blue-700);
}

.dash-filter-dropdown .dx-popup-content {
  padding: 4px 0;
}

.dash-filter-dropdown .dx-list-item {
  font-size: 12px;
}

.dash-filter-dropdown .dx-list-item-content {
  padding: 8px 12px;
  white-space: normal;
}

.dash-filter-dropdown .dx-list-item.dx-state-hover,
.dash-filter-dropdown .dx-list-item.dx-state-active,
.dash-filter-dropdown .dx-list-item.dx-list-item-selected,
.dash-filter-dropdown .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
  background: var(--blue-100) !important;
  color: var(--blue-700) !important;
}

.dash-filter-dropdown .dx-list-item.dx-state-hover .dx-list-item-content,
.dash-filter-dropdown .dx-list-item.dx-state-active .dx-list-item-content,
.dash-filter-dropdown .dx-list-item.dx-list-item-selected .dx-list-item-content {
  color: var(--blue-700) !important;
}

/* ── Custom filter popover ─────────────────────────────────────────── */
/* Portaled to <body> via JS to escape overflow:hidden ancestors */
.dash-filter-pop {
  position: fixed;
  z-index: 9500;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.07);
  padding: 6px 0;
  outline: none;
}

.dash-filter-pop-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-1);
  cursor: pointer;
  white-space: nowrap;
  gap: 10px;
  transition: background 0.1s;
}

.dash-filter-pop-item:hover:not(:disabled) {
  background: var(--blue-50, #eff6ff);
  color: var(--blue-700);
}

.dash-filter-pop-item.selected {
  background: var(--blue-100);
  color: var(--blue-700);
  font-weight: 600;
}

.dash-filter-pop-item.selected::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-700);
  flex-shrink: 0;
  margin-right: -2px;
}

.dash-filter-pop-item:disabled {
  color: var(--ink-3, #9ca3af);
  cursor: default;
  opacity: 0.6;
}

.dash-filter-pop-sep {
  height: 1px;
  background: var(--border);
  margin: 5px 0;
}

.dash-filter-custom-range {
  width: 230px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
}

.dash-filter-date-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ink-2);
}

.dash-filter-date-row input {
  width: 100%;
  height: 30px;
  padding: 4px 7px;
  color: var(--ink-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

.dash-filter-date-row input:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 2px var(--blue-100);
}

.dash-filter-date-error {
  margin: 0 0 8px 50px;
  color: var(--red);
  font-size: 12px;
  line-height: 1.3;
}

.dash-filter-date-actions {
  display: flex;
  justify-content: flex-end;
}

.dash-filter-date-apply {
  height: 28px;
  padding: 0 12px;
  color: #fff;
  background: var(--blue-700);
  border: 1px solid var(--blue-700);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.dash-filter-date-apply:hover,
.dash-filter-date-apply:focus-visible {
  background: var(--blue-800, #1d4ed8);
  border-color: var(--blue-800, #1d4ed8);
}

.dash-filter.open .dash-filter-toggle .dash-filter-chevron {
  transform: rotate(180deg);
}

.dash-filter.open .dash-filter-val {
  color: var(--blue-700);
}

.dash-view-toggle {
  margin-left: auto;
  display: flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.dash-view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 33px;
  padding: 0 10px;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.dash-view-toggle button:last-child {
  border-right: 0;
}

.dash-view-toggle button.active {
  color: var(--blue-700);
  background: var(--blue-100);
}

.dash-view-toggle button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.dash-body {
  padding: 18px 28px;
  overflow: auto;
  background: var(--bg);
  min-height: 0;
}

/* Project list: scroll on dash-body; padding on inner content so sticky thead pins correctly (CAB-408). */
.project-dashboard .dash-body {
  padding: 0;
  overflow: auto;
  min-height: 0;
}

.project-dashboard .project-status-message {
  margin: 18px 28px 0;
}

.project-dashboard .dash-body.view-list .project-list-view,
.project-dashboard .dash-body.view-grid .project-card-view,
.project-dashboard .dash-body.view-board .project-board-view {
  padding: 18px 28px;
}

/* Wrappers must not create nested scrollports — that breaks sticky thead inside the table. */
.project-dashboard .project-list-view {
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.project-dashboard .proj-list-wrap {
  overflow: visible;
}

.dash-body.view-list {
  overflow: auto;
  min-height: 0;
}

.dash-body.view-list .project-list-view {
  display: block;
}

.dash-body.view-list .project-card-view,
.dash-body.view-list .project-board-view {
  display: none;
}

.dash-body.view-grid .project-card-view {
  display: block;
}

.dash-body.view-grid .project-list-view,
.dash-body.view-grid .project-board-view {
  display: none;
}

.dash-body.view-board .project-board-view {
  display: block;
}

.dash-body.view-board .project-list-view,
.dash-body.view-board .project-card-view {
  display: none;
}

.page-h-sub {
  margin: 5px 0 0;
}

.primary-button.compact svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 9px;
  background: #eef2f6;
  color: var(--ink-2);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}

.tag-blue {
  background: var(--blue-100);
  color: var(--blue-700);
  border-color: var(--blue-200);
}

.tag-green {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green-border);
}

.tag-amber {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: var(--amber-border);
}

.tag-red {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red-border);
}

.tag .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.avatar {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
}

.avatar-overlap {
  margin-left: -6px;
  border: 2px solid #fff;
}

.proj-list-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-1);
}

.proj-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  table-layout: fixed;
  min-width: 1248px;
}

.proj-table col.col-project-w {
  width: 220px;
}

.proj-table col.col-status-w {
  width: 110px;
}

.proj-table col.col-customer-w {
  width: 170px;
}

.proj-table col.col-date-w {
  width: 100px;
}

.proj-table col.col-bid-submitted-w {
  width: 108px;
}

.proj-table col.col-pages-w,
.proj-table col.col-rooms-w {
  width: 60px;
}

.proj-table col.col-elevations-w {
  width: 82px;
}

.proj-table col.col-total-w,
.proj-table col.col-team-w {
  width: 90px;
}

.proj-table col.col-outcome-w {
  width: 120px;
}

.proj-table col.col-drawings-w {
  width: 120px;
}

.proj-table col.col-actions-w {
  width: 44px;
}

.proj-table thead th {
  position: sticky;
  top: 0;
  z-index: 45;
  background-color: #f0f6fc;
  box-shadow: inset 0 -1px 0 var(--border-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--blue-700);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.proj-table thead th:hover {
  color: var(--blue-700);
}

.proj-table thead th.col-actions {
  cursor: default;
}

.proj-table thead th.col-add-drawings {
  cursor: default;
  text-align: center;
}

.proj-table thead th.col-add-drawings:hover {
  color: var(--ink-3);
}

.proj-table thead th.col-actions:hover {
  color: var(--ink-3);
}

.proj-table tbody tr {
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.1s;
  cursor: pointer;
}

.proj-table tbody tr:hover {
  background: var(--blue-50);
}

.proj-table tbody tr:nth-child(even) {
  background: #fbfcfe;
}

.proj-table tbody tr:nth-child(even):hover {
  background: var(--blue-50);
}

.proj-table td {
  padding: 11px 14px;
  color: var(--ink);
  vertical-align: middle;
  white-space: nowrap;
}

.proj-table .col-project {
  font-size: 12px;
  color: var(--ink-2);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  font-weight: 700;
}

.proj-table .col-customer {
  font-size: 12px;
  color: var(--ink-2);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-table .col-date,
.proj-table .col-num,
.proj-table .col-total,
.proj-table .col-outcome,
.proj-table .col-bid-submitted {
   font-size: 12px;
  color: var(--ink-2);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
   text-align: center;
}

.proj-table .col-date,
.proj-table .col-num,
.proj-table .col-status,
.proj-table .col-add-drawings,
.proj-table .col-bid-submitted {
   font-size: 12px;
  color: var(--ink-2);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
   text-align: center;
}

.proj-table .col-bid-submitted {
  text-align: center;
}

.proj-table thead th.col-customer {
  cursor: default;
}

.proj-table thead th.col-customer:hover {
  color: var(--ink-3);
}

.proj-table thead th.col-bid-submitted {
  text-align: center;
  cursor: default;
}

.proj-table thead th.col-bid-submitted:hover {
  color: var(--ink-3);
}

.proj-table .bid-submitted-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--green-bg, #e8f7ee);
  color: var(--green, #1f8f4a);
  font-weight: 700;
  line-height: 1;
}

.proj-table .col-num,
.proj-table .col-total {
  text-align: right;
}

.proj-table thead th.col-num,
.proj-table thead th.col-total {
  text-align: right;
}

.proj-table thead th .sort-arr {
  display: inline-block;
  margin-left: 3px;
  font-size: 8px;
  color: var(--ink-4);
  vertical-align: 1px;
}

.proj-table thead th .sort-head.active .sort-arr {
  color: var(--blue-700);
}

.proj-table thead th.col-num,
.proj-table td.col-num {
  padding-left: 10px;
  padding-right: 10px;
}

.proj-table .col-num.dim,
.proj-table .col-total.dim {
  color: var(--ink-4);
}

.proj-table .col-total {
  font-weight: 600;
  color: var(--blue-700);
}

.proj-table .col-total.lost {
  color: var(--ink-3);
}

.proj-table .col-outcome {
  color: var(--ink-2);
}

.proj-table .col-outcome.urgent {
  color: var(--red);
  font-weight: 700;
}

.proj-table .col-outcome.win,
.proj-table .col-outcome.won {
  color: var(--green);
}

.proj-table .col-outcome.lost {
  color: var(--red);
}

.proj-table .col-actions {
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}

.proj-table .col-add-drawings {
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
}

.proj-add-drawing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-soft, #d8e2ec);
  border-radius: var(--r-sm, 4px);
  background: #fff;
  color: var(--blue-700);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.proj-add-drawing-btn:hover {
  background: var(--blue-50);
  border-color: var(--blue-700);
  color: var(--blue-700);
}

.proj-add-drawing-btn:focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: 2px;
}

.proj-add-drawing-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--ink-3);
}

.proj-add-drawing-btn:disabled:hover {
  background: #fff;
  border-color: var(--border-soft, #d8e2ec);
  color: var(--ink-3);
}

.sort-head {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.sort-head.active {
  color: var(--blue-700);
}

.sort-arr {
  font-size: 8px;
  line-height: 1;
  color: var(--ink-4);
  vertical-align: 1px;
}

.icon-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
}

.icon-btn:hover {
  background: var(--blue-100);
  color: var(--blue-700);
}

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 12px;
}

.proj {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.proj:hover {
  transform: translateY(-2px);
  border-color: var(--blue-400);
  box-shadow: var(--shadow-soft);
}

.proj-thumb {
  height: 90px;
  background: linear-gradient(180deg, var(--blue-50), #fff);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proj-thumb-icon {
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1px solid var(--blue-200);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-700);
}

.proj-thumb-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.proj-thumb-status {
  position: absolute;
  top: 7px;
  left: 7px;
}

.proj-thumb-pages {
  position: absolute;
  right: 7px;
  bottom: 7px;
  background: rgba(15, 42, 82, 0.85);
  padding: 2px 6px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: #fff;
}

.proj-body {
  padding: 10px 12px 11px;
}

.proj-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.proj-client {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-bottom: 9px;
}

.proj .avatar,
.kcard .avatar {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.proj .avatar-overlap,
.kcard .avatar-overlap {
  margin-left: -4px;
}

.proj-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-soft);
}

.proj-stat-l {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.proj-stat-v {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
}

.proj-stat-v.blue {
  color: var(--blue-700);
}

.proj-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.proj-team {
  display: flex;
}

.proj-due {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
}

.proj-due.urgent {
  color: var(--red);
  font-weight: 700;
}

.proj-due.win,
.proj-due.won {
  color: var(--green);
}

.proj-due.lost {
  color: var(--red);
}

.kanban-wrap {
  display: flex;
  gap: 14px;
  padding-bottom: 16px;
  align-items: flex-start;
  min-height: 300px;
  overflow-x: auto;
}

.kanban-col {
  flex: 0 0 230px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.kanban-col-head {
  padding: 10px 12px 9px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.kanban-col-h-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kanban-col-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.kanban-col-count {
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
}

.kanban-count-neutral {
  background: var(--border-soft);
  color: var(--ink-3);
}

.kanban-count-amber {
  background: var(--amber-bg);
  color: var(--amber);
}

.kanban-count-blue {
  background: var(--blue-100);
  color: var(--blue-700);
}

.kanban-count-green {
  background: var(--green-bg);
  color: var(--green);
}

.kanban-count-red {
  background: var(--red-bg);
  color: var(--red);
}

.kanban-col-accent {
  height: 3px;
  margin-top: 8px;
}

.kanban-accent-neutral {
  background: var(--border);
}

.kanban-accent-amber {
  background: var(--amber);
}

.kanban-accent-blue {
  background: var(--blue-500);
}

.kanban-accent-green {
  background: var(--green);
}

.kanban-accent-red {
  background: var(--red);
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
}

.kcard {
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 10px 11px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
}

.kcard:hover {
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}

.kcard-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}

.kcard-gc {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-bottom: 7px;
}

.kcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kcard-bid {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-700);
}

.kcard-due {
  font-size: 10px;
  color: var(--ink-2);
  margin-top: 5px;
}

.kcard-due.urgent {
  color: var(--red);
  font-weight: 700;
}

.kcard-due.win,
.kcard-due.won {
  color: var(--green);
}

.kcard-due.lost {
  color: var(--red);
}

.project-status-message {
  padding: 14px;
  margin-bottom: 12px;
  color: var(--ink-3);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.project-empty-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.link-button {
  padding: 0;
  color: var(--blue-700);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

.project-row.head {
  position: sticky;
  top: 54px;
  z-index: 2;
  background: linear-gradient(180deg, var(--blue-50), #fff);
  border-bottom: 2px solid var(--blue-700);
  cursor: default;
}

.project-card-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 12px;
}

.project-card {
  min-height: 185px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 14px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.project-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue-300);
  box-shadow: 0 14px 30px rgba(15, 42, 82, 0.12);
}

.project-card-top,
.project-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.project-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ink-3);
  font-size: 11px;
}

.project-board-view {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.board-column {
  min-height: 320px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.board-column h3 {
  margin: 0 0 10px;
  color: var(--ink-2);
  font-size: 12px;
  text-transform: uppercase;
}

.board-card {
  width: 100%;
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  padding: 10px;
  color: var(--ink);
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.board-card:hover {
  background: var(--blue-50);
  border-color: var(--blue-200);
}

@media (max-width: 860px) {
  .login-card {
    width: min(440px, 100%);
    padding: 0 36px;
  }

  .eula-btn-row {
    align-items: stretch;
    flex-direction: column;
  }

  .eula-btn-r {
    width: 100%;
    justify-content: flex-end;
  }

  .home-search-lite {
    display: none;
  }

  .home-body {
    grid-template-columns: 1fr;
  }

  .app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-side .side-panel:last-child {
    grid-column: 1 / -1;
  }

  .project-board-view {
    grid-template-columns: 1fr;
  }

  .project-dashboard .project-page-head.page-h {
    padding: 18px 20px 12px;
  }

  .dash-toolbar {
    padding: 10px 20px;
  }

  .dash-body {
    padding: 14px 20px;
  }

  .project-dashboard .dash-body {
    padding: 0;
  }

  .project-dashboard .project-status-message {
    margin: 14px 20px 0;
  }

  .project-dashboard .dash-body.view-list .project-list-view,
  .project-dashboard .dash-body.view-grid .project-card-view,
  .project-dashboard .dash-body.view-board .project-board-view {
    padding: 14px 20px;
  }

  .project-toolbar {
    flex-wrap: wrap;
  }

  .project-search,
  .dash-search {
    width: 100%;
    flex-basis: 100%;
  }
}

@media (max-width: 520px) {
  .login-card {
    width: 100%;
    padding: 0 28px;
    box-shadow: none;
    border-left: 0;
  }

  .eula-modal {
    max-height: calc(100vh - 20px);
  }

  .eula-body {
    padding: 18px;
  }

  .eula-btn-r {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .eula-btn-r .secondary-button,
  .eula-accept,
  .danger-button {
    width: 100%;
  }

  .home-topbar {
    padding: 0 10px;
  }

  .home-logo-button img {
    height: 23px;
  }

  .home-user-chip {
    min-width: 0;
    width: 42px;
    padding: 0 7px;
  }

  .home-user-copy,
  .home-user-chip > svg {
    display: none;
  }

  .home-wrap {
    padding: 20px 14px 38px;
  }

  .project-dashboard .project-page-head.page-h {
    padding: 16px 14px 12px;
  }

  .dash-toolbar {
    padding: 10px 14px;
  }

  .dash-body {
    padding: 12px 14px;
  }

  .project-dashboard .dash-body {
    padding: 0;
  }

  .project-dashboard .project-status-message {
    margin: 12px 14px 0;
  }

  .project-dashboard .dash-body.view-list .project-list-view,
  .project-dashboard .dash-body.view-grid .project-card-view,
  .project-dashboard .dash-body.view-board .project-board-view {
    padding: 12px 14px;
  }

  .home-greeting,
  .project-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .home-greeting-actions {
    width: 100%;
  }

  .home-greeting-actions .primary-button,
  .home-greeting-actions .secondary-button,
  .project-page-head .dash-btn-primary {
    width: 100%;
  }

  .app-grid,
  .home-side {
    grid-template-columns: 1fr;
  }

  .home-proj-head,
  .home-proj-row,
  .project-row {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .home-proj-head span:nth-child(3),
  .home-proj-head span:nth-child(4),
  .home-proj-row > :nth-child(3),
  .home-proj-row > :nth-child(4),
  .project-row > :nth-child(3),
  .project-row > :nth-child(4) {
    display: none;
  }

  .project-search {
    width: 100%;
  }
}

/* ===== Home new project wizard (UX parity) ===== */
.home-wrap.view-new-project {
  flex: 1;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.home-new-project {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.home-new-project .wiz {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg, #f3f6f9);
}

.home-new-project .page-h {
  padding: 20px 28px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
}

.home-new-project .page-h-row h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.home-new-project .page-h-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.home-new-project .page-h-crumb button {
  padding: 0;
  color: var(--blue-700);
  background: transparent;
  border: 0;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.home-new-project .page-h-crumb button:hover {
  text-decoration: underline;
}

.home-new-project .page-h-crumb .sep {
  color: var(--ink-4);
}

.home-new-project .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.home-new-project .btn:hover {
  background: var(--hover);
}

.home-new-project .btn-primary {
  background: var(--blue-700);
  color: #fff;
  border-color: var(--blue-800);
}

.home-new-project .btn-primary:hover {
  background: var(--blue-600);
}

.home-new-project .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}

.home-new-project .btn-sm {
  font-size: 11px;
  padding: 4px 10px;
}

.home-new-project .input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 10px;
  font-family: var(--body);
  font-size: 12.5px;
  color: var(--ink);
}

.home-new-project .input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.2);
}

.home-new-project .input.invalid {
  border-color: var(--red);
}

.home-new-project .input.locked,
.home-new-project .input[disabled] {
  background: var(--panel);
  color: var(--ink-3);
  cursor: not-allowed;
}

.home-new-project .mws-us-date-box {
  width: 100%;
  min-width: 0;
}

.home-new-project .mws-us-date-box .dx-texteditor,
.home-new-project .mws-us-date-box .dx-texteditor-input {
  font-family: var(--body);
  font-size: 12.5px;
}

.home-new-project .mws-us-date-box .dx-texteditor.dx-editor-outlined {
  background: #fff;
  border-color: var(--border);
  border-radius: var(--r);
}

.home-new-project .mws-us-date-box .dx-texteditor.dx-editor-outlined.dx-state-focused {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.2);
}

.home-new-project .mws-us-date-box.invalid .dx-texteditor.dx-editor-outlined,
.home-new-project .mws-us-date-box .dx-texteditor.dx-editor-outlined.invalid {
  border-color: var(--red);
}

.home-new-project .mws-us-date-box .dx-dropdowneditor-button {
  border-radius: 0 var(--r) var(--r) 0;
}

.sheet-section {
  margin-bottom: 22px;
}

.sheet-section-h {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.sheet-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.sheet-row.full {
  grid-template-columns: 1fr;
}

.sheet-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sheet-field-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 4px;
}

.sheet-field-req,
.wiz-req-mark {
  color: var(--red);
  font-weight: 700;
}

.sheet-field-error {
  margin-top: 4px;
  font-size: 11px;
  color: var(--red);
}

.field-hint {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-4);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.field-hint svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.field-help {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 5px;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.field-help svg {
  width: 11px;
  height: 11px;
  stroke: var(--blue-700);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 2px;
}

.sector-input {
  display: flex;
  gap: 6px;
}

.sector-input select {
  flex: 1;
}

.new-sector-form {
  display: none;
  margin-top: 7px;
  gap: 6px;
  align-items: center;
  padding: 8px;
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--r);
}

.new-sector-form.show {
  display: flex;
}

.contact-suggest {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.contact-suggest-label {
  font-size: 9.5px;
  color: var(--ink-4);
  font-weight: 600;
  text-transform: uppercase;
}

.contact-suggest-chip {
  font-size: 11px;
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  color: var(--blue-700);
  padding: 2px 8px;
  border-radius: 9px;
  cursor: pointer;
}

.home-new-project .contact-suggest-chip {
  font-family: inherit;
}

.owner-pick,
.collab-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}

.home-new-project .owner-pick .avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
  flex-shrink: 0;
}

.collab-row {
  min-height: 40px;
}

.collab-row .proj-team {
  display: flex;
}

.collab-row .proj-team .avatar {
  width: 22px;
  height: 22px;
  font-size: 9.5px;
}

.collab-row .btn {
  margin-left: auto;
  padding: 3px 8px;
  font-size: 11px;
}

.owner-pick-meta .owner-name {
  font-size: 12px;
  font-weight: 500;
}

.owner-pick-meta .owner-role {
  font-size: 10px;
  color: var(--ink-3);
}

.dropzone {
  display: block;
  border: 2px dashed var(--blue-300);
  border-radius: var(--r-md);
  padding: 36px 16px;
  text-align: center;
  background: var(--blue-50);
  cursor: pointer;
}

.dropzone.dragover,
.dropzone:hover {
  border-color: var(--blue-700);
  background: var(--blue-100);
}

.dropzone svg {
  width: 34px;
  height: 34px;
  stroke: var(--blue-700);
  fill: none;
  stroke-width: 1.5;
  margin: 0 auto 10px;
  display: block;
}

.dropzone-text {
  font-size: 14px;
  font-weight: 500;
}

.dropzone-sub {
  font-size: 11.5px;
  color: var(--ink-3);
}

.new-project-import-stamps {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: #fff;
  padding: 14px 16px;
}

.new-project-import-stamps-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.new-project-import-stamps-row + .new-project-import-stamps-row {
  margin-top: 14px;
}

.new-project-import-stamps-label {
  min-width: 72px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.new-project-import-stamps-controls {
  gap: 16px;
}

.new-project-import-stamps-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
}

.new-project-import-stamps-field-grow {
  flex: 1;
  min-width: 220px;
}

.new-project-import-stamps-field span {
  font-size: 11.5px;
  color: var(--ink-3);
}

.new-project-file-table-wrap {
  margin-top: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: auto;
  background: #fff;
}

.new-project-file-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.new-project-file-table th,
.new-project-file-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

.new-project-file-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--bg, #f3f6f9);
}

.new-project-file-table td.col-action {
  width: 72px;
  text-align: right;
}

.new-project-file-table select {
  width: 100%;
  min-width: 120px;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: #fff;
}

.new-project-file-table .btn-remove-file {
  padding: 4px 8px;
  font-size: 11px;
}

.new-project-file-status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}

.new-project-ai-panel {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: #fff;
  padding: 0 16px 4px;
}

.new-project-dependent-panel {
  margin: 4px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--bg, #f3f6f9);
}

.new-project-dependent-panel.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.new-project-dependent-panel-h {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
}

.toggle-row strong {
  display: block;
  font-size: 12.5px;
  margin-bottom: 2px;
}

.toggle-row span {
  font-size: 11.5px;
  color: var(--ink-3);
}

.toggle {
  position: relative;
  width: 34px;
  height: 20px;
  background: var(--rail);
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.12s;
}

.toggle.on {
  background: var(--blue-700);
  border-color: var(--blue-800);
}

.toggle.on::after {
  left: 15px;
}

.toggle:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.toggle-row.is-disabled strong,
.toggle-row.is-disabled span {
  color: var(--ink-soft);
}

.wiz-steps {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  padding: 0 28px;
}

.wiz-step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  cursor: pointer;
}

.wiz-step.active {
  color: var(--blue-700);
  border-bottom-color: var(--blue-700);
}

.wiz-step.done {
  color: var(--green);
}

.wiz-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}

.wiz-step.active .wiz-num {
  background: var(--blue-700);
  color: #fff;
  border-color: var(--blue-800);
}

.wiz-step.done .wiz-num {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.wiz-conn {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  color: var(--ink-4);
}

.wiz-conn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.wiz-body {
  padding: 24px 28px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg, #f3f6f9);
}

.wiz-card {
  max-width: 840px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-1);
}

.wiz-card h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 3px;
}

.wiz-sub {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: 22px;
}

.wiz-panel {
  display: none;
}

.wiz-panel.active {
  display: block;
}

.wiz-foot {
  padding: 13px 28px;
  background: #fff;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.wiz-foot-l {
  font-size: 11.5px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wiz-foot-l svg {
  width: 12px;
  height: 12px;
  stroke: var(--blue-700);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.wiz-foot-r {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.home-notif-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.home-notif-overlay {
  position: fixed;
  inset: 0;
  z-index: 750;
  background: transparent;
}

.home-notif-panel {
  position: fixed;
  top: 54px;
  right: 0;
  z-index: 760;
  display: none;
  flex-direction: column;
  width: 340px;
  max-height: 480px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-3);
}

.home-notif-panel.open {
  display: flex;
}

.home-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border-soft);
}

.home-notif-head-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
}

.home-notif-unread-count {
  min-width: 18px;
  padding: 1px 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  background: var(--red);
  border-radius: 9px;
}

.home-notif-unread-count:empty,
.home-notif-unread-count[data-count="0"] {
  display: none;
}

.home-notif-list {
  flex: 1;
  overflow-y: auto;
}

.home-notif-empty {
  display: grid;
  gap: 6px;
  padding: 28px 20px 32px;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.home-notif-empty span {
  color: var(--ink-4);
  font-size: 11.5px;
}

.home-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.1s ease;
}

.home-notif-item:hover {
  background: var(--hover);
}

.home-notif-item:last-child {
  border-bottom: none;
}

.home-notif-item.unread {
  background: var(--blue-50);
}

.home-notif-item.unread:hover {
  background: var(--hover);
}

.home-notif-ico {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.home-notif-ico svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.home-notif-ico-danger {
  color: var(--red);
  background: var(--red-bg);
}

.home-notif-ico-success {
  color: var(--green);
  background: var(--green-bg);
}

.home-notif-ico-info {
  color: var(--blue-700);
  background: var(--blue-100);
}

.home-notif-ico-warning {
  color: var(--amber);
  background: var(--amber-bg);
}

.home-notif-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.home-notif-text {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.home-notif-time {
  color: var(--ink-4);
  font-size: 10.5px;
}

.home-notif-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--border-soft);
}

.home-notif-ghost-btn {
  height: 28px;
  padding: 0 10px;
  color: var(--ink-2);
  font-size: 11.5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.home-notif-ghost-btn:hover {
  color: var(--ink);
  background: var(--hover);
}

.home-notif-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ===== Home change password (CAB-375) — layout parity with Projects dashboard ===== */
.home-wrap.view-change-password {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-wrap.view-change-password > #changePasswordView {
  flex: 1;
  min-height: 0;
}

.home-change-password {
  display: grid;
  grid-template-rows: auto auto 1fr;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  gap: 0;
  overflow: hidden;
}

.home-change-password .project-page-head.page-h {
  padding: 20px 28px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
}

.home-change-password .account-toolbar {
  padding: 0 28px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
}

.home-change-password .project-page-head h1 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.home-change-password .project-page-head .page-h-sub {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}

.home-change-password .account-tabs {
  display: flex;
  gap: 4px;
  width: 100%;
}

.home-change-password .account-tab {
  margin-bottom: -1px;
  padding: 10px 2px;
  margin-right: 16px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.home-change-password .account-tab.active {
  color: var(--blue-700);
  border-bottom-color: var(--blue-700);
}

.home-change-password .account-tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.home-change-password .account-dash-body {
  padding: 18px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f3f6f9;
  min-height: 0;
}

.home-change-password .account-card {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 22px 24px 28px;
}

.home-change-password .account-card-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.home-change-password .account-card-sub {
  margin: 0 0 18px;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.45;
}

.home-change-password .account-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: none;
}

.home-change-password .sheet-field {
  margin-bottom: 14px;
}

.home-change-password .sheet-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}

.home-change-password .input {
  width: 100%;
  min-height: 38px;
  padding: 8px 40px 8px 11px;
  color: var(--ink);
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.home-change-password .input.input-readonly-surface {
  background: var(--panel);
}

.home-change-password .input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.2);
}

.home-change-password .input.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(184, 58, 58, 0.12);
}

.home-change-password .password-wrap {
  position: relative;
}

.home-change-password .password-wrap .input {
  padding-right: 36px;
}

.home-change-password .password-wrap input::-ms-reveal,
.home-change-password .password-wrap input::-ms-clear {
  display: none;
}

.home-change-password .password-wrap .icon-button {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: #34270e;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.home-change-password .password-wrap .icon-button:hover {
  background: var(--green-50);
  color: var(--green-700);
}

.home-change-password .password-wrap .icon-button svg,
.home-change-password .password-wrap .password-eye {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-change-password .password-rules {
  margin: 2px 0 16px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}

.home-change-password .password-rules-title {
  margin-bottom: 8px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-change-password .password-rules-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-change-password .password-rules-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.35;
}

.home-change-password .password-rules-list li.met {
  color: var(--green);
}

.home-change-password .rule-dot {
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}

.home-change-password .password-rules-list li.met .rule-dot {
  background: currentColor;
}

.home-change-password .account-form-error {
  margin: 0 0 12px;
}

.home-change-password .account-success {
  margin: 0 0 12px;
  padding: 10px 12px;
  color: var(--green);
  font-size: 12.5px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--r);
}

.home-change-password .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.home-change-password .btn:hover:not(:disabled) {
  background: var(--hover);
}

.home-change-password .btn-primary {
  background: var(--blue-700);
  color: #fff;
  border-color: var(--blue-800);
}

.home-change-password .btn-primary:hover:not(:disabled) {
  background: var(--blue-600);
  border-color: var(--blue-700);
}

.home-change-password .btn-primary:active:not(:disabled) {
  background: var(--blue-800);
}

.home-change-password .btn:disabled,
.home-change-password .btn-primary:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  pointer-events: none;
}

.home-change-password .account-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--border-soft);
}

.home-change-password .account-signin-email {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  color: var(--ink-3);
  font-size: 12px;
}

.home-change-password .account-signin-email span {
  color: var(--ink-2);
  font-weight: 600;
}

.app-shell.home-mode-change-password .home-search-lite,
.app-shell.home-mode-change-password .home-greeting-actions {
  display: none;
}

.app-shell.home-mode-change-password {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

html.home-mode-change-password,
html.home-mode-change-password body {
  height: 100%;
  overflow: hidden;
}

.app-shell.home-mode-change-password > #homeWrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* CAB-555: Hub General Settings — layout parity with change password / catalogue views */
.home-wrap.view-general-settings {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-wrap.view-general-settings > #generalSettingsView {
  flex: 1;
  min-height: 0;
}

.home-general-settings {
  display: grid;
  grid-template-rows: auto 1fr;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  gap: 0;
  overflow: hidden;
}

.home-general-settings .project-page-head.page-h {
  padding: 20px 28px 14px;
  /* CAB-596: theme token so Dark mode group headers (--text-primary) stay visible */
  background: var(--bg-surface, #fff);
  border-bottom: 1px solid var(--border-soft);
}

.home-general-settings-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px 28px 32px;
  background: var(--bg-surface, #fff);
}

/* CAB-596: page chrome uses fixed --ink/--ink-3; flip with theme text tokens in Dark */
[data-theme="dark"] .home-general-settings .project-page-head h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .home-general-settings .page-h-crumb {
  color: var(--text-muted);
}

[data-theme="dark"] .home-general-settings .page-h-crumb button {
  color: var(--primary);
}

.app-shell.home-mode-general-settings {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

html.home-mode-general-settings,
html.home-mode-general-settings body {
  height: 100%;
  overflow: hidden;
}

.app-shell.home-mode-general-settings > #homeWrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* CAB-556: Hub About — same shell pattern as General Settings; keeps top bar + hamburger visible */
.home-wrap.view-about {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-wrap.view-about > #aboutView {
  flex: 1;
  min-height: 0;
}

.home-wrap.view-about #homeChrome,
.home-wrap.view-about #homeView,
.home-wrap.view-about #projectDashboardView,
.home-wrap.view-about #productCatalogueView,
.home-wrap.view-about #generalSettingsView,
.home-wrap.view-about #addProjectFlowView,
.home-wrap.view-about #changePasswordView,
.home-wrap.view-about #newProjectView {
  display: none !important;
}

.home-about {
  display: grid;
  grid-template-rows: auto 1fr;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  gap: 0;
  overflow: hidden;
}

.home-about .project-page-head.page-h {
  padding: 20px 28px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
}

.home-about-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px 28px 32px;
  background: #fff;
}

.app-shell.home-mode-about {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

html.home-mode-about,
html.home-mode-about body {
  height: 100%;
  overflow: hidden;
}

.app-shell.home-mode-about > #homeWrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Hub inline add-project flow (project + drawing wizard + AI on Login shell) */
.home-wrap.view-add-project-flow {
  flex: 1;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

html.home-mode-add-project-flow,
html.home-mode-add-project-flow body {
  height: 100%;
  overflow: hidden;
}

.app-shell.home-mode-add-project-flow {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.app-shell.home-mode-add-project-flow > #homeWrap {
  overflow: hidden;
}

.home-add-project-flow {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#addProjectFlowView .add-project-flow-wiz {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg, #f3f6f9);
}

#addProjectFlowView .page-h {
  padding: 20px 28px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
}

#addProjectFlowView .page-h-row h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}

#addProjectFlowView .page-h-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

#addProjectFlowView .page-h-crumb button {
  padding: 0;
  color: var(--blue-700);
  background: transparent;
  border: 0;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.app-shell.home-mode-add-project-flow .home-search-lite,
.app-shell.home-mode-add-project-flow .home-greeting-actions {
  display: none;
}

#addProjectFlowView .add-project-flow-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: var(--bg, #f3f6f9);
}

.add-project-flow-body .add-project-flow-phase {
  margin-top: 0;
  min-height: 0;
  flex: 1;
}

#addProjectFlowPhaseProject {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#addProjectFlowView .add-project-flow-wizard .wizard-container,
#addProjectFlowView .wizard-container {
  max-width: none;
}

#addProjectFlowView .wiz-steps .wiz-step[disabled] {
  pointer-events: none;
  cursor: default;
}

#addProjectFlowView #drawingWizard.drawing-wizard-marker-step-active {
  min-height: 62vh;
}

#addProjectFlowView #drawingWizard.drawing-wizard-marker-step-active #drawingWizardMarkerContainer,
#addProjectFlowView #drawingWizard.drawing-wizard-marker-step-active .drawing-wizard-marker-container {
  min-height: 52vh;
}

#addProjectFlowView .drawing-wizard-marker-shell--fullscreen .drawing-wizard-marker-container,
#addProjectFlowView .drawing-wizard-marker-shell--fullscreen #drawingWizardMarkerContainer {
  min-height: 0;
}

#addProjectFlowView .add-project-flow-note {
  margin: 0 0 12px;
  color: var(--ink-2, #5c6670);
}

/* Step 1 form lives inside the hub flow; hide the legacy standalone wizard chrome. */
#addProjectFlowView #newProjectView > .wiz > .page-h,
#addProjectFlowView #newProjectView > .wiz > .wiz-steps {
  display: none;
}

#addProjectFlowView #newProjectView.home-new-project[hidden] {
  display: none !important;
}

#addProjectFlowView #newProjectView.home-new-project:not([hidden]) {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
}

#addProjectFlowView #newProjectView .wiz {
  flex: 1;
  min-height: 0;
  height: 100%;
}

#addProjectFlowView #newProjectView .wiz-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Hub flow: one progress rail — hide embedded wizard sub-steppers and welcome steps. */
#addProjectFlowView #aiWizardStepIndicator {
  display: none !important;
}

#addProjectFlowView #drawingWizard .wizard-step[data-step="1"] {
  display: none !important;
}

#addProjectFlowView .page-h-phase {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-700, #1d4ed8);
}

#addProjectFlowView .wiz-step.done .wiz-num {
  font-size: 0;
  line-height: 0;
}

#addProjectFlowView .wiz-step.done .wiz-num::after {
  content: "\2713";
  font-size: 11px;
  line-height: 1;
}

#addProjectFlowView #addProjectFlowPhaseDrawings:not([hidden]),
#addProjectFlowView #addProjectFlowPhaseAi:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#addProjectFlowView #drawingWizard,
#addProjectFlowView #aiScanWizard {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: none;
  width: 100%;
  margin: 0;
  background: #fff;
}

#addProjectFlowView #drawingWizard .wizard-step.active,
#addProjectFlowView #aiScanWizard .wizard-step.active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 28px 0;
  box-sizing: border-box;
}

#addProjectFlowView .wizard-header {
  margin-bottom: 14px;
  flex-shrink: 0;
}

#addProjectFlowView .wizard-header h3 {
  display: none;
}

#addProjectFlowView .wizard-header p {
  font-size: 13px;
  margin: 0;
  color: var(--ink-3, #6b7280);
}

#addProjectFlowView .wizard-card {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 0;
}

#addProjectFlowView .wizard-footer {
  flex-shrink: 0;
  padding: 12px 28px 16px;
  background: #fff;
  border-top: 1px solid var(--border-soft, #e8edf2);
  margin-top: auto;
}

#addProjectFlowView #aiWizardProjectBanner {
  flex-shrink: 0;
  margin: 0 0 14px;
  padding: 8px 12px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2, #5c6670);
  background: var(--bg, #f3f6f9);
  border: 1px solid var(--border-soft, #e8edf2);
  border-radius: 8px;
}

#addProjectFlowView #aiScanWizard .wizard-step[data-step="2"].active {
  display: flex !important;
}

#addProjectFlowView #aiScanWizard .wizard-step[data-step="2"] .wizard-card {
  display: flex;
  flex-direction: column;
}

#addProjectFlowView #drawingWizard.drawing-wizard-marker-step-active .wizard-step[data-step="4"].active {
  padding-bottom: 0;
}

#addProjectFlowView .welcome-content {
  padding-top: 24px;
}

#addProjectFlowView .welcome-content i {
  font-size: 64px !important;
}

#addProjectFlowView .drawing-wizard-toggle-panel,
#drawingWizard .drawing-wizard-toggle-panel {
  margin-top: 16px;
  /* CAB-614: keep switches beside labels (shared column), not window-right-aligned */
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  width: max-content;
  max-width: 100%;
}

#addProjectFlowView .drawing-wizard-toggle-panel .toggle-row,
#drawingWizard .drawing-wizard-toggle-panel .toggle-row,
#addProjectFlowView .drawing-wizard-toggle-panel .wizard-toggle-item,
#drawingWizard .drawing-wizard-toggle-panel .wizard-toggle-item {
  display: contents;
  padding: 0;
  gap: 0;
  justify-content: flex-start;
}

#addProjectFlowView .drawing-wizard-toggle-panel .wizard-toggle-label,
#drawingWizard .drawing-wizard-toggle-panel .wizard-toggle-label {
  flex: none;
  min-width: 0;
  max-width: 28rem;
  padding: 8px 0;
}

#addProjectFlowView .drawing-wizard-toggle-panel .wizard-toggle-control,
#drawingWizard .drawing-wizard-toggle-panel .wizard-toggle-control {
  flex: 0 0 auto;
  justify-self: start;
  align-self: center;
}

#addProjectFlowView .drawing-wizard-toggle-panel .wizard-toggle-label strong,
#drawingWizard .drawing-wizard-toggle-panel .wizard-toggle-label strong {
  display: block;
  font-size: 12.5px;
  margin-bottom: 2px;
}

#addProjectFlowView .drawing-wizard-toggle-panel .wizard-toggle-label span,
#drawingWizard .drawing-wizard-toggle-panel .wizard-toggle-label span {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary, #6b7280);
}

.hub-flow-project-picker-label {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-2, #5c6670);
}

.hub-flow-project-picker {
  min-width: 320px;
}

/* CAB-416: Product Catalogue — hub layout parity with Projects dashboard */
.home-wrap.view-catalogue {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-wrap.view-catalogue > #productCatalogueView {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.home-wrap.view-catalogue #homeChrome,
.home-wrap.view-catalogue #homeView,
.home-wrap.view-catalogue #projectDashboardView {
  display: none !important;
}

.product-catalogue {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#productCatalogueMainView,
.product-catalogue-defaults-view {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.product-catalogue-defaults-view {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.product-catalogue .product-page-head.page-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
}

.product-catalogue .product-page-head h1 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.product-catalogue .product-page-head .page-h-sub {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}

.product-catalogue-maintained {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 11px;
  color: var(--ink-3);
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.product-catalogue-tabs-toolbar {
  padding: 0 28px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
}

.product-catalogue-tabs-toolbar .account-tabs {
  display: flex;
  gap: 2px;
  width: 100%;
}

.product-catalogue .account-tab,
.product-catalogue .product-catalogue-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 0 16px;
  height: 40px;
  margin-right: 0;
  color: #525252;
  font-size: 13px;
  font-weight: 400;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.product-catalogue-tab-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.product-catalogue .account-tab:hover,
.product-catalogue .product-catalogue-tab:hover {
  color: #161616;
  background: #f4f4f4;
}

.product-catalogue .account-tab.active,
.product-catalogue .product-catalogue-tab.active {
  color: var(--blue-700);
  border-bottom-color: var(--blue-700);
  font-weight: 600;
}

.product-catalogue-toolbar {
  margin-top: 0;
}

.product-catalogue-count {
  margin: 0 0 12px;
  padding: 0;
  font-size: 12px;
  color: var(--ink-3);
  background: transparent;
}

.product-catalogue .account-dash-body {
  padding: 18px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f3f6f9;
  min-height: 0;
}

.product-catalogue .account-dash-body.product-catalogue-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.product-catalogue .project-status-message.is-error {
  color: var(--red);
  background: var(--red-bg);
  border-color: var(--red-border);
}

.product-catalogue-body.has-load-error .product-catalogue-table-wrap {
  display: none;
}

.product-catalogue-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: auto;
  background: #fff;
  box-shadow: var(--shadow-1);
  flex: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.product-catalogue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.product-catalogue-table thead th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--panel);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.product-catalogue-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.product-catalogue-table tbody tr:hover td {
  background: var(--blue-50);
}

.product-catalogue-table tbody tr.product-catalogue-row-alt td {
  background: var(--surface-soft);
}

.product-catalogue-table tbody tr:last-child td {
  border-bottom: 0;
}

.product-catalogue-stub-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.product-catalogue .account-card {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 22px 24px 28px;
}

.product-catalogue .account-card-sub {
  margin: 0;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.45;
}

.product-catalogue-stub-message {
  margin: 0;
}

.product-catalogue-table-wrap .dx-datagrid-rowsview {
  min-height: 160px;
}

.product-catalogue-table-wrap .dx-datagrid {
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 13px;
  background: #fff;
  flex: 1;
  min-height: 180px;
}

.product-catalogue-table-wrap .dx-datagrid-headers {
  border-bottom: 1px solid var(--border-soft);
}

.product-catalogue-table-wrap .dx-datagrid-headers .dx-header-row td {
  background: var(--catalogue-grid-header-bg) !important;
  color: #161616 !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--catalogue-grid-header-line) !important;
  border-top: none;
  padding: 10px 16px;
}

.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row td {
  padding: 11px 16px;
  border-bottom: 1px solid #e0e0e0;
  color: #161616;
  font-size: 13px;
  transition: background 0.08s ease;
}

.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.dx-state-hover > td,
.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row:hover > td,
.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.dx-row-alt.dx-state-hover > td,
.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.dx-row-alt:hover > td {
  background: var(--catalogue-grid-header-bg) !important;
}

.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.dx-state-hover > td:first-child,
.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row:hover > td:first-child,
.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.dx-row-alt.dx-state-hover > td:first-child,
.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.dx-row-alt:hover > td:first-child {
  box-shadow: inset 2px 0 0 var(--catalogue-grid-header-line);
}

.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-row-alt > td {
  background: #f9f9f9;
}

.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.drafting-defaults-row--warning > td,
.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.drafting-defaults-row--warning.dx-row-alt > td,
.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.drafting-defaults-row--warning:hover > td,
.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.drafting-defaults-row--warning.dx-state-hover > td {
  background: var(--catalogue-ux16-warning-bg) !important;
}

.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.drafting-defaults-row--warning:hover > td:first-child,
.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.drafting-defaults-row--warning.dx-state-hover > td:first-child {
  box-shadow: none;
}

.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.drafting-defaults-row--warning > td.drafting-defaults-cell--unmapped {
  padding: 0;
  border-left: 0;
}

.product-catalogue-table-wrap .dx-datagrid-headers .dx-header-row td.dx-focused,
.product-catalogue-table-wrap .dx-datagrid-headers .dx-header-row td.dx-datagrid-action.dx-focused,
.product-catalogue-table-wrap .dx-datagrid-headers .dx-header-row td:hover {
  background: var(--blue-50) !important;
  color: var(--blue-700) !important;
  box-shadow: inset 0 -2px 0 var(--blue-500) !important;
}

.product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row:last-child td {
  border-bottom: 0;
}

.product-catalogue-toolbar .dx-texteditor.dx-editor-outlined {
  border-radius: var(--r);
  border-color: var(--border);
}

.product-catalogue-toolbar .dx-texteditor.dx-editor-outlined.dx-state-focused {
  border-color: var(--blue-500);
}

.product-catalogue-toolbar .dx-button.dx-button-mode-outlined {
  border-radius: var(--r);
  border-color: var(--border);
  color: var(--ink-2);
}

.product-catalogue-toolbar .dx-button.dx-button-mode-contained {
  border-radius: var(--r);
  background: var(--blue-700);
  border-color: var(--blue-800);
}

/* CAB-457: Drafting catalogue */
.drafting-catalogue-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.drafting-catalogue-filter {
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: #fff;
  font-size: 13px;
}

/* CAB-457: Drafting catalogue filter SelectBoxes — align with hub toolbar controls */
.product-catalogue-toolbar .product-catalogue-filter-select.dx-texteditor {
  font-size: 13px;
  background: #fff;
}

.product-catalogue-toolbar .product-catalogue-filter-select .dx-texteditor-input {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink);
}

.product-catalogue-toolbar .product-catalogue-filter-select .dx-texteditor-buttons-container {
  display: flex;
  align-items: stretch;
}

.product-catalogue-toolbar .product-catalogue-filter-select .dx-clear-button-area,
.product-catalogue-toolbar .product-catalogue-filter-select .dx-dropdowneditor-button {
  width: 28px;
  min-width: 28px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.product-catalogue-toolbar .product-catalogue-filter-select .dx-dropdowneditor-button {
  border-left: 1px solid var(--border-soft);
}

.product-catalogue-toolbar .product-catalogue-filter-select .dx-clear-button-area .dx-button,
.product-catalogue-toolbar .product-catalogue-filter-select .dx-dropdowneditor-button {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.product-catalogue-toolbar .product-catalogue-filter-select .dx-clear-button-area .dx-button-content {
  padding: 0;
}

.product-catalogue-toolbar .product-catalogue-filter-select .dx-clear-button-area .dx-icon,
.product-catalogue-toolbar .product-catalogue-filter-select .dx-dropdowneditor-button .dx-icon {
  color: var(--ink-3) !important;
  fill: var(--ink-3) !important;
  font-size: 14px;
}

.product-catalogue-toolbar .product-catalogue-filter-select .dx-clear-button-area .dx-button.dx-state-hover,
.product-catalogue-toolbar .product-catalogue-filter-select .dx-dropdowneditor-button.dx-state-hover,
.product-catalogue-toolbar .product-catalogue-filter-select .dx-clear-button-area .dx-button.dx-state-focused,
.product-catalogue-toolbar .product-catalogue-filter-select .dx-dropdowneditor-button.dx-state-focused {
  background: var(--surface-soft) !important;
}

.product-catalogue-toolbar .product-catalogue-filter-select.dx-show-clear-button:not(.dx-texteditor-empty) .dx-clear-button-area .dx-button {
  background: transparent !important;
  border-radius: 0 !important;
}

.product-catalogue-filter-dropdown .dx-overlay-content {
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
}

.product-catalogue-filter-dropdown .dx-popup-content {
  padding: 4px 0;
}

.product-catalogue-filter-dropdown .dx-list-item {
  font-size: 13px;
}

.product-catalogue-filter-dropdown .dx-list-item-content {
  padding: 8px 12px;
  color: var(--ink);
}

.product-catalogue-filter-dropdown .dx-list-item.dx-state-hover,
.product-catalogue-filter-dropdown .dx-list-item.dx-state-focused,
.product-catalogue-filter-dropdown .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
  background: var(--blue-50) !important;
}

.product-catalogue-filter-dropdown .dx-list-item.dx-state-hover .dx-list-item-content,
.product-catalogue-filter-dropdown .dx-list-item.dx-state-focused .dx-list-item-content,
.product-catalogue-filter-dropdown .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected .dx-list-item-content {
  color: var(--blue-700) !important;
}

.drafting-catalogue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.drafting-catalogue-actions-col {
  width: 96px;
  white-space: nowrap;
}

.drafting-inline-input,
.drafting-inline-select,
.drafting-default-select {
  width: 100%;
  min-width: 120px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 13px;
}

.drafting-row-action {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 0 4px 0 0;
}

.drafting-row-save {
  color: var(--blue-700, #1a56db);
}

.drafting-row-save:hover {
  text-decoration: underline;
}

.drafting-row-cancel {
  color: var(--text-secondary, #5f6b7a);
}

.drafting-row-cancel:hover {
  text-decoration: underline;
}

.drafting-row-delete {
  color: var(--red);
}

.drafting-row-delete:hover {
  text-decoration: underline;
}

.drafting-row-disable {
  color: var(--text-secondary, #5f6b7a);
}

.drafting-row-disable:hover {
  text-decoration: underline;
}

.drafting-row-enable {
  color: var(--blue-700, #1a56db);
}

.drafting-row-enable:hover {
  text-decoration: underline;
}

.drafting-catalogue-grid .dx-row.drafting-row-dirty > td {
  background-color: #f8fbff;
}

.drafting-catalogue-grid .dx-row.drafting-row-disabled > td {
  color: var(--text-secondary, #5f6b7a);
  opacity: 0.72;
}

.cad-software-tag {
  display: inline-block;
  height: 18px;
  padding: 0 6px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 18px;
  border: 0;
}

.cad-software-tag--microvellum {
  background: #d0e2ff;
  color: #001d6c;
}

.cad-software-tag--cabinet-vision {
  background: #a7f0ba;
  color: #044317;
}

.cad-software-tag--pytha {
  background: #e8daff;
  color: #491d8b;
}

.cad-software-tag--imos {
  background: #9ef0f0;
  color: #022b30;
}

.cad-software-tag--autocad {
  background: #e0e0e0;
  color: #161616;
}

.detectable-type-tag {
  display: inline-block;
  height: 18px;
  padding: 0 6px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  background: #d0e2ff;
  color: #001d6c;
  border: 0;
}

.catalogue-chip {
  display: inline-block;
  height: 18px;
  padding: 0 6px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  margin: 0 4px 4px 0;
  border: 0;
}

.catalogue-chip--blue {
  background: #d0e2ff;
  color: #001d6c;
}

.catalogue-chip--green {
  background: #a7f0ba;
  color: #044317;
}

.catalogue-chip--teal {
  background: #9ef0f0;
  color: #022b30;
}

.catalogue-chip--purple {
  background: #e8daff;
  color: #491d8b;
}

.catalogue-chip--gray {
  background: #e0e0e0;
  color: #161616;
}

.default-map-type {
  font-weight: 600;
  color: #161616;
  margin-bottom: 2px;
}

.default-map-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.drafting-mapped-products-editor {
  min-width: 320px;
}

.drafting-mapped-products-editor.dx-tagbox .dx-texteditor-input-container {
  min-height: 32px;
}

/*
 * CAD mapping TagBox keeps searchEnabled for type-to-filter, but the empty
 * focused search field must not read as a text box (mini square outline + caret).
 * Match DevExtreme's only-select chrome while the field has no typed query.
 */
.drafting-mapped-products-editor.dx-tagbox .dx-texteditor-input {
  caret-color: transparent;
  min-width: 0 !important;
  width: 0.1px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.drafting-mapped-products-editor.dx-tagbox .dx-texteditor-input.drafting-tagbox-searching {
  caret-color: var(--text-primary, #161616);
  min-width: 2em !important;
  width: auto !important;
  margin-left: 5px !important;
}

.drafting-mapped-products-editor .dx-tag-content {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drafting-mapped-products-editor .dx-dropdowneditor-button {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.drafting-mapped-products-editor .dx-dropdowneditor-icon {
  color: var(--text-primary, #161616) !important;
}

/* DevExtreme draws tag-remove X via ::before/::after backgrounds, not color. */
.drafting-mapped-products-editor .dx-tag-remove-button::before,
.drafting-mapped-products-editor .dx-tag-remove-button::after,
.drafting-mapped-products-editor .dx-tag.dx-state-focused .dx-tag-remove-button::before,
.drafting-mapped-products-editor .dx-tag.dx-state-focused .dx-tag-remove-button::after {
  background: var(--red, #b83a3a) !important;
  background-color: var(--red, #b83a3a) !important;
}

.drafting-mapped-products-editor .dx-clear-button-area .dx-icon,
.drafting-mapped-products-editor .dx-clear-button-area .dx-icon-clear {
  color: var(--red, #b83a3a) !important;
}

.default-map-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--catalogue-ux16-warning-message);
}

.default-map-warning svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-catalogue-inline-notif {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  border-left: 4px solid transparent;
  border-radius: 0;
  margin: 0 28px 16px;
  font-size: 13px;
}

.product-catalogue-inline-notif svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 1px;
}

.product-catalogue-inline-notif-warning {
  background: var(--catalogue-ux16-warning-bg);
  border-left-color: var(--catalogue-ux16-warning-accent);
  color: #161616;
}

.product-catalogue-inline-notif-warning svg {
  color: var(--catalogue-ux16-warning-icon);
}

.product-catalogue-inline-notif-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.product-catalogue-inline-notif-body {
  color: #525252;
  font-size: 12px;
}

.drafting-defaults-toolbar-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 4px;
}

.drafting-defaults-toolbar-wrap .product-catalogue-inline-notif {
  flex: 1;
  margin: 0 0 0 28px;
}

.drafting-defaults-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px 0 0;
  flex-shrink: 0;
}

.product-catalogue-defaults-view .product-catalogue-table-wrap .dx-datagrid-headers .dx-header-row td {
  background: var(--catalogue-grid-header-bg) !important;
  border-bottom: 2px solid var(--catalogue-grid-header-line) !important;
  color: #161616 !important;
}

/* Catalogue grids keep UX16 light-blue headers even when hub uses system/dark theme. */
[data-theme='dark'] .product-catalogue .product-catalogue-table-wrap .dx-datagrid-headers,
[data-theme='dark'] .product-catalogue .product-catalogue-table-wrap .dx-datagrid-headers .dx-header-row td {
  background: var(--catalogue-grid-header-bg) !important;
  color: #161616 !important;
  border-bottom-color: var(--catalogue-grid-header-line) !important;
}

[data-theme='dark'] .product-catalogue .product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row:not(.drafting-defaults-row--warning) > td {
  background: #fff !important;
  color: #161616 !important;
}

[data-theme='dark'] .product-catalogue .product-catalogue-table-wrap .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.drafting-defaults-row--warning) > td {
  background: #f9f9f9 !important;
  color: #161616 !important;
}

.drafting-default-mapping-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}