@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Sora:wght@600;700;800&display=swap');

@font-face {
  font-family: "Big Pixel Light Demo";
  src: url("/fonts/big-pixel-light-demo.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════
   CNC Turkey – Design System
   Modern, clean, professional UI inspired by 21st.dev
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────── */
:root {
  /* Neutrals */
  --bg-base: #d8e2f1;
  --bg-surface: #ffffff;
  --bg-muted: #f3f6fb;
  --bg-subtle: #e2e8f0;

  /* Text */
  --text-primary: #0f274d;
  --text-secondary: #4c6893;
  --text-muted: #90a2c0;
  --text-inverse: #fafaf9;

  /* Brand */
  --accent: #2f6ae6;
  --accent-hover: #1f56c9;
  --accent-light: #dbeafe;
  --accent-subtle: #eff6ff;

  /* Secondary accent */
  --warm: #2563eb;
  --warm-light: #eff6ff;

  /* Borders */
  --border: #b8c9e4;
  --border-hover: #9fb6d8;
  --border-focus: var(--accent);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.06), 0 2px 4px -2px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.06), 0 4px 6px -4px rgba(28, 25, 23, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.08), 0 8px 10px -6px rgba(28, 25, 23, 0.04);

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 200ms;
}

/* ── Base ──────────────────────────────────────────────── */
html {
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Manrope', 'Segoe UI', sans-serif;
  color: var(--text-primary);
  background: radial-gradient(circle at top left, rgba(47, 106, 230, 0.11), transparent 25%),
              radial-gradient(circle at bottom right, rgba(89, 140, 255, 0.09), transparent 26%),
              var(--bg-base);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

.x-canvas {
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

.x-main-panel {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg-base) 88%, #ffffff 12%);
  padding: 1.1rem;
}

main.container {
  max-width: 1180px;
  padding-bottom: 3rem;
}

footer {
  padding: 2rem 0 1.5rem;
}

footer .container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.navbar-brand {
  font-family: 'Sora', 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p { color: var(--text-secondary); }

/* ── Navbar ────────────────────────────────────────────── */
.top-shell {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(232, 238, 249, 0.96);
  border-bottom: 1px solid rgba(15, 39, 77, 0.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
}

.top-shell.scrolled {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.navbar {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.navbar-brand {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary) !important;
}

.navbar .nav-link {
  color: var(--text-secondary) !important;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.55rem 0.9rem !important;
  border-radius: var(--radius-sm);
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--text-primary) !important;
  background: rgba(47, 106, 230, 0.12);
}

.header-actions {
  justify-content: flex-end;
}

.lang-switcher {
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.125rem;
  background: var(--bg-surface);
}

.lang-toggle {
  min-width: 2.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
  font-weight: 700;
  color: var(--text-secondary);
  border: none;
  background: transparent;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.lang-toggle.active,
.lang-toggle:hover {
  color: var(--text-primary);
  background: var(--accent-light);
}

.user-actions .user-badge span {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
}

.user-actions .btn {
  min-width: 110px;
}

.btn-outline-secondary {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--bg-surface);
}

.btn-outline-secondary:hover {
  color: var(--text-primary);
  background: var(--bg-muted);
  border-color: var(--border-hover);
}

/* ── Main container ────────────────────────────────────── */
main.container {
  max-width: 1200px;
}

/* ── Cards ─────────────────────────────────────────────── */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-sm);
}

/* RFQ wizard file pool cards */
.rfq-file-pool-card {
  min-height: 4.75rem;
  box-shadow: 0 10px 24px rgba(29, 55, 92, 0.05);
}

.rfq-file-pool-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  max-height: 2.8rem;
}

.rfq-rich-editor {
  min-height: 9rem;
  overflow: auto;
  white-space: normal;
  line-height: 1.55;
}

.rfq-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}

.rfq-rich-editor table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0.85rem 0;
  font-size: 0.9rem;
  overflow: hidden;
  border: 1px solid #b8c9e4;
  border-radius: 12px;
}

.rfq-rich-editor thead th,
.rfq-rich-editor tbody td {
  border: 1px solid #b8c9e4;
  padding: 0.55rem 0.65rem;
  vertical-align: top;
  word-break: break-word;
  background: #fff;
}

.rfq-rich-editor thead th {
  background: linear-gradient(180deg, #eef5ff 0%, #e2ecff 100%);
  font-weight: 700;
  color: var(--text-primary);
}

.rfq-rich-editor tbody tr:nth-child(even) td {
  background: #f8fbff;
}

.rfq-rich-editor td:focus,
.rfq-rich-editor th:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.rfq-rich-notes-frame {
  display: block;
  width: 100%;
  min-height: 32rem;
  height: 32rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.group-file-chip {
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.group-file-chip:hover {
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.08);
  transform: translateY(-1px);
}

/* ── Hero Panel (Landing Page) ─────────────────────────── */
.hero-panel {
  background: linear-gradient(135deg, rgba(47, 106, 230, 0.1), rgba(15, 39, 77, 0.03));
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-panel::before {
  content: '';
  position: absolute;
  top: -24%;
  right: -15%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 106, 230, 0.19) 0%, transparent 72%);
  pointer-events: none;
}

.hero-panel::after {
  content: '';
  position: absolute;
  bottom: -18%;
  left: -8%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 88, 12, 0.12) 0%, transparent 72%);
  pointer-events: none;
}

.hero-panel h1 {
  font-size: clamp(2rem, 2.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 1;
}

.hero-panel p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  position: relative;
  z-index: 1;
}

.hero-panel .btn {
  position: relative;
  z-index: 1;
}

.hero-panel .btn-outline-light {
  color: var(--text-primary);
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
}

.hero-panel .btn-outline-light:hover {
  color: var(--text-primary);
  background: white;
}

/* ── Feature Cards ─────────────────────────────────────── */
.feature-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration) var(--ease);
}

.feature-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-card h5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.feature-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: 1.55;
}

/* ── KPI Cards ─────────────────────────────────────────── */
.kpi-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration) var(--ease);
}

.kpi-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-hover);
}

.kpi-card span {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

.kpi-card strong {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* ── Quick Links ───────────────────────────────────────── */
.quick-link {
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration) var(--ease);
}

.quick-link:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.quick-link-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 1rem;
}

.quick-link-primary:hover {
  color: #fff;
  background: var(--accent-hover);
  box-shadow: var(--shadow-lg);
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1.15rem;
  transition: all var(--duration) var(--ease);
  letter-spacing: -0.01em;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px rgba(47, 106, 230, 0.2);
}

.btn-warning {
  background: var(--warm);
  border-color: var(--warm);
  color: #fff;
}

.btn-warning:hover {
  background: #c2410c;
  border-color: #c2410c;
  color: #fff;
}

.btn-outline-dark {
  border-color: var(--border);
  color: var(--text-primary);
  background: transparent;
}

.btn-outline-dark:hover {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: #fff;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.btn-lg {
  padding: 0.7rem 1.75rem;
  font-size: 0.95rem;
  border-radius: var(--radius);
}

.btn-sm {
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
}

.btn-outline-primary {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Form Controls ─────────────────────────────────────── */
.form-control,
.form-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  font-size: 0.88rem;
  padding: 0.55rem 0.85rem;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 106, 230, 0.16);
  outline: none;
}

.form-control-lg {
  padding: 0.65rem 1rem;
  font-size: 0.92rem;
}

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

.form-text {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.form-text a {
  color: var(--accent);
  text-decoration: none;
}

.form-text a:hover {
  text-decoration: underline;
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* ── Tables ────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  font-size: 0.88rem;
}

.table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 1rem;
  background: var(--bg-muted);
}

.table tbody td {
  padding: 0.8rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--bg-muted);
  color: var(--text-primary);
}

.table-hover tbody tr:hover td {
  background: var(--accent-subtle);
}

/* ── Badges ────────────────────────────────────────────── */
.badge {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.3em 0.65em;
  border-radius: var(--radius-full);
}

.text-bg-secondary {
  background: var(--bg-muted) !important;
  color: var(--text-secondary) !important;
}

.text-bg-success {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.text-bg-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.text-bg-info {
  background: var(--accent-light) !important;
  color: var(--accent-hover) !important;
}

.text-bg-danger {
  background: #fef2f2 !important;
  color: #991b1b !important;
}

/* ── Alerts ────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius);
  font-size: 0.88rem;
  border: none;
}

.alert-success {
  background: #dcfce7;
  color: #166534;
}

.alert-danger {
  background: #fef2f2;
  color: #991b1b;
}

.alert-light {
  background: var(--bg-muted);
  color: var(--text-secondary);
}

/* ── Auth Pages ────────────────────────────────────────── */
.x-auth-page {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
}

.x-auth-shell {
  width: min(520px, 100%);
}

.x-auth-shell-wide {
  width: min(860px, 100%);
}

.x-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  text-decoration: none;
}

.x-auth-brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f274d;
  color: #fff;
  font-weight: 800;
}

.x-auth-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.x-auth-brand-text strong {
  color: var(--text-primary);
  font-size: 1.05rem;
}

.x-auth-brand-text small {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.x-auth-card {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  padding: 1.35rem 1.35rem 1.1rem;
}

.x-auth-title {
  margin: 0;
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 800;
  color: var(--text-primary);
}

.x-auth-subtitle {
  margin: 0.45rem 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.x-auth-form {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.85rem;
}

.x-auth-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.x-auth-grid-full {
  grid-column: 1 / -1;
}

.x-auth-grid-col-right {
  grid-column: 2;
}

.x-form-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.9rem;
}

.x-form-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.72rem 0.86rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: #fff;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.x-form-select {
  appearance: auto;
}

