/* ============================================================================
   МОДУЛЬ «📦 ИНВЕНТАРЬ / ВЕЩИ» — стили token-карточки (сетка + поиск) и модалки
   добавления/правки. Используем общие CSS-переменные (var(--panel/--border/
   --text/--soft/--accent)), поэтому тёмная тема (body.dark-theme) подхватывается.
   ============================================================================ */

/* ---- token-карточка в сообщении -------------------------------------- */
.aya-inv-host { display: block; max-width: 380px; }

.aya-inv-card {
    background: var(--panel, #fff);
    border: 1px solid var(--border, rgba(0,0,0,.08));
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text, #16202a);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.aya-inv-loading { opacity: .7; }

.aya-inv-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 8px;
}
.aya-inv-title { font-weight: 700; font-size: 15px; }
.aya-inv-add-btn {
    border: none; border-radius: 999px; cursor: pointer;
    padding: 5px 12px; font-size: 13px; font-weight: 600;
    background: var(--accent, #2f8f5b); color: #fff;
}
.aya-inv-add-btn:active { transform: scale(.96); }

/* ---- поиск ----------------------------------------------------------- */
.aya-inv-search { margin-bottom: 10px; }
.aya-inv-search-input {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px; font-size: 14px;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    border-radius: 10px;
    background: var(--soft, rgba(0,0,0,.03));
    color: var(--text, #16202a);
    outline: none;
}
.aya-inv-search-input:focus { border-color: var(--accent, #2f8f5b); }

/* ---- сетка карточек -------------------------------------------------- */
.aya-inv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.aya-inv-empty {
    grid-column: 1 / -1;
    text-align: center; opacity: .6; padding: 18px 8px; font-size: 13px;
}

.aya-inv-item {
    border: 1px solid var(--border, rgba(0,0,0,.08));
    border-radius: 12px;
    padding: 8px;
    background: var(--soft, rgba(0,0,0,.02));
    display: flex; flex-direction: column; gap: 5px;
}
.aya-inv-photo {
    width: 100%; aspect-ratio: 1 / 1;
    border-radius: 9px; overflow: hidden; cursor: pointer;
    background: var(--border, rgba(0,0,0,.06));
    display: flex; align-items: center; justify-content: center;
}
.aya-inv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aya-inv-noimg { font-size: 34px; cursor: default; }

.aya-inv-name { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.aya-inv-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.aya-inv-tag {
    font-size: 11px; padding: 2px 7px; border-radius: 999px;
    background: rgba(47,143,91,.14); color: var(--accent, #2f8f5b);
}
.aya-inv-loc { font-size: 12px; opacity: .8; }
.aya-inv-holder { font-size: 12px; font-weight: 600; }
.aya-inv-holder.free { color: #2f8f5b; }
.aya-inv-holder.taken { color: #d98324; }

.aya-inv-actions { display: flex; gap: 4px; margin-top: 2px; }
.aya-inv-mini {
    flex: 1; border: 1px solid var(--border, rgba(0,0,0,.12));
    background: var(--panel, #fff); color: var(--text, #16202a);
    border-radius: 8px; padding: 4px 6px; font-size: 12px; cursor: pointer;
}
.aya-inv-mini:active { transform: scale(.95); }
.aya-inv-mini.aya-inv-del { flex: 0 0 auto; color: #c0392b; }

/* ---- модалка (добавить / править) ------------------------------------ */
.aya-inv-modal-ov {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.aya-inv-modal {
    width: 100%; max-width: 420px;
    background: var(--panel, #fff);
    color: var(--text, #16202a);
    border-radius: 18px;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.aya-inv-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}
.aya-inv-modal-title { font-weight: 700; font-size: 16px; }
.aya-inv-modal-close {
    border: none; background: transparent; cursor: pointer;
    font-size: 26px; line-height: 1; color: var(--text, #16202a); opacity: .6;
}
.aya-inv-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.aya-inv-photo-pick { cursor: pointer; }
.aya-inv-drop {
    border: 2px dashed var(--border, rgba(0,0,0,.18));
    border-radius: 14px; padding: 22px 14px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.aya-inv-drop-ic { font-size: 34px; }
.aya-inv-drop-txt { font-size: 13px; opacity: .75; }
.aya-inv-preview img {
    width: 100%; max-height: 220px; object-fit: contain;
    border-radius: 12px; background: var(--soft, rgba(0,0,0,.04));
}

.aya-inv-fields { display: flex; flex-direction: column; gap: 8px; }
.aya-inv-fields input {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; font-size: 14px;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    border-radius: 10px;
    background: var(--soft, rgba(0,0,0,.02));
    color: var(--text, #16202a); outline: none;
}
.aya-inv-fields input:focus { border-color: var(--accent, #2f8f5b); }

.aya-inv-save {
    border: none; border-radius: 12px; cursor: pointer;
    padding: 12px; font-size: 15px; font-weight: 700;
    background: var(--accent, #2f8f5b); color: #fff;
}
.aya-inv-save:active { transform: scale(.98); }
.aya-inv-hint { font-size: 12.5px; opacity: .8; text-align: center; min-height: 16px; }

/* Тёмная тема: карточки на подложке чуть светлее фона (переменные уже темнят). */
body.dark-theme .aya-inv-tag { background: rgba(47,143,91,.22); }
body.dark-theme .aya-inv-mini { background: rgba(255,255,255,.06); }