/* myStuff PCS Inventory · brand pass (Spruce & Gold, after the Salary Calculator).
   CSS only. The tool drives its own dark mode with `html.dark`; both modes are mapped here.
   Loaded after the tool's own <style> and /tools/_shared/mfp-tools.css. Delete the <link> to revert. */
:root {
  --color-brand: #203a3d; --color-brand-dark: #162a2c; --color-brand-light: #e8efe4;
  --color-bg: var(--mfp-paper); --color-surface: var(--mfp-card); --color-surface-raised: #ffffff;
  --color-surface-subtle: #f6f9f3; --color-surface-tint: var(--mfp-surface-2);
  --color-border: var(--mfp-line); --color-border-strong: var(--mfp-line-strong);
  --color-text: var(--mfp-text); --color-text-secondary: var(--mfp-muted); --color-text-muted: #66786f; --color-text-inverse: #f2f6ee;
  --color-success: #2d6a4f; --color-success-bg: #dcefe2;
  --color-warning: #7a5200; --color-warning-bg: #fff3cd; --color-warning-border: #e9c46a;
  --color-danger: #b3261e; --color-danger-bg: #fbeceb; --color-danger-border: #f0b8b4;
  --color-info: #203a3d; --color-info-bg: var(--mfp-surface-2);
  --color-uab: #203a3d; --color-hhe: #5a9a7a; --color-pov: #8a5fc4; --color-storage: #c8891a; --color-luggage: #5b6b66;
  --font-sans: var(--mfp-body); --font-mono: var(--mfp-mono);
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 22px;
  --shadow-sm: var(--mfp-shadow); --shadow-md: var(--mfp-shadow); --shadow-lg: var(--mfp-lift);
}
html.dark {
  --color-brand: #e9b949; --color-brand-dark: #d9a52f; --color-brand-light: #1d3033;
  --color-bg: #0f1a1b; --color-surface: #162426; --color-surface-raised: #1b2c2f; --color-surface-subtle: #13201f; --color-surface-tint: #1d3033;
  --color-border: rgba(232, 239, 228, 0.12); --color-border-strong: rgba(232, 239, 228, 0.26);
  --color-text: #e8efe4; --color-text-secondary: #a9bdb2; --color-text-muted: #86a094; --color-text-inverse: #0f1a1b;
  --color-success: #6fcf97; --color-success-bg: #14291e; --color-warning: #e9b949; --color-warning-bg: #2a2310; --color-warning-border: #8a6a1c;
  --color-danger: #f0776e; --color-danger-bg: #2a1616; --color-danger-border: #7f2d28;
  --color-info: #e9b949; --color-info-bg: #1d3033;
  --color-uab: #9cc3be; --color-hhe: #6fcf97; --color-pov: #a78bfa; --color-storage: #e9b949; --color-luggage: #9fb0a8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.6); --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}
html.dark body { background: var(--color-bg); }

/* page: transparent frame, content as separate cards (the exemplar's layout) */
body { background-attachment: fixed; padding: clamp(0.75rem, 3vw, 2.5rem); }
html.dark body { background-image: none; }
#myStuffApp { max-width: 1200px; background: transparent; box-shadow: none; padding: 0; margin: 0 auto; border-radius: 0; display: flex; flex-direction: column; gap: 1.25rem; }
#myStuffApp > header { order: 0; }
#myStuffApp > #weightDashboardSection { order: 1; }  /* weights first: it is the answer people come for */
#myStuffApp > #shareSection { order: 2; }
#myStuffApp > section:not(#weightDashboardSection):not(#shareSection), #myStuffApp > #inventoryGrid { order: 3; }

/* header and the long reminder */
header { text-align: left; padding: 0 0 1.25rem; border-bottom: 1px solid var(--color-border); margin: 0; }
header h1 { font-family: var(--mfp-display); font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--color-text); text-align: left; margin: 0 0 0.6rem; }
.subtitle { font-size: 1.05rem; color: var(--color-text-secondary); text-align: left; }
.reference-link { text-align: left; font-size: 0.9rem; }
a { color: var(--color-brand); }
html:not(.dark) a { color: var(--mfp-ink); text-decoration-color: var(--mfp-signal); text-underline-offset: 3px; }
.title-divider { display: none; }
.export-reminder { max-width: none; width: auto; background: var(--color-surface-tint); border: 0; box-shadow: inset 3px 0 0 var(--mfp-signal); color: var(--color-text-secondary); border-radius: var(--mfp-r-md); padding: 0.9rem 1.2rem; font-size: 0.88rem; line-height: 1.6; text-align: left; margin: 1.1rem 0; }
.export-reminder strong { color: var(--color-text); }

