:root {
  /* ============================ */
  /*          SIZE / SCALE       */
  /* ============================ */

  /* size/scale/baseUnit */
  --size-scale-baseUnit: 4px;

  /* size/scale/half (2px кружочки и т.п.) */
  --size-scale-half: 2px;

  /* size/scale/1 */
  --size-scale-1: 4px;

  /* size/scale/1half */
  --size-scale-1half: 6px;

  /* size/scale/2 */
  --size-scale-2: 8px;

  /* size/scale/2half */
  --size-scale-2half: 10px;

  /* size/scale/3 */
  --size-scale-3: 12px;

  /* size/scale/3half */
  --size-scale-3half: 14px;

  /* size/scale/4 */
  --size-scale-4: 16px;

  /* size/scale/4half */
  --size-scale-4half: 18px;

  /* size/scale/5 */
  --size-scale-5: 20px;

  /* size/scale/6 */
  --size-scale-6: 24px;

  /* size/scale/7 */
  --size-scale-7: 28px;

  /* size/scale/8 */
  --size-scale-8: 32px;

  /* size/scale/9 */
  --size-scale-9: 36px;

  /* size/scale/10 */
  --size-scale-10: 40px;

  /* ============================ */
  /*            COLORS            */
  /* ============================ */

  /* ===================== */
  /* GRAY */
  /* ===================== */
  --palette-gray-50:  #F9FAFB;
  --palette-gray-100: #F3F4F6;
  --palette-gray-200: #E5E7EB;
  --palette-gray-300: #D1D5DB;
  --palette-gray-400: #9CA3AF;
  --palette-gray-500: #6B7280;
  --palette-gray-600: #4B5563;
  --palette-gray-700: #374151;
  --palette-gray-800: #1F2937;
  --palette-gray-900: #111827;

  /* ===================== */
  /* GRAY-BLUE */
  /* ===================== */
  --palette-gray-blue-50:  #F8FAFC;
  --palette-gray-blue-100: #F1F5F9;
  --palette-gray-blue-200: #E2E8F0;
  --palette-gray-blue-300: #CBD5E1;
  --palette-gray-blue-400: #94A3B8;
  --palette-gray-blue-500: #64748B;
  --palette-gray-blue-600: #475569;
  --palette-gray-blue-700: #334155;
  --palette-gray-blue-800: #1E293B;
  --palette-gray-blue-900: #0F172A;

  /* ===================== */
  /* PURPLE */
  /* ===================== */
  --palette-purple-50:  #FAF5FF;
  --palette-purple-100: #F3E8FF;
  --palette-purple-200: #E9D5FF;
  --palette-purple-300: #D8B4FE;
  --palette-purple-400: #C084FC;
  --palette-purple-500: #A855F7;
  --palette-purple-600: #9333EA;
  --palette-purple-700: #7E22CE;
  --palette-purple-800: #6B21A8;
  --palette-purple-900: #581C87;

  /* ===================== */
  /* DEEP-PURPLE */
  /* ===================== */
  --palette-deep-purple-50:  #F5F3FF;
  --palette-deep-purple-100: #EDE9FE;
  --palette-deep-purple-200: #DDD6FE;
  --palette-deep-purple-300: #C4B5FD;
  --palette-deep-purple-400: #A78BFA;
  --palette-deep-purple-500: #8B5CF6;
  --palette-deep-purple-600: #7C3AED;
  --palette-deep-purple-700: #6D28D9;
  --palette-deep-purple-800: #5B21B6;
  --palette-deep-purple-900: #4C1D95;

  /* ===================== */
  /* BLUE */
  /* ===================== */
  --palette-blue-50:  #EFF6FF;
  --palette-blue-100: #DBEAFE;
  --palette-blue-200: #BFDBFE;
  --palette-blue-300: #93C5FD;
  --palette-blue-400: #60A5FA;
  --palette-blue-500: #3B82F6;
  --palette-blue-550: #1F69F9;
  --palette-blue-600: #2563EB;
  --palette-blue-700: #1D4ED8;
  --palette-blue-800: #1E40AF;
  --palette-blue-850: #04379A;
  --palette-blue-900: #1E3A8A;

  /* ===================== */
  /* CYAN */
  /* ===================== */
  --palette-cyan-50:  #ECFEFF;
  --palette-cyan-100: #CFFAFE;
  --palette-cyan-200: #A5F3FC;
  --palette-cyan-300: #67E8F9;
  --palette-cyan-400: #22D3EE;
  --palette-cyan-500: #06B6D4;
  --palette-cyan-600: #0891B2;
  --palette-cyan-700: #334155;
  --palette-cyan-800: #155E75;
  --palette-cyan-900: #164E63;

  /* ===================== */
  /* TEAL */
  /* ===================== */
  --palette-teal-50:  #F0FDFA;
  --palette-teal-100: #CCFBF1;
  --palette-teal-200: #99F6E4;
  --palette-teal-300: #5EEAD4;
  --palette-teal-400: #2DD4BF;
  --palette-teal-500: #14B8A6;
  --palette-teal-600: #0D9488;
  --palette-teal-700: #0F766E;
  --palette-teal-800: #115E59;
  --palette-teal-900: #134E4A;

  /* ===================== */
  /* GREEN */
  /* ===================== */
  --palette-green-50:  #F0FDF4;
  --palette-green-100: #DCFCE7;
  --palette-green-200: #BBF7D0;
  --palette-green-300: #86EFAC;
  --palette-green-400: #4ADE80;
  --palette-green-500: #22C55E;
  --palette-green-600: #16A34A;
  --palette-green-700: #15803D;
  --palette-green-800: #166534;
  --palette-green-900: #14532D;

  /* ===================== */
  /* YELLOW */
  /* ===================== */
  --palette-yellow-50:  #FEFCE8;
  --palette-yellow-100: #FEF9C3;
  --palette-yellow-200: #FEF08A;
  --palette-yellow-300: #FDE047;
  --palette-yellow-400: #FACC15;
  --palette-yellow-500: #EAB308;
  --palette-yellow-600: #CA8A04;
  --palette-yellow-700: #A16207;
  --palette-yellow-800: #854D0E;
  --palette-yellow-900: #713F12;

  /* ===================== */
  /* ORANGE */
  /* ===================== */
  --palette-orange-50:  #FFF7ED;
  --palette-orange-100: #FFEDD5;
  --palette-orange-200: #FED7AA;
  --palette-orange-300: #FDBA74;
  --palette-orange-400: #FB923C;
  --palette-orange-500: #F97316;
  --palette-orange-600: #EA580C;
  --palette-orange-700: #C2410C;
  --palette-orange-800: #9A3412;
  --palette-orange-900: #7C2D12;

  /* ===================== */
  /* RED */
  /* ===================== */
  --palette-red-50:  #FEF2F2;
  --palette-red-100: #FEE2E2;
  --palette-red-200: #FECACA;
  --palette-red-300: #FCA5A5;
  --palette-red-400: #F87171;
  --palette-red-500: #EF4444;
  --palette-red-600: #DC2626;
  --palette-red-700: #B91C1C;
  --palette-red-800: #991B1B;
  --palette-red-900: #7F1D1D;

  /* ===================== */
  /* BASE */
  /* ===================== */
  --palette-white: #FFFFFF;
  --palette-black: #000000;
  --palette-transparent: rgba(255, 255, 255, 0);
  --palette-overlay: rgba(0, 0, 0, 0.5);

  /* ===================== */
  /* SHADOWS */
  /* ===================== */
  --block-shadow: 0px 3px 4px 0px #3741510D;
  --popup-shadow: 0px 6px 28px 0px #37415180;
  --menu-shadow: 0px 1px 2px 0px #3741511A;
  --header-shadow: 0px 2px 8px 0px #3741514D;
  --footer-shadow: 0px -2px 8px 0px #3741514D;
  --focus-shadow: 0px 0px 4px 2px #DBEAFE;
  --true-shadow: 0px 0px 4px 2px #DCFCE7;
  --error-shadow: 0px 0px 4px 2px #FEE2E2;
  --column-right-shadow: -4px 0px 4px 0px #37415140;
  --column-left-shadow: 4px 0px 4px 0px #37415140;

  /* ============================ */
  /*           TYPOGRAPHY         */
  /* ============================ */

  /* font/primary */
  --font-primary: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* font/font-base */
  --font-font-base: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Header ---------- */
  --header-h1-font-size: 32px;
  --header-h1-line-height: 36px;
  --header-h1-font-weight: var(--weight-regular);

  --header-h2-font-size: 24px;
  --header-h2-line-height: 32px;
  --header-h2-font-weight: var(--weight-medium);

  --header-h3-font-size: 18px;
  --header-h3-line-height: 24px;
  --header-h3-font-weight: var(--weight-bold);

  --header-h4-font-size: 18px;
  --header-h4-line-height: 24px;
  --header-h4-font-weight: var(--weight-medium);

  --header-h5-font-size: 16px;
  --header-h5-line-height: 20px;
  --header-h5-font-weight: var(--weight-medium);

  --header-h6-font-size: 14px;
  --header-h6-line-height: 20px;
  --header-h6-font-weight: var(--weight-medium);

  /* ---------- Landing ---------- */
  --landing-h1-font-size: 36px;
  --landing-h1-line-height: 56px;
  --landing-h1-font-weight: var(--weight-regular);

  --landing-h2-font-size: 24px;
  --landing-h2-line-height: 36px;
  --landing-h2-font-weight: var(--weight-regular);

  /* ---------- Menu ---------- */
  --menu-root-font-size: 14px;
  --menu-root-line-height: 20px;
  --menu-root-font-weight: var(--weight-bold);

  --menu-item-font-size: 14px;
  --menu-item-line-height: 20px;
  --menu-item-font-weight: var(--weight-regular);

  /* ---------- KIT ---------- */
  --kit-lg-font-size: 16px;
  --kit-lg-line-height: 24px;
  --kit-lg-font-weight: var(--weight-regular);

  --kit-md-font-size: 14px;
  --kit-md-line-height: 16px;
  --kit-md-font-weight: var(--weight-regular);

  --kit-sm-font-size: 14px;
  --kit-sm-line-height: 16px;
  --kit-sm-font-weight: var(--weight-regular);

  --kit-xs-font-size: 12px;
  --kit-xs-line-height: 16px;
  --kit-xs-font-weight: var(--weight-regular);

  --kit-lg-underline-font-size: 16px;
  --kit-lg-underline-line-height: 24px;
  --kit-lg-underline-font-weight: var(--weight-regular);

  --kit-md-underline-font-size: 14px;
  --kit-md-underline-line-height: 16px;
  --kit-md-underline-font-weight: var(--weight-regular);

  --kit-sm-underline-font-size: 14px;
  --kit-sm-underline-line-height: 16px;
  --kit-sm-underline-font-weight: var(--weight-regular);

  --kit-xs-underline-font-size: 12px;
  --kit-xs-underline-line-height: 16px;
  --kit-xs-underline-font-weight: var(--weight-regular);

  --kit-lg-italic-font-size: 16px;
  --kit-lg-italic-line-height: 24px;
  --kit-lg-italic-font-weight: var(--weight-regular);

  --kit-md-italic-font-size: 14px;
  --kit-md-italic-line-height: 16px;
  --kit-md-italic-font-weight: var(--weight-regular);

  --kit-sm-italic-font-size: 14px;
  --kit-sm-italic-line-height: 16px;
  --kit-sm-italic-font-weight: var(--weight-regular);

  --kit-xs-italic-font-size: 12px;
  --kit-xs-italic-line-height: 16px;
  --kit-xs-italic-font-weight: var(--weight-regular);

  /* ---------- TEXT ---------- */
  --text-phone-font-size: 24px;
  --text-phone-line-height: 32px;
  --text-phone-font-weight: var(--weight-regular);

  --text-landing-font-size: 16px;
  --text-landing-line-height: 32px;
  --text-landing-font-weight: var(--weight-regular);

  --text-avatar-font-size: 14px;
  --text-avatar-line-height: 32px;
  --text-avatar-font-weight: var(--weight-bold);

  --text-text1-font-size: 16px;
  --text-text1-line-height: 20px;
  --text-text1-font-weight: var(--weight-regular);

  --text-text2-font-size: 14px;
  --text-text2-line-height: 20px;
  --text-text2-font-weight: var(--weight-regular);

  --text-copyright-font-size: 12px;
  --text-copyright-line-height: 16px;
  --text-copyright-font-weight: var(--weight-regular);

  /* ============================ */
  /*            TOKENS            */
  /* ============================ */

  /* === buttons === */
  /* component/button/primary/filled */
  --component-button-primary-filled-bg-default: var(--palette-blue-600);
  --component-button-primary-filled-bg-hover: var(--palette-blue-700);
  --component-button-primary-filled-text-default: var(--palette-white);
  --component-button-primary-filled-bg-disabled: var(--palette-gray-300);
  --component-button-primary-filled-text-disabled: var(--palette-gray-500);

  /* component/button/primary/outlined */
--component-button-primary-outlined-bg-default: var(--palette-white);
--component-button-primary-outlined-border-default: var(--palette-blue-600);
--component-button-primary-outlined-text-default: var(--palette-blue-700);

/* disabled/secondary (общие) */
--component-button-disabled-border: var(--palette-gray-500); 
--component-button-disabled-text: var(--palette-gray-700);   

  /* === inputs === */
  --component-input-bg-default: var(--palette-gray-100);
  --component-input-border-default: var(--palette-gray-500);
  --component-input-text-default: var(--palette-gray-700);
  --component-input-placeholder-default: var(--palette-gray-500);

  --component-input-border-focus: var(--palette-blue-800);
  --component-input-shadow-focus: var(--focus-shadow);

  --component-input-border-error: var(--palette-red-800); 
  --component-input-shadow-error: var(--error-shadow);

  /* === labels === */
  --component-label-text-default: var(--palette-gray-700);

  /* === notifications === */
  --color-semantic-notification-text: var(--palette-gray-900);

  --color-semantic-notification-info-surface: var(--palette-blue-100);
  --color-semantic-notification-info-border: var(--palette-blue-600);

  --color-semantic-notification-negative-surface: var(--palette-red-100);
  --color-semantic-notification-negative-border: var(--palette-red-600);

  --color-semantic-notification-warning-surface: var(--palette-yellow-100);
  --color-semantic-notification-warning-border: var(--palette-yellow-600);

  /* === tooltip === */
  --component-tooltip-bg: var(--palette-blue-200);
  --component-tooltip-text: var(--palette-gray-700);
  --component-tooltip-shadow: var(--popup-shadow);
  --component-tooltip-radius: var(--size-scale-1);

  /* === divider === */
  --component-divider-border-default: var(--palette-gray-300);

  /* === backgrounds === */
  --color-semantic-bg-content: var(--palette-white);

  /* === link === */
  --component-link-primary-text-default: var(--palette-blue-700);

  /* ============================ */
  /*   START PAGE (HEADER/SIDEBAR) */
  /* ============================ */

  /* semantic */
  --semantic-light-surface-header: var(--palette-white); 
  --semantic-light-action-primary-subtle-bg-active: var(--palette-blue-200); 
  --semantic-light-action-primary-subtle-bg-disabled: var(--palette-gray-100); 

  /* фон основной области */
  --semantic-light-surface-page: var(--palette-gray-100);

  /* размеры */
  --layout-header-height: 40px;
  --layout-sidebar-open: 260px;
  --layout-sidebar-closed: 36px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  background: var(--semantic-light-surface-page);
}

/* ================== COMPONENTS ================== */

/* ==================
   COMPONENTS: BUTTON
   ================== */
.auth-btn {
  width: 320px;
  height: 40px;

  gap: var(--size-scale-1);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--size-scale-1half);

  padding-top: var(--size-scale-2);
  padding-right: var(--size-scale-3);
  padding-bottom: var(--size-scale-2);
  padding-left: var(--size-scale-3);

  font-family: var(--font-primary);
  font-size: var(--kit-md-font-size);
  line-height: var(--kit-md-line-height);
  font-weight: var(--kit-md-font-weight);

  border: 1px solid transparent;
  background: transparent;
  color: inherit;

  cursor: pointer;
}

/* primary filled (default) */
.auth-btn--primary {
  background: var(--component-button-primary-filled-bg-default, #2563EB);
  color: var(--component-button-primary-filled-text-default);
}

.auth-btn--primary:hover:not(.auth-btn--disabled):not(.auth-btn--outline){
  background: var(--component-button-primary-filled-bg-hover, #1D4ED8);
}
.auth-btn--primary:active:not(.auth-btn--disabled):not(.auth-btn--outline){
  background: var(--component-button-primary-filled-bg-active, #1E40AF);
}

/* disabled (общий) */
.auth-btn--disabled,
.auth-btn:disabled {
  cursor: default;
}

/* primary filled (disabled) */
.auth-btn--primary.auth-btn--disabled,
.auth-btn--primary:disabled {
  background: var(--component-button-primary-filled-bg-disabled);
  color: var(--component-button-primary-filled-text-disabled);
}

/* ===== primary outlined (default) ===== */
.auth-btn--outline {
  background: var(--component-button-primary-outlined-bg-default);
  border: 1px solid var(--component-button-primary-outlined-border-default);
  color: var(--component-button-primary-outlined-text-default);
}

.auth-btn--primary.auth-btn--outline:hover:not(.auth-btn--disabled){
  border: 1px solid var(--component-button-primary-outlined-border-hover, #1D4ED8);
  background: var(--component-button-primary-outlined-bg-hover, #DBEAFE);
}
.auth-btn--primary:active.auth-btn--outline:not(.auth-btn--disabled){
  border: 1px solid var(--component-button-primary-outlined-border-active, #1E40AF);
  background: var(--component-button-primary-outlined-bg-active, #BFDBFE);
}

/* ===== outlined disabled ===== */
.auth-btn--outline.auth-btn--disabled,
.auth-btn--secondary {
  background: var(--component-button-primary-outlined-bg-default);
  border-color: var(--component-button-disabled-border);
  color: var(--component-button-disabled-text);
  
}
.auth-btn--md{
  width: min-content;
  white-space: nowrap;
  height: 32px;
  border-radius: var(--size-scale-1, 4px);
}

.auth-btn--secondary.auth-btn--outline.auth-btn--table:hover{
  background: var(--component-button-secondary-outlined-bg-hover, #E5E7EB);
}
.auth-btn--secondary.auth-btn--outline.auth-btn--table:active{
  background: var(--component-button-secondary-outlined-bg-active, #D1D5DB);
}

.auth-btn--table{
  width: min-content;
  height: 16px;
  box-sizing: content-box;
  border-radius: var(--size-scale-half, 2px);
  white-space: nowrap;
  padding: var(--size-scale-1, 4px) var(--size-scale-1half, 6px);
}

.more_btn{
  display: flex;
  padding: var(--size-scale-1, 4px) var(--size-scale-1half, 6px);
  justify-content: center;
  align-items: center;

  width: 12px;
  height: 16px;
  padding: 4px 6px;
  box-sizing: content-box;

  border-radius: var(--size-scale-half, 2px);
  border: 1px solid var(--palette-transparent);
  background: var(--component-button-secondary-text-bg-selected, #D1D5DB);
  cursor: pointer;
}
.hidden{
  visibility: hidden;
}
.more_btn:hover{
  background: var(--component-button-secondary-outlined-bg-hover, #E5E7EB);
}
.more_btn:focus-within{
  background: var(--component-button-secondary-outlined-bg-active, #D1D5DB);
}
.more_btn:focus-within .context_menu_origin{
  visibility: visible;
}
.more_btn--outline {
  border: 1px solid var(--component-button-secondary-outlined-border-default, #6B7280);
  background: var(--component-button-secondary-outlined-bg-default, rgba(255, 255, 255, 0.00));
  color: var(--component-button-primary-outlined-text-default);
}
.more_btn--outline:focus-within{
  border: 1px solid var(--component-button-secondary-outlined-border-active, #374151);
  background: var(--component-button-secondary-outlined-bg-active, #D1D5DB);
}

/* ==================
   COMPONENTS: INPUT
   ================== */
.auth-input-wrapper {
  width: 320px;
  height: 40px;

  display: flex;
  align-items: center;

  border-radius: var(--size-scale-1half);
  border: 1px solid var(--component-input-border-default);
  background: var(--component-input-bg-default);

  padding-top: var(--size-scale-1half);
  padding-right: var(--size-scale-3);
  padding-bottom: var(--size-scale-1half);
  padding-left: var(--size-scale-2half);
}

.auth-input {
  flex: 1 1 auto;
  min-width: 0;

  border: none;
  outline: none;
  background: transparent;

  font-family: var(--font-primary);
  font-size: var(--kit-md-font-size);
  line-height: var(--kit-md-line-height);
  font-weight: var(--kit-md-font-weight);

  color: var(--component-input-text-default);
}

.auth-input::placeholder {
  color: var(--component-input-placeholder-default);
}

/* focus */
.auth-input-wrapper:focus-within {
  border-color: var(--component-input-border-focus);
  box-shadow: var(--component-input-shadow-focus);
}

/* error */
.auth-input-wrapper--error {
  border-color: var(--component-input-border-error);
  box-shadow: var(--component-input-shadow-error);
}

/* error + focus: error важнее */
.auth-input-wrapper--error:focus-within {
  border-color: var(--component-input-border-error);
  box-shadow: var(--component-input-shadow-error);
}

/* ----- INPUT ICONS----- */
.auth-input-icon:hover {
  opacity: 1;
}
.auth-input-wrapper.has-value .auth-input-icon--clear {
  display: block;
}

.auth-input-icons {
  display: inline-flex;
  align-items: center;
  gap: var(--size-scale-2);
  margin-left: var(--size-scale-2);
}

.auth-input-icon {
  width: 16px;
  height: 16px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  cursor: pointer;
  opacity: 0.85;
}

.auth-input-icon--clear {
  right: calc(var(--size-scale-3) + 24px);
  background-image: url("/public/_company_6/assets/icons/close.svg");
  display: none;
}
.auth-input-icon--eye {
  right: var(--size-scale-3);
  background-image: url("/public/_company_6/assets/icons/eye-close.svg");
}
.auth-input-icon--eye.is-open {
  background-image: url("/public/_company_6/assets/icons/eye-open.svg");
}
.auth-input-icon--err {
  right: calc(var(--size-scale-3) + 48px);
  background-image: url("/public/_company_6/assets/icons/error_triangle.svg");
  cursor: default;
}


/* ==================
   COMPONENTS: LABEL
   ================== */
.auth-label {
  font-family: var(--font-primary);
  font-size: var(--kit-xs-font-size);
  line-height: var(--kit-xs-line-height);
  font-weight: var(--kit-xs-font-weight);
  color: var(--component-label-text-default);
}

/* ==================
   COMPONENTS: NOTE
   ================== */
.auth-note {
  width: 320px;

  display: none;
  align-items: center;

  border-radius: var(--size-scale-1);
  border: 1px solid transparent;

  padding-top: var(--size-scale-2half);
  padding-right: var(--size-scale-1);
  padding-bottom: var(--size-scale-2half);
  padding-left: var(--size-scale-2);

  font-family: var(--font-primary);
  font-size: var(--kit-sm-font-size);
  line-height: var(--kit-sm-line-height);
  font-weight: var(--kit-sm-font-weight);

  color: var(--color-semantic-notification-text);
}

.auth-note-visible{
  display: flex;
}

.auth-note--info {
  background: var(--color-semantic-notification-info-surface);
  border-color: var(--color-semantic-notification-info-border);
}

.auth-note--error {
  background: var(--color-semantic-notification-negative-surface);
  border-color: var(--color-semantic-notification-negative-border);
}

.auth-note--warning {
  background: var(--color-semantic-notification-warning-surface);
  border-color: var(--color-semantic-notification-warning-border);
}

.auth-note__icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  margin-right: var(--size-scale-2);
}

.auth-note__text {
  flex: 1 1 auto;
  min-width: 0;
}

.auth-note--info .auth-note__icon {
  background-image: url("/public/_company_6/assets/icons/info_circle.svg");
}

.auth-note--error .auth-note__icon {
  background-image: url("/public/_company_6/assets/icons/error_circle.svg");
}

.auth-note--warning .auth-note__icon {
  background-image: url("/public/_company_6/assets/icons/warning_triangle.svg");
}

/* ==================
   COMPONENTS: TOOLTIP
   ================== */
.auth-info {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.auth-info__btn {
  width: 20px;
  height: 20px;

  padding: 0;
  border: none;
  background: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: default;
}

.auth-info__icon {
  width: 12px;
  height: 12px;
  display: block;
}
.auth-info__icon_md{
  width: 16px;
  height: 16px;
  display: block;
}

/* тултип над иконкой */
.auth-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--size-scale-2));
  transform: translateX(-50%) translateY(4px);

  width: 296px;
  
  padding: var(--size-scale-4);

  border-radius: var(--component-tooltip-radius);
  background: var(--component-tooltip-bg);
  box-shadow: var(--component-tooltip-shadow);

  font-family: var(--font-primary);
  font-size: var(--kit-xs-font-size);
  line-height: var(--kit-xs-line-height);
  font-weight: var(--kit-xs-font-weight);
  color: var(--component-tooltip-text);

  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;

  z-index: 100;
}

.auth-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--component-tooltip-bg);
}

.auth-info:hover .auth-tooltip,
.auth-info:focus-within .auth-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==================
   COMPONENTS: DIVIDER
   ================== */
.auth-divider {
  width: 320px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-scale-2);
}

.auth-divider__line {
  width: 139.5px;
  height: 0;
  border-top: 1px solid var(--component-divider-border-default);
  flex: 0 0 auto;
}

.auth-divider__text {
  font-family: var(--font-primary);
  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--text-text2-font-weight);
  color: var(--palette-gray-700);
  white-space: nowrap;
}

/* ==================
   COMPONENTS: LINK
   ================== */
.auth-link {
  font-family: var(--font-primary);
  font-size: var(--kit-xs-font-size);
  line-height: var(--kit-xs-line-height);
  font-weight: var(--kit-xs-font-weight);

  color: var(--component-link-primary-text-default);
  text-decoration: none;
  cursor: pointer;
}

.auth-link:hover,
.auth-link:focus-visible {
  text-decoration: underline;
}

.auth-link--muted {
  color: var(--component-button-primary-filled-text-disabled);
}



  
  /* адаптив: чтобы не развалилось в узком месте */
  @media (max-width: 980px){
    .ui-pagination{
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .ui-pagination__center{
      order: 3;
      width: 100%;
    }
  }

/* ================== COMPOSITIONS / LAYOUT ================== */

.auth-fields {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--size-scale-1half);
}

.auth-actions {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--size-scale-2);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--size-scale-1);
}

.auth-label-row {
  width: 320px;
  display: flex;
  align-items: center;
 
  /* gap: var(--size-scale-2); */
}

.auth-forgot {
  width: 320px;
  display: flex;
  justify-content: flex-start;
}

.auth-help {
  width: 320px;
  display: flex;
  justify-content: center; 
}

/* ==================
   PAGE: AUTH
   ================== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================
   COMPOSITIONS: AUTH CARD
   ================== */
.auth-card {
  width: 368px;
  min-width: 368px;
  

  display: flex;
  flex-direction: column;
  gap: var(--size-scale-6);

  padding-top: var(--size-scale-10);
  padding-right: var(--size-scale-6);
  padding-bottom: var(--size-scale-6);
  padding-left: var(--size-scale-6);

  border-radius: var(--size-scale-2);
  background: var(--color-semantic-bg-content);
  box-shadow: var(--popup-shadow);
}

/* ==================
   COMPOSITIONS: AUTH HEADER
   ================== */
.auth-header {
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-logo {
  width: 320px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: var(--size-scale-2);
}

.auth-logo img {
  max-width: 100%;
  max-height: 100%;
}

.auth-title {
  width: 320px;
  margin: 0;
  margin-bottom: var(--size-scale-2);

  font-family: var(--font-primary);
  font-size: var(--header-h2-font-size);
  line-height: var(--header-h2-line-height);
  font-weight: var(--header-h2-font-weight);

  text-align: center;
  color: var(--palette-gray-900);
}


/* ==================
    AUTH SCREEN: LOGIN
   ================== */
   
/* хедер: лого + заголовок */
.auth-header {
  width: 320px;
  align-items: center;
}

.auth-title {
  margin-bottom: 0; 
}

.auth-section {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--size-scale-4); 
}

.auth-fields {
  gap: var(--size-scale-2); 
}

.auth-forgot {
  justify-content: center;
}

.auth-help {
  justify-content: center;
  margin-top: var(--size-scale-2);
  font-size: var(--kit-xs-font-size);
  line-height: var(--kit-xs-line-height);
  font-weight: var(--kit-xs-font-weight);
  color: var(--component-button-primary-filled-text-disabled);
}

.auth-divider {
  margin-top: var(--size-scale-2);
  margin-bottom: var(--size-scale-2);
}




.auth-actions {
  gap: var(--size-scale-4); 
}

.auth-actions .auth-btn:disabled {
  opacity: 1; 
}

.auth-text {
  font-family: var(--font-primary);
  font-size: var(--kit-xs-font-size);
  line-height: var(--kit-xs-line-height);
  font-weight: var(--kit-xs-font-weight);

  color: var(--palette-gray-700); 
  text-align: center;
}

.auth-code-row {
  display: flex;
  justify-content: center;
  gap: var(--size-scale-1half); 
}

.auth-input-wrapper--code {
  width: 48.33px !important;
  height: 40px;
  padding: 0;             
  justify-content: center; 
}

.auth-input--code {
  text-align: center;
  padding: 0;
}

/* ====================================================================== */
/* ===================== START PAGE LAYOUT (HEADER/SIDEBAR/MAIN) ========= */
/* ====================================================================== */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- HEADER ---------- */
.app-header {
  height: var(--layout-header-height);
  background: var(--semantic-light-surface-header);
  box-shadow: var(--header-shadow);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--size-scale-2); 
  position: relative;
  z-index: 10;
}

.app-header__left,
.app-header__right {
  display: inline-flex;
  align-items: center;
  gap: var(--size-scale-3);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.app-brand__logo {
  height: 24px;
  width: auto;
  display: block;
}

.app-product {
  display: inline-flex;
  align-items: center;
  gap: var(--size-scale-2);

  font-size: var(--kit-xs-font-size);
  line-height: var(--kit-xs-line-height);
  font-weight: var(--kit-xs-font-weight);
  color: var(--palette-gray-700);
  white-space: nowrap;
  padding: var(--size-scale-1half);
}

.app-product__caret {
  width: 10px;
  height: 10px;
  display: inline-block;

  background: url("/public/_company_6/assets/icons/arrow_down.svg") center / 7px 7px no-repeat;
  opacity: .8;

  transition: transform .15s ease;
}
.app-product.is-open .app-product__caret {
  transform: rotate(180deg);
}

.app-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--size-scale-1);

  font-size: var(--kit-xs-font-size);
  line-height: var(--kit-xs-line-height);
  font-weight: var(--kit-xs-font-weight);
  color: var(--palette-gray-700);
}

.app-lang__flag {
  width: 16px;
  height: 12px;
  display: inline-block;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("/public/_company_6/assets/icons/flag_ru.svg");
}



.app-lang__caret {
  width: 10px;
  height: 10px;
  display: inline-block;

  background: url("/public/_company_6/assets/icons/arrow_down.svg") center / 7px 7px no-repeat;
  opacity: .8;
  margin-top: 2px;
  transition: transform .15s ease;
}
.app-lang.is-open .app-lang__caret {
  transform: rotate(180deg);
}

.app-user {
  display: inline-flex;
  align-items: center;
  gap: var(--size-scale-2);
}

.app-user__avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.app-user__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.app-user__name {
  font-size: var(--kit-xs-font-size);
  line-height: var(--kit-xs-line-height);
  font-weight: var(--weight-medium);
  color: var(--palette-blue-700);
  white-space: nowrap;
}

.app-user__role {
  font-size: 10px;
  line-height: var(--kit-xs-line-height);
  font-weight: var(--kit-xs-font-weight);
  color: var(--palette-gray-500);
  white-space: nowrap;
}


.icon-btn {
  position: relative;

  width: 28px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: var(--size-scale-half, 2px);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.icon-btn:hover{
  background: var(--component-button-secondary-text-bg-hover, #E5E7EB);
}
.icon-btn:active{
  background: var(--component-button-secondary-text-bg-active, #D1D5DB);
}

.icon-btn img {
  width: 18px;
  height: 18px;
  display: block;
}


.badge {
  position: absolute;
  top: -2px;
  right: -2px;

  min-width: 16px;
  height: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 4px;
  border-radius: 999px;
  background: var(--palette-cyan-500);
  color: var(--palette-white);

  font-size: 10px;
  line-height: 1;
  font-weight: var(--weight-semibold);
}

/* ---------- BODY GRID ---------- */
.app-body {
  flex: 1;
  display: flex;
  min-height: 0;
  z-index: 11;
}

/* ---------- SIDEBAR ---------- */
.app-sidebar {
  width: var(--layout-sidebar-open);
  background: var(--palette-white);
  border-right: 1px solid var(--palette-gray-200);
  box-shadow: var(--menu-shadow);

  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  z-index: 20;
}

.sidebar-nav {
  padding: var(--size-scale-1);
  display: flex;
  flex-direction: column;
  gap: var(--size-scale-1);
  overflow: auto;
}

 
.sidebar-item {
  height: 32px;

  display: flex;
  align-items: center;
  gap: var(--size-scale-2); 

  padding: 0 var(--size-scale-2);
  border-radius: var(--size-scale-1) 0 0 var(--size-scale-1);
  text-decoration: none;

  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--text-text2-font-weight);

  color: var(--palette-gray-900);
  background: transparent;
}

.sidebar-item::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.sidebar-item__text {
  flex: 1;
  min-width: 0;
}

/* caret справа */
.sidebar-item__caret {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 7px;
  background-image: url("/public/_company_6/assets/icons/arrow_down.svg");
  opacity: .8;
}
.sidebar-item--active .sidebar-item__caret {
  background-image: url("/public/_company_6/assets/icons/arrow_up.svg");
}



.sidebar-item__text {
  flex: 1;
  min-width: 0;
}

.sidebar-item__caret {
  font-size: 10px;
  color: var(--palette-gray-500);
}

.sidebar-item--active {
  background: var(--semantic-light-action-primary-subtle-bg-active);
}

.sidebar-item--muted {
  background: var(--semantic-light-action-primary-subtle-bg-disabled);
  color: var(--palette-gray-500);
}

.sidebar-item--services::before { background-image: url("/public/_company_6/assets/icons/services.svg"); }
.sidebar-item--contact::before  { background-image: url("/public/_company_6/assets/icons/cont_center.svg"); }
.sidebar-item--vats::before     { background-image: url("/public/_company_6/assets/icons/VATS.svg"); }
.sidebar-item--admin::before    { background-image: url("/public/_company_6/assets/icons/administr.svg"); }

.sidebar-subitem {
  height: 32px;
  display: flex;
  align-items: center;

  padding: 0 var(--size-scale-2);
  margin-left: 28px;

  border-radius: var(--size-scale-1);
  text-decoration: none;

  color: var(--palette-gray-700);
  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--text-text2-font-weight);
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: var(--size-scale-1);
  padding-left: 28px;
}

.sidebar-chip {
  height: 32px;
  display: flex;
  align-items: center;

  padding: 0 var(--size-scale-2);
  border-radius: var(--size-scale-1) 0 0 var(--size-scale-1);

  background: var(--palette-gray-100);
  text-decoration: none;

  color: var(--palette-gray-500);
  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--text-text2-font-weight);
}

.sidebar-collapse {
  height: 40px;
  border: none;
  background: transparent;

  display: flex;
  align-items: center;
  gap: var(--size-scale-2);

  padding: 0 var(--size-scale-3);
  cursor: pointer;

  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--text-text2-font-weight);
  color: var(--palette-gray-700);
}

.sidebar-collapse::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;

  background: url("/public/_company_6/assets/icons/list.svg") center / 18px 18px no-repeat;
}



/* ---------- MAIN ---------- */
.app-main {
  flex: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: var(--size-scale-4);

  overflow: hidden;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-title {
  margin: var(--size-scale-4) 0 0 var(--size-scale-4);

  font-family: var(--font-primary);
  font-size: var(--header-h2-font-size);
  line-height: var(--header-h2-line-height);
  font-weight: var(--header-h2-font-weight);

  color: var(--palette-gray-900);
}

.page-actions {
  margin-right: var(--size-scale-4);
  display: inline-flex;
  align-items: center;
  gap: var(--size-scale-3);
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: var(--size-scale-4);

  padding: 0 var(--size-scale-4) var(--size-scale-4) var(--size-scale-4); 

  flex: 1;
  min-height: 0; 
}

/* ---------- CONTENT CARDS (filter/table areas) ---------- */
.content-card {
  background: var(--palette-white);
  border-radius: var(--size-scale-1);
  box-shadow: var(--block-shadow);

  min-width: 0;
}

.content-card__title {
  padding: 8px 24px;
  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--weight-medium);
  color: var(--palette-gray-700);
}

/* верхняя карточка  */
.content-card--filter {
  flex: 0 0 auto;
}

/* нижняя карточка  */
.content-card--table {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* ---------- TABLE SHELL  ---------- */
.table-shell{
  height: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;
}

.table-shell__header{
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--size-scale-3) var(--size-scale-6) var(--size-scale-3) var(--size-scale-6) ;
  border-bottom: 1px solid var(--palette-gray-200);
}

.table-shell__title{
  font-size: var(--text-text1-font-size);
  line-height: var(--text-text1-line-height);
  font-weight: var(--weight-medium);
  color: var(--palette-gray-900);
}

.table-shell__count{
  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--text-text2-font-weight);
  color: var(--palette-gray-500);
}

.table-shell__tools{
  display: inline-flex;
  align-items: center;
  gap: var(--size-scale-2);
}

.table-shell__body{
  flex: 1 1 auto;
  min-height: 0;

  overflow: auto; 
}

.table-shell__placeholder{
  min-width: 100%;

  display: table;
  align-items: center;
  justify-content: center;

  text-align: center;

  font-size: var(--text-text1-font-size);
  line-height: var(--text-text1-line-height);
  font-weight: var(--text-text1-font-weight);
  color: var(--palette-gray-700);
}

.table-shell__placeholder .muted{
  display: inline-block;
  margin-top: var(--size-scale-2);

  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--text-text2-font-weight);
  color: var(--palette-gray-500);
}


