/* =================================
   1. GLOBAL & SETUP
   ================================= */
:root {
  /* Brand Colors */
  --color-orange: #ee4023;
  --color-pink: #ec268f;
  --color-black: #161616;
  --color-blue: #00a7e9;
  /* Full Color Palette */
  --colors-brand-50: #fce3f0;
  --colors-brand-100: #f5aad0;
  --colors-brand-200: #ef83ba;
  --colors-brand-300: #e8519d;
  --colors-brand-400: #e3348a;
  --colors-brand-500: #e10a7b;
  --colors-brand-600: #c60d65;
  --colors-brand-700: #960b4d;
  --colors-brand-800: #710a3c;
  --colors-brand-900: #54082e;
  --colors-error-50: #ffeded;
  --colors-error-100: #fbd0ce;
  --colors-error-200: #f8aba6;
  --colors-error-300: #f4847d;
  --colors-error-400: #f15f56;
  --colors-error-500: #ee3c31;
  --colors-error-600: #ca332a;
  --colors-error-700: #ab2017;
  --colors-error-800: #88221c;
  --colors-error-900: #6b1b16;
  --colors-grey-00: #ffffff;
  --colors-grey-40: #fafafc;
  --colors-grey-80: #f3f5f8;
  --colors-grey-100: #f0f2f6;
  --colors-grey-200: #e7e9ee;
  --colors-grey-300: #cacfd8;
  --colors-grey-400: #8d98aa;
  --colors-grey-500: #5b657a;
  --colors-grey-600: #3e4a5c;
  --colors-grey-700: #2e384a;
  --colors-grey-800: #1b2532;
  --colors-grey-900: #111724;
  --colors-info-50: #e8f4ff;
  --colors-info-100: #c8e4ff;
  --colors-info-200: #9ccfff;
  --colors-info-300: #6db9ff;
  --colors-info-400: #42a4ff;
  --colors-info-500: #1890ff;
  --colors-info-600: #147ad9;
  --colors-info-700: #175cd3;
  --colors-info-800: #1a51af;
  --colors-info-900: #1f4991;
  --colors-purple-50: #f5edfb;
  --colors-purple-100: #e0c8f4;
  --colors-purple-200: #d1adee;
  --colors-purple-300: #bc87e7;
  --colors-purple-400: #af70e2;
  --colors-purple-500: #9b4cdb;
  --colors-purple-600: #8d45c7;
  --colors-purple-700: #812ac7;
  --colors-purple-800: #7510c7;
  --colors-purple-900: #5b1891;
  --colors-success-50: #f0faf5;
  --colors-success-100: #dcf2e2;
  --colors-success-200: #9fd6ae;
  --colors-success-300: #72c389;
  --colors-success-400: #47b065;
  --colors-success-500: #1f9f43;
  --colors-success-600: #1a8739;
  --colors-success-700: #167130;
  --colors-success-800: #125b26;
  --colors-success-900: #0e481e;
  --colors-warning-50: #fff9ec;
  --colors-warning-100: #ffeece;
  --colors-warning-200: #ffd88c;
  --colors-warning-300: #ffcc69;
  --colors-warning-400: #ffb54f;
  --colors-warning-500: #f59309;
  --colors-warning-600: #ee8104;
  --colors-warning-700: #af5e08;
  --colors-warning-800: #7e4514;
  --colors-warning-900: #613410;
}

@font-face {
  font-family: GTWalsheimPro;
  src: url("fonts/GT_regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: GTWalsheimPro;
  src: url("fonts/GT_medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: GTWalsheimPro;
  src: url("fonts/GT_bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

* {
  box-sizing: border-box;
  font-family: "GTWalsheimPro", Verdana, sans-serif;
}

body {
  margin: 0;
  background-color: var(--colors-grey-00);
  color: var(--colors-grey-900);
  overflow: hidden;
}

/* =================================
   2. BASE TYPOGRAPHY & HELPERS
   ================================= */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin: 0;
  color: var(--colors-grey-900);
}

h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.8px;
}

h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.64px;
}

h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.48px;
}

h4 {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.48px;
}

h5 {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.36px;
}

p {
  line-height: 1.5;
}

strong {
  font-weight: 500;
}

