/* ==========================================================================
   x.ERP 2026 — Claude Design v3.0 Light-First Brand Contract + Dark Theme
   ==========================================================================
   Owner Contract (2026-10-19):
   - Light theme default: Page #F2F6FA, Surface #FFFFFF, Elevated #E6EDF4 / #F7FAFC
   - Deep Space Navy (#00203F) is used EXCLUSIVELY for text & icons in light theme
     (Header .top-header / header.topbar and .main-nav / .tab-nav are #FFFFFF)
   - Primary CTA button: #E3541F, Active tab & focus: #FC6735, Active chip/tab bg: #FFF5F0
   - Status tokens: Success #16A34A / #25C55E (#ECFDF5), Warning #D97706 (#FFFBEB), Error #DC2626 (#FEF2F2)
   - Card radius: 12px, Control radius: 4px, Minimum font-size: 12px
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

:root,
body,
.x {
  /* Claude Design v3.0 Light-First Tokens */
  --bg-app: #F2F6FA;
  --bg-card: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F7FAFC;
  --surface-elev: #E6EDF4;
  --text-main: #00203F;
  --text-muted: #3D566E;
  --border: rgba(0, 32, 63, 0.12);
  --border-solid: #D5E0EC;
  --active-chip-bg: #FFF5F0;

  --page: #F2F6FA;
  --surf: #FFFFFF;
  --elev: #E6EDF4;
  --acc: #FC6735;
  --btn: #E3541F;
  --btn-hover: #CC4614;
  --btnTxt: #FFFFFF;
  --badge: #B3400F;
  --badgeTxt: #FFFFFF;
  --ink: #B3400F;
  --main: #00203F;
  --body: #3D566E;
  --mono: rgba(0, 32, 63, 0.72);
  --faint: rgba(0, 32, 63, 0.45);
  --line: rgba(0, 32, 63, 0.12);
  --line2: rgba(0, 32, 63, 0.20);
  --ok: #25C55E;
  --okt: #16A34A;
  --okbg: #ECFDF5;
  --warn: #D97706;
  --warnt: #B45309;
  --warnbg: #FFFBEB;
  --err: #DC2626;
  --errt: #DC2626;
  --errbg: #FEF2F2;
  --icon: #3D566E;
  --iact: #E3541F;
  --ival: #16A34A;
  --ierr: #DC2626;
  --ilock: #FC6735;
  --shadow: 0 1px 2px rgba(0, 32, 63, 0.06), 0 6px 18px rgba(0, 32, 63, 0.07);

  /* Mapped Legacy Variables -> v3 Light-First Contract */
  --bg-root: var(--page);
  --bg-surface: var(--surf);
  --bg-elevated: var(--elev);
  --bg-input: var(--surf);
  --border-subtle: var(--line);
  --border-strong: var(--line2);
  --border-color: var(--line);

  --text-primary: var(--main);
  --text-secondary: var(--body);

  --accent-blue: #FC6735;
  --accent-blue-hover: #E3541F;
  --accent-indigo: #E3541F;
  --accent-cyan: #FC6735;
  --accent-emerald: #25C55E;
  --accent-emerald-bg: var(--okbg);
  --accent-amber: #D97706;
  --accent-amber-bg: var(--warnbg);
  --accent-rose: #DC2626;
  --accent-rose-bg: var(--errbg);
  --accent-purple: #B3400F;

  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

