/* ══════════════════════════════════════════════════════════════════════════════
   PHONE INVENTORY — Glass UI Stylesheet
   Inherits vars & base from ../index.css
══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   PAGE LOAD TRANSITION
══════════════════════════════════════════════ */
.page-loading { opacity: 0; }
.page-ready { animation: pageFadeIn 0.5s ease-out forwards; }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

.page-ready .glass-stats-card,
.page-ready .inv-toolbar-card,
.page-ready .inv-table-card {
  animation: sectionSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-ready .glass-stats-card:nth-child(1) { animation-delay: 0.06s; }
.page-ready .glass-stats-card:nth-child(2) { animation-delay: 0.12s; }
.page-ready .inv-toolbar-card              { animation-delay: 0.10s; }
.page-ready .inv-table-card                { animation-delay: 0.18s; }

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

/* ── Layout ───────────────────────────────────────────────────────────────── */
.phoneinv-main {
  padding-top: 84px !important;
  padding-bottom: 24px !important;
}
.phoneinv-container {
  width: 100%;
  max-width: 100%;
  padding: 0 16px;
}

/* ══════════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════════ */
.phoneinv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.phoneinv-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 28px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.phoneinv-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.phoneinv-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.phoneinv-manage-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid rgba(100,160,220,0.25);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(12px);
  color: var(--accent, #1a5fa8);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.phoneinv-manage-btn:hover {
  background: rgba(255,255,255,0.7);
  border-color: rgba(26,95,168,0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(26,95,168,0.12);
}
.phoneinv-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--accent);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(26, 95, 168, 0.3);
}
.phoneinv-add-btn:hover {
  background: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 95, 168, 0.35);
}
.phoneinv-add-btn span { font-size: 18px; font-weight: 700; line-height: 1; }

/* ══════════════════════════════════════════════
   STATS + TABLE COLUMNS
══════════════════════════════════════════════ */
.inv-stats-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inv-stats-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.inv-stats-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 768px) {
  .inv-stats-row-2 { grid-template-columns: 1fr; }
  .inv-stats-row-3 { grid-template-columns: 1fr; }
}
.inv-table-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ══════════════════════════════════════════════
   GLASS STATS CARDS (Side Columns)
══════════════════════════════════════════════ */
.glass-stats-card {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 6px 24px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.6);
}
.stats-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.stats-card-header .stats-card-icon {
  margin-bottom: 0;
}
.stats-card-header .stats-card-title {
  margin-bottom: 0;
}
.stats-card-icon {
  height: 28px;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
  margin-bottom: 14px;
}
.stats-card-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}

