/* ============================================================
   WORLD HUD — mobile-first, на design tokens (tokens.css)
   Базові стилі (без медіа-запитів) = mobile bottom sheet.
   Tablet/desktop — override через min-width назад до floating
   side panel. Контент (HTML) однаковий на всіх платформах —
   різниться тільки контейнер (World HUD v1 спека, §6).
   ============================================================ */

.world-hud {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;

    width: auto;
    max-width: none;

    /* dvh замість vh — враховує згортання адресного рядка мобільного
       браузера, інакше низ картки може ховатись під ним. */
    max-height: 85dvh;
    display: flex;
    flex-direction: column;

    background: var(--panel-bg);
    backdrop-filter: blur(12px);

    border-radius: var(--panel-radius-lg) var(--panel-radius-lg) 0 0;
    border: 1px solid var(--border-subtle);
    border-bottom: none;

    box-shadow: var(--panel-shadow-mobile);

    overflow: hidden;
    color: var(--text-primary);
    z-index: var(--z-hud); /* вище за Leaflet-контроли (400) */

    padding-bottom: env(safe-area-inset-bottom, 0);

    animation: hudAppearMobile var(--transition-normal) ease;
}

/* КРИТИЧНО: вища специфічність (.world-hud[hidden] > .world-hud) —
   без цього closeWorldHud() (hud.hidden = true) нічого візуально не
   ховає, бо звичайний клас .world-hud{display:flex} перебиває
   нативну браузерну поведінку [hidden]. */
.world-hud[hidden] {
    display: none !important;
}

@keyframes hudAppearMobile {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
}

/* Ручка для свайп-закриття. Свайп діє ТІЛЬКИ тут (world_hud.js),
   ніколи на весь world-hud — щоб не заважати скролу вмісту
   всередині .world-hud__body і не перетинатись з pan-жестами
   Leaflet-мапи (окрема DOM-гілка, окремий обробник). */
.world-hud__handle {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    height: 24px; /* реальна зона захвату пальцем, ≥24px */
    touch-action: none;
    cursor: grab;
}

.world-hud__handle::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: var(--panel-radius-pill);
    background: rgba(255, 255, 255, .25);
}

.world-hud__header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-md) var(--spacing-2xl) var(--spacing-lg);
    border-bottom: 1px solid var(--border-hairline);
}

.world-hud__header-left {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2xs);
    min-width: 0; /* дозволяє title обрізатись text-overflow, а не розпирати header */
}

.world-hud__type {
    font-size: var(--font-size-2xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.world-hud__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
}

.world-hud__close,
.world-hud__back {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-size-lg);
    padding: var(--spacing-2xs);
    /* тач-таргет ≥44px, а не просто іконка (mobile-first) */
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
}

.world-hud__close:hover,
.world-hud__back:hover {
    color: var(--text-primary);
}

.world-hud__back {
    margin-right: var(--spacing-2xs);
}

.world-hud__back[hidden] {
    display: none;
}

/* Скролиться саме тут, якщо вмісту стане більше за max-height картки —
   не вся картка ціпом, і не сторінка під нею. */
.world-hud__body {
    padding: var(--spacing-xl);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + var(--spacing-xl));
    flex: 1;
    min-height: 0; /* без цього flex-контейнер не дає дочірньому overflow:auto працювати */
}

.world-hud__view {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.world-hud__view[hidden] {
    display: none;
}

.hud-stat {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.hud-stat__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--panel-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border-hairline);
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
}

.hud-stat__label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: 3px;
}

.hud-stat__value {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
}

/* Mood-шкала — узгоджено з DistrictProsperityService.tier() /
   world_views.MOOD_BY_TIER. Кольори з tokens.css (--mood-*), а не
   свої hex — якщо палітра зміниться, міняти в одному місці. */
