/* ─────────────────────────────────────────────────────────────────────────
   Dim-link — Design system
   Brand tokens, reusable components, animations.
   Meant to complement Tailwind CDN utilities without fighting them.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* Brand palette — indigo primary with warm amber accent */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;

    --accent-500: #f59e0b;  /* amber — premium / highlighted */
    --accent-600: #d97706;

    --ok-500:    #10b981;
    --warn-500:  #f59e0b;
    --error-500: #f43f5e;
    --error-600: #e11d48;

    /* Neutral scale */
    --bg:          #f8fafc;   /* slate-50 */
    --surface:     #ffffff;
    --surface-2:   #f1f5f9;   /* slate-100 */
    --border:      #e2e8f0;   /* slate-200 */
    --border-strong: #cbd5e1; /* slate-300 */
    --text:        #0f172a;   /* slate-900 */
    --text-muted:  #475569;   /* slate-600 */
    --text-dim:    #94a3b8;   /* slate-400 */

    /* Shape + elevation */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
    --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
    --shadow:    0 4px 12px -2px rgb(15 23 42 / 0.06), 0 2px 4px -2px rgb(15 23 42 / 0.04);
    --shadow-lg: 0 14px 30px -10px rgb(15 23 42 / 0.1), 0 4px 8px -4px rgb(15 23 42 / 0.06);
    --shadow-brand: 0 10px 25px -10px rgb(79 70 229 / 0.4);

    /* Motion */
    --ease:   cubic-bezier(.4, 0, .2, 1);
    --dur:    200ms;
    --dur-lg: 300ms;
}

* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

html, body {
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.2;
}
@media (min-width: 768px) {
    .page-title { font-size: 1.875rem; }
}
.page-subtitle {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}
.section-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    border: 1px solid transparent;
    user-select: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.btn-primary {
    background: var(--brand-600);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
    background: var(--brand-700);
    box-shadow: var(--shadow-brand);
    transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
}

.btn-danger {
    background: var(--error-500);
    color: #fff;
}
.btn-danger:hover:not(:disabled) { background: var(--error-600); }

.btn-success {
    background: var(--success-600, #059669);
    color: #fff;
}
.btn-success:hover:not(:disabled) { background: #047857; }

.btn-accent {
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    color: #fff;
}
.btn-accent:hover:not(:disabled) {
    box-shadow: 0 10px 25px -10px rgb(217 119 6 / 0.5);
    transform: translateY(-1px);
}

.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.8rem 1.25rem; font-size: 0.9375rem; }
.btn-icon {
    padding: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.card-pad    { padding: 1.25rem; }
.card-pad-lg { padding: 1.75rem; }

.card-hover {
    transition: all var(--dur) var(--ease);
}
.card-hover:hover {
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

/* Draft (unpublished) property card */
.property-card.is-draft {
    background: #f8fafc;       /* slate-50 */
    border-color: #e2e8f0;     /* slate-200 */
}
.property-card.is-draft .draft-photo img {
    opacity: 0.8;
    filter: saturate(0.6);
}
.property-card.is-draft .draft-photo .no-photo-placeholder {
    background: #f1f5f9;       /* slate-100 → трохи темніший placeholder */
}

/* Published property card — тонкий зелений бордер, щоб опубліковані одразу
   вирізнялись серед сірих чернеток. Зелений = «опубліковано/live» (у тон
   плашці «Опубл.» та кнопці «Постити»). Не застосовується якщо є помилки
   публікації — там лишається бурштиновий border-amber-300 як попередження. */
.property-card.is-published {
    border-color: #34d399;                          /* emerald-400 */
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.12); /* легка зелена тінь */
}
.property-card.is-published:hover {
    border-color: #10b981;                          /* emerald-500 — лишається зеленим на hover */
}

/* ── Form controls ──────────────────────────────────────────────────────── */
.field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

.input, .select, .textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
}
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }

.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}

