/**
 * ND54 — ТЗ на дизайн v2 (Сайт + App / личные кабинеты)
 * Premium Dark/Light · золото #E2A55A · Inter · Glass · Motion
 * Подключать ПОСЛЕДНИМ слоём (после nd54-theme / nd54-cab-tz-unified-fixes).
 */

/* ========== 1. Design tokens ========== */
:root,
body.nd54-cab-rebrand {
    /* Цвета — ТЗ §2.A */
    --nd54-ds-primary: #0f172a;
    --nd54-ds-primary-alt: #1a1a2e;
    --nd54-ds-accent: #e2a55a;
    --nd54-ds-accent-rgb: 226, 165, 90;
    --nd54-ds-accent-soft: rgba(226, 165, 90, 0.14);
    --nd54-ds-surface: #f8f9fa;
    --nd54-ds-surface-elevated: #ffffff;
    --nd54-ds-text: #333333;
    --nd54-ds-text-muted: #64748b;
    --nd54-ds-text-inverse: #ffffff;
    --nd54-ds-success: #10b981;
    --nd54-ds-border: rgba(15, 23, 42, 0.08);
    --nd54-ds-gradient: linear-gradient(135deg, #e2a55a 0%, #0f172a 100%);
    --nd54-ds-gradient-soft: linear-gradient(160deg, rgba(226, 165, 90, 0.18) 0%, rgba(15, 23, 42, 0.04) 55%, transparent 100%);
    --nd54-ds-glass: rgba(255, 255, 255, 0.72);
    --nd54-ds-glass-border: rgba(255, 255, 255, 0.45);

    /* Spacing — кратно 4 */
    --nd54-space-1: 4px;
    --nd54-space-2: 8px;
    --nd54-space-3: 12px;
    --nd54-space-4: 16px;
    --nd54-space-5: 24px;
    --nd54-space-6: 32px;
    --nd54-space-7: 48px;
    --nd54-space-8: 64px;

    /* Typography — Mobile First */
    --nd54-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --nd54-text-h1: clamp(1.75rem, 4.2vw, 2.25rem);
    --nd54-text-h2: clamp(1.25rem, 3vw, 1.5rem);
    --nd54-text-body: clamp(0.875rem, 2vw, 1rem);
    --nd54-text-caption: 0.6875rem;
    --nd54-lh-tight: 1.1;
    --nd54-lh-body: 1.5;

    /* Radius — app 24px для карточек */
    --nd54-radius-app: 24px;
    --nd54-radius-card: 16px;
    --nd54-radius-btn: 12px;
    --nd54-radius-pill: 999px;

    /* Motion — ТЗ §5 */
    --nd54-motion-fast: 150ms;
    --nd54-motion-base: 320ms;
    --nd54-motion-slow: 400ms;
    --nd54-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --nd54-ease-tactile: cubic-bezier(0.34, 1.2, 0.64, 1);

    /* Layout */
    --nd54-content-max: 1440px;
    --nd54-touch: 44px;

    /* Алиасы совместимости */
    --nd54-primary: var(--nd54-ds-primary);
    --nd54-primary-dark: #020617;
    --nd54-primary-rgb: 15, 23, 42;
    --nd54-accent: var(--nd54-ds-accent);
    --nd54-radius-lg: var(--nd54-radius-card);
    --nd54-duration: var(--nd54-motion-base);
    --nd54-duration-fast: var(--nd54-motion-fast);
    --tz-content-max: var(--nd54-content-max);
    --cab-content-max: var(--nd54-content-max);
}

/* Dark mode — ТЗ §6 */
html[data-bs-theme="dark"],
body.dark-theme,
body.nd54-cab-rebrand.dark-theme {
    --nd54-ds-primary: #0f172a;
    --nd54-ds-surface: #1e1e2e;
    --nd54-ds-surface-elevated: #252536;
    --nd54-ds-text: #f1f5f9;
    --nd54-ds-text-muted: #94a3b8;
    --nd54-ds-border: rgba(255, 255, 255, 0.08);
    --nd54-ds-glass: rgba(30, 30, 46, 0.78);
    --nd54-ds-glass-border: rgba(255, 255, 255, 0.1);
    --nd54-ds-gradient-soft: linear-gradient(160deg, rgba(226, 165, 90, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
}

/* ========== 2. Philosophy: воздух + типографика ========== */
html {
    font-family: var(--nd54-font);
    -webkit-font-smoothing: antialiased;
}

body {
    color: var(--nd54-ds-text);
    line-height: var(--nd54-lh-body);
}

h1, .h1 {
    font-size: var(--nd54-text-h1);
    font-weight: 700;
    line-height: var(--nd54-lh-tight);
    letter-spacing: -0.02em;
    color: var(--nd54-ds-text);
}

h2, .h2 {
    font-size: var(--nd54-text-h2);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

body, p, .lead {
    font-size: var(--nd54-text-body);
    font-weight: 400;
}

.nd54-caption,
.caption,
label.nd54-caption {
    font-size: var(--nd54-text-caption);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nd54-ds-text-muted);
}

/* ========== 3. Glass + карточки (Neubrutalism light touch) ========== */
.nd54-glass,
body.nd54-cab-rebrand .glass-card,
body.nd54-cab-rebrand .card:not(.border-0),
body.nd54-cab-rebrand .stat-card,
.nd54-card,
.service-item,
.nd54-project-tasks-panel .nd54-task-card,
.role-modal .role-modal-content {
    background: var(--nd54-ds-glass) !important;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid var(--nd54-ds-glass-border) !important;
    border-radius: var(--nd54-radius-app) !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06) !important;
    transition:
        transform var(--nd54-motion-fast) var(--nd54-ease-tactile),
        box-shadow var(--nd54-motion-base) var(--nd54-ease-out),
        border-color var(--nd54-motion-fast) ease !important;
}

@media (prefers-reduced-motion: no-preference) {
    .nd54-glass:hover,
    body.nd54-cab-rebrand .stat-card:hover,
    .service-item:hover,
    .nd54-project-tasks-panel .nd54-task-card:hover,
    body.nd54-cab-rebrand .crm-rs-card:hover {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1) !important;
    }
}

/* Кабинеты: больше воздуха в workspace */
body.nd54-cab-rebrand .workspace.glass-card,
body.nd54-cab-rebrand .nd54-druz-workspace.glass-card {
    padding: var(--nd54-space-5) !important;
}

body.nd54-cab-rebrand .nd54-cab-main-shell,
body.nd54-cab-rebrand .dashboard-wrapper:not(.nd54-cab-sticky-zone) {
    max-width: var(--nd54-content-max);
}

/* ========== 4. Кнопки — тактильность + states ========== */
.btn,
body.nd54-cab-rebrand .btn,
body.nd54-cab-rebrand .nd54-crm-btn,
.white-button a {
    min-height: var(--nd54-touch);
    padding: 10px 20px !important;
    border-radius: var(--nd54-radius-btn) !important;
    font-weight: 600;
    line-height: 1.25;
    transition:
        transform var(--nd54-motion-fast) var(--nd54-ease-tactile),
        opacity var(--nd54-motion-fast) ease,
        background-color var(--nd54-motion-fast) ease,
        box-shadow var(--nd54-motion-fast) ease !important;
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .btn:hover:not(:disabled),
    body.nd54-cab-rebrand .btn:hover:not(:disabled) {
        transform: scale(1.02);
    }

    .btn:active:not(:disabled),
    body.nd54-cab-rebrand .btn:active:not(:disabled) {
        transform: translateY(1px) scale(0.98);
        opacity: 0.92;
    }
}

.btn-primary,
body.nd54-cab-rebrand.nd54-cabinet--zayavitel .btn-primary,
body.nd54-landing-v2 .btn-primary {
    background: var(--nd54-ds-gradient) !important;
    border: none !important;
    color: var(--nd54-ds-text-inverse) !important;
    box-shadow: 0 4px 14px rgba(var(--nd54-ds-accent-rgb), 0.35);
}

body.nd54-cab-rebrand:not(.nd54-cabinet--zayavitel) .btn-primary {
    background: var(--cab-brand, #2563eb) !important;
    border-color: var(--cab-brand-dark, #1d4ed8) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--cab-brand, #2563eb) 35%, transparent);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 8px 22px rgba(var(--nd54-ds-accent-rgb), 0.4);
}

.btn-primary:disabled,
.btn:disabled {
    opacity: 0.45;
    transform: none !important;
    cursor: not-allowed;
}

.btn-outline-primary,
.btn-outline-light {
    border-width: 1.5px;
}

.btn-secondary,
.btn-outline-secondary {
    background: var(--nd54-ds-surface-elevated);
    color: var(--nd54-ds-text);
    border-color: var(--nd54-ds-border);
}

/* CTA золото */
.btn.nd54-cta-accent,
.nd54-cta-accent {
    background: var(--nd54-ds-accent) !important;
    border-color: var(--nd54-ds-accent) !important;
    color: var(--nd54-ds-primary) !important;
}

/* Sticky bottom action (app) */
.nd54-sticky-action,
body.nd54-cab-rebrand .modal-footer.nd54-sticky-action {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: var(--nd54-space-4);
    padding-bottom: max(var(--nd54-space-4), env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--nd54-ds-surface-elevated) 70%, transparent);
    backdrop-filter: blur(8px);
}

/* ========== 5. Формы ========== */
.form-control,
.form-select,
body.nd54-cab-rebrand .form-control,
body.nd54-cab-rebrand .form-select {
    min-height: 40px;
    padding: 0 var(--nd54-space-3) !important;
    border-radius: var(--nd54-radius-btn) !important;
    border-color: var(--nd54-ds-border);
    background: var(--nd54-ds-surface-elevated);
    color: var(--nd54-ds-text);
    transition: border-color var(--nd54-motion-fast) ease, box-shadow var(--nd54-motion-fast) ease;
}

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

/* ========== 6. Motion — fade in / slide up ========== */
@keyframes nd54-fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nd54-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.nd54-reveal,
.nd54-cab-pane-enter,
body.nd54-cab-rebrand .nd54-cab-pane-enter {
    animation: nd54-fade-slide-up var(--nd54-motion-base) var(--nd54-ease-out) both;
}

.nd54-reveal-stagger > * {
    animation: nd54-fade-slide-up var(--nd54-motion-base) var(--nd54-ease-out) both;
}

.nd54-reveal-stagger > *:nth-child(1) { animation-delay: 0ms; }
.nd54-reveal-stagger > *:nth-child(2) { animation-delay: 60ms; }
.nd54-reveal-stagger > *:nth-child(3) { animation-delay: 120ms; }
.nd54-reveal-stagger > *:nth-child(4) { animation-delay: 180ms; }
.nd54-reveal-stagger > *:nth-child(5) { animation-delay: 240ms; }

.skeleton-line,
.skeleton-row,
.buildTableSkeleton .skeleton-line {
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.12) 0%,
        rgba(148, 163, 184, 0.28) 50%,
        rgba(148, 163, 184, 0.12) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: nd54-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    min-height: 0.75rem;
}

/* Pull refresh placeholder */
.nd54-pull-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--nd54-ds-accent-soft);
    border-top-color: var(--nd54-ds-accent);
    border-radius: 50%;
    animation: nd54-spin 0.8s linear infinite;
}

