/* ── Fonts ────────────────────────────────────────── */
@font-face {
    font-family: 'BPG';
    src: url('/assets/fonts/bpg_ingiri_arial.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

/* ── Light theme ──────────────────────────────────── */
:root {
    --bg:               #f4f0e8;
    --bg-card:          #ffffff;
    --bg-input:         #ede8dc;
    --border:           #d8d0bc;
    --border-focus:     #b8860b;
    --border-subtle:    rgba(0,0,0,.06);
    --text:             #1c1812;
    --text-muted:       #7a6e58;
    --accent:           #b8860b;
    --accent-h:         #9a7000;
    --accent-glow:      rgba(184,134,11,.16);
    --btn-text:         #fff;
    --danger:           #c83248;
    --danger-glow:      rgba(200,50,72,.12);
    --success:          #2a9e6a;
    --radius:           12px;
    --radius-sm:        8px;
    --shadow:           0 8px 32px rgba(184,134,11,.12);
    --trans:            .18s ease;
    --icon-filter:      brightness(0) saturate(100%) invert(12%) sepia(10%) saturate(400%) hue-rotate(15deg);
    --icon-muted:       brightness(0) saturate(100%) invert(48%) sepia(12%) saturate(300%) hue-rotate(15deg);
    --topbar-h:         60px;
}

/* ── Dark theme ───────────────────────────────────── */
[data-theme="dark"] {
    --bg:               #0c0b0f;
    --bg-card:          #161420;
    --bg-input:         #0f0e18;
    --border:           #252235;
    --border-focus:     #f5c518;
    --border-subtle:    rgba(255,255,255,.04);
    --text:             #f0ede5;
    --text-muted:       #8a8098;
    --accent:           #f5c518;
    --accent-h:         #e0b000;
    --accent-glow:      rgba(245,197,24,.18);
    --btn-text:         #0c0b0f;
    --success:          #3ecf8e;
    --shadow:           0 8px 32px rgba(0,0,0,.65);
    --icon-filter:      brightness(0) invert(1);
    --icon-muted:       brightness(0) invert(1) opacity(.5);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:               #0c0b0f;
        --bg-card:          #161420;
        --bg-input:         #0f0e18;
        --border:           #252235;
        --border-focus:     #f5c518;
        --border-subtle:    rgba(255,255,255,.04);
        --text:             #f0ede5;
        --text-muted:       #8a8098;
        --accent:           #f5c518;
        --accent-h:         #e0b000;
        --accent-glow:      rgba(245,197,24,.18);
        --btn-text:         #0c0b0f;
        --success:          #3ecf8e;
        --shadow:           0 8px 32px rgba(0,0,0,.65);
        --icon-filter:      brightness(0) invert(1);
        --icon-muted:       brightness(0) invert(1) opacity(.5);
    }
}

/* ── Reset ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: 'BPG', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background var(--trans), color var(--trans);
}
a { color: var(--accent); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--accent-h); text-decoration: underline; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: .95rem;
    padding: .72rem .875rem;
    resize: vertical;
    transition: border-color var(--trans), background var(--trans);
    outline: none;
}
textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ── Theme Switcher ───────────────────────────────── */
.theme-switch { display: flex; align-items: center; background: var(--bg-input); border: 1.5px solid var(--border); border-radius: 100px; padding: 3px; gap: 2px; }
.theme-switch__btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 100px; background: transparent; padding: 0; transition: background var(--trans); }
.theme-switch__btn img { width: 15px; height: 15px; filter: var(--icon-muted); transition: filter var(--trans); }
.theme-switch__btn:hover img { filter: var(--icon-filter); }
.theme-switch__btn.active { background: var(--accent); }
.theme-switch__btn.active img { filter: brightness(0) invert(1); }

