/* ═══════════════════════════════════════════════════════════════
   CARWOW.LIP — DESIGN TOKENS
   Единый источник правды для public и admin
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Base palette ── */
    --ink:          #0a0a0a;        /* primary text, pure near-black */
    --ink-2:        #1f1f1f;        /* section bg when needed */
    --ink-3:        #3a3a3a;        /* secondary text on dark */
    --graphite:     #525252;        /* body secondary */
    --stone:        #737373;        /* muted text */
    --stone-2:      #a3a3a3;        /* placeholders, disabled */
    --line:         #e7e7e7;        /* borders */
    --line-2:       #f0f0f0;        /* subtle divider */
    --surface:      #ffffff;        /* cards */
    --canvas:       #fafafa;        /* page bg on public */
    --paper:        #f5f5f5;        /* input bg, hover surface */

    /* ── Brand ── */
    --accent:       #ff4d2d;
    --accent-ink:   #d83710;        /* pressed / text-on-white contrast */
    --accent-soft:  #fff0ec;        /* very light tint for selected rows */

    /* ── Favourite (heart) — very dark blood red, impossible to read as pink ── */
    --fav:          #991b1b;
    --fav-ink:      #7f1d1d;

    /* ── Semantic (restrained, no rainbow) ── */
    --ok:           #16794f;
    --ok-soft:      #e8f3ee;
    --warn:         #9a6700;
    --warn-soft:    #fdf6e3;
    --err:          #b42318;
    --err-soft:     #fdecea;
    --info:         #1e5aa6;
    --info-soft:    #eaf1fa;

    /* ── Dark sidebar (admin) ── */
    --sb-bg:        #0a0a0a;
    --sb-bg-hover:  #1a1a1a;
    --sb-bg-active: #ff4d2d;
    --sb-text:      #b8b8b8;
    --sb-text-hi:   #ffffff;
    --sb-line:      #222222;

    /* ── Type ── */
    --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Manrope", sans-serif;
    --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

    /* Fluid display sizes */
    --fs-display-1: clamp(2.5rem, 5vw + 1rem, 4.5rem);   /* hero */
    --fs-display-2: clamp(2rem, 3vw + 1rem, 3rem);       /* page title */
    --fs-h1:        clamp(1.5rem, 1.5vw + 1rem, 2rem);
    --fs-h2:        1.25rem;
    --fs-h3:        1.0625rem;
    --fs-body:      0.9375rem;
    --fs-sm:        0.8125rem;
    --fs-xs:        0.75rem;
    --fs-micro:     0.6875rem;

    /* ── Spacing (4-based) ── */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
    --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

    /* ── Radii (restrained) ── */
    --r-xs:  4px;
    --r-sm:  6px;
    --r-md:  8px;
    --r-lg:  12px;
    --r-pill: 999px;

    /* ── Elevation (very subtle, minimal) ── */
    --shadow-1: 0 1px 2px rgba(10, 10, 10, 0.04);
    --shadow-2: 0 4px 12px rgba(10, 10, 10, 0.06);
    --shadow-3: 0 12px 32px rgba(10, 10, 10, 0.10);

    /* ── Motion ── */
    --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast:  120ms;
    --dur-base:  200ms;
    --dur-slow:  320ms;

    /* ── Layout ── */
    --container:    1240px;
    --container-narrow: 820px;
    --sidebar-w:    248px;
    --sidebar-w-collapsed: 64px;
    --topbar-h:     64px;
    --admin-topbar-h: 56px;
}

/* ═══════════════════════════════════════════════════════════════
   BASE RESET
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Numeric/tabular by default on data */
.num, .mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-6); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

.eyebrow {
    font-size: var(--fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--stone);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: 44px;
    padding: 0 var(--s-5);
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: var(--fs-body);
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
    user-select: none;
    border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2a2a2a; }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-ink); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper); border-color: var(--ink-3); }

.btn-quiet { background: transparent; color: var(--graphite); }
.btn-quiet:hover { background: var(--paper); color: var(--ink); }

.btn-danger { background: transparent; color: var(--err); border-color: var(--line); }
.btn-danger:hover { background: var(--err-soft); border-color: var(--err); }

.btn-sm { height: 34px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.btn-xs { height: 28px; padding: 0 var(--s-2); font-size: var(--fs-xs); }
.btn-icon { width: 44px; padding: 0; }
.btn-icon.btn-sm { width: 34px; }

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.input, .select, .textarea {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: var(--fs-body);
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--stone-2); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}
.textarea { height: auto; padding: var(--s-3) var(--s-4); line-height: 1.5; resize: vertical; min-height: 96px; }
.select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.field-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s-2);
}
.field-hint { font-size: var(--fs-xs); color: var(--stone); margin-top: var(--s-1); }

/* Search input variant */
.search {
    position: relative;
}
.search .input { padding-left: 40px; }
.search svg {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--stone);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   TAGS / CHIPS / BADGES (one consistent style, no rainbow)
   ═══════════════════════════════════════════════════════════════ */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    height: 24px;
    padding: 0 var(--s-3);
    background: var(--paper);
    color: var(--graphite);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}
.tag-outline { background: transparent; border: 1px solid var(--line); }
.tag-dark    { background: var(--ink); color: #fff; }
.tag-accent  { background: var(--accent-soft); color: var(--accent-ink); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.badge-dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.badge-ok   { background: var(--ok-soft);   color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-err  { background: var(--err-soft);  color: var(--err); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-mute { background: var(--paper);     color: var(--graphite); }

/* ═══════════════════════════════════════════════════════════════
   CARDS / SURFACES
   ═══════════════════════════════════════════════════════════════ */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.card-hd {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    font-weight: 700;
}
.card-bd { padding: var(--s-5); }
.card-ft {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--line);
    background: var(--canvas);
}

/* Flat section for admin — no card look, just divider */
.panel {
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
}

/* ═══════════════════════════════════════════════════════════════
   TABLE (admin)
   ═══════════════════════════════════════════════════════════════ */
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.tbl th {
    text-align: left;
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--stone);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--line);
    background: var(--canvas);
    white-space: nowrap;
}
.tbl td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
}
.tbl tbody tr { transition: background var(--dur-fast); }
.tbl tbody tr:hover { background: var(--canvas); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .tbl-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Checkbox (cross-browser, neutral look) */
.check {
    appearance: none;
    width: 16px; height: 16px;
    border: 1.5px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.check:hover { border-color: var(--ink-3); }
.check:checked {
    background: var(--ink);
    border-color: var(--ink);
}
.check:checked::after {
    content: "";
    width: 10px; height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 6 5 9 10 3'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

/* ═══════════════════════════════════════════════════════════════
   FLASH / ALERT
   ═══════════════════════════════════════════════════════════════ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
}
.alert-ok   { background: var(--ok-soft);   border-color: #bfdfce; color: var(--ok); }
.alert-warn { background: var(--warn-soft); border-color: #ead9a8; color: var(--warn); }
.alert-err  { background: var(--err-soft);  border-color: #f4c7c2; color: var(--err); }
.alert-info { background: var(--info-soft); border-color: #cadbee; color: var(--info); }

/* ═══════════════════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════════════════ */
.hr { height: 1px; background: var(--line); border: 0; margin: var(--s-6) 0; }
.hr-dot { border-top: 1px dashed var(--line); height: 0; background: transparent; }

/* ═══════════════════════════════════════════════════════════════
   FOCUS OUTLINE (accessible)
   ═══════════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
.btn:focus-visible { outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════
   SPIN UTILITY (shared across admin pages for loading indicators)
   ═══════════════════════════════════════════════════════════════ */
.spin { animation: spin 1s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   MARKET FLAG CHIP (shared across public catalog, favorites, car
   detail gallery and admin cars list — see app/templates/includes/
   market_flag.html for the macro that emits this markup)
   ═══════════════════════════════════════════════════════════════ */
.chip-flag {
    height: 22px;
    padding: 0 8px 0 4px;
    background: rgba(255,255,255,0.92);
    color: var(--ink);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.chip-flag svg {
    width: 16px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 1px;
    /* Reset broader selectors that target any <svg> inside a card
       (e.g. `.p-car-img svg` makes images half-transparent placeholders). */
    position: static;
    transform: none;
    opacity: 1;
    max-width: none;
}