/* =====================================================================
   CH Interior — application styles (Bootstrap 5.3 base)
   Palette: navy navigation, white/light-grey surfaces, blue accent.
   Signature detail: the sidebar carries a faint pleated-drape texture,
   a nod to the curtain fabrics the business sells. Everything else stays quiet.

   Loaded after Bootstrap 5.3 (public/assets/vendor/bootstrap) by every layout.
   To restyle the app, change the design tokens in :root first — most rules
   use them (colours, radii, sidebar width, top-bar height).

   Contents
     Fonts & design tokens ...... @font-face, :root variables (+ Bootstrap overrides)
     Shell ...................... sidebar, top bar, main area, footer, mobile drawer
     Page header, cards, stat cards
     Tables, filters, forms, buttons, badges, alerts, empty states, detail lists
     Line item editor & picker .. used by public/assets/js/app.js
     Document view, auth & installer pages, misc components
     Print rules ................ hide navigation when printing app pages
     Later additions ............ product name column, footer grid, print credit
     Email ...................... attachment chip, placeholder chips, SMTP test output (v1.1)
     Calculator ................. desk calculator, history, tool results (v1.1)
     Backup by email ............ schedule status, cron command (v1.2)
     Demo data .................. top-bar badge, demo page lists (v1.2)
     Knowledge Base ............. search, category cards, article typography, FAQ, side menu (v1.3)
   Class prefix conventions: .chip-* (icon colours), .badge-soft-* (status badges,
   see status_badge() in app/helpers.php), .stat-* (summary cards).

   Author:    Shamath Udakara — Senior Software Architect, ICT ASYST PTY LTD, Australia
              Phone +61 1800 427 978 · https://ictasyst.com.au
   Copyright: 2026 ICT ASYST PTY LTD. All rights reserved.
   ===================================================================== */

/* ---------- Fonts & design tokens ---------- */
/* Plus Jakarta Sans (OFL licence), bundled in public/assets/vendor/fonts — no external font requests. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../vendor/fonts/PlusJakartaSans-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../vendor/fonts/PlusJakartaSans-Italic-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* Design tokens. --chi-* are app colours/sizes; --bs-* override Bootstrap's defaults. */
:root {
  --chi-navy: #12233f;
  --chi-navy-deep: #0c182d;
  --chi-navy-line: rgba(255, 255, 255, 0.08);
  --chi-accent: #2f5bd3;
  --chi-accent-hover: #2449b0;
  --chi-accent-soft: #e8eefc;
  --chi-canvas: #f3f5f9;
  --chi-surface: #ffffff;
  --chi-line: #e2e6ee;
  --chi-line-strong: #cfd5e1;
  --chi-ink: #182234;
  --chi-muted: #667085;
  --chi-subtle: #98a2b3;
  --chi-success: #16794c;
  --chi-warning: #a15c07;
  --chi-danger: #b42318;
  --chi-sidebar-w: 248px;
  --chi-topbar-h: 62px;
  --chi-radius-lg: 12px;
  --chi-radius: 8px;
  --chi-radius-sm: 6px;
  --chi-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);

  --bs-body-font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 0.875rem;
  --bs-body-color: var(--chi-ink);
  --bs-body-bg: var(--chi-canvas);
  --bs-border-color: var(--chi-line);
  --bs-primary: var(--chi-accent);
  --bs-primary-rgb: 47, 91, 211;
  --bs-link-color: var(--chi-accent);
  --bs-link-color-rgb: 47, 91, 211;
  --bs-link-hover-color: var(--chi-accent-hover);
  --bs-border-radius: var(--chi-radius);
  --bs-secondary-color: var(--chi-muted);
}

body {
  background: var(--chi-canvas);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.003em;
}