body.dark,
.x.dark {
  --bg-app: #001529;
  --bg-card: #00203F;
  --surface: #00203F;
  --surface-alt: #072B52;
  --surface-elev: #072B52;
  --text-main: #FFFFFF;
  --text-muted: rgba(242, 246, 250, 0.78);
  --border: rgba(242, 246, 250, 0.14);
  --border-solid: rgba(242, 246, 250, 0.22);
  --active-chip-bg: rgba(252, 103, 53, 0.16);

  --page: #001529;
  --surf: #00203F;
  --elev: #072B52;
  --acc: #FC6735;
  --btn: #FC6735;
  --btn-hover: #FF7B4D;
  --btnTxt: #00203F;
  --badge: #FC6735;
  --badgeTxt: #00203F;
  --ink: #FF8F66;
  --main: #FFFFFF;
  --body: rgba(242, 246, 250, 0.78);
  --mono: rgba(242, 246, 250, 0.68);
  --faint: rgba(242, 246, 250, 0.45);
  --line: rgba(242, 246, 250, 0.14);
  --line2: rgba(242, 246, 250, 0.24);
  --ok: #25C55E;
  --okt: #5ED39E;
  --okbg: rgba(37, 197, 94, 0.16);
  --warn: #D97706;
  --warnt: #FBBF24;
  --warnbg: rgba(217, 119, 6, 0.16);
  --err: #DC2626;
  --errt: #FF8C8C;
  --errbg: rgba(220, 38, 38, 0.20);
  --icon: #D9D9D9;
  --iact: #FC6735;
  --ival: #25C55E;
  --ierr: #FF8C8C;
  --ilock: #FC6735;
  --shadow: none;

  --bg-root: var(--page);
  --bg-surface: var(--surf);
  --bg-elevated: var(--elev);
  --bg-input: #001830;
  --border-subtle: var(--line);
  --border-strong: var(--line2);
  --border-color: var(--line);

  --text-primary: var(--main);
  --text-secondary: var(--body);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--page);
  color: var(--main);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--acc);
}

.m {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--elev);
  color: var(--ink);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

a {
  color: var(--ink);
}

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

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #FC6735;
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   TOP HEADER & SINGLE-COMPANY IDENTITY (1 Firma = 1 Instanca, zero overlap)
   -------------------------------------------------------------------------- */
header.topbar,
.top-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surf);
  border-bottom: 1px solid var(--line);
  max-width: 100%;
  width: 100%;
  overflow: visible;
  flex-wrap: nowrap;
}

.brand-block,
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.bento-home-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  border: 1px solid var(--line2);
  background: var(--surf);
  color: var(--icon);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.bento-home-btn:hover {
  border-color: var(--acc);
  background: #FFF5F0;
}

.bento-home-btn.active,
.bento-home-btn[aria-current="page"] {
  border: 1.5px solid #FC6735;
  background: #FFF5F0;
  color: #E3541F;
}

.brand-logo-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-logo {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--main);
}

.brand-logo .brand-dot {
  color: var(--acc);
}

.brand-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-title {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--main);
}

.brand-subtitle {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mono);
  white-space: nowrap;
}

.header-identity-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  flex-shrink: 0;
  width: auto;
  min-width: max-content;
}

.company-identity-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  background: var(--active-chip-bg);
  border: 1px solid rgba(252, 103, 53, 0.35);
  border-top: 2px solid #FC6735;
  border-radius: 4px;
  flex-shrink: 0;
}

.company-code-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  background: #E3541F;
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.2;
}

.company-name-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--main);
  white-space: nowrap;
}

.business-unit-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.business-unit-select {
  height: 34px;
  padding: 0 8px;
  background: var(--surf);
  border: 1.5px solid #FC6735;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--main);
  max-width: 240px;
}

.header-spacer {
  flex: 1 1 8px;
}

.header-actions-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Header "⋯ Više" Dropdown Menu */
.header-more-menu {
  position: relative;
  flex-shrink: 0;
}

.header-more-summary {
  list-style: none;
  user-select: none;
}

.header-more-summary::-webkit-details-marker {
  display: none;
}

.header-more-menu[open] .header-more-summary {
  border-color: #FC6735;
  background: var(--active-chip-bg);
  color: var(--main);
}

.header-more-menu:not([open]) .header-more-dropdown,
details:not([open]) > *:not(summary) {
  display: none !important;
}

.header-more-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1200;
  min-width: 310px;
  background: var(--surf);
  border: 1px solid var(--line2);
  border-top: 3px solid #FC6735;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(0, 32, 63, 0.16);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.header-more-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.stat-pill {
  background: var(--elev);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.stat-pill .stat-label {
  font-size: 12px;
  color: var(--body);
  white-space: nowrap;
}

.stat-pill strong {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.stat-pill-ok strong {
  color: var(--okt);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stat-pill-ok strong::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25C55E;
  display: inline-block;
}

.stat-pill-err strong {
  color: var(--errt);
}

.hdr-v3-pill-btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(0, 32, 63, 0.14);
  border-radius: 4px;
  background: var(--surf);
  color: var(--main);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.hdr-v3-pill-btn:hover {
  border-color: #FC6735;
  color: var(--main);
  background: var(--active-chip-bg);
}

.hdr-v3-pill-ok {
  color: var(--okt);
  background: var(--okbg);
  border-color: rgba(37, 197, 94, 0.35);
}

.hdr-v3-dot-ok {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25C55E;
  flex-shrink: 0;
}

.hdr-v3-icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--surf);
  border: 1px solid rgba(0, 32, 63, 0.14);
  border-radius: 4px;
  color: var(--main);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.hdr-v3-icon-btn:hover {
  border-color: #FC6735;
  background: var(--active-chip-bg);
  color: #E3541F;
}

/* Ensure x.Guide and x.Insight buttons in .top-header obey Light-First #FFFFFF contract */
.top-header .xguide-header-btn,
.top-header .xi-btn-capture,
.top-header .xi-btn-replay,
.top-header .xi-capture-counter {
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  background: var(--surf) !important;
  color: var(--main) !important;
  border: 1px solid rgba(0, 32, 63, 0.14) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.top-header .xguide-header-btn:hover,
.top-header .xi-btn-capture:hover,
.top-header .xi-btn-replay:hover,
.top-header .xi-capture-counter:hover {
  border-color: #FC6735 !important;
  background: var(--active-chip-bg) !important;
}

/* --------------------------------------------------------------------------
   MAIN TABS NAVIGATION (nav.tab-nav — 9 tabs fit on 1440px with 0 horizontal scroll)
   -------------------------------------------------------------------------- */
.tab-nav,
.main-tabs,
.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
  background: var(--surf);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tab-nav::-webkit-scrollbar,
.main-tabs::-webkit-scrollbar,
.main-nav::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  flex: none;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  background: transparent;
  color: var(--body);
  border: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.15s ease;
}

.tab-btn:hover {
  color: var(--main);
  background: var(--active-chip-bg);
}

.tab-btn.active,
.tab-btn[aria-current="page"] {
  color: var(--main);
  font-weight: 700;
  background: var(--active-chip-bg);
  box-shadow: inset 0 -3px 0 #FC6735;
}

.tab-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #E3541F;
  background: transparent;
}

.tab-btn.active .tab-num {
  color: #E3541F;
}

.tab-badge {
  background: var(--badge);
  color: var(--badgeTxt);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}

.tab-badge-danger {
  background: #DC2626;
  color: #FFFFFF;
}

.tab-badge-warn {
  background: var(--warnbg);
  color: var(--warnt);
  border: 1px solid rgba(217, 119, 6, 0.35);
}

/* --------------------------------------------------------------------------
   LAYOUT & CARDS (12px radius, 1px solid rgba(0,32,63,0.12))
   -------------------------------------------------------------------------- */
.main-container {
  flex: 1;
  padding: 16px 20px;
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}

.tab-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.tab-panel.active {
  display: flex;
}

.panel-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1200px) {
  .panel-grid-2 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.card-header h2,
.card-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--main);
}

.card-desc {
  font-size: 12.5px;
  color: var(--body);
  margin-top: 3px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   FORMS, INPUTS & BUTTONS (Controls radius: 4px)
   -------------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--body);
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.input-text,
.input-select,
.input-textarea {
  background: var(--surf);
  border: 1px solid var(--line2);
  color: var(--main);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-family: var(--font-sans);
  width: 100%;
  transition: border-color 0.15s ease;
}