.body-xs {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.body-small {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.body-small-strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.body-medium {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.body-medium-strong {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.body-medium-long {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.body-large {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.body-large-strong {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.error-text {
  color: var(--colors-error-500) !important;
}

.success-text {
  color: var(--colors-success-500);
}

.grey-text {
  color: var(--colors-grey-500);
}

a,
a:visited {
  color: var(--colors-grey-900);
  text-decoration: underline;
  cursor: pointer;
}

a:hover {
  color: var(--colors-brand-500);
}

a.tertiary {
  text-decoration: none;
}

ul {
  padding-inline-start: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

/* =================================
   3. LAYOUT WRAPPERS
   ================================= */
#app-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.wrapper {
  display: flex;
  align-items: stretch;
}

.wrapper.col {
  flex-direction: column;
}

.wrapper.center {
  align-items: center;
}

.wrapper.end {
  align-items: flex-end;
}

.wrapper.start {
  align-items: flex-start !important;
}

.wrapper.col.start {
  justify-content: flex-start !important;
}

.wrapper.fill {
  justify-content: space-between;
  align-self: stretch;
  align-items: center;
}

.wrapper.gap4 {
  gap: 4px;
}

.wrapper.gap8 {
  gap: 8px;
}

.wrapper.gap16 {
  gap: 16px;
}

.wrapper.gap12 {
  gap: 12px;
}

.wrapper.gap24 {
  gap: 24px;
}

.wrapper.gap32 {
  gap: 32px;
}

.wrapper.wrap {
  flex-wrap: wrap;
}

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

.h-full {
  height: 100% !important;
}

.w-full {
  width: 100% !important;
}

.flex-2 {
  flex: 2;
  min-width: 0;
}

.cursor-pointer {
  cursor: pointer;
}

.align-start {
  align-self: flex-start;
}

/* =================================
   GRID LAYOUT WRAPPERS
   ================================= */
.wrapper-grid {
  display: grid;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

.wrapper-grid>* {
  height: 100%;
}

/* Warianty kolumn */
.wrapper-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.wrapper-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.wrapper-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.wrapper-grid.cols-auto {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.wrapper-grid.cols-2-1 {
  grid-template-columns: 2fr 1fr;
}

@media screen and (max-width: 1024px) {

  .wrapper-grid.cols-3,
  .wrapper-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {

  .wrapper-grid.cols-2,
  .wrapper-grid.cols-3,
  .wrapper-grid.cols-4,
  .wrapper-grid.cols-2-1 {
    grid-template-columns: 1fr;
  }
}

/* =================================
   4. CORE COMPONENTS
   ================================= */

/* Buttons */
button,
button.primary {
  display: inline-flex;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  height: 40px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  background: var(--colors-brand-500);
  color: var(--colors-grey-00);
}

button:hover,
button.primary:hover {
  background-color: var(--colors-brand-700);
}

button.secondary {
  color: var(--colors-brand-500);
  border-color: var(--colors-brand-500);
  background: var(--colors-grey-00);
}

button.secondary:hover {
  color: var(--colors-brand-700);
  border-color: var(--colors-brand-700);
}

button.tonal {
  color: var(--colors-grey-700);
  border-color: var(--colors-grey-300);
  background: var(--colors-grey-00);
}

button.tonal:hover {
  border-color: var(--colors-grey-400);
}

button:disabled,
button.primary:disabled,
button.secondary:disabled,
button.tonal:disabled {
  color: var(--colors-grey-400);
  border-color: var(--colors-grey-200);
  background: var(--colors-grey-100);
  cursor: not-allowed;
}

button.small {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 16px;
  height: 32px;
}

.quartiary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  text-decoration: none;
}

.quartiary-btn .material-symbols-outlined {
  color: var(--colors-grey-500);
  cursor: pointer;
}

.quartiary-btn:hover {
  background-color: var(--colors-grey-200);
}

.quartiary {
  border-radius: 8px;
  cursor: pointer;
  border: 8px solid transparent;
  margin: -8px;
  transition: all 0.2s ease;
}

.quartiary:hover {
  background-color: var(--colors-grey-100);
  border-color: var(--colors-grey-100);
  color: var(--colors-grey-900);
}

/* Material Icons */
.material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.material-symbols-outlined.no-fill {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 !important;
}

.material-symbols-outlined.hover-only {
  opacity: 0;
  transition: opacity 0.2s;
}

/* Avatar */
.avatar-small {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--colors-grey-200);
}

/* Wave Loader */
.loading-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1000;
}

.wave-loader {
  display: flex;
  gap: 4px;
  align-items: end;
  height: 50px;
}

.wave-loader .ellipse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: wave 1.2s ease-in-out infinite;
  transform-origin: center bottom;
}

.wave-loader .ellipse:nth-child(1) {
  background: var(--color-orange);
  animation-delay: 0s;
}

.wave-loader .ellipse:nth-child(2) {
  background: var(--color-pink);
  animation-delay: 0.15s;
}

.wave-loader .ellipse:nth-child(3) {
  background: var(--color-black);
  animation-delay: 0.3s;
}

.wave-loader .ellipse:nth-child(4) {
  background: var(--color-blue);
  animation-delay: 0.45s;
}

@keyframes wave {

  0%,
  40%,
  100% {
    height: 12px;
  }

  20% {
    height: 40px;
  }
}

/* =================================
   5. APP VIEWS & LAYOUT
   ================================= */

.sticky-top-header {
  flex-shrink: 0;
  padding: 24px 80px 0 80px;
  background: var(--colors-grey-40);
  border-bottom: 1px solid var(--colors-grey-200);
  z-index: 20;
  margin-bottom: 16px;
}

.sticky-top-header>.wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 24px;
}

.main-content {
  flex-grow: 1;
  overflow-y: auto;
  background-color: var(--colors-grey-00);
  padding: 0 80px 32px 80px;
}

.main-content>.content-wrapper-full {
  margin-left: auto;
  margin-right: auto;
  padding-top: 32px;
}

.content-wrapper-full {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Auth/Login View Specific Styles */
.auth-section {
  background-color: var(--colors-grey-00);
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  margin: auto;
  /* Centers the login box */
}



/* =================================
   6. TABLE COMPONENT
   ================================= */
.table-wrapper {
  width: 100%;
  position: relative;
  border-radius: 4px;
  border: 1px solid var(--colors-grey-200);
}

.table-body {
  overflow-x: auto;
}

.table {
  display: flex;
  flex-direction: column;
}

.table-header-row {
  position: sticky;
  top: 0;
  z-index: 5;
  overflow: hidden;
}

.table-header-row,
.table-row {
  display: flex;
  width: 100%;
}

.table-row:last-child>.table-cell {
  border-bottom: none;
}

.table-cell {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--colors-grey-200);
  background-color: var(--colors-grey-00);
  transition: background-color 0.2s ease;
}

.table-cell.with-border {
  border-right: 1px solid var(--colors-grey-200);
  border-bottom: 1px solid var(--colors-grey-300);
}

.table-row>.table-cell.with-border:last-child {
  border-right: none;
}

.table-cell.header {
  font-size: 12px;
  font-weight: 500;
  color: var(--colors-grey-600);
  background-color: var(--colors-grey-80);
  justify-content: space-between;
  align-items: center;
}

.table-cell.header.asc>span,
.table-cell.header.desc>span {
  color: var(--colors-brand-500);
}

.table-header-row .table-cell.sticky-left,
.table-row .table-cell.sticky-left {
  position: sticky;
  z-index: 2;
  background-color: var(--colors-grey-00);
  /* Dodajemy cień, aby oddzielić kolumnę */
  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.1);
}

.table-header-row .table-cell.sticky-left {
  z-index: 4;
  /* Nagłówek sticky musi być wyżej */
  background-color: var(--colors-grey-80);
}

.table-header-row .table-cell.sticky-right,
.table-row .table-cell.sticky-right {
  position: sticky;
  z-index: 1;
  background-color: var(--colors-grey-00);
  /* Cień po lewej stronie */
  box-shadow: -2px 0 5px -2px rgba(0, 0, 0, 0.1);
}

.table-header-row .table-cell.sticky-right {
  z-index: 3;
  /* Nagłówek jest wyżej */
  background-color: var(--colors-grey-80);
}

/* --- Table Sub-components --- */
.sort-button {
  background: none;
  border: 1px solid transparent;
  padding: 4px;
  margin: -4px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.sort-button:hover {
  background-color: var(--colors-grey-200);
}

.sort-button .sort-icon {
  font-size: 18px;
  color: var(--colors-grey-400);
  transition: color 0.2s, transform 0.2s ease-in-out;
}

.table-cell.header.asc .sort-icon,
.table-cell.header.desc .sort-icon {
  color: var(--colors-brand-500);
}

.table-cell.header.desc .sort-icon {
  transform: rotate(180deg);
}

.table-cell .table-link {
  cursor: pointer;
  color: var(--colors-grey-700);
  font-weight: 400;
  transition: background-color 0.2s;
  padding: 4px 8px;
  border-radius: 4px;
}

.table-cell .table-link:hover {
  color: var(--colors-grey-900);
  background-color: var(--colors-grey-200);
}

.table-cell.highlight-match {
  background-color: var(--colors-warning-100) !important;
  border-radius: 2px;
}

/* Badge Component */

.badge {
  display: inline-flex;
  padding: 4px 10px;
  align-items: center;
  gap: 6px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  align-self: flex-start;
  cursor: default;
  user-select: none;
}

.badge.small {
  font-size: 12px;
  padding: 2px 6px;
}

.badge .material-symbols-outlined {
  font-size: 14px;
}

.badge.icon-only {
  padding: 4px;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
}

.badge.warning {
  background: var(--colors-warning-50);
  color: var(--colors-warning-700);
  border: 1px solid var(--colors-warning-200);
}

.badge.error {
  background: var(--colors-error-50);
  color: var(--colors-error-700);
  border: 1px solid var(--colors-error-200);
}

.badge.green {
  background: var(--colors-success-50);
  color: var(--colors-success-700);
  border: 1px solid var(--colors-success-200);
}

.badge.grey {
  background: var(--colors-grey-100);
  color: var(--colors-grey-700);
  border: 1px solid var(--colors-grey-200);
}

.badge.lightgrey {
  background: var(--colors-grey-80);
  color: var(--colors-grey-400);
  border: 1px solid var(--colors-grey-80);
}

.badge.blue {
  background: var(--colors-info-50);
  color: var(--colors-info-700);
  border: 1px solid var(--colors-info-200);
}

.badge.purple {
  background: var(--colors-purple-50);
  color: var(--colors-purple-700);
  border: 1px solid var(--colors-purple-200);
}

.badge.pink {
  background: var(--colors-brand-50);
  color: var(--colors-brand-700);
  border: 1px solid var(--colors-brand-200);
}

.badge.darkgrey {
  background: var(--colors-grey-600);
  color: var(--colors-grey-00);
  border: 1px solid var(--colors-grey-600);
}

.badge.darkgreen {
  background: var(--colors-success-600);
  color: var(--colors-grey-00);
  border: 1px solid var(--colors-success-600);
}

.badge.darkred {
  background: var(--colors-error-600);
  color: var(--colors-grey-00);
  border: 1px solid var(--colors-error-600);
}

.badge.darkblue {
  background: var(--colors-info-600);
  color: var(--colors-grey-00);
  border: 1px solid var(--colors-info-600);
}

.badge.darkpink {
  background: var(--colors-brand-400);
  color: var(--colors-grey-00);
  border: 1px solid var(--colors-brand-400);
}

.badge.orange {
  background: var(--colors-warning-600);
  color: var(--colors-grey-00);
  border: 1px solid var(--colors-warning-600);
}

.context-menu-wrapper {
  position: relative;
}

.context-menu {
  position: fixed;
  z-index: 1000;
  background-color: var(--colors-grey-00);
  border: 1px solid var(--colors-grey-200);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 8px;
  margin: 0;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.1s ease-in-out;
  transform: translateY(-4px);
}

.context-menu.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--colors-grey-900);
  white-space: nowrap;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.context-menu-item:hover {
  background-color: var(--colors-grey-100);
}

.context-menu-item.destructive {
  color: var(--colors-error-700);
}

.context-menu-item.destructive:hover {
  color: var(--colors-error-900);
  background-color: var(--colors-error-50);
}


/* =================================
   7. FILTERS & SEARCH
   ================================= */
.quickfilters-container {
  display: flex;
}

.quickfilter {
  display: flex;
  padding: 0 16px;
  height: 40px;
  align-items: center;
  font-size: 14px;
  border: 1px solid var(--colors-grey-200);
  background: var(--colors-grey-00);
  color: var(--colors-grey-500);
  cursor: pointer;
  transition: all 0.2s ease;
}

.quickfilter:first-child {
  border-radius: 4px 0 0 4px;
}

.quickfilter:last-child {
  border-radius: 0 4px 4px 0;
}

.quickfilter:not(:last-child) {
  border-right: none;
}

.quickfilter:hover {
  background-color: var(--colors-grey-80);
  color: var(--colors-grey-900);
}

.quickfilter:active {
  background-color: var(--colors-grey-200);
  color: var(--colors-grey-900);
}

.quickfilter.active {
  background: var(--colors-grey-100);
  color: var(--colors-grey-900);
}

.search-input-wrapper {
  display: flex;
  gap: 4px;
  padding: 9px;
  width: 240px;
  border: 1px solid var(--colors-grey-300);
  border-radius: 4px;
  background: var(--colors-grey-00);
  height: 40px;
}

.search-input-wrapper:focus-within {
  border-color: var(--colors-grey-500);
}

.search-input-wrapper .prefix .material-symbols-outlined {
  font-size: 20px;
  color: var(--colors-grey-500);
}

.search-input-wrapper input {
  width: 100%;
  font-size: 14px;
  border: none;
  background: none;
  outline: none;
}

.search-input-wrapper .prefix {
  display: flex;
  align-items: center;
}


/* =================================
   8. CUSTOM SELECT COMPONENT
   ================================= */

.custom-select {
  position: relative;
  font-size: 14px;
}

.select-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 8px 12px;
  background: var(--colors-grey-00);
  border: 1px solid var(--colors-grey-300);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.select-display:hover {
  border-color: var(--colors-grey-400);
}

.custom-select.open .select-display {
  border-color: var(--colors-grey-500);
}

.select-display.placeholder span {
  color: var(--colors-grey-500);
}

.select-display .material-symbols-outlined {
  transition: transform 0.2s;
  color: var(--colors-grey-500);
}

.custom-select.open .select-display .material-symbols-outlined {
  transform: rotate(180deg);
}

.select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--colors-grey-00);
  border: 1px solid var(--colors-grey-200);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.custom-select.open .select-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.select-search {
  width: calc(100% - 16px) !important;
  margin: 8px;
  padding: 8px 12px;
  border: 1px solid var(--colors-grey-300);
  border-radius: 4px;
  outline: none;
}

.select-search:focus {
  border-color: var(--colors-grey-700);
}

.select-options {
  list-style: none;
  padding: 8px;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.select-options li {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  display: block;
}

.select-options li.hidden {
  display: none;
}

.select-options li:hover {
  background-color: var(--colors-grey-100);
}

.select-options li.selected {
  background-color: var(--colors-brand-50);
  color: var(--colors-grey-900);
  font-weight: 500;
}

.select-options li.divider {
  height: 1px;
  margin: 4px 0;
  padding: 0;
  background-color: var(--colors-grey-200);
  cursor: default;
}

.select-options li.divider:hover {
  background-color: var(--colors-grey-200);
}

.select-options li.group-label {
  padding: 12px 12px 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--colors-grey-500);
  cursor: default;
}

.select-options li.group-label:hover {
  background-color: transparent !important;
}

.select-options li:not(.group-label):not(.divider) {
  padding-left: 24px;
}

.select-display .select-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.select-display .clear-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-display .clear-btn .material-symbols-outlined {
  font-size: 18px;
  color: var(--colors-grey-500);
}

.select-display .clear-btn:hover .material-symbols-outlined {
  color: var(--colors-grey-900);
}

/* =================================
   9. TOOLTIPS & TOASTS
   ================================= */

/* --- Tooltip --- */
.tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s, transform 0.2s;
  max-width: 300px;
  text-align: left;
}

.tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Toastify Overrides --- */
.toastify.custom-toast {
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 16px;
  border-radius: 4px;
  color: var(--colors-grey-900);
  font-size: 16px;
  font-family: "GTWalsheimPro", Verdana, sans-serif;
  font-weight: 500;
  line-height: 20px;
  min-width: 320px;
  border: 1px solid;
  background: none;
  box-shadow: none;
  cursor: default;
}

.toastify.custom-toast .wrapper {
  align-items: center;
}

.toastify.toast-info {
  background-color: var(--colors-info-100);
  border-color: var(--colors-info-500);
}

.toastify.toast-success {
  background-color: var(--colors-success-100);
  border-color: var(--colors-success-500);
}

.toastify.toast-error {
  background-color: var(--colors-error-100);
  border-color: var(--colors-error-500);
}

.toastify.toast-warning {
  background-color: var(--colors-warning-100);
  border-color: var(--colors-warning-500);
}

.toastify .toast-icon {
  font-size: 24px;
}

.toastify.toast-info .toast-icon {
  color: var(--colors-info-500);
}

.toastify.toast-success .toast-icon {
  color: var(--colors-success-500);
}

.toastify.toast-error .toast-icon {
  color: var(--colors-error-500);
}

.toastify.toast-warning .toast-icon {
  color: var(--colors-warning-500);
}


/* Copyable Text */
.copyable {
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.copyable:hover {
  background-color: var(--colors-grey-200);
  color: var(--colors-grey-900);
}

.copyable .material-symbols-outlined.hover-only,
.quartiary .material-symbols-outlined.hover-only,
.table-link .material-symbols-outlined.hover-only {
  font-size: 16px;
  color: var(--colors-grey-500);
}

.copyable:hover .material-symbols-outlined.hover-only,
.quartiary:hover .material-symbols-outlined.hover-only,
.table-link:hover .material-symbols-outlined.hover-only {
  opacity: 1;
}

/* =================================
   10. MODAL COMPONENT & FORM ELEMENTS
   ================================= */
body.modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(194, 203, 215, 0.7);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 48px;
  z-index: 1000;
  backdrop-filter: blur(1.5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.modal-window {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 1140px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.modal-overlay.is-visible .modal-window {
  transform: scale(1);
  opacity: 1;
}


.modal-header {
  padding: 24px 32px 16px 32px;
  border-bottom: 1px solid var(--colors-grey-200);
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-shrink: 0;
}

.modal-body {
  display: flex;
  flex-grow: 1;
  overflow-y: hidden;
  background-color: var(--colors-grey-80);
}

.modal-footer {
  padding: 16px 32px;
  border-top: 1px solid var(--colors-grey-200);
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.modal-content-container {
  width: 100%;
  padding: 16px 24px;
  overflow-y: auto;
}

.form-container {
  width: 50%;
  padding: 32px;
  background: var(--colors-grey-00);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 16px;
  font-weight: 500;
  color: var(--colors-grey-900);
}

.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--colors-grey-300);
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
  font-family: "GTWalsheimPro", Verdana, sans-serif;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--colors-grey-500);
}

.form-group textarea {
  resize: none;
  min-height: 120px;
}

.inactive {
  opacity: 0.6;
  pointer-events: none;
}

.radio-group {
  display: flex;
  gap: 8px;
}

.pill-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pill-button {
  background-color: var(--colors-grey-100);
  color: var(--colors-grey-700);
  border: 1px solid var(--colors-grey-200);
  border-radius: 16px;
  padding: 2px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  height: auto;
  font-weight: 400;
}

.pill-button:hover {
  background-color: var(--colors-grey-200);
  border-color: var(--colors-grey-300);
  color: var(--colors-grey-900);
}


.custom-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  position: relative;
  user-select: none;
}

label.custom-radio {
  font-size: 14px;
  font-weight: 400;
  color: var(--colors-grey-700);
}

.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.radio-button {
  height: 18px;
  width: 18px;
  background-color: var(--colors-grey-00);
  border: 1px solid var(--colors-grey-400);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
}

.custom-radio:hover .radio-button {
  border-color: var(--colors-grey-500);
}

.custom-radio input:checked~.radio-button {
  border: 1px solid var(--colors-grey-700);
}

.radio-button::after {
  content: "";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--colors-grey-700);
  transition: transform 0.2s ease;
}

.custom-radio input:checked~.radio-button::after {
  display: block;
  transform: translate(-50%, -50%) scale(1);
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--colors-grey-300);
  margin: 8px 0;
}