.stats-card-half {
  flex: 1;
  min-width: 0;
}
.si-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* Stat rows */
.si-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.si-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
}
.si-value {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.si-green { color: #007a50; }
.si-blue { color: #1a6fb5; }
.si-red { color: #c03030; }
.si-warn { color: #b52020; }
.si-accent { color: var(--accent); }
.si-muted { font-weight: 400; color: var(--text-secondary); font-size: 10px; }
.si-accent-text { color: var(--accent); font-weight: 600; }
.si-highlight {
  background: rgba(26, 95, 168, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 2px -4px;
}
.si-sub {
  font-size: 10.5px;
  color: var(--text-secondary);
  padding: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-divider {
  border-top: 1px solid var(--glass-border);
  margin: 8px 0;
}

/* Trend arrows */
.trend-up { color: #007a50; font-size: 10px; font-weight: 700; margin-left: 4px; }
.trend-down { color: #b52020; font-size: 10px; font-weight: 700; margin-left: 4px; }
.trend-flat { color: var(--text-secondary); font-size: 10px; margin-left: 4px; }

/* Brand detail bars */
.brand-detail-block { margin-bottom: 12px; }
.brand-detail-block:last-child { margin-bottom: 0; }
.si-bar-track {
  height: 4px;
  background: rgba(26, 95, 168, 0.08);
  border-radius: 4px;
  margin: 4px 0;
  overflow: hidden;
}
.si-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.brand-detail-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-secondary);
}

/* Most Sold */
.top-sold-logo {
  height: 35px;
  width: auto;
  vertical-align: middle;
  margin-right: 6px;
}
.top-sold-logo-sam {
  height: 35px;
}
.top-sold-star {
  font-size: 15px;
  margin-right: 4px;
}
.top-sold-star.gold   { color: #d4a017; }
.top-sold-star.silver { color: #a8a8a8; }
.top-sold-star.bronze { color: #cd7f32; }
.top-sold-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-right: 4px;
}
.si-sold-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   WEEKLY PHONE SALES CHART
══════════════════════════════════════════════ */
.weekly-stats {
  display: flex;
  gap: 12px;
}
.ws-section {
  flex: 1;
  display: flex;
  border-radius: 12px;
  padding: 16px 10px;
  backdrop-filter: blur(6px);
}
.ws-section-blue {
  background: rgba(26, 95, 168, 0.06);
  border: 1px solid rgba(26, 95, 168, 0.12);
}
.ws-section-red {
  background: rgba(180, 40, 40, 0.06);
  border: 1px solid rgba(180, 40, 40, 0.12);
}
.ws-col {
  flex: 1;
  padding: 0 14px;
}
.ws-col:first-child { padding-left: 6px; }
.ws-col:last-child { padding-right: 6px; }
.ws-divider {
  width: 1px;
  background: var(--glass-border);
  align-self: stretch;
}
.ws-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ws-icon-img {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-icon-img img {
  max-height: 22px;
  width: auto;
  object-fit: contain;
  display: block;
}
.ws-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.2;
}
.ws-value {
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}
.ws-compare {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ws-pct { font-size: 11px; font-weight: 600; }
.ws-pct-up { color: #008a5a; }
.ws-pct-down { color: #b52020; }
.ws-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 52px;
  margin: 10px 0 8px;
  position: relative;
}
.ws-bars::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1.5px dashed rgba(0,0,0,0.07);
}
.ws-bar-day {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.ws-bar {
  flex: 1;
  border-radius: 3px;
  min-height: 3px;
  animation: barGrow 1.5s ease-out forwards;
  transform-origin: bottom;
}
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.ws-week {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ══════════════════════════════════════════════
   MINI TABLE (Newest / Latest Sold tabs)
══════════════════════════════════════════════ */
.mini-table-tabs {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  margin-bottom: 8px;
}
.mini-tab {
  flex: 1;
  padding: 5px 0;
  border: none;
  background: rgba(255,255,255,0.25);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mini-tab:hover {
  background: rgba(255,255,255,0.45);
  color: var(--text-primary);
}
.mini-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,95,168,0.2);
}
.mini-table-panel {
  display: none;
}
.mini-table-panel.active {
  display: block;
}
.mini-table-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(100,160,220,0.08);
}
.mini-table-row:last-child {
  border-bottom: none;
}
.mini-table-img {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(100,160,220,0.12);
  flex-shrink: 0;
}
.mini-table-name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-table-price {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 42px;
  text-align: left;
}
.mini-table-price.blue {
  color: #1a6fb5;
}
.mini-table-price.profit {
  color: #007a50;
}
.mini-table-price.sold {
  color: #c03030;
}
.mini-table-price.tax {
  color: #3a3a3a;
}
.mini-table-price.bat-col {
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 2px;
}
.mini-bat-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.mini-table-price.storage {
  color: #2a2a2a;
}
.mini-table-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 4px;
  border-bottom: 1px solid rgba(100,160,220,0.15);
  margin-bottom: 2px;
}
.mini-table-th {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  min-width: 42px;
  text-align: left;
}
.mini-table-th.item {
  flex: 1;
  min-width: 0;
  padding-left: 38px;
  text-align: left;
}
.mini-table-empty {
  font-size: 10.5px;
  color: var(--text-secondary);
  text-align: center;
  padding: 10px 0;
  font-style: italic;
}

/* ══════════════════════════════════════════════
   TOOLBAR (Brand Tabs + Filters + Search)
══════════════════════════════════════════════ */
.inv-toolbar-card {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inv-filter-row {
  display: flex;
  gap: 10px;
}
.inv-filter-select-wrap { flex: 1; }
.inv-filter-select {
  width: 100%;
  padding: 9px 30px 9px 12px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-ui);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230d2a52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: all 0.2s ease;
}
.inv-filter-select:focus { border-color: var(--accent); background-color: rgba(255,255,255,0.9); }

/* Brand tabs */
.brand-tabs-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.brand-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.brand-tab:hover { background: rgba(255,255,255,0.55); color: var(--text-primary); }
.brand-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(26, 95, 168, 0.25);
}
.tab-count {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  padding: 1px 6px;
  border-radius: 50px;
}
.brand-tab.active .tab-count { background: rgba(255,255,255,0.25); }

.tab-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(100,160,220,0.25);
  margin: 4px 4px;
}

.inv-location {
  font-size: 12px;
  color: var(--text-secondary, rgba(30,70,130,0.65));
}

/* Search */
.inv-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.inv-search-icon {
  position: absolute;
  left: 12px;
  font-size: 13px;
  pointer-events: none;
}
.inv-search-input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: var(--font-ui);
  outline: none;
  transition: all 0.2s ease;
}
.inv-search-input::placeholder { color: var(--text-secondary); }
.inv-search-input:focus {
  background: rgba(255,255,255,0.9);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 95, 168, 0.08);
}

/* ══════════════════════════════════════════════
   INVENTORY TABLE
══════════════════════════════════════════════ */
.inv-table-card {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.6);
  overflow: hidden;
}
.inv-table-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
}
.inv-table-toolbar .inv-filter-select-wrap,
.inv-table-toolbar .inv-search-wrap {
  flex: 1;
}
.inv-table-scroll { overflow-x: auto; }
.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
}
.inv-table thead th {
  padding: 12px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}
.inv-table tbody tr {
  border-bottom: 1px solid rgba(100, 160, 220, 0.1);
  transition: background 0.2s ease;
}
.inv-table tbody tr:last-child { border-bottom: none; }
.inv-table tbody tr:hover { background: rgba(255, 255, 255, 0.25); }
.inv-table td {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-primary);
  vertical-align: middle;
  white-space: nowrap;
}

/* Thumbnail */
.inv-thumb-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  border: 1px solid rgba(100, 160, 220, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inv-thumb { width: 100%; height: 100%; object-fit: contain; }
.inv-thumb-placeholder { font-size: 18px; opacity: 0.3; }

/* Item name + IMEI */
/* The name is set in the figure face — the same mono the IMEI and price use —
   at a size that makes it the first thing read on the row. With the Location
   and Date columns no longer drawn the name has the room, so the clamp is
   wider than it was; long Samsung names still ellipsise rather than wrap. */
.inv-item-name {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-imei {
  font-size: 13px;
  font-family: var(--font-num);
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  margin-top: 1px;
}

/* Price */
.inv-price { color: var(--accent); font-weight: 700; font-size: 13px; }
.inv-cost { color: var(--text-secondary); font-weight: 600; font-size: 13px; }
.inv-date { color: var(--text-secondary); font-size: 12px; font-weight: 500; }

/* Storage */
.inv-storage { font-weight: 600; font-size: 12.5px; color: var(--text-secondary); }

/* SIM badge */
.inv-sim-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  white-space: nowrap;
}
.sim-unlocked {
  background: rgba(0, 138, 90, 0.08);
  color: #007a50;
  border: 1px solid rgba(0, 138, 90, 0.2);
}
.sim-locked {
  background: rgba(181, 32, 32, 0.06);
  color: #b52020;
  border: 1px solid rgba(181, 32, 32, 0.18);
}

/* Grade badge */
.inv-grade-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  background: rgba(26, 95, 168, 0.06);
  color: var(--accent);
  border: 1px solid rgba(26, 95, 168, 0.15);
}
.inv-grade-icon { width: 35px; height: 35px; vertical-align: middle; }
.inv-color-dot { display:inline-block; width:26px; height:26px; border-radius:50%; vertical-align:middle; margin:4px 0;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.18), inset 0 2px 3px rgba(255,255,255,.4),
    0 0 0 4px #ffffff, 0 0 0 5px rgba(0,0,0,.09); }

/* Battery badge */
.inv-bat-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
}
.bat-high { background: rgba(0, 138, 90, 0.08); color: #007a50; border: 1px solid rgba(0, 138, 90, 0.2); }
.bat-med  { background: rgba(180, 130, 0, 0.08); color: #9a7000; border: 1px solid rgba(180, 130, 0, 0.2); }
.bat-low  { background: rgba(181, 32, 32, 0.06); color: #b52020; border: 1px solid rgba(181, 32, 32, 0.18); }
.inv-bat-icon { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }

/* Actions */
.inv-actions { display: flex; gap: 5px; }
/* The badge is gone: no plate, no border, no fill — just the glyph, engraved
   into the row. Matches the panel actions below, so Edit, Label and Delete all
   read as the same kind of control wherever they sit.

   !important throughout because neumorphic.css and embossed.css both give every
   <button> a pill from a catch-all at (0,3,2), which outranks this rule.

   The 30px box stays. Only the decoration went — shrinking the button would
   shrink the click target with it. */
.inv-action-btn {
  width: 30px;
  height: 30px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform 0.2s ease, filter 0.2s ease;
  /* Engraved. The FILTER form: these are PNG glyphs, so there is no text to
     shadow — just an alpha silhouette, which is what drop-shadow() traces. */
  filter:
    drop-shadow(-1px -1px 1px rgba(63, 74, 86, 0.30))
    drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.95));
}
/* Lifts out of the groove on hover — the engrave stays, so the glyph rises
   without changing what it is. The background fill went with the badge. */
.inv-action-btn:hover { transform: translateY(-1px); }
.inv-action-btn:active { transform: translateY(1px); }
.inv-action-icon { width: 20px; height: 20px; object-fit: contain; transition: transform 0.2s ease; }
.inv-action-btn:hover .inv-action-icon { transform: scale(1.3); }

/* ══════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════ */
.inv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px 8px;
  flex-wrap: wrap;
}

