/* ==========================================================================
   Pulse Book — shared app-wide component styles
   Loaded after style.css so these win over the HexaDash theme defaults.
   Reusable building blocks for tables, status indicators, and row actions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Status pills — thin & pill-shaped (replaces the chunky circular .badge look)

   Usage:
     <span class="pb-pill pb-pill--success">Active</span>
     <span class="pb-pill pb-pill--muted">Inactive</span>
   Variants: success, danger, warning, info, muted, primary
   -------------------------------------------------------------------------- */
.pb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  height: 22px;
  padding: 0 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}

.pb-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
  flex-shrink: 0;
}

/* A pill that should not show the leading status dot. */
.pb-pill--nodot::before { display: none; }

.pb-pill--success { background: rgba(22, 163, 74, 0.10);  color: #15803d; border-color: rgba(22, 163, 74, 0.20); }
.pb-pill--danger  { background: rgba(220, 38, 38, 0.10);  color: #dc2626; border-color: rgba(220, 38, 38, 0.20); }
.pb-pill--warning { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.22); }
.pb-pill--info    { background: rgba(47, 128, 237, 0.10); color: #2563eb; border-color: rgba(47, 128, 237, 0.20); }
.pb-pill--primary { background: rgba(123, 53, 204, 0.10); color: #6f2dbc; border-color: rgba(123, 53, 204, 0.20); }
.pb-pill--muted   { background: rgba(100, 116, 139, 0.10); color: #64748b; border-color: rgba(100, 116, 139, 0.18); }

/* --------------------------------------------------------------------------
   Compact icon action buttons — for table rows (Edit / Delete / View …)

   Usage:
     <div class="pb-row-actions">
       <button class="pb-icon-btn" title="Edit"><i class="fa fa-pen"></i></button>
       <button class="pb-icon-btn pb-icon-btn--danger" title="Delete"><i class="fa fa-trash"></i></button>
     </div>
   -------------------------------------------------------------------------- */
.pb-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.pb-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #d7e4f5;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}
.pb-icon-btn:hover {
  border-color: #8cc8ff;
  color: #1d4ed8;
  background: rgba(47, 128, 237, 0.08);
}
.pb-icon-btn:focus-visible {
  outline: 2px solid rgba(47, 128, 237, 0.35);
  outline-offset: 1px;
}

.pb-icon-btn--danger:hover {
  border-color: #fca5a5;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

/* --------------------------------------------------------------------------
   Document line-item tables (sale invoice, quotation, PO, PI, cash sale,
   credit/debit note, proforma, delivery order, goods received, payment
   voucher, ...). Every composer wraps its <table> in a
   `.settings-XX-compose-items` element and leads with the descriptive
   column (Product / Description / Source Type).

   The descriptive first column should never soft-wrap onto several lines.
   Keep it on a single line; the surrounding `.table-responsive` wrapper (or
   the wrapper's own overflow) handles horizontal overflow on narrow
   viewports without clipping the trailing delete-action column.
   -------------------------------------------------------------------------- */
[class*="-compose-items"] thead th:first-child {
  white-space: nowrap;
}

/* The product-name cell is rendered with an inline `white-space: pre-line`,
   which inline styles would otherwise keep above this rule — keep the name on
   a single line. (Genuine multi-line descriptions use explicit <br> tags, so
   they still break correctly.) */
[class*="-compose-items"] tbody td:first-child .pb-line-item__name {
  white-space: nowrap !important;
}

/* Remarks / Notes moved out of their own column and tucked under the product
   name as a subtle, underline-style inline input that stays quiet until
   focused — far lighter per row than a bordered box in a dedicated column. */
.pb-line-item__remark {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-top: 4px;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  color: #52627a;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.3;
  outline: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.pb-line-item__remark::placeholder {
  color: #aab4c2;
  font-style: italic;
}

.pb-line-item__remark:hover {
  border-bottom-color: #d5e0ee;
}

.pb-line-item__remark:focus {
  border-bottom-color: #1f9ded;
  color: #132238;
}