nodewarden/webapp/src/styles.css

@import './styles/tokens.css';
@import './styles/base.css';
@import './styles/auth.css';
@import './styles/forms.css';
@import './styles/shell.css';
@import './styles/vault.css';
@import './styles/management.css';
@import './styles/overlays.css';
@import './styles/motion.css';
@import './styles/responsive.css';
@import './styles/dark.css';

/* Unified product polish: refined, smooth, comfortable surfaces across desktop, mobile, and dark mode. */

/* ── surface consistency ── */
.app-shell,
.auth-card,
.dialog-card,
.card,
.list-panel,
.backup-operations-sidebar,
.backup-destination-sidebar,
.backup-detail-panel,
.restore-progress-card,
.backup-recommendation-card,
.backup-destination-item,
.backup-browser-list,
.backup-browser-path,
.totp-code-row,
.mobile-settings-link,
.table tr {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.app-shell {
  background: var(--panel-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.topbar,
.mobile-tabbar,
.app-side {
  background: var(--panel-soft);
  border-color: var(--line-soft);
}

/* ── active states ── */
.side-link.active,
.mobile-tab.active,
.tree-btn.active,
.list-item.active,
.sort-menu-item.active,
.backup-destination-item.active,
.backup-interval-preset.active,
.mobile-settings-link.active {
  background: color-mix(in srgb, var(--primary) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  color: var(--primary-strong);
}

/* ── danger / warning panels (cosmetic resets only) ── */
.dialog-card.warning,
:root[data-theme='dark'] .dialog-card.warning {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  box-shadow: var(--shadow-lg);
}

.dialog-warning-badge {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
  color: var(--danger);
}

.dialog-warning-kicker {
  letter-spacing: 0;
  text-transform: none;
}

.dialog-message.warning,
:root[data-theme='dark'] .dialog-message.warning {
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 20%, var(--line));
  color: var(--text);
}

/* ── theme switch ── */
.theme-switch-slider,
.theme-switch-input:checked + .theme-switch-slider,
:root[data-theme='dark'] .theme-switch-slider {
  background: var(--panel-muted);
  border-color: var(--line);
}

.theme-switch-slider::before,
:root[data-theme='dark'] .theme-switch-slider::before {
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

/* ── dark mode surface resets ── */
:root[data-theme='dark'] .app-shell,
:root[data-theme='dark'] .auth-card,
:root[data-theme='dark'] .dialog-card,
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .list-panel,
:root[data-theme='dark'] .settings-subcard,
:root[data-theme='dark'] .backup-operations-sidebar,
:root[data-theme='dark'] .backup-destination-sidebar,
:root[data-theme='dark'] .backup-detail-panel,
:root[data-theme='dark'] .backup-recommendation-card,
:root[data-theme='dark'] .backup-recommendation-dav-item,
:root[data-theme='dark'] .backup-destination-item,
:root[data-theme='dark'] .backup-browser-list,
:root[data-theme='dark'] .backup-browser-path,
:root[data-theme='dark'] .totp-code-row,
:root[data-theme='dark'] .mobile-settings-link,
:root[data-theme='dark'] .table tr,
:root[data-theme='dark'] .list-item,
:root[data-theme='dark'] .input,
:root[data-theme='dark'] .search-input,
:root[data-theme='dark'] .create-menu,
:root[data-theme='dark'] .create-menu-item,
:root[data-theme='dark'] .sort-menu,
:root[data-theme='dark'] .sort-menu-item {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

:root[data-theme='dark'] .topbar,
:root[data-theme='dark'] .mobile-tabbar,
:root[data-theme='dark'] .app-side {
  background: var(--panel-soft);
}

:root[data-theme='dark'] .btn-secondary {
  background: var(--panel);
  border-color: var(--line);
  color: var(--primary);
}

:root[data-theme='dark'] .btn-primary {
  background: var(--primary);
  border-color: transparent;
  color: #08111f;
}

:root[data-theme='dark'] .btn-danger {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  color: var(--danger);
}

:root[data-theme='dark'] .list-item:hover,
:root[data-theme='dark'] .sort-menu-item:hover,
:root[data-theme='dark'] .create-menu-item:hover,
:root[data-theme='dark'] .mobile-settings-link:hover,
:root[data-theme='dark'] .backup-destination-item:hover,
:root[data-theme='dark'] .side-link:hover,
:root[data-theme='dark'] .mobile-tab:hover,
:root[data-theme='dark'] .tree-btn:hover {
  background: var(--panel-subtle);
}

.loading-state,
.loading-state-card {
  display: grid;
  gap: 12px;
}

.loading-state.compact,
.loading-state-card.compact {
  gap: 10px;
}

.loading-state-card {
  padding: 16px;
}

.loading-state-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loading-state-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-muted) 78%, transparent);
}

.loading-state-text {
  display: grid;
  gap: 8px;
  flex: 1;
}

.loading-state-line {
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-muted) 80%, transparent);
}