.table-shell__footer{
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--size-scale-1) var(--size-scale-6);
  border-top: 1px solid var(--palette-gray-200);

  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--text-text2-font-weight);
  color: var(--palette-gray-700);
}

.table-shell__left,
.table-shell__right{
  min-width: 0;
}


/* ====================================================================== */
/* ======================= TABLE EMPTY STATE ============================ */
/* ====================================================================== */

.table-empty {
  width: 100%;
  background: var(--palette-white);
  border-radius: var(--size-scale-2);
  overflow: hidden;
}

/* ---------- HEADER ---------- */
.table-empty__header {
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--size-scale-2) var(--size-scale-6);
  border-bottom: 1px solid var(--palette-gray-200);
}

.table-empty__title {
  margin: 0;

  font-family: var(--font-primary);
  font-size: var(--header-h5-font-size);
  line-height: var(--header-h5-line-height);
  font-weight: var(--header-h5-font-weight);

  color: var(--palette-gray-900);
}

.table-empty__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--size-scale-2);
}

/* ---------- BODY ---------- */
.table-empty__body {
  min-height: 420px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  gap: var(--size-scale-2);

  padding: var(--size-scale-6);
}

/* ---------- ICON ---------- */
.table-empty__icon {
  width: 16px;
  height: 16px;

  background: url("/public/_company_6/assets/icons/x_red_circle.svg") center/16px 16px no-repeat;
  margin-bottom: var(--size-scale-2);
}
.appstore_add__icon {
  width: 16px;
  height: 16px;

  background: url("/public/_company_6/assets/icons/appstore_add.svg") center/16px 16px no-repeat;
  margin-bottom: var(--size-scale-2);
}