.x-form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  outline: 0;
}

.x-form-error {
  display: block;
  color: #c62828;
  font-size: 0.84rem;
}

.x-form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.x-form-check-input {
  width: 1.1rem;
  height: 1.1rem;
}

.x-auth-submit {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  padding: 0.82rem 1rem;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.x-auth-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.x-auth-footer {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.x-auth-footer a {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
}

.x-role-explainer {
  display: grid;
  gap: 0.45rem;
}

.x-role-card {
  border: 1px solid #d7e0ef;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.6rem 0.68rem;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.x-role-card-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #1d3558;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.x-role-card-text {
  font-size: 0.84rem;
  line-height: 1.35;
  color: #4b6287;
}

.x-role-card.is-active {
  border-color: #94b9ff;
  background: #eef4ff;
  box-shadow: 0 6px 18px rgba(41, 95, 196, 0.12);
}

.x-auth-footer a:hover {
  text-decoration: underline;
}

.x-logout-card {
  position: relative;
  overflow: hidden;
}

.x-logout-card::before,
.x-logout-card::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
}

.x-logout-card::before {
  inset: auto auto -4rem -3rem;
  width: 11rem;
  height: 11rem;
  background: radial-gradient(circle, rgba(47, 106, 230, 0.18) 0%, rgba(47, 106, 230, 0.04) 48%, transparent 72%);
}

.x-logout-card::after {
  top: -3.25rem;
  right: -2.5rem;
  width: 10rem;
  height: 10rem;
  background: radial-gradient(circle, rgba(15, 39, 77, 0.06) 0%, rgba(15, 39, 77, 0.02) 44%, transparent 70%);
}

.x-logout-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem 0.82rem;
  border: 1px solid #d6e3f6;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(47, 106, 230, 0.12), rgba(255, 255, 255, 0.92));
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.x-logout-badge-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 0 0 4px rgba(47, 106, 230, 0.12);
}

.x-logout-top {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 1rem;
  align-items: start;
}

.x-logout-copy {
  min-width: 0;
}

