/* ==========================================================================
   VAULTLI PREMIUM STYLE SHEETS
   ========================================================================== */

/* Design Tokens & Theme Variables */
:root {
  /* Status Colors (High-Contrast & Distinct Palettes for Dark and Light Themes)
     NOTE: these are just the static fallback values. The Settings > Theme >
     Status Colors panel and js/modules/ui.js's defaultStatusColors/
     applyStatusColors() are the real source of truth at runtime -- keep
     all three in sync so a status never silently falls back to Owned's
     green, and no two statuses ever share a color. [260915] */
  --status-color-owned: #10b981; /* Emerald Green */
  --status-color-owned-bg: rgba(16, 185, 129, 0.18);
  --status-color-sold: #a1a1aa; /* Neutral Gray */
  --status-color-sold-bg: rgba(161, 161, 170, 0.18);
  --status-color-trade: #c084fc; /* Amethyst Purple */
  --status-color-trade-bg: rgba(192, 132, 252, 0.18);
  --status-color-wishlist: #3b82f6; /* Royal Blue */
  --status-color-wishlist-bg: rgba(59, 130, 246, 0.18);
  --status-color-gifted: #f472b6; /* Vibrant Pink / Rose */
  --status-color-gifted-bg: rgba(244, 114, 182, 0.18);
  --status-color-donated: #38bdf8; /* Sky Blue */
  --status-color-donated-bg: rgba(56, 189, 248, 0.18);
  --status-color-disposed: #94a3b8; /* Slate Gray (legacy status) */
  --status-color-disposed-bg: rgba(148, 163, 184, 0.18);
  --status-color-hold: #f59e0b; /* Golden Amber */
  --status-color-hold-bg: rgba(245, 158, 11, 0.18);
  --status-color-sell: #ff5722; /* Coral / Red-Orange */
  --status-color-sell-bg: rgba(255, 87, 34, 0.18);
  --status-color-maybe: #6366f1; /* Deep Indigo */
  --status-color-maybe-bg: rgba(99, 102, 241, 0.18);
  --status-color-consigned: #06b6d4; /* Bright Cyan (virtual/computed status) */
  --status-color-consigned-bg: rgba(6, 182, 212, 0.18);
  --status-color-stolen: #dc2626; /* Alert Red */
  --status-color-stolen-bg: rgba(220, 38, 38, 0.18);
  --status-color-destroyed-scrapped: #44403c; /* Ash / Burnt Stone */
  --status-color-destroyed-scrapped-bg: rgba(68, 64, 60, 0.18);
  --status-color-loaned-out: #0d9488; /* Teal */
  --status-color-loaned-out-bg: rgba(13, 148, 136, 0.18);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Outfit', var(--font-sans);

  /* Color Palette - Dark Slate System */
  --bg-app: #080c14;
  --bg-surface: #101726;
  --bg-surface-elevated: #162035;
  --bg-sidebar: #0b101c;
  
  --border-light: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.12);
  --border-active: rgba(245, 158, 11, 0.3); /* Gold/Amber outline */

  /* Text Colors */
  --text-main: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  /* Accents & Statuses */
  --accent-color: #f59e0b; /* Gold/Amber */
  --accent-color-rgb: 245, 158, 11;
  --accent-hover: #d97706;
  
  --color-owned: #10b981; /* Emerald Green */
  --color-owned-bg: rgba(16, 185, 129, 0.15);
  
  --color-sold: #64748b; /* Cool Gray */
  --color-sold-bg: rgba(100, 116, 139, 0.15);
  
  --color-wishlist: #3b82f6; /* Blue */
  --color-wishlist-bg: rgba(59, 130, 246, 0.15);

  --color-danger: #ef4444; /* Crimson Red */
  --color-danger-hover: #dc2626;
  --color-danger-bg: rgba(239, 68, 68, 0.15);

  /* Layout Constants */
  --sidebar-width: 260px;
  --header-height: 80px;
  --border-radius-lg: 16px;
  --border-radius-md: 10px;
  --border-radius-sm: 6px;
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(245, 158, 11, 0.1);
}

/* ==========================================================================
   LIGHT MODE OVERRIDES (PREMIUM SLATE & HYBRID DARK SIDEBAR DESIGN)
   ========================================================================== */
.theme-light {
  --bg-app: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f8fafc;
  --bg-sidebar: #0b101c;
  
  --border-light: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.15);
  --border-active: rgba(245, 158, 11, 0.5);

  /* Text Colors */
  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  /* Accents & Statuses */
  --accent-color: #d97706; /* slightly darker for better readability on light bg */
  --accent-color-rgb: 217, 119, 6;
  --accent-hover: #b45309;

  --color-owned-bg: rgba(16, 185, 129, 0.12);
  --color-sold-bg: rgba(100, 116, 139, 0.12);
  --color-wishlist-bg: rgba(59, 130, 246, 0.12);
  --color-danger-bg: rgba(239, 68, 68, 0.12);
}

/* Specific class overrides for Light Mode */
.theme-light .topbar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-medium);
}

.theme-light .sidebar {
  background-color: #0b101c;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  
  /* Keep sidebar dark contrast */
  --bg-surface: rgba(255, 255, 255, 0.03);
  --text-main: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-light: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.12);
}

.theme-light .sidebar-header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-medium);
}

.theme-light .sidebar .nav-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
  color: #f1f5f9;
}

.theme-light .sidebar .nav-item.active {
  color: var(--accent-color);
  background-color: rgba(245, 158, 11, 0.08);
}

.theme-light .form-control,
.theme-light .form-select {
  background-color: #ffffff;
  border-color: var(--border-medium);
  color: var(--text-main);
}

.theme-light .form-control::placeholder {
  color: var(--text-muted);
}

.theme-light .form-control:focus,
.theme-light .form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.theme-light .modal-card {
  background-color: #ffffff;
  border-color: var(--border-medium);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.theme-light .chart-container-card {
  background-color: #ffffff;
  border: 1px solid var(--border-light);
}

.theme-light .summary-table th {
  background-color: rgba(15, 23, 42, 0.03);
  color: var(--text-secondary);
}

.theme-light .summary-table tr {
  border-bottom-color: var(--border-light);
}

.theme-light .settings-tab-btn:hover {
  background-color: rgba(15, 23, 42, 0.03);
}

.theme-light .settings-tab-btn.active {
  background-color: rgba(245, 158, 11, 0.08);
}

.theme-light .settings-sidebar-card,
.theme-light .settings-manager-card,
.theme-light .dashboard-table-card,
.theme-light .empty-state-container {
  background-color: #ffffff;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.theme-light .tab-btn:not(.active) {
  background-color: rgba(15, 23, 42, 0.03);
  color: var(--text-secondary);
}

.theme-light .tab-btn:not(.active):hover {
  background-color: rgba(15, 23, 42, 0.06);
}

/* Ensure the sticky dark-slate inventory controls retain high-contrast white text in light mode */
.theme-light .inventory-controls .tab-btn:not(.active) {
  color: #94a3b8;
  background-color: transparent;
}
.theme-light .inventory-controls .tab-btn:not(.active):hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

.theme-light .theme-select-btn {
  background: var(--bg-surface-elevated) !important;
  border-color: var(--border-light) !important;
}

.theme-light .theme-select-btn.active {
  border-color: var(--accent-color) !important;
  background-color: rgba(245, 158, 11, 0.05) !important;
}

/* Badge Contrast Overrides for Light Mode */
.theme-light .badge-category {
  background-color: rgba(15, 23, 42, 0.75);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.theme-light .badge-status-trade {
  background-color: var(--status-color-trade-bg);
  color: #7c3aed;
  border-color: var(--status-color-trade);
}

.theme-light .badge-status-sold {
  background-color: var(--status-color-sold-bg);
  color: var(--text-secondary);
  border-color: var(--status-color-sold);
}

.theme-light .badge-status-maybe {
  background-color: var(--status-color-maybe-bg);
  color: #4f46e5;
  border-color: var(--status-color-maybe);
}

.theme-light .badge-status-consigned {
  background-color: var(--status-color-consigned-bg);
  color: #0891b2;
  border-color: var(--status-color-consigned);
}

.theme-light .badge-status-hold {
  background-color: var(--status-color-hold-bg);
  color: #b45309;
  border-color: var(--status-color-hold);
}

.theme-light .badge-status-sell {
  background-color: var(--status-color-sell-bg);
  color: #c2410c;
  border-color: var(--status-color-sell);
}

.theme-light .badge-status-gifted {
  background-color: var(--status-color-gifted-bg);
  color: #db2777;
  border-color: var(--status-color-gifted);
}

.theme-light .badge-status-donated {
  background-color: var(--status-color-donated-bg);
  color: #0284c7;
  border-color: var(--status-color-donated);
}

.theme-light .badge-status-disposed {
  background-color: var(--status-color-disposed-bg);
  color: #475569;
  border-color: var(--status-color-disposed);
}

.theme-light .badge-status-stolen {
  background-color: var(--status-color-stolen-bg);
  color: #b91c1c;
  border-color: var(--status-color-stolen);
}

.theme-light .badge-status-destroyed-scrapped {
  background-color: var(--status-color-destroyed-scrapped-bg);
  color: #292524;
  border-color: var(--status-color-destroyed-scrapped);
}

.theme-light .badge-status-loaned-out {
  background-color: var(--status-color-loaned-out-bg);
  color: #0f766e;
  border-color: var(--status-color-loaned-out);
}


/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-main);
  overflow: hidden;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-app);
}
::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Typography Defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   APP LAYOUT
   ========================================================================== */

.app-container {
  display: flex;
  width: 100%;
  height: 100dvh;
}

/* Sidebar Styling */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 10;
}

.sidebar-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-light);
  background-color: rgba(11, 16, 28, 0.4);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 24px;
  height: 24px;
  color: var(--accent-color);
}

.logo-img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.95rem;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.theme-light .logo-text {
  color: #0b101c;
}

.logo-tagline {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 2px;
  white-space: nowrap;
}

.sidebar-nav {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
  overflow-y: auto;
}

.nav-section-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 16px 12px 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 12px;
  width: 100%;
  text-align: left;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.nav-item i {
  width: 18px;
  height: 18px;
  transition: var(--transition-smooth);
}

.nav-item:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.03);
}

.nav-item.active {
  color: var(--accent-color);
  background-color: rgba(245, 158, 11, 0.08);
  font-weight: 600;
}

.nav-item.active i {
  color: var(--accent-color);
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
}