/* ---------- TEXT ---------- */
.table-empty__headline {
  margin: 0;

  font-family: var(--font-primary);
  font-size: var(--header-h5-font-size);
  line-height: var(--header-h5-line-height);
  font-weight: var(--header-h5-font-weight);

  color: var(--palette-gray-700);

  max-width: 600px;
}

.table-empty__description {
  font-family: var(--font-primary);
  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--text-text2-font-weight);

  color: var(--palette-gray-700);
  max-width: 600px;
}

/* ---------- CTA ---------- */
.table-empty__cta {
  margin-top: var(--size-scale-4);
  margin-bottom: var(--size-scale-6);
}

/* ---------- FOOTER TEXT ---------- */
.table-empty__footer {
  font-family: var(--font-primary);
  font-size: var(--text-text2-font-size);
  line-height: var(--text-text2-line-height);
  font-weight: var(--text-text2-font-weight);

  color: var(--palette-gray-700);
  max-width: 600px;
}

/* ---------- COLLAPSED SIDEBAR ---------- */
.app--sidebar-collapsed .app-sidebar {
  width: var(--layout-sidebar-closed);
}

.app--sidebar-collapsed .sidebar-nav {
  padding: var(--size-scale-2half);
  align-items: center;
}

.app--sidebar-collapsed .sidebar-item {
  padding: 0;
  justify-content: center;
  gap: 0;
}

