/* ============================================================
   Bulk Edit Page — spreadsheet-style grid
   Depends on base.css being loaded first.
   ============================================================ */

/* ── Page layout ────────────────────────────────────────────── */
.bulk-section {
  padding: 20px 24px 60px;
}

/* ── Autosave hint ──────────────────────────────────────────── */
.autosave-hint {
  font-size: 12px;
  color: var(--color-text-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}
.autosave-hint svg { flex-shrink: 0; }

/* ── Spreadsheet table overrides ────────────────────────────── */
.bulk-table {
  table-layout: fixed;
}

.bulk-table thead th {
  font-size: 11px;
  padding: 10px 8px;
}

/* Column widths */
.bcol-img   { width: 56px;  text-align: center; }
.bcol-num   { width: 110px; }
.bcol-desc  { width: auto; }   /* flex-fill */
.bcol-notes { width: 24%; }
.bcol-inv   { width: 100px; text-align: center; }
.bcol-status{ width: 36px;  text-align: center; }
.bcol-del   { width: 44px;  text-align: center; }

/* ── Zebra Striping ─────────────────────────────────────────── */
.bulk-section tbody tr:nth-child(even):not(.state-row):not(.add-row-tr) td {
  background: #f4f6f9;
}
.bulk-section tbody tr:nth-child(even):not(.state-row):not(.add-row-tr):hover td {
  background: #eaedf2;
}

/* ── Row states ─────────────────────────────────────────────── */
.bulk-table tbody tr { transition: background .1s; }

/* Row being actively edited */
.bulk-table tbody tr:focus-within td {
  background: var(--color-primary-light) !important;
}

/* New unsaved row */
.bulk-table tbody tr.is-new td {
  background: #fefce8 !important;
}
.bulk-table tbody tr.is-new:focus-within td {
  background: #fef9c3 !important;
}

/* ── Spreadsheet cell inputs ────────────────────────────────── */
.cell-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
  padding: 0;
  outline: none;
  /* Show a subtle underline only when the row is being edited */
}

.bulk-table tbody tr:focus-within .cell-input {
  /* light underline hint when row is active */
}

.cell-input::placeholder { color: var(--color-text-faint); }

/* Monospace for item number */
.cell-input.mono {
  font-family: monospace;
  font-weight: 600;
}

/* Inventory checkbox cell */
.bcol-inv-cell {
  text-align: center;
  vertical-align: middle;
}
.bcol-inv-cell input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* Checkbox + tiny label wrapper */
.inv-chk-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.inv-chk-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-faint);
  line-height: 1;
  user-select: none;
}

/* ── Save status indicator ──────────────────────────────────── */
.save-status {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity .2s;
  cursor: default;
}
.save-status.visible { opacity: 1; }

/* Spinning save indicator */
@keyframes spin { to { transform: rotate(360deg); } }
.save-status.saving::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* Saved checkmark */
.save-status.saved  { color: var(--color-success); }
.save-status.error  { color: var(--color-danger);  cursor: help; }

/* ── Delete button ──────────────────────────────────────────── */
.del-row-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-faint);
  font-size: 15px;
  line-height: 1;
  transition: color .15s, background .15s;
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
}
/* Show delete button on row hover or focus-within */
.bulk-table tbody tr:hover .del-row-btn,
.bulk-table tbody tr:focus-within .del-row-btn {
  opacity: 1;
}
.del-row-btn:hover {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

/* ── Add row button row ──────────────────────────────────────── */
.add-row-tr td {
  border-bottom: none;
  padding: 6px 8px;
}
.add-row-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.add-row-btn:hover { background: var(--color-primary-light); }

/* ── Mobile: Card Layout ────────────────────────────────────── */
@media (max-width: 900px) {
  /* FAB replaces the controls-bar add row button */
  .fab-trigger { display: none; }

  .bulk-section { padding: 12px 12px 100px; }

  /* Collapse table structure to block */
  .bulk-section table,
  .bulk-section tbody { display: block; }
  .bulk-section table thead { display: none; }

  /* State row stays centered */
  .bulk-section tbody tr.state-row { display: block; text-align: center; }
  .bulk-section tbody tr.state-row td {
    display: block;
    border: none;
    background: transparent !important;
    padding: 40px 20px;
  }

  /* Add-row button row */
  .add-row-tr       { display: block; }
  .add-row-tr td    { display: block; border: none !important; padding: 4px 0 !important; }

  /* Each data row becomes a card */
  .bulk-section tbody tr[data-id] {
    display: grid;
    grid-template-columns: 48px 1fr auto auto;
    column-gap: 8px;
    row-gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  /* Active / unsaved row states */
  .bulk-section tbody tr[data-id]:focus-within {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
  }
  .bulk-section tbody tr.is-new { background: #fefce8; }
  .bulk-section tbody tr.is-new:focus-within { background: #fef9c3; }

  /* Reset all td styles from table layout */
  .bulk-section tbody tr[data-id] td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    width: auto !important;
    min-width: 0 !important;
    vertical-align: middle;
  }
  /* Suppress desktop focus-within td background — card border handles it */
  .bulk-table tbody tr:focus-within td { background: transparent !important; }
  .bulk-table tbody tr.is-new td        { background: transparent !important; }
  .bulk-table tbody tr.is-new:focus-within td { background: transparent !important; }

  /* Grid placement: [img] | [item #] [inv] [del]
                            [description  →  →  ]
                            [notes        →  →  ]
                            [status       →  →  ] */
  .bcol-img {
    grid-column: 1;
    grid-row: 1 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bcol-num    { grid-column: 2;     grid-row: 1; align-self: center; }
  .bcol-inv    { grid-column: 3;     grid-row: 1; align-self: center; text-align: center; }
  .bcol-del    { grid-column: 4;     grid-row: 1; align-self: center; text-align: right; }
  .bcol-desc   { grid-column: 2 / 5; grid-row: 2; }
  .bcol-notes  { grid-column: 2 / 5; grid-row: 3; }
  .bcol-status { grid-column: 2 / 5; grid-row: 4; align-self: center; justify-content: flex-start; }

  /* Give cell inputs a subtle underline on mobile for legibility */
  .cell-input {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 3px;
  }
  .bulk-section tbody tr[data-id]:focus-within .cell-input {
    border-bottom-color: var(--color-primary);
  }

  /* Delete button always visible on mobile (no hover) */
  .del-row-btn { opacity: 1; }

  /* Autosave hint is redundant once cards save on blur — hide it */
  .autosave-hint { display: none; }
}