.sidebar-category-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sub-item-connector {
  display: inline-block;
}

.nav-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 8px 12px 8px 32px;
  width: 100%;
  text-align: left;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.nav-sub-item:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.03);
}

.nav-sub-item.active {
  color: var(--accent-color);
  background-color: rgba(245, 158, 11, 0.08);
  font-weight: 600;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border-light);
}

.quick-stats-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qs-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qs-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
}

.qs-delta-container {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.qs-delta-container.positive { color: var(--color-owned); }
.qs-delta-container.negative { color: var(--color-danger); }
.qs-delta-icon { width: 12px; height: 12px; }

/* Main Content Area */
.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--bg-app);
}

/* Topbar Header */
.topbar {
  position: relative;
  z-index: 9999;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-light);
  background-color: rgba(11, 16, 28, 0.4);
  backdrop-filter: blur(10px);
  z-index: 5;
  flex-shrink: 0;
}

#view-title {
  font-size: 1.75rem;
  color: var(--text-main);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box-container {
  position: relative;
  width: 280px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-box-container input {
  padding-left: 38px !important;
  /* Clear space for BOTH icon hit targets below (28px each, 8px gap
     between them, 8px from the container's right edge) plus a small
     margin so typed text never sits directly under either icon:
     8 (edge) + 28 (toggle) + 8 (gap) + 28 (clear) = 72px of icon
     footprint, rounded up to 80px. */
  padding-right: 80px !important;
}

#global-search {
  width: 100%;
  padding: 10px 80px 10px 38px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  transition: var(--transition-fast);
  /* On a narrow/mobile viewport, .search-box-container can shrink down to
     a width where even the short "Global Search..." placeholder (or a
     longer typed query) no longer fits before the icon padding above --
     clip it cleanly with an ellipsis instead of letting it run under, or
     get abruptly cut off against, the Advanced Search icon. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clear-search-btn {
  position: absolute;
  /* Sits just left of the Advanced Search toggle (right: 8px, 28px wide,
     see below): 8 + 28 + 8px clearance = 44px, giving each button its
     own independent, non-overlapping hit target instead of the previous
     34px/20px-wide box that left only ~2px between the two buttons. */
  right: 44px !important;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  z-index: 10;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-advanced-search-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  /* Widened from 24px to 28px (and the Clear button moved out to
     right: 44px to match) so each icon has its own comfortable,
     independently-clickable hit target with real clearance between
     them, rather than two adjacent icons whose boxes nearly touched. */
  width: 28px;
  height: 28px;
  z-index: 10;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-fast);
}

.btn-advanced-search-toggle:hover,
.btn-advanced-search-toggle.active {
  color: var(--primary-color, #6366f1);
  background-color: rgba(99, 102, 241, 0.15);
}

.adv-filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--primary-color, #6366f1);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bg-surface);
}

.adv-mode-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.adv-mode-btn.active {
  background: var(--primary-color, #6366f1);
  color: #ffffff;
}

.adv-rule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-app);
  padding: 8px 12px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.adv-rule-field, .adv-rule-operator, .adv-rule-val {
  font-size: 0.85rem;
  height: 36px;
  padding: 4px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--border-radius-sm);
  color: var(--text-main);
}

.adv-rule-field { flex: 2; min-width: 140px; }
.adv-rule-operator { flex: 1.5; min-width: 120px; }
.adv-rule-val { flex: 2.5; min-width: 150px; }

.btn-remove-adv-rule {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition-fast);
}

.btn-remove-adv-rule:hover {
  color: var(--danger-color, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.adv-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary-color, #6366f1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.adv-preset-chip:hover {
  background: var(--primary-color, #6366f1);
  color: #ffffff;
}

.adv-preset-chip .btn-del-preset {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  opacity: 0.7;
}

.clear-search-btn i {
  width: 16px;
  height: 16px;
}

.clear-search-btn:hover {
  color: var(--text-main);
  transition: var(--transition-smooth);
}

#global-search:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

.content-body {
  flex-grow: 1;
  padding: 20px 24px;
  overflow-y: auto;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--border-radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn i,
.btn svg,
button i,
button svg {
  width: 16px;
  height: 16px;
  pointer-events: none !important;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background-color: var(--accent-color);
  color: var(--text-inverse);
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  color: var(--text-main);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--border-medium);
}

.btn-danger {
  background-color: var(--color-danger);
  color: #fff;
}

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

.btn-sync-refresh {
  background-color: var(--warning-color, #f59e0b);
  color: #fff;
  border: 1px solid rgba(245, 158, 11, 0.5);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  animation: pulse-warning 2s infinite;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  cursor: pointer;
}

.btn-sync-refresh:hover {
  background-color: #d97706;
  border-color: #d97706;
  animation: none;
}

@keyframes pulse-warning {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

/* ==========================================================================
   DASHBOARD VIEW
   ========================================================================== */

.app-view {
  display: none;
  animation: fadeIn 0.3s ease;
}

.app-view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Financial Stats Row */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  box-shadow: var(--shadow-premium);
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  transition: var(--transition-smooth);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-medium);
}

.stat-card:hover::before {
  background: var(--accent-color);
}

.stat-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 80px;
  border-radius: var(--border-radius-md);
  flex-shrink: 0;
}

.stat-icon-wrapper i {
  width: 22px;
  height: 22px;
}

/* Icon backgrounds styling */
.stat-icon-wrapper.val {
  background-color: rgba(245, 158, 11, 0.15);
  color: var(--accent-color);
}
.stat-icon-wrapper.cost {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}
.stat-icon-wrapper.unrealized.positive {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--color-owned);
}
.stat-icon-wrapper.unrealized.negative {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}
.stat-icon-wrapper.realized.positive {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--color-owned);
}
.stat-icon-wrapper.realized.negative {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

.stat-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.5vw, 1.6rem);
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.stat-subtext {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Charts Grid Layout */
.charts-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.chart-container-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-container-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
}

.chart-wrapper {
  flex-grow: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
}

/* Summary Portfolio Tables */
.dashboard-table-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-premium);
  margin-bottom: 32px;
}

.card-header {
  margin-bottom: 18px;
}

.card-header h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main);
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.summary-table th {
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  letter-spacing: 0.05em;
}

.summary-table td {
  padding: 14px 16px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.summary-table tr:last-child td {
  border-bottom: none;
}

.summary-table tbody tr:hover td {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.01);
}

/* Highlight Deltas in Tables */
.table-delta {
  font-weight: 600;
}
.table-delta.positive { color: var(--color-owned); }
.table-delta.negative { color: var(--color-danger); }
.table-delta.zero { color: var(--text-muted); }

/* ==========================================================================
   INVENTORY VIEW
   ========================================================================== */

.inventory-controls {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-md);
  padding: 8px 16px;
  box-shadow: var(--shadow-premium);
}

.inventory-controls .tab-btn {
  color: #94a3b8;
}

.inventory-controls .tab-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

.inventory-controls .tab-btn.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
}

.filter-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 1;
  min-width: 0;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.filter-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.tab-btn {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
  flex-shrink: 0;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.03);
}

.tab-btn.active {
  color: var(--text-inverse);
  background-color: var(--text-main);
}

.inventory-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-select {
  padding: 8px 12px;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-sm);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: var(--accent-color);
}

.layout-toggle-group {
  display: flex;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-sm);
  padding: 2px;
}

.layout-btn {
  background: none;
  border: none;
  padding: 6px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.layout-btn i {
  width: 16px;
  height: 16px;
}

.layout-btn:hover {
  color: var(--text-secondary);
}

.layout-btn.active {
  color: var(--accent-color);
  background-color: rgba(245, 158, 11, 0.1);
}

/* Inventory Cards Grid */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Dense Grid View */
.inventory-dense-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.dense-card {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-light);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: var(--transition-fast);
  cursor: pointer;
  position: relative;
}

.dense-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dense-img-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  position: relative;
}

.dense-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dense-info {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dense-field {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dense-field:first-child {
  font-weight: 600;
  color: var(--text-primary);
}

/* Dense Card Status Borders */
.border-status-owned { border-left: 4px solid var(--status-color-owned); }
.border-status-sold { border-left: 4px solid var(--status-color-sold); }
.border-status-trade { border-left: 4px solid var(--status-color-trade); }
.border-status-disposed { border-left: 4px solid var(--status-color-disposed); }
.border-status-wishlist { border-left: 4px solid var(--status-color-wishlist); }
.border-status-transit { border-left: 4px solid #0ea5e9; }
.border-status-consignment { border-left: 4px solid var(--status-color-consigned); }
.border-status-sell { border-left: 4px solid var(--status-color-sell); }
.border-status-hold { border-left: 4px solid var(--status-color-hold); }
.border-status-maybe { border-left: 4px solid var(--status-color-maybe); }
.border-status-stolen { border-left: 4px solid var(--status-color-stolen); }
.border-status-destroyed-scrapped { border-left: 4px solid var(--status-color-destroyed-scrapped); }
.border-status-loaned-out { border-left: 4px solid var(--status-color-loaned-out); }

.gear-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  cursor: pointer;
  position: relative;
}

.gear-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-medium);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6);
}

.card-img-wrapper {
  height: 140px;
  background-color: var(--bg-surface-elevated);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--bg-surface-elevated);
  border-bottom: 1px solid var(--border-light);
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.gear-card:hover .card-img-wrapper img {
  transform: scale(1.04);
}

.card-placeholder-icon {
  width: auto;
  height: 80px;
  color: var(--text-muted);
  opacity: 0.3;
}

.card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
}

