/* QShell design-system primitives (ported from components/*). Global class names, shared with the shell. */

/* Button */
.qs-btnWrapper { position: relative; }
.qs-btn { cursor: pointer; transition: var(--transition, 0.3s all); display: flex; align-items: center; gap: 8px; border-radius: var(--radius-pill, 40px); font-family: 'DM Sans', sans-serif; border: none; background: transparent; }
.qs-btn svg { color: color-mix(in oklab, var(--color-primary-text) 35%, var(--color-secondary-text)); }
.qs-btnTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.qs-buttonBlock { width: 100%; }
.qs-btnPrimary { padding: 8px 16px; border: 1px solid var(--color-stroke); background: var(--color-bg); font-size: 14px; line-height: 18px; font-weight: 500; color: var(--color-primary-text); }
.qs-btnPrimary.qs-buttonActive, .qs-btnPrimary:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-field-bg); }
.qs-btnPrimary.qs-buttonActive svg path, .qs-btnPrimary:hover svg path { fill: var(--color-primary); stroke: var(--color-primary); }
.qs-btnSecondary { padding: 8px 12px; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-stroke); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-primary-text); }
.qs-btnSecondary:hover, .qs-btnSecondary.qs-buttonActive { background: var(--color-stroke); box-shadow: none; }
.qs-buttonRounded { padding: 10px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; }
.qs-tooltip { opacity: 0; pointer-events: none; position: absolute; transform: translateY(50%); right: 0; white-space: nowrap; top: 100%; padding: 8px 16px; color: var(--color-bg); background: var(--color-secondary); font-size: 12px; line-height: 16px; font-weight: 500; border-radius: var(--radius-tooltip, 8px); transition: var(--transition, 0.3s all); z-index: 55; }
.qs-tooltip:after { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 9px solid var(--color-secondary); top: -8px; position: absolute; right: 12px; }
.qs-btnWrapper:hover .qs-tooltip { opacity: 1; }
.qs-btnOutlined { border-radius: 8px; padding: 12px; border: none; background: transparent; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-secondary-text); }
.qs-btnOutlined:hover, .qs-btnOutlined.qs-buttonActive { background: var(--color-field-bg); }
.qs-btnUnderlined { font-weight: 500; font-size: 14px; line-height: 18px; color: var(--color-primary); text-decoration: underline; background: transparent; }
.qs-btnUnderlined:hover { opacity: 0.7; }
@media (max-width: 992px) { .qs-buttonRounded { width: 48px; height: 48px; } }

/* Loader */
.qs-loaderWrapper { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.qs-loader { width: 48px; height: 48px; border: 5px solid var(--color-primary); border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: qs-rotation 1s linear infinite; }
@keyframes qs-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Input */
.qs-inputWrapper { display: flex; align-items: center; gap: 0 8px; padding: 12px 16px; background: var(--color-field-bg); border-radius: var(--radius-pill, 40px); }
.qs-inputClear { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition, 0.3s all); }
.qs-inputClear:hover { opacity: 0.6; }
.qs-input { width: 100%; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--color-secondary-text); caret-color: var(--color-secondary-text); border: none; background: none; outline: none; padding: 0; margin: 0; font-family: inherit; appearance: none; }

/* Select */
.qs-selectWrapper { width: 100%; position: relative; }
.qs-selectLabel { margin-bottom: 4px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--color-gray-500); }
.qs-selectContainer { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--color-stroke); border-radius: var(--radius-pill, 40px); font-size: 14px; line-height: 20px; color: var(--color-primary-text); cursor: pointer; transition: var(--transition, 0.3s all); }
.qs-selectWrapper.qs-open .qs-selectContainer, .qs-selectContainer:hover { background: var(--color-field-bg); }
.qs-selectDropdown { position: absolute; z-index: 50; width: 100%; top: calc(100% + 8px); border: 1px solid var(--color-stroke); border-radius: var(--radius-dropdown, 12px); max-height: 200px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-stroke); background: var(--color-bg); list-style: none; margin: 0; padding: 0; }
.qs-selectDropdown li { padding: 12px; color: var(--color-secondary-text); font-size: 14px; line-height: 24px; transition: var(--transition, 0.3s all); cursor: pointer; }
.qs-selectDropdown li:hover { background: var(--color-field-bg); color: var(--color-primary-text); }
.qs-selectDropdown li.qs-active { color: var(--color-gray-500); }
.qs-selectSearch { position: sticky; top: 0; display: flex; align-items: center; padding: 8px; background: var(--color-bg); border-bottom: 1px solid var(--color-stroke); }
.qs-selectSearch input { width: 100%; border: none; outline: none; background: var(--color-field-bg); border-radius: var(--radius-pill, 40px); padding: 8px 12px; font: inherit; font-size: 14px; line-height: 20px; color: var(--color-primary-text); }
.qs-selectDropdown li.qs-noResults { color: var(--color-gray-500); cursor: default; }
.qs-selectDropdown li.qs-noResults:hover { background: transparent; color: var(--color-gray-500); }
.qs-selectBackdrop { position: fixed; inset: 0; z-index: 40; }

/* Tabs */
.qs-tabsHeader { display: flex; align-items: center; justify-content: space-between; gap: 0 8px; list-style: none; margin: 0; padding: 0; }
.qs-tabsHeader li { width: 100%; }

/* Modal (right-side panel below the 61px header) */
.qs-modalWrapper { position: fixed; width: 100%; left: 0; right: 0; top: 61px; bottom: 0; z-index: 10; }
.qs-modalWrapper.qs-modalContained { position: absolute; top: 0; }
.qs-modalBg { position: absolute; inset: 0; backdrop-filter: blur(14px); z-index: 10; }
.qs-modalNoBlur .qs-modalBg { backdrop-filter: none; }
.qs-modalContent { height: 100%; margin-left: auto; width: 348px; position: relative; z-index: 50; box-shadow: var(--shadow-popover, 0 23px 44.3px 1px #091c370f); border-left: 1px solid var(--color-stroke); background: var(--color-bg); }
@media (max-width: 992px) {
  .qs-modalWrapper { top: 0; bottom: 93px; }
  .qs-modalContent.qs-modalContent { width: 100%; }
}

/* Popover */
.qs-popoverWrapper { display: inline-flex; position: relative; }
.qs-popoverContent { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 60; }
.qs-popoverBlock { width: 100%; }
.qs-popoverBlock .qs-popoverTrigger { width: 100%; }
.qs-popoverTop .qs-popoverContent { left: 0; right: 0; overflow: hidden; display: flex; justify-content: center; top: -4px; transform: translateY(-100%); }
.qs-popoverBackdrop { position: fixed; inset: 0; z-index: 55; }

/* Image */
.qs-img { object-fit: cover; }
.qs-imgBordered { border: 1px solid var(--color-stroke); }
.qs-imgRounded { border-radius: 50%; }