.loading-state-line.short {
  width: 42%;
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, white 38%, transparent) 48%,
    transparent 100%
  );
  animation: loading-shimmer 1.25s ease-in-out infinite;
}

@keyframes loading-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Product refinement layer: calm, dense, app-like surfaces for the vault workflow. */
html,
body,
#root {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 78%, var(--bg-accent)) 0%, var(--bg-accent) 100%);
}

body {
  font-size: 15px;
  line-height: 1.5;
}

h1,
h2,
h3,
h4 {
  letter-spacing: 0;
}

.app-page {
  padding: 18px;
}

.app-shell {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

.topbar {
  height: 56px;
  padding-inline: 16px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-color: var(--line-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand {
  gap: 10px;
}

.brand-logo {
  height: 36px;
  width: 45px;
  filter: none;
}

.brand-wordmark,
.standalone-brand-wordmark,
.not-found-wordmark {
  background: var(--primary);
}

.topbar-actions {
  gap: 8px;
}

.user-chip {
  height: 32px;
  max-width: 280px;
  border-radius: var(--radius-md);
  background: var(--panel-soft);
  color: var(--muted-strong);
  box-shadow: none;
}

.user-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-main {
  grid-template-columns: 212px minmax(0, 1fr);
  background: var(--panel-soft);
}

.app-side {
  padding: 12px;
  background: var(--panel);
  border-color: var(--line-soft);
}

.side-nav-main {
  gap: 4px;
}

.side-link,
.side-group-trigger,
.side-sub-link,
.nav-layout-trigger,
.nav-layout-option {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.side-link,
.side-group-trigger {
  min-height: 40px;
  padding: 9px 10px;
  color: var(--muted-strong);
}

.side-subnav-inner {
  padding-left: 12px;
}

.side-sub-link {
  min-height: 36px;
  padding: 8px 10px;
}

.side-link:hover,
.side-group-trigger:hover,
.side-sub-link:hover,
.nav-layout-trigger:hover,
.nav-layout-trigger.active {
  background: var(--panel-soft);
  border-color: var(--line);
  color: var(--text);
  box-shadow: none;
}

.side-link.active,
.side-group-trigger.active,
.side-sub-link.active,
.mobile-tab.active,
.tree-btn.active,
.list-item.active,
.sort-menu-item.active,
.backup-destination-item.active,
.backup-interval-preset.active,
.mobile-settings-link.active,
.nav-layout-option.active {
  background: color-mix(in srgb, var(--primary) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  color: var(--primary-strong);
  box-shadow: none;
}

.nav-layout-menu,
.sort-menu,
.create-menu {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.content {
  padding: 12px;
}

.route-stage {
  scrollbar-gutter: stable;
}

.auth-page {
  padding: 20px;
}

.standalone-shell {
  max-width: 430px;
  gap: 12px;
}

.standalone-brand {
  gap: 12px;
}

.standalone-brand-logo {
  height: 48px;
  width: 60px;
  filter: none;
}

.auth-card,
.dialog-card,
.card,
.list-panel,
.settings-subcard,
.backup-operations-sidebar,
.backup-destination-sidebar,
.backup-detail-panel,
.restore-progress-card,
.backup-recommendation-card,
.backup-destination-item,
.backup-browser-list,
.backup-browser-path,
.totp-code-row,
.mobile-settings-link,
.table tr {
  border-color: var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.auth-card {
  padding: 24px;
}

.auth-card h1,
.standalone-title {
  font-size: 26px;
  line-height: 1.18;
}

.muted,
.standalone-muted,
.field-help,
.settings-field-note,
.backup-inline-note,
.detail-sub,
.list-sub,
.backup-destination-meta {
  color: var(--muted);
}

.field {
  margin-bottom: 12px;
}

.field > span {
  margin: 0 0 6px;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
}

.input,
.search-input {
  height: 42px;
  border-radius: var(--radius-md);
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: none;
}

.textarea {
  min-height: 96px;
}

.input:hover:not(:disabled),
.search-input:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}

.input:focus,
.search-input:focus {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: var(--panel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.btn {
  height: 38px;
  min-width: 38px;
  border-radius: var(--radius-md);
  font-size: 14px;
  box-shadow: none;
  touch-action: manipulation;
}

.btn.small,
.topbar-actions .btn {
  height: 32px;
  border-radius: var(--radius-md);
  padding-inline: 10px;
}

.btn.full {
  height: 44px;
  margin-block: 10px;
  font-size: 16px;
}

.btn-primary {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 20%, transparent);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 24%, transparent);
}

.btn-secondary {
  background: var(--panel);
  border-color: var(--line);
  color: var(--primary-strong);
}

.btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 6%, var(--panel));
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
}

.btn-danger {
  background: color-mix(in srgb, var(--danger) 5%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
  color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}


.sidebar-block {
  margin-bottom: 8px;
  padding: 12px;
}

.sidebar-title {
  color: var(--muted-strong);
}

.tree-btn {
  min-height: 36px;
  border-radius: var(--radius-md);
  padding: 8px 10px;
}

.folder-delete-btn,
.folder-sort-btn,
.folder-add-btn,
.search-clear-btn,
.input-icon-btn,
.eye-btn,
.totp-copy-btn,
.domain-rule-expand-btn,
.domain-rule-mini-btn,
.domain-rule-icon-btn,
.password-history-close {
  border-radius: var(--radius-md);
}

.list-col {
  max-width: none;
}

.list-head {
  margin-bottom: 8px;
}

.list-count {
  color: var(--muted);
  font-weight: 700;
}

.list-panel,
.detail-col {
  padding: 8px;
}

.list-item {
  min-height: 60px;
  margin-bottom: 6px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border-color: var(--line-soft);
}

.list-item::before {
  display: none;
}

.list-item:hover {
  background: var(--panel-subtle);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  box-shadow: var(--shadow-sm);
}

.list-item:hover .row-main,
.list-item.active .row-main,
.list-item:hover .list-text,
.list-item.active .list-text,
.list-item:hover .list-sub,
.list-item.active .list-sub {
  transform: none;
}

.list-item:hover .list-title,
.list-item.active .list-title {
  letter-spacing: 0;
}

.list-title {
  color: var(--text);
  font-size: 14px;
}

.list-badge {
  background: var(--panel-muted);
  color: var(--muted-strong);
}

.card {
  margin-bottom: 8px;
  padding: 14px;
}

.route-stage,
.sidebar,
.list-panel,
.detail-col,
.log-list,
.card.log-detail-panel,
.domain-rules-table,
.route-stage-fixed {
  scrollbar-gutter: stable;
}

.route-stage,
.sidebar {
  margin-right: -4px;
  padding-right: 4px;
}

.list-panel,
.detail-col {
  margin-right: -4px;
  padding-right: 12px;
}

.log-list,
.domain-rules-table {
  margin-right: -4px;
  padding-right: calc(0.125rem + 4px);
}

.card.log-detail-panel {
  margin-right: -4px;
  padding-right: 18px;
}

.card h4,
.settings-module h3,
.section-head h3,
.section-head h4 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}

.detail-title {
  color: var(--text);
}

.kv-line,
.kv-row,
.attachment-row,
.custom-field-card,
.table th,
.table td {
  border-color: var(--line-soft);
}

.kv-label,
.kv-line > span,
.table th {
  color: var(--muted);
}

.import-export-panels,
.backup-grid,
.domain-rules-grid {
  gap: 2px 10px;
}

.settings-modules-grid {
  --settings-grid-gap: 10px;
  gap: 2px var(--settings-grid-gap);
  grid-template-columns: repeat(2, minmax(0, calc((100% - var(--settings-grid-gap)) / 2)));
}

.settings-module h3 {
  margin-bottom: 12px;
}

.sensitive-actions-module {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sensitive-action,
.recovery-code-card,
.api-key-warning-panel,
.api-key-credentials-panel,
.backup-recommendation-dav-item,
.restore-progress-current,
.restore-progress-elapsed {
  border-radius: .5rem;
  border-width: 1px;
  border-color: var(--line);
  background: var(--panel);
}

.status-ok,
.device-status-pill.online {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 11%, var(--panel));
}

.local-error,
.api-key-warning-title {
  color: var(--danger);
}

.backup-grid {
  grid-template-columns: 260px 280px minmax(0, 1fr);
}

.backup-operations-sidebar,
.backup-destination-sidebar,
.backup-detail-panel {
  padding: 12px;
}

.backup-recommendations-summary,
.backup-browser-path,
.backup-browser-empty,
.backup-destination-item {
  border-radius: var(--radius-md);
  background: var(--panel-soft);
}

.backup-destination-item:hover {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
}

.totp-code-row {
  background: var(--panel);
}

.totp-code-name {
  color: var(--text);
}

.table {
  border-collapse: separate;
  border-spacing: 0 6px;
}

.table tr {
  overflow: hidden;
}

.table th,
.table td {
  background: transparent;
}

.toast-item,
.dialog-card {
  border-radius: var(--radius-lg);
}

:root[data-theme='dark'] html,
:root[data-theme='dark'] body,
:root[data-theme='dark'] #root {
  background: var(--bg-accent);
}

:root[data-theme='dark'] .app-shell,
:root[data-theme='dark'] .topbar,
:root[data-theme='dark'] .app-side,
:root[data-theme='dark'] .mobile-tabbar,
:root[data-theme='dark'] .auth-card,
:root[data-theme='dark'] .dialog-card,
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .list-panel,
:root[data-theme='dark'] .settings-subcard,
:root[data-theme='dark'] .backup-operations-sidebar,
:root[data-theme='dark'] .backup-destination-sidebar,
:root[data-theme='dark'] .backup-detail-panel,
:root[data-theme='dark'] .backup-recommendation-card,
:root[data-theme='dark'] .backup-destination-item,
:root[data-theme='dark'] .backup-browser-list,
:root[data-theme='dark'] .backup-browser-path,
:root[data-theme='dark'] .totp-code-row,
:root[data-theme='dark'] .mobile-settings-link,
:root[data-theme='dark'] .table tr,
:root[data-theme='dark'] .list-item,
:root[data-theme='dark'] .input,
:root[data-theme='dark'] .search-input,
:root[data-theme='dark'] .create-menu,
:root[data-theme='dark'] .sort-menu,
:root[data-theme='dark'] .nav-layout-menu {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

:root[data-theme='dark'] .app-main,
:root[data-theme='dark'] .app-side,
:root[data-theme='dark'] .mobile-tabbar,
:root[data-theme='dark'] .backup-recommendations-summary,
:root[data-theme='dark'] .backup-browser-path,
:root[data-theme='dark'] .backup-browser-empty,
:root[data-theme='dark'] .backup-recommendation-dav-item {
  background: var(--panel-soft);
}

:root[data-theme='dark'] .list-item:hover,
:root[data-theme='dark'] .side-link:hover,
:root[data-theme='dark'] .side-group-trigger:hover,
:root[data-theme='dark'] .side-sub-link:hover,
:root[data-theme='dark'] .mobile-tab:hover,
:root[data-theme='dark'] .tree-btn:hover {
  background: var(--panel-subtle);
}

:root[data-theme='dark'] .btn-primary {
  color: #08111f;
}

@media (max-width: 1180px) {
  .app-page {
    padding: 0;
  }

  .app-shell {
    border-radius: 0;
    border: 0;
  }

  .topbar {
    height: var(--mobile-topbar-height);
    padding-inline: 12px;
  }

  .mobile-page-title {
    max-width: min(60vw, 260px);
    color: var(--text);
    font-size: 18px;
  }

  .content {
    padding: 8px;
  }

  .mobile-tabbar {
    min-height: var(--mobile-tabbar-height);
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    border-color: var(--line-soft);
  }

  .mobile-tab {
    min-height: 48px;
    border-radius: var(--radius-md);
    color: var(--muted);
  }

  .mobile-tab:hover {
    transform: none;
  }

  .mobile-tab.active {
    box-shadow: none;
  }

  .vault-grid {
    gap: 8px;
  }

  .route-stage,
  .sidebar,
  .list-panel,
  .detail-col,
  .log-list,
  .card.log-detail-panel,
  .domain-rules-table,
  .route-stage-fixed {
    margin-right: 0;
    scrollbar-gutter: auto;
  }

  .route-stage,
  .sidebar {
    padding-right: 0;
  }

  .log-list,
  .domain-rules-table {
    padding-right: 0.125rem;
  }

  .card.log-detail-panel {
    padding-right: 14px;
  }

  .settings-modules-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-detail-sheet {
    background: var(--panel-soft);
  }

  .mobile-sidebar-sheet {
    left: 8px;
    right: 8px;
    border-radius: var(--radius-lg);
    border-color: var(--line);
    background: var(--panel);
    box-shadow: var(--shadow-lg);
  }

  .list-head {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  .list-panel {
    padding: 6px;
    border-radius: var(--radius-md);
  }

  .list-item {
    min-height: 58px;
    padding: 9px 10px;
  }

  .mobile-detail-sheet .card,
  .detail-col .card,
  .import-export-panel,
  .settings-subcard {
    border-radius: var(--radius-md);
  }

  .mobile-detail-sheet .card {
    margin-bottom: 8px;
    padding: 12px;
  }

  .detail-actions .actions .btn,
  .detail-delete-btn,
  .import-export-panel .actions .btn,
  .settings-subcard .actions .btn,
  .section-head .actions .btn {
    min-height: 42px;
  }

  .toast-stack {
    top: 10px;
    left: 10px;
    right: 10px;
    width: auto;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 14px;
  }

  .auth-page {
    padding: 12px;
  }

  .auth-card {
    padding: 18px 16px;
  }

  .standalone-shell {
    max-width: 100%;
  }

  .standalone-brand-logo {
    height: 42px;
    width: 53px;
  }

  .standalone-brand-wordmark {
    width: clamp(176px, 58vw, 244px);
  }

  .field {
    margin-bottom: 9px;
  }

  .input,
  .search-input {
    height: 42px;
    font-size: 15px;
  }

  .settings-modules-grid,
  .import-export-panels,
  .backup-grid,
  .domain-rules-grid {
    gap: 8px;
  }

  .settings-module,
  .backup-operations-sidebar,
  .backup-destination-sidebar,
  .backup-detail-panel {
    padding: 12px;
  }

  .sensitive-actions-module {
    padding: 0;
  }

  .card {
    padding: 12px;
  }

  .backup-detail-panel > .section-head .actions .btn {
    min-height: 38px;
  }
}

/* Final consistency pass for management controls and selected vault rows. */
.toolbar .btn.small,
.toolbar.actions .btn.small,
.actions .btn.small,
.topbar-actions .btn,
.list-icon-btn,
.sort-trigger,
.mobile-fab-trigger,
.website-remove-btn,
.kv-actions .btn.small,
.domain-rule-mini-btn,
.domain-rule-icon-btn,
.admin-pagination .btn,
.invite-row-actions .btn,
.admin-invites-head-actions .btn,
input[type='file'].input::file-selector-button {
  border-radius: var(--radius-md);
}

.mobile-fab-trigger,
.sort-trigger,
.totp-copy-btn,
.input-icon-btn,
.eye-btn,
.search-clear-btn,
.folder-delete-btn,
.folder-sort-btn,
.domain-rule-mini-btn,
.domain-rule-icon-btn {
  border-radius: var(--radius-md);
}

.list-item.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 13%, var(--panel)) 0%, var(--panel) 72%);
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
}

.list-item.active:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 17%, var(--panel)) 0%, var(--panel-subtle) 72%);
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
}