h1, h2, h3, h4, h5, h6 { color: var(--chi-ink); letter-spacing: -0.015em; }
.num, .table td.text-end, .totals-table td, .stat-value { font-variant-numeric: tabular-nums; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .page-link:hover, .list-group-item:hover { text-decoration: none; }

:focus-visible { outline: 2px solid var(--chi-accent); outline-offset: 2px; }

/* ---------- Shell ---------- */
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--chi-sidebar-w);
  background-color: var(--chi-navy);
  /* Pleated drape: soft vertical folds, barely visible */
  background-image:
    linear-gradient(180deg, rgba(12, 24, 45, 0) 0%, rgba(12, 24, 45, 0.55) 100%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.000) 0px,
      rgba(255, 255, 255, 0.022) 9px,
      rgba(255, 255, 255, 0.000) 18px,
      rgba(0, 0, 0, 0.060) 27px,
      rgba(255, 255, 255, 0.000) 36px);
  color: #c9d3e6;
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: transform .2s ease;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--chi-topbar-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--chi-navy-line);
  color: #fff;
}
.sidebar-brand:hover { text-decoration: none; color: #fff; }
.brand-mark {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #3b6ae6 0%, #2447a8 100%);
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em; color: #fff;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12);
  position: relative; overflow: hidden;
}
.brand-mark::after { /* folded corner, like a fabric swatch */
  content: ""; position: absolute; right: 0; top: 0; width: 10px; height: 10px;
  background: linear-gradient(225deg, var(--chi-navy) 50%, rgba(255,255,255,.35) 50%);
}
.brand-logo { max-height: 38px; max-width: 150px; background: #fff; border-radius: 6px; padding: 3px 6px; }
.brand-text { line-height: 1.15; }
.brand-text strong { display: block; font-size: 0.95rem; font-weight: 700; }
.brand-text small { color: #8fa0bf; font-size: 0.72rem; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px 20px; }
.sidebar-section { color: #7f90b0; font-size: 0.72rem; font-weight: 600; padding: 16px 10px 6px; }
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: 11px;
  color: #c9d3e6; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 2px; font-weight: 500;
  border-left: 3px solid transparent;
}
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; color: #8fa0bf; }
.sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.sidebar-nav .nav-link.active {
  background: rgba(59, 106, 230, 0.20); color: #fff;
  border-left-color: #5b86f0;
}
.sidebar-nav .nav-link.active i { color: #9db8ff; }
.sidebar-footer { padding: 12px; border-top: 1px solid var(--chi-navy-line); }
.sidebar-footer .btn-logout { color: #c9d3e6; width: 100%; text-align: left; display: flex; gap: 11px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent; }
.sidebar-footer .btn-logout:hover { background: rgba(255,255,255,.06); color: #fff; }

.main { margin-left: var(--chi-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin .2s ease; }

.topbar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--chi-topbar-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--chi-line);
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
}
.topbar .company-name { font-weight: 600; color: var(--chi-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .btn-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--chi-line); background: #fff; color: var(--chi-ink); position: relative; padding: 0; }
.topbar .btn-icon:hover { background: var(--chi-canvas); }
.notif-dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--chi-danger); color: #fff; font-size: 0.68rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--chi-ink); }
.user-chip:hover { border-color: var(--chi-line); background: #fff; }
.avatar { width: 34px; height: 34px; border-radius: 9px; background: var(--chi-accent-soft); color: var(--chi-accent); display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; }
.user-chip .meta { line-height: 1.15; text-align: left; }
.user-chip .meta small { color: var(--chi-muted); font-size: 0.72rem; }

.content { padding: 24px 28px 40px; flex: 1; }
.app-footer { padding: 14px 28px; color: var(--chi-subtle); font-size: 0.78rem; border-top: 1px solid var(--chi-line); background: #fff; }

body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .main { margin-left: 0; }
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .main { margin-left: 0; }
  body.sidebar-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(12, 24, 45, .45); z-index: 1035; }
  .content { padding: 18px 14px 32px; }
  .topbar { padding: 0 14px; }
}

/* ---------- Page header ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.page-header h1 { font-size: 1.45rem; font-weight: 700; margin: 0; }
.page-header .subtitle { color: var(--chi-muted); margin: 4px 0 0; }
.breadcrumb { font-size: 0.78rem; margin-bottom: 6px; --bs-breadcrumb-divider-color: var(--chi-subtle); }
.breadcrumb a { color: var(--chi-muted); }
.breadcrumb-item.active { color: var(--chi-subtle); }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--chi-line); border-radius: var(--chi-radius-lg); box-shadow: var(--chi-shadow); background: var(--chi-surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--chi-line); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-header h2, .card-title { font-size: 0.98rem; font-weight: 700; margin: 0; }
.card-body { padding: 18px; }
.card-footer { background: #fafbfd; border-top: 1px solid var(--chi-line); padding: 12px 18px; }

/* Summary (stat) cards */
.stat-card { display: block; color: inherit; height: 100%; padding: 16px 18px; transition: border-color .15s ease; }
a.stat-card:hover { text-decoration: none; border-color: var(--chi-line-strong); }
.stat-card .stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.stat-label { color: var(--chi-muted); font-size: 0.8rem; font-weight: 500; }
.stat-value { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.stat-value small { font-size: 0.75rem; color: var(--chi-muted); font-weight: 600; margin-right: 3px; }
.stat-note { font-size: 0.76rem; color: var(--chi-subtle); margin-top: 4px; }
.icon-chip { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 1.05rem; }
.chip-blue { background: #e8eefc; color: #2f5bd3; }
.chip-green { background: #e5f4ec; color: #16794c; }
.chip-amber { background: #fdf1df; color: #a15c07; }
.chip-red { background: #fde8e7; color: #b42318; }
.chip-slate { background: #eef1f6; color: #475467; }
.chip-violet { background: #efebfd; color: #5b3fd1; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 0.65rem 0.85rem; border-bottom-color: #edf0f5; vertical-align: middle; }
.table thead th { color: var(--chi-muted); font-weight: 600; font-size: 0.78rem; background: #f8f9fc; border-bottom: 1px solid var(--chi-line); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f6f8fd; }
.table .cell-title { font-weight: 600; color: var(--chi-ink); }
.cell-sub { color: var(--chi-muted); font-size: 0.78rem; }
.table-actions { white-space: nowrap; text-align: right; }
.table-actions .btn { padding: 0.2rem 0.45rem; }
.table-responsive { border-radius: 0 0 var(--chi-radius-lg) var(--chi-radius-lg); }
tr.row-muted td { color: var(--chi-subtle); }
.table tfoot td, .table tfoot th { font-weight: 700; background: #f8f9fc; }

/* ---------- Filters ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; padding: 14px 18px; border-bottom: 1px solid var(--chi-line); }
.filter-bar .form-control, .filter-bar .form-select { min-width: 140px; }
.filter-bar .search { flex: 1 1 220px; min-width: 200px; }
.filter-bar label { font-size: 0.74rem; color: var(--chi-muted); margin-bottom: 3px; display: block; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: 0.8rem; color: #344054; margin-bottom: 5px; }
.form-control, .form-select { border-color: var(--chi-line-strong); border-radius: var(--chi-radius); font-size: 0.875rem; padding: 0.45rem 0.7rem; background-color: #fff; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #f4f6fa; color: #475467; }
.form-select.form-select-sm, .input-group-sm > .form-select { padding-right: 1.6rem; background-position: right 0.4rem center; }
.form-control:focus, .form-select:focus { border-color: #7d9bf0; box-shadow: 0 0 0 3px rgba(47, 91, 211, 0.15); }
.form-control-sm, .form-select-sm { padding: 0.3rem 0.55rem; font-size: 0.8rem; }
.form-text { color: var(--chi-subtle); font-size: 0.76rem; }
.required::after { content: " *"; color: var(--chi-danger); }
.form-section-title { font-size: 0.92rem; font-weight: 700; margin: 4px 0 12px; }
.form-section + .form-section { border-top: 1px dashed var(--chi-line); padding-top: 18px; margin-top: 8px; }
.input-group-text { background: #f8f9fc; border-color: var(--chi-line-strong); color: var(--chi-muted); font-size: 0.8rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--chi-radius); font-weight: 600; font-size: 0.85rem; padding: 0.45rem 0.9rem; }
.btn-sm { font-size: 0.78rem; padding: 0.28rem 0.6rem; border-radius: var(--chi-radius-sm); }
.btn-primary { --bs-btn-bg: var(--chi-accent); --bs-btn-border-color: var(--chi-accent); --bs-btn-hover-bg: var(--chi-accent-hover); --bs-btn-hover-border-color: var(--chi-accent-hover); --bs-btn-active-bg: #1f3f99; --bs-btn-disabled-bg: var(--chi-accent); --bs-btn-disabled-border-color: var(--chi-accent); }
.btn-outline-primary { --bs-btn-color: var(--chi-accent); --bs-btn-border-color: #b7c7f3; --bs-btn-hover-bg: var(--chi-accent); --bs-btn-hover-border-color: var(--chi-accent); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--chi-line-strong); --bs-btn-hover-bg: #f5f7fb; --bs-btn-hover-border-color: var(--chi-line-strong); --bs-btn-color: var(--chi-ink); }
.btn .spinner-border { width: 0.9rem; height: 0.9rem; border-width: 2px; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; font-size: 0.72rem; padding: 0.32em 0.6em; border-radius: var(--chi-radius-sm); }
.badge-soft-success { background: #e5f4ec; color: #146c43; }
.badge-soft-secondary { background: #eef1f6; color: #475467; }
.badge-soft-info { background: #e5f0fb; color: #175cd3; }
.badge-soft-warning { background: #fdf1df; color: #93500a; }
.badge-soft-danger { background: #fde8e7; color: #b42318; }
.badge-soft-primary { background: #e8eefc; color: #2449b0; }
.badge-soft-dark { background: #e4e7ec; color: #1d2939; }

/* ---------- Alerts / flash ---------- */
.flash-stack .alert { border-radius: var(--chi-radius); border: 1px solid transparent; display: flex; gap: 10px; align-items: flex-start; box-shadow: var(--chi-shadow); }
.alert-success { background: #ecf8f1; border-color: #bfe5cf; color: #0f5132; }
.alert-danger { background: #fef1f0; border-color: #f5c6c2; color: #8f1d14; }
.alert-warning { background: #fef7ea; border-color: #f6d9a5; color: #7a4407; }
.alert-info { background: #edf3fd; border-color: #c4d5f7; color: #1e3f8a; }

/* ---------- Empty states ---------- */
.empty-state { text-align: center; padding: 44px 20px; color: var(--chi-muted); }
.empty-state i { font-size: 2rem; color: var(--chi-subtle); display: block; margin-bottom: 8px; }
.empty-state h3 { font-size: 1rem; font-weight: 700; color: var(--chi-ink); margin-bottom: 4px; }

/* ---------- Detail lists ---------- */
.dl-grid { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin: 0; }
.dl-grid dt { color: var(--chi-muted); font-weight: 500; }
.dl-grid dd { margin: 0; font-weight: 500; word-break: break-word; }
@media (max-width: 575.98px) { .dl-grid { grid-template-columns: 1fr; gap: 2px; } .dl-grid dd { margin-bottom: 8px; } }

/* ---------- Line item editor ----------
   Markup is generated by LineEditor in app.js; column widths per mode (sale/receipt/issue). */
.line-editor .table td { padding: 0.45rem 0.4rem; vertical-align: top; }
.line-editor .table thead th { padding: 0.55rem 0.4rem; }
.line-editor .col-product { min-width: 220px; }
.line-editor .col-desc { min-width: 200px; }
.line-editor .col-qty { width: 105px; }
.line-editor .col-unit { width: 74px; }
.line-editor .col-price { width: 125px; }
.line-editor .col-disc { width: 185px; }
.line-editor [data-f=discount_type], .totals-table select[name=discount_type] { min-width: 78px; }
.line-editor .col-total { width: 120px; }
.line-editor .col-move { width: 78px; }
.line-editor .line-total { padding-top: 0.45rem; font-weight: 600; text-align: right; }
.line-editor .stock-hint { font-size: 0.72rem; color: var(--chi-muted); margin-top: 3px; }
.line-editor .stock-hint.text-danger { color: var(--chi-danger) !important; }
.totals-table { width: 100%; }
.totals-table td { padding: 6px 0; }
.totals-table td:last-child { text-align: right; font-weight: 600; }
.totals-table tr.grand td { border-top: 1px solid var(--chi-line); padding-top: 10px; font-size: 1.05rem; font-weight: 800; }

/* Autocomplete picker */
.picker { position: relative; }
.picker-menu { position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--chi-line-strong); border-radius: var(--chi-radius); box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12); max-height: 300px; overflow-y: auto; display: none; min-width: 280px; }
.picker-menu.show { display: block; }
.picker-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f1f3f7; }
.picker-item:last-child { border-bottom: 0; }
.picker-item.active, .picker-item:hover { background: #f1f5fe; }
.picker-item .pi-title { font-weight: 600; }
.picker-item .pi-sub { color: var(--chi-muted); font-size: 0.76rem; }
.picker-empty { padding: 10px 12px; color: var(--chi-muted); }

/* ---------- Document view (on-screen invoice/quotation) ---------- */
.doc-sheet { background: #fff; border: 1px solid var(--chi-line); border-radius: var(--chi-radius-lg); box-shadow: var(--chi-shadow); padding: 28px; }
.doc-meta-label { color: var(--chi-muted); font-size: 0.76rem; }
.doc-meta-value { font-weight: 600; }

/* ---------- Auth & installer ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-aside {
  background-color: var(--chi-navy);
  background-image:
    radial-gradient(1200px 500px at 0% 100%, rgba(59, 106, 230, .28), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0px, rgba(255,255,255,.03) 14px, rgba(255,255,255,0) 28px, rgba(0,0,0,.08) 42px, rgba(255,255,255,0) 56px);
  color: #dfe6f3; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-aside h1 { color: #fff; font-size: 2rem; font-weight: 700; max-width: 18ch; line-height: 1.2; }
.auth-aside p { color: #a9b7d1; max-width: 46ch; }
.auth-aside .contact { font-size: 0.82rem; color: #8fa0bf; line-height: 1.7; }
.auth-main { display: grid; place-items: center; padding: 40px 20px; background: #fff; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { font-size: 1.4rem; font-weight: 700; }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } }
.install-wrap { max-width: 860px; margin: 40px auto; padding: 0 16px; }
.req-list li { display: flex; gap: 8px; padding: 4px 0; }

/* ---------- Misc ---------- */
.text-muted { color: var(--chi-muted) !important; }
.fw-600 { font-weight: 600; }
.small-muted { font-size: 0.78rem; color: var(--chi-muted); }
.nav-tabs { border-bottom-color: var(--chi-line); }
.nav-tabs .nav-link { color: var(--chi-muted); font-weight: 600; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; }
.nav-tabs .nav-link.active { color: var(--chi-accent); border-bottom-color: var(--chi-accent); background: transparent; }
.nav-tabs .nav-link:hover { color: var(--chi-ink); }
.pagination { --bs-pagination-color: var(--chi-ink); --bs-pagination-active-bg: var(--chi-accent); --bs-pagination-active-border-color: var(--chi-accent); --bs-pagination-border-color: var(--chi-line); --bs-pagination-font-size: 0.8rem; margin: 0; }
.dropdown-menu { border-color: var(--chi-line); box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10); border-radius: 10px; font-size: 0.85rem; padding: 6px; }
.dropdown-item { border-radius: 6px; padding: 7px 10px; }
.dropdown-item i { width: 18px; color: var(--chi-muted); margin-right: 6px; }
.modal-content { border: 0; border-radius: var(--chi-radius-lg); box-shadow: 0 24px 60px rgba(16, 24, 40, 0.25); }
.modal-header, .modal-footer { border-color: var(--chi-line); }
.chart-box { position: relative; height: 280px; }
.chart-box.sm { height: 240px; }
.list-activity { list-style: none; margin: 0; padding: 0; }
.list-activity li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #f0f2f6; }
.list-activity li:last-child { border-bottom: 0; }
.notif-menu { width: 340px; max-height: 420px; overflow-y: auto; }
.logo-preview { max-height: 80px; max-width: 240px; border: 1px solid var(--chi-line); border-radius: 8px; padding: 6px; background: #fff; }
.product-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--chi-line); background: #f8f9fc; }
.product-image-lg { max-width: 100%; max-height: 260px; border-radius: 10px; border: 1px solid var(--chi-line); }
.perm-matrix th, .perm-matrix td { text-align: center; }
.perm-matrix td:first-child, .perm-matrix th:first-child { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Print (browser printing of app pages, e.g. stock receipts) ----------
   Quotations/invoices have their own print stylesheet in views/pdf/_styles.php,
   lists/reports use views/layouts/print.php. */
@media print {
  .sidebar, .topbar, .app-footer, .page-actions, .filter-bar, .no-print, .pagination, .btn, .flash-stack { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0 !important; }
  body { background: #fff; font-size: 11px; }
  .card { box-shadow: none; border: 0; }
  .table thead th { background: #eee !important; }
  a { color: inherit; }
  /* "System by ICT ASYST" credit: hidden on screen, fixed at the bottom of every printed page */
  .print-credit { display: block !important; position: fixed; bottom: 0; left: 0; right: 0; text-align: center; font-size: 6px; color: #9aa1ad; }
}
/* ---------- Later additions ---------- */
/* Wider product-name column in the inventory table */
.col-wide { min-width: 260px; }
.filter-bar .search { flex: 2 1 260px; }
/* Footer: developer credit on the left, version on the right; stacked and centred on phones */
.app-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; }
.app-footer > :last-child { text-align: right; }
.app-footer a { color: var(--chi-accent); font-weight: 600; }
@media (max-width: 767.98px) { .app-footer { grid-template-columns: 1fr; text-align: center; } .app-footer > :last-child { text-align: center; } }

/* ---------- Email (v1.1) ---------- */
/* PDF attachment line in the "Email" pop-up */
.attachment-chip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--chi-line-strong); border-radius: var(--chi-radius); background: #fafbfd; font-size: .9rem; }
.attachment-chip .bi { font-size: 1.3rem; color: var(--chi-danger); }
.attachment-chip a { margin-left: auto; font-weight: 600; }
/* Settings → Email: clickable {placeholder} chips */
.placeholder-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--chi-line); background: var(--chi-accent-soft); color: var(--chi-accent); border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chip-btn:hover { border-color: var(--chi-accent); }
.smtp-transcript { max-height: 220px; overflow: auto; background: var(--chi-navy-deep); color: #d6deee; font-size: .75rem; padding: 10px 12px; border-radius: var(--chi-radius-sm); white-space: pre-wrap; margin: 6px 0 0; }

/* ---------- Calculator (v1.1) ---------- */
.calc-card { overflow: hidden; outline: none; }
.calc-card:focus-visible { box-shadow: 0 0 0 3px var(--chi-accent-soft); }
.calc-display { position: relative; background: var(--chi-navy); color: #fff; padding: 18px 20px 16px; text-align: right; min-height: 112px; }
.calc-flags { position: absolute; left: 18px; top: 14px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: #9db4f5; }
.calc-expr { font-size: .9rem; color: #a9b6cf; min-height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-value { font-size: 2.6rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.calc-value.is-long { font-size: 1.8rem; }
.calc-value.is-error { font-size: 1.3rem; color: #ffb4ab; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px; background: var(--chi-canvas); }
.ck { border: 1px solid var(--chi-line); background: var(--chi-surface); color: var(--chi-ink); border-radius: var(--chi-radius); height: 54px; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .08s ease, transform .08s ease; }
.ck:hover { background: #f7f9fc; border-color: var(--chi-line-strong); }
.ck:active, .ck.pressed { transform: translateY(1px); background: #eef1f6; }
.ck:focus-visible { outline: 2px solid var(--chi-accent); outline-offset: 1px; }
.ck:disabled { opacity: .45; }
.ck-fn { font-size: .95rem; color: var(--chi-muted); }
.ck-biz { height: 40px; font-size: .82rem; color: var(--chi-navy); background: #f1f4fa; letter-spacing: .02em; }
.ck-op { background: var(--chi-accent-soft); color: var(--chi-accent); border-color: transparent; font-size: 1.4rem; }
.ck-op:hover { background: #dce6fb; }
.ck-eq { background: var(--chi-accent); color: #fff; border-color: transparent; font-size: 1.5rem; }
.ck-eq:hover, .ck-eq.pressed { background: var(--chi-accent-hover); }
.ck-clear { color: var(--chi-danger); }
.calc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px 14px; background: var(--chi-canvas); border-top: 1px solid var(--chi-line); }
.calc-history { max-height: 320px; overflow-y: auto; }
.calc-history li { padding: 0; }
.calc-hist-item { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0; background: none; padding: 9px 18px; text-align: left; font-size: .88rem; font-variant-numeric: tabular-nums; }
.calc-hist-item:hover { background: #f7f9fc; }
.calc-hist-expr { color: var(--chi-muted); }
.calc-hist-res { font-weight: 700; white-space: nowrap; }
.calc-tabs-header { padding-bottom: 0; }
.calc-tabs-header .nav-link { font-size: .88rem; }
.calc-disc-type { flex: 0 0 auto; width: auto; }
.calc-result { border: 1px solid var(--chi-line); border-radius: var(--chi-radius); padding: 12px 14px; background: #fafbfd; }
.calc-table th { font-weight: 500; color: var(--chi-muted); border-color: #edf0f5; }
.calc-table td { border-color: #edf0f5; }
.calc-table tr.calc-main th, .calc-table tr.calc-main td { color: var(--chi-ink); font-size: 1.02rem; }
.calc-table tr:last-child th, .calc-table tr:last-child td { border-bottom: 0; }
@media (max-width: 575.98px) { .ck { height: 50px; } .calc-value { font-size: 2.1rem; } }

/* ---------- Backup by email (v1.2) ---------- */
.backup-status { border-top: 1px dashed var(--chi-line); padding-top: 12px; font-size: .9rem; }
.cron-line { background: var(--chi-navy-deep); color: #d6deee; font-size: .78rem; padding: 10px 12px; border-radius: var(--chi-radius-sm); white-space: pre-wrap; word-break: break-all; }

/* ---------- Demo data (v1.2) ---------- */
.demo-pill { margin-left: 12px; padding: 3px 10px; border-radius: 999px; background: #fdf1df; color: #93500a; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
a.demo-pill:hover { background: #fbe3c0; color: #7a4208; }
.demo-list { padding-left: 1.2rem; }
.demo-list li { margin-bottom: 6px; }

/* ---------- Knowledge Base (v1.3) ---------- */
.kb-search .input-group-text { background: var(--chi-surface); }
.kb-popular { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-link { padding: 2px 10px; border-radius: 999px; background: var(--chi-accent-soft); color: var(--chi-accent); font-size: .8rem; font-weight: 600; text-decoration: none; }
.chip-link:hover { background: #dce6fb; }
.kb-cat .kb-list { list-style: none; padding: 0; margin: 0; }
.kb-cat .kb-list li { padding: 8px 0; border-top: 1px solid #f0f2f6; }
.kb-cat .kb-list a { font-weight: 600; }
.kb-results li { display: block; }
.kb-article { font-size: .95rem; line-height: 1.65; max-width: 860px; }
.kb-article h2 { font-size: 1.08rem; font-weight: 700; margin: 1.6rem 0 .6rem; scroll-margin-top: calc(var(--chi-topbar-h) + 12px); }
.kb-article h2:first-child { margin-top: 0; }
.kb-article ul, .kb-article ol { padding-left: 1.3rem; }
.kb-article li { margin-bottom: .35rem; }
.kb-steps { counter-reset: kbstep; list-style: none; padding-left: 0 !important; }
.kb-steps > li { counter-increment: kbstep; position: relative; padding-left: 2.3rem; margin-bottom: .7rem; }
.kb-steps > li::before { content: counter(kbstep); position: absolute; left: 0; top: .05rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--chi-accent-soft); color: var(--chi-accent); font-weight: 700; font-size: .82rem; display: grid; place-items: center; }
.kb-note { display: flex; gap: 10px; padding: 10px 14px; border-radius: var(--chi-radius); margin: .9rem 0; font-size: .92rem; }
.kb-note > .bi { font-size: 1.1rem; line-height: 1.4; }
.kb-tip { background: #eaf6ef; color: #12523a; }
.kb-warn { background: #fdf1df; color: #7a4208; }
.kb-info { background: var(--chi-accent-soft); color: #1d3f9a; }
.kb-formula { background: #f6f7fa; border-left: 3px solid var(--chi-accent); padding: 8px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; }
.kb-table { font-size: .9rem; }
.kb-table th { background: #f6f7fa; }
.kb-article kbd { background: #fff; color: var(--chi-ink); border: 1px solid var(--chi-line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; font-size: .8rem; }
.kb-faq details { border: 1px solid var(--chi-line); border-radius: var(--chi-radius); margin-bottom: 8px; background: #fff; }
.kb-faq summary { cursor: pointer; padding: 10px 14px; font-weight: 600; }
.kb-faq details[open] summary { border-bottom: 1px solid var(--chi-line); }
.kb-faq details > div { padding: 10px 14px; }
.kb-contact { display: grid; gap: 10px; margin: .6rem 0 1rem; }
.kb-contact > div { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--chi-line); border-radius: var(--chi-radius); }
.kb-contact .bi { font-size: 1.2rem; color: var(--chi-accent); }
.kb-nav { position: sticky; top: calc(var(--chi-topbar-h) + 16px); max-height: calc(100vh - var(--chi-topbar-h) - 120px); overflow-y: auto; }
.kb-nav-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--chi-subtle); margin: 12px 0 4px; }
.kb-nav-title:first-child { margin-top: 0; }
.kb-nav ul { list-style: none; padding: 0; margin: 0; }
.kb-nav a { display: block; padding: 4px 8px; border-radius: 6px; color: var(--chi-ink); font-size: .88rem; text-decoration: none; }
.kb-nav a:hover { background: #f3f5f9; }
.kb-nav a.active { background: var(--chi-accent-soft); color: var(--chi-accent); font-weight: 600; }
@media print { .kb-faq details > div { display: block; } .kb-nav { display: none; } }