.input-text:focus,
.input-select:focus,
.input-textarea:focus {
  outline: none;
  border-color: #FC6735;
  box-shadow: 0 0 0 1px #FC6735;
}

.input-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.input-highlight {
  background: var(--elev);
  border: 1px solid var(--line2);
  border-left: 3px solid #FC6735;
  color: var(--main);
  font-weight: 600;
}

.input-money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
  text-align: right;
  color: var(--main);
}

.input-select-sm {
  padding: 6px 9px;
  font-size: 12.5px;
  width: auto;
}

.input-select-xs {
  padding: 4px 8px;
  font-size: 12px;
  width: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn:disabled {
  background: var(--elev) !important;
  color: var(--faint) !important;
  border-color: var(--line) !important;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--btn);
  color: var(--btnTxt);
  font-weight: 700;
}

.btn-primary:hover:not(:disabled) {
  background: var(--btn-hover);
}

.btn-indigo {
  background: var(--surf);
  border: 1.5px solid var(--line2);
  color: var(--main);
}

.btn-indigo:hover:not(:disabled) {
  border-color: #FC6735;
  background: var(--active-chip-bg);
}

.btn-cyan {
  background: var(--surf);
  border: 1.5px solid #FC6735;
  color: var(--main);
}

.btn-cyan:hover:not(:disabled) {
  background: var(--active-chip-bg);
}

.btn-success {
  background: var(--btn);
  color: var(--btnTxt);
  font-weight: 700;
}

.btn-success:hover:not(:disabled) {
  background: var(--btn-hover);
}

.btn-secondary {
  background: var(--surf);
  border: 1.5px solid var(--line2);
  color: var(--main);
}

.btn-secondary:hover:not(:disabled) {
  border-color: #FC6735;
  background: var(--active-chip-bg);
}

.btn-danger-outline {
  background: transparent;
  border: 1.5px solid var(--line2);
  color: var(--main);
}

.btn-danger-outline:hover:not(:disabled) {
  border-color: var(--err);
  background: var(--errbg);
  color: var(--errt);
}

.btn-sm {
  padding: 6px 11px;
  font-size: 12.5px;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 12px;
}

.btn-lg {
  padding: 10px 18px;
  font-size: 14.5px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.btn-link:hover {
  color: #FC6735;
}

/* --------------------------------------------------------------------------
   TAB 1: SCANNER & DROPZONE
   -------------------------------------------------------------------------- */
.scan-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.btn-scan {
  justify-content: flex-start;
  text-align: left;
  padding: 11px 14px;
}

.btn-scan .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  text-align: center;
  color: #FC6735;
  flex-shrink: 0;
}

.btn-primary.btn-scan .btn-icon {
  color: #FFFFFF;
}

.btn-scan div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-scan .btn-title {
  font-size: 13px;
  font-weight: 700;
}

.btn-scan small,
.btn-scan .btn-sub {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.9;
}

.drop-zone {
  border: 2px dashed var(--line2);
  border-radius: 12px;
  background: var(--page);
  padding: 24px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.drop-zone.drag-over {
  border-color: #FC6735;
  background: var(--active-chip-bg);
}

.drop-zone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--active-chip-bg);
  color: #E3541F;
  border: 1px solid rgba(252, 103, 53, 0.35);
}

.drop-zone-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.gmail-extension-box {
  background: var(--elev);
  border: 1px solid var(--line);
  border-left: 3px solid #FC6735;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--body);
}

.gmail-ext-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--main);
}

/* --------------------------------------------------------------------------
   KPI BOXES & BADGES (4-up in Tab 01, 3x2 in Tab 03)
   -------------------------------------------------------------------------- */