.x-logout-points {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.x-logout-point {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border: 1px solid #dbe7f7;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff, #f3f7fd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.x-logout-point::before {
  content: "";
  flex: 0 0 0.65rem;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.38rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 0 0 4px rgba(47, 106, 230, 0.12);
}

.x-logout-point strong {
  display: block;
  color: var(--text-primary);
  font-size: 0.92rem;
}

.x-logout-panel {
  position: relative;
  border: 1px solid #dbe6f4;
  border-radius: 18px;
  padding: 1rem 1rem 0.95rem;
  background: linear-gradient(180deg, #fcfeff 0%, #f2f7fd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--shadow-xs);
}

.x-logout-panel-label {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.x-logout-panel-title {
  margin-top: 0.45rem;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  word-break: break-word;
}

.x-logout-panel-email {
  margin-top: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  word-break: break-word;
}

.x-logout-panel-note {
  margin: 0.85rem 0 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.x-logout-form {
  position: relative;
  z-index: 1;
  margin-top: 1.05rem;
}

.x-logout-submit {
  background: linear-gradient(135deg, #ea5b4f, #c83d33);
  box-shadow: 0 10px 24px rgba(200, 61, 51, 0.2);
}

.x-logout-submit:hover {
  background: linear-gradient(135deg, #df4f43, #b83129);
}

.x-logout-footer {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.x-logout-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.x-logout-footer-links a {
  color: var(--text-primary);
  font-weight: 800;
}

.auth-modal-shell {
  min-height: calc(100vh - 170px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-modal-card {
  width: min(440px, 100%);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.auth-modal-card .card-body {
  background: var(--bg-surface);
  padding: 2.5rem;
}

.auth-modal-footer {
  background: var(--bg-muted);
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem;
}

/* ── Pricing Page ──────────────────────────────────────── */
.pricing-page {
  margin-bottom: 1.5rem;
}

.pricing-hero {
  border: 1px solid var(--border);
  background: var(--bg-surface);
}

.pricing-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pricing-pill {
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-muted);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.pricing-section {
  border: 1px solid var(--border);
}

.pricing-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.pricing-actions {
  border: 1px solid var(--border);
  background: var(--bg-surface);
}

.pricing-sticky {
  position: sticky;
  top: 1rem;
}

.pricing-kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  padding: 0.6rem 0.7rem;
  transition: border-color var(--duration) var(--ease);
}

.pricing-kpi:hover {
  border-color: var(--border-hover);
}

.pricing-kpi span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-kpi strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── RFQ Styles ────────────────────────────────────────── */
.rfq-advanced-details {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
}

.rfq-advanced-details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.rfq-x-shell {
  align-items: start;
}

.rfq-x-hero {
  border: 1px solid var(--border) !important;
  background: var(--bg-surface);
}

.rfq-x-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rfq-x-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--accent-light);
  background: var(--accent-subtle);
  color: var(--accent-hover);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  padding: 0.38rem 0.78rem;
}

.rfq-x-step strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 9999px;
  background: rgba(47, 106, 230, 0.18);
  color: var(--accent-hover);
  font-size: 0.7rem;
}

.rfq-x-step.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.rfq-x-step.is-active strong {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.rfq-x-step.is-done {
  border-color: rgba(47, 106, 230, 0.34);
  background: rgba(47, 106, 230, 0.11);
}

.rfq-wizard-switch .form-check-input {
  cursor: pointer;
}

.rfq-wizard-switch .form-check-label {
  cursor: pointer;
}

.rfq-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  padding: 1.25rem;
  transition: border-color var(--duration) var(--ease);
}

.rfq-upload-zone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.rfq-upload-zone:hover {
  border-color: var(--accent);
}

.rfq-upload-zone:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 106, 230, 0.16);
}

.rfq-upload-zone input[type="file"] {
  border-color: var(--border);
}

.rfq-secure-note {
  color: #166534;
  font-size: 0.88rem;
  font-weight: 600;
}

.rfq-side-card {
  border: 1px solid var(--border) !important;
  background: var(--bg-surface);
}

.rfq-side-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-light);
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.rfq-material-search {
  position: relative;
}

.rfq-step-required {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #334155;
  font-size: 0.76rem;
  font-weight: 600;
}

.rfq-file-list {
  display: grid;
  gap: 0.45rem;
}

.rfq-file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  background: #fff;
}

.rfq-file-name {
  font-size: 0.82rem;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.rfq-file-actions {
  display: inline-flex;
  gap: 0.35rem;
}

.rfq-upload-progress {
  height: 1rem;
}

.rfq-upload-progress .progress-bar {
  font-size: 0.7rem;
  font-weight: 700;
}

.rfq-summary-grid {
  display: grid;
  gap: 0.5rem;
}

.rfq-summary-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  background: #fff;
}

.rfq-summary-key {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}

.rfq-summary-value {
  font-size: 0.84rem;
  color: #0f172a;
}

.rfq-quick-mode .rfq-advanced-field {
  display: none;
}

.rfq-process-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.rfq-topcat-pill {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.rfq-topcat-pill:hover {
  border-color: var(--accent);
}

.rfq-topcat-pill:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(47, 106, 230, 0.17);
  background: var(--accent-subtle);
}

.rfq-process-search {
  flex: 1 1 360px;
  max-width: 560px;
}

.rfq-process-shell {
  align-items: stretch;
}

.rfq-process-group {
  background: #fff;
}

.rfq-process-group[open] {
  border-color: var(--accent-light) !important;
}

.rfq-process-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.rfq-process-summary::-webkit-details-marker {
  display: none;
}

.rfq-process-count {
  min-width: 1.8rem;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  border: 1px solid var(--accent-light);
  background: var(--accent-subtle);
  color: var(--accent-hover);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.rfq-process-item {
  padding: 0.15rem 0;
}

#materialSuggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
}

.rfq-progress {
  background: #e8eef6;
}

.rfq-progress-active {
  overflow: hidden;
}

.rfq-progress-active .progress-bar {
  animation-duration: 1s, 1.4s;
}

.rfq-loading-dots::after {
  content: '';
  display: inline-block;
  width: 1.1em;
  text-align: left;
  animation: rfq-dots 1.2s steps(4, end) infinite;
}

@keyframes rfq-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

/* ── Footer ────────────────────────────────────────────── */
footer {
  margin-top: 2rem;
  background: transparent;
  padding: 1.25rem 0;
  color: var(--text-muted);
}

/* ── Page Header Pattern ───────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.page-header h1 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ── Unified Page Language (Home-aligned) ─────────────── */
.x-page-hero {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(130deg, #f4f8ff 0%, #edf3fd 52%, #f8fbff 100%);
  box-shadow: var(--shadow-sm);
  padding: 1.05rem 1.15rem;
}

.x-page-hero-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.03em;
}

.x-page-hero-subtitle {
  margin: 0.35rem 0 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
}

.x-surface-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.x-surface-card > .card-body {
  padding: 1.15rem 1.2rem;
}

.x-table-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.x-settings-nav-link {
  display: block;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.52rem 0.68rem;
  color: var(--text-secondary);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
}

.x-settings-nav-link:hover,
.x-settings-nav-link:focus-visible {
  color: var(--text-primary);
  border-color: #c8d7ee;
  background: #f3f8ff;
}

/* ── Animations ────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger children */
.fade-up:nth-child(1) { transition-delay: 0ms; }
.fade-up:nth-child(2) { transition-delay: 60ms; }
.fade-up:nth-child(3) { transition-delay: 120ms; }
.fade-up:nth-child(4) { transition-delay: 180ms; }
.fade-up:nth-child(5) { transition-delay: 240ms; }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ── Selection ─────────────────────────────────────────── */
::selection {
  background: var(--accent-light);
  color: var(--text-primary);
}

/* ── Links ─────────────────────────────────────────────── */
a {
  color: var(--accent);
  transition: color var(--duration) var(--ease);
}

a:hover {
  color: var(--accent-hover);
}

/* ── List groups ───────────────────────────────────────── */
.list-group-item {
  border-color: var(--bg-muted);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ── UX Revamp (Dashboard + RFQ) ───────────────────────── */
.dashboard-page .page-header {
  margin-bottom: 0.75rem;
}

.dashboard-page .dashboard-hero {
  border: 1px solid #bfd0ea !important;
  border-radius: 24px;
  background: linear-gradient(130deg, #f4f8ff 0%, #e7eefb 52%, #f8fbff 100%);
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  position: relative;
}

.dashboard-page .dashboard-hero::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  top: -180px;
  right: -110px;
  background: radial-gradient(circle, rgba(47, 106, 230, 0.18), transparent 68%);
  pointer-events: none;
}

.dashboard-pretitle {
  color: #1f56c9;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-title {
  font-size: clamp(1.85rem, 2.9vw, 2.5rem);
  letter-spacing: -0.035em;
}

.dashboard-subtitle {
  max-width: 720px;
  color: #334155 !important;
  font-size: 1.08rem;
  line-height: 1.55;
}

.dashboard-hero-cta {
  min-width: 220px;
  height: 52px;
  border-radius: 14px;
  font-size: 0.95rem;
  box-shadow: 0 12px 24px rgba(47, 106, 230, 0.24);
}

.dashboard-metric-card {
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
}

.dashboard-metric-card .card-body {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dashboard-metric-card .text-muted {
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b !important;
}

.dashboard-metric-card .h2 {
  font-family: 'Sora', sans-serif;
  font-size: 2rem;
  letter-spacing: -0.03em;
}

.dashboard-action-card {
  border-radius: 18px;
  border: 1px solid #dde5f0;
  background: #ffffff;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.05);
  min-height: 154px;
}

.dashboard-action-card .card-body {
  min-height: 154px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dashboard-action-card .card-title {
  font-size: 1.2rem;
  line-height: 1.35;
}

.dashboard-action-hint {
  display: inline-flex;
  width: fit-content;
  padding: 0.25rem 0.62rem;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1f56c9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dashboard-action-card:hover {
  transform: translateY(-4px);
  border-color: #2f6ae6;
  box-shadow: 0 18px 28px rgba(15, 23, 42, 0.09);
}

.rfq-x-shell {
  gap: 0.35rem;
}

.rfq-x-shell .card {
  border-radius: 22px;
  border-color: #d4dfef;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.rfq-x-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #ccdaee !important;
  background: linear-gradient(140deg, #ffffff 0%, #f4f8ff 58%, #edf4ff 100%);
}

.rfq-x-hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 320px;
  height: 320px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(47, 106, 230, 0.24) 0%, rgba(47, 106, 230, 0) 72%);
  pointer-events: none;
}

.rfq-x-hero > .card-body {
  position: relative;
  z-index: 1;
}

.rfq-step-required {
  padding: 0.45rem 0.82rem;
  border: 1px solid #cddcf8;
  background: #eaf2ff;
  color: #204ca7;
  font-size: 0.78rem;
  font-weight: 700;
}

.rfq-upload-zone {
  border-style: solid;
  border-width: 1px;
  border-color: #cfdbec;
  background: #ffffff;
}

.rfq-upload-zone.is-dragover {
  border-color: #0ea5a3;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.13);
}

.rfq-file-row {
  border-color: #d4deeb;
  border-radius: 12px;
}

.rfq-process-group {
  border-radius: 16px;
  border-color: #d8e1ea !important;
}

.rfq-topcat-pill {
  min-height: 52px;
  border-radius: 13px;
}

.rfq-suggestion-box {
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #fdfefe 100%);
  padding: 1rem;
}

#suggestSuppliersStatus {
  min-height: 1.4rem;
  color: #475569 !important;
  font-weight: 600;
}

#suggestSuppliersList .border {
  border-color: #d5e5f4 !important;
  border-radius: 12px !important;
}

.rfq-submit-trigger.btn-primary {
  min-width: 245px;
  height: 54px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 28px rgba(47, 106, 230, 0.24);
}

.rfq-side-card {
  border: 1px solid #d4dff3 !important;
  background: linear-gradient(165deg, #ffffff 0%, #f5f9ff 100%);
  box-shadow: 0 12px 24px rgba(15, 39, 77, 0.08);
}

.rfq-side-icon-wrap {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  margin-bottom: 0.85rem;
}

.rfq-side-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #2f6ae6;
  background: #2f6ae6;
  color: #fff;
  box-shadow: 0 8px 14px rgba(47, 106, 230, 0.32);
  margin-bottom: 0;
}

.rfq-side-art {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #d5e2f7;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  color: #2f6ae6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rfq-side-art svg {
  width: 22px;
  height: 22px;
}

.rfq-submit-trigger.btn-primary[disabled] {
  opacity: 0.76;
  box-shadow: none;
}

.rfq-details-shell .kpi-card strong {
  font-size: 2rem;
}

.rfq-file-chip {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.rfq-file-chip:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent-hover);
}

.rfq-process-group-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 0.55rem 0.7rem;
}

.rfq-file-list {
  display: grid;
  gap: 0.55rem;
}

.rfq-file-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  padding: 0.62rem;
  box-shadow: 0 10px 24px rgba(29, 55, 92, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.rfq-file-card:hover {
  border-color: rgba(31, 91, 216, 0.42);
  box-shadow: 0 16px 34px rgba(29, 55, 92, 0.1);
  transform: translateY(-1px);
}

.rfq-file-preview {
  display: flex;
  width: 86px;
  min-height: 104px;
  border: 1px solid #c9d7ec;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background: radial-gradient(circle at 30% 20%, #ffffff 0, #f5f8ff 42%, #eaf1ff 100%);
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.rfq-file-preview--pdf::after {
  content: "";
  position: absolute;
  inset: auto 10px 8px 10px;
  height: 16px;
  border-radius: 999px;
  background: rgba(31, 91, 216, 0.08);
}

.rfq-file-page {
  width: 50px;
  height: 64px;
  border: 1px solid #b9c9e0;
  border-radius: 8px;
  background: #fff;
  position: relative;
  box-shadow: 0 10px 18px rgba(18, 39, 72, 0.12);
}

.rfq-file-page-fold {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 17px;
  height: 17px;
  background: linear-gradient(135deg, #dbe7fb 0%, #ffffff 48%, #b9c9e0 50%, #eef4ff 100%);
  border-bottom-left-radius: 5px;
  border-top-right-radius: 8px;
}

.rfq-file-page-line {
  position: absolute;
  left: 9px;
  top: 18px;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: #d5deed;
}

.rfq-file-page-line--short {
  top: 27px;
  width: 22px;
}

.rfq-file-page-badge {
  position: absolute;
  left: 7px;
  bottom: 8px;
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 800;
  padding: 0.24rem 0.36rem;
  border-radius: 6px;
  background: #153a73;
  color: #fff;
  letter-spacing: 0.03em;
}

.rfq-file-open-hint {
  position: relative;
  z-index: 1;
  margin-top: 0.36rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #24529f;
}

.rfq-file-preview--generic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f3f7ff 0%, #edf3ff 100%);
}

.rfq-file-preview-ext {
  font-size: 0.72rem;
  font-weight: 800;
  color: #254e9b;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 0.2rem;
  word-break: break-word;
}

.rfq-file-meta {
  min-width: 0;
}

.rfq-file-title {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rfq-file-title:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.rfq-file-open-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.42rem;
}

.rfq-file-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #153a73;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.rfq-file-open-link {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1f5bd8;
  text-decoration: none;
}

.rfq-file-open-link:hover {
  color: #123f9c;
  text-decoration: underline;
}

.rfq-file-sub {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.rfq-attachment-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.rfq-detail-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.rfq-detail-file-action-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.rfq-detail-file-action-form .form-control {
  min-width: 210px;
}

@media (max-width: 767.98px) {
  .rfq-file-card {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .rfq-file-preview {
    width: 72px;
    min-height: 92px;
  }

  .rfq-attachment-toolbar {
    grid-template-columns: 1fr;
  }

  .rfq-detail-file-action-form {
    width: 100%;
  }

  .rfq-detail-file-action-form .form-control {
    min-width: 0;
    width: 100%;
  }
}

.rfq-note-card {
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: #f8fafc;
  padding: 0.65rem 0.75rem;
}

.rfq-note-card-head {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #6b7280;
}

.rfq-note-card-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #94a3b8;
}

.rfq-note-card--cert {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.rfq-note-card--cert .rfq-note-card-dot {
  background: #4f46e5;
}

.rfq-note-card--file {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.rfq-note-card--file .rfq-note-card-dot {
  background: #2563eb;
}

.rfq-note-item {
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rfq-note-list {
  margin-bottom: 0;
}

.rfq-break-table-wrap {
  border: 1px solid #d5deec;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.rfq-break-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.92rem;
}

.rfq-break-table thead th {
  background: #f1f5fb;
  color: #4b5f82;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid #d9e2f0;
}

.rfq-break-table tbody td {
  padding: 0.46rem 0.6rem;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
  line-height: 1.35;
  color: #12233f;
}

.rfq-break-table tbody tr:last-child td {
  border-bottom: 0;
}

.rfq-break-table th:first-child,
.rfq-break-table td:first-child {
  width: 68%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rfq-break-table th:last-child,
.rfq-break-table td:last-child {
  width: 32%;
}

.rfq-break-value {
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: #0e2a5f;
  font-weight: 600;
}

.rfq-response-table {
  table-layout: fixed;
  width: 100%;
}

.rfq-response-table th,
.rfq-response-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

.rfq-offer-compare {
  border: 1px solid #d9e3f4;
  border-radius: 16px;
  background: linear-gradient(180deg, #f9fbff 0%, #f3f7ff 100%);
  padding: 1rem;
}

.rfq-offer-compare-head h3 {
  color: #14243f;
}

.rfq-offer-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.rfq-offer-stat {
  border: 1px solid #d7e1f1;
  border-radius: 12px;
  background: #fff;
  padding: 0.65rem 0.75rem;
}

.rfq-offer-stat span {
  display: block;
  font-size: 0.76rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rfq-offer-stat strong {
  display: block;
  margin-top: 0.18rem;
  font-size: 1.2rem;
  color: #0f2548;
}

.rfq-compare-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0.8rem;
}

.rfq-compare-card {
  border: 1px solid #d5e0f2;
  border-radius: 14px;
  background: #fff;
  padding: 0.85rem;
  display: grid;
  gap: 0.7rem;
  box-shadow: 0 8px 20px rgba(15, 35, 72, 0.05);
}

.rfq-compare-card-head {
  display: grid;
  gap: 0.2rem;
}

.rfq-compare-company {
  font-weight: 800;
  color: #0f2548;
  line-height: 1.25;
}

.rfq-compare-email {
  font-size: 0.82rem;
  color: #61708a;
  overflow-wrap: anywhere;
}

.rfq-compare-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.75rem;
}

.rfq-compare-meta > div {
  border: 1px solid #e6ecf7;
  border-radius: 10px;
  background: #f9fbff;
  padding: 0.48rem 0.56rem;
}

.rfq-compare-meta span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: #6f7e97;
}

.rfq-compare-meta strong {
  display: block;
  margin-top: 0.08rem;
  color: #12284d;
  line-height: 1.3;
}

.rfq-compare-extra {
  border-top: 1px solid #e6ecf7;
  padding-top: 0.5rem;
}

.rfq-compare-lines {
  border: 1px dashed #cfdaed;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.5rem 0.55rem;
}

.rfq-compare-line-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.16rem 0;
}

.rfq-compare-line-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.rfq-compare-line-item span {
  overflow-wrap: anywhere;
}

.rfq-compare-note {
  border-top: 1px solid #e6ecf7;
  padding-top: 0.5rem;
  color: #22365d;
}

.rfq-compare-time {
  margin-top: -0.25rem;
}

.rfq-compare-pending {
  border-top: 1px solid #d9e3f4;
  padding-top: 0.7rem;
}

.rfq-compare-pending-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
}

.rfq-compare-pending-item {
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #fff;
  padding: 0.58rem 0.62rem;
}

.rfq-offer-matrix {
  border: 1px solid #d6e1f3;
  border-radius: 12px;
  background: #fff;
}

.rfq-offer-matrix .table {
  min-width: 760px;
}

.rfq-offer-matrix th,
.rfq-offer-matrix td {
  vertical-align: top;
  border-color: #e4ebf8;
  padding: 0.55rem 0.6rem;
}

.rfq-offer-matrix thead th {
  background: #f5f8ff;
}

.rfq-offer-matrix-sticky {
  min-width: 210px;
}

.rfq-offer-matrix-break-col {
  min-width: 120px;
}

.rfq-offer-matrix-part {
  background: #fbfcff;
}

.rfq-offer-matrix-break-cell {
  min-width: 110px;
  background: #fbfcff;
}

.rfq-offer-matrix-part-group-start > td {
  border-top: 3px solid #bfd0ea !important;
}

.rfq-offer-matrix-part-group-start .rfq-offer-matrix-part,
.rfq-offer-matrix-part-group-start .rfq-offer-matrix-break-cell {
  background: linear-gradient(180deg, #f6f9ff 0%, #fbfcff 100%);
}

.rfq-offer-matrix-break-pill {
  min-width: 74px;
  justify-content: center;
}

.rfq-offer-matrix-break-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-start;
}

.rfq-offer-matrix-supplier {
  font-weight: 700;
  color: #132949;
  line-height: 1.25;
}

.rfq-offer-matrix-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  border: 1px solid #e4ebf8;
  border-radius: 8px;
  background: #f9fbff;
  padding: 0.34rem 0.45rem;
  margin-bottom: 0.22rem;
}

.rfq-offer-matrix-price-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-width: 0;
}

.rfq-offer-matrix-price--line strong,
.rfq-offer-matrix-price--generic strong {
  line-height: 1.1;
}

.rfq-offer-matrix-line-qty {
  font-size: 0.72rem;
}

.rfq-matrix-fill-btn {
  font-weight: 600;
}

.rfq-matrix-inline-entry .input-group {
  min-width: 180px;
}

.rfq-matrix-inline-entry .rfq-matrix-inline-qty {
  max-width: 92px;
  font-weight: 700;
}

.offer-line-part-start > td {
  border-top: 3px solid #bfd0ea !important;
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}

.offer-line-part-start td[rowspan] {
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}

.offer-line-part-divider .badge {
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

.rfq-final-quote-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.rfq-final-quote-summary > div {
  border: 1px solid #d7e1f1;
  border-radius: 10px;
  background: #f9fbff;
  padding: 0.56rem 0.62rem;
}

.rfq-final-quote-summary span {
  display: block;
  color: #67758f;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rfq-final-quote-summary strong {
  display: block;
  margin-top: 0.16rem;
  color: #12284d;
  font-size: 1rem;
}

.customer-quote-line-row--alt td {
  background: #fbfdff;
}

.customer-quote-line-row--alt td:first-child::after {
  content: "Alternatif";
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: #eef5ff;
  color: #315b96;
  font-size: 0.68rem;
  font-weight: 700;
}

.quote-workbench-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid #d7e2f3;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
  box-shadow: 0 18px 44px rgba(32, 72, 131, 0.12);
  padding: 1.35rem;
}

.quote-workbench-hero h1 {
  margin: 0.18rem 0 0.45rem;
  color: #071329;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  letter-spacing: -0.05em;
}

.quote-workbench-hero p {
  max-width: 760px;
  margin: 0;
  color: #53627b;
  font-size: 1rem;
}

.quote-eyebrow {
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quote-workbench-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.quote-workbench-stat {
  border: 1px solid #dbe5f5;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  padding: 0.9rem 1rem;
}

.quote-workbench-stat span {
  display: block;
  color: #72809a;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-workbench-stat strong {
  display: block;
  margin-top: 0.24rem;
  color: #071329;
  font-size: 1.05rem;
}

.rfq-proforma-strip {
  border: 1px solid #b9d0ef;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  box-shadow: 0 14px 32px rgba(28, 63, 116, 0.11);
  padding: 0.9rem;
}

.rfq-proforma-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid #dbe6f7;
  padding-bottom: 0.7rem;
}

.rfq-proforma-strip-head strong {
  display: block;
  color: #0a234a;
  font-size: 1rem;
}

.rfq-proforma-kicker {
  display: block;
  color: #2360c8;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rfq-proforma-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.rfq-proforma-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border: 1px solid #d8e3f3;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.72rem;
}

.rfq-proforma-no {
  color: #071329;
  font-size: 0.96rem;
  font-weight: 850;
}

.rfq-proforma-meta {
  margin-top: 0.14rem;
  color: #60718f;
  font-size: 0.82rem;
  font-weight: 650;
}

.rfq-proforma-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.45rem;
}

.quote-line-table-wrap {
  border: 1px solid #d8e3f3;
  border-radius: 16px;
}

.quote-line-table thead th {
  background: #f4f8fe;
  color: #7788aa;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quote-line-table tbody td {
  padding-top: 0.82rem;
  padding-bottom: 0.82rem;
}

.quote-payment-builder {
  border: 1px solid #d7e2f4;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.7rem;
}

.quote-payment-builder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.quote-payment-preview {
  margin-top: 0.5rem;
  padding: 0.46rem 0.62rem;
  border-radius: 10px;
  background: #edf4ff;
  color: #17428f;
  font-size: 0.82rem;
  font-weight: 700;
}

.quote-currency-hint {
  min-height: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6f83a6;
}

.quote-currency-hint.is-info {
  color: #1c4fa8;
}

.quote-currency-hint.is-error {
  color: #b42318;
}

.quote-delivery-builder {
  border: 1px solid #d7e2f4;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.7rem;
}

.quote-delivery-builder-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.65rem;
}

