/* Right Horizons PMS Distributor Application - Official Corporate Branding System */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Primitive color ramps from RH Design Tokens */
  --color-gold-50: #FCF9F3;
  --color-gold-100: #FEF3DD;
  --color-gold-200: #EFE2C7;
  --color-gold-300: #FAC55D;
  --color-gold-400: #F8AC19;
  --color-gold-500: #F7A608;
  --color-gold-600: #D08B06;
  --color-gold-700: #A87105;
  --color-gold-800: #815604;
  --color-gold-900: #553A07;

  --color-green-50: #F4FAF6;
  --color-green-100: #DDECE2;
  --color-green-200: #CDE9D7;
  --color-green-300: #99EAB5;
  --color-green-400: #1A803D;
  --color-green-500: #2BD465;
  --color-green-600: #24B255;
  --color-green-700: #1D9045;
  --color-green-800: #166E35;
  --color-green-900: #134925;

  --color-burgundy-50: #FAF5F5;
  --color-burgundy-100: #EDDFDE;
  --color-burgundy-200: #E8D0CF;
  --color-burgundy-300: #E5A29F;
  --color-burgundy-400: #842924;
  --color-burgundy-500: #C83E37;
  --color-burgundy-600: #A8342E;
  --color-burgundy-700: #882A25;
  --color-burgundy-800: #68201C;
  --color-burgundy-900: #461916;

  --color-brown-50: #FAF7F5;
  --color-brown-100: #F0E8E0;
  --color-brown-200: #E7DCCF;
  --color-brown-300: #E4C2A0;
  --color-brown-400: #9D662D;
  --color-brown-500: #C68139;
  --color-brown-600: #A66C30;
  --color-brown-700: #875827;
  --color-brown-800: #67431E;
  --color-brown-900: #452E17;

  --color-grey-50: #F7F7F8;
  --color-grey-100: #F5F5F5;
  --color-grey-200: #CDCECE;
  --color-grey-300: #7D7F81;
  --color-grey-400: #383B3D;
  --color-grey-500: #7A8185;
  --color-grey-600: #676C70;
  --color-grey-700: #53575A;
  --color-grey-800: #3F4345;
  --color-grey-900: #2C2E30;

  /* Semantic color mappings */
  --color-primary-fill: var(--color-gold-400);
  --color-primary-fill-hover: var(--color-gold-500);
  --color-primary-fill-active: var(--color-gold-600);
  --color-primary-fill-disabled: var(--color-gold-200);
  --color-primary-text-on-fill: var(--color-grey-400); /* Dark grey text on gold per WCAG audit */
  --color-primary-border: var(--color-gold-400);

  --color-secondary-fill: var(--color-brown-400);
  --color-secondary-text-on-fill: #FFFFFF;

  --color-success-fill: var(--color-green-400);
  --color-success-text-on-fill: #FFFFFF;
  --color-success-text: var(--color-green-400);

  --color-danger-fill: var(--color-burgundy-400);
  --color-danger-text-on-fill: #FFFFFF;
  --color-danger-text: var(--color-burgundy-400);

  --color-text-primary: var(--color-grey-400);
  --color-text-secondary: var(--color-grey-600);
  --color-text-disabled: var(--color-grey-300);
  --color-text-inverse: #FFFFFF;

  --color-border-default: var(--color-grey-300);
  --color-border-subtle: var(--color-grey-200);

  --color-surface-base: #FFFFFF;
  --color-surface-subtle: var(--color-grey-100);
  --color-surface-brand-tint: var(--color-gold-100);

  /* Typography */
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-main: 'Poppins', Calibri, Arial, sans-serif;
  --font-body-family: 'Poppins', Calibri, Arial, sans-serif;
  --font-button-family: 'Poppins', Calibri, Arial, sans-serif;
  --font-caption-family: 'Poppins', Calibri, Arial, sans-serif;
  --font-eyebrow-family: 'Poppins', Calibri, Arial, sans-serif;

  /* Spacing Scale (4px base) */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-level1: 0 1px 2px rgba(56,59,61,0.08), 0 1px 1px rgba(56,59,61,0.06);
  --shadow-level2: 0 4px 8px rgba(56,59,61,0.12), 0 2px 4px rgba(56,59,61,0.08);
  --shadow-level3: 0 12px 24px rgba(56,59,61,0.16), 0 4px 8px rgba(56,59,61,0.10);

  /* Motion & Focus */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --focus-ring-color: var(--color-gold-400);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --disabled-opacity: 0.5;

  /* Legacy Compatibility Mapping */
  --accent-blue: var(--color-brown-400);
  --accent-blue-light: var(--color-brown-100);
  --primary-blue: var(--color-brown-700);
  --block3-bg: var(--color-gold-50);
}

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