.badge-status-owned {
  background-color: var(--status-color-owned-bg);
  color: var(--status-color-owned);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-status-sold {
  background-color: var(--status-color-sold-bg);
  color: var(--status-color-sold);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-status-trade {
  background-color: var(--status-color-trade-bg);
  color: var(--status-color-trade);
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.badge-status-wishlist {
  background-color: var(--status-color-wishlist-bg);
  color: var(--status-color-wishlist);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-status-gifted {
  background-color: var(--status-color-gifted-bg);
  color: var(--status-color-gifted);
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.badge-status-donated {
  background-color: var(--status-color-donated-bg);
  color: var(--status-color-donated);
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.badge-status-disposed {
  background-color: var(--status-color-disposed-bg);
  color: var(--status-color-disposed);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.badge-category {
  background-color: rgba(15, 23, 42, 0.7);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

.card-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-brand {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-color);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
  line-height: 1.25;
}

.card-specs-preview {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spec-badge-micro {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  padding: 2px 6px;
  border-radius: 4px;
}

.card-financials {
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fin-cost-col {
  display: flex;
  flex-direction: column;
}

.fin-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.fin-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.fin-delta-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.fin-delta-val {
  font-size: 0.9rem;
  font-weight: 700;
}

.fin-delta-val.positive { color: var(--color-owned); }
.fin-delta-val.negative { color: var(--color-danger); }
.fin-delta-val.zero { color: var(--text-muted); }

/* Table View Container Styles */
.inventory-table-container {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  /* Was `overflow-x: clip` -- clip has no scrolling mechanism at all, so a
     table wider than the container (any category with a few dynamic
     fields, on an iPad or a narrowed split-screen desktop window) simply
     cut its right-hand columns off with no way to reach them.
     `overflow: auto` on both axes plus a capped max-height turns this
     into a real, independently-scrollable panel (both directions) instead
     -- confirmed by hand with a Playwright reproduction that plain
     `overflow-x: auto` alone (leaving height unconstrained, relying on
     the page's own scroll) makes `position: sticky` on `.inventory-table
     th` below stop sticking to the viewport entirely in every current
     browser: once an ancestor has non-visible overflow, a sticky
     descendant sticks relative to THAT ancestor's own scrollport, and an
     unconstrained-height container never has one to stick within (it
     just grows to fit, so there's nothing to be sticky "against"). Giving
     the container a real max-height with `overflow: auto` gives it an
     actual internal scrollport, which is what makes the sticky header AND
     the sticky left column below both genuinely work together, in
     exchange for the table becoming its own scrolling panel (like a
     spreadsheet) rather than growing arbitrarily tall with the page --
     the same `calc(100vh - <topbar+padding>px)` pattern already used for
     .settings-sidebar-card/.settings-manager-card above. */
  overflow: auto;
  max-height: calc(100vh - 180px);
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-shadow: var(--shadow-premium);
  animation: fadeIn 0.25s ease;
}

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.inventory-table th {
  padding: 14px 20px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8; /* Force dark mode contrast */
  border-bottom: 1px solid var(--border-light);
  letter-spacing: 0.05em;
  background-color: var(--bg-sidebar);
  position: sticky;
  /* 0, not the old 56px -- sticky now sticks relative to
     .inventory-table-container's own internal scrollport (see above), not
     the page/viewport, so there's no longer a fixed topbar height to
     offset for. The old `box-shadow: 0 -24px 0 var(--bg-app)` masking
     trick papered over a gap specific to the page-relative-sticky
     approach and no longer applies here -- overflow:auto on the container
     already clips the header cleanly against its own (rounded) edges. */
  top: 0;
  z-index: 10;
}

.inventory-table td {
  padding: 14px 20px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
}

.inventory-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.015);
  color: var(--text-main);
  cursor: pointer;
}

.inventory-table tr:last-child td {
  border-bottom: none;
}

/* Sticky Identifier Column -- the first column (thumbnail + stacked
   title/artist, already built as one combined cell by
   renderInventoryTable() in ui.js) stays pinned to the left edge as the
   remaining columns scroll underneath it horizontally, so the item stays
   identifiable no matter how far right you've scrolled. `td` has no
   background of its own elsewhere (it shows the container's), so this
   needs an explicit opaque one or horizontally-scrolled content would be
   visible bleeding through underneath it; layering the row-hover tint as
   a background-image over that solid color keeps the hover state
   opaque too, instead of the translucent overlay every other cell uses. */
.inventory-table th:first-child,
.inventory-table td:first-child {
  position: sticky;
  left: 0;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);
}

.inventory-table td:first-child {
  z-index: 2;
  background-color: var(--bg-surface);
}

.inventory-table tr:hover td:first-child {
  background-image: linear-gradient(rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015));
  background-color: var(--bg-surface);
}

/* The top-left corner cell is sticky on BOTH axes at once -- it needs a
   higher z-index than the plain sticky header row (10) and the sticky
   body column (2) so it stays drawn on top of both as the table scrolls
   in either direction, and it keeps the header's own opaque background
   (already set above) rather than the body column's. */
.inventory-table th:first-child {
  z-index: 11;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);
}

/* Responsive Column Tiers -- the sticky anchor column plus the headline
   Cost/Est Value/Category columns (see colExtraClasses in
   renderInventoryTable(), ui.js) always stay visible; every other,
   secondary category-specific field (Serial #, Purchase Date, Location,
   etc.) and the derived Net Delta metric collapse here so an iPad in
   portrait -- or a narrowed split-screen desktop window -- isn't forced
   into wide sideways swiping just to see the anchor + price by default.
   Nothing is deleted: widening past this breakpoint, or scrolling the
   container horizontally above it, still reaches every column. */
@media (max-width: 820px) {
  .inventory-table th.hide-on-tablet,
  .inventory-table td.hide-on-tablet {
    display: none;
  }
}

/* Empty State Styling */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  background-color: var(--bg-surface);
  border: 1px dashed var(--border-medium);
  border-radius: var(--border-radius-lg);
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.empty-icon {
  width: auto;
  height: 80px;
  color: var(--text-muted);
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state-container h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.empty-state-container p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 24px;
  max-width: 320px;
}

/* Helper Utilities */
.hidden { display: none !important; }

/* ================= CSS GRID SPREADSHEET LOCK FOR DESIGNER ================= */
/* Enforce Grid on the Containers across desktop sizes */
@media (min-width: 1025px) {
  /* Layout editor: each field list scrolls inside its own window and keeps its column headers (Tile / Grid / Table for the
     Collection and the Marketplace) pinned at the top, so rows far down the list can still be toggled with the headers in view. */
  #system-fields-builder-container,
  #category-fields-builder-container {
    max-height: 62vh;
    overflow-y: auto;
    overflow-x: auto;
  }
  #system-fields-builder-container .category-fields-builder-header,
  #category-fields-builder-container .category-fields-builder-header {
    position: sticky;
    top: 0;
    z-index: 6;
    background-color: var(--bg-surface, var(--bg-card, #1e293b));
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--border-light);
  }

  #system-fields-builder-container .category-fields-builder-header,
  #system-fields-builder-container .category-field-row {
    display: grid !important;
    grid-template-columns: 50px 3fr 1.5fr 6fr 95px 95px 36px !important;
    gap: 10px !important;
    align-items: center;
    min-width: 900px !important;
  }

  #category-fields-builder-container .category-fields-builder-header,
  #category-fields-builder-container .category-field-row {
    display: grid !important;
    grid-template-columns: 50px 3fr 1.5fr 3fr 1.5fr 95px 95px 36px !important;
    gap: 10px !important;
    align-items: center;
    min-width: 1100px !important;
  }

  #subgroups-designer-container .category-fields-builder-header,
  #subgroups-designer-container .subgroup-design-row {
    display: grid !important;
    grid-template-columns: 72px 1.5fr 3.5fr 36px !important;
    gap: 12px !important;
    align-items: center;
    min-width: 800px !important;
  }
}

/* Reset width/flex on grid children so they fill the grid track */
.category-field-row > div, 
.category-fields-builder-header > div,
.subgroup-design-row > div,
.subgroup-design-row > input {
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.category-field-row > textarea {
  width: 100% !important;
  min-width: 0 !important;
}

/* ==========================================================================
   IMPORT / EXPORT VIEW
   ========================================================================== */

.data-mgmt-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.data-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-premium);
}

.data-card-icon {
  width: auto;
  height: 80px;
  border-radius: var(--border-radius-md);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-card-icon i {
  width: 24px;
  height: 24px;
}

.data-card.danger .data-card-icon {
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.data-card.danger {
  border-color: rgba(239, 68, 68, 0.2);
}

.data-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.data-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.data-card-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  flex-wrap: wrap;
}

.file-input-label {
  cursor: pointer;
  display: inline-flex;
}

.import-status {
  font-size: 0.82rem;
  margin-top: 8px;
  color: var(--color-owned);
}

.mapping-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.mapping-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  align-items: center;
}

.mapping-row label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ==========================================================================
   MODALS & DIALOGS
   ========================================================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(8, 12, 20, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

.modal-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8);
  max-height: 90vh;
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-card.modal-lg {
  max-width: 800px;
}

.modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.01);
}

.modal-header h2 {
  font-size: 1.35rem;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  transition: var(--transition-smooth);
}

.close-btn:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.05);
}

#gear-form, #insurance-report-form {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex-grow: 1;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.01);
}

.modal-footer-right-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

/* Form Styling inside Modals */
.form-section-header {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-color);
  background: rgba(var(--accent-color-rgb), 0.2);
  border-left: 3px solid var(--accent-color);
  letter-spacing: 0.05em;
  margin: 12px 0 8px 0;
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
}

.form-section-header:first-of-type {
  margin-top: 0;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 6px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.col-12 { width: 100%; }
.col-8 { width: calc(66.66% - 5.33px); }
.col-6 { width: calc(50% - 8px); }
.col-4 { width: calc(33.33% - 10.66px); }
.col-3 { width: calc(25% - 12px); }

label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.required-field::after {
  content: ' *';
  color: var(--color-danger);
}

.form-control, .form-select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  transition: var(--transition-smooth);
}

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

.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.12);
}

select.form-select[size] {
  padding: 4px !important;
  overflow-y: auto !important;
}

select.form-select[size="2"] { height: 70px !important; }
select.form-select[size="3"] { height: 100px !important; }
select.form-select[size="4"] { height: 130px !important; }
select.form-select[size="5"] { height: 160px !important; }
select.form-select[size="6"] { height: 190px !important; }

select.form-select[size] option {
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 2px;
}

select.form-select[size] option:checked {
  background-color: rgba(245, 158, 11, 0.2);
  color: var(--accent-color);
}

/* Dynamic Filter Fields styling to prevent running off the right side */
#report-filter-dynamic-options .form-select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-color);
  cursor: pointer;
}

.form-checkbox label {
  cursor: pointer;
}

.flex-row-checkboxes {
  display: flex;
  gap: 24px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.checkbox-inline-adjust {
  display: flex;
  align-items: flex-end;
  padding-bottom: 12px;
}

.text-area-large {
  min-height: 100px;
  resize: vertical;
  overflow-y: hidden;
}

.file-input-label-small {
  padding: 8px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
}

.image-preview-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.2);
}

.image-preview-row span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.image-preview-row img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  border-radius: 4px;
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--accent-color);
  border-radius: var(--border-radius-md);
  padding: 12px 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 500;
  z-index: 99999;
  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 12px;
}