/* action bar: Add Item first, Clear All pushed to the far edge so the two are never neighbours */
.action-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: flex-start; }
#addItemBtn { order: -1; }
#clearAllBtn { order: 10; margin-left: auto; }
.action-bar-button {
  min-height: 44px; padding: 0.6rem 1.3rem; border-radius: 9999px; font-family: var(--mfp-body); font-size: 0.92rem; font-weight: 600;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong);
  transition: transform .35s var(--mfp-ease), box-shadow .35s var(--mfp-ease), background-color .25s, color .25s, border-color .25s;
}
.action-bar-button:hover:not(:disabled) { background: var(--color-surface-tint); transform: translateY(-1px); }
.action-bar-button.primary { background: var(--mfp-ink); color: var(--mfp-on-ink); border-color: transparent; }
html.dark .action-bar-button.primary { background: var(--mfp-signal); color: var(--mfp-on-signal); }
.action-bar-button.primary:hover:not(:disabled) { background: var(--mfp-ink); transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(var(--mfp-ink-rgb), 0.5); }
html.dark .action-bar-button.primary:hover:not(:disabled) { background: var(--mfp-signal); }
.action-bar-button.destructive { background: transparent; color: var(--color-danger); border-color: var(--color-border-strong); }
.action-bar-button.destructive:hover:not(:disabled) { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.action-bar-button:disabled { opacity: 0.5; }
#settingsBtn { min-width: 44px; padding: 0.6rem 0.9rem; }

/* sections as cards */
#shareSection, #weightDashboardSection, .app-controls, .item-card, .category-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--mfp-r-lg); box-shadow: var(--shadow-sm);
}
#shareSection, #weightDashboardSection { padding: 1.25rem 1.5rem; margin: 0; }
h2, h3, h4, h5 { font-family: var(--mfp-display); letter-spacing: -0.02em; color: var(--color-text); }
#dashboardToggle { background: var(--color-surface-tint); border-radius: var(--mfp-r-md); padding: 0.9rem 1.25rem; min-height: 44px; }
.dashboard-title-group h4 { font-size: 1.15rem; }
#dashboardStatusText { font: 500 0.82rem var(--mfp-mono); color: var(--color-text-secondary); }
#totalWeightDisplay h2 { font-family: var(--mfp-display); font-size: 2.6rem; font-weight: 600; letter-spacing: -0.04em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.card-value, .weight { font-family: var(--mfp-mono); font-variant-numeric: tabular-nums; }
.progress-bar-container { height: 10px; border-radius: 9999px; background: var(--color-surface-tint); }
.progress-bar { border-radius: 9999px; }
.warning-indicator { border-radius: var(--mfp-r-sm); }

/* inputs */
input[type="text"], input[type="number"], input[type="search"], input[type="url"], textarea, select, #shareCodeInput, #searchInput {
  min-height: 3rem; padding: 0.7rem 0.95rem; border: 1px solid var(--color-border); border-radius: var(--mfp-r-sm); background-color: var(--color-surface-raised);
  color: var(--color-text); font-family: var(--mfp-body); font-size: 1rem; transition: border-color .25s var(--mfp-ease), box-shadow .25s var(--mfp-ease);
}
input:hover, textarea:hover, select:hover { border-color: var(--color-border-strong); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--mfp-signal); box-shadow: 0 0 0 4px rgba(var(--mfp-signal-rgb), 0.28); }
:focus-visible { outline: 2px solid var(--mfp-signal); outline-offset: 2px; }
label, .filter-label { font: 600 0.7rem var(--mfp-body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-secondary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--mfp-ink); }
html.dark input[type="checkbox"], html.dark input[type="radio"] { accent-color: var(--mfp-signal); }

/* filters: segmented pills like the exemplar's view switcher */
.category-filter-btn, .toggle-option, .tabs button { min-height: 44px; border-radius: 9999px; font-family: var(--mfp-body); font-weight: 600; font-size: 0.88rem; }
.category-filter-btn.active, .toggle-option.active { background: var(--mfp-ink); color: var(--mfp-on-ink); border-color: transparent; }
html.dark .category-filter-btn.active, html.dark .toggle-option.active { background: var(--mfp-signal); color: var(--mfp-on-signal); }

