/* =========================================================================
   GN Supplier Portal — Unified styles
   Tokens: gn-design-system.css  |  UX: mobile-first, 44px targets, focus rings
   ========================================================================= */

:root {
    --kt-primary: var(--gn-primary);
    --kt-primary-active: var(--gn-primary-hover);
    --kt-primary-light: var(--gn-primary-soft);
    --kt-success: var(--gn-success);
    --kt-warning: var(--gn-warning);
    --kt-danger: var(--gn-danger);
    --kt-text-dark: var(--gn-dark);
    --kt-text-muted: var(--gn-gray-600);
    --kt-gray-50: var(--gn-gray-50);
    --kt-gray-100: var(--gn-gray-50);
    --kt-gray-200: var(--gn-gray-100);
    --kt-gray-300: var(--gn-gray-200);
    --kt-gray-400: var(--gn-gray-400);
    --kt-gray-500: var(--gn-gray-500);
    --kt-gray-600: var(--gn-gray-600);
    --kt-gray-700: var(--gn-gray-700);
    --kt-gray-800: var(--gn-sidebar-bg-top);
    --kt-gray-900: var(--gn-gray-900);
    --kt-input-bg: var(--gn-gray-50);
    --kt-input-focus-border: var(--gn-primary);
    --sp-header-h: 64px;
    --sp-sidebar-w: 265px;
    --sp-ease: 180ms ease;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--gn-gray-800);
    background: var(--gn-gray-50);
    -webkit-font-smoothing: antialiased;
}

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

a,
button,
[role="button"],
.cursor-pointer {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid rgba(var(--gn-primary-rgb), 0.45);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Bootstrap / Metronic bridges ---------- */

.card {
    border: 0;
    background: var(--gn-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--gn-gray-100);
    background: transparent;
}

.card-title,
.card-title h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gn-dark);
    margin: 0;
}

.card-body {
    padding: 20px 22px;
}

.card-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 13px;
    border: none;
    transition: background var(--sp-ease), color var(--sp-ease), box-shadow var(--sp-ease), transform var(--sp-ease);
    text-decoration: none;
}

.btn:active {
    transform: scale(0.98);
}

.btn-sm {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
}

.btn-lg {
    min-height: 48px;
    padding: 12px 22px;
    font-size: 14px;
}

.btn-primary,
.btn-primary:focus {
    background: var(--gn-primary);
    border-color: var(--gn-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:active {
    background: var(--gn-primary-hover) !important;
    border-color: var(--gn-primary-hover) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 158, 247, 0.35);
}

.btn-success {
    background: var(--gn-success);
    border-color: var(--gn-success);
    color: #fff;
}

.btn-success:hover {
    background: var(--gn-success-hover);
    color: #fff;
}

.btn-danger {
    background: var(--gn-danger);
    border-color: var(--gn-danger);
    color: #fff;
}

.btn-danger:hover {
    background: var(--gn-danger-hover);
    color: #fff;
}

.btn-warning {
    background: var(--gn-warning);
    border-color: var(--gn-warning);
    color: #3f3000;
}

.btn-light,
.btn-secondary {
    background: var(--gn-gray-50);
    border: 1px solid var(--gn-gray-200);
    color: var(--gn-gray-700);
}

.btn-light:hover,
.btn-secondary:hover,
.btn-active-primary:hover,
.btn-active-light-primary:hover {
    background: var(--gn-gray-100);
    color: var(--gn-primary);
}

.btn-light-primary {
    background: var(--gn-primary-soft);
    color: var(--gn-primary);
}

.btn-light-secondary {
    background: var(--gn-gray-50);
    color: var(--gn-gray-500);
}

.btn-icon {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
}

.form-label {
    display: block;
    font-weight: 500;
    color: var(--gn-dark);
    margin-bottom: 6px;
    font-size: 13px;
}

.form-label.required::after,
.form-label .required {
    color: var(--gn-danger);
    content: none;
}

.form-label.required::after {
    content: " *";
    color: var(--gn-danger);
}

.form-control,
.form-select,
.form-control-solid {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--gn-gray-200);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 400;
    background: var(--gn-white);
    color: var(--gn-gray-800);
    transition: border-color var(--sp-ease), box-shadow var(--sp-ease);
}

.form-control:focus,
.form-select:focus,
.form-control-solid:focus {
    outline: none;
    background: var(--gn-white);
    border-color: var(--gn-primary);
    box-shadow: 0 0 0 3px var(--gn-primary-soft);
    color: var(--gn-gray-800);
}

.form-control:disabled,
.form-control[disabled] {
    background: var(--gn-gray-50);
    color: var(--gn-gray-500);
    cursor: not-allowed;
}

.form-control::placeholder {
    color: var(--gn-gray-500);
}

.form-text {
    font-size: 12px;
    color: var(--gn-gray-500);
    margin-top: 4px;
}

.form-check-input {
    width: 1.15em;
    height: 1.15em;
    border: 1.5px solid var(--gn-gray-300);
}

.form-check-input:checked {
    background-color: var(--gn-primary);
    border-color: var(--gn-primary);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

.badge-light-primary,
.bg-light-primary { background: var(--gn-primary-soft) !important; color: var(--gn-primary) !important; }
.badge-light-success,
.bg-light-success { background: var(--gn-success-soft) !important; color: #1f8a52 !important; }
.badge-light-warning,
.bg-light-warning { background: var(--gn-warning-soft) !important; color: var(--gn-warning-text) !important; }
.badge-light-danger,
.bg-light-danger { background: var(--gn-danger-soft) !important; color: #b91d47 !important; }
.badge-light-info,
.bg-light-info { background: var(--gn-info-soft) !important; color: var(--gn-info) !important; }
.badge-light-secondary { background: var(--gn-gray-100); color: var(--gn-gray-600); }

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: 16px;
}

.alert-danger { background: var(--gn-danger-soft); color: #b91d47; }
.alert-success { background: var(--gn-success-soft); color: #1f8a52; }
.alert-warning { background: var(--gn-warning-soft); color: #8a6a00; }
.alert-info,
.alert-primary { background: var(--gn-primary-soft); color: #0078c2; }

.text-muted,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700 { color: var(--gn-gray-600) !important; }
.text-dark,
.text-gray-800 { color: var(--gn-dark) !important; }
.text-primary { color: var(--gn-primary) !important; }
.text-success { color: var(--gn-success) !important; }
.text-danger { color: var(--gn-danger) !important; }
.text-warning { color: var(--gn-warning-text) !important; }
.text-info { color: var(--gn-info) !important; }
.text-gray-300 { color: var(--gn-gray-300) !important; }
.bg-light { background: var(--gn-gray-50) !important; }

.table {
    font-size: 13px;
}

.table thead th,
.table th {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gn-gray-600);
    background: var(--gn-gray-50);
    border: none;
    padding: 12px 14px;
}

.table td {
    padding: 14px;
    border-top: 1px solid var(--gn-gray-100);
    vertical-align: middle;
    color: var(--gn-gray-800);
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.link-primary {
    color: var(--gn-primary);
    text-decoration: none;
    font-weight: 600;
}

.link-primary:hover { color: var(--gn-primary-hover); }

.separator {
    height: 1px;
    background: var(--gn-gray-100);
    width: 100%;
}

.symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.symbol-30px { width: 30px; height: 30px; }
.symbol-40px { width: 40px; height: 40px; }
.symbol-50px { width: 50px; height: 50px; }

.symbol-label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.password-wrapper { position: relative; }
.password-wrapper .form-control { padding-right: 48px; }
.password-wrapper .toggle-password {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    min-width: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--gn-gray-500);
    z-index: 2;
}
.password-wrapper .toggle-password:hover { color: var(--gn-primary); }

/* =========================================================================
   APP SHELL — светлая тема                                  (2026-08-28)

   Кабинет переведён с тёмного метрониковского сайдбара на светлый шелл:
   белые поверхности, тонкие границы, синий акцент только на активном
   состоянии. Сгруппированное меню вместо плоского списка — разделов стало
   пять, и без заголовков групп они читались как один длинный столбец.

   Токены шелла держим отдельно от gn-design-system.css: там метрониковская
   палитра для админки, а здесь — нейтрали посветлее.
   ========================================================================= */

:root {
    --sp-surface:        #ffffff;
    --sp-surface-2:      #f7f8fa;
    --sp-surface-3:      #f1f3f6;
    --sp-border:         #e6e8ec;
    --sp-border-soft:    #eef0f3;
    --sp-border-strong:  #d7dae0;

    --sp-ink:            #16181d;
    --sp-ink-2:          #414751;
    --sp-ink-3:          #6b7280;
    --sp-ink-4:          #9aa1ac;

    --sp-accent:         var(--gn-primary);
    --sp-accent-soft:    rgba(var(--gn-primary-rgb), 0.10);
    --sp-accent-line:    rgba(var(--gn-primary-rgb), 0.28);

    --sp-shadow-sm:      0 1px 2px rgba(16, 24, 40, 0.04);
    --sp-shadow-md:      0 4px 14px rgba(16, 24, 40, 0.07);
    --sp-shadow-pop:     0 12px 32px rgba(16, 24, 40, 0.12);

    --sp-r-sm:           7px;
    --sp-r-md:           10px;
    --sp-r-lg:           14px;

    /* Движение: одна кривая и три длительности на весь портал, иначе каждый
       блок анимируется в своём ритме и интерфейс «дребезжит». */
    --sp-dur-1:          150ms;
    --sp-dur-2:          230ms;
    --sp-dur-3:          320ms;
    --sp-ease:           cubic-bezier(0.16, 1, 0.3, 1);
    --sp-ease-in:        cubic-bezier(0.4, 0, 1, 1);

    --sp-header-h:       60px;
    --sp-sidebar-w:      256px;
}

/* overflow-x: hidden делает элемент скролл-контейнером (по спеке hidden в одной
   оси подразумевает auto в другой), а внутри скролл-контейнера position: sticky
   считается уже от него — и сайдбар переставал прилипать: на длинной анкете он
   уезжал вверх вместе со страницей, оставляя серую колонку.

   overflow: clip режет так же, но контейнер прокрутки НЕ создаёт, поэтому
   sticky продолжает работать. На телефоне сайдбар и так position: fixed —
   там оставляем hidden ради совместимости со старыми браузерами. */
html.sp-app-html {
    height: auto;
    overflow-x: clip;
}

body.sp-app {
    margin: 0;
    min-height: 100dvh;
    height: auto;
    max-height: none;
    display: flex;
    align-items: flex-start;
    overflow-x: clip;
    overflow-y: visible;
    background: var(--sp-surface-2);
    color: var(--sp-ink-2);
}

@media (max-width: 991.98px) {
    html.sp-app-html,
    body.sp-app {
        overflow-x: hidden;
    }
}

/* ---------- Сайдбар ---------- */

.sp-sidebar {
    width: var(--sp-sidebar-w);
    background: var(--sp-surface);
    border-right: 1px solid var(--sp-border);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100dvh;
    max-height: 100dvh;
}

.sp-sidebar-logo {
    min-height: var(--sp-header-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sp-border-soft);
}

.sp-sidebar-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--sp-ink);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    min-width: 0;
}

.sp-sidebar-logo-link i {
    color: var(--sp-accent);
    font-size: 18px;
}

.sp-sidebar-logo-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-sidebar-close {
    display: none;
    margin-left: auto;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--sp-ink-3);
    align-items: center;
    justify-content: center;
    border-radius: var(--sp-r-sm);
    transition: background var(--sp-dur-1) var(--sp-ease), color var(--sp-dur-1) var(--sp-ease);
}

.sp-sidebar-close:hover {
    color: var(--sp-ink);
    background: var(--sp-surface-3);
}

/* Карточка поставщика под логотипом — тот же приём, что и «переключатель
   воркспейса» в референсе: сразу видно, от чьего имени открыт кабинет. */
.sp-sidebar-org {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 12px 4px;
    padding: 9px 11px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-md);
    background: var(--sp-surface);
    min-width: 0;
}

.sp-sidebar-org-mark {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--sp-accent-soft);
    color: var(--sp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.sp-sidebar-org-body { min-width: 0; display: block; }

.sp-sidebar-org-name,
.sp-sidebar-org-role { display: block; }

.sp-sidebar-org-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-sidebar-org-role {
    font-size: 11.5px;
    color: var(--sp-ink-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-sidebar-menu {
    flex: 1;
    padding: 8px 12px 16px;
    overflow-y: auto;
}

.sp-menu-group {
    padding: 0 12px;
    margin: 18px 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sp-ink-4);
}

.sp-menu-group:first-child { margin-top: 6px; }

.sp-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--sp-ink-2);
    text-decoration: none;
    font-weight: 500;
    font-size: 13.5px;
    border-radius: var(--sp-r-sm);
    margin-bottom: 2px;
    transition: background var(--sp-dur-1) var(--sp-ease),
                color var(--sp-dur-1) var(--sp-ease);
}

.sp-menu-link:hover {
    color: var(--sp-ink);
    background: var(--sp-surface-3);
}

.sp-menu-link.active {
    color: var(--sp-accent);
    background: var(--sp-accent-soft);
    font-weight: 600;
}

.sp-menu-link.active .sp-menu-icon { color: var(--sp-accent); }

.sp-menu-icon {
    width: 18px;
    flex-shrink: 0;
    font-size: 14px;
    text-align: center;
    color: var(--sp-ink-4);
    transition: color var(--sp-dur-1) var(--sp-ease);
}

.sp-menu-link:hover .sp-menu-icon { color: var(--sp-ink-3); }

.sp-menu-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-sidebar-foot {
    padding: 12px;
    border-top: 1px solid var(--sp-border-soft);
}

.sp-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.40);
    z-index: 1035;
    opacity: 0;
    transition: opacity var(--sp-dur-2) var(--sp-ease);
}