.hud-mood-critical { color: var(--mood-critical); }
.hud-mood-bad      { color: var(--mood-bad); }
.hud-mood-neutral  { color: var(--mood-neutral); }
.hud-mood-good     { color: var(--mood-good); }
.hud-mood-great    { color: var(--mood-great); }

.hud-next-step {
    margin-top: var(--spacing-sm);
    padding: 16px;
    border-radius: 16px;
    background: var(--border-faint);
    border-left: 4px solid var(--accent);
}

.hud-next-step__label {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-xs);
}

.hud-next-step__value {
    font-size: var(--font-size-md);
    font-weight: 600;
}

/* Поки фонове довантаження (§5 спека) ще не прийшло — тонший, тьмяніший
   текст-плейсхолдер, щоб було видно, що це проміжний стан, а не фінальний. */
.hud-next-step__value.hud-next-step--loading {
    font-weight: 400;
    font-style: italic;
    color: var(--text-muted);
}

.world-hud__actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    border-top: 1px solid var(--border-hairline);
}

.hud-action {
    min-height: 48px; /* тач-таргет ≥44px, mobile-first */
    border-radius: var(--panel-radius-sm);
    border: 1px solid var(--border-visible);
    background: #1f2937;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.hud-action:hover {
    transform: translateY(-2px);
    background: #334155;
}

.hud-action:active {
    transform: translateY(0);
    background: #3b4a63;
}

.hud-action.is-active {
    background: var(--accent);
    border-color: var(--accent);
}

.hud-loading-text {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--font-size-base);
    text-align: center;
    padding: var(--spacing-2xl) 0;
}


/* ============================================================
   Бізнес — адаптовано з district_slots_panel.html. Без
   <details>-акордеонів для структурних секцій (Sprint 5: не
   "адмінка") — <details> лишився тільки для другорядного
   "Що можна побудувати" всередині картки слота.
   ============================================================ */
.hud-business-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.hud-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.hud-section__title {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0;
}

.hud-section__hint {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin: -6px 0 0;
}

.hud-slot-card {
    background: var(--border-faint);
    border: 1px solid var(--border-subtle);
    border-radius: var(--panel-radius-sm);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.hud-slot-card--owned {
    /* #ffd36a = --color-owned з tokens.css. rgba() тут не через var(),
       бо потрібна прозорість (color-mix() ще не 100% стабільний на
       старіших мобільних браузерах) — якщо міняти колір "власного" —
       міняти в обох місцях. */
    border-color: rgba(255, 211, 106, .35);
    background: rgba(255, 211, 106, .06);
}

.hud-slot-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.hud-slot-card__price {
    color: var(--color-success);
    font-weight: 600;
}

.hud-slot-card__meta {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.hud-slot-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.hud-select {
    width: 100%;
    min-height: var(--touch-target-min);
    border-radius: var(--panel-radius-xs);
    border: 1px solid var(--border-visible);
    background: #0f172a;
    color: var(--text-primary);
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-base);
}

.hud-slot-templates {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.hud-slot-templates summary {
    cursor: pointer;
    color: var(--text-muted);
}

.hud-slot-templates__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.hud-slot-templates__row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.hud-slot-templates__more {
    color: var(--text-muted);
}

.hud-notary {
    text-align: center;
    color: var(--color-caution);
    font-size: var(--font-size-xs);
}

/* htmx керує показом .htmx-indicator сам (клас htmx-request на батьку) —
   тут лише базовий стан "прихований", як заведено в htmx-конвенції. */
.hud-notary.htmx-indicator {
    display: none;
}
.htmx-request .hud-notary.htmx-indicator,
.htmx-request.hud-notary.htmx-indicator {
    display: block;
}

.hud-goto-map-btn {
    min-height: 48px;
    border-radius: var(--panel-radius-sm);
    border: 1px solid var(--accent-border);
    background: var(--accent-bg-subtle);
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
}

.hud-goto-map-btn:hover {
    background: var(--accent-bg-hover);
}

.hud-goto-map-btn--secondary {
    background: var(--border-visible);
    border-color: var(--border-visible);
}
button[type="submit"].hud-goto-map-btn--launch {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); /* Глибокий синій градієнт */
    color: #ffffff;
    border: 1px solid #60a5fa;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    transition: all 0.3s ease;
}

/* Створюємо анімацію дихання/світіння */
@keyframes pulse-cta-glow {
    0% { box-shadow: 0 0 15px rgba(37, 99, 235, 0.4); }
    50% { box-shadow: 0 0 25px rgba(37, 99, 235, 0.8); }
    100% { box-shadow: 0 0 15px rgba(37, 99, 235, 0.4); }
}

/* Вмикаємо пульсацію тільки якщо кнопка активна */
button[type="submit"].hud-goto-map-btn--launch:not(:disabled) {
    animation: pulse-cta-glow 2s infinite;
}

/* Ховер-ефект: кнопка трохи збільшується і світлішає */
button[type="submit"].hud-goto-map-btn--launch:hover:not(:disabled) {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.9);
}