@keyframes slideIn {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.toast.hidden {
  display: none !important;
}

/* ==========================================================================
   DROPDOWN SETTINGS VIEW
   ========================================================================== */

.settings-container {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
}

.settings-sidebar-card, .settings-manager-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.settings-sidebar-card h3, .settings-manager-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.settings-sidebar-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.settings-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.settings-count-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

.settings-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  background-color: rgba(0, 0, 0, 0.15);
}

.settings-option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  transition: var(--transition-smooth);
}

.settings-option-row:hover {
  border-color: var(--border-medium);
  background-color: rgba(255, 255, 255, 0.02);
}

.settings-option-row.dragging {
  opacity: 0.4;
  border: 1px dashed var(--accent-color);
}

.settings-option-row.drag-over {
  border-color: var(--accent-color);
  background-color: rgba(212, 175, 55, 0.05);
  transform: translateY(2px);
}

.settings-option-row span {
  font-size: 0.88rem;
  color: var(--text-main);
  font-weight: 500;
}

.btn-delete-option,
.btn-edit-option,
.btn-save-option,
.btn-cancel-option {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.btn-delete-option:hover {
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.btn-edit-option:hover {
  color: var(--accent-color);
  background-color: rgba(212, 175, 55, 0.1);
}

.btn-save-option:hover {
  color: var(--color-success);
  background-color: rgba(46, 204, 113, 0.1);
}

.btn-cancel-option:hover {
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.btn-delete-option i,
.btn-edit-option i,
.btn-save-option i,
.btn-cancel-option i {
  width: 14px;
  height: 14px;
}

.option-add-form {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

/* Responsive Overrides */
@media (max-width: 1400px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .stat-card {
    padding: 16px;
    gap: 12px;
  }
}

@media (max-width: 1300px) {
  .topbar-right button span {
    display: none !important;
  }
  .topbar-right button:not(.clear-search-btn):not(.btn-sync-refresh) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-card {
    padding: 16px;
    gap: 12px;
  }
  .charts-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1025px) {
  .app-container {
    flex-direction: column;
  }
  .sidebar {
    width: 100vw;
    height: calc(60px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .sidebar-header {
    height: auto;
    padding: 0;
    border-bottom: none;
    flex-shrink: 0;
  }
  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 0 0 16px;
    height: 100%;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    border: none;
    -webkit-overflow-scrolling: touch;
  }
  #sidebar-collections-container {
    display: flex;
    flex-direction: row !important;
    gap: 8px;
    align-items: center;
  }
  .sidebar-category-wrapper {
    display: flex;
    flex-direction: row !important;
    width: auto !important;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .sub-item-connector {
    display: none !important;
  }
  .nav-item {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 12px;
  }
  .nav-sub-item {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    width: auto !important;
    flex-shrink: 0;
  }
  .nav-section-title {
    display: none;
  }
  .sidebar-footer {
    display: none;
  }
  .main-content {
    height: calc(100vh - 60px - env(safe-area-inset-top, 0px)) !important;
    height: calc(100dvh - 60px - env(safe-area-inset-top, 0px)) !important;
  }
  .topbar {
    padding: 0 20px;
  }
  .search-box-container {
    width: 180px;
  }
  .content-body {
    padding: 20px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .data-mgmt-container, .settings-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SETTINGS TAB NAVIGATION & CATEGORIES MANAGER
   ========================================================================== */

.settings-tabs-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
  position: sticky;
  top: 0;
  background-color: var(--bg-surface);
  z-index: 50;
}

.settings-tab-btn {
  background: none;
  border: none;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--border-radius-md);
  transition: var(--transition-smooth);
}

.settings-tab-btn:hover {
  color: var(--text-secondary);
  background-color: rgba(255, 255, 255, 0.02);
}

.settings-tab-btn.active {
  color: var(--accent-color);
  background-color: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Category Sidebar List */
.category-settings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.category-settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.category-settings-item:hover {
  border-color: var(--border-medium);
  background-color: rgba(255, 255, 255, 0.02);
}

.category-settings-item.active {
  border-color: var(--accent-color);
  background-color: rgba(245, 158, 11, 0.03);
  min-width: 0; /* allows text truncation */
}

/* Disable pointer events on row children during drag to prevent dragover bubbling interference */
.is-dragging .category-settings-item * {
  pointer-events: none;
}

.category-settings-item.dragging {
  opacity: 0.4;
  border: 1px dashed var(--accent-color);
}

.category-settings-item.drag-over {
  border-color: var(--accent-color);
  background-color: rgba(245, 158, 11, 0.05);
  transform: translateY(2px);
}

.category-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: var(--text-main);
  font-size: 0.88rem;
}

.category-item-info i {
  color: var(--accent-color);
  width: 16px;
  height: 16px;
}

.category-badge-type {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.04);
  color: inherit;
  border: 1px solid var(--border-light);
}

/* Icon Picker Grid */
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.icon-picker-btn {
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  color: var(--text-secondary);
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.icon-picker-btn:hover {
  border-color: var(--border-medium);
  color: var(--text-main);
}

.icon-picker-btn.active {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: var(--accent-color);
  color: var(--accent-color);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

.icon-picker-btn i {
  width: 18px;
  height: 18px;
}

/* Custom Field Builder rows */
.category-fields-builder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  background-color: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.category-fields-builder-header, .system-fields-builder-header {
  display: flex;
  gap: 10px;
  padding: 0 10px 4px 10px;
  border: 1px solid transparent;
  align-items: flex-end;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
}

.theme-light .category-fields-builder-header, 
.theme-light .system-fields-builder-header {
  color: var(--text-main);
}

.category-field-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background-color: transparent;
  margin-bottom: 12px;
}

.category-field-row .field-input-label {
  flex: 2;
}

.category-field-row .field-select-type {
  flex: 1.5;
}

.category-field-row .field-input-options {
  flex: 3;
}

.btn-remove-field {
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.btn-remove-field:hover {
  background-color: var(--color-danger-dark);
}

.btn-remove-field i {
  width: 16px;
  height: 16px;
}

/* Category Details Card */
.category-fields-list-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.category-field-preview-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background-color: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
}

.field-preview-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

.field-preview-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Disable pointer events on row children during drag to prevent dragover bubbling interference */
.is-dragging .category-field-row * {
  pointer-events: none;
}

/* Drag and Drop visual styles for category fields */
.category-field-row.dragging {
  opacity: 0.4;
  border: 1px dashed var(--accent-color) !important;
  background-color: rgba(255, 255, 255, 0.02);
}

.category-field-row.drag-over {
  border: 1px solid var(--accent-color) !important;
  background-color: rgba(245, 158, 11, 0.05);
  transform: translateY(2px);
}

.category-field-row .drag-handle {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  cursor: grab;
  transition: var(--transition-smooth);
}

.category-field-row .drag-handle:hover {
  color: var(--text-secondary);
}

.category-field-row .drag-handle:active {
  cursor: grabbing;
}

.category-field-row input:disabled,
.category-field-row select:disabled {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  opacity: 0.65;
  cursor: not-allowed;
  border-color: var(--border-light);
}

.theme-light .category-field-row input:disabled,
.theme-light .category-field-row select:disabled {
  background-color: #ffffff;
  color: #333333;
  opacity: 0.65;
  border-color: #cccccc;
}

.field-locked-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ==========================================================================
   12. MULTI-PHOTO GALLERY & DIRECT UPLOADING
   ========================================================================== */
.multi-image-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  border: 2px dashed transparent;
  padding: 4px;
  transition: all 0.2s ease;
}

.multi-image-container.drag-over {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  border-radius: var(--border-radius-md);
}

.multi-image-gallery {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* [260922c, updated 260922f] Moved the Public toggle and the action icons
   off the photo and into a dedicated banner below it (Primary stayed on
   the image -- see 260922e -- since it never competed with anything else
   for space). Previously these all overlaid the image (some absolute-
   positioned corners, some a hover-only bar across the top), which caused
   a chain of small collisions as more controls were added -- see the now-
   removed 260920/260922/260922b fixes. Current banner layout: row 1 is
   Storage badge + Public toggle together, row 2 is the always-visible
   move/delete icons, fully clear of everything else. */
/* [260922f] Widened from 100px to 120px -- the Storage badge
   (Cloud/Offline/Linked) and the Public toggle share one banner row, and
   at 100px wide (92px usable after padding) the longest label ("Offline")
   left almost no breathing room next to the toggle. Widening the whole
   card gives that row real extra space instead of continuing to shave
   padding down. The image itself stays 100px tall (unchanged), so
   thumbnails are now a slightly wider rectangle instead of a perfect
   square -- a fine trade-off for a preview thumbnail. */
.multi-image-card {
  position: relative;
  width: 120px;
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: rgba(0, 0, 0, 0.2);
}

/* [260922e] Jim's call: Primary is a lone badge that never competed for
   space with anything else, so it goes back to overlaying the image
   (top-left) instead of taking up banner room. Storage (Cloud/Offline/
   Linked) and the Public toggle now share one snug row -- tighter padding
   below so the two fit together without the icons row needing to shrink.
   The move/delete icons keep their own dedicated row underneath, fully
   clear of everything else. */
/* [260922g] Background switched from a near-black rgba(16,23,38,0.85) to
   the same light-orange wash already used for section-header banners
   elsewhere (.form-section-header / .form-subgroup-header): a 20%-alpha
   tint of --accent-color-rgb. Same token, so it's already theme-aware
   (pale orange over the light theme's white surface, warm amber-tinted
   dark row over the dark theme's surface, matching how those other
   banners already look). Icon/text colors below were darkened to match --
   white text/icons that worked on the old near-black background would
   have poor contrast against this lighter one. */
/* [260922h] The single rgba(accent,0.2) background was compositing on top
   of .multi-image-card's own rgba(0,0,0,0.2) background sitting directly
   behind it -- that extra black layer was muddying the amber tint toward
   tan/brown instead of the cleaner orange .form-section-header shows
   (which sits directly on the modal's plain --bg-surface, with no black
   layer in between). Fixed by giving this element its own opaque
   --bg-surface base first, then layering the same amber tint on top of
   THAT within this element's own background -- so the result always
   matches the section-header look regardless of what's behind the card. */
.card-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 4px;
  background-color: var(--bg-surface);
  background-image: linear-gradient(rgba(var(--accent-color-rgb), 0.2), rgba(var(--accent-color-rgb), 0.2));
  flex-shrink: 0;
}

.card-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 14px;
}

.card-banner-row-actions {
  justify-content: center;
}

.storage-badge {
  padding: 1px 4px;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.badge-storage-cloud {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.badge-storage-offline {
  background: #f59e0b;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.badge-storage-linked {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.multi-image-card img {
  width: 100%;
  height: 100px;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
}

.pdf-thumbnail {
  width: 100%;
  height: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.2));
  color: #ef4444;
  padding: 8px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
}

.pdf-thumbnail i {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}

/* [260923b] Was single-line with a hard ellipsis cutoff -- now that
   getFilenameFromUrl() shows the real filename instead of a storage ID,
   longer names need more room to actually be readable. Wraps up to 2
   lines (clamped, with its own ellipsis if it still overflows) instead of
   truncating after the first few characters. A `title` attribute on the
   element (see ui.js) covers names still too long for 2 lines, though
   that only helps on hover -- mouse/desktop, not touch. */
.pdf-name {
  font-size: 0.65rem;
  color: var(--text-normal);
  font-weight: 500;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

.multi-image-card .card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-img-action {
  background: none;
  border: none;
  color: #101726;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

.btn-img-action:hover:not(:disabled) {
  color: #000;
}

.btn-img-action.btn-img-delete:hover {
  color: var(--color-danger);
}

.btn-img-action:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-img-action i {
  width: 14px;
  height: 14px;
}

.primary-photo-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--accent-color);
  color: #101726;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Marketplace Audit Finding B: per-photo public-listing opt-in checkbox, always
   visible so the choice is never hidden from the user. */
/* [260922g] color changed from #ffffff -- white text is illegible on the
   new light-orange banner background. Uses the same dark tone as
   .btn-img-action and .primary-photo-badge's text, so everything sitting
   on top of the accent-tinted banner/badge reads consistently dark. */
.img-public-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #101726;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
}

.img-public-toggle input {
  width: 10px;
  height: 10px;
  margin: 0;
  cursor: pointer;
}

/* [260922c] height changed to min-height: the flex row's default
   align-items:stretch now grows this tile to match the taller photo cards
   (which gained a banner below the image), instead of it staying pinned
   short and mismatched next to them. */
.multi-image-upload-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  min-height: 100px;
  border: 2px dashed var(--border-light);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.01);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  gap: 6px;
}

.multi-image-upload-card:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: rgba(245, 158, 11, 0.03);
}