.inv-page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(100,160,220,0.2);
  background: rgba(255,255,255,0.35);
  color: var(--text-secondary, rgba(30,70,130,0.7));
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.inv-page-btn:hover {
  background: rgba(255,255,255,0.6);
  border-color: rgba(100,160,220,0.35);
  box-shadow: 0 2px 8px rgba(60,100,180,0.10);
}
.inv-page-btn.active {
  background: rgba(26,95,168,0.12);
  border-color: rgba(26,95,168,0.3);
  color: var(--accent, #1a5fa8);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(26,95,168,0.12);
}
.inv-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.inv-page-ellipsis {
  min-width: 28px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, rgba(30,70,130,0.5));
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 2px;
  user-select: none;
}

.inv-page-info {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary, rgba(30,70,130,0.55));
  margin-left: 12px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   ADD/EDIT PHONE MODAL
══════════════════════════════════════════════ */
.phone-modal-card {
  max-width: 600px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}
.phone-modal-card::-webkit-scrollbar { width: 4px; }
.phone-modal-card::-webkit-scrollbar-thumb { background: rgba(26,95,168,0.2); border-radius: 4px; }

/* Add Location button */
.phone-add-loc-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(100,160,220,0.25);
  background: rgba(26,95,168,0.08);
  color: var(--accent, #1a5fa8);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.phone-add-loc-btn:hover {
  background: rgba(26,95,168,0.15);
  border-color: rgba(26,95,168,0.35);
  transform: translateY(-1px);
}

