/* ── Login ─────────────────────────────────────────────────────────── */
.login-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: var(--space-lg);
}
.login-box {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-2xl);
  width: 100%; max-width: 380px;
}
.login-box h1 { margin: 0 0 var(--space-xs) 0; font-size: var(--font-size-4xl); text-align: center; }
.login-box .tagline { color: var(--color-text-muted); text-align: center; margin: 0 0 var(--space-xl) 0; }
.login-error {
  display: none; color: var(--color-error); font-size: var(--font-size-sm);
  background: var(--color-badge-error-bg); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md); margin-bottom: var(--space-md);
}

/* ── Toast ─────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed; top: var(--space-lg); right: var(--space-lg);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-sm);
}
.toast {
  padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md);
  font-size: var(--font-size-sm); color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); animation: toastIn 0.3s ease;
}
.toast-success { border-left: 3px solid var(--color-success); }
.toast-error   { border-left: 3px solid var(--color-error); }
.toast-info    { border-left: 3px solid var(--color-accent); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Appearance Modal ─────────────────────────────────────────────── */
.modal-inner-appearance { max-width: 560px; max-height: 85vh; overflow-y: auto; }
.modal-appearance-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-xs);
}
.modal-appearance-header h2 { margin: 0; }
.modal-close-btn {
  width: 32px; height: 32px; border: none; background: transparent;
  color: var(--color-text-muted); font-size: 1.4rem; cursor: pointer;
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
}
.modal-close-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.modal-appearance-desc {
  color: var(--color-text-muted); font-size: var(--font-size-sm);
  margin: 0 0 var(--space-lg) 0;
}
.theme-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}
.theme-card {
  border: 2px solid var(--color-border); border-radius: var(--radius-lg);
  cursor: pointer; overflow: hidden; transition: border-color var(--transition-fast);
}
.theme-card:hover { border-color: var(--color-accent); }
.theme-card.is-active { border-color: var(--color-accent); }
.theme-card-preview { padding: var(--space-sm); }
.theme-preview-bar {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.theme-preview-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.theme-preview-line { height: 4px; flex: 1; border-radius: 2px; opacity: 0.7; }
.theme-preview-line-short { flex: 0.4; }
.theme-preview-body {
  padding: var(--space-sm);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  min-height: 48px;
}
.theme-preview-row { display: flex; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.theme-preview-row:last-child { margin-bottom: 0; }
.theme-preview-block { height: 16px; flex: 1; border-radius: 3px; }
.theme-preview-block-wide { flex: 2; }
.theme-card-info {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.theme-card-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.theme-card-badge {
  font-size: var(--font-size-xs); color: var(--color-accent);
  background: var(--color-accent-subtle); padding: 2px 8px;
  border-radius: var(--radius-pill); font-weight: var(--font-weight-semi);
}
.theme-actions-bar {
  display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-md);
}

/* ── Subtab panels ───────────────────────────────────────────────── */
.home-subtab-panel { display: none; }
.home-subtab-panel.is-active { display: block; }

/* ── Header overrides ─────────────────────────────────────────────── */
.app-header .header-right .header-user-name {
  color: var(--color-text-muted);
}

/* Remove header border in subpage layout -- tabs provide their own separator */
.subpage-fixed-header .app-header {
  border-bottom: none;
}

/* Neutralise procurement-style.css tab overrides for non-Shelly themes */
:root:not([data-theme="shelly"]) .main-tabs button {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  outline: none;
}
:root:not([data-theme="shelly"]) .main-tabs button.is-active {
  border-bottom-color: var(--color-accent) !important;
}
:root:not([data-theme="shelly"]) .main-tabs button::before {
  display: none !important;
}

/* Shelly theme header/tab overrides are handled by procurement-style.css */

/* ── Full-width layout ───────────────────────────────────────────── */
.subpage-fixed-header {
  padding-left: 0;
  padding-right: 0;
}
.subpage-fixed-header .main-tabs,
.subpage-fixed-header .system-subtabs {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.subpage-scroll-content {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

/* ── Products Table ───────────────────────────────────────────────── */
.components-table-wrap {
  margin-top: var(--space-sm);
}
.components-table tbody tr { cursor: pointer; transition: background var(--transition-fast); }

/* ── Filter Row ───────────────────────────────────────────────────── */
.filter-row td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-border); }
.filter-cell-input,
.filter-cell-select {
  width: 100%; padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-text);
  font-size: var(--font-size-xs); margin: 0;
}

/* ── Sort indicators ──────────────────────────────────────────────── */
.col-sort {
  display: inline-flex; flex-direction: column; margin-left: var(--space-xs);
  vertical-align: middle; gap: 1px; opacity: 0.3; cursor: pointer;
}
.col-sort.sort-asc { opacity: 1; }
.col-sort.sort-desc { opacity: 1; }
.col-sort.sort-asc .sort-arrow-down { opacity: 0.2; }
.col-sort.sort-desc .sort-arrow-up { opacity: 0.2; }

/* ── Column resize handles ──────────────────────────────────────── */
.components-table .col-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; }
.components-table .col-resize:hover { background: var(--color-accent); opacity: 0.2; }
.components-table .col-resize::after { content: ''; position: absolute; right: 3px; top: 0; bottom: 0; width: 2px; background: var(--color-border); }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
}
.badge-success { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); }
.badge-info    { background: var(--color-badge-info-bg); color: var(--color-badge-info-text); }
.badge-warning { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); }
.badge-error   { background: var(--color-badge-error-bg); color: var(--color-badge-error-text); }
.badge-purple  { background: var(--color-badge-purple-bg); color: var(--color-badge-purple-text); }
.badge-muted   { background: var(--color-surface-hover, var(--color-surface)); color: var(--color-text-muted); }