.multi-image-upload-card i {
  width: 24px;
  height: 24px;
}

.multi-image-upload-card span {
  font-size: 0.72rem;
  font-weight: 500;
}

/* Direct grid uploads overlay & zones */
.card-img-wrapper {
  position: relative;
}

.grid-card-upload-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(16, 23, 38, 0.85);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.gear-card:hover .grid-card-upload-btn {
  opacity: 1;
}

.grid-card-upload-btn:hover {
  background: var(--accent-color);
  color: #101726;
  border-color: var(--accent-color);
}

.grid-card-upload-btn i {
  width: 16px;
  height: 16px;
}

.card-image-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  gap: 8px;
}

.card-img-wrapper:hover .card-image-placeholder-inner {
  background: rgba(245, 158, 11, 0.03);
  color: var(--accent-color);
}

.card-image-placeholder-inner.badge-status-owned { color: var(--status-color-owned); background: rgba(16, 185, 129, 0.05); }
.card-image-placeholder-inner.badge-status-sold { color: var(--status-color-sold); background: rgba(255, 255, 255, 0.05); }
.card-image-placeholder-inner.badge-status-trade { color: var(--status-color-trade); background: rgba(168, 85, 247, 0.05); }
.card-image-placeholder-inner.badge-status-wishlist { color: var(--status-color-wishlist); background: rgba(236, 72, 153, 0.05); }
.card-image-placeholder-inner.badge-status-disposed { color: var(--status-color-disposed); background: rgba(239, 68, 68, 0.05); }
.card-image-placeholder-inner.badge-status-transit { color: var(--status-color-transit); background: rgba(59, 130, 246, 0.05); }
.card-image-placeholder-inner.badge-status-consigned { color: var(--status-color-consigned); background: rgba(245, 158, 11, 0.05); }

.placeholder-upload-text {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Custom Status Badges */
.badge-status-hold {
  background-color: var(--status-color-hold-bg);
  color: var(--status-color-hold);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-status-sell {
  background-color: var(--status-color-sell-bg);
  color: var(--status-color-sell);
  border: 1px solid rgba(255, 87, 34, 0.3);
}

.badge-status-maybe {
  background-color: var(--status-color-maybe-bg);
  color: var(--status-color-maybe);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.badge-status-consigned {
  background-color: var(--status-color-consigned-bg);
  color: var(--status-color-consigned);
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge-status-stolen {
  background-color: var(--status-color-stolen-bg);
  color: var(--status-color-stolen);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.badge-status-destroyed-scrapped {
  background-color: var(--status-color-destroyed-scrapped-bg);
  color: var(--status-color-destroyed-scrapped);
  border: 1px solid rgba(68, 64, 60, 0.3);
}

.badge-status-loaned-out {
  background-color: var(--status-color-loaned-out-bg);
  color: var(--status-color-loaned-out);
  border: 1px solid rgba(13, 148, 136, 0.3);
}

/* Subgroup Card Styling inside Modal Forms */
.form-subgroup-card {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-lg);
  padding: 6px 10px;
  margin-bottom: 8px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

.form-subgroup-card:last-child {
  margin-bottom: 4px;
}

.form-subgroup-header {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-color);
  background: rgba(var(--accent-color-rgb), 0.2);
  border-left: 3px solid var(--accent-color);
  padding: 6px 10px;
  margin-bottom: 12px;
  margin-top: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0 4px 4px 0;
}

/* Category Schema Sub-groups builder UI */
.subgroups-designer-container {
  /* Styled by .form-edit-section */
}

.subgroup-design-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background-color: transparent;
  margin-bottom: 12px;
}

.subgroup-design-row:last-child {
  margin-bottom: 0;
}

.category-field-row .field-select-subgroup {
  flex: 1.8;
}

.field-reorder-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.field-reorder-buttons button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.field-reorder-buttons button:hover {
  color: var(--accent-color);
}

.form-edit-section {
  margin-bottom: 20px;
  padding: 8px 12px 12px 12px;
  background: var(--bg-surface);
  border-radius: var(--border-radius-md);
  border: 1px solid #1e3a8a;
  color: #ffffff;
}

.section-header-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff !important;
  margin-bottom: 4px;
  margin-top: 0;
}

.theme-light .section-header-label {
  color: var(--text-main) !important;
}

.form-edit-section label {
  color: #ffffff !important;
}

.theme-light .form-edit-section {
  background: #e2e8f0; /* Lighter grey */
  border: 1px solid var(--text-secondary); /* Dark grey border */
  color: var(--text-main);
}

.theme-light .form-edit-section label,
.theme-light .form-edit-section p {
  color: var(--text-main) !important;
}

.theme-light .category-field-row,
.theme-light .subgroup-design-row {
  border-color: var(--border-medium);
}

.field-reorder-buttons button i {
  width: 14px;
  height: 14px;
}

.field-reorder-buttons button:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.subgroup-reorder-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.subgroup-reorder-btn:hover {
  color: var(--accent-color);
}

.subgroup-reorder-btn i {
  width: 16px;
  height: 16px;
}

.subgroup-reorder-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

/* Auto-Fill Specs Action Button (Prominent in Modal Header) */
.btn-autofill-action {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--accent-color) !important;
  -webkit-text-fill-color: var(--accent-color) !important;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-smooth);
  font-family: var(--font-display);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

@media (hover: hover) {
  .btn-autofill-action:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transform: translateY(-1px);
  }
}

.btn-autofill-action:active {
  transform: translateY(0);
}

/* Scan Barcode Action Button (Prominent in Modal Header) */
.btn-scan-action {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-smooth);
  font-family: var(--font-display);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

@media (hover: hover) {
  .btn-scan-action:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transform: translateY(-1px);
  }
}

.btn-scan-action:active {
  transform: translateY(0);
}

.btn-autofill-action.loading {
  opacity: 0.7;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  transform: none;
  box-shadow: none;
}

.btn-autofill-action.loading i {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Autofill Checklist Review Modal styling */
.autofill-review-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  margin-bottom: 8px;
  transition: border-color 0.2s;
}

.autofill-review-row:hover {
  border-color: var(--border-medium);
}

.autofill-review-row.unchecked {
  opacity: 0.55;
  background-color: rgba(0, 0, 0, 0.08);
}

.autofill-review-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.autofill-review-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.autofill-review-values {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.autofill-proposed-val {
  color: var(--color-success);
  font-weight: 600;
  white-space: pre-wrap;
}

.autofill-review-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-color);
}

/* ==========================================================================
   HELP & USER GUIDE MODAL STYLING
   ========================================================================== */

.help-guide-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 480px;
}

.help-guide-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  text-decoration: none;
  text-align: left;
  transition: var(--transition-smooth);
}

.help-guide-card:hover {
  border-color: var(--border-active);
  background: rgba(245, 158, 11, 0.06);
}

.help-guide-card > i:first-child {
  width: 24px;
  height: 24px;
  color: var(--accent-color);
  flex-shrink: 0;
}

.help-guide-card-text {
  flex-grow: 1;
}

.help-guide-card-text h4 {
  margin: 0 0 4px 0;
  font-size: 0.95rem;
  color: var(--text-main);
  font-weight: 600;
}

.help-guide-card-text p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.help-guide-card-arrow {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ==========================================================================
   AUTHENTICATION OVERLAY STYLING
   ========================================================================== */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(8, 12, 20, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.auth-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.9);
  width: 100%;
  max-width: 420px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.auth-header {
  text-align: center;
}

.auth-logo {
  width: auto;
  height: 80px;
  margin-bottom: 12px;
  object-fit: contain;
}

.auth-header h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.auth-header p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.auth-section {
  display: flex;
  flex-direction: column;
}

.auth-toggle-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 16px;
}

.auth-toggle-text a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
}

.auth-toggle-text a:hover {
  text-decoration: underline;
}

.auth-footer-settings {
  text-align: center;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
  margin-top: 8px;
}

.auth-footer-settings a {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.auth-footer-settings a:hover {
  color: var(--text-secondary);
}

/* Visibility checkbox styling for custom columns and tiles */
.category-field-row .field-visibility-chk {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  width: 60px;
  justify-content: center;
  flex-shrink: 0;
}

.category-field-row .field-visibility-chk input {
  cursor: pointer;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent-color);
}

