/**
 * RUQI UI — overrides legacy RUQI markup (main-new.css).
 * Loaded after main-new.css; maps components to Figma Ys7wb4xxDmPequYn6LORro.
 */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ─── Base ───────────────────────────────────────────────── */
html {
  font-size: 16px;
}

body {
  background-color: var(--ruqi-color-bg-page) !important;
  color: var(--ruqi-color-text-primary) !important;
  font-family: var(--ruqi-font-family) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--ruqi-color-text-primary);
  font-family: var(--ruqi-font-family);
  font-weight: var(--ruqi-font-weight-semibold);
}

.count-box.purple,
.count-box.purple .h3,
.count-box.purple h3 {
  color: var(--ruqi-color-text-inverse) !important;
}

.statuses__box .font-weight-bold,
.statuses__box .font-weight-bold a,
.statuses__box .font-weight-bold a.text-dark {
  color: var(--ruqi-color-text-primary) !important;
}

.statuses__box .font-weight-bold a:hover,
.statuses__box .font-weight-bold a:focus {
  color: var(--ruqi-color-link) !important;
}

.statuses__caption {
  color: var(--ruqi-color-text-secondary) !important;
}

/* ─── Links ──────────────────────────────────────────────── */
a,
.link,
.header__link {
  color: var(--ruqi-color-link);
}

a:hover,
.link:hover,
.header__link:hover {
  color: var(--ruqi-color-link-hover);
}

.text-primary,
a.text-primary {
  color: var(--ruqi-color-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--ruqi-color-link-hover) !important;
}

.text-muted {
  color: var(--ruqi-color-text-muted) !important;
}

/* ─── Header / footer ────────────────────────────────────── */
.header {
  background-color: var(--ruqi-color-bg-surface) !important;
  box-shadow: var(--ruqi-shadow-card-sm) !important;
}

.header__logo-link:hover .logo-text {
  fill: var(--ruqi-color-primary) !important;
}

.header__logo {
  display: block;
  width: auto;
  max-width: 209px;
  max-height: 48px;
  height: auto;
}

.footer {
  background-color: var(--ruqi-color-bg-surface);
  color: var(--ruqi-color-text-secondary);
}

/* Buttons — see ruqi-buttons.css (Figma UI Kit 15972-119274) */

/* ─── Layout — outer margins match sidebar/content gutter ── */
.container {
  padding-left: var(--ruqi-space-3) !important;
  padding-right: var(--ruqi-space-3) !important;
}

@media (max-width: 1429.98px) {
  .container {
    padding-left: var(--ruqi-space-2) !important;
    padding-right: var(--ruqi-space-2) !important;
  }
}

@media (max-width: 989.98px) {
  .container {
    padding-left: var(--ruqi-space-1) !important;
    padding-right: var(--ruqi-space-1) !important;
  }
}

@media (max-width: 575.98px) {
  .container {
    padding-left: var(--ruqi-space-3) !important;
    padding-right: var(--ruqi-space-3) !important;
  }
}

/* ─── Forms ──────────────────────────────────────────────── */
.form-control,
.custom-select,
.ss-main .ss-single-selected {
  font-family: var(--ruqi-font-family);
  color: var(--ruqi-color-text-primary);
  border-color: var(--ruqi-color-border-input);
  border-radius: var(--ruqi-input-border-radius);
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--ruqi-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(23, 53, 245, 0.12) !important;
}

.form-control::placeholder {
  color: var(--ruqi-color-text-muted);
}

.has-error .form-control,
.has-error input.form-control,
.is-invalid {
  border-color: var(--ruqi-color-error) !important;
}

.has-error .help-block,
.invalid-feedback,
.help-block-error {
  color: var(--ruqi-color-error) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ruqi-color-primary) !important;
  border-color: var(--ruqi-color-primary) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(23, 53, 245, 0.12) !important;
}

.form-check:hover .form-check-label,
.form-check-label:hover,
.custom-control:hover .custom-control-label,
.custom-control-label:hover {
  color: #1735f5 !important;
}

.form-check:hover .form-check-label a,
.form-check-label:hover a,
.custom-control:hover .custom-control-label a,
.custom-control-label:hover a {
  color: #1735f5 !important;
  text-decoration: none;
}

.form-check:hover .form-check-input:not(:checked) + .form-check-label::before,
.form-check-label:hover::before,
.custom-control:hover .custom-control-input:not(:checked) ~ .custom-control-label::before,
.custom-control-label:hover::before {
  border-color: #1735f5;
}

/* ─── Cards & surfaces ───────────────────────────────────── */
.card,
.home-card,
.panel,
.content-box {
  background-color: var(--ruqi-color-bg-surface);
  border-color: var(--ruqi-color-border);
  border-radius: var(--ruqi-radius-lg);
  box-shadow: var(--ruqi-shadow-card-sm);
}

.card-header,
.card-footer {
  background-color: var(--ruqi-color-bg-surface);
  border-color: var(--ruqi-color-border-divider);
}

/* ─── Modals ─────────────────────────────────────────────── */
.modal-content {
  border: none;
  border-radius: var(--ruqi-radius-lg) !important;
  box-shadow: var(--ruqi-shadow-modal) !important;
  overflow: hidden;
}

.modal-header {
  border-bottom-color: var(--ruqi-color-border-divider);
  padding: var(--ruqi-space-5) var(--ruqi-space-6);
}

.modal-body {
  padding: var(--ruqi-space-6);
}

.modal-footer {
  border-top-color: var(--ruqi-color-border-divider);
  padding: var(--ruqi-space-4) var(--ruqi-space-6);
}

.modal-backdrop.show {
  opacity: 0.45;
}

.close,
.modal-header .close {
  color: var(--ruqi-color-text-muted);
  opacity: 1;
}

.close:hover {
  color: var(--ruqi-color-text-primary);
}

/* ─── Nav / tabs ─────────────────────────────────────────── */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--ruqi-color-primary) !important;
  border-color: var(--ruqi-color-border) var(--ruqi-color-border) var(--ruqi-color-bg-surface) !important;
}

.nav-tabs .nav-link:hover {
  color: var(--ruqi-color-link-hover);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--ruqi-color-primary) !important;
}

/* ─── Pagination ─────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: var(--ruqi-color-primary) !important;
  border-color: var(--ruqi-color-primary) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.page-link {
  color: var(--ruqi-color-text-primary);
  border-color: var(--ruqi-color-border);
}

.page-link:hover {
  color: var(--ruqi-color-primary);
  background-color: var(--ruqi-color-info-bg);
  border-color: var(--ruqi-color-info-border);
}

.pagination-btn-nav:hover .page-link,
.pagination-btn-nav .page-link:hover {
  color: var(--ruqi-color-primary) !important;
}

/* ─── Dropdowns ──────────────────────────────────────────── */
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--ruqi-color-primary);
  background-color: var(--ruqi-color-info-bg);
}

/* ─── Alerts & badges ────────────────────────────────────── */
.ruqi-status-badge {
  background-color: var(--ruqi-status-badge-bg, #f5f5f5) !important;
  color: var(--ruqi-status-badge-color, #1c1c1c) !important;
  border: none;
}

.ruqi-status-bar {
  background-color: var(--ruqi-status-bar-bg, #f5f5f5) !important;
  color: var(--ruqi-status-bar-color, #1c1c1c) !important;
}

.alert-success {
  background-color: var(--ruqi-color-success-bg);
  border-color: var(--ruqi-color-success-bg);
  color: var(--ruqi-color-success);
}

.alert-warning {
  background-color: var(--ruqi-color-warning-bg);
  border-color: var(--ruqi-color-warning-bg);
  color: var(--ruqi-color-warning);
}

.alert-danger {
  background-color: var(--ruqi-color-error-bg);
  border-color: var(--ruqi-color-error-bg);
  color: var(--ruqi-color-error);
}

.alert-info {
  background-color: var(--ruqi-color-info-bg);
  border-color: var(--ruqi-color-info-border);
  color: var(--ruqi-color-primary);
}

.badge-primary,
.badge.badge-primary {
  background-color: var(--ruqi-color-primary);
  color: var(--ruqi-color-text-inverse) !important;
}

.badge-orange,
.badge.badge-orange {
  color: var(--ruqi-color-text-inverse) !important;
}

a.badge-primary:hover,
a.badge-primary:focus,
a.badge-orange:hover,
a.badge-orange:focus {
  color: var(--ruqi-color-text-inverse) !important;
}

a.badge-secondary:hover,
a.badge-secondary:focus {
  color: var(--ruqi-color-text-inverse) !important;
}

.badge-secondary {
  background-color: var(--ruqi-color-text-muted);
}

.bg-primary {
  color: var(--ruqi-color-text-inverse) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--ruqi-color-text-inverse) !important;
}

/* ─── Tables ─────────────────────────────────────────────── */
.table thead th {
  color: var(--ruqi-color-text-secondary);
  border-bottom-color: var(--ruqi-color-border);
}

.table-hover tbody tr:hover {
  background-color: var(--ruqi-color-bg-row);
}

/* ─── Misc legacy hooks ──────────────────────────────────── */
.green,
.text-success,
.color-success,
.valid-feedback {
  color: var(--ruqi-color-success-strong) !important;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--ruqi-color-success-strong);
}

.orange,
.color-warning {
  color: var(--ruqi-color-warning) !important;
}

.exit-link:hover {
  color: var(--ruqi-color-primary) !important;
  background-color: var(--ruqi-color-info-bg) !important;
}

.ss-option:hover,
.ss-option.ss-option-selected {
  color: var(--ruqi-color-primary);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--ruqi-color-primary) !important;
  border-color: var(--ruqi-color-primary) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.swiper-pagination-bullet-active {
  background: var(--ruqi-color-primary) !important;
}

/* Map / geo markers (sprite fallback) */
.svg-image-geo use,
.svg-image-geo-text use {
  fill: var(--ruqi-color-primary);
}

.sms-into-code-hint {
  font-size: 14px;
  line-height: 1.4;
  display: block;
  width: 100%;
  max-width: 100%;
}

.sms-into-code-hint__value {
  font-size: 18px;
  letter-spacing: 0.15em;
  margin-left: 4px;
  white-space: normal;
  word-break: break-word;
}

/* SMS code form in sidebar modal */
.modal-dialog.modal-sms .sms-code-form {
  width: 100%;
  max-width: 100%;
}

.modal-dialog.modal-sms .sms-code-form__label {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.4;
}

.modal-dialog.modal-sms .sms-code-form .get-code__input-list {
  flex-wrap: wrap;
  max-width: 100%;
}

.modal-dialog.modal-sms .sms-code-form .get-code__caption {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
  white-space: normal;
}

/* ─── Category favorites (Поиск заданий) ───────────────── */
@media (hover: hover) {
  .btn-favorite:not(.active):hover,
  .btn-favorite.active:hover {
    border-color: #1735F5 !important;
  }
}

.btn-favorite .icon {
  width: 26px !important;
  height: 26px !important;
}

@media (max-width: 575.98px) {
  .btn-favorite .icon {
    width: 20px !important;
    height: 20px !important;
  }
}