:root {
  --brand: #4f46e5;        /* customizable via Settings — used ONLY for accents (sidebar, badges, links) */
  --action: #4338ca;       /* fixed, always-readable color for buttons/CTAs — NOT customizable */
  --action-dark: #372fa3;
  --bg: #f4f6fb;
  --card: #ffffff;
  --text-muted: #6b7280;
  --border: #eaecf1;
}

body { background: var(--bg); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#1f2430; }

.app-wrap { display:flex; min-height:100vh; }

.sidebar {
  width: 250px; background: #14152b; color:#cfd2e8; flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand { display:flex; align-items:center; gap:10px; padding:22px 20px; font-weight:700; font-size:1.05rem; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar .brand img { height:32px; width:32px; object-fit:contain; border-radius:6px; background:#fff; }
.sidebar .brand i { font-size:1.4rem; color: var(--brand); }
.sidebar .nav { padding: 14px 10px; gap:2px; }
.sidebar .nav-link { color:#b7bad6; padding:10px 14px; border-radius:8px; display:flex; align-items:center; gap:10px; font-size:.92rem; }
.sidebar .nav-link i { font-size:1.05rem; width:18px; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color:#fff; }
.sidebar .nav-link.active { background: var(--brand); color:#fff; font-weight:600; }
.sidebar hr { border-color: rgba(255,255,255,.08); margin: 10px 14px; }

.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar {
  height:64px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center;
  justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:10;
}
.role-badge { background: rgba(79,70,229,.12); color: var(--action-dark); font-weight:600; padding:6px 10px; border:1px solid rgba(79,70,229,.2); }
.content { padding: 24px; }

.user-menu-btn {
  border:none; border-radius:999px; padding:5px 16px 5px 5px; min-height:38px;
  background: var(--brand, #4f46e5); font-weight:600; color:#fff !important;
  box-shadow: 0 2px 6px rgba(79,70,229,.35); transition: background-color .15s, box-shadow .15s;
}
.user-menu-btn:hover { background: var(--action-dark, #4338ca); box-shadow: 0 3px 10px rgba(79,70,229,.45); }
.user-menu-btn .bi-chevron-down { color:#fff !important; opacity:.85; }
.user-avatar {
  width:32px; height:32px; border-radius:50%; background:#fff; color: var(--brand, #4f46e5);
  display:flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:700; flex-shrink:0;
}

.user-menu-dropdown { min-width:220px; padding:4px; border-radius:12px; border:1px solid var(--border); }
.user-menu-dropdown .dropdown-item { border-radius:8px; padding:8px 12px; font-size:.9rem; }
.user-menu-dropdown .dropdown-item:hover,
.user-menu-dropdown .dropdown-item:focus { background: var(--bg, #f3f4f6); }
.dropdown-item-danger { color:#dc2626 !important; }
.dropdown-item-danger:hover,
.dropdown-item-danger:focus { background:#fee2e2 !important; color:#b91c1c !important; }
.dropdown-item-danger .bi { color:inherit; }

.card { border:1px solid var(--border); border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); background: var(--card); }
.stat-card { border-radius:16px; padding:20px; background:var(--card); border:1px solid var(--border); transition: box-shadow .15s, transform .15s; }
.stat-card:hover { box-shadow:0 6px 16px rgba(16,24,40,.08); transform: translateY(-1px); }
.stat-card .value { font-size:1.6rem; font-weight:700; color:#111827; }
.stat-card .label { color:var(--text-muted); font-size:.85rem; }
.stat-card .icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem; }

.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.section-header h6 { margin:0; font-weight:700; font-size:.95rem; color:#111827; }
.section-header a { font-size:.82rem; font-weight:600; text-decoration:none; color:var(--action); }
.section-header a:hover { text-decoration:underline; }

/* Action buttons: ALWAYS use fixed --action color, never the customizable brand color,
   so a light/near-white brand pick can never make a button invisible. */
.btn-brand {
  background: var(--action);
  border: 1px solid var(--action-dark);
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
}
.btn-brand:hover { background: var(--action-dark); border-color: var(--action-dark); color:#fff; }
.btn-brand:focus { box-shadow: 0 0 0 3px rgba(67,56,202,.25); }

table.dataTable { border-collapse: separate !important; border-spacing:0; }
table.dataTable thead th { background:#f9fafc; border-bottom:1px solid var(--border) !important; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }
table.dataTable tbody td { vertical-align: middle; font-size:.9rem; color:#1f2430; }
table.dataTable tbody tr:hover { background:#fafbff; }

/* Plain (non-DataTables) tables — dashboard, list pages before JS enhancement */
.table thead th { background:#f9fafc; border-bottom:1px solid var(--border) !important; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); font-weight:700; }
.table tbody td { vertical-align: middle; font-size:.9rem; color:#1f2430; }
.table tbody tr:hover { background:#fafbff; }

/* Links inside tables (customer/invoice names etc.) — no default underline */
.table a { color: var(--action); text-decoration:none; font-weight:600; }
.table a:hover { color: var(--action-dark); text-decoration:underline; }

/* Status badges — high-contrast, distinguishable even for colorblind users via icon+text, not color alone */
.badge { font-weight:600; letter-spacing:.02em; }
.badge.bg-success { background:#16a34a !important; color:#fff !important; }
.badge.bg-secondary { background:#64748b !important; color:#fff !important; }
.badge.bg-dark { background:#111827 !important; color:#fff !important; }

.badge-status-unpaid { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.badge-status-partial { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.badge-status-paid { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }

.invoice-box { background:#fff; border-radius:16px; padding:36px; }
.invoice-box .logo { max-height:90px; }
@media print {
  .no-print { display:none !important; }
  .sidebar, .topbar { display:none !important; }
  .content { padding:0; }
  body { background:#fff; }
  .print-only { display:block !important; }

  /* Margin:0 on @page is what makes Chrome/Edge omit their own injected
     header (URL/title) and footer (date/page number) — we simulate the
     margin ourselves on print-doc instead so content isn't flush to the
     paper edge. */
  @page { margin: 0; }
  .print-doc { padding: 15mm; }

  .print-card { border: none !important; box-shadow: none !important; padding: 0 !important; }
  .print-table { font-size: .82rem; }
  .print-table th, .print-table td { border-color: #999 !important; }
  .print-link { color: inherit !important; text-decoration: none !important; }
}

/* Universal letterhead typography — the same classes are used by both
   the invoice print and the customer statement print, so the two
   documents read as one consistent, professional format. */
.letterhead-name { font-size: 1.3rem; font-weight: 700; margin-bottom: 2px; }
.letterhead-address { font-style: italic; font-size: .85rem; color: #555; }
.letterhead-contact { font-size: .85rem; color: #333; font-weight: 600; }

.print-only { display: none; }
.print-letterhead { margin-bottom: 10px; }
.print-logo { max-height: 80px; margin-bottom: 6px; }
.print-company-line { font-size: .82rem; color: #555; }
.print-doc-title { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }
.print-signature-line { border-top: 1px solid #999; padding-top: 4px; width: 220px; font-size: .82rem; color: #555; margin-left: auto; }
.print-footer .col-6:first-child .print-signature-line { margin-left: 0; }

/* Modal readability */
.modal-content { border-radius:14px; }
.modal-header { border-bottom:1px solid var(--border); }
.modal-footer { border-top:1px solid var(--border); }
.modal-backdrop.show { opacity:.55; }

@media (max-width: 991px) {
  .sidebar { position:fixed; z-index:1050; transform:translateX(-100%); transition:.25s; box-shadow: 8px 0 24px rgba(0,0,0,.25); }
  .sidebar.show { transform:translateX(0); }
  .sidebar .brand { position:relative; }
  .sidebar #sidebarClose { opacity:.85; }
  .sidebar #sidebarClose:hover { opacity:1; }

  .sidebar-backdrop {
    display:none; position:fixed; inset:0; background:rgba(15,16,32,.5);
    z-index:1040; opacity:0; transition:opacity .2s ease;
  }
  .sidebar-backdrop.show { display:block; opacity:1; }

  .table-responsive { -webkit-overflow-scrolling: touch; }
}


/* ---------------- Forms & Modals polish ---------------- */
.form-label { font-weight:600; font-size:.82rem; color:#374151; margin-bottom:6px; text-transform:uppercase; letter-spacing:.02em; }
.form-label .req { color:#dc2626; margin-left:2px; }

.form-control, .form-select {
  border:1px solid #d8dce6; border-radius:9px; font-size:.92rem;
  padding-top:9px; padding-bottom:9px; padding-left:12px; padding-right:12px;
  transition: border-color .15s, box-shadow .15s;
}
.form-select {
  padding-right: 2.25rem; /* room for Bootstrap's caret background-icon — don't shrink this */
  background-position: right .75rem center;
}
.form-control:focus, .form-select:focus {
  border-color: var(--action); box-shadow: 0 0 0 3px rgba(67,56,202,.15);
}
.form-control.is-invalid, .form-select.is-invalid { border-color:#dc2626; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.invalid-feedback { font-size:.78rem; }

/* DataTables' own length/search controls — force sane sizing so the
   native <select> arrow never overlaps the number (e.g. "Show 10 entries") */
.dataTables_length select {
  width:auto; min-width:70px; padding:6px 2.25rem 6px 10px !important;
  display:inline-block; margin:0 6px;
}
.dataTables_filter input {
  padding:6px 12px !important; margin-left:8px;
}
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
  font-size:.88rem;
}

.form-section { border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:18px; background:#fff; }
.form-section h6 { font-weight:700; font-size:.95rem; color:#111827; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border); }

/* Password visibility toggle */
.password-wrap { position:relative; }
.password-wrap input { padding-right:42px; }
.password-toggle {
  position:absolute; right:1px; top:1px; bottom:1px; width:40px; border:none; background:transparent;
  color:#9ca3af; display:flex; align-items:center; justify-content:center; border-radius:0 8px 8px 0; cursor:pointer;
}
.password-toggle:hover { color:#374151; background:#f3f4f6; }

/* Modal polish */
.modal-content { border-radius:16px; border:none; box-shadow:0 20px 50px rgba(16,24,40,.25); }
.modal-header { background:#f9fafc; border-bottom:1px solid var(--border); border-radius:16px 16px 0 0; padding:18px 22px; }
.modal-title { font-weight:700; font-size:1.05rem; }
.modal-body { padding:22px; }
.modal-footer { border-top:1px solid var(--border); padding:16px 22px; }
.modal-body .form-label { margin-top:2px; }

/* Invoice item row */
#itemsBody .form-check.form-switch { display:flex; align-items:center; gap:6px; }
#itemsBody .form-check-input { width:2.4em; height:1.3em; cursor:pointer; }
#itemsBody .form-check-label { font-size:.78rem; color:#6b7280; cursor:pointer; }
#addItemBtn { border-style:dashed; font-weight:600; }
.amount-cell { font-variant-numeric: tabular-nums; }

.totals-box { background:#f9fafc; border:1px solid var(--border); border-radius:12px; padding:18px; }

/* ---------------- Choices.js (searchable particular dropdown) ---------------- */
#itemsBody .choices { margin-bottom:0; font-size:.85rem; min-width:0; }
#itemsBody .choices__inner {
  min-height:31px; padding:3px 8px; border-radius:8px; border:1px solid #d8dce6; background:#fff;
}
#itemsBody .choices__list--single { padding:2px 16px 2px 2px; }
#itemsBody .choices.is-focused .choices__inner { border-color: var(--action); box-shadow: 0 0 0 3px rgba(67,56,202,.15); }
#itemsBody .choices__list--dropdown { border-radius:8px; border-color:#d8dce6; font-size:.85rem; }
#itemsBody .choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--action); color:#fff; }
#itemsBody .choices__input { font-size:.85rem; background:#fff; }

/* Toggle + select side-by-side row */
#itemsBody .form-check.form-switch { margin-top:2px; }

/* Customer ledger table (unified Dr/Cr running balance) */
.ledger-table thead th { font-size: .75rem; letter-spacing: .03em; color: var(--text-muted); text-transform: uppercase; }
.ledger-table tr.table-light td { font-style: italic; color: var(--text-muted); }
.ledger-table td { vertical-align: middle; }

/* Server-side pagination (CI4 Pager) */
.pagination { flex-wrap: wrap; gap:4px; }
.pagination .page-link {
  color:#374151; border-color:#e2e5ec; border-radius:8px; margin-left:0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pagination .page-item.active .page-link {
  background: var(--action); border-color: var(--action); color:#fff; font-weight:600;
  box-shadow: 0 2px 6px rgba(67,56,202,.35);
}
.pagination .page-item.disabled .page-link { color:#c2c6d1; background:#fbfbfd; border-color:#eef0f4; }
.pagination .page-link:hover:not(.active):not(:disabled) { background:#f3f4f6; border-color:#d7dae2; color:#111827; }
.pagination .page-link:focus-visible { box-shadow: 0 0 0 3px rgba(67,56,202,.2); outline:none; }

/* Searchable customer dropdown (self-contained, no 3rd-party dependency) */
.searchable-select-wrap { position: relative; }
.searchable-select-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1060;
  background: #fff; border: 1px solid #d8dce6; border-radius: 9px;
  max-height: 260px; overflow-y: auto; box-shadow: 0 10px 24px rgba(20,21,43,.12);
  padding: 4px;
}
.searchable-select-option { padding: 8px 10px; border-radius: 6px; font-size: .92rem; cursor: pointer; }
.searchable-select-option:hover { background: #f3f4f6; }
.searchable-select-empty { padding: 8px 10px; font-size: .88rem; color: var(--text-muted); }

/* Filter bars above tables */
.card form.row .form-label { margin-bottom:4px; }