@keyframes nd54-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .nd54-reveal,
    .nd54-cab-pane-enter,
    .skeleton-line,
    .nd54-ambient__orb {
        animation: none !important;
        transition: none !important;
    }

    .btn:hover,
    .btn:active {
        transform: none !important;
    }
}

/* ========== 7. Landing — Hero & sections ========== */
body.nd54-landing-v2 .section {
    padding: clamp(var(--nd54-space-7), 10vw, var(--nd54-space-8)) var(--nd54-space-4);
}

body.nd54-landing-v2 .nd54-hero-static,
body.nd54-landing-v2 #section1 {
    min-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

body.nd54-landing-v2 .nd54-ambient__mesh {
    background: var(--nd54-ds-gradient-soft);
    opacity: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
    body.nd54-landing-v2 .nd54-ambient__orb {
        animation: nd54-orb-float 18s ease-in-out infinite alternate;
    }

    @keyframes nd54-orb-float {
        0% { transform: translate(0, 0) scale(1); }
        100% { transform: translate(24px, -16px) scale(1.06); }
    }
}

body.nd54-landing-v2 .section-heading h2 {
    font-size: var(--nd54-text-h1);
    font-weight: 700;
    margin-bottom: var(--nd54-space-4);
}

body.nd54-landing-v2 .nd54-site-footer {
    padding: var(--nd54-space-6) var(--nd54-space-4);
    background: var(--nd54-ds-primary);
    color: var(--nd54-ds-text-inverse);
}