/* Location mini-modal */
.loc-modal-card {
  max-width: 400px;
  width: 90%;
}
.phone-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
.phone-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.phone-cancel-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.2s ease;
}
.phone-cancel-btn:hover { background: rgba(255,255,255,0.65); color: var(--text-primary); }
.phone-save-btn {
  padding: 10px 24px;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(26, 95, 168, 0.3);
}
.phone-save-btn:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26, 95, 168, 0.35); }

/* Image preview in modal */
.modal-img-preview {
  min-height: 100px;
  background: rgba(255,255,255,0.3);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.modal-img-thumb {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
  padding: 10px;
}
.modal-img-placeholder {
  color: var(--text-secondary);
  font-size: 12.5px;
  padding: 20px;
}

/* ══════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════ */
.pos-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  font-family: var(--font-ui);
  z-index: 10000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  animation: toastSlideIn 0.3s ease;
}
.pos-toast.fade-out { animation: toastSlideOut 0.3s ease forwards; }
@keyframes toastSlideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .phoneinv-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .inv-filter-row { flex-direction: column; }
  .brand-tabs-row { flex-wrap: wrap; }
  .phone-form-grid { grid-template-columns: 1fr; }
  .inv-table td, .inv-table th { padding: 8px 8px; font-size: 11px; }
  .inv-pagination { gap: 4px; padding: 10px 8px 6px; }
  .inv-page-btn { min-width: 32px; height: 32px; font-size: 12px; }
  .inv-page-info { margin-left: 4px; font-size: 11px; }
}
@media (max-width: 480px) {
  .phoneinv-main { padding-top: 70px !important; }
}