.quote-delivery-fields.is-hidden {
  display: none;
}

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

.quote-delivery-preview {
  margin-top: 0.5rem;
  padding: 0.46rem 0.62rem;
  border-radius: 10px;
  background: #edf4ff;
  color: #17428f;
  font-size: 0.82rem;
  font-weight: 700;
}

.quote-line-table .customer-quote-supplier-total,
.quote-line-table .customer-quote-final-total,
.quote-line-table .customer-quote-final-unit {
  font-weight: 750;
  color: #0f2f66;
  background: #f7faff;
}

.customer-quote-break-preview {
  color: #5f7396 !important;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
}

.customer-quote-break-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.28rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.customer-quote-break-tabs.is-hidden {
  display: none;
}

.customer-quote-break-tab {
  appearance: none;
  border: 1px solid #b8cced;
  border-radius: 999px;
  background: #f3f7ff;
  color: #35578f;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 0.18rem 0.46rem;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  transition: all .15s ease;
}

.customer-quote-break-tab:hover {
  border-color: #88aee6;
  color: #17428f;
}

.customer-quote-break-tab.is-active {
  border-color: #2f6ae6;
  background: linear-gradient(180deg, #3a75ea 0%, #245fd8 100%);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(26, 79, 177, 0.18);
}

.quote-break-compact {
  padding-top: 0.45rem !important;
  padding-bottom: 0.6rem !important;
  color: #5f7396 !important;
}

.quote-break-compact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.quote-break-compact-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cfdbf1;
  border-radius: 999px;
  background: #f7faff;
  color: #35578f;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.24rem 0.48rem;
}