/* Style for hidden categories in settings list */
.category-settings-item.category-hidden-state {
  opacity: 0.55;
  background: rgba(255, 255, 255, 0.01) !important;
  border-color: var(--border-light) !important;
}

/* Style for restore categories checkbox rows */
.restore-checkbox-row {
  transition: background-color 0.2s ease;
}
.restore-checkbox-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Image Hover Zoom Preview Popup Style */
#image-hover-preview {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 8px;
  max-width: 360px;
  max-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
  opacity: 0;
}

#image-hover-preview.active {
  opacity: 1;
}

#image-hover-preview img {
  max-width: 100%;
  max-height: 344px;
  object-fit: contain;
  border-radius: var(--border-radius-md);
  /* Explicit safeguard (rather than relying on the browser default): this
     popup always renders whatever is already in the small grid/list
     thumbnail's own img.src (see initHoverPreviews() in ui.js -- it's a
     straight copy, not a separately-fetched larger asset). Now that
     autofill's localized artwork is a real 800x800 source image instead of
     an ad-hoc remote CDN size, there's a genuinely crisp image to scale
     from -- "auto" lets the browser pick its normal (bilinear/high-quality)
     scaling algorithm rather than something like "pixelated" ever
     overriding it by accident. */
  image-rendering: auto;
}

/* Settings Manager Sub-tabs */
.manager-sub-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 20px;
  padding-bottom: 4px;
}

.manager-sub-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  border-bottom: 2px solid transparent;
  transition: var(--transition-smooth);
}

.manager-sub-tab:hover {
  color: var(--text-secondary);
}

.manager-sub-tab.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

.theme-light .manager-sub-tab.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

/* ==========================================================================
   ADVANCED MOBILE & TABLET RESPONSIVENESS OVERRIDES
   ========================================================================== */

/* Tablet & Mobile Layout Enhancements (<= 1025px) */
@media (max-width: 1025px) {
  /* Hide the desktop hover preview popups to prevent screen clutter on touch devices */
  #image-hover-preview {
    display: none !important;
  }

  /* Reduce full logo in horizontal sidebar header to just the icon on tablet/mobile */
  .sidebar-header .logo-text-stack {
    display: none !important;
  }
  .sidebar-header .logo-img {
    width: 36px !important;
    height: 36px !important;
  }

  /* Collapse action button text to icons inside the top bar on tablet/mobile */
  .topbar-right button span {
    display: none !important;
  }
  .topbar-right button:not(.clear-search-btn):not(.btn-sync-refresh) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  /* Stack filter bar and sort options vertically to prevent horizontal truncation/overlapping */
  .inventory-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .inventory-actions {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .inventory-actions select {
    flex-grow: 1 !important;
  }

  /* Hide the complex multi-column headers in Form Designer on mobile/tablet */
  .category-fields-builder-header, .system-fields-builder-header {
    display: none !important;
  }

  /* Custom field row editor designer: Force wrapping and full width on mobile/tablet */
  .category-field-row, .subgroup-design-row {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .category-field-row > div:not(.drag-handle):not(.mobile-stack-col), 
  .category-field-row > select, 
  .category-field-row > textarea {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
  }
  .mobile-stack-col {
    flex: 1 1 40% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }
  .mobile-only-label {
    display: inline-block !important;
  }
  .category-field-row .drag-handle {
    flex: 0 0 auto !important;
    width: auto !important;
    align-self: center;
  }
  .category-field-row .btn-remove-field {
    flex: 0 0 auto !important;
    align-self: center;
    margin-top: 8px;
  }
  
  /* Subgroup designer wrapping */
  .subgroup-design-row > div:not(:first-child),
  .subgroup-design-row > input {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  
  .subgroup-cond-fields {
    flex-wrap: wrap !important;
    flex: 1 1 100% !important;
  }
  .subgroup-cond-fields > select,
  .subgroup-cond-fields > div {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  .subgroup-cond-fields > span {
    display: none !important;
  }
}

/* Tablet & Mobile Layout Enhancements (<= 768px) */
@media (max-width: 768px) {
  /* Fix iOS Safari Auto-Zoom bug by forcing 16px font size on inputs */
  .form-control, .form-select, input, textarea {
    font-size: 16px !important;
  }
  
  /* Apple HIG: Ensure buttons are large enough for touch targets */
  .btn {
    min-height: 44px !important;
    padding: 8px 16px !important;
  }

  /* Prevent Modal cards from stretching right to the edge of the viewport */
  .modal-card {
    width: 95% !important;
    margin: auto !important;
  }

  /* Form layouts: stack or wrap rows gracefully */
  .form-row {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  
  /* Redefine column fractions on medium devices to avoid squeeze */
  .form-row > .col-3,
  .form-row > .col-4,
  .form-row > .col-2 {
    width: calc(50% - 6px) !important;
  }
  /* [260921] The Quantity/Discount/Accessories/Total Purchase Cost row uses
     content-sized flex (not a col-* class) on desktop so Quantity can be
     narrow without the row wrapping -- see index.html for why. On medium
     screens it falls back to the same 2-per-row layout every other col-*
     row gets here. */
  .form-row > .financials-qty-field,
  .form-row > .financials-flex-field {
    flex: 1 1 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
  }
  .form-row > .col-6,
  .form-row > .col-8,
  .form-row > .col-9,
  .form-row > .col-5 {
    width: 100% !important;
  }

  /* Help modal now uses a single centered card layout; no sidebar to stack. */
  #help-modal .modal-body {
    padding: 32px 24px !important;
  }

  /* Horizontal Scrollable Tabs in Settings & Option Managers */
  .settings-tabs-nav,
  .manager-sub-tabs {
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 6px !important;
  }
  .settings-tabs-nav::-webkit-scrollbar,
  .manager-sub-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .settings-tab-btn,
  .manager-sub-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  
  /* .inventory-table-container's overflow-x: auto is now unconditional
     (see the base rule above) -- moved off this !important duplicate.
     The sticky-header disable below also moved, to <=480px only: real
     iPad widths (768/820/834/1024) all fall in this 768px tier, and the
     new sticky corner column above is specifically designed to keep
     working through horizontal scroll at those widths, matching the
     explicit "tablets like iPad" ask -- only true small phones still get
     the old static-header fallback. */
  .dashboard-table-card {
    overflow-x: auto !important;
    padding: 16px !important;
  }
}
/* Small Phone Layout Overrides (<= 480px) */
@media (max-width: 480px) {
  /* Sticky header + sticky corner column together need a moment of
     careful layout (the top-left cell is sticky on both axes and needs
     room for its box-shadow depth cues); on genuinely small phones there
     isn't enough width to spare for that, so fall back to a plain
     top-of-table header that just scrolls away normally, same as before
     this feature existed. Horizontal scrolling itself (the base
     .inventory-table-container rule) still applies here regardless. */
  .inventory-table th {
    position: static !important;
    box-shadow: none !important;
  }
  /* Native Full-Screen Modals */
  .modal-card {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Double-row Topbar Header structure to resolve title-button collisions */
  .topbar {
    height: auto !important;
    min-height: 60px !important;
    padding: 8px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 9999 !important;
  }
  .topbar-left {
    flex: 1 1 100% !important;
    text-align: left !important;
  }
  #view-title {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
  }
  .topbar-right {
    flex: 1 1 100% !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .search-box-container {
    flex-grow: 1 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Full Stack layout for form inputs on small phones */
  .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .form-row > [class*="col-"] {
    width: 100% !important;
  }
  /* [260921] Same reasoning as the medium breakpoint above -- these 4 fields
     don't carry a col-* class on desktop, so the selector above doesn't
     reach them; give them the same full-stack behavior explicitly. */
  .form-row > .financials-qty-field,
  .form-row > .financials-flex-field {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Subgroup condition conditional rows stack */
  .subgroup-cond-fields {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* Modal Footer Button Stacking for tap target friendliness */
  .modal-footer {
    padding: 12px 16px !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .modal-footer button,
  .modal-footer-right-buttons {
    width: 100% !important;
    display: flex !important;
  }
  .modal-footer .btn,
  .modal-footer-right-buttons .btn {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Card layouts: full span card grids */
  .inventory-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Overrides for html5-qrcode video element to prevent stretching/distortion on mobile */
#scanner-viewport video {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* Scanner Viewfinder Laser Line Animation */
@keyframes scan-line-anim {
  0% {
    top: 0%;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 0%;
  }
}

#qr-shaded-region {
  display: none !important;
}




.dropdown-item:hover {
  background-color: var(--bg-highlight) !important;
}

/* Auth Logo Tile (Matches Landing Page) */
.auth-logo-tile {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  margin-bottom: 24px;
}
.auth-logo-tile .logo-icon {
  height: 38px;
  width: auto;
}
.auth-logo-tile .logo-text-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  line-height: 1.1;
}
.auth-logo-tile .logo-text {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a; /* Slate 900 */
  letter-spacing: -0.5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.auth-logo-tile .logo-tagline {
  font-size: 0.6rem;
  font-weight: 700;
  color: #64748b; /* Slate 500 */
  letter-spacing: 0.5px;
  margin-top: 1px;
}

/* Phone Layout Topbar Cleanup (<= 600px) */
@media (max-width: 600px) {
  /* Hide secondary actions to prevent topbar crowding and button overlaps */
  #btn-insurance-report-trigger,
  #btn-sync,
  #btn-bulk-edit,
  #vaultli-feedback-widget,
  #btn-help-trigger {
    display: none !important;
  }
}

/* Landscape Phone Optimizations (height <= 500px) */
@media (max-height: 500px) and (orientation: landscape) {
  .app-container {
    flex-direction: column !important;
  }
  .sidebar {
    width: 100vw !important;
    height: 48px !important;
    flex-direction: row !important;
    padding: 0 10px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-light) !important;
  }
  .sidebar-nav {
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 0 0 12px !important;
    width: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .sidebar-header .logo-img {
    height: 24px !important;
    width: 24px !important;
    margin: 0 !important;
  }
  .nav-item,
  .nav-sub-item {
    width: auto !important;
    height: auto !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }
  .nav-item span,
  .nav-sub-item span {
    display: inline-block !important;
  }
  .main-content {
    width: 100vw !important;
    height: calc(100vh - 48px) !important;
    height: calc(100dvh - 48px) !important;
  }
  .topbar {
    min-height: 44px !important;
    height: 44px !important;
    padding: 4px 12px !important;
    flex-wrap: nowrap !important;
  }
  .topbar-left {
    flex: 0 0 auto !important;
  }
  #view-title {
    font-size: 1.1rem !important;
  }
  .topbar-right {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }
  .search-box-container {
    max-width: 180px !important;
  }
}

/* Marketplace List View Toggle */
.inventory-grid.marketplace-list-view {
  display: flex !important;
  flex-direction: column;
}
.inventory-grid.marketplace-list-view .gear-card {
  display: flex;
  flex-direction: row;
  height: auto;
  align-items: stretch;
}
.inventory-grid.marketplace-list-view .card-img-wrapper {
  width: 200px;
  height: auto;
  min-height: 200px;
  flex-shrink: 0;
  border-bottom: none;
  border-right: 1px solid var(--border-light);
}
@media (max-width: 768px) {
  .inventory-grid.marketplace-list-view .gear-card {
    flex-direction: column;
  }
  .inventory-grid.marketplace-list-view .card-img-wrapper {
    width: 100%;
    height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
}
.image-warning-badge {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  z-index: 10;
  width: 32px;
  height: 32px;
}
.image-warning-badge i {
  width: 20px;
  height: 20px;
}

/* View Mode Toggle (Tile/Grid/Table) */
.env-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--bg-surface);
  border-radius: 4px;
  padding: 2px;
  border: 1px solid var(--border-medium);
  gap: 1px;
  width: 100%;
}

.theme-light .env-mode-toggle {
  background: #e2e8f0;
}

.btn-env-mode {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 0;
  text-align: center;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.btn-env-mode:hover {
  color: var(--text-main);
}

.btn-env-mode.active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.theme-light .btn-env-mode.active {
  background: var(--bg-surface);
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Attachment Counter Badge */
.attachment-counter-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  backdrop-filter: blur(4px);
  z-index: 5;
  pointer-events: none;
}

.dense-img-container .attachment-counter-badge {
  bottom: 4px;
  right: 4px;
  font-size: 0.65rem;
  padding: 2px 5px;
}

.list-view-thumbnail ~ .attachment-counter-badge, tr td .attachment-counter-badge {
  position: relative;
  bottom: auto;
  right: auto;
  background: rgba(var(--accent-color-rgb), 0.1);
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-color-rgb), 0.2);
  backdrop-filter: none;
}

/* .hide-on-mobile (formerly used to hide Cost/Est Value/Net Delta at
   <=1024px) was retired along with that behavior: Cost and Est Value are
   now always visible per the responsive column tiers above, and Net Delta
   uses .hide-on-tablet (<=820px) instead. No remaining callers in ui.js. */

/* ==========================================================================
   Adaptive Lookup Field (AdaptiveLookupField / adaptiveLookupField.js)
   Progressive-enhancement combobox for high-cardinality text fields (e.g.
   Music Media Artist/Band, Record Label), plus its responsive Manage/Browse
   drawer. Built entirely from existing tokens -- no new CSS variables.
   ========================================================================== */

.alf-wrapper {
  position: relative;
  width: 100%;
  margin-top: 4px;
}

.alf-input-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.alf-input-row .alf-input {
  flex: 1 1 auto;
  min-width: 0;
}

.alf-browse-btn {
  flex: 0 0 auto;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  color: var(--text-secondary);
  font-size: 1.05rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.alf-browse-btn:hover {
  color: var(--accent-color);
  border-color: var(--border-active);
}

.alf-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--border-radius-md);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.alf-dropdown-scroll {
  overflow-y: auto;
}

.alf-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.alf-dropdown-item:hover,
.alf-dropdown-item.alf-highlighted {
  background-color: rgba(var(--accent-color-rgb), 0.1);
}

.alf-dropdown-item .alf-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alf-dropdown-item .alf-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-sm);
  padding: 1px 6px;
}

.alf-dropdown-item.alf-add-new {
  color: var(--accent-color);
  font-weight: 600;
  border-top: 1px solid var(--border-light);
}

.alf-dropdown-empty {
  padding: 10px 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

.alf-mark {
  background-color: rgba(var(--accent-color-rgb), 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* --- Manage / Browse drawer --- */

.alf-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500; /* above .modal-overlay (10000) so it can be opened from within the Add/Edit Item modal */
  background-color: rgba(8, 12, 20, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: flex-end;
  animation: fadeIn 0.2s ease;
}

.alf-drawer {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background-color: var(--bg-surface);
  border-left: 1px solid var(--border-medium);
  box-shadow: -20px 0 50px -15px rgba(0, 0, 0, 0.7);
}

/* Mobile: bottom sheet instead of a right-side slide-out. Toggled via the
   .alf-mobile class (set in JS from window.innerWidth) rather than a plain
   media query, so it matches the same breakpoint the JS drawer logic uses. */
.alf-drawer-overlay.alf-mobile {
  align-items: flex-end;
  justify-content: center;
}

.alf-drawer-overlay.alf-mobile .alf-drawer {
  width: 100%;
  max-width: 100vw;
  height: 85vh;
  border-left: none;
  border-top: 1px solid var(--border-medium);
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  box-shadow: 0 -20px 50px -15px rgba(0, 0, 0, 0.7);
}

.alf-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  flex: 0 0 auto;
}

.alf-drawer-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-main);
}

.alf-drawer-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-smooth);
}

.alf-drawer-close:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.06);
}