body {
  font-family: var(--font-main);
  background-color: var(--color-surface-subtle);
  color: var(--color-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden;
  font-size: 0.84rem;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}



/* ---------------------------------------------------------------
   LEFT SIDEBAR NAVIGATION (Right Horizons Executive Theme)
--------------------------------------------------------------- */
.app-wrapper {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.app-sidebar {
  width: 230px;
  height: 100vh;
  max-height: 100vh;
  background: var(--color-grey-900);
  color: var(--color-text-inverse);
  border-right: 2px solid var(--color-grey-800);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-level2);
  z-index: 20;
  flex-shrink: 0;
  min-height: 0;
  overflow: hidden;
}

.sidebar-header {
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-grey-800);
  flex-shrink: 0;
}

.sidebar-nav {
  padding: 14px 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--color-burgundy-400) var(--color-grey-800);
}

.sidebar-nav::-webkit-scrollbar {
  width: 8px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: var(--color-grey-800);
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--color-burgundy-400);
  border-radius: 4px;
}

.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--color-grey-800);
  background: var(--color-grey-900);
  flex-shrink: 0;
}


.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--color-burgundy-400);
  border-radius: 3px;
}

.nav-section-label {
  font-family: var(--font-eyebrow-family);
  font-size: 0.68rem; font-weight: 600;
  color: var(--color-gold-400);
  text-transform: uppercase; letter-spacing: 0.06em; padding: 0 8px 8px 8px;
}

.sidebar-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: var(--radius-md);
  color: var(--color-grey-200); font-size: 0.82rem; font-weight: 500;
  text-decoration: none; margin-bottom: 4px; cursor: pointer;
  transition: all var(--motion-fast) var(--ease-standard);
  border-left: 3px solid transparent;
}

.sidebar-link-content { display: flex; align-items: center; gap: 10px; }
.sidebar-link i { color: var(--color-gold-300); }
.sidebar-link:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.sidebar-link.active {
  background: var(--color-burgundy-900);
  color: var(--color-gold-100);
  border-left-color: var(--color-gold-400);
  font-weight: 600;
}
.sidebar-link.active i { color: var(--color-gold-400); }

.sidebar-count-badge {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-grey-200);
  font-size: 0.68rem; padding: 2px 7px; border-radius: var(--radius-pill); font-weight: 600;
}
.sidebar-link.active .sidebar-count-badge {
  background: var(--color-gold-400);
  color: var(--color-grey-900);
}

.sidebar-divider {
  border: none; border-top: 1px solid var(--color-grey-800); margin: 12px 4px;
}

.sidebar-accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: var(--radius-md);
  color: var(--color-gold-200); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all var(--motion-fast) var(--ease-standard);
}
.sidebar-accordion-header:hover { background: rgba(255, 255, 255, 0.08); }

.sidebar-accordion-body { display: none; padding-left: 12px; margin-top: 4px; }
.sidebar-accordion-body.active { display: block; }

.master-sublink {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--color-grey-300); font-size: 0.76rem; font-weight: 400;
  cursor: pointer; transition: all var(--motion-fast) var(--ease-standard); margin-bottom: 2px;
}
.master-sublink:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); }
.master-sublink.active {
  color: var(--color-gold-400); font-weight: 600; background: rgba(248, 172, 25, 0.12);
}

.sidebar-footer {
  padding: 12px 10px; border-top: 1px solid var(--color-grey-800); background: rgba(0, 0, 0, 0.25);
}
.sidebar-persona-switcher label {
  font-size: 0.65rem; font-weight: 600; color: var(--color-gold-400); text-transform: uppercase; letter-spacing: 0.05em;
}
.sidebar-persona-switcher select {
  width: 100%; padding: 6px 8px; border-radius: var(--radius-md);
  border: 1px solid var(--color-grey-700); background: var(--color-grey-800);
  color: var(--color-grey-100); font-size: 0.76rem; font-weight: 500; outline: none; margin-top: 4px;
}

/* ---------------------------------------------------------------
   TOP WORKSPACE BAR
--------------------------------------------------------------- */
.app-main-content { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--color-gold-50); }

.top-workspace-bar {
  background: var(--color-surface-base);
  border-bottom: 2px solid var(--color-border-subtle);
  padding: 12px 24px; display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow-level1); z-index: 5;
}

.workspace-title-group h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-grey-900);
}
.workspace-title-group p {
  font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 2px;
}