.sp-backdrop.is-visible { opacity: 1; }

/* ---------- Рабочая область ---------- */

.sp-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}

.sp-header {
    min-height: var(--sp-header-h);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--sp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 24px;
}

.sp-header-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    color: var(--sp-ink-2);
    border-radius: var(--sp-r-sm);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--sp-dur-1) var(--sp-ease), color var(--sp-dur-1) var(--sp-ease);
}

.sp-header-toggle:hover {
    background: var(--sp-surface-3);
    color: var(--sp-accent);
}

.sp-header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sp-ink);
    margin: 0;
    min-width: 0;
}

.sp-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-user-info {
    text-align: right;
    line-height: 1.3;
}

.sp-user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--sp-ink);
}

.sp-user-email {
    font-size: 12px;
    color: var(--sp-ink-3);
}

.sp-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sp-accent-soft);
    color: var(--sp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.sp-content {
    flex: 1;
    padding: 24px;
    overflow: visible;
}


/* =========================================================================
   AUTH (login / forgot / reset)
   ========================================================================= */

body.sp-auth {
    margin: 0;
    min-height: 100dvh;
    background: #fff;
}

.sp-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100dvh;
}

.sp-auth-brand {
    background: linear-gradient(180deg, #1e1e2d 0%, #1a1a27 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 40px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.sp-auth-brand::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(var(--gn-primary-rgb), 0.12);
    top: -80px;
    right: -80px;
}

.sp-auth-brand-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 440px;
}

.sp-auth-logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: rgba(var(--gn-primary-rgb), 0.16);
    color: var(--gn-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 28px;
}

.sp-auth-brand h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.sp-auth-brand p {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.78;
    margin: 0;
}

.sp-auth-form {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 24px;
    overflow-y: auto;
}

.sp-auth-form-inner {
    width: 100%;
    max-width: 440px;
    padding: 8px 0 32px;
}

.sp-auth-heading {
    text-align: center;
    margin-bottom: 28px;
}

.sp-auth-heading h1 {
    color: var(--gn-dark);
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 8px;
}

.sp-auth-heading .subtitle {
    color: var(--gn-gray-600);
    font-size: 14px;
    font-weight: 500;
}

.sp-icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--gn-primary-soft);
    color: var(--gn-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
}

.sp-icon-circle.is-success {
    background: var(--gn-success-soft);
    color: var(--gn-success);
}

.login-tabs,
.auth-tabs {
    display: flex;
    background: var(--gn-gray-50);
    padding: 4px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    gap: 4px;
}

.login-tab,
.auth-tab {
    flex: 1;
    text-align: center;
    min-height: 44px;
    padding: 10px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: var(--gn-gray-600);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--sp-ease), color var(--sp-ease), box-shadow var(--sp-ease);
}

.login-tab.active,
.auth-tab.active {
    background: #fff;
    color: var(--gn-primary);
    box-shadow: 0 1px 4px rgba(24, 28, 50, 0.08);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.otp-inputs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 24px 0;
    flex-wrap: wrap;
}

.otp-input {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--gn-dark);
    background: var(--gn-gray-50);
    border: 1px solid var(--gn-gray-200);
    border-radius: var(--radius-md);
}

.otp-input:focus {
    background: #fff;
    border-color: var(--gn-primary);
    color: var(--gn-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--gn-primary-soft);
}

.register-cta {
    margin-top: 28px;
    padding: 22px 20px;
    background: var(--gn-gray-50);
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--gn-gray-100);
}

.register-cta .sp-icon-circle {
    width: 48px;
    height: 48px;
    font-size: 18px;
    margin: 0 auto 10px;
    border-radius: 12px;
}

.register-cta h5 {
    color: var(--gn-dark);
    font-weight: 700;
    margin: 8px 0;
}

.register-cta p {
    color: var(--gn-gray-600);
    font-size: 13px;
    margin-bottom: 14px;
}

.email-display {
    background: var(--gn-success-soft);
    color: #1f8a52;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    text-align: center;
    margin-bottom: 16px;
    font-weight: 600;
    word-break: break-word;
}

.password-strength {
    margin-top: 10px;
}

.password-strength .progress,
.password-strength-bar,
.password-strength {
    height: 6px;
    border-radius: 99px;
    background: var(--gn-gray-100);
    overflow: hidden;
}

.password-strength .progress-bar {
    height: 100%;
    transition: width 180ms ease, background-color 180ms ease;
}

.password-requirements {
    margin-top: 12px;
    font-size: 12px;
}

.password-requirements .requirement {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--gn-gray-600);
}

.password-requirements .requirement.valid { color: var(--gn-success); }

