/* ── SAF Fabric Sales – Custom Styles ──────────────────────────────────────── */

/* ── Root palette ─────────────────────────────────────────────────────────── */
:root {
  --saf-dark:   #1F3864;
  --saf-blue:   #2E75B6;
  --saf-light:  #BDD7EE;
  --saf-accent: #F4A220;
  --body-bg:    #F0F4FB;
}

body {
  background: var(--body-bg);
  font-size: 0.875rem;
}

/* ── Navbar ─────────────────────────────────────────────────────────────────── */
.saf-navbar {
  background: linear-gradient(135deg, var(--saf-dark) 0%, var(--saf-blue) 100%);
  border-bottom: 3px solid var(--saf-accent);
}
.saf-navbar .navbar-brand span:first-of-type { font-size: 1.1rem; letter-spacing: .5px; }
.saf-navbar .nav-link { color: rgba(255,255,255,.8) !important; font-size: .83rem; padding: .5rem .9rem; }
.saf-navbar .nav-link.active,
.saf-navbar .nav-link:hover { color: #fff !important; }
.saf-navbar .nav-link.active { border-bottom: 2px solid var(--saf-accent); }

/* ── Stat cards ─────────────────────────────────────────────────────────────── */
.stat-card .card-body { padding: 1rem 1.2rem; }
.stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; font-size: 1.25rem;
  margin-bottom: .5rem;
}
.stat-value { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.stat-label { font-size: .72rem; color: #6c757d; text-transform: uppercase; letter-spacing: .5px; }

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card { border-radius: 12px; }
.card-header { border-radius: 12px 12px 0 0 !important; }

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.table { font-size: .82rem; }
.table th { font-size: .73rem; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; color: #555; }
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background: #EEF4FF; }

/* Ledger-specific row colouring */
.ledger-table .row-payment  td { background: #F0FFF4 !important; }
.ledger-table .row-balance-bf td { background: #FFF8E7 !important; }

/* ── Small button variant ───────────────────────────────────────────────────── */
.btn-xs {
  padding: .15rem .4rem; font-size: .72rem; border-radius: .25rem;
}
.btn-xs + .btn-xs { margin-left: 3px; }

/* ── Badge colours ──────────────────────────────────────────────────────────── */
.bg-primary-subtle { background: #DBEAFE !important; }
.bg-warning-subtle { background: #FEF9C3 !important; }
.bg-secondary-subtle { background: #F3F4F6 !important; }
.bg-success-subtle  { background: #DCFCE7 !important; }
.bg-danger-subtle   { background: #FEE2E2 !important; }
.bg-info-subtle     { background: #CFFAFE !important; }

/* ── User avatar circle in navbar ──────────────────────────────────────────── */
.avatar-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--saf-accent); color: var(--saf-dark);
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.saf-footer {
  border-top: 1px solid #DEE2E6;
  background: #F8F9FA;
}

/* ── Spinner overlay for modals ─────────────────────────────────────────────── */
.modal-content { border-radius: 14px; border: none; }
.modal-header  { border-radius: 14px 14px 0 0; }

/* ── DataTable overrides ────────────────────────────────────────────────────── */
div.dataTables_wrapper div.dataTables_filter input { border-radius: 8px; }
div.dataTables_wrapper div.dataTables_length select { border-radius: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Excel-style Ledger Table (view_customer.php)
   ═══════════════════════════════════════════════════════════════════════════ */
.excel-wrap { overflow-x: auto; padding-bottom: 60px; }

.excel-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.82rem;
  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
  min-width: 960px;
}

/* All cells */
.excel-table td,
.excel-table th {
  border: 1px solid #bbb;
  padding: 0;
}

/* ── Customer name banner ─────────────────────────────── */
.excel-table .row-cust-name td {
  background: #1F3864;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  padding: 9px 6px;
  letter-spacing: 0.6px;
  border-color: #1F3864;
}

/* ── Column header row ───────────────────────────────── */
.excel-table .row-headers th {
  background: #2E75B6;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 5px 4px;
  font-size: 0.73rem;
  white-space: nowrap;
  border-color: #1a5fa0;
}

/* ── Sale rows ───────────────────────────────────────── */
.excel-table .row-sale,
.excel-table .row-balance_bf { background: #fff; }

/* ── Payment rows (grey like screenshot) ─────────────── */
.excel-table .row-payment { background: #9e9e9e; }
.excel-table .row-payment td { border-color: #888; }

/* ── Blank separator rows ───────────────────────────── */
.excel-table .row-blank td { background: #fff; height: 18px; border-color: #ddd; }

/* ── TOTALS row ─────────────────────────────────────── */
.excel-table .row-totals td {
  background: #BDD7EE;
  font-weight: 700;
  padding: 5px 7px;
  border-color: #2E75B6;
}

/* ── OUTSTANDING BALANCE row ────────────────────────── */
.excel-table .row-outstanding td {
  background: #C00000;
  color: #fff;
  font-weight: 700;
  padding: 5px 7px;
  border-color: #800000;
}

/* ── Inputs inside cells ────────────────────────────── */
.excel-table input[type="text"],
.excel-table input[type="number"],
.excel-table input[type="date"] {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  padding: 5px 6px;
  font-size: 0.82rem;
  font-family: inherit;
  color: inherit;
  display: block;
  box-sizing: border-box;
}
.excel-table input:focus {
  background: #fff9c4;
  box-shadow: inset 0 0 0 2px #2E75B6;
}
.excel-table input[readonly] { cursor: default; color: #555; }
.excel-table .row-payment input[readonly] { color: #333; }
.excel-num { text-align: right; }
input.excel-num { text-align: right; }

/* ── Dirty / new row left border ────────────────────── */
.excel-table tr.row-dirty { box-shadow: inset 4px 0 0 #f0ad4e; }
.excel-table tr.row-new   { box-shadow: inset 4px 0 0 #198754; }
.excel-table tr.row-new td { background: #f5fff7; }
.excel-table tr.row-new.row-payment td { background: #b0b0b0; }

/* ── Actions column ─────────────────────────────────── */
.excel-table .col-act {
  width: 54px;
  text-align: center;
  white-space: nowrap;
  padding: 2px 3px !important;
}
.btn-xcel {
  border: none;
  background: none;
  padding: 2px 4px;
  cursor: pointer;
  font-size: 0.82rem;
  opacity: 0.55;
  transition: opacity .15s;
  line-height: 1;
}
.btn-xcel:hover { opacity: 1; }
.btn-xcel-save   { color: #198754; }
.btn-xcel-delete { color: #dc3545; }

/* ── Add-row buttons row ───────────────────────────── */
.excel-table .row-add-btns td {
  background: #EBF3FA;
  padding: 7px 10px !important;
  border: 1px dashed #7aacce;
}

/* ── Column widths ──────────────────────────────────── */
.excel-table .col-date { width: 92px;  min-width: 92px; }
.excel-table .col-item { min-width: 260px; }
.excel-table .col-cust { width: 120px; }
.excel-table .col-qty  { width: 52px;  text-align: right; }
.excel-table .col-uom  { width: 72px; }
.excel-table .col-rate { width: 88px;  text-align: right; }
.excel-table .col-inv  { width: 110px; text-align: right; }
.excel-table .col-pay  { width: 130px; text-align: right; }
.excel-table .col-rem  { min-width: 110px; }

/* ── Auto-save toast bar ─────────────────────────────── */
#autosave-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #1F3864;
  color: #fff;
  font-size: 0.78rem;
  padding: 7px 18px;
  z-index: 1060;
  display: none;
  align-items: center;
  justify-content: space-between;
}