.workspace-search-bar { position: relative; width: 260px; }
.workspace-search-bar input {
  width: 100%; padding: 7px 12px 7px 32px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default); background: var(--color-surface-base);
  color: var(--color-text-primary); font-size: 0.8rem; font-family: var(--font-main);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.workspace-search-bar input:focus { border-color: var(--color-primary-fill); outline: none; }
.workspace-search-bar .search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-secondary); font-size: 0.82rem;
}

.module-viewport { flex: 1; overflow: hidden; display: none; }
.module-viewport.active { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------
   MASTER-DETAIL 2-COLUMN LAYOUT
--------------------------------------------------------------- */
.master-detail-container { display: flex; width: 100%; height: 100%; overflow: hidden; }

.master-list-panel {
  width: 300px;
  background: var(--color-surface-subtle);
  border-right: 1px solid var(--color-border-default);
  display: flex; flex-direction: column; flex-shrink: 0;
}

.master-panel-header {
  padding: 12px 14px; border-bottom: 1px solid var(--color-border-default);
  background: var(--color-surface-base); display: flex; flex-direction: column; gap: 8px;
}

.master-panel-header h3 {
  font-family: var(--font-eyebrow-family);
  font-size: 0.72rem; font-weight: 600;
  color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em;
}

.master-filter-row { display: flex; gap: 6px; align-items: center; }
.master-filter-row input, .master-filter-row select {
  padding: 6px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default); background: var(--color-surface-base);
  color: var(--color-text-primary); font-size: 0.76rem; outline: none;
}
.master-filter-row input { flex: 1; min-width: 0; }
.master-filter-row select { max-width: 130px; }

.master-items-list { flex: 1; overflow-y: auto; padding: 12px; }

/* MASTER-DETAIL WORKSPACE RIGHT PANEL & CARDS */
.detail-workspace-panel,
.evaluation-workspace-panel {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto !important;
  padding: 16px;
}

.master-item-card {
  cursor: pointer;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-base);
  transition: all var(--motion-fast) var(--ease-standard);
}
.master-item-card:hover {
  border-color: var(--color-gold-400);
  box-shadow: var(--shadow-level1);
}
.master-item-card.selected, .master-item-card.active {
  background: var(--color-burgundy-50);
  border-color: var(--color-burgundy-400);
}

/* EXPLORER ITEM CARDS */
.product-item-card {
  padding: 12px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default); background: var(--color-surface-base);
  margin-bottom: 10px; cursor: pointer; transition: all var(--motion-fast) var(--ease-standard);
  box-shadow: var(--shadow-level1); position: relative;
}
.product-item-card:hover {
  border-color: var(--color-gold-400); box-shadow: var(--shadow-level2);
}
.product-item-card.active {
  background: var(--color-surface-brand-tint);
  border: 2px solid var(--color-gold-400);
  box-shadow: var(--shadow-level2);
}

.item-header-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.item-title { font-weight: 600; font-size: 0.84rem; color: var(--color-text-primary); }
.item-code { font-size: 0.72rem; font-weight: 700; color: var(--color-brown-400); }
.item-sub-meta { font-size: 0.74rem; display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--color-surface-subtle); color: var(--color-text-primary);
  border: 1px solid var(--color-border-default); font-size: 0.74rem;
  cursor: pointer; transition: all var(--motion-fast) var(--ease-standard); flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--color-gold-400); color: var(--color-grey-900); border-color: var(--color-gold-400);
}

.master-panel-footer {
  padding: 12px 14px; border-top: 1px solid var(--color-border-default); background: var(--color-surface-base);
}

.rh-tabs { display: flex; gap: var(--space-3); border-bottom: 2px solid var(--color-border-subtle); }
.rh-tab {
  padding: 8px 14px;
  color: var(--color-text-secondary);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 0.8rem;
  transition: all var(--motion-fast) var(--ease-standard);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.rh-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-subtle);
}
.rh-tab.active, .rh-tab--active {
  color: var(--color-grey-900);
  font-weight: 600;
  border-bottom-color: var(--color-gold-400);
  background: var(--color-surface-brand-tint);
}

/* ---------------------------------------------------------------
   DETAIL 2x2 GRID VIEW & CARDS
--------------------------------------------------------------- */
.grid-view-container {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; height: 100%;
}

.grid-panel-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-top: 4px solid var(--color-burgundy-400);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-level1);
  display: flex; flex-direction: column; overflow: hidden;
}

.grid-panel-header {
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 400; margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center; color: var(--color-grey-900);
  border-bottom: 1px solid var(--color-border-subtle); padding-bottom: 10px;
}
.grid-panel-header span i { color: var(--color-burgundy-400); margin-right: 6px; }

.grid-panel-body { flex: 1; overflow-y: auto; }