/* item cards */
.item-card { padding: 0; overflow: hidden; transition: transform .35s var(--mfp-ease), box-shadow .35s var(--mfp-ease); }
.item-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.empty-state, #emptyState { border: 2px dashed var(--color-border-strong); border-radius: var(--mfp-r-lg); background: transparent; color: var(--color-text-secondary); }

/* info tooltips and modal */
.info-icon { color: var(--color-text-secondary); }
.info-tooltip-text { background: var(--mfp-text); color: #f2f6ee; border-radius: var(--mfp-r-md); }
#itemModal > div, .modal-content { border-radius: var(--mfp-r-lg); background: var(--color-surface); box-shadow: var(--mfp-lift); }
.error-message { border-radius: var(--mfp-r-md); }
.helpful-tip, .import-note, .limit-note { color: var(--color-text-secondary); font-size: 0.85rem; }

/* the tool has a floating dark-mode button: make it a 44px circle in the palette */
#themeToggle, .theme-toggle, button[title*="dark" i], button[title*="theme" i] { min-width: 44px; min-height: 44px; border-radius: 9999px; background: var(--color-surface); border: 1px solid var(--color-border-strong); }

@media (max-width: 640px) {
  .action-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .action-bar-button { justify-content: center; }
  #addItemBtn, #clearAllBtn { grid-column: 1 / -1; }
  #clearAllBtn { margin-left: 0; }
  input[type="text"], input[type="number"], input[type="search"], textarea, select { font-size: 16px; }
  #totalWeightDisplay h2 { font-size: 2.1rem; }
}

/* share-code row: pill input + pill button */
#shareCodeInput { border-radius: 9999px; padding-left: 1.2rem; }
#load-controls { gap: 0.5rem; align-items: stretch; }
#load-controls button { border-radius: 9999px; min-height: 3rem; }
@media (max-width: 640px) {
  .info-tooltip-text { left: auto; right: 0; top: 140%; transform: none; width: min(280px, calc(100vw - 3rem)); }
  #load-controls button { border-radius: 9999px; }
}

/* filter / sort / view: ONE card (the section), no boxes inside it; each control group is a label above its pills */
.app-controls { padding: 1.25rem 1.5rem; margin: 0; }
.app-controls details summary { font: 600 1.05rem var(--mfp-display); letter-spacing: -0.01em; color: var(--color-text); margin: 0 0 1rem; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.app-controls details summary::before { color: var(--color-text-secondary); }
#searchContainer { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 1.25rem; }
#searchInput { border-radius: 9999px; padding-left: 1.2rem; }
#filterSortContainer { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem 2.5rem; }
#filterSortContainer .filter-group { flex-direction: column; align-items: flex-start; gap: 0.5rem; width: auto; }
#categoryFilterControls { gap: 0.5rem; }
#categoryFilterControls .category-filter-btn { min-height: 44px; padding: 0.5rem 1.15rem; }
#sortingControls .tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--color-surface-tint); border: 1px solid var(--color-border); border-radius: 9999px; }
#sortingControls .tabs .action-bar-button { margin: 0; border: 0; border-radius: 9999px; background: transparent; min-height: 40px; padding: 0.4rem 1.1rem; }
#sortingControls .tabs .action-bar-button:hover:not(.active) { background: transparent; color: var(--color-text); transform: none; }
#sortingControls .tabs .action-bar-button.active { background: var(--mfp-ink); color: var(--mfp-on-ink); box-shadow: 0 2px 8px -2px rgba(var(--mfp-ink-rgb), 0.45); }
html.dark #sortingControls .tabs .action-bar-button.active { background: var(--mfp-signal); color: var(--mfp-on-signal); }
#singleLineLabel { text-transform: none; letter-spacing: 0; font: 600 0.88rem var(--mfp-body); color: var(--color-text); display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.15rem; border-radius: 9999px; margin: 0; cursor: pointer; }
#singleLineToggle:checked + #singleLineLabel { background: var(--mfp-ink); color: var(--mfp-on-ink); border-color: transparent; }
html.dark #singleLineToggle:checked + #singleLineLabel { background: var(--mfp-signal); color: var(--mfp-on-signal); }
#singleLineToggle:focus-visible + #singleLineLabel { outline: 2px solid var(--mfp-signal); outline-offset: 2px; }
@media (max-width: 640px) {
  .app-controls { padding: 1rem; }
  #filterSortContainer { gap: 1rem; }
  #categoryFilterControls { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  #categoryFilterControls .category-filter-btn { width: auto; margin: 0 !important; flex: 0 0 auto; }
  #sortingControls .tabs .action-bar-button { width: auto; margin: 0 !important; border-radius: 9999px !important; }
}