.quote-profit-panel {
  border: 1px solid #d7e2f4;
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 6%, rgba(47, 106, 230, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  padding: 1rem;
}

.quote-profit-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.quote-profit-panel-title {
  color: #0f274d;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.quote-profit-panel-subtitle {
  margin-top: 0.25rem;
  max-width: 680px;
  color: #5f7598;
  font-size: 0.88rem;
  font-weight: 600;
}

.quote-profit-mode-wrap {
  min-width: 220px;
}

.quote-profit-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid #cfdbf0;
  border-radius: 999px;
  background: #f2f6ff;
  padding: 0.25rem;
}

.quote-profit-mode-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4f6387;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 0.48rem 0.92rem;
  line-height: 1;
  transition: all 0.15s ease;
}

.quote-profit-mode-btn:hover {
  color: #1d3f7e;
}

.quote-profit-mode-btn.is-active {
  background: linear-gradient(180deg, #ffffff 0%, #edf3ff 100%);
  color: #1548a6;
  box-shadow: 0 6px 16px rgba(27, 80, 172, 0.18);
}

.quote-profit-panel-body {
  border-top: 1px solid #dbe6f7;
  padding-top: 0.95rem;
}

.customer-profit-field {
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.customer-profit-field.is-active .form-control {
  border-color: #8fb0e9 !important;
  box-shadow: 0 0 0 2px rgba(47, 106, 230, 0.12) inset;
  background: #fafdff;
}

.customer-profit-field.is-hidden {
  display: none;
}

.quote-submit-bar {
  position: sticky;
  bottom: 0.75rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 48px rgba(14, 33, 66, 0.16);
  backdrop-filter: blur(12px);
  padding: 0.85rem;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1399.98px) {
  .pricing-sticky {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .x-header-top {
    align-items: flex-start;
  }

  .x-header-actions {
    width: 100%;
    justify-content: space-between !important;
  }

  .x-header-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2rem;
  }

  .x-nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .hero-panel {
    padding: 2rem 1.5rem;
  }

  .hero-panel h1 {
    font-size: 1.6rem;
  }

  .pricing-pill-group {
    width: 100%;
  }

  .pricing-pill {
    font-size: 0.68rem;
  }

  .pricing-section .card-body {
    padding: 1rem !important;
  }

  .rfq-x-step {
    font-size: 0.68rem;
  }

  .rfq-sticky-actions {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.96);
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    z-index: 10;
  }

  .rfq-summary-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .dashboard-page .dashboard-hero {
    border-radius: 18px;
  }

  .dashboard-hero-cta {
    width: 100%;
  }

  .dashboard-metric-card .card-body,
  .dashboard-action-card .card-body {
    min-height: 120px;
  }

  .dashboard-action-card .card-title {
    font-size: 1rem;
  }

  .rfq-submit-trigger.btn-primary {
    width: 100%;
    min-width: 0;
  }

  .rfq-suggestion-box {
    padding: 0.8rem;
  }

  .auth-modal-shell {
    min-height: auto;
    padding-top: 0.5rem;
  }

  .auth-modal-card .card-body {
    padding: 1.5rem;
  }

  .x-auth-page {
    min-height: auto;
    padding: 0.6rem 0;
  }

  .x-auth-shell,
  .x-auth-shell-wide {
    width: 100%;
  }

  .x-auth-card {
    padding: 1rem;
  }

  .x-auth-grid {
    grid-template-columns: 1fr;
  }

  .x-auth-grid-col-right {
    grid-column: 1 / -1;
  }

  .kpi-card strong {
    font-size: 1.25rem;
  }

  .rfq-offer-stats {
    grid-template-columns: 1fr;
  }

  .rfq-compare-board {
    grid-template-columns: 1fr;
  }

  .rfq-compare-meta {
    grid-template-columns: 1fr;
  }

  .rfq-compare-pending-list {
    grid-template-columns: 1fr;
  }

  .rfq-final-quote-summary {
    grid-template-columns: 1fr;
  }

  .quote-workbench-hero,
  .quote-submit-bar {
    align-items: stretch;
    flex-direction: column;
  }

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

  .rfq-proforma-strip-head,
  .rfq-proforma-item {
    align-items: stretch;
    flex-direction: column;
  }

  .rfq-proforma-actions {
    width: 100%;
  }

  .rfq-proforma-actions .btn {
    flex: 1 1 0;
  }

  .quote-payment-builder-grid {
    grid-template-columns: 1fr;
  }

  .quote-delivery-builder-grid {
    grid-template-columns: 1fr;
  }

  .quote-profit-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .quote-profit-mode-wrap {
    min-width: 0;
    width: 100%;
  }

  .quote-profit-mode-switch {
    width: 100%;
  }

  .quote-profit-mode-btn {
    flex: 1 1 0;
    text-align: center;
  }

  .quote-submit-bar {
    position: static;
  }

  .table thead th,
  .table tbody td {
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
  }
}

/* ── Global Visual Unification (All App Pages) ───────────────────────── */
.container-xl {
  max-width: 1320px !important;
}

.x-canvas {
  background: transparent;
}

.x-page-wrap {
  padding-top: 1rem !important;
  padding-bottom: 2rem !important;
}

.x-main-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.x-page-hero {
  border: 1px solid #c7d6ee;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(244, 248, 255, .98) 0%, rgba(235, 243, 252, .98) 55%, rgba(248, 251, 255, .98) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  padding: 1.15rem 1.3rem;
}

.x-page-hero-title {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.x-page-hero-subtitle {
  color: #4d678f;
}

.x-surface-card,
.x-table-card {
  border: 1px solid #c7d6ee !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.x-surface-card .card-body,
.x-table-card .card-body {
  padding: 1.2rem 1.25rem;
}

.table {
  --tblr-table-bg: transparent;
}

.table > :not(caption) > * > * {
  border-bottom-color: #e2eaf7;
}

.table thead th {
  color: #7b90b4;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.76rem;
  background: #f6f9ff;
  border-bottom: 1px solid #d4e1f4;
}

.table tbody td {
  font-weight: 600;
  color: #162847;
  vertical-align: middle;
}

.form-label,
label.form-label {
  color: #2d4773;
  font-weight: 700;
  font-size: 0.9rem;
}

.form-control,
.form-select {
  border-color: #b8c9e4 !important;
  border-radius: 12px !important;
  min-height: 46px;
  color: #132949;
  background: #fff;
  box-shadow: none;
}

textarea.form-control {
  min-height: 110px;
}

.form-control::placeholder,
.form-select::placeholder {
  color: #8ca0bf;
}

.form-control:focus,
.form-select:focus {
  border-color: #2f6ae6 !important;
  box-shadow: 0 0 0 3px rgba(47, 106, 230, 0.16) !important;
}

.form-check-input {
  border-color: #a9bddf;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(47, 106, 230, 0.16);
  border-color: #2f6ae6;
}

.form-check-input:checked {
  background-color: #2f6ae6;
  border-color: #2f6ae6;
}

.btn {
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.btn-primary {
  background: linear-gradient(135deg, #2f6ae6 0%, #1f56c9 100%);
  border-color: #2f6ae6;
  box-shadow: 0 8px 18px rgba(47, 106, 230, 0.25);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #275ed1 0%, #1848af 100%);
  border-color: #275ed1;
  transform: translateY(-1px);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
  background: #fff;
}

.badge {
  font-weight: 700;
}

.x-auth-page {
  min-height: calc(100vh - 40px);
  padding: 2rem 0 2.6rem;
  background:
    radial-gradient(circle at 14% 22%, rgba(47, 106, 230, .11), transparent 38%),
    radial-gradient(circle at 86% 78%, rgba(98, 140, 240, .09), transparent 32%);
}

.x-auth-shell {
  width: min(560px, 100%);
}

.x-auth-shell-wide {
  width: min(940px, 100%);
}

.x-auth-card {
  border: 1px solid #c8d7ee;
  border-radius: 22px;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .98));
  padding: 1.45rem 1.45rem 1.2rem;
}

.x-auth-title {
  font-family: "Sora", "Segoe UI", sans-serif;
}

.x-form-input {
  min-height: 48px;
}

.x-auth-submit {
  border-radius: 13px;
  box-shadow: 0 10px 24px rgba(47, 106, 230, .24);
}

.x-auth-submit:hover {
  transform: translateY(-1px);
}

.x-sticky-offset {
  top: 148px !important;
  z-index: 10 !important;
}

.x-logo-preview {
  max-height: 96px;
  border-radius: 10px;
  border-color: #c7d6ee;
}

.customer-company-cell {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.customer-logo-badge {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  border: 1px solid rgba(108, 130, 176, 0.25);
  background: linear-gradient(145deg, #f6f9ff, #e4ebf7);
  box-shadow: 0 10px 24px rgba(43, 67, 110, 0.08);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #20314f;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.customer-logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.customer-company-copy {
  min-width: 0;
}

.customers-table {
  table-layout: fixed;
  width: 100%;
}

.customers-table th,
.customers-table td {
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.customers-table .customers-col-company {
  width: 23%;
}

.customers-table .customers-col-contact {
  width: 21%;
}

.customers-table .customers-col-address {
  width: 29%;
}

.customers-table .customers-col-phone {
  width: 11%;
}

.customers-table .customers-col-created {
  width: 8%;
}

.customers-table .customers-col-actions {
  width: 8%;
}

.customers-table .x-table-actions {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.customers-table .x-table-actions > a,
.customers-table .x-table-actions > button,
.customers-table .x-table-actions > form {
  width: 100%;
}

.customers-table .x-table-actions > form .x-table-action {
  width: 100%;
}

.customer-logo-form-preview {
  border: 1px dashed rgba(108, 130, 176, 0.3);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(244, 247, 252, 0.9), rgba(255, 255, 255, 0.95));
  padding: 1rem;
  min-height: 100%;
}

.customer-logo-preview {
  max-width: 100%;
  max-height: 120px;
  border-radius: 14px;
  border: 1px solid #d6e1f1;
  background: #fff;
}

.customer-logo-placeholder {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #eff4fb, #d9e4f2);
  border: 1px solid rgba(108, 130, 176, 0.22);
  color: #20314f;
  font-size: 2rem;
  font-weight: 900;
}

.x-settings-map {
  height: 360px;
  border-radius: 12px;
}

@media (max-width: 991.98px) {
  .x-sticky-offset {
    position: static !important;
    top: auto !important;
  }
}

/* ── Alignment Consistency (All Pages) ────────────────────────────────── */
.x-page-hero-title-compact {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.x-page-wrap > .x-main-panel > * + * {
  margin-top: 0;
}

.page-header {
  margin-bottom: 1rem;
  align-items: center;
}

.x-table-card .table-responsive,
.x-surface-card .table-responsive {
  border-radius: inherit;
}

.x-table-card .table {
  margin-bottom: 0;
}

.x-auth-page {
  display: block;
  min-height: auto;
  padding: 1.2rem 0 2.2rem;
}

.x-auth-shell,
.x-auth-shell-wide {
  margin-inline: auto;
  padding-inline: 0.75rem;
}

.x-auth-shell {
  width: min(560px, 100%);
}

.x-auth-shell-wide {
  width: min(980px, 100%);
}

.x-auth-brand {
  margin-bottom: 0.95rem;
}

.x-auth-card {
  margin-inline: auto;
}

.x-auth-grid > div {
  min-width: 0;
}

.x-auth-form .x-form-error:empty {
  display: none;
}

.x-page-hero,
.x-surface-card,
.x-table-card {
  scroll-margin-top: 96px;
}

@media (max-width: 767.98px) {
  .x-auth-page {
    padding: 0.7rem 0 1.4rem;
  }

  .x-auth-shell,
  .x-auth-shell-wide {
    padding-inline: 0.2rem;
  }

  .x-logout-top {
    grid-template-columns: 1fr;
  }
}

/* ── Capability UX (Modern Selection) ─────────────────────────────────── */
.capability-process-toolbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 255, 0.9));
  border-color: var(--border) !important;
}

.capability-selected-panel {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border) !important;
}

.capability-selected-chip {
  border-radius: 9999px;
  color: var(--text-primary);
  background: #fff;
  border-color: var(--border);
}

.capability-selected-chip:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent-hover);
}

.capability-group-card {
  background: #fff;
  border-color: var(--border) !important;
  overflow: hidden;
}

.capability-group-card + .capability-group-card {
  margin-top: 0.65rem;
}

.capability-group-card[open] {
  box-shadow: var(--shadow-xs);
}

.capability-group-header {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.9rem 1rem;
  background: rgba(243, 247, 255, 0.8);
  border-bottom: 1px solid rgba(184, 201, 228, 0.6);
}

.capability-group-header::-webkit-details-marker {
  display: none;
}

.capability-group-header::after {
  content: "▾";
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin-left: auto;
  transition: transform var(--duration) var(--ease);
}

.capability-group-card:not([open]) .capability-group-header::after {
  transform: rotate(-90deg);
}

.capability-group-body {
  padding: 0.95rem 1rem 1rem;
}

.capability-process-chip {
  background: #fff;
  border-color: var(--border) !important;
  color: var(--text-primary);
  font-weight: 600;
  transition: all var(--duration) var(--ease);
  cursor: pointer;
}

.capability-process-chip:hover {
  transform: translateY(-1px);
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-xs);
}