/* DATA TABLES */
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.8rem; }
.data-table th {
  background: var(--color-surface-subtle); color: var(--color-text-secondary);
  font-family: var(--font-eyebrow-family); font-weight: 600; padding: 9px 10px;
  border-bottom: 1px solid var(--color-border-default); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.data-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary); vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--color-surface-subtle); }

/* ---------------------------------------------------------------
   RH BRAND BUTTON SYSTEM
--------------------------------------------------------------- */
.btn, .rh-button {
  font-family: var(--font-button-family);
  font-size: 0.82rem; font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 38px;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              opacity var(--motion-fast) var(--ease-standard);
}

/* Primary Button (Gold-400 with dark grey text for WCAG compliance) */
.btn-primary, .rh-button--primary {
  background: var(--color-primary-fill);
  color: var(--color-primary-text-on-fill);
  border-color: var(--color-primary-border);
}
.btn-primary:hover, .rh-button--primary:hover {
  background: var(--color-primary-fill-hover);
}
.btn-primary:active, .rh-button--primary:active {
  background: var(--color-primary-fill-active);
}

/* Secondary Button (Brown-400 outline) */
.btn-secondary, .rh-button--secondary {
  background: transparent;
  color: var(--color-secondary-fill);
  border-color: var(--color-secondary-fill);
}
.btn-secondary:hover, .rh-button--secondary:hover {
  background: var(--color-surface-brand-tint);
}

/* Danger Button (Burgundy-400 fill) */
.btn-danger, .rh-button--danger {
  background: var(--color-danger-fill);
  color: var(--color-danger-text-on-fill);
}
.btn-danger:hover, .rh-button--danger:hover {
  filter: brightness(0.9);
}

/* Ghost Button */
.btn-ghost, .rh-button--ghost {
  background: transparent;
  color: var(--color-text-primary);
}
.btn-ghost:hover, .rh-button--ghost:hover {
  background: var(--color-surface-subtle);
}

.btn-sm { padding: 4px 10px; font-size: 0.75rem; min-height: 32px; }

.btn:disabled, .rh-button:disabled {
  opacity: var(--disabled-opacity); cursor: not-allowed;
}

/* ---------------------------------------------------------------
   RH BRAND BADGES & TAGS
--------------------------------------------------------------- */
.badge, .rh-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-eyebrow-family);
  font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: var(--radius-pill);
}

.badge-success, .rh-badge--success {
  background: var(--color-green-100); color: var(--color-green-800); border: 1px solid var(--color-green-300);
}
.badge-warning, .rh-badge--warning {
  background: var(--color-gold-100); color: var(--color-gold-900); border: 1px solid var(--color-gold-300);
}
.badge-danger, .rh-badge--danger {
  background: var(--color-burgundy-100); color: var(--color-burgundy-800); border: 1px solid var(--color-burgundy-300);
}
.badge-info, .rh-badge--brand {
  background: var(--color-surface-brand-tint); color: var(--color-brown-700); border: 1px solid var(--color-gold-300);
}
.badge-neutral, .rh-badge--neutral {
  background: var(--color-surface-subtle); color: var(--color-text-primary); border: 1px solid var(--color-border-subtle);
}

.distributor-code {
  font-size: 0.72rem; font-weight: 700; color: var(--color-brown-700);
  background: var(--color-surface-brand-tint); padding: 2px 8px;
  border-radius: var(--radius-sm); border: 1px solid var(--color-gold-200);
}

/* ---------------------------------------------------------------
   FORM FIELDS & MODALS
--------------------------------------------------------------- */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(44, 46, 48, 0.55); backdrop-filter: blur(3px);
  z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.active { display: flex; }

.modal-card, .rh-modal {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-top: 5px solid var(--color-gold-400);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 620px;
  box-shadow: var(--shadow-level3); display: flex; flex-direction: column; overflow: hidden;
}

.modal-header {
  padding: 16px 24px; border-bottom: 1px solid var(--color-border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-surface-subtle);
}
.modal-header h3 {
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 400; color: var(--color-grey-900);
}
.modal-close-btn {
  background: none; border: none; font-size: 1.4rem; color: var(--color-text-secondary); cursor: pointer;
}
.modal-close-btn:hover { color: var(--color-danger-fill); }

.modal-body { padding: 24px; overflow-y: auto; max-height: 75vh; }

.modal-footer {
  padding: 14px 24px; border-top: 1px solid var(--color-border-subtle);
  display: flex; justify-content: flex-end; gap: 12px; background: var(--color-surface-subtle);
}