.alf-drawer-search-row {
  padding: 12px 16px;
  flex: 0 0 auto;
}

.alf-drawer-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  padding: 0 16px 16px;
  gap: 8px;
}

.alf-az-rail {
  flex: 0 0 auto;
  width: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  overflow-y: auto;
}

.alf-az-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 3px;
}

.alf-az-btn:hover {
  color: var(--accent-color);
  background-color: rgba(var(--accent-color-rgb), 0.1);
}

.alf-drawer-list {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.alf-drawer-scroll {
  height: 100%;
  overflow-y: auto;
}

.alf-drawer-empty {
  padding: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.alf-drawer-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
}

.alf-drawer-row-value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  background: none;
  border: none;
  text-align: left;
  padding: 10px 12px;
  color: var(--text-main);
  font-size: 0.85rem;
  cursor: pointer;
}

.alf-drawer-row-value:hover {
  background-color: rgba(var(--accent-color-rgb), 0.08);
}

.alf-drawer-row-value span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alf-drawer-row-value .alf-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-sm);
  padding: 1px 6px;
}

.alf-drawer-row-merge {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-smooth);
}

.alf-drawer-row-merge:hover {
  color: var(--accent-color);
  background-color: rgba(var(--accent-color-rgb), 0.1);
}

.alf-drawer-merge {
  flex: 0 0 auto;
  padding: 14px 16px;
  border-top: 1px solid var(--border-light);
  background-color: rgba(255, 255, 255, 0.015);
}