.scan-stats-grid,
.kpi-grid-4,
.kpi-grid-5 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.kpi-strip-6,
.kpi-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kpi-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 1100px) {
  .scan-stats-grid,
  .kpi-grid-4,
  .kpi-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi-strip-6,
  .kpi-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kpi-box {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kpi-box-success {
  border-left: 4px solid #25C55E;
}

.kpi-box-danger {
  border-left: 4px solid #DC2626;
}

.kpi-box-warning {
  border-left: 4px solid #D97706;
}

.kpi-box-info {
  border-left: 4px solid #FC6735;
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--body);
}

.kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  font-weight: 800;
  color: var(--main);
}

.kpi-sub {
  font-size: 12px;
  color: var(--mono);
}

.kpi-card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-top: 3px solid #FC6735;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kpi-card-emerald { border-top-color: #25C55E; }
.kpi-card-rose { border-top-color: #DC2626; }
.kpi-card-blue { border-top-color: #FC6735; }
.kpi-card-purple { border-top-color: #B3400F; }
.kpi-card-amber { border-top-color: #D97706; }
.kpi-card-cyan { border-top-color: #E3541F; }

.kpi-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--body);
}

.kpi-card-main {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 800;
  color: var(--main);
}

.kpi-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--body);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.badge-success,
.badge-ok {
  background: var(--okbg);
  color: var(--okt);
  border: 1px solid rgba(37, 197, 94, 0.35);
}

.badge-danger,
.badge-err {
  background: var(--errbg);
  color: var(--errt);
  border: 1px solid rgba(220, 38, 38, 0.35);
}

.badge-warning {
  background: var(--warnbg);
  color: var(--warnt);
  border: 1px solid rgba(217, 119, 6, 0.35);
}

.badge-cyan,
.badge-info {
  background: var(--active-chip-bg);
  color: var(--ink);
  border: 1px solid rgba(252, 103, 53, 0.30);
}

.badge-neutral {
  background: var(--elev);
  color: var(--main);
  border: 1px solid var(--line);
}

.type-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   TAB 2: SPLIT-SCREEN WORKBENCH (W-02-Pregled.html contract)
   -------------------------------------------------------------------------- */
.workbench-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  flex-wrap: wrap;
}

.subview-switcher {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--elev);
  border-radius: 4px;
}

.subview-btn {
  background: transparent;
  color: var(--body);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.subview-btn.active {
  background: var(--surf);
  color: var(--main);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 #FC6735;
}

.workbench-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.split-workbench {
  display: grid;
  grid-template-columns: 280px 1fr 560px;
  gap: 12px;
  height: calc(100vh - 185px);
  min-height: 680px;
}

@media (max-width: 1440px) {
  .split-workbench {
    grid-template-columns: 245px 1fr 500px;
  }
}

.queue-sidebar {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.queue-sidebar-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.queue-item {
  background: var(--surf);
  border: 1px solid var(--line);
  border-left: 3px solid #25C55E;
  border-radius: 4px;
  padding: 9px 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.12s ease;
}

.queue-item.needs-attention {
  border-left-color: #DC2626;
  background: var(--errbg);
}

.queue-item:hover {
  border-color: #FC6735;
}

.queue-item.active {
  background: var(--active-chip-bg);
  border-color: #FC6735;
  border-left: 3px solid #FC6735;
}

.queue-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.queue-item-partner {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-item-fn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-viewer-pane {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pdf-pane-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
}

.pdf-pane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.mono-truncate {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-frame-wrapper {
  position: relative;
  flex: 1;
  background: var(--elev);
}

#pdfPreviewFrame {
  width: 100%;
  height: 100%;
  border: none;
}

.pdf-empty-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--body);
  background: var(--elev);
}

.review-form-pane {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-y: auto;
}

#reviewConfirmForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

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

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

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

.form-grid-6 {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr auto;
  gap: 8px;
}

.form-span-2 {
  grid-column: span 2;
}

/* V3 Payment Status & M:N Allocation Banner in Tab 02 */
.v3-payment-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line2);
  border-radius: 4px;
  background: var(--elev);
  flex-wrap: wrap;
}

.v3-payment-status-bar.state-paid {
  background: var(--okbg);
  border-color: #25C55E;
}