/* ── Badges & chips ─────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.01em;
}
.badge-brand   { background: var(--brand-50);    color: var(--brand-700); }
.badge-accent  { background: #fef3c7;            color: #b45309; }
.badge-success { background: #d1fae5;            color: #047857; }
.badge-danger  { background: #ffe4e6;            color: var(--error-600); }
.badge-neutral { background: var(--surface-2);   color: var(--text-muted); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9999px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
.chip.is-active {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: all var(--dur) var(--ease);
    position: relative;
}
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-link:hover {
    background: var(--surface-2);
    color: var(--text);
}
.sidebar-link.is-active {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 600;
}
.sidebar-link.is-active::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 3px;
    background: var(--brand-600);
    border-radius: 0 3px 3px 0;
}
.sidebar-section {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.75rem 0.875rem 0.5rem;
}
/* Sub-items under collapsible nav groups (e.g. Налаштування) */
.sidebar-sublink {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem 0.5rem 2.75rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: all var(--dur) var(--ease);
    position: relative;
}
.sidebar-sublink svg { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar-sublink:hover { background: var(--surface-2); color: var(--text); }
.sidebar-sublink.is-active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.sidebar-sublink.is-active::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: var(--brand-600);
    border-radius: 0 2px 2px 0;
}
/* Admin (rose) colour variant */
.sidebar-sublink.is-admin                   { color: #fb7185; }
.sidebar-sublink.is-admin:hover             { color: #e11d48; background: #fff1f2; }
.sidebar-sublink.is-admin.is-active         { color: #be123c; background: #fff1f2; font-weight: 600; }
.sidebar-sublink.is-admin.is-active::before { background: #f43f5e; }

/* ── Collapsible sidebar (desktop) ─────────────────────────────────────────
   Активується через [data-sidebar="collapsed"] на <html>. Стан зберігається
   в localStorage('dimlink.sidebar.collapsed') і застосовується до рендеру
   через inline-script у <head> _Layout.cshtml — щоб не моргало.

   Логіка ширини збудована на CSS-змінній --dimlink-sidebar-w, бо TailwindCDN
   класи (w-64, lg:ml-64) — статичні і не реагують на змінну. Тому рідні
   стилі sidebar/main column перевизначають їх через ту саму змінну.
*/
:root { --dimlink-sidebar-w: 16rem; }
[data-sidebar="collapsed"] { --dimlink-sidebar-w: 4.5rem; }

@media (min-width: 1024px) {
    /* Sidebar ширина і margin основної колонки керуються через CSS-змінну */
    aside#sidebar {
        width: var(--dimlink-sidebar-w) !important;
        transition: width 220ms cubic-bezier(.4,0,.2,1);
    }
    .lg\:ml-64 {
        margin-left: var(--dimlink-sidebar-w) !important;
        transition: margin-left 220ms cubic-bezier(.4,0,.2,1);
    }
}

/* У згорнутому стані — ховаємо всі текстові підписи, лишаємо тільки іконки */
[data-sidebar="collapsed"] .sidebar-label,
[data-sidebar="collapsed"] .sidebar-section,
[data-sidebar="collapsed"] .sidebar-brand-text,
[data-sidebar="collapsed"] .sidebar-meta,
[data-sidebar="collapsed"] #settings-sub,
[data-sidebar="collapsed"] #olx-sub,
[data-sidebar="collapsed"] #settings-chev,
[data-sidebar="collapsed"] #olx-chev {
    display: none !important;
}

/* Центруємо іконки в ланках, прибираємо gap, додаємо невелике padding */
[data-sidebar="collapsed"] .sidebar-link {
    justify-content: center;
    padding: 0.625rem 0.5rem;
    gap: 0;
}
[data-sidebar="collapsed"] .sidebar-link.is-active::before {
    /* Активна риска ліворуч заходить у nav-padding — зрушуємо її в видимий простір */
    left: -0.5rem;
}

/* User card у згорнутому: ховаємо текст і кнопку logout, лишаємо аватар */
[data-sidebar="collapsed"] .sidebar-user-text,
[data-sidebar="collapsed"] .sidebar-user-logout {
    display: none !important;
}
[data-sidebar="collapsed"] .sidebar-user-card {
    justify-content: center;
    padding: 0.5rem 0;
}

/* Кнопка перемикача — тонкий поворот стрілки */
.sidebar-collapse-btn svg { transition: transform 220ms cubic-bezier(.4,0,.2,1); }
[data-sidebar="collapsed"] .sidebar-collapse-btn svg { transform: rotate(180deg); }

/* Брендовий блок у згорнутому: лого по центру, без тексту */
[data-sidebar="collapsed"] .sidebar-brand {
    justify-content: center;
}

/* Прихований у згорнутому — клас зручно вішати на елементи що мають зникати
   тільки при collapse (наприклад, бейджі CRM, plan-pill тощо) */
[data-sidebar="collapsed"] .sidebar-hide-when-collapsed {
    display: none !important;
}

/* ── Wizard timeline (left sidebar, Index page) ───────────────────────────
   Вертикальний timeline з лінією та точками-станціями. Замість toggling
   Tailwind-класів з JS використовуємо `data-state` атрибут на кожному
   .wizard-step-btn → CSS малює всі стани декларативно. JS лише виставляє
   атрибут (active|completed|pending).
*/
.wizard-step-btn { transition: background-color 180ms ease; }
.wizard-step-btn:hover { background-color: rgb(248 250 252 / 0.7); }

.wizard-step-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    background: white;
    border: 2px solid rgb(203 213 225);
    color: rgb(148 163 184);
    transition: all 250ms cubic-bezier(.4,0,.2,1);
    position: relative;
    z-index: 10;
}

/* Pending — дефолт */
.wizard-step-btn[data-state="pending"] .step-name { color: rgb(100 116 139); font-weight: 500; }
.wizard-step-btn[data-state="pending"] .step-meta { color: rgb(148 163 184); }

/* Active — індиго з glow */
.wizard-step-btn[data-state="active"] .wizard-step-icon {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: white;
    box-shadow: 0 0 0 4px rgb(99 102 241 / 0.12), 0 4px 12px rgb(99 102 241 / 0.28);
}
.wizard-step-btn[data-state="active"] .step-name { color: rgb(15 23 42); font-weight: 700; }
.wizard-step-btn[data-state="active"] .step-meta { color: rgb(99 102 241); font-weight: 600; }
.wizard-step-btn[data-state="active"] .step-arrow { color: rgb(99 102 241); transform: translateX(2px); }

/* Completed — emerald з галочкою */
.wizard-step-btn[data-state="completed"] .wizard-step-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
    color: white;
}
.wizard-step-btn[data-state="completed"] .step-name { color: rgb(51 65 85); font-weight: 600; }
.wizard-step-btn[data-state="completed"] .step-meta { color: rgb(16 185 129); font-weight: 600; }
.wizard-step-btn[data-state="completed"] .step-number { display: none; }
.wizard-step-btn[data-state="completed"] .step-check { display: inline-block; }
.wizard-step-btn[data-state="pending"] .step-check,
.wizard-step-btn[data-state="active"] .step-check { display: none; }

/* Pulse-ring для активної точки */
@keyframes wizard-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgb(99 102 241 / 0.12), 0 4px 12px rgb(99 102 241 / 0.28); }
    50%      { box-shadow: 0 0 0 8px rgb(99 102 241 / 0.06), 0 4px 16px rgb(99 102 241 / 0.32); }
}
.wizard-step-btn[data-state="active"] .wizard-step-icon { animation: wizard-pulse 2.4s ease-in-out infinite; }

.step-arrow { transition: transform 200ms ease, color 200ms ease; }

/* Locked — крок недоступний, бо попередні неповні */
.wizard-step-btn.wizard-step-locked { opacity: 0.5; cursor: not-allowed; }
.wizard-step-btn.wizard-step-locked:hover { background-color: transparent; }
.wizard-step-btn.wizard-step-locked .step-arrow { display: none; }
.wizard-step-btn.wizard-step-locked .step-lock { display: inline-flex; }
.step-lock { display: none; flex-shrink: 0; color: rgb(148 163 184); }

/* Анімація "тряски" поля при невдалому переході — щоб користувач помітив */
@keyframes wizard-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}
.wizard-shake { animation: wizard-shake 240ms ease-in-out 2; }

/* ── Photo tiles drag-and-drop ──────────────────────────────────────────
   Без user-select:none драг тягне за собою text-selection (підсвічує
   ім'я файлу). Без -webkit-user-drag:none на img Safari/Chrome запускає
   native image-drag замість нашого DnD на parent div.
*/
.photo-tile {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    /* touch-action:none — критично для мобільного: pointer-events drag з touch
       без цього не запускається (браузер вибирає panning/pull-to-refresh). */
    touch-action: none;
}
.photo-tile img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none; /* щоб mousedown пройшов до .photo-tile */
}
.photo-tile.dragging { opacity: 0.35; }
.photo-tile.drag-over {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
    transform: scale(1.04);
    transition: transform 120ms ease;
}

/* Ghost-плитка яка слідує за курсором під час drag — клон оригіналу.
   Box-shadow + rotation створюють ефект «піднятої з папера» картки. */
.photo-tile-ghost {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    transform: rotate(-2deg) scale(1.05);
    opacity: 0.92;
    cursor: grabbing;
}
.photo-tile-ghost img {
    pointer-events: none;
}

/* ── Platform connection state ──────────────────────────────────────────
   Партіал _Platforms виводить ДВІ картки: «Платформи» (тільки connected)
   та «Не підключені» (показується тільки якщо disconnected.Any()).
   У первинному списку приховуємо disconnected items повністю — вони вже
   мають свою картку нижче зі спрощеним UI.
*/
.platform-list .platform-item[data-connected="false"] { display: none !important; }

/* «не підключено» підпис у середині .platform-item тепер ніколи не
   потрібен — disconnected items живуть в окремій картці нижче. !important
   важливе бо Tailwind .block (display:block) має такий самий specificity
   і ламає звичайне `display: none`. */
.platform-item .platform-status-disconnected { display: none !important; }

/* ── Mobile bottom nav ──────────────────────────────────────────────────── */
.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    color: var(--text-dim);
    font-size: 0.6875rem;
    font-weight: 500;
    transition: color var(--dur) var(--ease);
    min-height: 52px;
}
.bottom-nav-link svg { width: 22px; height: 22px; }
.bottom-nav-link.is-active { color: var(--brand-600); }
.bottom-nav-link.is-active svg { stroke-width: 2.2; }

/* Central FAB in bottom nav */
.bottom-nav-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: -12px auto 0;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    border-radius: 16px;
    color: #fff;
    box-shadow: var(--shadow-brand);
    transition: transform var(--dur) var(--ease);
}
.bottom-nav-fab:active { transform: scale(0.92); }

/* ── Platform toggle (keeps old API) ────────────────────────────────────── */
.platform-toggle input:checked + .toggle-bg { background-color: var(--brand-600); }
.platform-toggle input:checked + .toggle-bg .toggle-dot { transform: translateX(20px); }
.toggle-bg { transition: background-color var(--dur) var(--ease); }
.toggle-dot { transition: transform var(--dur) var(--ease); }

/* ── Platform drag-and-drop reorder ─────────────────────────────────────── */
.platform-item { position: relative; transition: opacity .15s; }
.platform-item.dragging { opacity: .35; }
.platform-item.drop-before::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--brand-500);
    border-radius: 2px;
    z-index: 10;
    pointer-events: none;
}
.platform-item.drop-after::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--brand-500);
    border-radius: 2px;
    z-index: 10;
    pointer-events: none;
}
.drag-handle {
    display: none;
    cursor: grab;
}
.drag-handle:active { cursor: grabbing; }
.platform-list.sorting .drag-handle { display: flex; align-items: center; }
.sort-toggle-btn.sort-active {
    color: var(--brand-600);
    background: #eef2ff;
}

/* ── Misc utilities ─────────────────────────────────────────────────────── */
.divider-h { height: 1px; background: var(--border); }
.spinner   { animation: dl-spin 1s linear infinite; }
.fade-in   { animation: dl-fade 0.3s var(--ease); }
.pop-in    { animation: dl-pop 0.25s var(--ease); }

@keyframes dl-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes dl-fade { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)} }
@keyframes dl-pop  { from{opacity:0; transform:scale(0.96)} to{opacity:1; transform:scale(1)} }

/* Mobile drawer / sheet */
#mobile-overlay { transition: opacity var(--dur-lg) var(--ease); }
#sidebar        { transition: transform var(--dur-lg) var(--ease); }

/* More-menu bottom sheet */
#more-sheet-overlay { transition: opacity var(--dur) var(--ease); }
#more-sheet {
    transition: transform var(--dur-lg) var(--ease);
}

/* Custom scrollbar */
nav::-webkit-scrollbar { width: 6px; }
nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
nav::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Focus ring helpers */
.focus-ring:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}

/* Pretty scrollbar helper for content areas */
.pretty-scroll::-webkit-scrollbar        { width: 8px; height: 8px; }
.pretty-scroll::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 4px; }
.pretty-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
}
.empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    border-radius: 14px;
    background: var(--surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
}