.app--sidebar-collapsed .sidebar-item__text,
.app--sidebar-collapsed .sidebar-item__caret,
.app--sidebar-collapsed .sidebar-subitem,
.app--sidebar-collapsed .sidebar-group,
.app--sidebar-collapsed .sidebar-collapse__text {
  display: none;
}

.app--sidebar-collapsed .sidebar-collapse {
  justify-content: center;
}


/* ====================================================================== */
/* ========================= COMPONENTS: TAG ============================ */
/* ====================================================================== */

.tag{
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: content-box;
  justify-content: center;
  width: min-content;
  margin: 0 4px 0 0;
}
.tag > p{
  font-family: var(--font-font-base, Roboto);
  font-style: normal;
  font-weight: var(--font-regular, 400);
  margin: 0;
  white-space: nowrap;
}

/*-------scale------*/
.tag_scale_s{
  border-radius: var(--size-radius-2, 2px);
  padding: 0 2px;
  height: 16px;
}
.tag_scale_s.tag_badge{
  border-radius: var(--size-radius-8, 8px);
  padding: 0 4px;
}
.tag_scale_s > p{
  font-size: var(--font-size-3, 12px);
  line-height: var(--font-height-4, 16px);
}

.tag_scale_m{
  border-radius: var(--size-radius-4, 4px);
  padding: 4px 6px;
  height: 16px;
}
.tag_scale_m.tag_badge{
  border-radius: var(--size-radius-12, 12px);
}
.tag_scale_m > p{
  font-size: var(--font-size-3half, 14px);
  line-height: var(--font-height-4, 16px);
}

.tag_scale_l{
  border-radius: var(--size-radius-4, 4px);
  padding: 4px 8px;
  height: 24px;
}
.tag_scale_l.tag_badge{
  border-radius: var(--size-radius-12, 12px);
}
.tag_scale_l > p{
  font-size: var(--font-size-4, 16px);
  line-height: var(--font-height-6, 24px);
}

/*-------colors---------*/
.tag_bg_blue_600{
  background: var(--palette-blue-600);
}
.tag_bg_blue_600 > *{
  color: var(--palette-white);
}

.tag_bg_cyan_50{
  background: var(--palette-cyan-50);
}
.tag_bg_cyan_50 > *{
  color: var(--palette-cyan-700);
}

.tag_bg_cyan_500{
  background: var(--palette-cyan-500);
}
.tag_bg_cyan_500 > *{
  color: var(--palette-white);
}

.tag_bg_blue_50{
  background: var(--palette-blue-50);
}
.tag_bg_blue_50 > *{
  color: var(--palette-blue-700);
}

.tag_bg_orange_50{
  background: var(--palette-orange-50);
}
.tag_bg_orange_50 > *{
  color: var(--palette-orange-700);
}

.tag_bg_orange_500{
  background: var(--palette-orange-500);
}
.tag_bg_orange_500 > *{
  color: var(--palette-white);
}

.tag_bg_red_600{
  background: var(--palette-red-600);
}
.tag_bg_red_600 > *{
  color: var(--palette-white);
}

/* ====================================================================== */
/* ====================== TABLE GENERAL STYLE =========================== */
/* ====================================================================== */

.row{
  display: table-row;
}
.row:hover{
  background: var(--palette-blue-100);
}
.row:hover > .cell > .cell_content > .hidden{
  visibility: visible;
}

.row.is-selected{
  background:var(--palette-blue-200);
}

.cell{
  display: table-cell;
  padding: 4px 24px 4px 24px;
  border-bottom: 1px solid var(--palette-gray-300);
  text-align: left;
  vertical-align: middle;

  height: 44px;
  min-width: 50px;
}

.cell_content{
  width: 100%;
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  gap: 4px;
}