.v3-payment-status-bar.state-partial {
  background: var(--warnbg);
  border-color: #D97706;
}

.v3-payment-status-bar.state-unpaid {
  background: var(--elev);
  border-color: var(--line2);
}

.v3-tools-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.alert-box {
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.alert-danger {
  background: var(--errbg);
  border: 1.5px solid #DC2626;
  color: var(--errt);
}

/* MATH CALCULATOR BOX (v3.0 Contract) */
.math-calculator-box {
  background: var(--surf);
  border: 1.5px solid var(--line2);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.math-calculator-box.math-box-valid {
  border-color: #25C55E;
}

.math-calculator-box.math-box-invalid {
  border-color: #DC2626;
  background: var(--errbg);
}

.math-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.math-quick-btns {
  display: flex;
  gap: 4px;
}

.math-equation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: end;
  gap: 6px;
}

.math-op {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  padding-bottom: 7px;
  color: #FC6735;
  text-align: center;
}

.math-live-indicator {
  padding: 7px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.math-live-indicator.math-ok {
  background: var(--okbg);
  border: 1px solid #25C55E;
  color: var(--okt);
}

.math-live-indicator.math-err {
  background: var(--errbg);
  border: 1.5px solid #DC2626;
  color: var(--errt);
}

.checkbox-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--elev);
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  accent-color: #E3541F;
  width: 15px;
  height: 15px;
}

.confirm-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.confirm-actions-bar #btnConfirmDocument {
  flex: 1;
}

/* --------------------------------------------------------------------------
   TABLES & MATRIX
   -------------------------------------------------------------------------- */
.table-responsive {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th,
.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--main);
}

.data-table th {
  background: var(--elev);
  color: var(--mono);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line2);
}

.data-table tbody tr:hover {
  background: var(--active-chip-bg);
}

.text-right {
  text-align: right !important;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.text-center {
  text-align: center !important;
}

.empty-cell {
  text-align: center !important;
  padding: 20px !important;
  color: var(--mono);
}

/* UTILITIES 1-12 MATRIX CELLS */
.util-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 28px;
  padding: 0 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.util-paid {
  background: var(--okbg);
  color: var(--okt);
  border: 1px solid #25C55E;
}

.util-unpaid {
  background: var(--warnbg);
  color: var(--warnt);
  border: 1px solid #D97706;
}

.util-missing {
  background: var(--errbg);
  color: var(--errt);
  border: 1px solid #DC2626;
}

/* --------------------------------------------------------------------------
   TAB 3: FORENSIC RED PANEL & ASSESSMENT
   -------------------------------------------------------------------------- */
.assessment-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.forensic-red-panel {
  border: 1.5px solid #DC2626;
  border-top: 4px solid #DC2626;
  background: var(--surf);
}

.forensic-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 1200px) {
  .forensic-grid-3 {
    grid-template-columns: 1fr;
  }
}

.forensic-box {
  background: var(--page);
  border: 1px solid rgba(220, 38, 38, 0.30);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.forensic-box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
  color: var(--errt);
  border-bottom: 1px solid rgba(220, 38, 38, 0.20);
  padding-bottom: 6px;
}

.forensic-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.forensic-item {
  background: var(--errbg);
  border-left: 3px solid #DC2626;
  padding: 7px 9px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--main);
}

.empty-ok {
  color: var(--okt);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 0;
}

.accountant-questions-box {
  background: var(--elev);
  border: 1px solid var(--line2);
  border-left: 3px solid #FC6735;
  border-radius: 8px;
  padding: 12px 16px;
}

.accountant-questions-box h4 {
  color: var(--ink);
  margin-bottom: 8px;
  font-size: 13.5px;
}

.questions-list {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: var(--main);
}