/* ── OLX dropdown menu items ────────────────────────────────────────────── */
.olx-dd-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: #374151;               /* slate-700 */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
    white-space: nowrap;
}
.olx-dd-item:hover    { background-color: #f8fafc; }  /* slate-50  */
.olx-dd-item.danger   { color: var(--error-600); }
.olx-dd-item.danger:hover { background-color: #fff1f2; }

/* ── Required-field error highlight ────────────────────────────────────── */
/* Застосовується через JS до полів, які юзер не заповнив перед submit.
   Знімається автоматично при першому інпуті (див. markEmptyFields).
   Shake-анімація програється кожен раз, коли клас додається — JS форсить
   reflow (void el.offsetWidth), щоб повторний submit на тих самих полях
   все одно дав візуальний фідбек. */
@keyframes field-error-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}
.field-error,
.field-error:focus {
    border-color: #fb7185 !important;            /* rose-400 */
    background-color: #fff1f2 !important;        /* rose-50  */
    box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.18) !important;
    animation: field-error-shake 0.32s ease-in-out;
}
.field-error::placeholder { color: #fda4af; }    /* rose-300 */

/* ── Chip Multiselect ──────────────────────────────────────────────────
   Компактний UI для multi-checkbox груп: "+ Обрати" + чіпси для обраного.
   Стиль як на DOM.RIA. Активується JS-функцією upgradeChipMultiselect()
   на контейнерах з [data-chip-multiselect].

   Принцип роботи:
   1. Оригінальні <label><input type="checkbox"/>текст</label> елементи ховаються
      (display:none), але залишаються в DOM — їх читають publishProperty()
      та інша sync-логіка.
   2. JS будує над ними `.chip-ms` блок із "+" кнопкою та popover-списком.
   3. Кожен chip = обраний checkbox. Клік "×" — знімає checkbox.checked + change.
   4. Popover-checkbox = дзеркало source-checkbox (двосторонній sync).
   ───────────────────────────────────────────────────────────────────── */
.chip-ms {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.chip-ms-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    min-height: 2.5rem;
}
.chip-ms-add {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e2e8f0;            /* slate-200 */
    border-radius: 9999px;
    color: #475569;                       /* slate-600 */
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.chip-ms-add:hover {
    background: #f8fafc;                  /* slate-50 */
    border-color: #cbd5e1;                /* slate-300 */
}
.chip-ms-add[aria-expanded="true"] {
    border-color: #f97316;                /* orange-500 */
    background: #fff7ed;                  /* orange-50 */
    color: #c2410c;                       /* orange-700 */
}
.chip-ms-add svg {
    flex-shrink: 0;
}
.chip-ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4375rem 0.375rem 0.4375rem 0.875rem;
    background: #f1f5f9;                  /* slate-100 */
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: #334155;                       /* slate-700 */
    line-height: 1;
    max-width: 100%;
}
.chip-ms-chip-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}
.chip-ms-chip-x {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    background: transparent;
    border-radius: 9999px;
    cursor: pointer;
    color: #64748b;                       /* slate-500 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    line-height: 1;
    padding: 0;
}
.chip-ms-chip-x:hover {
    background: #cbd5e1;                  /* slate-300 */
    color: #0f172a;                       /* slate-900 */
}
.chip-ms-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    margin-top: 0.375rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.18);
    /* Grid-розкладка опцій: 1 колонка на мобільному, до 3-х на ширшому екрані —
       як на DOM.RIA-формі. auto-fit зменшує кількість колонок коли опцій мало
       або екран вузький; minmax гарантує мін-ширину елемента для читабельності. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.125rem;
    /* Mobile-first ширина — 1 колонка близько до border; розширюється до
       3 колонок (з minmax вище = ~600px+ для 3-х) на десктопі. */
    min-width: 280px;
    max-width: min(680px, calc(100vw - 2rem));
    max-height: 420px;
    overflow-y: auto;
    padding: 0.375rem;
}
.chip-ms-popover.hidden {
    display: none;
}
.chip-ms-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #334155;
    user-select: none;
}
.chip-ms-option:hover {
    background: #f8fafc;
}
.chip-ms-option input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #f97316;                /* orange-500 — як DOM.RIA */
    flex-shrink: 0;
    cursor: pointer;
}
.chip-ms-option-text {
    flex: 1;
    line-height: 1.25;
}
/* Якщо source-label всередині хоста має data-chip-ms-source — ховаємо */
.chip-ms-source-hidden {
    display: none !important;
}