button[type="submit"].hud-goto-map-btn--launch:active:not(:disabled) {
    transform: scale(0.98);
}

/* Жорстко гасимо кнопку, якщо запуск неможливий */
button[type="submit"].hud-goto-map-btn--launch:disabled {
    background: var(--accent-bg-subtle, #1e293b);
    color: #64748b;
    border-color: #334155;
    box-shadow: none;
    animation: none;
    transform: none;
    cursor: not-allowed;
}

/* ============================================================
   Досьє — RegionalBudgetDossierService.build_region_summary.
   Єдине місце, де свідомо показуємо сирі числа (§0.5 спека:
   "спочатку відповідь, потім цифри" — Summary дає відповідь,
   Досьє дає цифри).
   ============================================================ */
.hud-dossier-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.hud-dossier-flow {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: var(--spacing-2xs) 0;
}

.hud-dossier-flow__item {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.hud-dossier-flow__item--income strong {
    color: var(--color-success);
}

.hud-dossier-flow__item--spending strong {
    color: var(--color-warning);
}

.hud-dossier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.hud-dossier-grid__item {
    background: var(--border-faint);
    border: 1px solid var(--border-subtle);
    border-radius: var(--panel-radius-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.hud-dossier-grid__item span {
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
}

.hud-dossier-grid__item strong {
    color: var(--text-primary);
    font-size: var(--font-size-md);
}


/* ============================================================
   Проєкти — перевикористовує вже готовий economy/templates/
   market/partials/public_project_voting_queue.html. Той шаблон
   писався під світлішу тему; тут — override під темну скляну
   картку World HUD, тільки коли він вкладений усередину неї.
   ============================================================ */
.world-hud .hud-projects-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.world-hud .rde-voting-queue {
    background: transparent;
}

.world-hud .rde-voting-header h3 {
    color: var(--text-primary);
    font-size: var(--font-size-md);
    margin: 0 0 var(--spacing-2xs);
}

.world-hud .rde-voting-header p {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin: 0 0 var(--spacing-md);
}

.world-hud .rde-project-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.world-hud .rde-project-card {
    background: var(--border-faint);
    border: 1px solid var(--border-subtle);
    border-radius: var(--panel-radius-sm);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.world-hud .rde-project-main strong {
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.world-hud .rde-project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-2xs);
}

.world-hud .rde-project-votes {
    color: var(--color-success);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--spacing-xs);
}

.world-hud .rde-project-actions .btn-primary,
.world-hud .rde-project-actions .btn-secondary {
    width: 100%;
    min-height: var(--touch-target-min);
    border-radius: var(--panel-radius-xs);
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.world-hud .rde-project-actions .btn-primary {
    background: var(--accent);
    color: var(--text-primary);
}

.world-hud .rde-project-actions .btn-secondary {
    background: var(--border-visible);
    color: var(--text-primary);
}

.world-hud .rde-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-2xl) 0;
}


/* ============================================================
   TABLET (≥768px) — floating side panel, вужча колонка.
   Це "еталонна платформа": HUD і мапа видно одночасно,
   без bottom sheet і без свайп-закриття.
   ============================================================ */
@media (min-width: 768px) {
    .world-hud {
        position: absolute;
        left: auto;
        right: 20px;
        bottom: auto;
        top: 20px;

        width: 320px;
        max-width: calc(100vw - 40px);
        max-height: calc(100% - 40px);

        border-radius: var(--panel-radius-md);
        border-bottom: 1px solid var(--border-subtle);

        box-shadow: var(--panel-shadow-elevated);
        padding-bottom: 0;

        animation: hudAppear var(--transition-normal) ease;
    }

    @keyframes hudAppear {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: none; }
    }

    /* Свайп-закриття існує лише для mobile bottom sheet */
    .world-hud__handle {
        display: none;
    }

    .world-hud__title {
        font-size: var(--font-size-2xl);
    }
}


/* ============================================================
   DESKTOP (≥1200px) — трохи ширше, решта як на tablet
   ============================================================ */
@media (min-width: 1200px) {
    .world-hud {
        width: 360px;
    }
}


/* ============================================================
   ONBOARDING PLAYBOOK WIDGET (REFINED)
   ============================================================ */
.map-playbook-container {
    position: absolute;
    top: 65px; /* Одразу під гаманцем */
    left: 12px;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Пропускаємо кліки крізь контейнер */
}

/* Кнопка-кліпса, яка залишається на екрані */
.playbook-toggle-fab {
    pointer-events: auto;
    align-self: flex-start;
    background: var(--panel-bg);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    padding: 8px 14px;
    border-radius: var(--panel-radius-pill);
    cursor: pointer;
    font-weight: 700;
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--panel-shadow-elevated);
    backdrop-filter: blur(12px);
    transition: var(--transition-fast) ease;
}