.ppdv-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.inline-add-box {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* TOAST BANNER */
.toast-banner {
  position: fixed;
  bottom: 20px;
  right: 84px;
  z-index: 9999;
  padding: 12px 18px;
  border-radius: 4px;
  font-weight: 700;
  background: var(--surf);
  border: 2px solid #FC6735;
  color: var(--main);
  box-shadow: 0 8px 24px rgba(0, 32, 63, 0.22);
}

/* --------------------------------------------------------------------------
   UX-F0 EMERGENCY FIXES (B5, B7, B8, B9, B12)
   -------------------------------------------------------------------------- */
:root {
  --x-fs-min: 12px;
  --x-touch: 44px;
}

small,
kbd,
sub,
sup {
  font-size: max(12px, 1em);
}

[style*="font-size:11px"],
[style*="font-size: 11px"],
[style*="font-size:11.5px"],
[style*="font-size: 11.5px"],
[style*="font-size:10px"],
[style*="font-size: 10px"],
[style*="font-size:10.5px"],
[style*="font-size: 10.5px"] {
  font-size: 12px !important;
}

.xm3-responsive-dock,
#xm3ResponsiveBottomDock {
  display: none !important;
}

.workbench-mobile-steps {
  display: none;
}

@media (min-width: 769px) {
  .mobile-bottom-nav,
  #mobileBottomNav {
    display: none !important;
  }
}

.brand-block,
.brand {
  min-width: 0;
  flex: 0 1 auto;
}