.capability-process-chip .process-check {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--border-hover);
  box-shadow: none;
}

.capability-process-chip:has(.process-check:checked) {
  background: var(--accent-subtle);
  border-color: var(--accent) !important;
  color: var(--accent-hover);
}

.capability-process-chip:has(.process-check:checked) .process-check {
  accent-color: var(--accent);
}

/* ── Company Overview UX ─────────────────────────────────────────────── */
.x-company-overview {
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.95));
}

.x-overview-metric {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 0.9rem 1rem;
}

.x-overview-metric-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.x-overview-metric-value {
  margin-top: 0.3rem;
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
}

.x-overview-metric-sub {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.x-profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  border-bottom: 1px solid rgba(152, 173, 204, 0.55);
  padding: 0 0.2rem;
}

.x-profile-tab {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 0 0.15rem 0.7rem;
  transition: all var(--duration) var(--ease);
}

.x-profile-tab:hover {
  color: var(--text-primary);
  border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.x-profile-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.x-profile-aux-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.x-profile-aux-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
}

.x-profile-aux-links a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.x-overview-grid {
  border-top: 1px solid rgba(152, 173, 204, 0.35);
}

.x-overview-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(152, 173, 204, 0.3);
}

.x-overview-label {
  font-weight: 700;
  color: var(--text-primary);
}

.x-overview-value {
  color: var(--text-secondary);
}

.x-company-form-wrap .x-surface-card {
  scroll-margin-top: 96px;
}

@media (max-width: 767.98px) {
  .x-overview-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .x-header-top {
    align-items: flex-start !important;
  }

  .x-header-actions {
    width: 100%;
    justify-content: flex-start !important;
  }

  .x-header-actions .user-actions {
    flex-wrap: wrap !important;
    width: 100%;
  }

  .x-header-actions .user-actions .btn {
    min-width: 0 !important;
  }
}

/* ── Enterprise Table Actions ────────────────────────────────────────── */
.x-table-actions,
.customer-row-actions,
.rfq-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.42rem;
  flex-wrap: wrap;
}

.x-table-action {
  --x-action-border: #c7d6f2;
  --x-action-bg: rgba(255, 255, 255, 0.88);
  --x-action-fg: #0b2142;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--x-action-border);
  background: var(--x-action-bg);
  color: var(--x-action-fg);
  min-height: 34px;
  max-width: 100%;
  padding: 0.43rem 0.78rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 7px 18px rgba(32, 84, 180, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.x-table-action:hover {
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(32, 84, 180, 0.14);
}

.x-table-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.x-table-action--primary {
  --x-action-border: #b8cdf8;
  --x-action-fg: #1644a3;
  --x-action-bg: linear-gradient(180deg, #ffffff, #f4f7ff);
}

.x-table-action--neutral {
  --x-action-border: #d3deef;
  --x-action-fg: #263b5b;
}

.x-table-action--success {
  --x-action-border: #9fe5ba;
  --x-action-fg: #087a31;
  --x-action-bg: #f4fff7;
}

.x-table-action--danger {
  --x-action-border: #ffb4b4;
  --x-action-fg: #d71920;
  --x-action-bg: #fff8f8;
}

.x-table-actions--supplier {
  gap: 0.5rem;
}

.x-table-actions--supplier .x-table-action {
  min-height: 36px;
  padding: 0.46rem 0.82rem;
  font-size: 0.8rem;
}

.x-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-right: 0.38rem;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 900;
  line-height: 1;
  border: 1px solid currentColor;
  opacity: 0.88;
  flex-shrink: 0;
}

.x-table-action--danger .x-action-icon {
  width: 1rem;
  height: 1rem;
  font-size: 0.8rem;
}

.x-supplier-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #cbdaf4;
  background: #f7faff;
  color: #57709a;
  text-transform: uppercase;
  font-size: 0.73rem;
  letter-spacing: 0.09em;
  font-weight: 800;
  margin-bottom: 0.62rem;
}

.x-supplier-headline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.x-supplier-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid #cfddf3;
  background: #fbfdff;
  border-radius: 999px;
  padding: 0.34rem 0.68rem;
  color: #203758;
  font-size: 0.84rem;
}