.divider-vertical {
  width: 1px;
  background-color: var(--colors-grey-300);
}

.separator {
  width: 100%;
  height: 1px;
  margin: 16px 0;
}

.box-wrapper {
  border: 1px solid var(--colors-grey-300);
  background: var(--colors-grey-00);
  border-radius: 8px;
  display: flex;
  padding: 16px 24px;
  font-size: 14px;
}

.box {
  border: 1px solid var(--colors-grey-300);
  background: var(--colors-grey-00);
  border-radius: 8px;
  padding: 16px 24px;
}

.box.small {
  padding: 6px 12px;
}

.box.info {
  border-color: var(--colors-info-400);
  background-color: var(--colors-info-50);
}

.box.error {
  border-color: var(--colors-error-400);
  background-color: var(--colors-error-50);
}

.box.warning {
  border-color: var(--colors-warning-400);
  background-color: var(--colors-warning-50);
}

.box.success {
  border-color: var(--colors-success-400);
  background-color: var(--colors-success-50);
}

.styled-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--colors-grey-300);
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  background-color: var(--colors-grey-00);
  font-family: "GTWalsheimPro", Verdana, sans-serif;
  /* Spójność fontów */
}

.styled-input:focus {
  outline: none;
  border-color: var(--colors-grey-500);
}