.text_column{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.text_column > p{
  margin: 0;
  color: var(--palette-gray-700);

  font-family: var(--font-font-base, Roboto);
  font-size: var(--font-size-3half, 14px);
  font-style: normal;
  font-weight: var(--font-regular, 400);
  line-height: var(--font-height-4, 16px);
}

.text_column > p:nth-child(2){
  color: var(--palette-gray-500);
  font-size: var(--font-size-3, 12px);
}

.cell_header{
  height: 40px;

  border-top: 1px solid var(--palette-gray-300);
  border-bottom: 1px solid var(--palette-gray-300);
  background: var(--Light-surface-info, #ECEFF1);

  font-weight: var(--font-medium, 500);
}

.cell_header > .cell_content > p{
  font-weight: var(--font-medium, 500);
}


/* ====================================================================== */
/* ====================== CONTEXT MENU STYLE ============================ */
/* ====================================================================== */

.context_menu_origin{
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;

  position: relative;
  top: 15px;
  right: -12px;

  visibility: hidden;
}

.context_menu_content{
  min-width: 64px;
  min-height: 25px;

  height: min-content;
  width: min-content;

  position: relative;
  transform: translate(-100%, 0);

  display: flex;
  padding: 4px 0;
  flex-direction: column;
  align-items: flex-start;

  border-radius: 4px;
  border: 1px solid var(--palette-gray-300);
  background: var(--semantic-light-surface-container, #FFF);
  box-shadow: 0 2px 2px 0 rgba(55, 65, 81, 0.10);
  cursor: default;
}
.context_menu_content > p{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;

  padding: 4px 12px 4px 6px;
  border: 0;
  height: 32px;
  width: 100%;
  margin: 0;

  background: var(--Light-surface, #FFF);
  text-decoration: none;

  color: var(--palette-gray-500);

  font-family: var(--font-font-base, Roboto);
  font-size: var(--font-size-3half, 14px);
  font-style: normal;
  font-weight: var(--font-regular, 400);
  line-height: var(--font-height-4, 16px);
}

.context_menu_content a{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;

  padding: 4px 12px 4px 6px;
  border: 0;
  height: 32px;
  width: 100%;

  background: var(--Light-surface, #FFF);
  text-decoration: none;
  cursor: pointer;
}
.context_menu_content a:hover{
  background: var(--palette-blue-100);
}
.context_menu_content a:hover p{
  color: var(--palette-gray-800);
}

.context_menu_content a img{
  width: 12px;
  height: auto;
  padding: 6px 6px 6px 0;
  box-sizing: content-box;
}

.context_menu_content a p{
  display: flex;
  padding: 6px 6px 6px 0;
  margin: 0;

  white-space: nowrap;

  color: var(--palette-gray-700);

  font-family: var(--font-font-base, Roboto);
  font-size: var(--font-size-3half, 14px);
  font-style: normal;
  font-weight: var(--font-regular, 400);
  line-height: var(--font-height-4, 16px);
}

/* ====================================================================== */
/* ====================== NAVIGATION STYLE ============================== */
/* ====================================================================== */

.navigation{
  display: flex;
  height: 40px;
  width: 100%;
  padding: 12px 16px;
  align-items: center;
  align-self: stretch;

  background: var(--color-semantic-bg-content, #FFF);
  box-shadow: 0 3px 4px 0 rgba(55, 65, 81, 0.05);
}

.navigation a{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;

  border: 0;
  height: 32px;
  width: min-content;

  background: var(--Light-surface, #FFF);
  text-decoration: none;
  cursor: pointer;
  color: var(--palette-gray-700);
}

.navigation a img{
  width: 12px;
  height: auto;
  padding: 6px;
  box-sizing: content-box;
}

.navigation a p{
  display: flex;
  padding: 6px;
  margin: 0;

  white-space: nowrap;

  font-family: var(--font-font-base, Roboto);
  font-size: var(--font-size-3half, 14px);
  font-style: normal;
  font-weight: var(--font-regular, 400);
  line-height: var(--font-height-4, 16px);
}

.navigation-focus{
  color: var(--component-button-primary-text-text-default, #1D4ED8);
}

/* ====================================================================== */
/* ============================= TAB STYLE ============================== */
/* ====================================================================== */

.content-tab{
   display: flex;
   gap: var(--size-scale-1);
   padding: 4px 24px;
}

.content-tab > button{
  display: flex;
  padding: var(--size-gap-8, 8px) var(--size-gap-16, 16px);
  justify-content: center;
  align-items: center;
  gap: 4px;
  
  color: var(--palette-blue-700);
  border: none;
  border-radius: var(--size-radius-4, 4px);
  background: var(--palette-transparent, rgba(255, 255, 255, 0.00));
}

.content-tab > button:not(.tab-disable){
  cursor: pointer;
}

.content-card > button:hover:not(.tab-disable){
  background: var(--palette-blue-100);
}

.content-tab > .tab-focus{
  background: var(--palette-blue-200);
}

.content-tab > button > p{
  margin: 0;

  font-family: var(--font-font-base, Roboto);
  font-size: var(--font-size-3half, 14px);
  font-style: normal;
  font-weight: var(--font-regular, 400);
  line-height: var(--font-height-4, 16px);
}

.tab-disable p{
  color: var(--palette-gray-500);
}


/* ====================================================================== */
/* ============================ FILTER STYLE ============================ */
/* ====================================================================== */

.filter_input{
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 16px;
  flex: 1 0 0;
  flex-wrap: wrap;
  padding: var(--size-scale-6) var(--size-scale-6);
}

.filter_input > div{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.filter_input > div > input{
  display: flex;
  padding: var(--size-scale-half, 2px) var(--size-scale-3, 12px) var(--size-scale-half, 2px) var(--size-scale-2, 8px);
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  box-sizing: content-box;

  min-width: 314px;
  height: 26px;

  border-radius: var(--size-scale-1, 4px);
  border: 1px solid var(--semantic-light-neutral-solid-border-default, #6B7280);
  background: var(--semantic-light-neutral-subtle-bg-default, #F3F4F6);

  color: var(--palette-gray-900);
  font-family: var(--font-font-base, Roboto);
  font-size: var(--font-size-3half, 14px);
  font-style: normal;
  font-weight: var(--font-regular, 400);
  line-height: var(--font-height-4, 16px);
  outline: none;
}

.filter_input > div > input::placeholder {
  color: var(--palette-gray-500);
}

.filter_input > div > input:focus{
  border: 1px solid var(--palette-blue-600);

  box-shadow: 0 0 4px 2px #DBEAFE;
}

.filter_input > div > input:focus-within {
  border-color: var(--component-input-border-focus);
  box-shadow: var(--component-input-shadow-focus);
}

.filter_input > div > input.auth-input-wrapper--error {
  border-color: var(--component-input-border-error);
  box-shadow: var(--component-input-shadow-error);
}

.filter_input > div > input.auth-input-wrapper--error:focus-within {
  border-color: var(--component-input-border-error);
  box-shadow: var(--component-input-shadow-error);
}

.img_origin{
  width: 0;
  height: 34px;
  display: flex;
  align-items: center;
}

.img_origin img{
  width: auto;
  height: auto;
  position: relative;
  right: 28px;
}

.filter_input div input:disabled{
  border-radius: var(--size-scale-1, 4px) !important;
  border: 1px solid var(--palette-gray-300) !important;
  background: var(--palette-gray-300) !important;
}

.filter_button{
  display: flex;
  gap: 16px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 var(--size-scale-6) var(--size-scale-6) var(--size-scale-6);
}



/* ====================================================================== */
/* ======================= PAGINATION STYLE ============================= */
/* ====================================================================== */

.table-shell__left{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.table-shell__left button{
  height: 16px;
  width: min-content;
  margin: 0;
  padding: 0;
  background: none;
  border: none;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}

.table-shell__left button:disabled{
  cursor: default;
}

.table-shell__left button p{
  margin: 0;
  color: var(--component-button-primary-text-text-default, #1D4ED8);

  font-family: var(--font-font-base, Roboto);
  font-size: var(--font-size-3, 12px);
  font-style: normal;
  font-weight: var(--font-regular, 400);
  line-height: var(--font-height-4, 16px);
}

.table-shell__left button:disabled p{
  color: var(--component-button-primary-filled-text-disabled, #6B7280);
}

.table-shell__left p{
  margin: 0 0 0 12px;
  padding: 0;
  border: none;
  background: none;

  color: var(--Light-text, #37474F);

  font-family: var(--font-font-base, Roboto);
  font-size: var(--font-size-3, 12px);
  font-style: normal;
  font-weight: var(--font-regular, 400);
  line-height: var(--font-height-4, 16px);
}

.table-shell__right{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.table-shell__right > button{
  border-radius: var(--size-scale-1, 4px);
  border: 1px solid var(--semantic-light-neutral-solid-border-default, #6B7280);
  background: var(--semantic-light-neutral-subtle-bg-default, #F3F4F6);
  width: min-content;
  height: min-content;
  padding: var(--size-scale-2, 8px) var(--size-scale-3, 12px) var(--size-scale-2, 8px) var(--size-scale-2, 8px);

  color: var(--palette-gray-900);
  font-family: var(--font-font-base, Roboto);
  font-size: var(--font-size-3half, 14px);
  font-style: normal;
  font-weight: var(--font-regular, 400);
  line-height: var(--font-height-4, 16px);
}

.table-shell__right > button > img{
  margin: 0;
  height: auto;
  width: auto;
}

.table-shell__right > button > p{
  margin: 0;
  height: auto;
  width: auto;
  min-width: 26px;
  text-align: start;
}

.table-shell__right > button > .context_menu_origin{
  top: -17px;
  right: -13px;
}

.table-shell__right > button > .context_menu_origin > .context_menu_content{
  transform: translate(-100%, -100%);
}


/* ====================================================================== */
/* ===================== OVERLAY FORM STYLE ============================= */
/* ====================================================================== */

.overlay-form-bg{
  width: 100%;
  height: 100%;
  position: absolute;
  background: var(--palette-overlay, rgba(0, 0, 0, 0.70));
  z-index: 99;
  display: none;
  justify-content: center;
  overflow: auto;
  align-items: flex-start;
  padding: 20px 0;
}

.overlay-form-bg.is-open{
  display: flex;
}

.overlay-form{
  position: relative;
  display: flex;
  width: min-content;
  height: min-content;
  min-height: var(--size-popup-min-width, 400px);
  min-width: var(--size-popup-min-width, 400px);
  max-width: var(--size-popup-max-width, 800px);
  flex-direction: column;
  align-items: flex-start;
  
  box-shadow: 0 6px 28px 0 rgba(55, 65, 81, 0.50);
  background: var(--palette-white);

  border-radius: var(--size-scale-1);
  padding: 24px 0 0 0;
  gap: 12px;

  margin-top: auto;
  margin-bottom: auto;
}

.overlay-form > div:not(.ui-colset__body){
  width: 100%;
  padding: 0 24px 0 24px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 12px;
}

.overlay-form > div:not(.ui-colset__body) > h2{
  margin: 0;
}

.overlay-form > div:not(.ui-colset__body) > .auth-field{
  width: 100%;
}
.overlay-form > div:not(.ui-colset__body) > .auth-field > .auth-label-row{
  width: 250px;
}
.overlay-form > div:not(.ui-colset__body) > .auth-field > .auth-input-wrapper{
  width: 100%;
  height: 32px;
}
.overlay-form .filter_button{
  border-top: 1px solid var(--semantic-light-neutral-subtle-border-default, #D1D5DB);
  background: var(--semantic-light-surface-footer, #F3F4F6);
  border-radius: 0 0 var(--size-scale-1) var(--size-scale-1);
  padding: 16px 24px !important;
}
.overlay-form .img_origin img{
 right: 18px;
}

.btn-close-origin{
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute;
  right: 38px;
  top: 10px;
}

.btn-close{
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px var(--size-scale-2, 8px);
  cursor: pointer;
  box-sizing: content-box;
}

.filter_button .right-btn{
  margin-left: auto;
  border: none;
  color: var(--component-button-danger-outlined-text-default, #B91C1C);
  background: none;
}

.filter_button .right-btn:hover{
  background: var(--component-button-danger-text-bg-hover, #FEE2E2) !important;
  border: none !important;
}
.filter_button .right-btn:active{
  background: var(--component-button-danger-text-bg-active, #FECACA) !important;
  border: none !important;
}

/* ==================
   COMPONENTS: CHECKBOX (square)
   ================== */
.ui-checkbox{--cb-size:18px;--cb-radius:4px;--cb-border:1px;--cb-gap:1px;position:relative;width:var(--cb-size);height:var(--cb-size);display:inline-flex;cursor:pointer;}
.ui-checkbox input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.ui-checkbox__box{width:100%;height:100%;border-radius:var(--cb-radius);border:var(--cb-border) solid var(--palette-gray-400);background:var(--palette-white);box-sizing:border-box;display:flex;align-items:center;justify-content:center;}
.ui-checkbox__box::after{content:"";width:calc(100% - (var(--cb-gap) * 2) - (var(--cb-border) * 2));height:calc(100% - (var(--cb-gap) * 2) - (var(--cb-border) * 2));border-radius:calc(var(--cb-radius) - 2px);background:transparent;transition:background .15s ease;}
.ui-checkbox input:checked + .ui-checkbox__box::after,.ui-checkbox--indet .ui-checkbox__box::after{background:var(--palette-blue-600);}
.ui-checkbox:hover .ui-checkbox__box{border-color:var(--palette-blue-600);}
.ui-checkbox input:focus-visible + .ui-checkbox__box{box-shadow:var(--focus-shadow);border-color:var(--palette-blue-600);}
.ui-checkbox input:disabled + .ui-checkbox__box{border-color:var(--palette-gray-300);background:var(--palette-gray-100);cursor:default;}

/* ====================================================================== */
/* ======================= TABLE GRID ===================== */
/* ====================================================================== */
.ui-table-grid{--col-first:275px;--col-last:72px;--mid-min:160px;--mid-col:minmax(var(--mid-min),1fr);}
.ui-table-grid.cols-1{--mid-cols:1;}
.ui-table-grid.cols-2{--mid-cols:2;}
.ui-table-grid.cols-3{--mid-cols:3;}
.ui-table-grid.cols-4{--mid-cols:4;}
.ui-table-grid.cols-5{--mid-cols:5;}
.ui-table-grid.cols-6{--mid-cols:6;}
.ui-table-grid.cols-7{--mid-cols:7;}
.ui-table-grid.cols-8{--mid-cols:8;}
.ui-table-grid.cols-9{--mid-cols:9;}
.ui-table-grid.cols-10{--mid-cols:10;}

.ui-table-grid__row{display:grid;grid-template-columns:var(--col-first) repeat(var(--mid-cols), var(--mid-col)) var(--col-last);min-height:44px;border-bottom:1px solid var(--palette-gray-200);min-width:calc(var(--col-first) + (var(--mid-cols) * var(--mid-min)) + var(--col-last));background:var(--palette-white);overflow:visible;}
.ui-table-grid__row:hover{background:var(--palette-blue-100);}
.ui-table-grid__row.is-selected{background:var(--palette-blue-200);}

.ui-table-grid__head{position:sticky;top:0;z-index:10;background:var(--palette-gray-blue-100);}

.ui-table-grid__cell{position:relative;z-index:2;background:transparent;padding:var(--size-scale-2half) var(--size-scale-4);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;}
.ui-table-grid__cell--name{gap:var(--size-scale-1);}
.ui-table-grid__cell--audio{justify-content:space-between;}
.ui-table-grid__cell--pos{background:var(--palette-green-50);}
.ui-table-grid__cell--neg{background:var(--palette-red-50);}
.ui-table-grid__row:hover .ui-table-grid__cell--pos{background:color-mix(in srgb, var(--palette-green-50) 20%, var(--palette-blue-100));}
.ui-table-grid__row:hover .ui-table-grid__cell--neg{background:color-mix(in srgb, var(--palette-red-50) 20%, var(--palette-blue-100));}

.ui-table-grid__cell--first{position:sticky;left:0;z-index:5;background:inherit;overflow:visible;}
.ui-table-grid__head .ui-table-grid__cell--first{z-index:7;}
.ui-table-grid__cell--first::after{content:"";position:absolute;top:0;right:0px;width:14px;height:100%;pointer-events:none;background:linear-gradient(to right, rgba(55,65,81,.22), rgba(55,65,81,.10), rgba(55,65,81,0));opacity:0;transition:opacity .12s ease;z-index:1;}
.table-shell__body.is-scrolled-left .ui-table-grid__cell--first::after{opacity:1;}

.ui-table-grid__cell--actions{position:sticky;right:0;z-index:6;background:inherit;overflow:visible!important;}

/* ======================= */
/* PLAY ICON */
/* ======================= */
.ui-play{width:28px;height:28px;border-radius:var(--size-scale-1);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;}
.ui-play:hover{background:var(--palette-gray-200);}
.ui-play::before{content:"";width:18px;height:18px;display:block;background:url("/public/_company_6/assets/icons/play_blue.svg") center/18px 18px no-repeat;}
.ui-play.is-disabled{pointer-events:none;}
.ui-play.is-disabled::before{background-image:url("/public/_company_6/assets/icons/play_gray.svg");}

/* ================== 
   TABLE HEADER ICONS
   ================== */
.ui-th{font-family:var(--font-primary);font-size:var(--kit-md-font-size);line-height:var(--kit-md-line-height);font-weight:var(--weight-semibold);color:var(--palette-gray-700);}
.ui-th--with-icons{display:inline-flex;align-items:center;gap:var(--size-scale-1half);}
.ui-th__icons{display:inline-flex;align-items:center;gap:var(--size-scale-1half);}
.ui-td{font-family:var(--font-primary);font-size:var(--kit-md-font-size);line-height:var(--kit-md-line-height);font-weight:var(--kit-md-font-weight);color:var(--palette-gray-900);}
.ui-ico{width:18px;height:18px;display:inline-block;opacity:.75;background-repeat:no-repeat;background-position:center;background-size:contain;}
.ui-ico--sort{background-image:url("/public/_company_6/assets/icons/sort_down.svg");}
.ui-ico--filter{background-image:url("/public/_company_6/assets/icons/filter.svg");}
.ui-th .ui-ico:hover{opacity:1;}

.level-0 .cell:first-child{padding-left: 0px;}
.level-1 .cell:first-child{padding-left: 46px;}
.level-2 .cell:first-child{padding-left: 68px;}

/* ==================
   COMPONENTS: TABLE CHECKBOX (.ui-cb)
   ================== */
.ui-cb{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ui-cb__input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;}
.ui-cb__box{width:18px;height:18px;border-radius:var(--size-scale-1);border:1px solid var(--palette-gray-400);background:var(--palette-white);box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-size:12px 12px;}
.ui-cb__input:checked + .ui-cb__box{background-image:url("/public/_company_6/assets/icons/check_blue.svg");}
.ui-cb:hover .ui-cb__box{border-color:var(--palette-blue-600);}
.ui-cb__input:focus-visible + .ui-cb__box{box-shadow:var(--focus-shadow);border-color:var(--palette-blue-600);}
.ui-cb__input:disabled + .ui-cb__box{border-color:var(--palette-gray-300)!important;background-color:var(--palette-gray-200);}
.ui-cb__input:disabled:checked + .ui-cb__box{background-image:url("/public/_company_6/assets/icons/check_gray.svg");}
.ui-cb__input:disabled{cursor:default;}
.ui-cb--disabled .ui-cb__box{border-color:var(--palette-gray-300);background:var(--palette-gray-200);}
.ui-cb--disabled.is-checked .ui-cb__box{background-image:url("/public/_company_6/assets/icons/check_gray.svg");}
.ui-cb--disabled .ui-cb__input{cursor:default;}
.ui-cb--disabled:hover .ui-cb__box{border-color:var(--palette-gray-300);}

/* ================== 
   COMPONENTS: EXPANDER
   ================== */
.ui-expander{width:18px;height:18px;border-radius:var(--size-scale-1);border:1px solid var(--palette-gray-400);background:var(--palette-white);position:relative;flex:0 0 auto;cursor:pointer;}
.ui-expander::before,.ui-expander::after{content:"";position:absolute;background:var(--palette-blue-600);border-radius:1px;}
.ui-expander::before{width:10px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%);}
.ui-expander::after{width:1px;height:10px;top:50%;left:50%;transform:translate(-50%,-50%);}
.ui-expander.is-open::after{display:none;}
.ui-expander--ghost{opacity:0;pointer-events:none;cursor:default;}

/* ================== 
   COMPONENTS: PILLS + DATETIME
   ================== */
.ui-pill{display:inline-flex;align-items:center;height:28px;padding:0 var(--size-scale-2);border-radius:var(--size-scale-1);font-family:var(--font-primary);font-size:var(--kit-md-font-size);line-height:28px;font-weight:var(--weight-medium);color:var(--palette-white);}
.ui-pill--blue{background:var(--palette-blue-600);}
.ui-pill--cyan{background:var(--palette-cyan-500);}
.ui-pill--orange{background:var(--palette-orange-500);}
.ui-pill--red{background:var(--palette-red-600);}
.ui-pill--soft-blue{background:var(--palette-blue-100);color:var(--palette-blue-700);}
.ui-dt{display:flex;flex-direction:column;gap:var(--size-scale-half);}
.ui-dt__date{font-family:var(--font-primary);font-size:var(--kit-md-font-size);line-height:var(--kit-md-line-height);font-weight:var(--kit-md-font-weight);color:var(--palette-gray-900);}
.ui-dt__time{font-family:var(--font-primary);font-size:var(--kit-xs-font-size);line-height:var(--kit-xs-line-height);font-weight:var(--kit-xs-font-weight);color:var(--palette-gray-500);}

/* ==================
   COMPONENTS: HEAD MENU (table header)
   ================== */
.ui-head-menu{position:relative;display:inline-flex;align-items:center;}
.ui-head-menu__trigger{width:36px;height:36px;border-radius:var(--size-scale-1half);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;}
.ui-head-menu__trigger:hover{background:var(--palette-gray-100);}
.ui-head-menu__trigger:focus-visible{outline:none;box-shadow:var(--focus-shadow);}
.ui-ico--more{width:18px;height:18px;background:url("/public/_company_6/assets/icons/more.svg") center/18px 18px no-repeat;opacity:.9;}
.ui-head-menu__dropdown{position:absolute;top:calc(100% + 8px);right:0;width:360px;background:var(--palette-white);border:1px solid var(--palette-gray-300);border-radius:var(--size-scale-2);box-shadow:var(--popup-shadow);padding:var(--size-scale-2) 0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .12s ease,transform .12s ease,visibility .12s ease;z-index:9999;font-family:var(--font-primary);font-size:var(--kit-md-font-size);line-height:var(--kit-md-line-height);font-weight:var(--kit-md-font-weight);color:var(--palette-gray-700);}
.ui-head-menu.is-open .ui-head-menu__dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.ui-menu-divider{height:1px;background:var(--palette-gray-200);margin:var(--size-scale-2) 0;}
.ui-menu-title{font-size:var(--kit-md-font-size);line-height:var(--kit-md-line-height);font-weight:var(--weight-regular);color:var(--palette-gray-500);padding:var(--size-scale-2) var(--size-scale-4);}
.ui-menu-item{display:flex;align-items:center;gap:var(--size-scale-3);cursor:pointer;font-size:var(--kit-md-font-size);line-height:var(--kit-md-line-height);font-weight:var(--kit-md-font-weight);color:var(--palette-gray-700);padding:var(--size-scale-3) var(--size-scale-4);}
.ui-menu-item:hover{background:var(--palette-blue-100);}
.ui-menu-item.is-danger{color:var(--palette-red-600);}
.ui-menu-item.is-danger:hover{background:var(--palette-red-100);}
.ui-menu-meta{margin-left:auto;display:inline-flex;align-items:center;}
.ui-menu-ico{width:14px;height:14px;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.9;}
.ui-menu-item.is-disabled{color:var(--palette-gray-400);cursor:default;pointer-events:none;}
.ui-menu-item.is-disabled .ui-menu-ico{opacity:.45;}
.ui-menu-ico--width_black{background-image:url("/public/_company_6/assets/icons/width_black.svg");}
.ui-menu-ico--width-gray{background-image:url("/public/_company_6/assets/icons/width_gray.svg");}
.ui-menu-ico--filter-reset{background-image:url("/public/_company_6/assets/icons/filter.svg");}
.ui-menu-ico--sort-reset{background-image:url("/public/_company_6/assets/icons/sort_down.svg");}
.ui-menu-ico--info{background-image:url("/public/_company_6/assets/icons/info.svg");}
.ui-menu-ico--pdf{background-image:url("/public/_company_6/assets/icons/file_pdf.svg");}
.ui-menu-ico--xls{background-image:url("/public/_company_6/assets/icons/file_xls.svg");}
.ui-menu-ico--csv{background-image:url("/public/_company_6/assets/icons/file_csv.svg");}
.ui-menu-ico--trash{background-image:url("/public/_company_6/assets/icons/trash_red.svg");}

/* ==================
   COMPONENTS: ROW ACTIONS MENU
   ================== */
.ui-row-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--size-scale-2);width:100%;}
.ui-table-grid__row .ui-row-actions{opacity:0;pointer-events:none;transition:opacity .12s ease;}
.ui-table-grid__row:hover .ui-row-actions,.ui-table-grid__row.is-selected .ui-row-actions{opacity:1;pointer-events:auto;}
.ui-act{width:28px;height:28px;border-radius:var(--size-scale-1);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.ui-act:hover{background:var(--palette-gray-200);}
.ui-act--gear::before{content:"";width:18px;height:18px;display:block;background:url("/public/_company_6/assets/icons/administr_blue.svg") center/18px 18px no-repeat;}
.ui-act--more::before{content:"";width:18px;height:18px;display:block;background:url("/public/_company_6/assets/icons/more.svg") center/14px 14px no-repeat;}
.ui-act--trash::before{content:"";width:18px;height:18px;display:block;background:url("/public/_company_6/assets/icons/trash_red.svg") center/14px 14px no-repeat;}
.ui-menu{position:relative;}
.ui-menu__panel{position:absolute;right:0;top:calc(100% + 6px);width:280px;background:var(--palette-white);border:1px solid var(--palette-gray-200);border-radius:var(--size-scale-1);box-shadow:var(--popup-shadow);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease,visibility .12s ease;z-index:50;}
.ui-menu.is-open .ui-menu__panel{opacity:1;visibility:visible;transform:translateY(0);}
.ui-menu__item{height:48px;padding:0 var(--size-scale-4);display:flex;align-items:center;gap:var(--size-scale-3);cursor:pointer;user-select:none;font-family:var(--font-primary);font-size:var(--text-text2-font-size);line-height:var(--text-text2-line-height);font-weight:var(--weight-regular);color:var(--palette-gray-900);}
.ui-menu__item + .ui-menu__item{border-top:1px solid var(--palette-gray-200);}
.ui-menu__item:hover{background:var(--palette-gray-100);}
.ui-menu__item--danger{color:var(--palette-red-700);background:rgba(239,68,68,.12);}
.ui-menu__item--danger:hover{background:rgba(239,68,68,.16);}
.ui-menu__ico{width:18px;height:18px;flex:0 0 18px;background-repeat:no-repeat;background-position:center;background-size:18px 18px;}
.ui-menu__ico--copy{background-image:url("/public/_company_6/assets/icons/copy.svg");}
.ui-menu__ico--trash{background-image:url("/public/_company_6/assets/icons/trash_red.svg");}

/* ==================
   COMPONENTS: MODAL (overlay + window)
   ================== */
.ui-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:999;}
.ui-modal-overlay.is-open{display:flex;}
.ui-modal{width:620px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);background:var(--palette-white);border-radius:var(--size-scale-2);box-shadow:var(--popup-shadow);overflow:hidden;}

/* =========================
   Column settings modal
   ========================= */
.ui-colset{position:relative;display:flex;flex-direction:column;}
.ui-colset__close{position:absolute;top:2px;right:2px;width:32px;height:32px;background:url("/public/_company_6/assets/icons/close_blue.svg") center/16px 16px no-repeat;cursor:pointer;opacity:.9;z-index:5;}
.ui-colset__close:hover{opacity:1;}
.ui-colset__head{height:56px;padding:var(--size-scale-9) var(--size-scale-6);display:flex;align-items:center;justify-content:space-between;}
.ui-colset__title{font-family:var(--font-primary);font-size:var(--header-h2-font-size,24px);line-height:var(--header-h2-line-height,32px);font-weight:var(--header-h2-font-weight,var(--weight-medium));color:var(--palette-gray-900);}
.ui-colset__body{padding:0 var(--size-scale-6) var(--size-scale-6);overflow:auto;min-height:0;border-bottom:1px solid var(--palette-gray-200);}
.ui-colset__search{display:grid;grid-template-columns:1fr 120px;gap:var(--size-scale-3);align-items:center;}
.ui-search{height:40px;display:flex;align-items:center;gap:var(--size-scale-2);padding:0 var(--size-scale-3);border-radius:var(--size-scale-1half);border:1px solid var(--palette-blue-600);background:var(--palette-gray-50);}
.ui-search__ico{width:16px;height:16px;flex:0 0 16px;background:url("/public/_company_6/assets/icons/search.svg") center/contain no-repeat;opacity:.8;}
.ui-search__input{border:none;outline:none;background:transparent;width:100%;font-family:var(--font-primary);font-size:var(--kit-md-font-size);line-height:var(--kit-md-line-height);font-weight:var(--kit-md-font-weight);color:var(--palette-gray-900);}
.ui-search__input::placeholder{color:var(--palette-gray-500);}

/* ==================
   COMPONENTS: BUTTONS (.ui-btn)
   ================== */
.ui-btn{height:40px;border-radius:var(--size-scale-1half);display:inline-flex;align-items:center;justify-content:center;padding:0 var(--size-scale-4);user-select:none;cursor:pointer;font-family:var(--font-primary);font-size:var(--kit-md-font-size);line-height:var(--kit-md-line-height);font-weight:var(--kit-md-font-weight);}
.ui-btn--outline{background:var(--palette-white);border:1px solid var(--palette-gray-400);color:var(--palette-gray-900);}
.ui-btn--outline:hover{border-color:var(--palette-gray-500);}
.ui-btn--primary{background:var(--palette-blue-600);color:var(--palette-white);}
.ui-btn--primary:hover{background:var(--palette-blue-500);}
.ui-btn--muted{background:var(--palette-gray-600);color:var(--palette-white);}
.ui-btn--muted:hover{filter:brightness(1.05);}
.ui-btn--wide{width:100%;height:44px;border-radius:var(--size-scale-1);}

.ui-colset__fixed{padding:var(--size-scale-2) 0;}
.ui-colset__list{display:flex;flex-direction:column;gap:0;padding:var(--size-scale-2) 0;}
.ui-colrow{display:grid;grid-template-columns:22px 1fr 18px;gap:var(--size-scale-1);align-items:center;padding:var(--size-scale-2) var(--size-scale-9);border-radius:var(--size-scale-1);}
.ui-colrow:hover{background:var(--palette-blue-100);}
.ui-colrow--fixed{padding:var(--size-scale-2) var(--size-scale-9);border-radius:0;}
.ui-colset__fixed .ui-colrow--fixed{grid-template-columns:22px 1fr;gap:var(--size-scale-1);}
.ui-colrow__name{font-family:var(--font-primary);font-size:var(--kit-md-font-size);line-height:var(--kit-md-line-height);font-weight:var(--kit-md-font-weight);color:var(--palette-gray-900);}
.ui-colrow__desc{font-family:var(--font-primary);font-size:var(--kit-xs-font-size);line-height:var(--kit-xs-line-height);font-weight:var(--kit-xs-font-weight,var(--kit-xs-font-weight));color:var(--palette-gray-500);}
.ui-colrow__grab{width:18px;height:18px;justify-self:end;opacity:.75;background:url("/public/_company_6/assets/icons/drag_handle.svg") center/contain no-repeat;}
.ui-colrow:hover .ui-colrow__grab{opacity:1;}
.ui-colset__footer{padding:var(--size-scale-4) var(--size-scale-6);background:var(--palette-gray-50);display:flex;align-items:center;justify-content:space-between;}
.ui-colset__footer-left{display:inline-flex;align-items:center;gap:var(--size-scale-3);}
.ui-colset__footer-right{display:inline-flex;align-items:center;}
.ui-link{font-family:var(--font-primary);font-size:var(--kit-md-font-size);line-height:var(--kit-md-line-height);font-weight:var(--kit-md-font-weight);cursor:pointer;user-select:none;}
.ui-link--danger{color:var(--palette-red-600);}
.ui-link--danger:hover{text-decoration:underline;}

.templates { display: none; }
.dataError { color: var(--palette-red-600); }