/* Карусель отзывов — горизонтальный scroll */
.nd54-carousel-scroll,
.nd54-news-carousel .carousel-inner {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* ========== 8. App / кабинеты — dashboard widgets ========== */
body.nd54-cab-rebrand {
    --cab-ink: var(--nd54-ds-primary);
    --cab-page: var(--nd54-ds-surface);
    --cab-panel: var(--nd54-ds-surface-elevated);
    --cab-line: var(--nd54-ds-border);
    --cab-radius-lg: var(--nd54-radius-app);
}

body.nd54-cab-rebrand.nd54-cabinet--ruk {
    --cab-brand: #2563eb;
    --cab-brand-dark: #1d4ed8;
    --cab-brand-soft: #eff6ff;
}

body.nd54-cab-rebrand.nd54-cabinet--druz {
    --cab-brand: #22c55e;
    --cab-brand-dark: #15803d;
    --cab-brand-soft: #ecfdf5;
}

body.nd54-cab-rebrand.nd54-cabinet--candidate {
    --cab-brand: #6366f1;
    --cab-brand-dark: #4f46e5;
    --cab-brand-soft: #eef2ff;
}

body.nd54-cab-rebrand.nd54-cabinet--press {
    --cab-brand: #7c3aed;
    --cab-brand-dark: #6d28d9;
    --cab-brand-soft: #f5f3ff;
}

body.nd54-cab-rebrand.nd54-cabinet--zayavitel {
    --cab-brand: #0284c7;
    --cab-brand-dark: #0369a1;
    --cab-brand-soft: #e0f2fe;
}

body.nd54-cab-rebrand .main-header:not(.nd54-ruk-header-clean):not(.nd54-ui-header--command) {
    background: linear-gradient(132deg, #0b1220 0%, #111f35 58%, #1a2744 100%) !important;
    border-bottom: 2px solid color-mix(in srgb, var(--nd54-ds-accent) 35%, transparent);
}

body.nd54-cab-rebrand .nd54-cab-mobile-nav,
body.nd54-cab-rebrand .ruk-mobile-nav {
    background: var(--nd54-ds-glass) !important;
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--nd54-ds-glass-border);
}

/* Circle progress widget (app dashboard) */
.nd54-ring-progress {
    --nd54-ring-pct: 0;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: conic-gradient(
        var(--nd54-ds-accent) calc(var(--nd54-ring-pct) * 1%),
        var(--nd54-ds-border) 0
    );
    display: grid;
    place-items: center;
    position: relative;
}

.nd54-ring-progress::after {
    content: "";
    width: 72%;
    height: 72%;
    border-radius: 50%;
    background: var(--nd54-ds-surface-elevated);
}

.nd54-ring-progress span {
    position: absolute;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--nd54-ds-text);
}

/* Sub-nav / tabs — золотой active indicator */
body.nd54-cab-rebrand .sub-nav-tab.active,
body.nd54-cab-rebrand .workspace-tab.active {
    color: var(--nd54-ds-primary);
    background: var(--nd54-ds-accent-soft);
    border-radius: var(--nd54-radius-pill);
}

/* Модалки */
body.nd54-cab-rebrand .modal-content {
    border-radius: var(--nd54-radius-app) !important;
    border: 1px solid var(--nd54-ds-glass-border);
    background: var(--nd54-ds-glass) !important;
    backdrop-filter: blur(20px);
}

/* ========== 9. WCAG — контраст текста ========== */
.text-muted,
.small.text-muted {
    color: var(--nd54-ds-text-muted) !important;
}

/* ========== 10. Mobile 360px — safe area ========== */
@media (max-width: 767.98px) {
    body.nd54-cab-rebrand .workspace,
    body.nd54-cab-rebrand .tab-pane.active {
        padding: var(--nd54-space-4);
    }

    body.nd54-landing-v2 .section {
        padding: var(--nd54-space-6) var(--nd54-space-4);
    }

    .btn-group-vertical .btn,
    .nd54-hero-cta .btn {
        width: 100%;
    }
}

@media (min-width: 1025px) {
    body.nd54-cab-rebrand .nd54-ruk-sidebar,
    body.nd54-cab-rebrand .nd54-druz-sidebar {
        width: 250px !important;
    }
}