.form-hint {
  font-size: 12px;
  color: var(--colors-grey-500);
  margin-top: -4px;
  display: flex;
  justify-content: flex-end;
  padding: 0 4px;
}


/* =================================
   11. VENDOR OVERRIDES
   ================================= */

/* --- AlertifyJS Custom Theme --- */
.ajs-dialog {
  /* General dialog styles */
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--colors-grey-200);
  font-family: "GTWalsheimPro", Verdana, sans-serif;
}

.ajs-header {
  background-color: var(--colors-grey-00);
  color: var(--colors-grey-900);
  font-size: 20px;
  font-weight: 500;
  border-bottom: 1px solid var(--colors-grey-200);
  border-radius: 8px 8px 0 0;
  padding: 16px 24px;
}

.ajs-body {
  /* Dialog body (message) styles */
  color: var(--colors-grey-700);
  padding: 24px;
  font-size: 16px;
  line-height: 1.5;
}

.alertify .ajs-footer {
  background-color: var(--colors-grey-40);
  border-radius: 0 0 8px 8px;
  padding: 16px 24px;
}

.alertify .ajs-button {
  /* General button styles - dopasowane do naszych */
  display: inline-flex;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  height: 40px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.alertify .ajs-button.ajs-ok {
  background: var(--colors-brand-500);
  color: var(--colors-grey-00);
}

.alertify .ajs-button.ajs-ok:hover {
  background-color: var(--colors-brand-700);
}

.alertify .ajs-dialog.destructive .ajs-button.ajs-ok {
  background-color: var(--colors-error-500);
  border: 1px solid var(--colors-error-500);
  color: white;
}

.alertify .ajs-dialog.destructive .ajs-button.ajs-ok:hover {
  background-color: var(--colors-error-700);
  border: 1px solid var(--colors-error-700);
}

.alertify .ajs-button.ajs-cancel {
  color: var(--colors-grey-700);
  border: 1px solid var(--colors-grey-300);
  background: var(--colors-grey-00);
}

.ajs-button.ajs-cancel:hover {
  border-color: var(--colors-grey-400);
}

.alertify .ajs-fade.ajs-in {
  opacity: 1;
  animation: ajs-in 0.3s ease-out;
}

.alertify .ajs-fade.ajs-out {
  opacity: 0;
  animation: ajs-out 0.3s ease-in;
}

@keyframes ajs-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ajs-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* =================================
   12. SNACKBAR COMPONENT
   ================================= */
.snackbar {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-width: 480px;
  background-color: var(--colors-grey-800);
  color: var(--colors-grey-100);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.snackbar.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}

.snackbar-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.snackbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Dostosowanie przycisków do ciemnego tła */
.snackbar button.tonal {
  background-color: transparent;
  color: var(--colors-grey-300);
  border: none;
}

.snackbar button.tonal:hover {
  background-color: var(--colors-grey-600);
  color: var(--colors-grey-300);
}

.snackbar button.tonal:active {
  background-color: var(--colors-grey-500);
}

.snackbar button .material-symbols-outlined {
  margin-left: 8px;
}

/* =================================
   13. CUSTOM NOTIFICATIONS
   ================================= */
.notification {
  display: flex;
  align-items: stretch;
  border-radius: 4px;
  background-color: var(--colors-grey-00);
}

.bar {
  width: 4px;
  align-self: stretch;
  border-radius: 4px 0 0 4px;
  background: var(--colors-info-500);
}

.bar.warning {
  background: var(--colors-warning-500);
}

.bar.success {
  background: var(--colors-success-500);
}

.bar.error {
  background: var(--colors-error-500);
}

.notfication-content {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  border-radius: 0 4px 4px 0;
  background: var(--colors-info-50);
  border: 1px solid var(--colors-info-200);
  border-left: none;
}

.notfication-content.warning {
  background: var(--colors-warning-50);
  border-color: var(--colors-warning-200);
}

.notfication-content.success {
  background: var(--colors-success-50);
  border-color: var(--colors-success-200);
}

.notfication-content.error {
  background: var(--colors-error-50);
  border-color: var(--colors-error-200);
}

.notification-content-text {
  color: var(--colors-grey-700);
}

.notification-content-text.title {
  color: var(--colors-grey-900);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

.notification-content-text ul {
  padding-inline-start: 16px;
  margin-top: 4px;
}

/* =================================
   14. CUSTOM CHECKBOXES
   ================================= */

/* Ukrywamy domyślne checkboxy */
.checkbox-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Tworzymy nasz własny wskaźnik checkboxa */
.checkmark {
  position: relative;
  height: 16px;
  width: 16px;
  background-color: var(--colors-grey-00);
  border: 1px solid var(--colors-grey-300);
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Zmień kolor tła checkmarka, gdy jest zaznaczony */
.checkbox-container input[type="checkbox"]:checked~.checkmark,
.checkbox-container input[type="checkbox"]:indeterminate~.checkmark {
  background-color: var(--colors-grey-900);
  border-color: var(--colors-grey-900);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 4.5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Pokaż wskaźnik po zaznaczeniu */
.checkbox-container input[type="checkbox"]:checked~.checkmark:after {
  display: block;
}

/* Styl dla stanu indeterminate */
.checkbox-container input[type="checkbox"]:indeterminate~.checkmark:after {
  content: "";
  position: absolute;
  display: block;
  left: 2.5px;
  top: 6.5px;
  width: 9.5px;
  height: 1.5px;
  background-color: white;
  transform: none;
  border: none;
}

/* Efekt hover */
.checkbox-container:hover input[type="checkbox"]:not(:checked):not(:indeterminate)~.checkmark {
  background-color: var(--colors-grey-00);
  border-color: var(--colors-grey-500);
}

/* Focus state */
.checkbox-container input[type="checkbox"]:focus~.checkmark {
  box-shadow: 0 0 0 2px var(--colors-primary-200);
}

/* Kontener dla checkboxa i opcjonalnej etykiety */
.checkbox-container {
  display: inline-flex;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 16px;
  padding-left: 0;
  gap: 8px;
  align-items: center;
}

.checkbox-container label {
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.checkbox-container label.big {
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.table-link {
  cursor: pointer;
  display: inline-flex;
  width: 100%;
}


/* =================================
   17. BUTTON LOADER
   ================================= */
.loader-dots span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.loader-dots span:nth-child(2) {
  animation-delay: .1s;
}

.loader-dots span:nth-child(3) {
  animation-delay: .2s;
}

@keyframes blink {
  0% {
    opacity: .2;
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: .2;
  }
}

/* Mini spinner */
.mini-spinner {
  border: 2px solid var(--colors-grey-300);
  border-top: 2px solid var(--colors-grey-700);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* =================================
   18. CUSTOM FORM VALIDATION
   ================================= */

.styled-input.error,
.custom-select.error .select-display {
  border-color: var(--colors-error-500) !important;
  background-color: var(--colors-error-50) !important;
}

.form-error-message {
  font-size: 12px;
  color: var(--colors-error-700);
  margin-top: 4px;
  padding-left: 2px;
}

/* =================================
   20. STACKED PROGRESS BAR
   ================================= */

.progress-bar-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.progress-bar {
  width: 100%;
  background-color: var(--colors-grey-200);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: var(--colors-success-500);
  border-radius: 4px;
  transition: width 0.3s ease-in-out;
}

.progress-bar-stacked {
  width: 100%;
  background-color: var(--colors-grey-200);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.progress-correct {
  height: 100%;
  background-color: var(--colors-success-500);
  transition: width 0.3s ease-in-out;
}

.progress-in-progress {
  height: 100%;
  background-color: var(--colors-info-500);
  transition: width 0.3s ease-in-out;
}

.progress-outdated {
  height: 100%;
  background-color: var(--colors-warning-500);
  transition: width 0.3s ease-in-out;
}

.progress-outdated-accepted {
  height: 100%;
  background-color: var(--colors-success-700);
  transition: width 0.3s ease-in-out;
}

.progress-error {
  height: 100%;
  background-color: var(--colors-error-500);
  transition: width 0.3s ease-in-out;
}

.progress-correct.full {
  background-color: var(--colors-success-500);
}

/* =================================
   21. SIDE PANEL
   ================================= */

.side-panel {
  width: 400px;
  max-width: 400px;
  min-width: 0;
  background-color: var(--colors-grey-00);
  border-radius: 8px;
  height: calc(100vh);
  position: fixed;
  top: 0;
  right: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
  z-index: 10;
  overflow: hidden;
  opacity: 1;

  transition: max-width 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s ease-in-out,
    border-left-width 0s 0s;
}

.side-panel.collapsed {
  max-width: 0;
  opacity: 0;
  padding: 0;
  transition: max-width 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.3s ease-in-out,
    border-left-width 0s 0.5s;
}

.side-panel-content {
  width: 400px;
  padding: 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}

/* =================================
   22. AVATARS (Przeniesione z Compass)
   ================================= */
.avatar-circle {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: var(--colors-grey-400);
  color: var(--colors-grey-00);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  overflow: hidden;
}

.avatar-circle.medium {
  width: 48px;
  height: 48px;
  font-size: 16px;
  background-color: var(--colors-grey-500);
  color: var(--colors-grey-200);
}

.avatar-circle.large {
  width: 128px;
  height: 128px;
  font-size: 16px;
  background-color: var(--colors-grey-200);
  color: var(--colors-grey-600);
}

.avatar-large {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background-color: var(--colors-grey-200);
  color: var(--colors-grey-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  margin: 0 auto;
}

/* =================================
   23. TIMELINE / LOGS (Przeniesione z Compass)
   ================================= */
.timeline {
  position: relative;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 8px;
  bottom: -16px;
  width: 2px;
  background: var(--colors-grey-200);
}

.timeline-item {
  position: relative;
}

.timeline-dot {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--colors-grey-500);
  border: 4px solid var(--colors-grey-100);
  z-index: 1;
}

.timeline-content {
  background: var(--colors-grey-40);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--colors-grey-200);
  box-shadow: 0px 4px 4px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* =================================
   24. SECONDARY NAV / TABS (Przeniesione z Compass)
   ================================= */
.secondary-navigation {
  display: flex;
  border-bottom: 1px solid var(--colors-grey-200);
  margin-bottom: 16px;
  gap: 8px;
}

.nav-item.secondary {
  padding: 8px 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--colors-grey-500);
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  border-radius: 8px 8px 0 0;
  box-shadow: none;
  margin-bottom: -1px;
}

.nav-item.secondary:hover {
  color: var(--colors-grey-900);
  background-color: var(--colors-grey-200);
}

.nav-item.secondary.active {
  color: var(--colors-brand-500);
  border-bottom: 2px solid var(--colors-brand-500);
  pointer-events: none;
}

/* =================================
   25. UTILITIES (Przeniesione z Compass)
   ================================= */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.self-stretch {
  height: auto;
  align-self: stretch;
}

.empty-state-search {
  grid-column: 1 / -1;
  padding: 48px;
  color: var(--colors-grey-500);
  gap: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}