.alf-drawer-merge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.alf-drawer-merge-from {
  flex: 0 0 auto;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.alf-drawer-merge-to {
  flex: 1 1 auto;
  min-width: 0;
}

.alf-drawer-merge-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.alf-drawer-merge-note {
  margin: 8px 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Prevent background scroll while the drawer/bottom-sheet is open. */
body.alf-drawer-open {
  overflow: hidden;
}


/* ==========================================================================
   ABOUT & DATA SOURCES (modal, sidebar link, autofill review footer line)
   ========================================================================== */
.sidebar-about-link-wrap { text-align: center; margin-top: 4px; }
.sidebar-about-link { font-size: 0.62rem; color: #a3a3a3; opacity: 0.8; text-decoration: none; letter-spacing: 0.3px; }
.sidebar-about-link:hover, .sidebar-about-link:focus-visible { opacity: 1; text-decoration: underline; }

.about-link { font-size: 0.78rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.about-link:hover, .about-link:focus-visible { color: var(--accent-color); }

.about-body { padding: 20px 24px; overflow-y: auto; font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }
.about-body p { margin: 0 0 12px 0; }
.about-body a { color: var(--accent-color); word-break: break-word; }
.about-source { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border-light); }
.about-source h3 { margin: 0 0 6px 0; font-size: 0.95rem; color: var(--text-main); }
.about-footnote { margin-top: 18px; font-size: 0.78rem; color: var(--text-muted); }
/* Official logo placeholders: stay hidden (.hidden) until a path is set in aboutSources.js */
.about-logo { display: block; max-height: 28px; max-width: 160px; width: auto; margin: 0 0 8px 0; }

.data-sources-line { margin-top: 10px; font-size: 0.72rem; line-height: 1.5; color: var(--text-muted); }
.data-sources-line span:not(:empty) { margin-right: 6px; }
.data-sources-line .about-link { font-size: inherit; white-space: nowrap; }

/* ---- Record Sheet (read-only printable item sheet). Sheet styling itself (.record-sheet)
   lives in recordSheet.js (RECORD_SHEET_CSS) so the preview and the printed copy share one source. ---- */
.record-sheet-modal-card { max-width: 920px; }
.record-sheet-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--border-light); }
.record-sheet-toggle { display: flex; align-items: center; gap: 8px; margin-right: auto; cursor: pointer; font-size: 0.9rem; color: var(--text-main); }
.record-sheet-body { background: var(--bg-app); padding: 16px; }
@media (max-width: 560px) {
  .record-sheet-toolbar { padding: 10px 12px; }
  .record-sheet-body { padding: 8px; }
}
@media print {
  /* Ctrl/Cmd+P while the sheet is open: print only the sheet (the Print button uses an isolated frame). */
  body.record-sheet-open > *:not(#record-sheet-modal) { display: none !important; }
  body.record-sheet-open #record-sheet-modal { position: static !important; width: auto !important; height: auto !important; background: none !important; backdrop-filter: none !important; display: block !important; }
  body.record-sheet-open .record-sheet-modal-card { max-height: none !important; max-width: none !important; border: none !important; box-shadow: none !important; overflow: visible !important; background: #fff !important; }
  body.record-sheet-open #record-sheet-modal .modal-header,
  body.record-sheet-open .record-sheet-toolbar { display: none !important; }
  body.record-sheet-open .record-sheet-body { padding: 0 !important; overflow: visible !important; background: #fff !important; }
}

/* Item Entry Form footer: Delete / Duplicate / Data Sheet / Cancel / Save share one size */
#gear-modal .modal-footer .btn {
  min-width: 116px;
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

/* Item Entry Form footer: Duplicate (blue) and Data Sheet (teal) are colored so the row is easy to scan */
#gear-modal .modal-footer .btn-modal-duplicate { background-color: #2563eb; border-color: #2563eb; color: #fff; }
#gear-modal .modal-footer .btn-modal-duplicate:hover { background-color: #1d4ed8; border-color: #1d4ed8; }
#gear-modal .modal-footer .btn-modal-record-sheet { background-color: #0d9488; border-color: #0d9488; color: #fff; }
#gear-modal .modal-footer .btn-modal-record-sheet:hover { background-color: #0f766e; border-color: #0f766e; }

/* Value History panel in the item form */
.vh-panel { border: 1px solid var(--border-light, rgba(255,255,255,0.1)); border-radius: 8px; padding: 10px 12px; background: rgba(255, 255, 255, 0.02); }
.vh-empty { font-size: 0.85rem; color: var(--text-muted); }
.vh-chart-wrap { margin-bottom: 8px; color: var(--text-muted); }
.vh-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.vh-table th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 4px 6px; border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.1)); }
.vh-table td { padding: 4px 6px; border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.06)); }
.vh-table .vh-num { text-align: right; font-variant-numeric: tabular-nums; }
.vh-table .vh-act { width: 28px; text-align: right; }
.vh-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 4px; }
.vh-del:hover { color: var(--color-danger, #ef4444); }

/* Maintenance & Upgrades (item history M1) */
.mnt-panel { border: 1px solid var(--border-light, rgba(255,255,255,0.1)); border-radius: 8px; padding: 10px 12px; background: rgba(255, 255, 255, 0.02); margin-bottom: 16px; }
.mnt-empty { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
.mnt-hidden-note { font-size: 0.78rem; color: var(--text-muted); font-style: italic; margin-bottom: 8px; }
.mnt-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 8px; }
.mnt-table th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 4px 6px; border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.1)); }
.mnt-table td { padding: 5px 6px; border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.06)); vertical-align: top; }
.mnt-table .mnt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mnt-table .mnt-date { white-space: nowrap; }
.mnt-table .mnt-act { white-space: nowrap; text-align: right; width: 1%; }
.mnt-notes { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; white-space: pre-wrap; }
.mnt-icon { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; line-height: 1; font-size: 1.05rem; vertical-align: middle; }
.mnt-icon svg { width: 15px; height: 15px; }
.mnt-icon:hover:not([disabled]) { color: var(--text-main); }
.mnt-icon-danger:hover:not([disabled]) { color: var(--color-danger, #ef4444); }
.mnt-icon[disabled] { opacity: 0.35; cursor: default; }
.mnt-add { display: inline-flex; align-items: center; gap: 6px; }
.mnt-add svg, .mnt-receipt-pick svg { width: 14px; height: 14px; }
.mnt-totals { font-size: 0.85rem; margin-top: 8px; color: var(--text-secondary, var(--text-main)); }
.mnt-totals-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.mnt-total-line strong { color: var(--text-main); }
.mnt-total-ref { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.mnt-drop-hint { font-size: 0.78rem; color: var(--text-muted); }
#form-maintenance.mnt-drag-over { outline: 2px dashed #0d9488; outline-offset: 2px; background: rgba(13, 148, 136, 0.06); }
.mnt-editor { border: 1px dashed var(--border-light, rgba(255,255,255,0.18)); border-radius: 8px; padding: 10px 12px; margin: 4px 0 8px; background: rgba(255, 255, 255, 0.03); }
.mnt-edit-row td { padding: 0; border-bottom: none; }
.mnt-errors { color: var(--color-danger, #ef4444); font-size: 0.82rem; margin-bottom: 8px; }
.mnt-receipt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; margin: 4px 0 10px; }
.mnt-receipt-label { font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.mnt-receipt-none { color: var(--text-muted); }
.mnt-receipt-pick { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.mnt-link { background: none; border: none; color: var(--color-primary, #3b82f6); cursor: pointer; padding: 0 2px; font-size: 0.85rem; text-decoration: underline; }
.mnt-link-danger { color: var(--color-danger, #ef4444); }
.mnt-editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
.badge-receipt { background: #0d9488; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); margin-right: 4px; }
.multi-image-card.is-receipt { outline: 2px solid rgba(13, 148, 136, 0.55); outline-offset: -2px; }
.mnt-ps-intro { font-size: 0.9rem; color: var(--text-secondary, var(--text-main)); margin: 0 0 12px; }
.mnt-ps-overlay .mnt-table td { vertical-align: middle; }
.mnt-ps-choice { min-width: 230px; margin: 0; }
.mnt-ps-line { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.mnt-ps-ref { font-size: 0.82rem; color: var(--text-muted); }
.mnt-ps-summary { margin-top: 12px; font-size: 0.9rem; text-align: right; }


/* Subscription logos arrive in every size and shape: show the whole image, scaled to fit, never cropped.
   Applies to the tile / grid card, dense card and list thumbnail; the hover preview is contained as well. */
.gear-card.sub-logo-card .card-img-wrapper img,
.dense-card.sub-logo-card .dense-img-container img {
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}
.list-view-thumbnail.sub-logo {
  object-fit: contain !important;
  padding: 2px;
  box-sizing: border-box;
}
#image-hover-preview img {
  min-width: 0;
  width: auto;
  max-width: 344px;
  height: auto;
}

/* Subscriptions marked to cancel (review flag): amber border, badge, and a left marker on table rows. */
.gear-card.sub-cancel-flag, .dense-card.sub-cancel-flag { border: 2px solid #f59e0b; }
tr.sub-cancel-flag td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
.sub-cancel-badge {
  display: inline-flex; align-items: center; gap: 5px; margin: 6px 0 2px; padding: 2px 8px; border-radius: 999px;
  background: rgba(245, 158, 11, 0.16); border: 1px solid #f59e0b; color: #f59e0b; font-size: 0.72rem; font-weight: 700;
}
.sub-cancel-badge svg { width: 12px; height: 12px; }

/* Subscription status look: Cancelled / Ended are greyed out with a red border; Paused gets a quiet grey badge. */
.badge-status-cancelled { background-color: rgba(239, 68, 68, 0.14); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.45); }
.badge-status-paused { background-color: rgba(148, 163, 184, 0.16); color: var(--text-secondary); border: 1px solid rgba(148, 163, 184, 0.45); }
.gear-card.sub-cancelled, .dense-card.sub-cancelled { border: 2px solid #ef4444; }
.gear-card.sub-cancelled > *, .dense-card.sub-cancelled > * { opacity: 0.62; }
.gear-card.sub-cancelled img, .dense-card.sub-cancelled img, tr.sub-cancelled img { filter: grayscale(1); }
tr.sub-cancelled td { opacity: 0.62; }
tr.sub-cancelled td:first-child { box-shadow: inset 4px 0 0 #ef4444; }

/* Maybe: same idea, quieter (dashed border, muted badge). */
.gear-card.sub-maybe-flag, .dense-card.sub-maybe-flag { border: 2px dashed #f59e0b; }
tr.sub-maybe-flag td:first-child { box-shadow: inset 4px 0 0 rgba(245, 158, 11, 0.45); }
.sub-cancel-badge.maybe { background: transparent; border-style: dashed; color: var(--text-secondary); }

/* ==========================================================================
   LAYOUT EDITOR: COMPACT (denser rows, smaller icon picker, taller scroll windows)
   Scoped to the category layout editor form so no other form is affected.
   ========================================================================== */
#category-schema-form .form-group { margin-bottom: 10px !important; }
#category-schema-form .form-edit-section { padding: 10px 14px !important; margin-bottom: 12px !important; }
#category-schema-form .section-header-label { margin-bottom: 4px !important; }
#category-schema-form input.form-control,
#category-schema-form select.form-select,
#category-schema-form select.form-control { height: 34px; min-height: 0; padding: 4px 10px; font-size: 0.9rem; }
#category-schema-form .icon-picker-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; margin-top: 4px; }
#category-schema-form .icon-picker-btn { padding: 5px; }
#category-schema-form .icon-picker-btn i { width: 16px; height: 16px; }
#category-schema-form .category-field-row { padding: 4px 8px !important; margin-bottom: 4px !important; gap: 8px !important; }
#category-schema-form .category-field-row .field-input-options { min-height: 34px; height: 38px; padding: 4px 10px; font-size: 0.85rem; line-height: 1.25; }
#category-schema-form .field-subgroup-checklist { height: 46px !important; padding: 2px 8px !important; }
#category-schema-form .field-default-wrap { padding-top: 0 !important; margin-top: -2px; }
#category-schema-form .field-default-wrap .field-select-default { height: 28px; padding: 2px 8px; }
@media (min-width: 1025px) {
  #category-schema-form #system-fields-builder-container,
  #category-schema-form #category-fields-builder-container { max-height: 74vh; }
}

/* Custom-field rows that show the "Default for new items" line (wide screens). Column order: Field Label, Field Type,
   Dropdown Options, Group Assignment. The picker sits on a second line under Field Label / Field Type; Dropdown Options and
   Group Assignment span both lines so more of their content shows without scrolling. */
@media (min-width: 1025px) {
  #category-fields-builder-container .category-field-row.has-default-row > :nth-child(1) { grid-column: 1; grid-row: 1; }
  #category-fields-builder-container .category-field-row.has-default-row > :nth-child(2) { grid-column: 2; grid-row: 1; }
  #category-fields-builder-container .category-field-row.has-default-row > :nth-child(3) { grid-column: 3; grid-row: 1; }
  #category-fields-builder-container .category-field-row.has-default-row > :nth-child(4) { grid-column: 4; grid-row: 1 / span 2; align-self: stretch; height: auto !important; min-height: 0; }
  #category-fields-builder-container .category-field-row.has-default-row > :nth-child(5) { grid-column: 5; grid-row: 1 / span 2; align-self: stretch; }
  #category-fields-builder-container .category-field-row.has-default-row > :nth-child(6) { grid-column: 6; grid-row: 1; }
  #category-fields-builder-container .category-field-row.has-default-row > :nth-child(7) { grid-column: 7; grid-row: 1; }
  #category-fields-builder-container .category-field-row.has-default-row > :nth-child(8) { grid-column: 8; grid-row: 1; }
  #category-fields-builder-container .category-field-row.has-default-row > .field-default-wrap { grid-column: 2 / 4; grid-row: 2; padding: 0 !important; margin: 0; }
  #category-fields-builder-container .category-field-row.has-default-row .field-subgroup-checklist { height: 76px !important; }
}

/* Layout editor form preview: the cloned item form keeps the same flex layout the live form gets from #gear-form */
.layout-preview-card .layout-preview-form { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; min-height: 0; }
.layout-preview-card .layout-preview-form .modal-body { overflow-y: auto; }