.x-supplier-chip-label {
  color: #6a7f9f;
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.x-supplier-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.x-supplier-mini-item {
  border: 1px solid #d8e3f5;
  border-radius: 0.82rem;
  padding: 0.5rem 0.62rem;
  background: #fbfdff;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  color: #213955;
}

.x-supplier-mini-label {
  color: #6e83a5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  font-weight: 700;
}

.customer-address-preview {
  max-width: 100%;
}

.country-picker-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

.country-picker-hint {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.customer-delete-confirm > td,
.rfq-delete-confirm > td {
  background: rgba(255, 248, 232, 0.78);
  border-top: 0 !important;
}

.customer-delete-panel,
.rfq-delete-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  background: #fffaf0;
  padding: 0.85rem 1rem;
}

.rfq-process-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.rfq-process-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-primary);
  font-weight: 700;
  padding: 0.58rem 0.85rem;
}

.rfq-process-toggle input {
  accent-color: var(--accent);
}

.rfq-action-bar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.rfq-action-main {
  min-width: 5.6rem;
}

.rfq-action-menu {
  position: relative;
}

.rfq-action-menu > summary {
  list-style: none;
}

.rfq-action-menu > summary::-webkit-details-marker {
  display: none;
}

.rfq-action-menu-trigger {
  border: 1px solid #d5e1f6;
  background: #fff;
  color: #24467f;
  border-radius: 999px;
  min-width: 2.25rem;
  min-height: 2.05rem;
  padding: 0.2rem 0.56rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rfq-action-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  min-width: 9.6rem;
  border: 1px solid #d4e0f3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  padding: 0.35rem;
  z-index: 25;
  display: grid;
  gap: 0.25rem;
}

.rfq-action-menu-item {
  border: 0;
  background: #f8fbff;
  color: #243b63;
  font-weight: 750;
  border-radius: 9px;
  min-height: 2.1rem;
  padding: 0.42rem 0.62rem;
  text-align: left;
  text-decoration: none;
}

.rfq-action-menu-item:hover {
  background: #eef4ff;
  color: #153a84;
  text-decoration: none;
}

.rfq-action-menu-item--danger {
  background: #fff5f5;
  color: #c1121f;
}

.rfq-action-menu-item--danger:hover {
  background: #ffe9e9;
  color: #9d0f1a;
}

.rfq-filter-strip {
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
  padding: 0.95rem 1rem;
}

.rfq-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.85rem 1rem;
}

.rfq-filter-company {
  min-width: 16rem;
  flex: 0 1 22rem;
}

.rfq-filter-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rfq-filter-select {
  min-width: 14rem;
}

.rfq-filter-ranges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.rfq-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  padding: 0.32rem 0.82rem;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 999px;
  background: #fff;
  color: #24467f;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.rfq-filter-chip:hover {
  text-decoration: none;
  border-color: rgba(37, 99, 235, 0.28);
  background: #f7faff;
}

.rfq-filter-chip.is-active {
  background: linear-gradient(135deg, #24467f, #13274a);
  border-color: #13274a;
  color: #fff;
}

@media (max-width: 767.98px) {
  .x-table-actions,
  .customer-row-actions,
  .rfq-row-actions {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 0.45rem;
  }

  .x-table-actions > a,
  .x-table-actions > button,
  .x-table-actions > form,
  .customer-row-actions > a,
  .customer-row-actions > button,
  .customer-row-actions > form,
  .rfq-row-actions > a,
  .rfq-row-actions > button,
  .rfq-row-actions > form {
    flex: 1 1 calc(50% - 0.45rem);
    min-width: 9.4rem;
  }

  .x-table-actions > form .x-table-action,
  .customer-row-actions > form .x-table-action,
  .rfq-row-actions > form .x-table-action {
    width: 100%;
  }

  .x-table-action {
    width: 100%;
    min-height: 32px;
    padding: 0.38rem 0.64rem;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }

  .customer-delete-panel,
  .rfq-delete-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .rfq-action-bar {
    width: 100%;
    justify-content: flex-start;
  }

  .rfq-action-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .rfq-action-menu-pop {
    left: 0;
    right: auto;
  }
}

/* ── Mobile Hardening (All Pages) ─────────────────────────────────────── */
@media (max-width: 767.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .container-xl,
  .container-xxl {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
  }

  .x-page-wrap {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 1.25rem !important;
  }

  .x-page-hero,
  .x-surface-card .card-body,
  .x-table-card .card-body,
  .card .card-body {
    padding: 0.9rem !important;
  }

  .x-page-hero-title,
  .x-page-hero-title-compact {
    font-size: clamp(1.35rem, 7.2vw, 1.85rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }

  .x-page-hero-subtitle {
    font-size: 0.97rem !important;
    line-height: 1.45 !important;
  }

  .btn,
  .btn-sm,
  .form-control,
  .form-select,
  .x-table-action {
    min-height: 44px;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table td,
  .table th {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ── Mobile App Shell + RFQ Index Final Overrides ─────────────────────── */
.rfq-mobile-cards {
  display: none;
}

.x-new-rfq-short {
  display: none;
}

@media (min-width: 768px) {
  .rfq-desktop-table {
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .rfq-desktop-table .table {
    table-layout: fixed;
    width: 100%;
  }

  .rfq-desktop-table .table th:first-child,
  .rfq-desktop-table .table td:first-child {
    width: 8.8rem;
  }

  .rfq-desktop-table .table th:nth-child(2),
  .rfq-desktop-table .table td:nth-child(2) {
    width: 11rem;
  }

  .rfq-desktop-table .rfq-admin-table th:nth-child(2),
  .rfq-desktop-table .rfq-admin-table td:nth-child(2) {
    width: 15rem;
  }

  .rfq-desktop-table .table th:nth-child(3),
  .rfq-desktop-table .table td:nth-child(3) {
    width: 14rem;
  }

  .rfq-desktop-table .table th:nth-child(4),
  .rfq-desktop-table .table td:nth-child(4) {
    width: 10.2rem;
  }

  .rfq-desktop-table .table th:nth-child(5),
  .rfq-desktop-table .table td:nth-child(5) {
    width: 8.4rem;
  }

  .rfq-desktop-table .table th:nth-child(6),
  .rfq-desktop-table .table td:nth-child(6) {
    width: 6.2rem;
    text-align: center;
  }

  .rfq-desktop-table .table th:nth-last-child(2),
  .rfq-desktop-table .table td:nth-last-child(2) {
    width: 5.9rem;
    text-align: center;
  }

  .rfq-desktop-table .table th:last-child,
  .rfq-desktop-table .table td:last-child {
    width: 7.1rem;
  }

  .rfq-desktop-table th,
  .rfq-desktop-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
  }

  .rfq-distribution-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
    min-width: 0;
  }

  .rfq-distribution-meta {
    font-size: 0.74rem;
    line-height: 1.1;
    color: var(--text-secondary);
    font-weight: 600;
  }

  .rfq-customer-preview-cell {
    align-items: flex-start;
    gap: 0.7rem;
  }

  .rfq-customer-logo-badge {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
  }

  .rfq-customer-preview-copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
  }

  .rfq-customer-name {
    line-height: 1.22;
  }

  .rfq-customer-title-preview {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.28;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .rfq-action-bar {
    gap: 0.28rem;
    flex-wrap: nowrap;
  }

  .rfq-action-main {
    min-width: 4.8rem;
    padding-inline: 0.7rem;
  }

  .rfq-action-menu-trigger {
    min-width: 2rem;
    min-height: 2rem;
    padding-inline: 0.35rem;
  }

  .rfq-action-menu-pop {
    min-width: 8.2rem;
    max-width: min(9rem, calc(100vw - 1rem));
    right: 0;
  }

  .rfq-filter-strip {
    padding: 0.8rem 0.85rem;
    border-radius: 18px;
  }

  .rfq-filter-form {
    align-items: stretch;
  }

  .rfq-filter-company {
    min-width: 100%;
    flex-basis: 100%;
  }

  .rfq-filter-select {
    min-width: 100%;
  }

  .rfq-filter-ranges {
    justify-content: flex-start;
  }

  .rfq-mobile-cards {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  html,
  body,
  .page,
  .page-wrapper,
  .page-body,
  .x-canvas,
  .x-main-panel {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .x-header-frame {
    margin: 0.4rem auto;
    padding: 0.5rem;
    border-radius: 14px;
  }

  .x-header-top {
    padding: 0.7rem;
    gap: 0.6rem;
  }

  .x-app-brand {
    width: 100%;
  }

  .x-app-brand-title {
    font-size: 1rem !important;
    letter-spacing: 0.02em !important;
  }

  .x-header-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0.45rem;
  }

  .x-header-actions form {
    margin: 0 !important;
  }

  .x-header-actions .x-user-btn,
  .x-header-actions form {
    flex: 1 1 calc(50% - 0.3rem);
    min-width: 0;
  }

  .x-header-actions .x-user-btn {
    width: 100%;
    min-height: 40px;
    font-size: 0.88rem;
    padding: 0.5rem 0.65rem;
  }

  .x-header-actions .x-user-role {
    flex: 1 1 100%;
    min-height: 38px;
    justify-content: center;
  }

  .x-header-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
    overflow: visible !important;
    padding-bottom: 0;
  }

  .x-nav-link {
    min-width: 0;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.25;
    padding: 0.52rem 0.45rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .rfq-desktop-table {
    display: none !important;
  }

  .rfq-mobile-cards {
    display: grid !important;
    gap: 0.7rem;
    margin-top: 0.15rem;
  }

  .rfq-mobile-empty {
    border: 1px solid rgba(152, 173, 204, 0.36);
    border-radius: 12px;
    background: #fff;
    color: var(--text-secondary);
    padding: 0.95rem;
    font-weight: 600;
    text-align: center;
  }

  .rfq-mobile-item {
    border: 1px solid rgba(152, 173, 204, 0.36);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
    padding: 0.85rem;
  }

  .rfq-mobile-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.62rem;
  }

  .rfq-mobile-customer-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.22rem;
    min-width: 0;
  }

  .rfq-mobile-logo-badge {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    box-shadow: 0 8px 18px rgba(43, 67, 110, 0.08);
  }

  .rfq-mobile-customer-copy {
    min-width: 0;
  }

  .rfq-mobile-customer-name {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rfq-mobile-rfq {
    color: var(--text-primary);
    font-weight: 820;
    font-size: 0.98rem;
    line-height: 1.2;
  }

  .rfq-mobile-title {
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.35;
    margin-top: 0.2rem;
    overflow-wrap: anywhere;
  }

  .rfq-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.46rem 0.55rem;
    margin-bottom: 0.72rem;
  }

  .rfq-mobile-kv {
    border: 1px solid rgba(188, 205, 232, 0.54);
    border-radius: 10px;
    background: rgba(247, 250, 255, 0.86);
    padding: 0.44rem 0.5rem;
  }

  .rfq-mobile-kv > span {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.12rem;
  }

  .rfq-mobile-kv > strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 780;
    line-height: 1.32;
    overflow-wrap: anywhere;
  }

  .rfq-mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .rfq-mobile-actions .x-table-action,
  .rfq-mobile-actions form .x-table-action {
    width: 100%;
    min-height: 40px;
    font-size: 0.86rem;
    padding: 0.45rem 0.55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rfq-mobile-actions form {
    margin: 0;
  }

  .rfq-mobile-item .badge {
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Mobile First App Shell + RFQ Creation Flow ───────────────────────── */
@media (max-width: 767.98px) {
  .x-header-shell {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
  }

  .x-header-frame {
    width: calc(100% - 0.75rem) !important;
    margin: 0.25rem auto !important;
    padding: 0.35rem !important;
    border-radius: 16px !important;
  }

  .x-header-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.45rem 0.5rem !important;
    border-radius: 12px !important;
  }

  .x-app-brand {
    width: auto !important;
    min-width: 0 !important;
    gap: 0.42rem !important;
  }

  .x-app-brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .x-app-brand-text {
    min-width: 0 !important;
  }

  .x-app-brand-title {
    max-width: 38vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(1.35rem, 5.2vw, 1.72rem) !important;
    line-height: 0.92 !important;
  }

  .x-app-brand-subtitle {
    display: none !important;
  }

  .x-header-actions {
    width: auto !important;
    max-width: calc(100vw - 112px) !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 0.3rem !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .x-header-actions::-webkit-scrollbar {
    display: none !important;
  }

  .x-header-actions form {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .x-header-actions .x-user-btn,
  .x-header-actions form .x-user-btn,
  .x-lang-link,
  .x-user-role,
  .x-notification-button,
  .x-notif-trigger {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    font-size: 0.82rem !important;
    padding: 0.42rem 0.55rem !important;
    white-space: nowrap !important;
  }

  .x-lang-switch {
    height: 38px !important;
    border-radius: 11px !important;
  }

  .x-lang-link {
    min-width: 2rem !important;
    padding-inline: 0.5rem !important;
  }

  .x-notif-label,
  .x-header-actions .x-user-role {
    display: none !important;
  }

  .x-new-rfq-full {
    display: none !important;
  }

  .x-new-rfq-short {
    display: inline !important;
  }

  .x-header-account-line {
    justify-content: flex-start !important;
    min-height: 0 !important;
    margin: 0.25rem 0.25rem 0 !important;
    padding: 0 0.25rem !important;
    font-size: 0.67rem !important;
    gap: 0.25rem !important;
    overflow: hidden !important;
  }

  .x-header-account-label,
  .x-header-account-dotsep,
  .x-header-account-meta {
    display: none !important;
  }

  .x-header-account-company {
    max-width: 100% !important;
    color: #243b63 !important;
  }

  .x-header-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    margin-top: 0.35rem !important;
    padding: 0.35rem 0.1rem 0.15rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
    border-top: 1px solid rgba(148, 163, 184, 0.35) !important;
  }

  .x-header-nav::-webkit-scrollbar {
    display: none !important;
  }

  .x-nav-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.55rem 0.78rem !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    font-size: 0.88rem !important;
    line-height: 1 !important;
    scroll-snap-align: start !important;
  }

  .landing-nav-shell {
    height: auto !important;
  }

  .landing-nav-inner {
    min-height: 56px !important;
    padding: 0.45rem 0.65rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .landing-brand-mini > span,
  .landing-logo-plain {
    height: 38px !important;
  }

  .landing-logo-plain {
    width: 38px !important;
    flex-basis: 38px !important;
  }

  .landing-brand-mini strong {
    font-size: clamp(1.35rem, 5.5vw, 1.7rem) !important;
  }

  .landing-nav-actions {
    gap: 0.18rem !important;
  }

  .landing-icon-btn {
    display: none !important;
  }

  .landing-ghost-btn,
  .landing-login-cta {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  .rfq-x-form {
    padding-bottom: 5rem !important;
  }

  .rfq-x-shell {
    gap: 0.75rem !important;
  }

  .rfq-x-form .card {
    border-radius: 20px !important;
  }

  .rfq-x-form .card-body,
  .rfq-x-hero > .card-body {
    padding: 1rem !important;
  }

  .rfq-x-hero h1 {
    font-size: clamp(1.42rem, 7vw, 2rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
  }

  .rfq-x-hero p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  .rfq-x-steps {
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.42rem !important;
    padding-bottom: 0.15rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .rfq-x-steps::-webkit-scrollbar {
    display: none !important;
  }

  .rfq-x-step {
    flex: 0 0 auto !important;
    padding: 0.42rem 0.68rem !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  .rfq-wizard-switch {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.35rem 0.55rem !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
  }

  .rfq-step-required {
    display: flex !important;
    align-items: flex-start !important;
    border-radius: 14px !important;
    line-height: 1.35 !important;
  }

  .rfq-upload-zone {
    border-radius: 18px !important;
    padding: 0.95rem !important;
    background:
      radial-gradient(circle at top left, rgba(47, 106, 230, 0.10), transparent 34%),
      #f8fbff !important;
  }

  .rfq-upload-zone input[type="file"] {
    min-height: 52px !important;
    font-size: 1rem !important;
  }

  .rfq-file-row {
    align-items: flex-start !important;
    border-radius: 14px !important;
    padding: 0.65rem !important;
  }

  .rfq-file-name {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
  }

  .rfq-file-actions .btn {
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0.35rem !important;
  }

  .rfq-x-form input:not([type="checkbox"]):not([type="radio"]),
  .rfq-x-form select,
  .rfq-x-form textarea {
    min-height: 50px !important;
    font-size: 16px !important;
  }

  .rfq-process-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .rfq-process-search {
    max-width: none !important;
    width: 100% !important;
  }

  .rfq-process-toolbar > .d-flex {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .rfq-topcat-pill {
    min-height: 58px !important;
    border-radius: 16px !important;
    padding: 0.75rem 0.85rem !important;
    font-size: 0.96rem !important;
  }

  .rfq-process-group {
    border-radius: 18px !important;
    padding: 0.85rem !important;
  }

  .rfq-process-summary {
    min-height: 42px !important;
  }

  .rfq-process-item {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0.5rem 0.65rem !important;
    border: 1px solid rgba(203, 213, 225, 0.72) !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  .rfq-process-item .form-check-input {
    margin-top: 0 !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    flex: 0 0 auto !important;
  }

  .rfq-process-item .form-check-label {
    width: 100% !important;
    padding-left: 0.25rem !important;
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
  }

  .rfq-process-item:has(input:checked) {
    border-color: rgba(37, 99, 235, 0.55) !important;
    background: rgba(239, 246, 255, 0.95) !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18) !important;
  }

  #materialSuggestions {
    position: static !important;
    max-height: 32vh !important;
    margin-top: 0.45rem !important;
    border-radius: 16px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .rfq-sticky-actions {
    position: sticky !important;
    bottom: 0.75rem !important;
    z-index: 60 !important;
    flex-wrap: nowrap !important;
    gap: 0.55rem !important;
    margin-top: 1rem !important;
    padding: 0.55rem !important;
    border: 1px solid rgba(148, 163, 184, 0.32) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16) !important;
    backdrop-filter: blur(12px) !important;
  }

  .rfq-sticky-actions.d-none {
    display: none !important;
  }

  .rfq-sticky-actions:not(.d-none) {
    display: flex !important;
  }

  .rfq-sticky-actions .btn,
  .rfq-x-form [data-rfq-next],
  .rfq-submit-trigger,
  #rfqOpenSummary {
    flex: 1 1 0 !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
  }

  #rfqSideCol {
    display: none !important;
  }

  .rfq-summary-row {
    grid-template-columns: 1fr !important;
    gap: 0.25rem !important;
    border-radius: 14px !important;
    padding: 0.65rem !important;
  }
}