.strength-weak { background: var(--gn-danger); width: 25%; }
.strength-fair { background: var(--gn-warning); width: 50%; }
.strength-good { background: #ffc107; width: 75%; }
.strength-strong { background: var(--gn-success); width: 100%; }

/* Compat aliases used by login/forgot/reset markup */
.d-grid-layout { display: contents; }
body.sp-auth .d-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100dvh;
}
body.sp-auth .branding-column { /* mapped in HTML to sp-auth-brand via class combo */ }
.branding-column {
    background: linear-gradient(180deg, #1e1e2d 0%, #1a1a27 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 40px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.branding-column::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(var(--gn-primary-rgb), 0.12);
    top: -80px;
    right: -80px;
}
.branding-content { z-index: 1; text-align: center; max-width: 440px; }
.branding-logo { margin-bottom: 28px; font-size: 42px; color: var(--gn-primary); }
.branding-title { font-size: 32px; font-weight: 700; margin-bottom: 16px; line-height: 1.2; }
.branding-text { font-size: 16px; opacity: 0.78; line-height: 1.6; margin: 0; }
.form-column {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 32px 24px;
    overflow-y: auto;
}
.form-content { width: 100%; max-width: 440px; }
.form-heading { text-align: center; margin-bottom: 28px; }
.form-heading h1 { color: var(--gn-dark); font-weight: 700; font-size: 24px; margin-bottom: 8px; }
.form-heading .subtitle { color: var(--gn-gray-600); font-size: 14px; font-weight: 500; }

.icon-wrapper,
.success-icon-wrapper {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--gn-primary-soft);
    color: var(--gn-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
}
.success-icon-wrapper {
    background: var(--gn-success-soft);
    color: var(--gn-success);
}
.icon-wrapper i,
.success-icon-wrapper i { color: inherit; font-size: inherit; }
.icon-wrapper:has(.text-danger) {
    background: var(--gn-danger-soft);
    color: var(--gn-danger);
}

/* =========================================================================
   CENTERED PUBLIC CARDS (error / DD gate / email / 2FA)
   ========================================================================= */

body.sp-center {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--gn-gray-50);
}

body.sp-center .card,
body.sp-center .verify-card {
    width: 100%;
    max-width: 560px;
    margin: 0;
}

body.sp-center .card-body,
body.sp-center .verify-body {
    padding: 32px 24px;
}

.verify-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; }
.verify-header {
    background: var(--gn-dark);
    color: #fff;
    padding: 28px 24px;
    text-align: center;
}
.verify-header i { font-size: 36px; color: var(--gn-primary); margin-bottom: 10px; display: block; }
.verify-body { padding: 28px 24px; }
.code-input { font-size: 22px; letter-spacing: 8px; text-align: center; font-weight: 700; }

.status-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
}
.status-icon.warning { background: var(--gn-warning-soft); color: var(--gn-warning-text); }
.status-icon.primary { background: var(--gn-primary-soft); color: var(--gn-primary); }
.status-icon.info { background: var(--gn-info-soft); color: var(--gn-info); }
.status-icon.danger { background: var(--gn-danger-soft); color: var(--gn-danger); }
.status-icon.success { background: var(--gn-success-soft); color: var(--gn-success); }

.rfq-info,
.steps-info,
.alert-notes {
    background: var(--gn-gray-50);
    border-radius: var(--radius-md);
    padding: 16px;
    margin: 16px 0;
}
.rfq-info .label { font-size: 12px; color: var(--gn-gray-600); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.rfq-info .value { font-size: 14px; color: var(--gn-dark); font-weight: 600; }
.alert-notes { background: var(--gn-danger-soft); }
.alert-notes .alert-title { color: #b91d47; font-weight: 600; margin-bottom: 6px; }
.steps-info { background: var(--gn-primary-soft); }
.steps-info h6 { color: var(--gn-primary); font-weight: 600; margin-bottom: 10px; }
.step-item { display: flex; align-items: flex-start; margin-bottom: 10px; }
.step-number {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--gn-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; margin-right: 10px; flex-shrink: 0;
}
.step-text { font-size: 13px; color: var(--gn-gray-800); line-height: 1.45; }
.waiting-animation { display: flex; justify-content: center; margin: 16px 0; }
.waiting-animation .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--gn-primary); margin: 0 4px;
    animation: sp-bounce 1.2s infinite ease-in-out both;
}
.waiting-animation .dot:nth-child(1) { animation-delay: -0.24s; }
.waiting-animation .dot:nth-child(2) { animation-delay: -0.12s; }
@keyframes sp-bounce {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* =========================================================================
   PUBLIC PAGES (register / RFQ / quotation)
   ========================================================================= */

body.sp-public {
    margin: 0;
    min-height: 100dvh;
    background: var(--gn-gray-50);
}

.portal-header {
    background: #fff;
    border-bottom: 1px solid var(--gn-gray-100);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.portal-header h1,
.portal-header h2 {
    font-size: 18px;
    font-weight: 600;
}

.container-xxl {
    padding-left: 16px;
    padding-right: 16px;
}

.hero-section {
    background: linear-gradient(180deg, #1e1e2d 0%, #1a1a27 100%);
    padding: 48px 20px 72px;
    position: relative;
    overflow: hidden;
}

.hero-section::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(var(--gn-primary-rgb), 0.12);
    top: -120px;
    right: -80px;
}

.hero-content {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    padding: 8px 16px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}

.hero-badge i { color: var(--gn-warning); }

.hero-title {
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.hero-title .highlight { color: var(--gn-primary); }

.hero-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.78);
    margin: 0 auto 28px;
    max-width: 640px;
    line-height: 1.6;
}

.benefits-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-align: left;
}

.benefit-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-text strong { display: block; font-size: 14px; }
.benefit-text span { font-size: 12px; opacity: 0.75; }

.main-content {
    max-width: 1040px;
    margin: -40px auto 40px;
    padding: 0 16px;
    position: relative;
    z-index: 2;
}

body.sp-public .card {
    border-radius: var(--radius-xl);
}

.trust-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 14px 16px;
    background: var(--gn-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gn-gray-600);
    font-size: 13px;
    font-weight: 500;
}

.trust-item i { color: var(--gn-success); }

.progress-steps {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
    gap: 8px;
    flex-wrap: wrap;
}

.progress-steps .step {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    background: var(--gn-gray-50);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gn-gray-600);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
}

.progress-steps .step.active {
    background: var(--gn-primary);
    color: #fff;
}

.progress-steps .step.completed {
    background: var(--gn-success);
    color: #fff;
}

.progress-steps .step-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.form-section,
.step-content { display: none; }
.form-section.active,
.step-content.active { display: block; }

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 6px 0;
}

.form-check-input {
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    min-width: 1.15em;
    margin-top: 0.3em;
    cursor: pointer;
    pointer-events: auto;
    appearance: auto;
}

.form-check-label,
.form-check-label.form-check-label {
    cursor: pointer;
}

.sp-dd-page .progress-steps {
    justify-content: flex-start;
}

.sp-dd-page .card {
    overflow: visible;
}

.sp-dd-page .card-body {
    padding: 22px 22px 28px;
}

.section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gn-gray-100);
    text-align: center;
}

.section-header h3 {
    color: var(--gn-dark);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-header h3 i { color: var(--gn-primary); }
.section-header p { color: var(--gn-gray-600); margin: 0; }

.checkbox-group {
    background: var(--gn-gray-50);
    padding: 18px;
    border-radius: var(--radius-xl);
    margin-bottom: 20px;
}

.checkbox-group h5 {
    color: var(--gn-dark);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

.nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gn-gray-100);
    flex-wrap: wrap;
}

.info-box {
    background: var(--gn-primary-soft);
    border-left: 3px solid var(--gn-primary);
    padding: 14px 16px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-bottom: 20px;
}

.info-box.warning {
    background: var(--gn-warning-soft);
    border-left-color: var(--gn-warning);
}

.info-box p { margin: 0; color: var(--gn-gray-700); font-size: 13px; }

.login-link {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gn-gray-100);
}

.login-link a { color: var(--gn-primary); font-weight: 600; text-decoration: none; }

.success-screen { text-align: center; padding: 48px 16px; }
.success-icon {
    width: 88px;
    height: 88px;
    background: var(--gn-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 36px;
    color: #fff;
}
.success-screen h2 { font-size: 24px; font-weight: 700; color: var(--gn-dark); margin-bottom: 10px; }
.success-screen p { color: var(--gn-gray-600); font-size: 15px; max-width: 480px; margin: 0 auto 20px; }

.page-footer {
    text-align: center;
    padding: 24px 16px 40px;
    color: var(--gn-gray-600);
    font-size: 13px;
}

.document-upload-box,
.document-upload {
    border: 1.5px dashed var(--gn-gray-300);
    border-radius: var(--radius-xl);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: var(--gn-gray-50);
    transition: border-color var(--sp-ease), background var(--sp-ease);
}

.document-upload-box:hover,
.document-upload:hover {
    border-color: var(--gn-primary);
    background: var(--gn-primary-soft);
}

.document-upload-box i,
.document-upload i { color: var(--gn-primary); display: block; margin-bottom: 6px; }

.uploaded-file-name { margin-top: 8px; font-size: 13px; color: var(--gn-success); font-weight: 500; }

.shareholder-row,
.director-row {
    background: var(--gn-gray-50);
    padding: 16px;
    border-radius: var(--radius-xl);
    margin-bottom: 12px;
    position: relative;
    border: 1px solid var(--gn-gray-100);
}

.remove-row-btn,
.remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 36px;
    min-height: 36px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--gn-danger-soft);
    color: var(--gn-danger);
}

.info-label,
.info-item .label {
    font-size: 12px;
    color: var(--gn-gray-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.info-value,
.info-item .value {
    font-size: 14px;
    font-weight: 600;
    color: var(--gn-dark);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.deadline-warning,
.deadline-expired {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.deadline-warning { background: var(--gn-warning-soft); color: #8a6a00; }
.deadline-expired { background: var(--gn-danger-soft); color: #b91d47; }

.attachment-link,
.attachment-item {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: var(--gn-gray-50);
    border-radius: var(--radius-md);
    color: var(--gn-dark);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 8px;
    gap: 10px;
    min-height: 48px;
}

.attachment-link:hover,
.attachment-item:hover {
    background: var(--gn-gray-100);
    color: var(--gn-primary);
}

.verified-badge {
    background: var(--gn-success-soft);
    color: #1f8a52;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}

.logout-btn {
    color: var(--gn-gray-600);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.logout-btn:hover { color: var(--gn-primary); }

.item-price-input { min-width: 110px; }
.prev-price-col { background: var(--gn-warning-soft) !important; }
.success-message { text-align: center; padding: 40px 16px; }
.success-message i { font-size: 56px; color: var(--gn-success); margin-bottom: 12px; }

.quotation-box {
    background: var(--gn-primary-soft);
    border-radius: var(--radius-xl);
    padding: 20px;
}
.quotation-box .amount { font-size: 28px; font-weight: 700; color: var(--gn-primary); line-height: 1.1; }
.quotation-box .currency { font-size: 14px; color: var(--gn-gray-600); font-weight: 500; }

/* =========================================================================
   DASHBOARD / TENDERS / PROFILE / DD
   ========================================================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 20px;
    box-shadow: var(--shadow-card);
}

.stat-card .icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    margin: 0 0 12px;
    font-size: 18px;
}

.stat-card.total .icon-wrapper { background: var(--gn-primary-soft); color: var(--gn-primary); }
.stat-card.responded .icon-wrapper { background: var(--gn-success-soft); color: var(--gn-success); }
.stat-card.pending .icon-wrapper { background: var(--gn-warning-soft); color: var(--gn-warning-text); }
.stat-card.won .icon-wrapper { background: var(--gn-danger-soft); color: var(--gn-danger); }

.stat-card .value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gn-dark);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-card .label {
    color: var(--gn-gray-600);
    font-size: 13px;
    font-weight: 500;
}

.activity-timeline .activity-item {
    display: flex;
    margin-bottom: 16px;
    position: relative;
}

.activity-timeline .activity-line {
    position: absolute;
    top: 28px;
    bottom: -20px;
    left: 19px;
    width: 1px;
    background: var(--gn-gray-100);
}

.activity-timeline .activity-item:last-child .activity-line { display: none; }

.activity-timeline .activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: var(--gn-gray-50);
    margin-right: 12px;
    flex-shrink: 0;
}

.filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.filter-tab {
    padding: 10px 16px;
    min-height: 44px;
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--gn-gray-600);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid var(--gn-gray-200);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.filter-tab:hover {
    color: var(--gn-primary);
    border-color: var(--gn-primary);
    background: var(--gn-primary-soft);
}

.filter-tab.active {
    background: var(--gn-primary);
    color: #fff;
    border-color: var(--gn-primary);
}

.filter-tab .count {
    background: rgba(0,0,0,0.08);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    margin-left: 8px;
}

.filter-tab:not(.active) .count {
    background: var(--gn-gray-100);
    color: var(--gn-gray-600);
}

.tender-item {
    padding: 18px 20px;
    border-bottom: 1px solid var(--gn-gray-100);
}

.tender-item:last-child { border-bottom: none; }

.tender-item:hover { background: var(--gn-gray-50); }

.tender-icon-wrapper {
    width: 48px;
    height: 48px;
    background: var(--gn-gray-50);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--gn-gray-600);
}

.tender-icon-wrapper.won {
    background: var(--gn-success-soft);
    color: var(--gn-success);
}

.quotation-badge {
    background: var(--gn-gray-50);
    border: 1px solid var(--gn-gray-100);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--gn-gray-700);
    margin-top: 8px;
    flex-wrap: wrap;
}

.profile-card { text-align: center; padding: 8px 0; }

.profile-avatar {
    width: 88px;
    height: 88px;
    background: var(--gn-primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.profile-name { font-size: 18px; font-weight: 700; color: var(--gn-dark); }
.profile-email { color: var(--gn-gray-600); font-size: 13px; margin-bottom: 16px; }

.profile-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gn-gray-100);
    flex-wrap: wrap;
}

.profile-stat .value { font-size: 22px; font-weight: 700; color: var(--gn-dark); }
.profile-stat .label { font-size: 12px; color: var(--gn-gray-600); }

.stepper-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    position: relative;
    gap: 4px;
    overflow-x: auto;
    padding: 4px 0 8px;
}

.stepper-progress,
.stepper-progress-bar { display: none; }

.stepper-item {
    position: relative;
    z-index: 1;
    text-align: center;
    cursor: pointer;
    opacity: 0.55;
    flex: 1;
    min-width: 56px;
}

.stepper-item.current,
.stepper-item.completed { opacity: 1; }

.stepper-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--gn-gray-50);
    color: var(--gn-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin: 0 auto 6px;
    border: 1px solid var(--gn-gray-200);
}

.stepper-item.current .stepper-icon {
    background: var(--gn-primary-soft);
    color: var(--gn-primary);
    border-color: var(--gn-primary);
}

.stepper-item.completed .stepper-icon {
    background: var(--gn-primary);
    color: #fff;
    border-color: var(--gn-primary);
}

.stepper-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gn-gray-600);
}

.step-content { display: none; }
.step-content.active { display: block; }

.document-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--gn-gray-50);
    border-radius: var(--radius-md);
    margin-top: 8px;
    gap: 10px;
}

.sp-page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sp-page-head h1 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gn-dark);
    margin: 0;
}

.dd-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* =========================================================================
   LANGUAGE SWITCHER
   ========================================================================= */

.sp-lang-switcher:not(.sp-lang-switcher--header) {
    z-index: 1050;
    top: 12px;
    right: 12px;
}

.sp-lang-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    min-width: 10.5rem;
    background: #fff;
    border: 1px solid var(--gn-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.sp-lang-card__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gn-primary);
}

.sp-lang-card__row {
    display: flex;
    gap: 4px;
    background: var(--gn-gray-50);
    border-radius: 8px;
    padding: 4px;
}

.sp-lang-card__row a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    color: var(--gn-gray-700);
}

.sp-lang-card__row a:hover:not(.is-active) {
    color: var(--gn-primary);
    background: #fff;
}

.sp-lang-card__row a.is-active {
    color: #fff;
    background: var(--gn-primary);
}

.sp-lang-switcher--header {
    position: relative;
    flex-shrink: 0;
}

.sp-lang-switcher--header .sp-lang-card {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    min-width: unset;
}

.sp-lang-switcher--header .sp-lang-card__head span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.sp-lang-switcher--header .sp-lang-card__row a {
    min-height: 36px;
    min-width: 36px;
    font-size: 12px;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1199.98px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991.98px) {
    .sp-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100dvh;
        max-height: 100dvh;
        transform: translateX(-105%);
        transition: transform 220ms ease;
        box-shadow: none;
    }

    .sp-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--shadow-overlay);
    }

    .sp-sidebar-close { display: inline-flex; }

    .sp-backdrop.is-visible { display: block; }

    .sp-header { padding: 8px 12px; }
    .sp-header-toggle { display: inline-flex; }
    .sp-header-title { font-size: 16px; }
    .sp-content { padding: 16px 12px 28px; }

    body.sp-auth .d-grid-layout,
    .sp-auth-grid { grid-template-columns: 1fr; }

    .branding-column,
    .sp-auth-brand {
        min-height: auto;
        padding: 28px 20px 24px;
    }

    .branding-logo { font-size: 28px; margin-bottom: 12px; }
    .branding-title,
    .sp-auth-brand h1 { font-size: 22px; margin-bottom: 8px; }
    .branding-text,
    .sp-auth-brand p { font-size: 14px; }

    .form-column,
    .sp-auth-form {
        min-height: auto;
        align-items: flex-start;
        padding: 20px 16px 40px;
    }

    .card-header {
        flex-wrap: wrap;
        padding: 16px;
    }

    .card-body { padding: 16px; }
}

@media (max-width: 767.98px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-card .value { font-size: 22px; }

    .hero-section { padding: 32px 16px 56px; }
    .benefits-row { gap: 12px; }
    .benefit-item { flex: 1 1 100%; justify-content: flex-start; }

    .main-content { margin-top: -28px; padding: 0 12px; }

    .progress-steps .step { padding: 8px 10px; }
    .progress-steps .step-text { display: none; }

    .nav-buttons { flex-direction: column-reverse; }
    .nav-buttons .btn { width: 100%; }

    .stepper-label { display: none; }
    .stepper-icon { width: 36px; height: 36px; }

    .tender-item { padding: 16px 14px; }

    .profile-stats { gap: 16px; }

    .otp-input { width: 40px; height: 48px; }

    .sp-user-info { display: none; }

    .filter-tabs { margin-bottom: 12px; }

    .table thead th,
    .table td { padding: 10px 8px; }

    .item-price-input { width: 100%; min-width: 0; }
}

@media (max-width: 575.98px) {
    .stats-grid { grid-template-columns: 1fr; }
    .sp-lang-switcher:not(.sp-lang-switcher--header) {
        top: 8px;
        right: 8px;
    }
    .sp-lang-card { min-width: 0; padding: 8px; }
}

@media (min-width: 768px) {
    .form-control,
    .form-select,
    .form-control-solid {
        font-size: 14px;
    }
}

/* =========================================================================
   ONBOARDING GATE + APP-SHELL POLISH                        (2026-08-27)
   Пока анкета Due Diligence не отправлена, портал закрыт: остальные пункты
   меню рисуются замками. Плюс здесь чинится длинная форма — липкая шапка,
   scroll-margin у степпера и масштаб заголовка страницы.
   ========================================================================= */

/* ---------- Шапка остаётся на месте ----------
   Анкета длиной в шесть экранов, и без липкой шапки после каждого «Continue»
   пропадали и заголовок, и переключатель языка, и выход. */
.sp-header {
    position: sticky;
    top: 0;
    z-index: 30;
}

/* scrollIntoView увозил степпер под шапку — резервируем её высоту. */
.progress-steps,
.sp-dd-page .progress-steps {
    scroll-margin-top: calc(var(--sp-header-h) + 16px);
}

/* ---------- Заголовок страницы ----------
   Голый <h1> брал бутстраповские 2.5rem и спорил с шапкой (18px). */
.dd-page-head h1,
.sp-page-head h1.sp-title {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gn-dark);
    margin: 0 0 4px;
}

.dd-page-head .sp-page-sub {
    color: var(--gn-gray-600);
    font-size: 14px;
    margin: 0;
    max-width: 62ch;
}

/* ---------- Закрытые пункты меню ---------- */
.sp-menu-link.is-locked {
    opacity: 0.55;
    cursor: not-allowed;
    color: var(--sp-ink-4);
}

.sp-menu-link.is-locked:hover {
    background: transparent;
    color: var(--sp-ink-4);
}

.sp-menu-link.is-locked .sp-menu-icon { color: var(--sp-ink-4); }

.sp-menu-lock {
    margin-left: auto;
    font-size: 11px;
    flex-shrink: 0;
}

.sp-menu-note {
    margin: 14px 12px 0;
    padding: 10px 12px;
    border-radius: var(--sp-r-md);
    background: var(--sp-surface-2);
    border: 1px solid var(--sp-border-soft);
    color: var(--sp-ink-3);
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- Выход ----------
   Был btn-danger: красная кнопка во всю ширину читалась как «удалить
   аккаунт». Выход — рядовое действие, а не разрушительное. */
.sp-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: var(--sp-r-md);
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    color: var(--sp-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--sp-dur-1) var(--sp-ease),
                border-color var(--sp-dur-1) var(--sp-ease),
                color var(--sp-dur-1) var(--sp-ease);
}

.sp-signout:hover,
.sp-signout:focus-visible {
    background: var(--gn-danger-soft);
    border-color: rgba(241, 65, 108, 0.35);
    color: #b91d47;
}

/* ---------- Плашка онбординга над анкетой ---------- */
.sp-dd-intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
    border-radius: var(--radius-lg, 10px);
    background: var(--gn-primary-soft);
    border: 1px solid rgba(var(--gn-primary-rgb), 0.28);
}

.sp-dd-intro__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gn-primary);
    color: #fff;
    font-size: 16px;
}

.sp-dd-intro__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gn-dark);
}

.sp-dd-intro__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gn-gray-700);
    max-width: 68ch;
}

/* ---------- Степпер ----------
   Шаги кликабельны (обработчик в due_diligence.php), поэтому им нужны роль,
   фокус и клавиатура — cursor:pointer сам по себе ничего из этого не даёт.
   Плюс «пройден» отличается от «предстоит», а не только от «активен». */
.progress-steps .step:focus-visible {
    outline: 3px solid rgba(var(--gn-primary-rgb), 0.45);
    outline-offset: 2px;
}

.progress-steps .step.completed .step-number {
    background: rgba(255, 255, 255, 0.3);
}

.progress-steps .step:not(.active):not(.completed) .step-number {
    background: var(--gn-gray-200);
    color: var(--gn-gray-700);
}

/* Текстовая подпись прогресса: на телефоне подписи шагов скрыты, и без неё
   остаются шесть безымянных кружков. */
.sp-step-caption {
    display: none;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gn-gray-700);
    margin: -16px 0 20px;
}

@media (max-width: 767.98px) {
    .sp-step-caption { display: block; }

    .progress-steps {
        gap: 6px;
        margin-bottom: 16px;
    }

    .progress-steps .step {
        padding: 0;
        width: 34px;
        height: 34px;
        min-height: 34px;
        justify-content: center;
    }

    .sp-dd-intro { padding: 14px; gap: 12px; }
    .dd-page-head h1 { font-size: 21px; }
}

/* Статус-пилюля в шапке страницы: light-secondary давал серое по серому. */
.dd-page-head .badge.badge-light-secondary {
    background: var(--gn-gray-100);
    color: var(--gn-gray-700);
    border: 1px solid var(--gn-gray-200);
}

.dd-page-head .badge {
    align-self: center;
    white-space: nowrap;
}

/* Заголовки секций стояли по центру, а поля под ними — по левому краю: взгляд
   на каждом шаге возвращался к середине. Выравниваем по содержимому. */
.sp-dd-page .section-header { text-align: left; }
.sp-dd-page .section-header h3 { justify-content: flex-start; font-size: 18px; }

/* Bootstrap 5.3 не поставляет утилиту .min-w-0, поэтому заголовок не мог
   сжаться и выталкивал переключатель языка за край экрана на телефоне. */
.sp-header-lead {
    min-width: 0;
}

.sp-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
   METRONIC CABINET                                          (2026-08-28)

   Кабинет поставщика писали по разметке Metronic 8, а грузим только
   Bootstrap 5.3 — половина классов из вьюх (mb-6..mb-20, p-9, fs-7, fs-8,
   min-w-*, gs-0, mw-600px) в браузере ничего не значила. Отсюда и слипшиеся
   поля профиля, и таблицы без минимальных ширин, и форма смены пароля во всю
   ширину экрана.

   Здесь: шим этих утилит по шкале Metronic (корень 13px) + сам «метрониковский»
   каркас кабинета — тулбар страницы, KPI-карточки, таблицы, меню пользователя.
   Всё ограничено .sp-app, чтобы не задеть публичные страницы портала.
   ========================================================================= */

/* ---------- Шкала отступов Metronic: 6..20 ----------
   1..5 намеренно оставлены бутстраповскими: по ним уже выверены логин и
   анкета, а 6+ у Bootstrap просто нет. */
.sp-app .m-6  { margin: 20px !important; }
.sp-app .m-8  { margin: 26px !important; }
.sp-app .m-10 { margin: 32px !important; }

.sp-app .mt-6  { margin-top: 20px !important; }
.sp-app .mt-7  { margin-top: 22px !important; }
.sp-app .mt-8  { margin-top: 26px !important; }
.sp-app .mt-9  { margin-top: 30px !important; }
.sp-app .mt-10 { margin-top: 32px !important; }
.sp-app .mt-12 { margin-top: 39px !important; }
.sp-app .mt-15 { margin-top: 48px !important; }
.sp-app .mt-20 { margin-top: 65px !important; }

.sp-app .mb-6  { margin-bottom: 20px !important; }
.sp-app .mb-7  { margin-bottom: 22px !important; }
.sp-app .mb-8  { margin-bottom: 26px !important; }
.sp-app .mb-9  { margin-bottom: 30px !important; }
.sp-app .mb-10 { margin-bottom: 32px !important; }
.sp-app .mb-12 { margin-bottom: 39px !important; }
.sp-app .mb-15 { margin-bottom: 48px !important; }
.sp-app .mb-20 { margin-bottom: 65px !important; }

.sp-app .my-6  { margin-top: 20px !important; margin-bottom: 20px !important; }
.sp-app .my-8  { margin-top: 26px !important; margin-bottom: 26px !important; }
.sp-app .my-10 { margin-top: 32px !important; margin-bottom: 32px !important; }

.sp-app .p-6  { padding: 20px !important; }
.sp-app .p-8  { padding: 26px !important; }
.sp-app .p-9  { padding: 30px !important; }
.sp-app .p-10 { padding: 32px !important; }

.sp-app .pt-6  { padding-top: 20px !important; }
.sp-app .pt-8  { padding-top: 26px !important; }
.sp-app .pt-10 { padding-top: 32px !important; }

.sp-app .pb-6  { padding-bottom: 20px !important; }
.sp-app .pb-8  { padding-bottom: 26px !important; }
.sp-app .pb-10 { padding-bottom: 32px !important; }

.sp-app .ps-9 { padding-left: 30px !important; }
.sp-app .pe-9 { padding-right: 30px !important; }

.sp-app .px-6  { padding-left: 20px !important; padding-right: 20px !important; }
.sp-app .px-9  { padding-left: 30px !important; padding-right: 30px !important; }
.sp-app .px-10 { padding-left: 32px !important; padding-right: 32px !important; }

.sp-app .py-6  { padding-top: 20px !important; padding-bottom: 20px !important; }
.sp-app .py-8  { padding-top: 26px !important; padding-bottom: 26px !important; }
.sp-app .py-10 { padding-top: 32px !important; padding-bottom: 32px !important; }
.sp-app .py-15 { padding-top: 48px !important; padding-bottom: 48px !important; }
.sp-app .py-20 { padding-top: 65px !important; padding-bottom: 65px !important; }

/* ---------- Типографическая шкала Metronic ---------- */
.sp-app .fs-1 { font-size: 22px !important; }
.sp-app .fs-2 { font-size: 19px !important; }
.sp-app .fs-3 { font-size: 17px !important; }
.sp-app .fs-4 { font-size: 16px !important; }
.sp-app .fs-5 { font-size: 15px !important; }
.sp-app .fs-6 { font-size: 14px !important; }
.sp-app .fs-7 { font-size: 12.5px !important; }
.sp-app .fs-8 { font-size: 11.5px !important; }
.sp-app .fs-9 { font-size: 10.5px !important; }

.sp-app .fs-2x  { font-size: 26px !important; }
.sp-app .fs-2hx { font-size: 32px !important; }
.sp-app .fs-3x  { font-size: 39px !important; }
.sp-app .fs-4x  { font-size: 52px !important; }
.sp-app .fs-5x  { font-size: 64px !important; }