/* ── Pretty Select ──────────────────────────────────────────────────────
   Кастомний дропдаун-апгрейд над нативним <select>. JS-функція
   upgradePrettySelect() обгортає select у wrapper, ховає його з viewport
   (але лишає у DOM — щоб publishProperty(), syncSelect() та change-listeners
   працювали без змін), і будує button-trigger + listbox-popover.

   Чому не CSS-only:
   • native <select> не дає стилізувати opened <option> list — браузер малює
     свою стрілку і свій popover (різний на macOS/Win/Linux/iOS/Android).
   • Не можна додати search/keyboard-nav/animations.
   ──────────────────────────────────────────────────────────────────── */
.pretty-select-wrap {
    position: relative;
    display: block;
}
.pretty-select-wrap > select.pretty-select-native {
    /* Ховаємо нативний select візуально, але залишаємо інтерактивним для
       форм-сабміту, autofill, JS-доступу. opacity:0 + pointer-events:none —
       щоб клік йшов у trigger-кнопку. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}
.pretty-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    font-family: inherit;
}
.pretty-select-trigger:hover {
    border-color: var(--border-strong);
}
.pretty-select-trigger:focus-visible,
.pretty-select-trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
}
.pretty-select-trigger.is-placeholder .pretty-select-trigger-text {
    color: var(--text-dim);
}
.pretty-select-trigger-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pretty-select-trigger-chev {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: #94a3b8;          /* slate-400 */
    transition: transform 0.2s var(--ease), color 0.15s;
}
.pretty-select-trigger[aria-expanded="true"] .pretty-select-trigger-chev {
    transform: rotate(180deg);
    color: var(--brand-600);
}
.pretty-select-trigger:disabled,
.pretty-select-trigger[aria-disabled="true"] {
    background: var(--surface-2);
    color: var(--text-dim);
    cursor: not-allowed;
}

/* Popover з опціями. position:absolute → клипається лише якщо предок має
   overflow:hidden (наприклад chip-ms-popover; перевірив — .card НЕ має). */
.pretty-select-pop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.18),
                0 4px 10px -4px rgba(15, 23, 42, 0.08);
    padding: 0.375rem;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    pointer-events: none;
    transform-origin: top center;
    transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
}
.pretty-select-pop.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Flip-up — коли під trigger-ом мало місця. Координати ставить JS. */
.pretty-select-pop.flip-up {
    top: auto;
    bottom: calc(100% + 6px);
    transform-origin: bottom center;
    transform: translateY(4px) scale(0.98);
}
.pretty-select-pop.flip-up.is-open {
    transform: translateY(0) scale(1);
}

.pretty-select-search {
    flex-shrink: 0;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color var(--dur) var(--ease);
}
.pretty-select-search:focus {
    border-color: var(--brand-500);
    background: var(--surface);
}
.pretty-select-search::placeholder {
    color: var(--text-dim);
}

.pretty-select-list {
    flex: 1;
    overflow-y: auto;
    /* Скрол-бар стиль як у решті проєкту (slate). */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.pretty-select-list::-webkit-scrollbar { width: 6px; }
.pretty-select-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.pretty-select-opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.25;
    color: #334155;                /* slate-700 */
    user-select: none;
    transition: background-color 0.1s var(--ease), color 0.1s var(--ease);
}
.pretty-select-opt:hover,
.pretty-select-opt.is-focus {
    background: #f1f5f9;           /* slate-100 */
}
.pretty-select-opt.is-active {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 500;
}
.pretty-select-opt.is-active:hover,
.pretty-select-opt.is-active.is-focus {
    background: #e0e7ff;           /* indigo-100 — трохи темніше за brand-50 */
}
.pretty-select-opt.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.pretty-select-opt-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pretty-select-opt-check {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--brand-600);
    opacity: 0;
    transition: opacity 0.1s;
}
.pretty-select-opt.is-active .pretty-select-opt-check {
    opacity: 1;
}
.pretty-select-empty {
    padding: 1rem 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-dim);
}

/* Адаптив: на сенсорних пристроях popover ширший і опції більші для
   зручнішого тапу. */
@media (hover: none) and (pointer: coarse) {
    .pretty-select-opt {
        padding: 0.625rem 0.875rem;
        font-size: 0.9375rem;
    }
}