.playbook-toggle-fab:hover {
    background: var(--color-success);
    color: #08111f;
}

/* Сам віджет */
.map-playbook-widget {
    pointer-events: auto;
    background: var(--panel-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-success);
    border-radius: var(--panel-radius-md);
    padding: var(--spacing-xl);

    width: 320px;
    max-width: calc(100vw - 24px); /* Захист для мобільних */
    box-shadow: var(--panel-shadow-elevated);
    color: var(--text-primary);

    transform-origin: top left;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Стан "Згорнуто" */
.map-playbook-widget.is-hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

/* Шапка віджета */
.playbook-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--spacing-sm);
}

.playbook-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-success);
    margin: 0;
}

.playbook-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-size-lg);
    padding: var(--spacing-2xs);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
}

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

/* Кроки */
.playbook-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg) 0;
}

.playbook-step {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--text-secondary);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: rgba(74, 222, 128, 0.15);
    color: var(--color-success);
    border-radius: var(--panel-radius-pill);
    font-weight: bold;
    font-size: var(--font-size-xs);
}

.playbook-step.is-active .step-number {
    background: var(--color-success);
    color: #08111f;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

.playbook-step.is-active {
    color: var(--text-primary);
}

/* Акордеони підказок */
.playbook-hints {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.hint-accordion {
    background: var(--border-faint);
    border: 1px solid var(--border-subtle);
    border-radius: var(--panel-radius-xs);
    overflow: hidden;
}

.hint-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.hint-summary::-webkit-details-marker {
    display: none;
}

.hint-summary:hover {
    background: var(--border-visible);
    color: var(--text-primary);
}

.hint-accordion[open] .hint-summary {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}

.hint-content {
    padding: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.45;
}

.hint-content strong {
    color: var(--text-primary);
}

    .playbook-step.is-completed {
        display: none !important;
    }

    .playbook-success-msg {
        display: none;
        text-align: center;
        color: #10b981;
        font-size: 0.95rem;
        font-weight: bold;
        padding: 15px 0;
        animation: fadeIn 0.5s ease;
    }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }