/* ───────────────────────────────────────────────────────────────────────────
   Shared styling for the Procurement module screens (ADM-PROC-02 … 05).
   Loaded after app.css. Page-specific rules live in each HTML's <style>.
   ─────────────────────────────────────────────────────────────────────────── */

/* Hint / help glyph */
.proc-hint { display: inline-flex; color: var(--muted-foreground); cursor: help; }

/* ── Dropdown menus (sort / kebab / date range) ── */
.proc-menu-wrap { position: relative; }
.proc-menu-scrim { position: fixed; inset: 0; z-index: 39; }
.proc-menu {
  position: absolute; top: calc(100% + 6px); z-index: 40;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 5px; min-width: 180px; animation: zoom-in .12s ease-out;
}
.proc-menu.right { right: 0; }
.proc-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: var(--radius-md);
  font-size: 13px; color: var(--foreground); text-align: left;
}
.proc-menu-item:hover { background: var(--accent); }
.proc-menu-item.active { font-weight: 600; }
.proc-menu-item.danger { color: var(--destructive); }
.proc-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }

/* ── Table rows ── */
.proc-row { cursor: pointer; }
.proc-dl { font-size: 11px; margin-top: 2px; font-weight: 500; }
.proc-dl-ok { color: var(--muted-foreground); }
.proc-dl-soon { color: var(--status-pending-fg, var(--warning)); }
.proc-dl-due { color: var(--status-pending-fg, var(--warning)); font-weight: 600; }
.proc-dl-overdue { color: var(--destructive); font-weight: 600; }

/* ── Tone chips for activity / pending icons ── */
.proc-ic {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.tone-success { background: var(--success-soft); color: var(--success); }
.tone-warning { background: var(--warning-soft); color: oklch(0.5 0.13 65); }
.tone-info    { background: var(--info-soft); color: var(--info); }
.tone-soil    { background: var(--soil-soft); color: var(--soil-fg); }
.tone-avocado { background: var(--avocado-soft); color: var(--avocado-fg); }
.tone-pulp    { background: var(--pulp-soft); color: var(--pulp-fg); }
/* Dark-mode legible icon/text on soft tone chips */
.dark .tone-success { color: oklch(0.82 0.13 145); }
.dark .tone-warning { color: oklch(0.84 0.13 82); }
.dark .tone-info    { color: oklch(0.82 0.12 235); }

/* ── Collapsible section header (button) ── */
.proc-collapse-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; background: transparent; border: none; cursor: pointer;
  padding: 18px 20px 14px; text-align: left; border-radius: var(--radius-md);
  transition: background-color .12s;
}
.proc-collapse-head:hover { background: var(--accent); }
.proc-collapse-head .card-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.proc-collapse-head .card-desc { font-size: 12.5px; color: var(--muted-foreground); margin-top: 3px; }

/* ── Inline empty (inside a table / card) ── */
.proc-inline-empty {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 40px 20px; color: var(--muted-foreground); text-align: left;
}
.proc-inline-empty > svg { color: var(--muted-foreground); flex-shrink: 0; }

/* ── Skeletons ── */
.sk { background: var(--muted); border-radius: 6px; height: 12px; position: relative; overflow: hidden; }
.sk.lg { height: 22px; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.35), transparent);
  transform: translateX(-100%); animation: sk-shimmer 1.3s infinite;
}
.dark .sk::after { background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.08), transparent); }
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }

/* ── Filter chips row ── */
.proc-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 9999px;
  background: var(--card); box-shadow: var(--shadow-xs);
  font-size: 12.5px; font-weight: 500; color: var(--foreground);
  cursor: pointer; white-space: nowrap;
}
.proc-chip:hover { background: var(--accent); }
.proc-chip.on { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.proc-chip .chip-x { display: inline-flex; opacity: 0.7; }
.proc-chip .chip-count {
  background: var(--muted); color: var(--muted-foreground);
  border-radius: 9999px; padding: 0 6px; font-size: 10.5px; line-height: 16px;
}
.proc-chip.on .chip-count { background: oklch(1 0 0 / 0.2); color: inherit; }

/* ── Toolbar ── */
.proc-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.proc-search {
  position: relative; flex: 1; min-width: 220px; max-width: 420px;
}
.proc-search > svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted-foreground); pointer-events: none;
}
.proc-search input { padding-left: 34px; }
.proc-seg {
  display: inline-flex; background: var(--muted); padding: 3px; border-radius: var(--radius-md); gap: 2px;
}
.proc-seg button {
  background: transparent; border: none; cursor: pointer;
  height: 28px; width: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--muted-foreground);
}
.proc-seg button.active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }

/* ── Bulk action bar (multi-select) ── */
.proc-bulkbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin-bottom: 14px;
  background: var(--foreground); color: var(--background);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  animation: zoom-in .12s ease-out;
}
.proc-bulkbar .bb-count { font-size: 13px; font-weight: 600; }
.proc-bulkbar .bb-spacer { flex: 1; }
.proc-bulkbar .bb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: var(--radius-md);
  border: 1px solid oklch(1 0 0 / 0.18); background: oklch(1 0 0 / 0.08);
  color: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.proc-bulkbar .bb-btn:hover { background: oklch(1 0 0 / 0.16); }
.proc-bulkbar .bb-btn.danger { color: oklch(0.82 0.12 25); }

/* ── Pagination ── */
.proc-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 4px 0; flex-wrap: wrap;
}
.proc-pager .pg-info { font-size: 12.5px; color: var(--muted-foreground); }
.proc-pager .pg-nav { display: flex; align-items: center; gap: 4px; }
.proc-pg-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground); cursor: pointer;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
}
.proc-pg-btn:hover:not(:disabled) { background: var(--accent); }
.proc-pg-btn.active { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.proc-pg-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Checkbox ── */
.proc-check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--input); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; color: transparent;
  transition: background-color .12s, border-color .12s;
}
.proc-check.on { background: var(--foreground); border-color: var(--foreground); color: var(--background); }

/* ── Shared form/detail header bar (used by PROC-03 & PROC-04) ── */
.cr-page { max-width: 1320px; }
.cr-head { display: flex; align-items: center; gap: 12px 16px; margin-bottom: 20px; flex-wrap: wrap; }
.cr-head-title { flex: 1 1 240px; min-width: 0; }
.cr-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.cr-autosave { font-size: 12px; margin-top: 3px; display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); }
.cr-save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); display: inline-block; }
.cr-save-dot.saving { background: var(--warning); }
.cr-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cr-discard { background: none; border: none; cursor: pointer; color: var(--muted-foreground); font-size: 13px; font-weight: 500; padding: 0 8px; height: 36px; }
.cr-discard:hover { color: var(--destructive); }