/* ============================================================================
   MenuBo — единая дизайн-система
   ----------------------------------------------------------------------------
   Один источник правды для токенов и общих компонентов: кнопок, полей ввода,
   модальных окон, вкладок, карточек, таблиц и уведомлений.

   Подключается ПОСЛЕ постраничных стилей, поэтому оформление общих компонентов
   везде одинаковое, а частная вёрстка страниц (сетки, панели) не затрагивается —
   дизайн-система не описывает layout-селекторы конкретных страниц.
   ============================================================================ */

@font-face {
    font-family: "Shrift";
    src: url("/static/fonts/shrift.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Поверхности */
    --ds-bg:          #0b0c0e;
    --ds-surface:     #111214;
    --ds-elevated:    #17181b;
    --ds-input:       #1c1d21;
    --ds-hover:       #232428;

    /* Текст */
    --ds-text:        #f4f4f5;
    --ds-text-dim:    #a1a1aa;
    --ds-text-faint:  #6b6b73;

    /* Бренд: неоновый зелёный логотипа + глубокий для заливок */
    --ds-accent:        #00ff88;
    --ds-accent-strong: #10b981;
    --ds-accent-hover:  #00cc6d;
    --ds-accent-soft:   rgba(0, 255, 136, 0.12);
    --ds-on-accent:     #04160c;

    /* Границы */
    --ds-border:        rgba(255, 255, 255, 0.09);
    --ds-border-strong: rgba(255, 255, 255, 0.16);

    /* Статусы */
    --ds-danger:       #ff4757;
    --ds-danger-soft:  rgba(255, 71, 87, 0.14);
    --ds-warning:      #ffa502;
    --ds-warning-soft: rgba(255, 165, 2, 0.14);
    --ds-success:      #00ff88;

    /* Форма и ритм */
    --ds-radius-sm: 7px;
    --ds-radius:    10px;
    --ds-radius-lg: 16px;
    --ds-shadow:    0 12px 32px rgba(0, 0, 0, 0.45);
    --ds-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
    --ds-speed:     .15s;

    --ds-font: "Shrift", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Совместимость: постраничные стили ссылаются на эти имена.
       Переопределяем их здесь, чтобы фирменный зелёный логотипа был
       одинаковым на всех экранах, а не разных оттенков по файлам. */
    --accent: var(--ds-accent);
    --accent-hover: var(--ds-accent-hover);
    --text-primary: var(--ds-text);
    --text-secondary: var(--ds-text-dim);
    --border: var(--ds-border);
}

/* ============================ КНОПКИ ============================ */

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--ds-radius-sm);
    border: 1px solid transparent;
    font-family: var(--ds-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--ds-speed), border-color var(--ds-speed),
                color var(--ds-speed), opacity var(--ds-speed);
    text-decoration: none;
    white-space: nowrap;
}

/* Главное действие — фирменный зелёный с тёмным текстом */
.btn-primary {
    background: var(--ds-accent);
    color: var(--ds-on-accent);
    box-shadow: none;
}
.btn-primary:hover { background: var(--ds-accent-hover); }

/* Второстепенное действие */
.btn,
.btn-secondary,
.btn-ghost {
    background: var(--ds-input);
    color: var(--ds-text);
    border-color: var(--ds-border);
}
.btn:hover,
.btn-secondary:hover,
.btn-ghost:hover {
    background: var(--ds-hover);
    border-color: var(--ds-border-strong);
}

.btn-danger {
    background: var(--ds-danger-soft);
    color: var(--ds-danger);
    border-color: transparent;
}
.btn-danger:hover { background: var(--ds-danger); color: #fff; }

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Убираем «подпрыгивание» кнопок — движение осталось от прежних стилей */
.btn:hover, .btn-primary:hover, .btn-secondary:hover,
.btn-ghost:hover, .btn-danger:hover { transform: none; }

/* ============================ ПОЛЯ ВВОДА ============================ */

.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal input[type="time"],
.modal input[type="date"],
.modal input[type="search"],
.modal textarea,
.modal select,
.ds-field input,
.ds-field textarea,
.ds-field select {
    width: 100%;
    padding: 11px 13px;
    background: var(--ds-input);
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font);
    font-size: 14px;
    transition: border-color var(--ds-speed), box-shadow var(--ds-speed);
}

.modal input:focus,
.modal textarea:focus,
.modal select:focus,
.ds-field input:focus,
.ds-field textarea:focus,
.ds-field select:focus {
    outline: none;
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

.modal input::placeholder,
.ds-field input::placeholder,
.modal textarea::placeholder { color: var(--ds-text-faint); }

/* Выпадающие списки: свой указатель и ТЁМНЫЙ список опций.
   Без явного стиля option браузер рисует раскрытый список на белом фоне,
   и светлый текст на нём становится нечитаемым. */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ds-text-dim) 50%),
        linear-gradient(135deg, var(--ds-text-dim) 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
select option,
select optgroup {
    background-color: #1c1d21;
    color: #f4f4f5;
}

.ds-field { display: block; margin-bottom: 14px; }
.ds-field > label,
.ds-field > span {
    display: block;
    font-size: 12px;
    color: var(--ds-text-dim);
    margin-bottom: 6px;
}

/* ============================ МОДАЛЬНЫЕ ОКНА ============================ */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.modal.active,
.modal.show { display: flex; }

/* Полупрозрачная подложка отдельным слоем (используется частью страниц) */
.modal > .modal-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--ds-elevated);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
    animation: dsModalIn .18s ease-out;
}

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ds-border);
}
.modal-header h2,
.modal-header h3 {
    font-family: var(--ds-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--ds-text);
    margin: 0;
}

.modal-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text-dim);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--ds-speed), color var(--ds-speed);
}
.modal-close:hover { background: var(--ds-hover); color: var(--ds-text); }

.modal-body { padding: 22px; }

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--ds-border);
}

/* Размеры окна */
.modal-content.modal-sm   { max-width: 380px; }
.modal-content.modal-lg   { max-width: 760px; }
.modal-content.modal-xl   { max-width: 1080px; }

/* ============================ ВКЛАДКИ ============================ */

.tabs, .tab-list {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--ds-border);
}

.tab, .tab-btn {
    padding: 11px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ds-text-dim);
    font-family: var(--ds-font);
    font-size: 14px;
    cursor: pointer;
    transition: color var(--ds-speed), border-color var(--ds-speed);
}
.tab:hover, .tab-btn:hover { color: var(--ds-text); }
.tab.active, .tab-btn.active {
    color: var(--ds-accent);
    border-bottom-color: var(--ds-accent);
}

/* ============================ КАРТОЧКИ ============================ */

.ds-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    padding: 18px;
}

/* ============================ ЗНАЧКИ ============================ */

.badge, .ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--ds-hover);
    color: var(--ds-text-dim);
}
.badge.success, .ds-badge.success { background: var(--ds-accent-soft); color: var(--ds-accent); }
.badge.danger,  .ds-badge.danger  { background: var(--ds-danger-soft);  color: var(--ds-danger); }
.badge.warning, .ds-badge.warning { background: var(--ds-warning-soft); color: var(--ds-warning); }

/* ============================ СКРОЛЛБАРЫ ============================ */

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2b30; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a3b42; }

/* ============================ ССЫЛКИ ============================ */

/* Ссылки без собственного оформления: браузерный синий выбивался из темы.
   У навигации и футера свои классы — их специфичность выше, они не задеты. */
a { color: var(--ds-accent-strong); }
a:hover { color: var(--ds-accent); }