/* ---------- Размерные утилиты ---------- */
.sp-app .min-w-50px  { min-width: 50px !important; }
.sp-app .min-w-100px { min-width: 100px !important; }
.sp-app .min-w-125px { min-width: 125px !important; }
.sp-app .min-w-150px { min-width: 150px !important; }
.sp-app .min-w-200px { min-width: 200px !important; }
.sp-app .w-50px      { width: 50px !important; }
.sp-app .mw-500px    { max-width: 500px !important; }
.sp-app .mw-600px    { max-width: 600px !important; }
.sp-app .mw-700px    { max-width: 700px !important; }

/* Metronic «gutter start/end 0»: крайние ячейки без бокового паддинга. */
.sp-app .gs-0 tr > :first-child { padding-left: 0 !important; }
.sp-app .gs-0 tr > :last-child  { padding-right: 0 !important; }

.sp-app .border-dashed  { border-style: dashed !important; }
.sp-app .border-primary { border-color: var(--gn-primary) !important; }
.sp-app .border-success { border-color: var(--gn-success) !important; }
.sp-app .border-warning { border-color: var(--gn-warning) !important; }
.sp-app .border-danger  { border-color: var(--gn-danger) !important; }

.sp-app .symbol-25px { width: 25px; height: 25px; }
.sp-app .symbol-35px { width: 35px; height: 35px; }
.sp-app .symbol-45px { width: 45px; height: 45px; }

.sp-app .text-hover-primary { transition: color var(--sp-ease); }
.sp-app .text-hover-primary:hover { color: var(--gn-primary) !important; }

/* Ссылки внутри контента подчёркивались по умолчанию Bootstrap — номера RFQ
   выглядели как «синие ссылки из 2005 года». */
.sp-app .sp-content a { text-decoration: none; }
.sp-app .sp-content a:hover { text-decoration: none; }

/* .card-title у Metronic — флекс-контейнер, поэтому .flex-column в разметке
   раскладывал заголовок и подзаголовок в столбик. Без display:flex они
   слипались в одну строку («Recent Tenders Latest RFQs assigned to you»). */
.sp-app .card-title {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sp-app .card-title.flex-column,
.sp-app .card-title > .flex-column {
    align-items: flex-start;
}

.sp-app .card-header .card-title > span:first-child,
.sp-app .card-title.flex-column > span:first-child {
    font-size: 15px;
    font-weight: 600;
    color: var(--gn-dark);
}

.sp-app .card-header .card-title > span + span {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--gn-gray-600);
}

/* =========================================================================
   ТУЛБАР СТРАНИЦЫ
   Metronic держит заголовок раздела не в шапке, а отдельной полосой над
   контентом: слева название и хлебные крошки, справа — действия.
   ========================================================================= */

.sp-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 20px;
}

.sp-toolbar-lead { min-width: 0; }

.sp-toolbar h1 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--gn-dark);
    margin: 0;
}

.sp-toolbar .sp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--gn-gray-600);
}

.sp-toolbar .sp-breadcrumb a { color: var(--gn-gray-600); }
.sp-toolbar .sp-breadcrumb a:hover { color: var(--gn-primary); }
.sp-toolbar .sp-breadcrumb li { display: flex; align-items: center; gap: 8px; }
.sp-toolbar .sp-breadcrumb li + li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gn-gray-300);
    flex-shrink: 0;
}
.sp-toolbar .sp-breadcrumb .active { color: var(--gn-gray-800); font-weight: 500; }

.sp-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* =========================================================================
   ШАПКА: меню пользователя и компактный переключатель языка
   ========================================================================= */

.sp-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.sp-header-sep {
    width: 1px;
    height: 26px;
    background: var(--gn-gray-200);
    flex-shrink: 0;
}

.sp-user-menu { position: relative; }

.sp-user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 8px 4px 10px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    text-align: right;
    transition: background var(--sp-ease);
}

.sp-user-trigger:hover,
.sp-user-menu.is-open .sp-user-trigger { background: var(--gn-gray-50); }

.sp-user-caret {
    color: var(--gn-gray-500);
    font-size: 11px;
    transition: transform var(--sp-ease);
}

.sp-user-menu.is-open .sp-user-caret { transform: rotate(180deg); }

.sp-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 250px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    border: 1px solid var(--gn-gray-100);
    padding: 8px;
    z-index: 1050;
    display: none;
}

.sp-user-menu.is-open .sp-user-dropdown { display: block; }

.sp-user-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 14px;
    border-bottom: 1px solid var(--gn-gray-100);
    margin-bottom: 6px;
    text-align: left;
}

.sp-user-dropdown-head .sp-user-name,
.sp-user-dropdown-head .sp-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.sp-user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--gn-gray-700);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.sp-user-dropdown a i { width: 18px; color: var(--gn-gray-500); }
.sp-user-dropdown a:hover { background: var(--gn-gray-50); color: var(--gn-primary); }
.sp-user-dropdown a:hover i { color: var(--gn-primary); }

.sp-user-dropdown .sp-user-dropdown-danger { color: var(--gn-danger); }
.sp-user-dropdown .sp-user-dropdown-danger i { color: var(--gn-danger); }
.sp-user-dropdown .sp-user-dropdown-danger:hover {
    background: var(--gn-danger-soft);
    color: var(--gn-danger);
}
.sp-user-dropdown .sp-user-dropdown-danger:hover i { color: var(--gn-danger); }

.sp-user-dropdown-sep {
    height: 1px;
    background: var(--gn-gray-100);
    margin: 6px 8px;
}

/* Переключатель языка в шапке был карточкой с подписью «Language» и занимал
   треть строки. В кабинете он нужен как сегментированный тумблер. */
.sp-lang-switcher--header .sp-lang-card {
    padding: 0;
    border: 1px solid var(--gn-gray-200);
    background: var(--gn-gray-50);
    border-radius: var(--radius-md);
    box-shadow: none;
    min-width: 0;
}

.sp-lang-switcher--header .sp-lang-card__head { display: none; }

.sp-lang-switcher--header .sp-lang-card__row {
    gap: 0;
    padding: 3px;
}

.sp-lang-switcher--header .sp-lang-card__row a {
    min-width: 38px;
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    color: var(--gn-gray-600);
    background: transparent;
    border: 0;
}

.sp-lang-switcher--header .sp-lang-card__row a.is-active {
    background: #fff;
    color: var(--gn-dark);
    box-shadow: var(--shadow-card);
}

/* =========================================================================
   KPI-КАРТОЧКИ
   ========================================================================= */

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--gn-gray-100);
    transition: box-shadow var(--sp-ease), transform var(--sp-ease);
}

.stat-card:hover {
    box-shadow: var(--shadow-raised);
    transform: translateY(-2px);
}

.stat-card .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    flex-shrink: 0;
}

.stat-card .stat-body { min-width: 0; }

.stat-card .value {
    font-size: 26px;
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
}

.stat-card .label {
    font-size: 12.5px;
    color: var(--gn-gray-700);
}

/* =========================================================================
   КАРТОЧКИ И ТАБЛИЦЫ КАБИНЕТА
   ========================================================================= */

.sp-app .card {
    border: 1px solid var(--gn-gray-100);
}

.sp-app .card-header {
    min-height: 60px;
}

.sp-card-table .card-body { padding: 0; }

.sp-app .table > :not(caption) > * > * { background: transparent; }

.sp-app .table thead th {
    white-space: nowrap;
}

.sp-app .table tbody tr { transition: background var(--sp-ease); }
.sp-app .table tbody tr:hover { background: var(--gn-gray-50); }

.sp-app .table td .sp-cell-main {
    font-weight: 600;
    color: var(--gn-dark);
    font-size: 13.5px;
}

.sp-app .table td .sp-cell-sub {
    font-size: 12px;
    color: var(--gn-gray-600);
}

/* Пустое состояние — единый вид на всех списках. */
.sp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    gap: 6px;
}

.sp-empty i {
    font-size: 40px;
    color: var(--gn-gray-300);
    margin-bottom: 10px;
}

.sp-empty h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gn-gray-800);
    margin: 0;
}

.sp-empty p {
    font-size: 13px;
    color: var(--gn-gray-600);
    margin: 0;
    max-width: 420px;
}

/* =========================================================================
   МОБИЛЬНЫЙ РЕЖИМ
   ========================================================================= */

@media (max-width: 991.98px) {
    .sp-toolbar h1 { font-size: 18px; }
}

@media (max-width: 767.98px) {
    /* Таблица кабинета на телефоне превращается в карточки: заголовок
       столбца берётся из data-label, горизонтальной прокрутки не остаётся. */
    .sp-table-cards thead { display: none; }

    .sp-table-cards,
    .sp-table-cards tbody,
    .sp-table-cards tr,
    .sp-table-cards td {
        display: block;
        width: 100%;
    }

    .sp-table-cards tr {
        border: 1px solid var(--gn-gray-100);
        border-radius: var(--radius-md);
        padding: 12px 14px;
        margin-bottom: 10px;
        background: #fff;
    }

    .sp-table-cards td {
        border: 0 !important;
        padding: 6px 0 !important;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        text-align: right;
    }

    .sp-table-cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: var(--gn-gray-600);
        text-align: left;
        padding-top: 2px;
    }

    .sp-table-cards td[data-label=""]::before { content: none; }

    .sp-toolbar { align-items: flex-start; }
    .sp-toolbar-actions { width: 100%; }
    .sp-toolbar-actions > .btn { flex: 1 1 auto; }

    .sp-user-dropdown { min-width: 220px; }
}

@media (max-width: 575.98px) {
    .sp-header { padding: 8px 12px; }
    .sp-user-trigger { padding: 4px; gap: 0; }
}


/* ---------- Шапка кабинета: раскладка ----------
   Заголовок страницы уехал в .sp-toolbar (как в Metronic), поэтому слева в
   шапке остаётся только бургер и вордмарк — и только на телефоне, где сайдбар
   спрятан. На десктопе слева пусто, справа язык и меню пользователя. */
.sp-header-lead {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sp-header-tail {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sp-header-brand {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gn-dark);
    text-decoration: none;
    min-width: 0;
}

.sp-header-brand i { color: var(--gn-primary); font-size: 18px; }

.sp-header-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-user-name,
.sp-user-email { display: block; }

@media (max-width: 991.98px) {
    .sp-header-brand { display: flex; }
}

/* Заголовок анкеты Due Diligence живёт в своей карточке, но должен читаться
   как тот же тулбар, что и на остальных страницах кабинета. */
.dd-page-head h1,
.sp-page-head h1 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}


/* ---------- Строка тендера ----------
   Раньше это была стопка d-flex-утилит Bootstrap прямо в разметке, и на
   планшете кнопки уезжали под номер RFQ. Раскладку держим в CSS. */
.tender-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

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

.tender-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
}

.tender-head-lead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.tender-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--gn-dark);
}

.tender-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tender-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--gn-gray-600);
}

.tender-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tender-meta i { color: var(--gn-gray-500); font-size: 12px; }

.tender-title {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--gn-gray-700);
}

.quotation-badge { gap: 8px; }

/* ---------- Лента активности ---------- */
.activity-content { min-width: 0; }

/* ---------- Вложения ----------
   Длинное имя файла раздвигало карточку и наезжало на кнопку скачивания. */
.attachment-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--gn-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-item .btn-icon { flex-shrink: 0; }

/* ---------- Призыв отправить котировку ---------- */
.sp-cta-card {
    background: var(--gn-primary-soft);
    border: 1px dashed rgba(var(--gn-primary-rgb), 0.45) !important;
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .tender-item { gap: 12px; }
    .tender-icon-wrapper { width: 40px; height: 40px; font-size: 16px; }
    .tender-actions { width: 100%; }
    .tender-actions > .btn { flex: 1 1 0; }
}

/* ---------- Полировка после первого прогона ---------- */

/* Иконка фильтра прилипала к подписи: раньше разрыв держал me-2 в разметке. */
.filter-tab { gap: 8px; }

/* Дата и дедлайн в одной ячейке переносились по слову («10 Sep / 2026»). */
.sp-app .table td .sp-cell-sub,
.sp-app .table td .sp-cell-main { white-space: nowrap; }
.sp-app .table td.sp-cell-wrap .sp-cell-main,
.sp-app .table td.sp-cell-wrap .sp-cell-sub { white-space: normal; }

/* У .sp-card-table тело карточки без паддинга, поэтому боковые поля таблице
   задаём сами — иначе «UNIT» упирался в край карточки. */
.sp-card-table .table tr > :first-child { padding-left: 22px; }
.sp-card-table .table tr > :last-child { padding-right: 22px; }

@media (max-width: 767.98px) {
    .sp-card-table .table.sp-table-cards tr > :first-child,
    .sp-card-table .table.sp-table-cards tr > :last-child { padding-left: 0; padding-right: 0; }
    .sp-card-table .card-body { padding: 12px; }
    .sp-app .table td .sp-cell-sub,
    .sp-app .table td .sp-cell-main { white-space: normal; }
}

/* Обёртка значения в ячейке: на телефоне слева подпись из data-label, справа
   стопка «главное значение + уточнение». Без неё обе строки вставали в ряд. */
.sp-cell { display: block; min-width: 0; }

@media (max-width: 767.98px) {
    .sp-table-cards td > .sp-cell { flex: 1 1 auto; }

    /* Кнопки тендера прыгали сразу под номер RFQ, а описание уезжало под них.
       display:contents распрямляет .tender-head, и порядок задаётся order. */
    .tender-body { display: flex; flex-direction: column; }
    .tender-head { display: contents; }
    .tender-head-lead { order: 1; }
    .tender-meta { order: 2; }
    .tender-title { order: 3; }
    .quotation-badge { order: 4; }
    .tender-actions { order: 5; margin-top: 14px; }
}

/* На узком экране KPI-карточки шли по одной в ряд и занимали четыре экрана:
   складываем содержимое в столбик и оставляем две колонки. */
@media (max-width: 575.98px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

    .stat-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }

    .stat-card .icon-wrapper { width: 38px; height: 38px; font-size: 16px; }
    .stat-card .value { font-size: 22px; }
    .stat-card .label { font-size: 12px; }
}

/* ---------- Дашборд: правки после первого взгляда на живой демо ----------

   1. Карточки дашборда больше не растягиваются друг под друга (h-100 убран из
      разметки): при нуле тендеров пустая карточка раздувалась до высоты ленты
      активности — полэкрана белого поля с одной иконкой посередине.
   2. Лента активности отдаёт до 10 записей и уводила правую колонку далеко
      вниз. На десктопе подрезаем её и прокручиваем внутри карточки; на
      телефоне прокрутка внутри карточки мешает основной, поэтому там без неё. */

.sp-empty { padding: 40px 24px; }

@media (min-width: 992px) {
    .sp-activity-scroll {
        max-height: 420px;
        overflow-y: auto;
        margin-right: -6px;
        padding-right: 6px;
    }

    .sp-activity-scroll::-webkit-scrollbar { width: 5px; }
    .sp-activity-scroll::-webkit-scrollbar-track { background: transparent; }
    .sp-activity-scroll::-webkit-scrollbar-thumb {
        background: var(--gn-gray-200);
        border-radius: 3px;
    }
    .sp-activity-scroll::-webkit-scrollbar-thumb:hover { background: var(--gn-gray-300); }
}

/* Последний элемент ленты не должен тянуть за собой отступ — из-за него внизу
   карточки оставалась лишняя полоса. */
.activity-timeline .activity-item:last-child { margin-bottom: 0; }


/* =========================================================================
   СВЕТЛАЯ ТЕМА: КОМПОНЕНТЫ + ДВИЖЕНИЕ                       (2026-08-28)

   Слой идёт последним и задаёт окончательный вид кабинета: белые карточки с
   тонкой границей вместо теней, спокойные таблицы, чипы, строки-определения
   и правые карточки-ссылки. Плюс единая моторика — одна кривая и три
   длительности из токенов шелла.

   По гайдлайну «анимировать 1–2 элемента на экран» въезд делаем только для
   блоков контента и KPI-плиток; всё остальное — переходы состояний.
   ========================================================================= */

/* ---------- Карточки ---------- */

.sp-app .card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-lg);
    box-shadow: var(--sp-shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}

.sp-app .card-header {
    min-height: 56px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sp-border-soft);
    background: transparent;
}

.sp-app .card-body { padding: 20px; }

.sp-app .card-header .card-title > span:first-child,
.sp-app .card-title.flex-column > span:first-child {
    font-size: 14.5px;
    font-weight: 650;
    color: var(--sp-ink);
    letter-spacing: -0.01em;
}

.sp-app .card-header .card-title > span + span {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--sp-ink-3);
}

/* ---------- Тулбар страницы ---------- */

.sp-toolbar h1 {
    color: var(--sp-ink);
    letter-spacing: -0.02em;
}

.sp-toolbar .sp-breadcrumb { color: var(--sp-ink-3); }
.sp-toolbar .sp-breadcrumb a { color: var(--sp-ink-3); }
.sp-toolbar .sp-breadcrumb .active { color: var(--sp-ink-2); }
.sp-toolbar .sp-breadcrumb li + li::before { background: var(--sp-border-strong); }

/* ---------- Кнопки ---------- */

.sp-app .btn {
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--sp-r-sm);
    transition: background var(--sp-dur-1) var(--sp-ease),
                border-color var(--sp-dur-1) var(--sp-ease),
                color var(--sp-dur-1) var(--sp-ease),
                box-shadow var(--sp-dur-1) var(--sp-ease),
                transform var(--sp-dur-1) var(--sp-ease);
}

.sp-app .btn-light,
.sp-app .btn-secondary {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    color: var(--sp-ink-2);
    box-shadow: var(--sp-shadow-sm);
}

.sp-app .btn-light:hover,
.sp-app .btn-secondary:hover {
    background: var(--sp-surface-3);
    border-color: var(--sp-border-strong);
    color: var(--sp-ink);
}

.sp-app .btn-primary {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.sp-app .btn-primary:hover {
    box-shadow: 0 4px 12px rgba(var(--gn-primary-rgb), 0.28);
}

.sp-app .btn:active { transform: translateY(1px); }

.sp-app .btn:disabled,
.sp-app .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------- Поля ---------- */

.sp-app .form-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-ink-2);
    margin-bottom: 6px;
}

.sp-app .form-control,
.sp-app .form-select,
.sp-app .form-control-solid {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border-strong);
    border-radius: var(--sp-r-sm);
    color: var(--sp-ink);
    transition: border-color var(--sp-dur-1) var(--sp-ease),
                box-shadow var(--sp-dur-1) var(--sp-ease);
}

.sp-app .form-control::placeholder { color: var(--sp-ink-4); }

.sp-app .form-control:focus,
.sp-app .form-select:focus,
.sp-app .form-control-solid:focus {
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 3px var(--sp-accent-soft);
}

.sp-app .form-control:disabled,
.sp-app .form-control[disabled] {
    background: var(--sp-surface-2);
    color: var(--sp-ink-4);
}

.sp-app .form-text { color: var(--sp-ink-4); }

/* ---------- Таблицы ---------- */

.sp-app .table { color: var(--sp-ink-2); }

.sp-app .table thead th {
    background: var(--sp-surface-2);
    color: var(--sp-ink-3);
    border-bottom: 1px solid var(--sp-border);
    font-size: 11px;
    letter-spacing: 0.05em;
}