.form-group, .rh-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.form-group label, .rh-label {
  font-family: var(--font-caption-family); font-size: 0.78rem; font-weight: 600; color: var(--color-text-primary);
}
.form-group input, .form-group select, .form-group textarea, .rh-input, .rh-textarea {
  width: 100%; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default); background: var(--color-surface-base);
  color: var(--color-text-primary); font-size: 0.82rem; font-family: var(--font-main);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .rh-input:focus, .rh-textarea:focus {
  border-color: var(--color-gold-400); outline: none;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.rh-alert {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-gold-400);
  background: var(--color-surface-brand-tint);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-primary);
  font-size: 0.78rem;
}
.rh-alert--warning {
  border-left-color: var(--color-burgundy-400);
  background: rgba(132, 41, 36, 0.08);
}

/* ===============================================================
   CHROME BROWSER STYLE TAB BAR (NO SCROLLBAR)
   =============================================================== */
.chrome-tabs-container {
  background: var(--color-surface-subtle);
  padding: 8px 8px 0 8px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid var(--color-border-default);
  border-bottom: 2px solid var(--color-gold-400);
  overflow: hidden;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 14px;
}

.chrome-tabs-bar {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
}

.chrome-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-border-subtle);
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all var(--motion-fast) var(--ease-standard);
  user-select: none;
  text-align: center;
  white-space: nowrap;
}

.chrome-tab:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-text-primary);
}

.chrome-tab.active {
  background: var(--color-surface-base);
  color: var(--color-brown-700);
  font-weight: 600;
  border-color: var(--color-gold-400);
  border-bottom: 2px solid var(--color-surface-base);
  margin-bottom: -2px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

.chrome-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-gold-400);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.chrome-tab i {
  font-size: 0.8rem;
  color: var(--color-burgundy-400);
}

.chrome-tab.active i {
  color: var(--color-gold-400);
}

/* NO HORIZONTAL SCROLL IN TAB DETAILS CONTAINER */
#dist2-tab-content-container {
  width: 100%;
  overflow-x: hidden;
}

#dist2-tab-content-container .data-table {
  width: 100%;
  table-layout: auto;
  font-size: 0.78rem;
}

#dist2-tab-content-container .data-table th,
#dist2-tab-content-container .data-table td {
  padding: 8px 10px;
  white-space: normal;
  word-wrap: break-word;
}

/* ============================================================================
   ACCESS CONTROL & PERMISSIONS STYLES
   ============================================================================ */

/* Top Header User Badge */
.header-user-badge:hover {
  border-color: var(--color-gold-400) !important;
  background: var(--color-surface-brand-tint) !important;
}

/* Sidebar Lock State */
.sidebar-link.access-restricted {
  opacity: 0.55;
  cursor: not-allowed;
}

.sidebar-link.access-restricted:hover {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
}

.sidebar-lock-icon {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--color-burgundy-400);
}

/* Access Role Badges */
.badge-super-user {
  background: var(--color-burgundy-700);
  color: #ffffff;
}

.badge-admin-user {
  background: var(--color-gold-500);
  color: #1a1a1a;
}

.badge-standard-user {
  background: #2b5c8f;
  color: #ffffff;
}

/* Toggle Switch Widget */
.rh-toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.rh-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.rh-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 20px;
}

.rh-toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .rh-toggle-slider {
  background-color: var(--color-burgundy-600);
}

input:checked + .rh-toggle-slider:before {
  transform: translateX(18px);
}

/* Restricted Action Buttons */
.btn-restricted, button[disabled].btn-restricted {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(1);
}

/* ===============================================================
   SECTION 16: BROKERAGE & COMMERCIAL TRACKER STYLES
=============================================================== */

/* Status Badges for Brokerage Module */
.badge-deviation {
  background: var(--color-gold-100);
  color: var(--color-gold-800);
  border: 1px solid var(--color-gold-400);
}

.badge-reconciled {
  background: var(--color-green-50);
  color: var(--color-green-800);
  border: 1px solid var(--color-green-400);
}

.badge-pending-invoice {
  background: #FFF7ED;
  color: #C2410C;
  border: 1px solid #FDBA74;
}

.badge-pending-audit {
  background: #FEFCE8;
  color: #A16207;
  border: 1px solid #FDE047;
}

.badge-flagged {
  background: var(--color-burgundy-50);
  color: var(--color-burgundy-700);
  border: 1px solid var(--color-burgundy-300);
}

/* Financial Table Alignments */
.data-table td.num-cell, .data-table th.num-cell {
  text-align: right;
  font-family: 'SF Mono', Consolas, Monaco, monospace;
}

.brokerage-kpi-grid .kpi-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.brokerage-kpi-grid .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-level2);
}

/* ============================================================================
   V2.1 APPLICATION SHELL - MY WORK
   ============================================================================ */