.top-active-app-bar {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

.top-active-app-name {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.header-identity-group {
  min-width: 0;
  flex: 0 1 auto;
}

@media (max-width: 1420px) {
  .top-active-app-name {
    max-width: 140px !important;
  }
  .business-unit-select {
    max-width: 160px !important;
  }
  .company-name-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #topBtnCloseAppWindow {
    padding: 0 6px !important;
  }
}

@media (max-width: 1240px) {
  .top-active-app-name {
    max-width: 100px !important;
  }
  .company-name-label {
    max-width: 85px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .business-unit-select {
    max-width: 110px !important;
  }
  #xinsightHeaderBtn span span,
  #xguideHeaderBtn > span,
  #topBtnOpenSettings > span {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE RESPONSIVENESS (@media max-width: 768px — B5, B7, B8, B9, B12)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html,
  body {
    overflow: hidden !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  /* B9: 56px single-row mobile header without wrapping or clipping */
  header.topbar,
  .top-header {
    padding: 0 8px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .brand-subtitle,
  .header-identity-group,
  #topActiveAppWindowBar,
  #xinsightHeaderBtn,
  #xguideHeaderBtn,
  #btnOpenPdvAndIntegrity,
  #btnBentoHome > span,
  #topBtnOpenSettings > span {
    display: none !important;
  }

  #btnBentoHome,
  #topBtnOpenSettings,
  #themeToggleBtn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .brand-logo-click-wrap {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .header-actions-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .header-more-summary {
    height: 44px !important;
    min-height: 44px !important;
    min-width: 52px !important;
    padding: 0 10px !important;
  }

  /* Section 5.3: Horizontal scrollable area tabs below header (not fixed at bottom) */
  .tab-nav,
  .main-tabs,
  .main-nav {
    position: sticky !important;
    top: 0;
    bottom: auto !important;
    left: 0;
    right: 0;
    z-index: 800;
    background: var(--surf);
    border-bottom: 1px solid var(--line);
    border-top: none;
    padding: 4px 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  /* B5 & Section 5.2: Exactly ONE fixed bottom bar on mobile (#mobileBottomNav, 64px + safe-area) */
  .mobile-bottom-nav,
  #mobileBottomNav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 64px !important;
    padding: 0 4px env(safe-area-inset-bottom, 0px) !important;
    background: var(--surf) !important;
    border-top: 1px solid var(--line2) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 2px !important;
    z-index: 900 !important;
    box-shadow: 0 -2px 10px rgba(0, 32, 63, 0.08);
  }

  #mobileBottomNav .mob-nav-btn {
    height: 52px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--body);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px;
    cursor: pointer;
  }

  #mobileBottomNav .mob-nav-btn.active {
    color: var(--main);
    font-weight: 700;
    background: var(--active-chip-bg);
    box-shadow: inset 0 2px 0 #FC6735;
  }

  .main-container {
    flex: 1 1 auto !important;
    padding: 10px 10px 32px !important;
    margin-bottom: 120px !important;
    max-height: calc(100vh - 56px - 53px - 120px) !important;
    max-width: 100vw !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* B9: All interactive touch targets >= 44x44px on mobile */
  button,
  a,
  select,
  input:not([type="hidden"]),
  [role="button"],
  summary {
    min-height: 44px !important;
    min-width: 44px !important;
    font-size: max(12px, 1em);
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-shrink: 0;
  }

  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* B8: Mobile Workbench 3-Step Switcher (1 Red / 2 PDF / 3 Forma) + Sticky Math Lock */
  .workbench-mobile-steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    margin-bottom: 10px;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: 8px;
    position: sticky;
    top: 52px;
    z-index: 750;
  }

  .wb-mob-step-btn {
    min-height: 44px !important;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--main);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }

  .wb-mob-step-btn.active {
    background: var(--active-chip-bg);
    border-color: #FC6735;
    color: #B3400F;
  }

  #subviewSplit[data-mob-step="1"] .pdf-viewer-pane,
  #subviewSplit[data-mob-step="1"] .review-form-pane {
    display: none !important;
  }

  #subviewSplit[data-mob-step="2"] .queue-sidebar,
  #subviewSplit[data-mob-step="2"] .review-form-pane {
    display: none !important;
  }

  #subviewSplit[data-mob-step="3"] .queue-sidebar,
  #subviewSplit[data-mob-step="3"] .pdf-viewer-pane {
    display: none !important;
  }

  #subviewSplit .queue-list {
    max-height: calc(100dvh - 280px);
    overflow-y: auto;
  }

  #subviewSplit .pdf-frame-wrapper {
    height: calc(100dvh - 280px);
    min-height: 320px;
  }

  #subviewSplit .confirm-actions-bar {
    position: sticky;
    bottom: 64px;
    z-index: 760;
    background: var(--surf);
    padding: 10px 0;
    border-top: 1px solid var(--line2);
  }

  /* B7: Constrain all ModalBackdrops & dialogs to 100vw on mobile */
  [id$="ModalBackdrop"],
  [id$="ModalOverlay"],
  [id$="Modal"],
  [class*="modal-backdrop"],
  .v3-modal-backdrop,
  .x-v3-modal-backdrop,
  .xvob-backdrop,
  #xguideHubBackdrop {
    padding: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  [id$="ModalBackdrop"] > div,
  [id$="ModalOverlay"] > div,
  [role="dialog"],
  .x-pgg-modal,
  .f2a-modal-dialog,
  .fop-modal-dialog,
  .xwb-modal,
  .xsc-modal,
  .xpm-modal,
  .xre-modal-dialog,
  .xmkt-modal-dialog,
  .v3-prr-modal-window,
  .v3-hrf-modal-window,
  .v3-bd-modal-window,
  .xlcs-modal,
  .xvob-modal,
  .xsir-modal-dialog,
  .xguide-hub-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  [role="dialog"] [style*="grid-template-columns"],
  .x-pgg-kpi-grid,
  .xre-kpi-grid,
  .xre-split-grid,
  .xmkt-split-grid,
  .ppdv-grid,
  .scan-actions-grid,
  .scan-stats-grid,
  .kpi-grid-4,
  .kpi-grid-5,
  .kpi-strip-6,
  .kpi-grid-6,
  .kpi-grid-2x2,
  .form-grid-2,
  .form-grid-3,
  .form-grid-4,
  .form-grid-6,
  .split-workbench {
    grid-template-columns: 1fr !important;
    height: auto;
  }
}

/* PRINT MEDIA */
@media print {
  body {
    background: #fff;
    color: #000;
  }
  .no-print {
    display: none !important;
  }
  .card,
  .kpi-card,
  .forensic-box {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #999 !important;
    break-inside: avoid;
  }
}