/* ── Floating Dialog Overrides (Projects-specific) ────────────────── */
.floating-dialog .components-table-wrap {
  flex: 1; min-height: 0;
  overflow-y: auto;
  max-height: none !important;
}
.floating-dialog .confluence-toolbar,
.floating-dialog .import-progress,
.floating-dialog .import-results {
  flex-shrink: 0;
}

/* ── Import Source Dropdown ───────────────────────────────────────── */
.import-source-dropdown {
  align-self: flex-start;
  margin-bottom: var(--space-md);
}
.import-source-dropdown .fd-dropdown-toggle {
  min-width: 200px;
}
.import-source-dropdown .fd-dropdown-item {
  padding: var(--space-sm) var(--space-md);
}

/* ── Excel Import Form (inline in overlay) ───────────────────────── */
.import-excel-form-wrap {
  padding: var(--space-md) 0;
  max-width: 380px;
  align-self: flex-start;
  width: 100%;
}
.import-excel-form-wrap label {
  display: block; margin-bottom: var(--space-2xs);
  font-size: var(--font-size-sm); color: var(--color-text-muted);
}
.import-excel-form-wrap input[type="file"],
.import-excel-form-wrap input[type="text"] {
  display: block; width: 100%; margin-bottom: var(--space-md);
}

/* ── Create Project Confluence Section ────────────────────────────── */
.create-project-confluence-section {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* ── Match Progress ───────────────────────────────────────────────── */
.match-bar {
  display: flex; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--color-surface-hover); min-width: 60px;
}
.match-bar-fill { height: 100%; background: var(--color-success); transition: width 0.3s ease; }

/* ── Empty State ──────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: var(--space-3xl) var(--space-lg);
  color: var(--color-text-muted); font-size: var(--font-size-md);
}

/* ── Product Stats ────────────────────────────────────────────────── */
.product-stats {
  display: flex; gap: var(--space-lg); margin-bottom: var(--space-lg); flex-wrap: wrap;
}
.product-stat-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-lg) var(--space-xl);
  min-width: 140px; flex: 1;
}
.product-stat-card .stat-value {
  font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
}
.product-stat-card .stat-label {
  font-size: var(--font-size-sm); color: var(--color-text-muted);
}