.sp-app .table td {
    border-top: 1px solid var(--sp-border-soft);
    color: var(--sp-ink-2);
}

.sp-app .table tbody tr:hover { background: var(--sp-surface-2); }

.sp-app .table td .sp-cell-main { color: var(--sp-ink); }
.sp-app .table td .sp-cell-sub { color: var(--sp-ink-4); }

/* ---------- Бейджи и чипы ---------- */

.sp-app .badge {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
}

/* Чип — нейтральная метка (навыки, категории, теги) в духе референса. */
.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    background: var(--sp-surface);
    color: var(--sp-ink-2);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.sp-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Строки-определения (label слева, значение справа) ----------
   Тот же паттерн, что «Team Info» в референсе: используем на профиле и в
   карточке тендера вместо разнобоя из info-grid и таблиц. */

.sp-info-rows {
    display: flex;
    flex-direction: column;
}

.sp-info-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--sp-border-soft);
}

.sp-info-row:last-child { border-bottom: 0; }

.sp-info-row > dt {
    flex: 0 0 190px;
    max-width: 190px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-ink-3);
    margin: 0;
}

.sp-info-row > dd {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sp-ink);
}

@media (max-width: 575.98px) {
    .sp-info-row { flex-direction: column; gap: 4px; }
    .sp-info-row > dt { flex-basis: auto; max-width: none; font-size: 12px; }
}

/* ---------- Карточка-ссылка правого рельса ----------
   Referens: «Seats» / «Login & Security» — иконка, заголовок, строка
   описания и ссылка со стрелкой. Заодно закрывает пустой дашборд у
   поставщика, у которого ещё нет ни одного тендера. */

.sp-quick-card {
    display: block;
    position: relative;
    padding: 20px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-lg);
    background: var(--sp-surface);
    box-shadow: var(--sp-shadow-sm);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--sp-dur-2) var(--sp-ease),
                box-shadow var(--sp-dur-2) var(--sp-ease),
                transform var(--sp-dur-2) var(--sp-ease);
}

.sp-quick-card:hover {
    border-color: var(--sp-accent-line);
    box-shadow: var(--sp-shadow-md);
    transform: translateY(-2px);
}

.sp-quick-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sp-surface-3);
    color: var(--sp-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 14px;
    transition: background var(--sp-dur-2) var(--sp-ease), color var(--sp-dur-2) var(--sp-ease);
}

.sp-quick-card:hover .sp-quick-card-icon {
    background: var(--sp-accent-soft);
    color: var(--sp-accent);
}

.sp-quick-card-title {
    font-size: 15px;
    font-weight: 650;
    color: var(--sp-ink);
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

.sp-quick-card-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--sp-ink-3);
    margin: 0 0 14px;
}

.sp-quick-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-accent);
}

.sp-quick-card-link i {
    font-size: 10px;
    transition: transform var(--sp-dur-2) var(--sp-ease);
}

.sp-quick-card:hover .sp-quick-card-link i { transform: translateX(3px); }

/* ---------- KPI ---------- */

.stat-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-lg);
    box-shadow: var(--sp-shadow-sm);
    padding: 18px;
}

.stat-card:hover {
    box-shadow: var(--sp-shadow-md);
    transform: translateY(-2px);
}

.stat-card .icon-wrapper { border-radius: 10px; }
.stat-card .value { color: var(--sp-ink); letter-spacing: -0.02em; }
.stat-card .label { color: var(--sp-ink-3); }

/* ---------- Фильтр-табы ---------- */

.filter-tab {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    color: var(--sp-ink-2);
    box-shadow: var(--sp-shadow-sm);
    transition: background var(--sp-dur-1) var(--sp-ease),
                border-color var(--sp-dur-1) var(--sp-ease),
                color var(--sp-dur-1) var(--sp-ease);
}

.filter-tab:hover {
    background: var(--sp-surface-3);
    border-color: var(--sp-border-strong);
    color: var(--sp-ink);
}

.filter-tab.active {
    background: var(--sp-accent);
    border-color: var(--sp-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--gn-primary-rgb), 0.25);
}

/* ---------- Список тендеров ---------- */

.tender-item {
    border-bottom: 1px solid var(--sp-border-soft);
    transition: background var(--sp-dur-1) var(--sp-ease);
}

.tender-item:hover { background: var(--sp-surface-2); }
.tender-number { color: var(--sp-ink); }
.tender-meta { color: var(--sp-ink-3); }
.tender-meta i { color: var(--sp-ink-4); }
.tender-title { color: var(--sp-ink-3); }

.tender-icon-wrapper {
    background: var(--sp-surface-3);
    color: var(--sp-ink-3);
    border-radius: 10px;
}

.quotation-badge {
    background: var(--sp-surface-2);
    border: 1px solid var(--sp-border-soft);
    color: var(--sp-ink-2);
}

/* ---------- Пустое состояние ---------- */

.sp-empty i { color: var(--sp-border-strong); }
.sp-empty h5 { color: var(--sp-ink); }
.sp-empty p { color: var(--sp-ink-3); }

/* ---------- Профиль, вложения, инфо-сетка ---------- */

.profile-name { color: var(--sp-ink); }
.profile-email { color: var(--sp-ink-3); }
.profile-stats { border-top-color: var(--sp-border-soft); }
.profile-stat .value { color: var(--sp-ink); }
.profile-stat .label { color: var(--sp-ink-3); }

.info-item .label { color: var(--sp-ink-4); }
.info-item .value { color: var(--sp-ink); }
.separator { background: var(--sp-border-soft); }

.attachment-item {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    transition: background var(--sp-dur-1) var(--sp-ease),
                border-color var(--sp-dur-1) var(--sp-ease);
}

.attachment-item:hover {
    background: var(--sp-surface-2);
    border-color: var(--sp-border-strong);
}

.attachment-name { color: var(--sp-ink); }

/* ---------- Лента активности ---------- */

.activity-timeline .activity-line { background: var(--sp-border); }
.activity-timeline .activity-icon { border-radius: 10px; }

/* ---------- Переключатель языка и меню пользователя ---------- */

.sp-lang-switcher--header .sp-lang-card {
    border: 1px solid var(--sp-border);
    background: var(--sp-surface-2);
}

.sp-lang-switcher--header .sp-lang-card__row a {
    color: var(--sp-ink-3);
    transition: background var(--sp-dur-1) var(--sp-ease), color var(--sp-dur-1) var(--sp-ease);
}

.sp-lang-switcher--header .sp-lang-card__row a:hover:not(.is-active) { color: var(--sp-ink); }

.sp-lang-switcher--header .sp-lang-card__row a.is-active {
    background: var(--sp-surface);
    color: var(--sp-ink);
    box-shadow: var(--sp-shadow-sm);
}

.sp-header-sep { background: var(--sp-border); }
.sp-user-trigger:hover,
.sp-user-menu.is-open .sp-user-trigger { background: var(--sp-surface-3); }
.sp-user-caret { color: var(--sp-ink-4); }

.sp-user-dropdown {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-lg);
    box-shadow: var(--sp-shadow-pop);
}

.sp-user-dropdown-head { border-bottom-color: var(--sp-border-soft); }
.sp-user-dropdown a { color: var(--sp-ink-2); border-radius: var(--sp-r-sm); }
.sp-user-dropdown a i { color: var(--sp-ink-4); }
.sp-user-dropdown a:hover { background: var(--sp-surface-3); color: var(--sp-accent); }
.sp-user-dropdown-sep { background: var(--sp-border-soft); }

/* =========================================================================
   ДВИЖЕНИЕ
   ========================================================================= */

@keyframes sp-rise {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes sp-pop {
    from { opacity: 0; transform: scale(0.96) translate3d(0, -6px, 0); }
    to   { opacity: 1; transform: none; }
}

/* Блоки страницы въезжают снизу лесенкой. Ограничиваемся пятью — дальше
   задержка начинает читаться как «тормозит», а не как появление. */
.sp-content > .sp-toolbar,
.sp-content > .alert,
.sp-content > .stats-grid,
.sp-content > .row,
.sp-content > .card,
.sp-content > .mw-600px,
.sp-content > .sp-dd-page {
    animation: sp-rise var(--sp-dur-3) var(--sp-ease) both;
}

.sp-content > *:nth-child(1) { animation-delay: 0ms; }
.sp-content > *:nth-child(2) { animation-delay: 45ms; }
.sp-content > *:nth-child(3) { animation-delay: 90ms; }
.sp-content > *:nth-child(4) { animation-delay: 135ms; }
.sp-content > *:nth-child(n + 5) { animation-delay: 170ms; }

/* KPI-плитки — своя лесенка внутри общего блока. */
.stats-grid .stat-card { animation: sp-rise var(--sp-dur-3) var(--sp-ease) both; }
.stats-grid .stat-card:nth-child(1) { animation-delay: 90ms; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 130ms; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 170ms; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 210ms; }

.sp-user-menu.is-open .sp-user-dropdown {
    animation: sp-pop var(--sp-dur-2) var(--sp-ease) both;
    transform-origin: top right;
}

.sp-sidebar { transition: transform var(--sp-dur-3) var(--sp-ease); }

/* Полностью выключаем моторику по системной настройке: остаются только
   мгновенные смены состояний. */
@media (prefers-reduced-motion: reduce) {
    .sp-content > *,
    .stats-grid .stat-card,
    .sp-user-menu.is-open .sp-user-dropdown {
        animation: none !important;
    }

    .stat-card:hover,
    .sp-quick-card:hover,
    .sp-app .btn:active { transform: none !important; }
}