.nav-section-label-spaced { margin-top: 18px; }

/* Legacy views remain in the prototype for reference while V2 workspaces are
   introduced incrementally through the consolidated navigation. */
.sidebar-link[data-module="products"],
.sidebar-link[data-module="distributors"] { display: none; }

.my-work-page {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 42px;
  background: linear-gradient(180deg, var(--color-surface-brand-tint) 0, var(--color-surface-page) 260px);
}

.my-work-welcome {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
  max-width: 1360px;
  margin: 0 auto 24px;
}

.my-work-welcome h1 { margin: 3px 0 7px; font-size: 1.8rem; color: var(--color-text-primary); }
.my-work-welcome > div > p:not(.eyebrow) { margin: 0; color: var(--color-text-secondary); }
.eyebrow { color: var(--color-burgundy-600); font-size: 0.67rem; font-weight: 800; letter-spacing: .09em; margin: 0 0 6px; }
.my-work-date { flex: none; margin-top: 9px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-base); padding: 9px 12px; font-size: .78rem; color: var(--color-text-secondary); box-shadow: var(--shadow-level1); }
.my-work-date i { color: var(--color-burgundy-500); margin-right: 5px; }

.my-work-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1360px; margin: 0 auto 20px; }
.work-kpi { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 15px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-base); box-shadow: var(--shadow-level1); }
.work-kpi-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; font-size: .92rem; }
.work-kpi strong, .work-kpi span:not(.work-kpi-icon) { display: block; }
.work-kpi strong { font-size: 1.35rem; line-height: 1.1; color: var(--color-text-primary); }
.work-kpi div > span { margin-top: 3px; color: var(--color-text-secondary); font-size: .72rem; }
.work-kpi-burgundy .work-kpi-icon { color: var(--color-burgundy-700); background: var(--color-burgundy-50); }
.work-kpi-amber .work-kpi-icon { color: var(--color-gold-800); background: var(--color-gold-100); }
.work-kpi-blue .work-kpi-icon { color: #1f5c98; background: #e9f3ff; }
.work-kpi-green .work-kpi-icon { color: #1b7044; background: var(--color-green-50); }

.my-work-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .85fr); gap: 18px; max-width: 1360px; margin: 0 auto; }
.work-card { min-width: 0; padding: 18px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-base); box-shadow: var(--shadow-level1); }
.work-card-wide { grid-column: 1 / -1; }
.work-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--color-border-subtle); }
.work-card-header h2 { margin: 0; font-size: 1rem; color: var(--color-text-primary); }
.btn-quiet { background: transparent; color: var(--color-burgundy-700); border: 1px solid transparent; }
.btn-quiet:hover { background: var(--color-surface-brand-tint); border-color: var(--color-burgundy-200); }

.work-queue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding-top: 13px; }
.work-queue-item, .pipeline-row, .touchpoint-row, .activity-row { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; }
.work-queue-item { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto 12px; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-page); transition: border-color .15s, transform .15s, box-shadow .15s; }
.work-queue-item:hover { border-color: var(--color-gold-400); transform: translateY(-1px); box-shadow: var(--shadow-level1); }
.work-queue-icon { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-burgundy-600); background: var(--color-burgundy-50); font-size: .75rem; }
.work-queue-copy, .work-queue-meta, .touchpoint-row > span:last-child, .activity-row > span:nth-child(2) { min-width: 0; }
.work-queue-copy strong, .touchpoint-row strong, .activity-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--color-text-primary); }
.work-queue-copy small, .work-queue-meta small, .touchpoint-row small, .activity-row small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); font-size: .68rem; }
.work-queue-meta { text-align: right; }
.work-queue-meta .badge { display: inline-block; font-size: .61rem; padding: 3px 5px; }
.work-queue-item > i, .pipeline-row > i { color: var(--color-text-secondary); font-size: .65rem; }

