/* ============================================================
   FlipMap - inventory.css
   The map grid, toolbar, stat strip, and floating save bar.
   ============================================================ */

/* Stat strip across the top of the app */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;margin-bottom:1.5em;}
.stat-card{background:var(--bg-dark);border:1px solid var(--border-thin);border-radius:var(--radius-md);padding:0.9em 1.1em;display:flex;flex-direction:column;gap:0.3em;justify-content:center;}
.stat-card > div + .progress-track{margin-top:0.3em;}
.stat-label{font-family:var(--font-display);font-size:0.7em;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);}
.stat-val{font-family:var(--font-code);font-size:1.5em;color:var(--text-primary);align-self:flex-end;}
.stat-val-green{color:var(--accent-green);}
.stat-val-pct{font-family:var(--font-code);font-size:0.85em;color:var(--accent-abyssal);}
.progress-track{width:100%;background:var(--bg-darkest);height:5px;border-radius:3px;overflow:hidden;}
.progress-bar{background:var(--accent-abyssal);height:100%;transition:width 0.25s ease;}

/* Toolbar - filters / search / edit */
.inv-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0.6em;margin-bottom:1.2em;padding:0.7em 0.9em;background:var(--bg-dark);border:1px solid var(--border-thin);border-radius:var(--radius-md);}
.inv-toolbar .pill-group{display:flex;background:var(--bg-darkest);border:1px solid var(--border-thin);border-radius:var(--radius-sm);padding:3px;gap:2px;}
.inv-toolbar .pill{padding:0.32em 0.7em;border-radius:4px;font-family:var(--font-display);font-size:0.68em;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;background:transparent;border:none;transition:all 0.15s;}
.inv-toolbar .pill:hover{color:var(--text-primary);}
.inv-toolbar .pill.active{background:var(--accent-abyssal);color:#fff;}
.inv-toolbar .pill.active-blue{background:var(--accent-blue);color:#fff;}
.inv-toolbar .pill-label{font-family:var(--font-display);font-size:0.65em;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-faint);margin-right:0.3em;}
.inv-toolbar input[type=search]{background:var(--bg-darkest);border:1px solid var(--border-thin);border-radius:999px;color:var(--text-primary);font-family:var(--font-body);font-size:0.9em;padding:0.4em 0.9em;min-width:220px;outline:none;}
.inv-toolbar input[type=search]:focus{border-color:var(--accent-abyssal);}
.inv-toolbar .global-toggle{display:flex;align-items:center;gap:0.4em;font-size:0.75em;color:var(--text-muted);padding:0.3em 0.6em;border:1px solid var(--border-thin);border-radius:var(--radius-sm);cursor:pointer;}
.inv-toolbar .spacer{flex:1;}

/* Map grid */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1em;}
.map-card{background:var(--bg-dark);border:1px solid var(--border-thin);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:border-color 0.15s, transform 0.15s;cursor:pointer;position:relative;}
.map-card:focus-visible{outline:2px solid var(--accent-abyssal);outline-offset:2px;}
.map-card:hover{border-color:var(--accent-abyssal);}
.map-card .map-img{width:100%;aspect-ratio:1/1;background:#000;display:grid;place-items:center;overflow:hidden;}
.map-card .map-img img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;opacity:0.95;}
.map-card .map-meta{padding:0.55em 0.7em;}
.map-card .map-sys{font-family:var(--font-display);font-size:0.6em;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:0.2em;}
.map-card .map-name{font-family:var(--font-body);font-size:0.85em;color:var(--text-primary);line-height:1.3;}

/* Ownership indicator */
.map-card.owned{border-color:var(--accent-abyssal);box-shadow:0 0 0 1px var(--accent-abyssal) inset;}
.map-card.owned .check-badge{display:flex;}
.check-badge{display:none;position:absolute;top:0.4em;right:0.4em;width:24px;height:24px;border-radius:50%;background:var(--accent-abyssal);color:#fff;align-items:center;justify-content:center;font-size:0.85em;box-shadow:var(--shadow-low);z-index:2;}

/* Global view: highlight blue instead of abyssal, since the user
   doesn't own these - they belong to other shinra players. */
.map-card.global-owned{border-color:var(--accent-blue);box-shadow:0 0 0 1px var(--accent-blue) inset;}
.map-card.global-owned .check-badge{display:flex;background:var(--accent-blue);}

/* Edit mode visual treatment */
body.edit-mode .map-card:not(.owned){opacity:0.55;}
body.edit-mode .map-card:not(.owned):hover{opacity:1;}

/* Hidden when search filters them out (we toggle a class so
   layout reflow stays cheap). */
.map-card.search-hidden{display:none;}

/* Save bar (sticky bottom while editing) */
.save-bar{position:fixed;bottom:0;left:0;right:0;background:var(--bg-dark);border-top:1px solid var(--border-thin);box-shadow:0 -4px 16px rgba(0,0,0,0.4);padding:0.8em 2em;display:flex;justify-content:space-between;align-items:center;z-index:50;transition:transform 0.25s ease;}
.save-bar-hidden{transform:translateY(110%);}
.save-bar-actions{display:flex;gap:0.6em;}

/* Empty / loading state */
.inv-empty{grid-column:1/-1;text-align:center;padding:4em 1em;color:var(--text-faint);}
.inv-empty .spinner{margin-bottom:1em;}