/* ============================================================
   HOUSE TYPE — SF Pro for text, SF Mono for figures.
   Tokens live in ../index.css. Matches the dashboard treatment.
   ============================================================ */
.phoneinv-container, .phoneinv-main {
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.inv-imei, .inv-price, .inv-cost, .inv-date, .inv-storage,
.tab-count, .ws-value, .si-value, .si-sold-count, .mini-table-price,
.inv-page-btn, .inv-page-info, .ws-pct, .brand-detail-meta {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   DARK GLASS.

   This page had no dark-mode rules at all — it relied entirely on the shared
   --glass-* tokens, so every hardcoded light value stayed light. The worst
   offender was .invd-money (background:#fff), the white pricing box inside
   the expanded row.

   Selectors are `body.dark-mode …` (two classes), which outranks both
   index.css and the single-class rules in index.php's inline <style>, so
   specificity wins regardless of load order.
   ============================================================ */

/* ── Panels & cards: match the dashboard's dark card ── */
body.dark-mode .glass-stats-card,
body.dark-mode .inv-toolbar-card,
body.dark-mode .inv-table-card,
body.dark-mode .mini-table-panel,
body.dark-mode .brand-detail-block {
    background: radial-gradient(circle at 30% 25%,
                rgba(48, 62, 86, 0.62) 0%,
                rgba(15, 23, 42, 0.55) 72%);
    border: 1px solid rgba(56, 119, 214, 0.15);
    box-shadow: inset 0 1px 0 rgba(56, 119, 214, 0.12), 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ── Table ── */
body.dark-mode .inv-table thead th {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    border-bottom-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .inv-table tbody tr { border-bottom-color: rgba(255, 255, 255, 0.07); }
body.dark-mode .inv-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); }
body.dark-mode .inv-item-name { color: #e2e8f0; }
body.dark-mode .inv-imei, body.dark-mode .inv-date,
body.dark-mode .inv-storage, body.dark-mode .inv-location { color: #94a3b8; }

/* ── Toolbar controls ── */
body.dark-mode .inv-search-input,
body.dark-mode .inv-filter-select,
body.dark-mode .inv-page-btn,
body.dark-mode .inv-action-btn,
body.dark-mode .brand-tab,
body.dark-mode .mini-tab,
body.dark-mode .phoneinv-manage-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(100, 160, 220, 0.18);
    color: #e2e8f0;
}
body.dark-mode .inv-search-input::placeholder { color: rgba(148, 163, 184, 0.7); }
body.dark-mode .inv-search-input:focus,
body.dark-mode .inv-filter-select:focus { background: rgba(255, 255, 255, 0.09); }
body.dark-mode .brand-tab:hover,
body.dark-mode .mini-tab:hover,
body.dark-mode .inv-page-btn:hover,
body.dark-mode .inv-action-btn:hover,
body.dark-mode .phoneinv-manage-btn:hover { background: rgba(255, 255, 255, 0.11); }
body.dark-mode .tab-count { background: rgba(255, 255, 255, 0.10); color: #cbd5e1; }

/* ── Expanded row: the detail panel ── */
body.dark-mode .invd-money {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(100, 160, 220, 0.15);
}
body.dark-mode .invd-label,
body.dark-mode .invd-spec span,
body.dark-mode .invd-mr span:first-child { color: #94a3b8; }
body.dark-mode .invd-spec b,
body.dark-mode .invd-mr span:last-child { color: #e2e8f0; }
body.dark-mode .invd-spec { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark-mode .invd-photos { border-top-color: rgba(255, 255, 255, 0.10); }

/* ── Mini tables (Newest Devices / Latest Sold) ── */
body.dark-mode .mini-table-header,
body.dark-mode .mini-table-th { color: #94a3b8; border-bottom-color: rgba(255, 255, 255, 0.09); }
body.dark-mode .mini-table-row { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.dark-mode .mini-table-row:hover { background: rgba(255, 255, 255, 0.05); }
body.dark-mode .mini-table-name { color: #e2e8f0; }
body.dark-mode .si-label, body.dark-mode .si-sub, body.dark-mode .si-muted { color: #94a3b8; }
body.dark-mode .si-value { color: #e2e8f0; }
body.dark-mode .si-row { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.dark-mode .si-divider,
body.dark-mode .tab-divider, body.dark-mode .ws-divider { background: rgba(255, 255, 255, 0.10); }
body.dark-mode .si-bar-track { background: rgba(255, 255, 255, 0.08); }

/* ── Weekly stats blocks ── */
body.dark-mode .ws-label, body.dark-mode .ws-week, body.dark-mode .ws-compare { color: #94a3b8; }
body.dark-mode .ws-value { color: #e2e8f0; }
body.dark-mode .stats-card-title { color: #e2e8f0; }

/* ── Headings ── */
body.dark-mode .phoneinv-title { color: #e2e8f0; }
body.dark-mode .phoneinv-subtitle { color: #94a3b8; }

/* ── Modals (inline <style> uses #fff !important, so match its weight) ── */
body.dark-mode .phone-modal-card,
body.dark-mode .loc-modal-card {
    background: rgba(23, 33, 52, 0.96) !important;
    color: #e2e8f0;
}
body.dark-mode .phone-modal-card .modal-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(100, 160, 220, 0.22) !important;
    color: #e2e8f0;
}
body.dark-mode .phone-modal-card .modal-input:focus {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: #3b82f6 !important;
}
body.dark-mode .parts-radio { border-color: rgba(100, 160, 220, 0.22); color: #cbd5e1; }
body.dark-mode .parts-radio.active { background: rgba(59, 130, 246, 0.18); border-color: #3b82f6; color: #93c5fd; }
body.dark-mode .part-qual button { background: rgba(255, 255, 255, 0.06); border-color: rgba(100, 160, 220, 0.2); color: #cbd5e1; }
body.dark-mode .phone-cancel-btn { background: rgba(255, 255, 255, 0.07); color: #cbd5e1; }
body.dark-mode .modal-img-preview, body.dark-mode .modal-img-placeholder {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(100, 160, 220, 0.2);
}

/* Aftermarket parts side panel (opens beside the device modal) */
body.dark-mode .parts-side-panel {
    background: rgba(23, 33, 52, 0.96);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
body.dark-mode .parts-panel-head, body.dark-mode .part-name { color: #e2e8f0; }
body.dark-mode .parts-panel-sub { color: #94a3b8; }
body.dark-mode .part-row { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark-mode .parts-radio-label { color: #cbd5e1; }

/* ── Logos in dark mode ────────────────────────────────────────────────────
   Both the weekly-stats logos (inline mix-blend-mode:multiply) and
   .stats-card-icon use multiply, which is fine on a light glass card but
   multiplies them into the background on a dark one. Both images already
   have alpha, so the blend isn't knocking out a white box — it can just be
   turned off on dark and the artwork lifted a little. */
body.dark-mode .ws-icon-img img,
body.dark-mode .stats-card-icon,
body.dark-mode .top-sold-logo,
body.dark-mode .top-sold-logo-sam {
    mix-blend-mode: normal !important;
    filter: brightness(1.35) saturate(1.15);
}

/* ============================================================
   Two-sided layout: Decibels (left) | Cell Phone Planet (right).

   Each side is ONE panel — brand logo + title, the three weekly-stat
   columns, a divider, then the totals split. The inventory table sits
   below on each side. Columns are equal width.
   ============================================================ */
.phoneinv-main .dashboard-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.inv-side-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* The combined panel */
.inv-combined .stats-card-header { margin-bottom: 16px; }
/* One weekly section per side, so it fills the panel */
.inv-combined .weekly-stats > .ws-section { flex: 1; }


@media (max-width: 1200px) {
    .phoneinv-main .dashboard-layout { grid-template-columns: 1fr; }
}

/* The two totals blocks now sit as columns inside .ws-section, after the
   three weekly columns and separated by the same .ws-divider. They keep
   .stats-card-half, so give them the padding .ws-col has. */
.ws-section > .stats-card-half {
    flex: 1;
    min-width: 0;
    padding: 0 14px;
    align-self: center;
}
/* .ws-col:last-child no longer matches now that a half is last */
.ws-section > .stats-card-half:last-child { padding-right: 6px; }

/* ============================================================
   Liquid glass — the two brand panels.

   Apple's material has three readable traits CSS can reproduce: a bright
   specular rim that catches light along the edges, a heavier blur with a
   brightness/saturation lift so the backdrop glows through, and a soft
   light sweep across the surface. The one trait CSS can't do natively is
   true refraction (bending the content behind); that needs an SVG
   displacement filter. The rim + sweep carry most of the impression.
   ============================================================ */
.inv-combined {
    position: relative;
    isolation: isolate;              /* keeps the pseudo layers off the children */
    padding: 20px 22px;
    border-radius: 22px;
    overflow: hidden;

    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.42) 0%,
                rgba(255, 255, 255, 0.22) 48%,
                rgba(255, 255, 255, 0.32) 100%);
    backdrop-filter: blur(30px) saturate(190%) brightness(1.06);
    -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.06);

    /* No plain border — the rim is drawn with layered insets so it can be
       bright at the top and fade around the sides, the way a lit edge does. */
    border: none;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.85),      /* top specular line */
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),      /* full rim */
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.30),     /* bottom bounce */
        0 8px 32px rgba(30, 60, 110, 0.14),
        0 2px 8px rgba(30, 60, 110, 0.08);
}

/* Light sweep across the top-left, fading out — the "wet" highlight */
.inv-combined::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(120% 80% at 12% -10%,
                rgba(255, 255, 255, 0.55) 0%,
                rgba(255, 255, 255, 0.12) 38%,
                transparent 68%);
}

/* Faint colour bloom at the opposite corner so the surface isn't flat */
.inv-combined::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(90% 70% at 100% 110%,
                rgba(120, 180, 255, 0.16) 0%,
                transparent 60%);
}

/* ── Dark: the rim dims and cools, the bloom does more of the work ── */
body.dark-mode .inv-combined {
    background: linear-gradient(135deg,
                rgba(70, 92, 130, 0.30) 0%,
                rgba(20, 30, 48, 0.42) 50%,
                rgba(40, 55, 82, 0.34) 100%);
    /* the shared dark .glass-stats-card rule would re-add a hard border */
    border: none;
    backdrop-filter: blur(34px) saturate(200%) brightness(1.04);
    -webkit-backdrop-filter: blur(34px) saturate(200%) brightness(1.04);
    box-shadow:
        inset 0 1px 0 0 rgba(190, 220, 255, 0.34),
        inset 0 0 0 1px rgba(140, 190, 255, 0.16),
        inset 0 -1px 0 0 rgba(140, 190, 255, 0.10),
        0 10px 38px rgba(0, 0, 0, 0.42);
}
body.dark-mode .inv-combined::before {
    background: radial-gradient(120% 80% at 12% -10%,
                rgba(190, 220, 255, 0.20) 0%,
                rgba(190, 220, 255, 0.05) 40%,
                transparent 70%);
}
body.dark-mode .inv-combined::after {
    background: radial-gradient(90% 70% at 100% 110%,
                rgba(90, 150, 255, 0.20) 0%,
                transparent 60%);
}

/* ── Device panel actions (print label / delete) ────────────────────────────
   Moved out of the table row: three buttons would not fit that column and the
   group spilled past the row's top edge. They read better here anyway — you
   open the panel to look at a device, and these are what you do to it.

   Icon-only. The printer glyph says "label" without a word beside it, and
   pairing it with a trash icon makes the two read as one set. */
.invd-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border, rgba(120,140,170,.18));
}
.invd-act {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Every decoration off. Both neumorphic.css and embossed.css hand every
     <button> a pill background and shadow from a catch-all at (0,3,2) — higher
     than this rule — so !important is what beats it, not specificity. Same trap
     as the repairs tracking buttons. */
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(120, 132, 150, 0.62);
  cursor: pointer;
  /* ENGRAVED — cut into the panel rather than sitting on it. The FILTER form,
     because these are an SVG glyph and a PNG: there is no text to shadow, just
     an alpha silhouette, which is what drop-shadow() traces.
     Dark up-left, light down-right — the same light source as every other
     engraved element in the app. */
  filter:
    drop-shadow(-1px -1px 1px rgba(63, 74, 86, 0.30))
    drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.95));
  transition: color .15s ease, transform .15s ease;
}
/* The same hover the row's Edit button has always had: a 1px lift on the button
   and the glyph scaling to 1.3. Borrowed rather than invented so all three
   controls answer the pointer identically — that consistency is what makes them
   read as one set now that none of them has a badge to group them. */
.invd-act:hover  { color: rgba(90, 104, 126, 0.95); transform: translateY(-1px); }
.invd-act:active { transform: translateY(1px); }
.invd-act:hover .invd-act-ico { transform: scale(1.3); }
/* Delete earns its colour only on hover — at rest it should not shout at you
   from a panel you opened to read. */
.invd-act-del:hover { color: #DC2626; }
.invd-act-ico {
  width: 19px; height: 19px; display: block; object-fit: contain;
  transition: transform 0.2s ease;
}

/* ── Neumorphic theme: flat rows ────────────────────────────────────────────
   neumorphic.css gives every table row a raised pill — gradient fill, and a
   shadow on the first and last cell. On the dashboard's handful of rows that is
   the point. Here it is dozens of rows, each already carrying a photo, a colour
   dot, a carrier chip, a grade badge and a battery pill, and the pill under all
   of that is one layer too many. Same opt-out the parts table takes inside
   neumorphic.css; it lives in THIS file so it reaches only the phone inventory.
   Accessories shares the .inv-table class and keeps the theme's default.

   This sheet loads BEFORE neumorphic.css, so these win on specificity rather
   than order: (0,2,3) with !important beats the theme's (0,1,3) !important on
   the fill, and (0,3,3) beats its (0,2,3) on the shadows.

   Flat, but one step lighter than the ground: at --neu-bg the rows would
   dissolve into the page, and the 8px row spacing would read as nothing. */
body.neu-mode .inv-table tbody td { background: #edf1f9 !important; }
body.neu-mode .inv-table tbody td:first-child,
body.neu-mode .inv-table tbody td:last-child { box-shadow: none; }

/* Hover: the row LIFTS. The base sheet's hover is a white tint on the <tr>,
   which the theme paints over cell by cell, so nothing showed. In soft UI a row
   that only changes colour reads as broken anyway — the raised pill the rows
   gave up at rest comes back under the pointer, using the theme's own shadow
   values so a hovered row here matches a resting row everywhere else. Ground
   colour rather than the resting fill: a raised object is the same colour as
   the surface it rises from. Only .inv-row, so the expanded detail panel under
   an open row stays put. */
body.neu-mode .inv-table tbody td { transition: background 0.18s ease, box-shadow 0.18s ease; }
body.neu-mode .inv-table tbody tr.inv-row:hover td { background: var(--neu-bg) !important; }
body.neu-mode .inv-table tbody tr.inv-row:hover td:first-child {
  box-shadow: -5px 5px 11px var(--neu-dark), -5px -5px 11px var(--neu-light);
}
body.neu-mode .inv-table tbody tr.inv-row:hover td:last-child {
  box-shadow: 5px 5px 11px var(--neu-dark), 5px -5px 11px var(--neu-light);
}

/* ── Location and Date columns: not drawn ───────────────────────────────────
   Both still show in the panel a row expands into, so the list does not need
   them twice. Hidden rather than removed: the search matches on
   row.textContent and the location tabs read data-location, and display:none
   leaves both intact where deleting the cells would not.

   Positions counted from the thumbnail column: 10 = Location, 11 = Date, the
   same in both <thead>s and all three row templates. A column added ahead of
   them moves these numbers. tr.inv-row keeps the expanded detail row, which is
   a single colspan cell, out of it.

   By id, NOT by .inv-table: the Decibels share page loads this sheet and builds
   its own .inv-table with the same row class, and its Sold table's tenth
   column is the Payment Receipt upload — which this rule made vanish for a
   day. The two ids exist only on the phone inventory page. */
#invTable thead th:nth-child(10),
#invTable thead th:nth-child(11),
#invTable tbody tr.inv-row td:nth-child(10),
#invTable tbody tr.inv-row td:nth-child(11),
#decInvTable thead th:nth-child(10),
#decInvTable thead th:nth-child(11),
#decInvTable tbody tr.inv-row td:nth-child(10),
#decInvTable tbody tr.inv-row td:nth-child(11) { display: none; }