/*
 * Каркас нового MVC Layout (templates/layout/app.twig). Пространство имён
 * классов — префикс `mvc-`, отдельный от public/assets/app/css/app.css и
 * public/assets/console/css/console.css, чтобы не пересекаться с ними в
 * разметке (см. MVC_TODO.md, раздел 1) — но палитра/шрифт ниже сознательно
 * СОВПАДАЮТ с public/assets/app/css/app.css (те же значения переменных и тот
 * же font-family), чтобы Settings/Monitoring/API — уже реальный трафик на
 * этом Layout, не гипотетический — не выглядели отдельным продуктом рядом с
 * остальным AeroDesk. Раньше здесь не было ни одной цветовой/шрифтовой
 * переменной — общая шапка/сайдбар/подвал оставались белыми и в системном
 * шрифте браузера независимо от переключателя темы приложения, а тему и
 * шрифт красил только `public/assets/mvc/css/api-docs.css`, и только внутри
 * контента модуля «API» — снаружи (`.mvc-header`/`.mvc-footer`) тема не
 * доезжала вообще ни на одной странице нового слоя.
 */

:root {
  --bg: #ffffff; --bg-alt: #ffffff; --fg: #202124; --fg-muted: #5f6368;
  --border: #e3e2df; --card-border: #d9d9d9;
  --accent: #004b8a; --accent-tint: #dce8f2; --code-bg: #eef0f5; --danger: #d1483a; --success: #2f9e5c;
  --warning: #b4790e; --warning-tint: #fdf1dc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16181a; --bg-alt: #202124; --fg: #e8eaed; --fg-muted: #9aa0a6;
    --border: #35363a; --card-border: #4c4e54;
    --accent: #3d8fd6; --accent-tint: #14314d; --code-bg: #26272b; --danger: #ef6a5c; --success: #4fbf82;
    --warning: #e0a941; --warning-tint: #3a2f16;
  }
}

:root[data-theme="dark"] {
  --bg: #16181a; --bg-alt: #202124; --fg: #e8eaed; --fg-muted: #9aa0a6;
  --border: #35363a; --card-border: #4c4e54;
  --accent: #3d8fd6; --accent-tint: #14314d; --code-bg: #26272b; --danger: #ef6a5c; --success: #4fbf82;
  --warning: #e0a941; --warning-tint: #3a2f16;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
}

.mvc-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mvc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: var(--bg-alt);
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}

.mvc-header-brand {
  font-weight: 600;
}

.mvc-header-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mvc-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.mvc-sidebar {
  flex: 0 0 220px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 1rem 0.5rem;
  overflow-y: auto;
}

.mvc-sidebar-group {
  margin-bottom: 1rem;
}

.mvc-sidebar-group-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  opacity: 0.6;
  padding: 0 0.5rem;
  margin-bottom: 0.25rem;
}

.mvc-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}

.mvc-sidebar-link:hover {
  background: var(--code-bg);
}

.mvc-sidebar-link.is-active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}

.mvc-main {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  color: var(--fg);
  padding: 1.25rem;
  overflow-y: auto;
}

.mvc-footer {
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
  color: var(--fg-muted);
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.mvc-breadcrumb {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.mvc-breadcrumb-link {
  color: inherit;
}

.mvc-flashes {
  margin-bottom: 0.75rem;
}

.mvc-flash {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.4rem;
}

.mvc-flash-success { background: var(--success); color: #fff; }
.mvc-flash-error   { background: var(--danger); color: #fff; }
.mvc-flash-info    { background: var(--accent-tint); color: var(--accent); }

.mvc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-border);
  color: var(--fg);
  background-size: cover;
  background-position: center;
  font-weight: 600;
}

.mvc-avatar-sm { width: 28px; height: 28px; font-size: 0.75rem; }
.mvc-avatar-md { width: 40px; height: 40px; font-size: 1rem; }
.mvc-avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }

.mvc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
}

