/* ==========================================================================
   Secrets Vault — перенос дизайн-системы «Сейф» из проекта storage.

   Тёплый бумажный фон, глубокий лесной зелёный для действий, латунь только как
   метка, плоские спокойные поверхности, скруглённый квадрат двери сейфа как
   повторяющаяся форма.

   Файл читается поверх css/app.css: переопределяет токены и внешний вид
   компонентов, сохраняя разметку и имена классов проекта. Тёмная тема —
   по умолчанию (:root), светлая — [data-theme="light"].

   Разделы: tokens, base, components.
   ========================================================================== */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  color-scheme: dark;

  /* ---- Типографика ---- */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-mono: var(--mono);

  /* ---- Форма ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius: var(--radius-md);
  --radius-full: 999px;

  /* ---- Плотность (сенсорная) ---- */
  --control-height: 44px;
  --control-height-sm: 36px;

  /* ---- Цвет: страница и поверхности ---- */
  --bg: #0E1513;
  --surface: #16201D;
  --surface-raised: #1C2925;
  --surface-overlay: #223029;
  --surface-sunken: rgba(2, 6, 5, 0.34);
  --scrim: rgba(4, 8, 7, 0.64);

  /* ---- Цвет: текст ---- */
  --text: #E7ECE8;
  --text-muted: #ADB8B2;
  --text-subtle: #7A8982;
  --text-disabled: #5C6964;

  /* ---- Цвет: линии ---- */
  --border: rgba(170, 220, 200, 0.11);
  --border-strong: #7B8C84;

  /* ---- Цвет: состояния ---- */
  --state-hover: rgba(231, 236, 232, 0.08);
  --state-pressed: rgba(231, 236, 232, 0.13);

  /* ---- Цвет: элементы управления ---- */
  --control-bg: rgba(170, 220, 200, 0.07);
  --control-disabled-bg: rgba(231, 236, 232, 0.07);
  --field-bg: rgba(170, 220, 200, 0.04);
  --control-track: rgba(2, 6, 5, 0.34);
  --control-thumb: rgba(170, 220, 200, 0.15);
  --chip-bg: rgba(170, 220, 200, 0.10);

  /* ---- Цвет: акцент (лесной зелёный) ---- */
  --accent: #7CCBA6;
  --accent-hover: #8FD6B4;
  --accent-pressed: #6AB893;
  --accent-contrast: #0C1512;
  --accent-soft: rgba(124, 203, 166, 0.16);
  --accent-soft-hover: rgba(124, 203, 166, 0.22);
  --focus-ring: #7CCBA6;

  /* ---- Цвет: бренд ---- */
  --brand: #1E5A47;
  --brand-contrast: #EAF4EF;
  --brand-line: #94BDAD;
  --brand-highlight: #EAC683;

  /* ---- Цвет: латунь (метки) ---- */
  --highlight: #E0B36A;
  --highlight-strong: #E6BF80;
  --highlight-soft: rgba(224, 179, 106, 0.16);

  /* ---- Цвет: статусы ---- */
  --danger: #F0907F;
  --danger-solid: #EE8A78;
  --danger-solid-hover: #F4A090;
  --danger-contrast: #2A0F0A;
  --danger-soft: rgba(240, 144, 127, 0.14);
  --success: #7CCBA6;
  --success-soft: rgba(124, 203, 166, 0.16);
  --warning: #F0A35E;
  --warning-soft: rgba(240, 163, 94, 0.15);
  --info: #8DB7EC;
  --info-soft: rgba(141, 183, 236, 0.15);
  --toast-bg: #E7ECE8;
  --toast-text: #141C19;
  --toast-error-bg: #F0907F;
  --toast-error-text: #2A0F0A;

  /* ---- Цвет: плитки записей ---- */
  --tile-folder-bg: rgba(124, 203, 166, 0.16);
  --tile-file-bg: rgba(170, 220, 200, 0.08);
  --type-folder: #7CCBA6;
  --type-file: #AEB9B3;

  /* ---- Тени ---- */
  --shadow-outline: 0 0 0 1px var(--border);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.30), 0 8px 20px rgba(0, 0, 0, 0.36);
  --shadow-lg: rgba(0, 0, 0, 0.50);
  --elevation-lg: 0 4px 10px rgba(0, 0, 0, 0.30), 0 20px 48px rgba(0, 0, 0, 0.50);

  /* ---- Псевдонимы существующих имён проекта ---- */
  --bg-deep: #0B110F;
  --bg-lift: var(--surface);
  --line: var(--border);
  --muted: var(--text-muted);
  --ok: var(--success);
  --accent-hot: var(--accent-hover);
  --on-accent: var(--accent-contrast);
  --hover-bg: var(--state-hover);
  --hover-bg-strong: var(--state-pressed);
  --badge-folder-bg: var(--accent-soft);
  --badge-secret-bg: var(--accent-soft);
  --badge-danger-bg: var(--danger-soft);
  --surface-subtle: var(--surface-sunken);
  --surface-inset: var(--surface-sunken);
  --overlay: var(--scrim);
  --shadow: rgba(0, 0, 0, 0.30);
  --topbar-height: 3.5rem;
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #F7F4EE;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-overlay: #FFFFFF;
  --surface-sunken: rgba(125, 95, 25, 0.10);
  --scrim: rgba(27, 36, 32, 0.46);

  --text: #1B2420;
  --text-muted: #595C54;
  --text-subtle: #85837A;
  --text-disabled: #A6A398;

  --border: rgba(111, 86, 24, 0.16);
  --border-strong: #8A867B;

  --state-hover: rgba(94, 74, 22, 0.08);
  --state-pressed: rgba(94, 74, 22, 0.14);

  --control-bg: #FFFFFF;
  --control-disabled-bg: rgba(94, 74, 22, 0.08);
  --field-bg: #FFFFFF;
  --control-track: rgba(125, 95, 25, 0.12);
  --control-thumb: #FFFFFF;
  --chip-bg: rgba(125, 95, 25, 0.12);

  --accent: #1E5A47;
  --accent-hover: #17493A;
  --accent-pressed: #123B2F;
  --accent-contrast: #FFFFFF;
  --accent-soft: rgba(30, 90, 71, 0.13);
  --accent-soft-hover: rgba(30, 90, 71, 0.19);
  --focus-ring: #1E5A47;

  --brand: #1E5A47;
  --brand-contrast: #FFFFFF;
  --brand-line: #A9CFC0;
  --brand-highlight: #EAC683;

  --highlight: #A9782B;
  --highlight-strong: #7F5510;
  --highlight-soft: rgba(214, 160, 60, 0.24);

  --danger: #B3311F;
  --danger-solid: #B3311F;
  --danger-solid-hover: #9A2718;
  --danger-contrast: #FFFFFF;
  --danger-soft: rgba(179, 49, 31, 0.10);
  --success: #1E6B4E;
  --warning: #8A4B00;
  --warning-soft: rgba(214, 130, 20, 0.18);
  --info: #2C5E97;
  --info-soft: rgba(44, 94, 151, 0.12);
  --toast-bg: #1B2420;
  --toast-text: #F3F5F2;
  --toast-error-bg: #9A2718;
  --toast-error-text: #FFFFFF;

  --tile-folder-bg: rgba(30, 90, 71, 0.13);
  --tile-file-bg: rgba(111, 96, 60, 0.12);
  --type-folder: #1E5A47;
  --type-file: #595C54;

  --shadow-outline: 0 0 0 1px var(--border);
  --shadow-sm: 0 1px 2px rgba(46, 40, 24, 0.06);
  --shadow-md: 0 2px 4px rgba(46, 40, 24, 0.06), 0 8px 20px rgba(46, 40, 24, 0.10);
  --shadow-lg: rgba(46, 40, 24, 0.18);
  --elevation-lg: 0 4px 10px rgba(46, 40, 24, 0.06), 0 20px 48px rgba(46, 40, 24, 0.18);

  --bg-deep: #F1ECE2;
  --shadow: rgba(46, 40, 24, 0.10);
}

/* Плотная раскладка настольного компьютера с мышью — как в storage */
@media (min-width: 900px) and (min-height: 500px) and (hover: hover) and (pointer: fine) {
  :root {
    --control-height: 40px;
    --control-height-sm: 32px;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
  background: var(--bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background: var(--bg);
}

/* Убираем шумовую текстуру и градиенты прежней темы */
body::before {
  display: none;
}

input,
select,
textarea,
button {
  font-family: inherit;
  letter-spacing: inherit;
}

::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

::selection {
  background: var(--accent-soft-hover);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.muted {
  color: var(--text-muted);
}

.danger {
  color: var(--danger);
}

/* ==========================================================================
   Components — бренд
   ========================================================================== */
.brand {
  gap: 0.75rem;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.brand-text {
  font-size: 1.125rem;
  font-weight: 700;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%231E5A47'/%3E%3Crect x='7' y='7' width='18' height='18' rx='4' stroke='%23A9CFC0' stroke-width='2' fill='none'/%3E%3Crect x='2' y='10' width='6' height='4' rx='1.5' fill='%23A9CFC0'/%3E%3Crect x='2' y='18' width='6' height='4' rx='1.5' fill='%23A9CFC0'/%3E%3Ccircle cx='16' cy='16' r='5' stroke='%23EAC683' stroke-width='2' fill='none'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23EAC683'/%3E%3Cpath d='M16 20.5v-3M19.9 13.75l-2.6 1.5M12.1 13.75l2.6 1.5' stroke='%23EAC683' stroke-width='1.75' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: none;
  animation: none;
}

.auth-brand .brand-mark {
  width: 44px;
  height: 44px;
}

.topbar {
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.topbar-nav a,
.topbar-nav .link-button {
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.topbar-nav a:hover,
.topbar-nav .link-button:hover {
  background: var(--state-hover);
  border-color: transparent;
  color: var(--text);
}

.topbar .nav-username {
  font-family: var(--font);
  color: var(--text);
}

.link-button {
  color: var(--accent);
  font-weight: 600;
}

/* ==========================================================================
   Components — кнопки
   ========================================================================== */
.btn {
  min-height: var(--control-height);
  padding: 0 1rem;
  gap: 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:hover {
  background: color-mix(in srgb, var(--control-bg) 90%, var(--text) 10%);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-contrast);
}

.btn:active {
  background: color-mix(in srgb, var(--control-bg) 82%, var(--text) 18%);
}

.btn.primary:active {
  background: var(--accent-pressed);
}

.btn.danger {
  border-color: transparent;
  background: transparent;
  color: var(--danger);
}

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

.modal-actions .btn.danger {
  background: var(--danger-solid);
  border-color: var(--danger-solid);
  color: var(--danger-contrast);
}

.modal-actions .btn.danger:hover {
  background: var(--danger-solid-hover);
  border-color: var(--danger-solid-hover);
}

.btn-sm,
.btn.small-btn {
  min-height: var(--control-height-sm);
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  background: var(--control-disabled-bg);
  border-color: transparent;
  color: var(--text-disabled);
}

.btn-block {
  width: 100%;
}

.icon-btn,
a.icon-btn {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
}

.icon-btn:hover {
  background: var(--state-hover);
  border-color: transparent;
  color: var(--text);
}

.icon-btn.copied {
  color: var(--success);
  border-color: transparent;
}

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

.icon-btn-primary,
.icon-btn.icon-btn-primary {
  color: var(--accent);
  border-color: transparent;
  background: var(--accent-soft);
}

.icon-btn-primary:hover,
.icon-btn.icon-btn-primary:hover {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: transparent;
}

/* ==========================================================================
   Components — поля и формы
   ========================================================================== */
label {
  margin-bottom: 0.5rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.field-label,
.field-hint {
  color: var(--text-muted);
}

.field-hint {
  font-weight: 400;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  min-height: var(--control-height);
  padding: 0 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  color: var(--text);
  font-size: 0.9375rem;
  transition: border-color 120ms ease;
}

textarea {
  min-height: 6rem;
  padding: 0.625rem 0.75rem;
  line-height: 1.5;
  font-family: var(--mono);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: -1px;
  border-color: var(--focus-ring);
  box-shadow: none;
}

input:disabled,
input[readonly] {
  border-color: var(--border);
  background: var(--surface-sunken);
  color: var(--text-disabled);
  opacity: 1;
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

.role-fieldset,
.secret-scope-compact {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Components — карточки, панели, таблицы
   ========================================================================== */
.card {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-outline), var(--shadow-sm);
}

.card-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.secrets-page .content-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-outline);
}

.tree-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-outline);
}

.tree-panel-header,
.tree-list .tree-list {
  border-color: var(--border);
}

.tree-list .tree-list {
  border-left-color: var(--border);
}

.tree-row {
  border-radius: var(--radius-sm);
}

.tree-row:hover {
  background: var(--state-hover);
}

.tree-list li.tree-node.active > .tree-row {
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}

.tree-list li.tree-node.active > .tree-row > a.tree-folder {
  color: var(--accent);
}

.tree-list li.tree-node.active > .tree-row > a.tree-secret {
  color: var(--highlight-strong);
}

.tree-folder-icon {
  color: var(--accent);
}

.tree-secret-icon {
  color: var(--highlight-strong);
}

.tree-panel-resizer::after {
  background: var(--border-strong);
  opacity: 0.6;
}

.tree-panel-resizer:hover::after,
.tree-panel-resizer:focus-visible::after,
body.tree-resizing .tree-panel-resizer::after {
  background: var(--accent);
  opacity: 1;
}

.entry-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
}

.folder-icon {
  color: var(--type-folder);
  background: var(--tile-folder-bg);
}

.secret-icon {
  color: var(--highlight-strong);
  background: var(--highlight-soft);
}

.content-panel a.item-folder:hover .folder-icon {
  background: color-mix(in srgb, var(--type-folder) 24%, transparent);
}

.content-panel a.item-secret:hover .secret-icon {
  background: color-mix(in srgb, var(--highlight) 28%, transparent);
}

.table {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.table th,
.table td {
  border-bottom: 1px solid var(--border);
}

.table th {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.card-table .table {
  border-top: 1px solid var(--border);
}

.token-inline-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.api-hint pre {
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

/* ==========================================================================
   Components — значки и метки
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.5rem;
  border-radius: var(--radius-xs);
  background: var(--chip-bg);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
}

.badge.folder {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge.secret {
  background: var(--highlight-soft);
  color: var(--highlight-strong);
}

.badge.expired {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge.expires-soon {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge.write {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ==========================================================================
   Components — сегменты и переключатели
   ========================================================================== */
.secret-modal-tabs {
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--control-track);
}

.secret-tab-btn {
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.secret-tab-btn:hover {
  color: var(--text);
}

.secret-tab-btn.is-active {
  background: var(--control-thumb);
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--border-strong), var(--shadow-sm);
}

.secret-tab-badge {
  background: var(--accent);
  color: var(--accent-contrast);
}

.secret-versions-radio-option {
  border-radius: var(--radius-sm);
}

.secret-versions-radio-option:hover {
  border-color: var(--border);
  background: var(--state-hover);
}

.secret-versions-radio-option.is-checked,
.secret-versions-radio-option:has(.secret-versions-radio:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.secret-versions-radio {
  border-color: var(--border-strong);
  background: var(--field-bg);
}

.secret-versions-radio:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.secret-versions-badge-current {
  border-color: transparent;
}

/* ==========================================================================
   Components — оповещения, ошибки, тосты
   ========================================================================== */
.alert {
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: 0.875rem;
}

.alert.success {
  border: none;
  background: var(--success-soft);
  color: var(--success);
}

.alert.error {
  border: none;
  background: var(--danger-soft);
  color: var(--danger);
}

.form-error {
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
}

.toast {
  border: none;
  border-radius: var(--radius-md);
  background: var(--toast-bg);
  box-shadow: var(--shadow-md);
  color: var(--toast-text);
}

.toast-success {
  border: none;
  background: var(--toast-bg);
  color: var(--toast-text);
}

.toast-error {
  border: none;
  background: var(--toast-error-bg);
  color: var(--toast-error-text);
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ==========================================================================
   Components — окна
   ========================================================================== */
.modal-backdrop {
  background: var(--scrim);
  backdrop-filter: none;
}

.modal-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-outline), var(--elevation-lg);
}

.modal-title,
.modal-dialog h2 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
}

.modal-message {
  color: var(--text-muted);
}

.modal-close {
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.modal-close:hover {
  background: var(--state-hover);
  color: var(--text);
}

/* ==========================================================================
   Components — вход и регистрация
   ========================================================================== */
.auth-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-outline), var(--shadow-md);
}

.auth-lead {
  color: var(--text-muted);
}

.auth-form label {
  margin-bottom: 0;
}

.auth-form label span {
  color: var(--text);
  font-weight: 600;
}

.login-divider,
.login-keycloak-link,
.auth-footer {
  color: var(--text-muted);
}

/* ==========================================================================
   Components — прочее
   ========================================================================== */
.breadcrumb {
  font-family: var(--font);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

h1,
.page-header-row h1,
.secrets-page .page-header h1 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-header-row h1,
.secrets-page .page-header h1 {
  font-size: 1.375rem;
}

.transfer-progress {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.transfer-spinner {
  border-color: var(--control-track);
  border-top-color: var(--accent);
}

.vault-transfer-loader {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-md);
}

.one-time-link-result .token-inline-row {
  background: var(--surface-sunken);
}