.list-item.active .list-title,
.list-item.active .list-icon-fallback {
  color: var(--primary-strong);
}

.list-item.active .list-sub {
  color: var(--muted-strong);
}

.admin-invites-card {
  display: grid;
  gap: 12px;
}

.admin-invites-head {
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.admin-invites-head h3 {
  margin: 0;
}

.admin-invites-head-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.invite-toolbar {
  display: grid;
  align-items: end;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.invite-create-group {
  display: grid;
  grid-template-columns: minmax(120px, 150px) auto;
  align-items: end;
  justify-content: start;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
}

.invite-hours-field {
  margin: 0;
}

.invite-hours-field > span {
  margin: 0 0 6px;
}

.invite-hours-field .input.small {
  width: 100%;
  min-width: 0;
}

.invite-table {
  border-spacing: 0;
}

.invite-table th {
  height: 42px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 800;
}

.invite-table td {
  height: 48px;
  padding: 10px;
}

.invite-table tr {
  border-radius: 0;
  box-shadow: none;
}

.invite-table tbody tr:hover {
  background: var(--panel-subtle);
}

.invite-table .empty {
  min-height: 72px;
}

.invite-row-actions {
  justify-content: flex-end;
}

.invite-pagination {
  align-items: center;
  justify-content: flex-start;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

:root[data-theme='dark'] .list-item.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, var(--panel)) 0%, var(--panel) 72%);
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line));
  box-shadow:
    inset 3px 0 0 var(--primary),
    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

:root[data-theme='dark'] .list-item.active:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, var(--panel)) 0%, var(--panel-subtle) 72%);
}

:root[data-theme='dark'] .list-item.active .list-title,
:root[data-theme='dark'] .list-item.active .list-icon-fallback {
  color: var(--primary-strong);
}

:root[data-theme='dark'] .list-item.active .list-sub {
  color: var(--muted-strong);
}

:root[data-theme='dark'] .invite-toolbar,
:root[data-theme='dark'] .invite-table th {
  background: var(--panel-soft);
  border-color: var(--line);
}

:root[data-theme='dark'] .invite-table tbody tr:hover {
  background: var(--panel-subtle);
}

@media (max-width: 760px) {
  .admin-invites-head {
    align-items: stretch;
  }

  .admin-invites-head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .admin-invites-head-actions .btn {
    min-height: 38px;
  }

  .invite-create-group {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .invite-create-group .btn {
    width: 100%;
  }

  .invite-table {
    border-spacing: 0 8px;
  }

  .invite-table tr {
    border-radius: var(--radius-md);
  }

  .invite-row-actions {
    justify-content: stretch;
  }

  .invite-row-actions .btn {
    flex: 1 1 auto;
  }

  .invite-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
}

/* Keep management routes mobile-first after the final polish layer overrides. */
@media (max-width: 1180px) {
  .content,
  .route-stage,
  .stack,
  .backup-grid {
    min-width: 0;
    max-width: 100%;
  }

  .route-stage {
    overflow-x: hidden;
  }

  .backup-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 0;
  }

  .backup-operations-sidebar,
  .backup-destination-sidebar,
  .backup-detail-panel {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table thead {
    display: none;
  }

  .table {
    border-spacing: 0;
  }

  .table tr {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  .table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    overflow-wrap: anywhere;
  }

  .table td:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .table td::before {
    display: block;
    content: attr(data-label);
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }
}