.pipeline-list, .touchpoint-list, .activity-list { padding-top: 9px; }
.pipeline-row { display: grid; grid-template-columns: 10px 1fr auto 10px; align-items: center; gap: 9px; padding: 10px 3px; border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); font-size: .78rem; }
.pipeline-row:last-child, .touchpoint-row:last-child, .activity-row:last-child { border-bottom: 0; }
.pipeline-row:hover span:nth-child(2) { color: var(--color-burgundy-700); }
.pipeline-row strong { color: var(--color-text-primary); }
.pipeline-dot { width: 8px; height: 8px; border-radius: 50%; }.pipeline-prospecting { background: #7997b8; }.pipeline-evaluation { background: var(--color-gold-500); }.pipeline-approved { background: #3b9b64; }.pipeline-activation { background: var(--color-burgundy-600); }
.touchpoint-row { display: grid; grid-template-columns: 43px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 3px; border-bottom: 1px solid var(--color-border-subtle); background: transparent; }
.touchpoint-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; min-height: 37px; border-radius: var(--radius-sm); color: var(--color-burgundy-700); background: var(--color-surface-brand-tint); }
.touchpoint-date strong { font-size: .62rem; }.touchpoint-date small { margin: 1px 0 0; font-size: .55rem; }
.activity-row { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 11px 3px; border-bottom: 1px solid var(--color-border-subtle); background: transparent; }
.activity-marker { width: 7px; height: 7px; border-radius: 50%; background: var(--color-burgundy-500); }.activity-row .badge { font-size: .61rem; white-space: nowrap; }
.empty-work-state { padding: 20px; text-align: center; color: var(--color-text-secondary); font-size: .8rem; }

@media (max-width: 980px) { .my-work-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.my-work-grid { grid-template-columns: 1fr; }.work-card-wide { grid-column: auto; } }
@media (max-width: 620px) { .my-work-page { padding: 18px; }.my-work-welcome { flex-direction: column; gap: 12px; }.my-work-date { margin-top: 0; }.my-work-kpis, .work-queue { grid-template-columns: 1fr; }.work-queue-item { grid-template-columns: 31px minmax(0, 1fr) 12px; }.work-queue-meta { display: none; } }

/* ============================================================================
   V2.2 DISTRIBUTOR 360
   ============================================================================ */
.dist360-header { margin-bottom: 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-base); box-shadow: var(--shadow-level1); }
.dist360-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px; }
.dist360-breadcrumb { color: var(--color-burgundy-600); font-size: .66rem; font-weight: 800; letter-spacing: .09em; }
.dist360-title-row { display: flex; gap: 9px; align-items: center; margin: 4px 0 6px; }.dist360-title-row h1 { margin: 0; color: var(--color-text-primary); font-size: 1.35rem; }
.dist360-meta { display: flex; gap: 0; flex-wrap: wrap; color: var(--color-text-secondary); font-size: .75rem; }.dist360-meta span { padding: 0 9px; border-right: 1px solid var(--color-border-subtle); }.dist360-meta span:first-child { padding-left: 0; }.dist360-meta span:last-child { border-right: 0; }
.dist360-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }.dist360-actions .btn { white-space: nowrap; }
.dist360-status-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border-subtle); background: var(--color-surface-page); }.dist360-status-strip > div { display: flex; flex-direction: column; gap: 4px; padding: 11px 20px; border-right: 1px solid var(--color-border-subtle); }.dist360-status-strip > div:last-child { border-right: 0; }.dist360-status-strip span { color: var(--color-text-secondary); font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.dist360-status-strip strong { color: var(--color-text-primary); font-size: .78rem; }.dist360-status-strip .badge { align-self: flex-start; font-size: .66rem; }

.dist360-overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); gap: 15px; }.dist360-panel { min-width: 0; padding: 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-base); box-shadow: var(--shadow-level1); }.dist360-panel-wide { grid-column: 1 / -1; }.dist360-panel-header, .dist360-tab-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--color-border-subtle); }.dist360-panel-header h2, .dist360-tab-intro h2 { margin: 0; color: var(--color-text-primary); font-size: 1rem; }.dist360-tab-intro { margin: 0 0 14px; padding: 3px 0 14px; }.dist360-tab-intro p:not(.eyebrow) { margin: 5px 0 0; color: var(--color-text-secondary); font-size: .78rem; }
.relationship-cards { padding-top: 11px; }.relationship-card, .evaluation-workspace-card { display: grid; width: 100%; grid-template-columns: minmax(180px, 1.7fr) minmax(120px, .8fr) minmax(120px, .8fr) 12px; align-items: center; gap: 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-page); padding: 11px; text-align: left; font: inherit; cursor: pointer; }.relationship-card + .relationship-card { margin-top: 8px; }.relationship-card:hover, .evaluation-workspace-card:hover { border-color: var(--color-gold-400); }.relationship-card strong, .evaluation-workspace-card strong { display: block; color: var(--color-text-primary); font-size: .78rem; }.relationship-card small, .evaluation-workspace-card small { display: block; margin-bottom: 3px; color: var(--color-text-secondary); font-size: .65rem; }.relationship-card > i, .evaluation-workspace-card > i { color: var(--color-text-secondary); font-size: .65rem; }
.next-action-card { display: flex; gap: 10px; margin: 13px 0; align-items: flex-start; }.next-action-icon { display: inline-flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-burgundy-700); background: var(--color-burgundy-50); font-size: .75rem; }.next-action-card strong { color: var(--color-text-primary); font-size: .8rem; }.next-action-card p { margin: 4px 0 0; color: var(--color-text-secondary); font-size: .72rem; line-height: 1.45; }
.key-people-list { padding-top: 8px; }.key-people-list button { display: grid; grid-template-columns: 29px minmax(0, 1fr) 12px; align-items: center; gap: 8px; width: 100%; padding: 8px 1px; border: 0; border-bottom: 1px solid var(--color-border-subtle); background: transparent; text-align: left; font: inherit; cursor: pointer; }.key-people-list button:last-child { border-bottom: 0; }.key-people-list strong { display: block; color: var(--color-text-primary); font-size: .76rem; }.key-people-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); font-size: .65rem; }.key-people-list i { color: var(--color-burgundy-500); font-size: .66rem; }.person-initials { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--color-burgundy-700); background: var(--color-surface-brand-tint); font-size: .64rem; font-weight: 800; }
.dist360-timeline { padding-top: 8px; }.dist360-timeline button, .engagement-timeline-item { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--color-border-subtle); background: transparent; text-align: left; font: inherit; cursor: pointer; }.dist360-timeline button:last-child { border-bottom: 0; }.timeline-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-burgundy-500); }.dist360-timeline strong, .engagement-timeline-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); font-size: .76rem; }.dist360-timeline small, .engagement-timeline-item small { display: block; margin-top: 3px; color: var(--color-text-secondary); font-size: .65rem; }.dist360-timeline .badge, .engagement-timeline-item .badge { font-size: .61rem; white-space: nowrap; }
.dist360-alert { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--color-gold-400); border-radius: var(--radius-md); background: var(--color-gold-100); color: var(--color-text-primary); font-size: .75rem; }.dist360-alert > i { color: var(--color-gold-800); }.dist360-alert .btn { margin-left: auto; }
.engagement-timeline-list { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-base); overflow: hidden; }.engagement-timeline-item { grid-template-columns: 68px 9px minmax(0, 1fr) auto; gap: 11px; padding: 13px 15px; }.engagement-timeline-item:last-child { border-bottom: 0; }.engagement-timeline-item:hover { background: var(--color-surface-page); }.engagement-date { color: var(--color-text-secondary); font-size: .68rem; font-weight: 700; }.engagement-timeline-item em { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); font-size: .68rem; font-style: normal; }
.document-context-list, .evaluation-workspace-list { display: grid; gap: 9px; }.document-context-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 10px; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-base); text-align: left; font: inherit; cursor: pointer; }.document-context-item:hover { border-color: var(--color-gold-400); }.document-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--color-burgundy-700); background: var(--color-burgundy-50); }.document-context-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); font-size: .78rem; }.document-context-item small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); font-size: .67rem; }.document-context-item .badge { font-size: .61rem; white-space: nowrap; }.document-context-item > i { color: var(--color-text-secondary); font-size: .65rem; }
.evaluation-workspace-card { grid-template-columns: minmax(185px, 1.3fr) minmax(110px, .7fr) minmax(115px, .8fr) minmax(160px, 1fr) 12px; }.evaluation-workspace-card + .evaluation-workspace-card { margin-top: 0; }
@media (max-width: 1050px) { .dist360-heading { flex-direction: column; }.dist360-actions { justify-content: flex-start; }.dist360-overview-grid { grid-template-columns: 1fr; }.dist360-panel-wide { grid-column: auto; }.relationship-card { grid-template-columns: minmax(170px, 1fr) 1fr 12px; }.relationship-card > span:nth-child(3) { display: none; }.evaluation-workspace-card { grid-template-columns: minmax(160px, 1fr) 1fr 12px; }.evaluation-workspace-card > span:nth-child(3), .evaluation-workspace-card > span:nth-child(4) { display: none; } }
@media (max-width: 680px) { .dist360-status-strip { grid-template-columns: repeat(2, 1fr); }.dist360-status-strip > div:nth-child(2) { border-right: 0; }.dist360-status-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--color-border-subtle); }.dist360-meta { flex-direction: column; gap: 4px; }.dist360-meta span { padding: 0; border: 0; }.dist360-actions .btn { flex: 1; }.relationship-card, .evaluation-workspace-card { grid-template-columns: minmax(0, 1fr) 12px; }.relationship-card > span:not(.relationship-product), .evaluation-workspace-card > span:not(.evaluation-product) { display: none; }.engagement-timeline-item { grid-template-columns: 45px 8px minmax(0, 1fr); }.engagement-timeline-item .badge { display: none; }.document-context-item { grid-template-columns: 34px minmax(0, 1fr) 10px; }.document-context-item .badge { display: none; } }