/* ── Auth Layout ──────────────────────────────────── */
.auth-page {
    background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(184,134,11,.07) 0%, transparent 60%),
                radial-gradient(ellipse 40% 40% at 80% 80%, rgba(184,134,11,.05) 0%, transparent 60%),
                var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; min-height: 100vh;
}
.auth-wrap { width: 100%; max-width: 420px; }
.auth-card { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 2.5rem 2rem; box-shadow: var(--shadow); }
.auth-logo { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.auth-logo img { width: 48px; height: 48px; border-radius: 12px; }
.auth-title { font-size: 1.6rem; font-weight: 700; text-align: center; letter-spacing: -.02em; }
.auth-sub { text-align: center; color: var(--text-muted); font-size: .9rem; margin-top: .35rem; margin-bottom: 1.75rem; }
.auth-link { text-align: center; color: var(--text-muted); font-size: .875rem; margin-top: 1.25rem; }

/* ── Alerts ───────────────────────────────────────── */
.alert { border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .875rem; margin-bottom: 1.25rem; line-height: 1.5; }
.alert--error   { background: rgba(224,90,108,.1); border: 1px solid rgba(224,90,108,.3); color: #c0404e; }
.alert--success { background: rgba(42,184,122,.1); border: 1px solid rgba(42,184,122,.3); color: #1a9060; }
[data-theme="dark"] .alert--error   { color: #f08090; }
[data-theme="dark"] .alert--success { color: #3ecf8e; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert--error   { color: #f08090; }
    :root:not([data-theme="light"]) .alert--success { color: #3ecf8e; }
}

/* ── Form ─────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .82rem; font-weight: 700; color: var(--text-muted); letter-spacing: .01em; }
.field__inner { position: relative; display: flex; align-items: center; }
.field__icon { position: absolute; left: .875rem; width: 18px; height: 18px; filter: var(--icon-muted); pointer-events: none; }
.field__inner input {
    width: 100%; background: var(--bg-input); border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text); font-family: inherit;
    font-size: .95rem; padding: .72rem .875rem .72rem 2.6rem;
    transition: border-color var(--trans), box-shadow var(--trans); outline: none; -webkit-appearance: none;
}
.field__inner input::placeholder { color: var(--text-muted); opacity: .7; }
.field__inner input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); }
.field__inner input[type="number"] { padding-left: 2.6rem; }
.field__eye { position: absolute; right: .75rem; background: none; border: none; padding: .25rem; display: flex; align-items: center; }
.field__eye img { width: 18px; height: 18px; filter: var(--icon-muted); }
.field__eye:hover img { filter: var(--icon-filter); }
.form__row { display: flex; align-items: center; }
.form__row--space { justify-content: space-between; }
.field--checks { gap: .6rem; }
.field--color { flex-direction: row; align-items: center; gap: .5rem; }
.field--color label { margin: 0; }
.color-input { width: 36px; height: 36px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: none; cursor: pointer; padding: 2px; }

/* ── Checkbox ─────────────────────────────────────── */
.checkbox { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; user-select: none; }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box { flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 5px; background: var(--bg-input); display: grid; place-items: center; transition: border-color var(--trans), background var(--trans); margin-top: 2px; }
.checkbox input:checked + .checkbox__box { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked + .checkbox__box::after { content: ''; display: block; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(42deg) translateY(-1px); }
.checkbox__label { font-size: .875rem; color: var(--text-muted); line-height: 1.5; }
.checkbox__label a { color: var(--accent); }

/* ── Buttons ──────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: inherit; font-weight: 700; font-size: .9rem;
    padding: .72rem 1.4rem; border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    transition: background var(--trans), border-color var(--trans), box-shadow var(--trans), color var(--trans);
    white-space: nowrap; text-decoration: none; line-height: 1;
}
.btn.btn--primary { background: var(--accent); color: var(--btn-text); border-color: var(--accent); }
.btn.btn--primary:hover { background: var(--accent-h); border-color: var(--accent-h); box-shadow: 0 4px 16px var(--accent-glow); color: var(--btn-text); text-decoration: none; }
.btn.btn--ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn.btn--ghost:hover { border-color: var(--border-focus); color: var(--text); text-decoration: none; }
.btn.btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.btn--danger:hover { background: var(--danger-glow); text-decoration: none; color: var(--danger); }
.btn--full { width: 100%; margin-top: .5rem; }
.btn--sm { padding: .45rem 1rem; font-size: .82rem; }
.inline-form { display: inline; }
.form-actions { display: flex; gap: .75rem; align-items: center; margin-top: .5rem; }

/* ── Topbar ───────────────────────────────────────── */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; height: var(--topbar-h);
    background: var(--bg-card); border-bottom: 1.5px solid var(--border);
    position: sticky; top: 0; z-index: 100;
}
.topbar__left { display: flex; align-items: center; gap: 1.5rem; }
.topbar__brand {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none;
    flex-shrink: 0;
}
.topbar__logo { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.topbar__brand:hover { color: var(--accent); text-decoration: none; }
.topbar__nav { display: flex; align-items: center; gap: .25rem; }
.topbar__link {
    display: flex; align-items: center; gap: .4rem;
    font-size: .875rem; font-weight: 600; color: var(--text-muted);
    padding: .4rem .75rem; border-radius: var(--radius-sm);
    text-decoration: none; transition: background var(--trans), color var(--trans);
}
.topbar__link img { width: 16px; height: 16px; filter: var(--icon-muted); transition: filter var(--trans); }
.topbar__link:hover { background: var(--bg-input); color: var(--text); text-decoration: none; }
.topbar__link:hover img { filter: var(--icon-filter); }
.topbar__link.active { background: var(--accent-glow); color: var(--accent); text-decoration: none; }
.topbar__link.active img { filter: var(--icon-filter); }
.topbar__right { display: flex; align-items: center; }
.topbar__username { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Profile Dropdown ─────────────────────────────── */
.profile-menu { position: relative; }
.profile-menu__trigger {
    display: flex; align-items: center; gap: .45rem;
    background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    padding: .4rem .75rem; font-size: .875rem; color: var(--text-muted);
    transition: border-color var(--trans), background var(--trans);
}
.profile-menu__trigger:hover { border-color: var(--border-focus); color: var(--text); background: var(--bg-input); }
.profile-menu__chevron { width: 10px; height: 6px; filter: var(--icon-muted); transition: transform var(--trans); flex-shrink: 0; }
.profile-menu--open .profile-menu__chevron { transform: rotate(180deg); filter: var(--icon-filter); }
.profile-menu--open .profile-menu__trigger { border-color: var(--border-focus); color: var(--text); }
.profile-menu__dropdown { position: absolute; top: calc(100% + .5rem); right: 0; min-width: 260px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem; z-index: 200; }
.profile-menu__dropdown[hidden] { display: none; }
.profile-menu__theme-row { display: flex; align-items: center; justify-content: space-between; padding: .4rem .5rem; gap: .75rem; }
.profile-menu__label { font-size: .78rem; font-weight: 700; color: var(--text-muted); letter-spacing: .01em; white-space: nowrap; }
.profile-menu__divider { height: 1px; background: var(--border); margin: .35rem 0; }
.profile-menu__item { display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem; border-radius: var(--radius-sm); font-size: .875rem; color: var(--text-muted); text-decoration: none; transition: background var(--trans), color var(--trans); }
.profile-menu__item img { width: 15px; height: 15px; filter: var(--icon-muted); transition: filter var(--trans); }
.profile-menu__item:hover { background: var(--bg-input); color: var(--text); text-decoration: none; }
.profile-menu__item:hover img { filter: var(--icon-filter); }
.profile-menu__item--active { background: var(--accent-glow); color: var(--accent); }
.profile-menu__item--active img { filter: var(--icon-filter); }
.profile-menu__item--danger { color: var(--danger); }
.profile-menu__item--danger:hover { background: var(--danger-glow); color: var(--danger); }

/* ── Avatar ───────────────────────────────────────── */
.user-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; }
.user-avatar--xs  { width: 22px; height: 22px; }
.user-avatar--sm  { width: 36px; height: 36px; }
.user-avatar--lg  { width: 80px; height: 80px; }
.user-avatar--default { border-radius: 50%; padding: 4px; background: var(--accent-glow); filter: var(--icon-filter); }
.user-avatar--xs.user-avatar--default { padding: 3px; }
.user-avatar--lg.user-avatar--default { padding: 14px; }
.avatar-section { display: flex; align-items: center; gap: 1.25rem; }
.avatar-trigger { position: relative; display: inline-block; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--trans); }
.avatar-overlay img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.avatar-trigger:hover .avatar-overlay { opacity: 1; }
.avatar-info { display: flex; flex-direction: column; gap: .35rem; }
.avatar-name { font-weight: 700; font-size: 1rem; }
.avatar-status { font-size: .8rem; display: inline-block; min-height: 1.2em; }
.avatar-status--ok  { color: var(--success); }
.avatar-status--err { color: var(--danger); }

/* ── Crop modal ───────────────────────────────────── */
.crop-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.crop-overlay[hidden] { display: none; }
.crop-modal { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.5); display: flex; flex-direction: column; max-width: min(520px, 100%); width: 100%; }
.crop-img-wrap { width: 100%; max-height: 70vh; overflow: hidden; background: #111; }
.crop-img-wrap img { display: block; max-width: 100%; }
.crop-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: .875rem 1rem; border-top: 1.5px solid var(--border); }

/* ── Dashboard layout ─────────────────────────────── */
.dash-page { display: block; }
.dash-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.dash-main { padding: 1.5rem 2rem; max-width: 1200px; width: 100%; margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: 1.75rem; }

/* ── Dashboard Hero ───────────────────────────────── */
.dash-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: linear-gradient(135deg, #1e1b2c 0%, #0c0b0f 100%);
    border-radius: var(--radius); padding: 1.5rem 1.75rem;
    color: #f0ede5;
    border: 1.5px solid #252235;
}
.dash-hero__user { display: flex; align-items: center; gap: 1rem; }
.dash-hero__avatar { flex-shrink: 0; }
.user-avatar--md { width: 48px; height: 48px; }
.dash-hero__initials {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,.25); color: #fff;
    font-size: 1.3rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0;
}
.dash-hero__info { display: flex; flex-direction: column; gap: .1rem; }
.dash-hero__greeting { font-size: .875rem; color: #8a8098; line-height: 1; }
.dash-hero__name { font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: #f5c518; }
.dash-hero .btn.btn--primary { background: #f5c518; border-color: #f5c518; color: #0c0b0f; flex-shrink: 0; }
.dash-hero .btn.btn--primary:hover { background: #e0b000; border-color: #e0b000; box-shadow: 0 4px 16px rgba(245,197,24,.30); color: #0c0b0f; }

/* ── Dashboard Stats ──────────────────────────────── */
.dash-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.dash-stat {
    display: flex; align-items: center; gap: 1rem;
    background: var(--bg-card); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 1.25rem 1.5rem;
    text-decoration: none; color: inherit;
    transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.dash-stat:hover { border-color: var(--border-focus); box-shadow: var(--shadow); transform: translateY(-1px); text-decoration: none; }
.dash-stat__icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--accent-glow); display: grid; place-items: center; flex-shrink: 0; }
.dash-stat__icon img { width: 20px; height: 20px; filter: var(--icon-filter); }
.dash-stat__body { display: flex; flex-direction: column; gap: .1rem; }
.dash-stat__value { font-size: 1.75rem; font-weight: 700; color: var(--accent); line-height: 1; }
.dash-stat__label { font-size: .78rem; color: var(--text-muted); letter-spacing: .01em; }

/* ── Dashboard Grid ───────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 1.75rem; align-items: start; }

/* ── Dashboard List items ─────────────────────────── */
.dash-lists { display: flex; flex-direction: column; gap: .4rem; }
.dash-list-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .85rem; border-radius: var(--radius-sm);
    background: var(--bg-card); border: 1.5px solid var(--border);
    text-decoration: none; color: var(--text);
    transition: border-color var(--trans), background var(--trans);
}
.dash-list-item:hover { border-color: var(--list-color, var(--border-focus)); background: var(--bg-input); text-decoration: none; }
.dash-list-item__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--list-color, var(--accent)); flex-shrink: 0; }
.dash-list-item__name { font-weight: 600; font-size: .9rem; flex: 1; }
.dash-list-item__count { font-size: .75rem; color: var(--text-muted); background: var(--bg-input); padding: .15rem .5rem; border-radius: 100px; font-weight: 600; }

/* ── Bottom Navigation (mobile) ──────────────────── */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 60px;
    background: var(--bg-card); border-top: 1.5px solid var(--border);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .2rem; text-decoration: none;
    color: var(--text-muted); font-size: .65rem; font-weight: 600; letter-spacing: .02em;
    padding: .4rem 0; transition: color var(--trans);
    position: relative;
}
.bottom-nav__item img { width: 20px; height: 20px; filter: var(--icon-muted); transition: filter var(--trans); }
.bottom-nav__item.active { color: var(--accent); }
.bottom-nav__item.active img { filter: var(--icon-filter); }
.bottom-nav__item.active::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 24px; height: 2px; background: var(--accent); border-radius: 0 0 2px 2px;
}

/* ── Cards ────────────────────────────────────────── */
.card { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: background var(--trans), border-color var(--trans); }
.card__title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1.5px solid var(--border); }
.cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Stat cards ───────────────────────────────────── */
.stat-card { display: flex; flex-direction: column; gap: .35rem; }
.stat-card__value { font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-card__label { font-size: .8rem; color: var(--text-muted); letter-spacing: .05em; }

/* ── Section ──────────────────────────────────────── */
.section { display: flex; flex-direction: column; gap: 1rem; }
.section__head { display: flex; align-items: center; justify-content: space-between; }
.section__title { font-size: 1.15rem; font-weight: 700; }
.section__footer { display: flex; justify-content: center; padding-top: .5rem; }

/* ── Page head ────────────────────────────────────── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-title { font-size: 1.4rem; font-weight: 700; }

/* ── Home Hero ────────────────────────────────────── */
.home-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.home-welcome { display: flex; align-items: center; gap: 1rem; }
.home-welcome__avatar { flex-shrink: 0; }
.home-welcome__greeting { font-size: .9rem; color: var(--text-muted); }
.home-welcome__name { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.home-stats { display: flex; gap: .75rem; }
.stat-pill {
    display: flex; flex-direction: column; align-items: center;
    padding: .75rem 1.25rem; background: var(--bg-card);
    border: 1.5px solid var(--border); border-radius: var(--radius);
    text-decoration: none; transition: border-color var(--trans), box-shadow var(--trans);
    min-width: 90px;
}
.stat-pill:hover { border-color: var(--border-focus); box-shadow: var(--shadow); text-decoration: none; }
.stat-pill__value { font-size: 1.75rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-pill__label { font-size: .78rem; color: var(--text-muted); letter-spacing: .01em; margin-top: .2rem; }

/* ── Movie Grid ───────────────────────────────────── */
.movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}
.movies-grid--lg {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}

/* ── Movie Card (poster) ──────────────────────────── */
.movie-card {
    display: flex; flex-direction: column;
    background: var(--bg-card); border: 1.5px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    text-decoration: none; color: inherit;
    transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.movie-card:hover { border-color: var(--border-focus); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.movie-card__cover {
    aspect-ratio: 2/3; overflow: hidden;
    background: var(--bg-input);
    display: block; flex-shrink: 0;
}
.movie-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.movie-card:hover .movie-card__cover img { transform: scale(1.04); }
.movie-card__no-cover {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--bg-input);
}
.movie-card__no-cover img { width: 40px; height: 40px; filter: var(--icon-muted); opacity: .5; }
.movie-card__info { padding: .75rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.movie-card__title { font-weight: 700; font-size: .875rem; color: var(--text); line-height: 1.3; text-decoration: none; }
.movie-card a.movie-card__title:hover { color: var(--accent); text-decoration: none; }
.movie-card__year { font-size: .78rem; color: var(--text-muted); }

/* ── Movie Card full (list view) ──────────────────── */
.movie-card--full { flex-direction: row; }
.movie-card--full .movie-card__cover-link { flex-shrink: 0; width: 100px; }
.movie-card--full .movie-card__cover { aspect-ratio: 2/3; width: 100px; height: 150px; }
.movie-card__body { padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.movie-card__desc { font-size: .82rem; color: var(--text-muted); line-height: 1.5; flex: 1; }
.movie-card__actions { display: flex; gap: .5rem; margin-top: .5rem; }

/* ── Movie Detail ─────────────────────────────────── */
.movie-detail {
    display: grid; grid-template-columns: 240px 1fr; gap: 2rem;
    background: var(--bg-card); border: 1.5px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    padding: 1.5rem;
}
.movie-detail__cover { flex-shrink: 0; }
.movie-detail__cover-img { width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow); aspect-ratio: 2/3; object-fit: cover; }
.movie-detail__no-cover {
    aspect-ratio: 2/3; width: 100%; background: var(--bg-input);
    border-radius: var(--radius-sm); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .5rem; color: var(--text-muted); font-size: .875rem;
}
.movie-detail__no-cover img { width: 48px; height: 48px; filter: var(--icon-muted); opacity: .5; }
.movie-detail__info { display: flex; flex-direction: column; gap: 1.25rem; }
.movie-detail__title { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.movie-detail__year { display: inline-block; font-size: .875rem; color: var(--text-muted); background: var(--bg-input); border: 1.5px solid var(--border); border-radius: 100px; padding: .2rem .75rem; }
.movie-detail__section { display: flex; flex-direction: column; gap: .5rem; }
.movie-detail__section-head { display: flex; align-items: center; gap: .75rem; }
.movie-detail__section-title { font-size: .85rem; font-weight: 700; letter-spacing: .05em; color: var(--text-muted); }
.movie-detail__text { font-size: .9375rem; line-height: 1.7; color: var(--text); }

/* ── Comment form ─────────────────────────────────── */
.comment-form { display: flex; flex-direction: column; gap: .5rem; }
.comment-form textarea { min-height: 80px; }
.comment-form__actions { display: flex; gap: .5rem; }

/* ── List toggle (movie page) ─────────────────────── */
.lists-toggle { display: flex; flex-direction: column; gap: .4rem; }
.list-toggle-item { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .875rem; color: var(--text); padding: .3rem 0; }
.list-toggle-item input { position: absolute; opacity: 0; }
.list-toggle-item__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; transition: transform var(--trans); }
.list-toggle-item:has(input:checked) { font-weight: 700; }
.list-toggle-item:has(input:checked) .list-toggle-item__dot { transform: scale(1.3); }

/* ── Gallery ──────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.gallery__item { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-input); aspect-ratio: 16/10; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__delete {
    position: absolute; top: .4rem; right: .4rem;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,.65); color: #fff; border: none;
    font-size: 1rem; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--trans);
}
.gallery__item:hover .gallery__delete { opacity: 1; }
.gallery__delete:hover { background: var(--danger); }

/* ── Cover drop ───────────────────────────────────── */
.movie-form { display: flex; flex-direction: column; gap: 1.5rem; }
.movie-form__layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.movie-form__cover { display: flex; flex-direction: column; gap: .75rem; }
.movie-form__fields { display: flex; flex-direction: column; gap: 1rem; }
.cover-drop {
    position: relative; aspect-ratio: 2/3; width: 100%;
    border: 2px dashed var(--border); border-radius: var(--radius-sm);
    overflow: hidden; cursor: pointer;
    transition: border-color var(--trans), background var(--trans);
}
.cover-drop:hover { border-color: var(--border-focus); background: var(--accent-glow); }
.cover-drop__preview { position: absolute; inset: 0; }
.cover-drop__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-drop__remove { position: absolute; top: .4rem; right: .4rem; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; border: none; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.cover-drop__remove:hover { background: var(--danger); }
.cover-drop__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--text-muted); font-size: .82rem; text-align: center; padding: 1rem; }
.cover-drop__placeholder img { width: 36px; height: 36px; filter: var(--icon-muted); }

/* ── Search bar ───────────────────────────────────── */
.search-bar { width: 100%; }
.search-bar__inner { position: relative; display: flex; align-items: center; }
.search-bar__icon { position: absolute; left: .875rem; width: 18px; height: 18px; filter: var(--icon-muted); pointer-events: none; }
.search-bar__inner input {
    width: 100%; background: var(--bg-card); border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text); font-family: inherit;
    font-size: .95rem; padding: .72rem 2.5rem .72rem 2.6rem;
    transition: border-color var(--trans); outline: none;
}
.search-bar__inner input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); }
.search-bar__clear { position: absolute; right: .875rem; font-size: 1.2rem; color: var(--text-muted); line-height: 1; text-decoration: none; }
.search-bar__clear:hover { color: var(--text); text-decoration: none; }

/* ── Empty state ──────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 3rem 1rem; text-align: center; color: var(--text-muted); }
.empty-state--lg { padding: 4rem 1rem; }
.empty-state__icon { width: 48px; height: 48px; filter: var(--icon-muted); opacity: .5; }
.empty-state p { font-size: .95rem; }
.empty-state a { color: var(--text-muted); }

/* ── Lists ────────────────────────────────────────── */
.lists-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.list-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem .9rem; border-radius: 100px;
    background: var(--bg-card); border: 1.5px solid var(--border);
    font-size: .875rem; color: var(--text);
    text-decoration: none; transition: border-color var(--trans), box-shadow var(--trans);
}
.list-chip:hover { border-color: var(--list-color, var(--border-focus)); box-shadow: 0 2px 8px rgba(0,0,0,.1); text-decoration: none; }
.list-chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--list-color, var(--accent)); flex-shrink: 0; }
.list-chip__name { font-weight: 600; }
.list-chip__count { font-size: .75rem; color: var(--text-muted); background: var(--bg-input); padding: .1rem .4rem; border-radius: 100px; }

.lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.list-card {
    display: block; background: var(--bg-card); border: 1.5px solid var(--border);
    border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.list-card:hover { border-color: var(--list-color, var(--border-focus)); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.list-card__color-bar { height: 5px; background: var(--list-color, var(--accent)); }
.list-card__body { padding: 1rem; }
.list-card__name { font-weight: 700; font-size: 1rem; margin-bottom: .25rem; }
.list-card__count { font-size: .8rem; color: var(--text-muted); }

.create-list-form__row { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.list-color-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.add-to-list-wrap { display: flex; gap: .75rem; align-items: center; }
.movie-card__remove { margin-top: .5rem; }

/* ── Table ────────────────────────────────────────── */
.log-table-wrap { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.log-table th { text-align: left; padding: .4rem .75rem; color: var(--text-muted); font-size: .75rem; letter-spacing: .05em; border-bottom: 1.5px solid var(--border); }
.log-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--border-subtle); color: var(--text); vertical-align: middle; }
.log-table tr:last-child td { border-bottom: none; }

/* ── Badges ───────────────────────────────────────── */
.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 4px; letter-spacing: .03em; }
.badge--ok      { background: rgba(42,184,122,.12); color: #1a9060; }
.badge--fail    { background: rgba(224,90,108,.12); color: #c0404e; }
.badge--neutral { background: rgba(184,134,11,.12); color: #b8860b; }
[data-theme="dark"] .badge--ok      { color: #3ecf8e; }
[data-theme="dark"] .badge--fail    { color: #e05a6c; }
[data-theme="dark"] .badge--neutral { color: #f5c518; }

/* ── Role badges ──────────────────────────────────── */
.role-badge { display: inline-block; font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 4px; letter-spacing: .01em; }
.role-badge--admin { background: rgba(184,134,11,.15); color: #b8860b; }
.role-badge--moder { background: rgba(42,184,122,.12); color: #1a9060; }
.role-badge--user  { background: var(--border); color: var(--text-muted); }
[data-theme="dark"] .role-badge--admin { color: #f5c518; }
[data-theme="dark"] .role-badge--moder { color: #3ecf8e; }

/* ── Role select ──────────────────────────────────── */
.role-select { font-family: inherit; font-size: .82rem; font-weight: 700; padding: .25rem .5rem; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--bg-input); color: var(--text); cursor: pointer; transition: border-color var(--trans); }
.role-select:focus { outline: none; border-color: var(--border-focus); }

/* ── Settings ─────────────────────────────────────── */
.settings-form { display: flex; flex-direction: column; gap: 1.5rem; }
.settings-actions { display: flex; gap: .75rem; align-items: center; }

/* ── Language switcher ────────────────────────────── */
.lang-switch {
    display: flex; align-items: center;
    gap: 2px; margin-right: .75rem;
    background: var(--bg-input); border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); padding: 3px;
}
.lang-switch__btn {
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    padding: .25rem .55rem; border-radius: 5px;
    color: var(--text-muted); text-decoration: none;
    transition: background var(--trans), color var(--trans);
    line-height: 1;
}
.lang-switch__btn:hover { color: var(--text); text-decoration: none; }
.lang-switch__btn.active { background: var(--accent); color: #fff; text-decoration: none; }

/* Lang switcher on auth pages */
.auth-lang {
    display: flex; justify-content: center; gap: 4px; margin-bottom: 1.25rem;
    background: var(--bg-input); border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); padding: 3px;
    width: fit-content; margin-left: auto; margin-right: auto;
}

/* ── Utilities ────────────────────────────────────── */
.text-muted { color: var(--text-muted); }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
    .movie-detail { grid-template-columns: 160px 1fr; gap: 1rem; }
    .movie-form__layout { grid-template-columns: 160px 1fr; gap: 1rem; }
    .cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .dash-main { padding: 1rem 1rem calc(60px + 1rem); }
    .topbar { padding: 0 1rem; }
    .topbar__nav { display: none; }
    .topbar__username { display: none; }
    .bottom-nav { display: flex; }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .dash-hero { padding: 1.25rem; }
    .dash-hero__name { font-size: 1.15rem; }
    .movie-detail { grid-template-columns: 1fr; }
    .movie-detail__cover { max-width: 200px; margin: 0 auto; }
    .movie-form__layout { grid-template-columns: 120px 1fr; gap: .875rem; }
    .movie-form__cover { width: 120px; }
    .movie-card--full { flex-direction: column; }
    .movie-card--full .movie-card__cover-link { width: 100%; }
    .movie-card--full .movie-card__cover { width: 100%; height: 200px; }
    .home-hero { flex-direction: column; align-items: flex-start; }
    .cards-grid { grid-template-columns: 1fr; }
    .cards-grid--3, .cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .auth-card { padding: 1.75rem 1.25rem; }
    .cards-grid--3, .cards-grid--4 { grid-template-columns: 1fr 1fr; }
    .movies-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .dash-hero .btn--primary { width: 100%; justify-content: center; }
    .movie-form__layout { grid-template-columns: 100px 1fr; gap: .75rem; padding: 1rem; }
    .movie-form__cover { width: 100px; }
}