.mvc-btn-primary   { background: var(--accent); color: #fff; }
.mvc-btn-secondary { background: var(--code-bg); color: var(--fg); }
.mvc-btn-ghost     { background: transparent; color: var(--fg); border-color: var(--card-border); }
.mvc-btn-danger    { background: var(--danger); color: #fff; }

.mvc-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.mvc-badge-neutral { background: var(--code-bg); color: var(--fg-muted); }
.mvc-badge-success { background: var(--success); color: #fff; }
.mvc-badge-warning { background: var(--warning); color: #fff; }
.mvc-badge-danger  { background: var(--danger); color: #fff; }

.mvc-card {
  display: block;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  text-decoration: none;
  color: inherit;
  margin-bottom: 0.6rem;
}

.mvc-card-title {
  font-weight: 600;
}

.mvc-card-excerpt {
  font-size: 0.85rem;
  opacity: 0.75;
}

.mvc-board-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  text-decoration: none;
  color: inherit;
}

.mvc-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
}

.mvc-modal.is-open {
  display: block;
}

.mvc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.mvc-modal-dialog {
  position: relative;
  max-width: 560px;
  margin: 5vh auto;
  background: var(--bg-alt);
  color: var(--fg);
  border-radius: 10px;
  padding: 1rem;
}

/*
 * Header/body/footer — были не оформлены (компонент templates/components/
 * modal.twig существовал раньше, чем первый реальный вызывающий код). Первый
 * реальный потребитель — модуль «API», подтверждение отзыва токена (см.
 * docs/api-ui-review.md #5) — заодно дооформлено здесь, а не в его
 * собственном api-docs.css, чтобы любой следующий вызов modal.twig получил
 * готовый стиль, а не заново обнаружил, что этих классов нет.
 */
.mvc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.mvc-modal-title {
  font-size: 1.1rem;
  margin: 0;
}

.mvc-modal-close {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
}

.mvc-modal-close:hover { opacity: 1; background: var(--code-bg); }

.mvc-modal-body { margin-bottom: 1rem; }

.mvc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.mvc-dropdown,
.mvc-menu {
  position: relative;
  display: inline-block;
}

.mvc-menu-trigger,
.mvc-dropdown-trigger {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mvc-dropdown-list,
.mvc-menu-list {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  background: var(--bg-alt);
  color: var(--fg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  min-width: 180px;
  padding: 0.35rem;
  z-index: 40;
}

.mvc-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
}

.mvc-menu-item:hover { background: var(--code-bg); }

.mvc-menu-form { display: block; }

.mvc-dropdown.is-open .mvc-dropdown-list,
.mvc-menu.is-open .mvc-menu-list {
  display: block;
}

.mvc-pagination {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.mvc-pagination-link.is-disabled {
  pointer-events: none;
  opacity: 0.4;
}

/* ---------- Auth (templates/auth/*.twig) — единственные страницы нового
   слоя без сайдбара/шапки (см. их докблок), центрированная карточка. ---- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 2rem;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--bg-alt);
}

.auth-card h1 { margin: 0 0 1.25rem; font-size: 1.4rem; text-align: center; }

.auth-errors { margin-bottom: 1rem; }
.auth-error { color: var(--danger); font-size: 0.85rem; margin-bottom: 0.3rem; }

.auth-switch { margin-top: 1rem; font-size: 0.85rem; text-align: center; color: var(--fg-muted); }
.auth-switch a { color: var(--accent); }

/* ---------- Общая форма (auth + Workspace create/update/share) ---------- */
.auth-form { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-form label { font-size: 0.82rem; color: var(--fg-muted); margin-top: 0.5rem; }
.auth-form input {
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.auth-form button { margin-top: 1rem; }

/* ---------- Компактная кнопка-иконка (▲/▼/✕ — переставить/удалить без
   drag-and-drop, см. templates/boards/_sidebar.twig, templates/boards/grid.twig) ---------- */
.mvc-icon-btn {
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--fg);
  border-radius: 4px;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.mvc-icon-btn:hover { background: var(--code-bg); }

.mvc-board-card-row { display: flex; align-items: center; gap: 0.3rem; }
.mvc-board-card-row .mvc-board-card { flex: 1; min-width: 0; }

.mvc-inline-form { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }