:root {
  --brand: #00838f;
  --brand-dark: #006064;
  --sidebar-w: 220px;
  /* theme colors (light) */
  --app-bg: #f4f6f8;
  --app-hover: #eef7f8;
  --app-active-bg: #e0f2f1;
  --app-active-fg: #006064;
  --app-selected: #d6eef0;
  /* table rows: hover = light wash (keeps row tints visible), selected = solid blue */
  --row-hover: rgba(25, 118, 210, .10);
  --row-selected: #bbdefb;
  --row-selected-fg: #0d2b4e;
  --row-selected-bar: #1565c0;
  --app-edit-cell: #fff9c4;
  --app-good: #e8f5e9;
  --app-bad: #ffebee;
}
[data-bs-theme=dark] {
  --app-bg: #14181c;
  --app-hover: #1f2a2e;
  --app-active-bg: #12393d;
  --app-active-fg: #6fd3dc;
  --app-selected: #164046;
  --row-hover: rgba(255, 255, 255, .08);
  --row-selected: #1d4f91;
  --row-selected-fg: #ffffff;
  --row-selected-bar: #64b5f6;
  --app-edit-cell: #3a3519;
  --app-good: rgba(25, 135, 84, .25);
  --app-bad: rgba(220, 53, 69, .25);
  --bs-body-bg: #1b2025;
  --bs-tertiary-bg: #232a30;
  --bs-secondary-bg: #2a3238;
}
body { background: var(--app-bg); font-size: .925rem; }
.bg-brand { background: var(--brand) !important; }
/* ljfence.com logo: dark text, so it sits on a white badge in the teal top bar */
.brand-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 6px; padding: 2px 6px; }
.brand-logo img { height: 30px; width: auto; display: block; }
.login-logo-wrap { padding: 8px 14px; border-radius: 10px; }
.brand-logo .login-logo { height: 60px; }
.text-brand { color: var(--brand) !important; }
.btn-brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
/* Solid action buttons using the old app's Quasar colors (btn-q + q-<color>) */
.btn-q {
  --bs-btn-color: #fff; --bs-btn-bg: var(--q); --bs-btn-border-color: var(--q);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--q); --bs-btn-hover-border-color: var(--q);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--q); --bs-btn-active-border-color: var(--q);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--q); --bs-btn-disabled-border-color: var(--q);
  --bs-btn-disabled-opacity: .35;
  font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.btn-q:hover, .btn-q:focus-visible { filter: brightness(.9); }
.btn-q:active { filter: brightness(.8); }
.btn-q:disabled { box-shadow: none; filter: grayscale(.4); }
.q-primary { --q: #1976d2; }
.q-secondary { --q: #26a69a; }
.q-negative { --q: #c10015; }
.q-info { --q: #1fa9c8; }
.q-accent { --q: #9c27b0; }
.q-brown { --q: #795548; }
.q-positive { --q: #21ba45; }
.q-deep-orange { --q: #ff5722; }
.q-teal { --q: #009688; }
.q-orange { --q: #f57c00; }
.q-purple { --q: #7b1fa2; }
.q-blue-grey { --q: #607d8b; }

.login-bg { background: linear-gradient(135deg, #006064 0%, #00838f 50%, #26a69a 100%); }

/* sidebar */
.app-shell { min-height: calc(100vh - 56px); }
.sidebar { background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); }
@media (min-width: 992px) {
  .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; }
}
.sidebar .nav-link { color: var(--bs-body-color); padding: .55rem 1rem; border-left: 3px solid transparent; font-weight: 700; }
.sidebar .nav-link:hover { background: var(--app-hover); }
.sidebar .nav-link.active { background: var(--app-active-bg); color: var(--app-active-fg); border-left-color: var(--brand); font-weight: 800; }
/* every menu entry has its own color (--mc): tinted background, left bar and
   icon; hover deepens the tint, the current page is filled with the color */
.sidebar .nav-link[data-menu] {
  --mc: #607d8b;
  margin: 2px 6px; border-radius: 6px; border-left: 4px solid var(--mc);
  background: color-mix(in srgb, var(--mc) 16%, transparent);
}
.sidebar .nav-link[data-menu] i { color: var(--mc); }
.sidebar .nav-link[data-menu]:hover { background: color-mix(in srgb, var(--mc) 30%, transparent); }
.sidebar .nav-link[data-menu].active { background: color-mix(in srgb, var(--mc) 82%, #000); border-left-color: var(--mc); color: #fff; }
.sidebar .nav-link[data-menu].active i { color: #fff; }
.sidebar .nav-link[data-menu=invoices]        { --mc: #1e88e5; }
.sidebar .nav-link[data-menu=quotes]          { --mc: #8e24aa; }
.sidebar .nav-link[data-menu=returns]         { --mc: #e53935; }
.sidebar .nav-link[data-menu=inventory]       { --mc: #fb8c00; }
.sidebar .nav-link[data-menu=parts]           { --mc: #8d6e63; }
.sidebar .nav-link[data-menu=locations]       { --mc: #00897b; }
.sidebar .nav-link[data-menu=cashflows]       { --mc: #43a047; }
.sidebar .nav-link[data-menu=payment_receipt] { --mc: #afb42b; }
.sidebar .nav-link[data-menu=sales]           { --mc: #5c6bc0; }
.sidebar .nav-link[data-menu=promotion]       { --mc: #d81b60; }
.sidebar .nav-link[data-menu=wiki]            { --mc: #00acc1; }
.sidebar .nav-link[data-menu=excel]           { --mc: #2e7d32; }
.sidebar .nav-link[data-menu=app_quotes]      { --mc: #0091ea; }
.sidebar .nav-link[data-menu=cards]           { --mc: #c9a24a; }
.sidebar .nav-link[data-menu=settings]        { --mc: #78909c; }
.sidebar .nav-link[data-menu=users]           { --mc: #f4511e; }
.sidebar .nav-link[data-menu=audit_log]       { --mc: #8e24aa; }
.sidebar .nav-link[data-menu=account]         { --mc: #9e9e9e; }
.sidebar-section { font-size: .72rem; text-transform: uppercase; color: var(--bs-secondary-color); padding: .9rem 1rem .25rem; letter-spacing: .04em; }
.main-content { min-width: 0; }

/* page header */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.page-header h1 { font-size: 1.35rem; margin: 0; }
.card-tight .card-body { padding: .75rem; }

/* tables */
.table-wrap { overflow-x: auto; }
.table-sm td, .table-sm th { vertical-align: middle; }
table.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.data-table th.sortable:hover { background: var(--app-hover); }
table.data-table tbody tr.selectable { cursor: pointer; }
/* Bootstrap paints row states with --bs-table-bg-state as an overlay over the
   row color (e.g. the red "has balance" tint), so hover keeps that tint visible
   while the selected row is covered by one solid, unmistakable color. */
table.data-table tbody tr:hover > * {
  --bs-table-bg-state: var(--row-hover);
}
table.data-table tbody tr.selected > *,
table.data-table tbody tr.selected:hover > * {
  --bs-table-bg-state: var(--row-selected);
  color: var(--row-selected-fg) !important;
  font-weight: 600;
}
table.data-table tbody tr.selected > :first-child {
  box-shadow: inset 5px 0 0 var(--row-selected-bar), inset 0 0 0 9999px var(--row-selected) !important;
}
table.data-table tbody tr.selected a,
table.data-table tbody tr.selected .text-muted,
table.data-table tbody tr.selected .text-success,
table.data-table tbody tr.selected .text-info { color: var(--row-selected-fg) !important; }
.table thead th { background: var(--bs-tertiary-bg); font-weight: 600; font-size: .85rem; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-child td { background: var(--bs-tertiary-bg); font-size: .85rem; color: var(--bs-secondary-color); }
.row-child td:first-child { padding-left: 1.5rem; }

/* summary tiles */
.stat { background: var(--bs-body-bg); border-radius: .5rem; padding: .6rem .8rem; border: 1px solid var(--bs-border-color); height: 100%; }
.stat .label { font-size: .75rem; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }
.stat .value { font-size: 1.15rem; font-weight: 600; }

/* forms */
.form-label { font-size: .8rem; margin-bottom: .15rem; color: var(--bs-secondary-color); }
.required::after { content: " *"; color: #dc3545; }
.items-table input.form-control, .items-table select.form-select { padding: .2rem .4rem; font-size: .85rem; }
.items-table td { padding: .25rem; }
.suggest-list { position: absolute; z-index: 1080; max-height: 320px; overflow-y: auto; min-width: 320px; }
.position-relative > .suggest-list { top: 100%; left: 0; }

/* quote / invoice editor: colored sections so Customer and Company stand out */
:root {
  --sec-customer-bg: #e3f0fd; --sec-customer-accent: #1565c0;
  --sec-company-bg: #e4f4e8;  --sec-company-accent: #2e7d32;
}
[data-bs-theme=dark] {
  --sec-customer-bg: #16283d; --sec-customer-accent: #64b5f6;
  --sec-company-bg: #17301f;  --sec-company-accent: #81c784;
}
.sec-customer { background: var(--sec-customer-bg); border-left: 5px solid var(--sec-customer-accent); }
.sec-company  { background: var(--sec-company-bg);  border-left: 5px solid var(--sec-company-accent); }
.sec-customer .sec-title { color: var(--sec-customer-accent); }
.sec-company .sec-title  { color: var(--sec-company-accent); }

.copy-no { line-height: 1; opacity: .65; }
.copy-no:hover { opacity: 1; }
tr.selected .copy-no { color: var(--row-selected-fg); opacity: .9; }

/* editor header row (number, expire date, status, parent): bold, stand-out labels */
.doc-header .form-label {
  font-size: .9rem; font-weight: 700; color: var(--bs-emphasis-color);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem;
}
.doc-header .form-label::before {
  content: ""; display: inline-block; width: 4px; height: .9em; margin-right: .4rem;
  vertical-align: -1px; border-radius: 2px; background: var(--brand);
}
[data-bs-theme=dark] .doc-header .form-label::before { background: #4dd0e1; }
.doc-header #deNo { font-weight: 700; }
#sumCards .stat .label { font-weight: 700; color: var(--bs-emphasis-color); font-size: .8rem; }
.doc-header .form-check-label { font-weight: 600; }

/* Payment Receipt document */
.pr-doc { max-width: 760px; padding: 48px 56px; font-size: 1.05rem; line-height: 1.9; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.pr-no { text-align: right; font-size: .85rem; color: #555; line-height: 1.2; }
.pr-title { text-align: center; font-size: 1.7rem; font-weight: 800; letter-spacing: .08em; margin-bottom: 1.5rem; }
.pr-row { margin-bottom: .35rem; }
.pr-fill { display: inline-block; border-bottom: 1px solid #222; padding: 0 .4rem; line-height: 1.4; }
.pr-purpose { padding-left: 1rem; margin-bottom: .5rem; }
.pr-sig-row { display: flex; align-items: flex-end; gap: .4rem; }
.pr-sig { min-height: 1.6em; display: inline-flex; align-items: flex-end; }
.pr-sig-img { max-height: 56px; max-width: 260px; margin-bottom: -2px; }
@media print {
  .pr-doc { box-shadow: none; padding: 0; max-width: none; }
}
.pr-print { box-shadow: none; }
.pr-form-footer { position: sticky; bottom: 0; z-index: 3; background: var(--bs-tertiary-bg); }
/* public signing page (phones first) */
.pub-pr { background: #f5f5f5; }
.pub-sig canvas { height: 200px; }
/* lists on phones (invoices, quotes): few columns, short numbers, and the
   header row stays visible below the top bar and the button bar */
@media (max-width: 767.98px) {
  .phone-table table.data-table td, .phone-table table.data-table th { padding: .3rem .25rem; font-size: .8rem; }
  .phone-table td.col-no, .phone-table td.num { white-space: nowrap; }
  .phone-table td.col-customer { max-width: 110px; overflow-wrap: anywhere; line-height: 1.2; }
  /* the table fits the phone, so its horizontal scroll wrapper is not needed */
  .phone-table .table-wrap { overflow-x: visible; }
  .phone-table table.data-table thead th {
    position: sticky; top: calc(var(--nav-h, 56px) + var(--bar-h, 0px)); z-index: 4;
    --bs-table-bg: var(--brand); --bs-table-color: #fff;
    background-color: var(--brand) !important; color: #fff !important; font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--brand-dark), 0 3px 6px rgba(0, 0, 0, .35);
  }
}
@media (max-width: 576px) {
  .pr-doc:not(.pr-print) { padding: 20px 14px; font-size: .95rem; line-height: 1.7; }
  .pr-doc:not(.pr-print) .pr-title { font-size: 1.3rem; letter-spacing: .05em; margin-bottom: 1rem; }
  .pr-doc:not(.pr-print) .pr-fill { min-width: 110px !important; max-width: 100%; }
  .pr-doc:not(.pr-print) .pr-purpose { padding-left: .25rem; }
  .pr-doc:not(.pr-print) .pr-sig-row { flex-wrap: wrap; }
  .pr-doc:not(.pr-print) .pr-sig-img { max-width: 100%; }
}

.cell-edit { background: var(--app-edit-cell) !important; }
.field-good { background-color: var(--app-good) !important; }
.field-bad { background-color: var(--app-bad) !important; }

/* dark mode: Bootstrap keeps these utilities light, so map them to the theme */
[data-bs-theme=dark] .bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme=dark] .bg-light { background-color: var(--bs-tertiary-bg) !important; }
[data-bs-theme=dark] .text-bg-light { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color) !important; }
[data-bs-theme=dark] .table-success { --bs-table-bg: rgba(25,135,84,.18); --bs-table-hover-bg: rgba(25,135,84,.28); --bs-table-color: var(--bs-body-color); --bs-table-hover-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); }
[data-bs-theme=dark] .table-danger { --bs-table-bg: rgba(220,53,69,.18); --bs-table-hover-bg: rgba(220,53,69,.28); --bs-table-color: var(--bs-body-color); --bs-table-hover-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); }
[data-bs-theme=dark] .table-warning { --bs-table-bg: rgba(255,193,7,.15); --bs-table-hover-bg: rgba(255,193,7,.25); --bs-table-color: var(--bs-body-color); --bs-table-hover-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); }
[data-bs-theme=dark] .table-primary { --bs-table-bg: rgba(13,110,253,.18); --bs-table-hover-bg: rgba(13,110,253,.28); --bs-table-color: var(--bs-body-color); --bs-table-hover-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); }
[data-bs-theme=dark] .btn-close-white { filter: var(--bs-btn-close-white-filter); }
/* documents stay "paper white" inside dark pages (data-bs-theme=light on .doc) */
[data-bs-theme=light] .bg-white { background-color: #fff !important; }
[data-bs-theme=light] .bg-light { background-color: #f8f9fa !important; }

/* documents (quote / invoice / receipt) */
.doc { background: #fff; max-width: 900px; margin: 0 auto; padding: 24px; color: #222; border-radius: .25rem; }
.doc h2 { font-size: 1.5rem; }
.doc .doc-table th { background: #f1f4f6; }
.doc .totals td { padding: .15rem .5rem; }
.doc .watermark { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); font-size: 5rem; font-weight: 800; opacity: .12; pointer-events: none; white-space: nowrap; }
.sig-box { border: 1px dashed #999; border-radius: .25rem; background: #fff; }
.sig-box canvas { width: 100%; height: 160px; display: block; touch-action: none; }
.sig-img { max-height: 90px; max-width: 100%; }
.photo-thumb { width: 120px; height: 120px; object-fit: cover; border-radius: .25rem; border: 1px solid #ddd; }

.badge-status { text-transform: capitalize; }
.cursor-pointer { cursor: pointer; }
.chart-box { position: relative; height: 360px; }

/* Import Planning */
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.pivot-wrap { max-height: 520px; overflow: auto; }
.pivot td, .pivot th { font-size: .78rem; padding: .15rem .35rem; }
.pivot .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--bs-body-bg); }
.pivot thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); }
.pivot thead th.sticky-col { z-index: 3; }
.formula { font-family: var(--bs-font-monospace); font-size: .8rem; background: var(--bs-tertiary-bg); border-radius: .375rem; padding: .4rem .6rem; }
.news-list { max-height: 560px; overflow: auto; }
.news-list .list-group-item { font-size: .85rem; }
/* Import Planning: container price forecast */
.fc-summary { padding-left: 1.1rem; margin-bottom: .25rem; }
.fc-summary li { margin-bottom: .2rem; line-height: 1.4; }
#fcNews .news-list { max-height: 420px; }
.sched-table td, .sched-table th { vertical-align: top; font-size: .82rem; }
.sched-table .sched-alt td { background: var(--bs-tertiary-bg); }
.sched-table .sched-reason { min-width: 280px; max-width: 460px; }
.sched-table details summary { cursor: pointer; }
/* Spreadsheets page: the grid is light like Excel in both themes */
.xs-box { position: relative; background: #fff; border: 1px solid var(--bs-border-color); border-radius: 4px; overflow: hidden; }
/* Sum / Average / Count of the selected cells, at the right of the sheet tabs (like Google Sheets) */
/* formulas: cells picked with the mouse, and the hint while typing a formula */
.formula-ref-mark { position: absolute; pointer-events: none; z-index: 11; border: 2px dashed #1a73e8; background: rgba(26, 115, 232, .08); }
.formula-hint { position: absolute; left: 70px; bottom: 6px; z-index: 12; max-width: 60%; padding: 4px 10px; border-radius: 4px;
  background: #fff8e1; color: #5f4b00; border: 1px solid #f0d58c; font-size: .8rem; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sel-stats { position: absolute; right: 8px; bottom: 6px; z-index: 12; max-width: 70%; padding: 4px 10px; border-radius: 4px;
  background: #e8f0fe; color: #1f1f1f; border: 1px solid #c6d6f5; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: copy; }
.help-zh { cursor: help; font-size: .9em; color: var(--bs-info) !important; }
.help-zh-box summary { cursor: pointer; font-size: .85rem; }

.pdf-compact .doc-table td, .pdf-compact .doc-table th { padding: 4px 5px; font-size: .8rem; }
.pdf-compact .summary-section { padding: 8px !important; }
.pdf-compact .signature-section { margin-top: 12px !important; }
.pdf-compact .sig-box canvas { height: 100px; }
@media (max-width: 600px) { .doc { padding: 8px; } .doc .watermark { font-size: 3rem; } }

@media print {
  body { background: #fff; }
  .d-print-none, .navbar, .sidebar, .toast-container { display: none !important; }
  .main-content { padding: 0 !important; }
  .doc { padding: 0; max-width: none; }
  .card { border: 0 !important; box-shadow: none !important; }
}

/* quote / invoice editor: the totals formula with the document's numbers */
.calc-box { margin-top: .25rem; padding: .5rem .65rem; border: 1px dashed var(--bs-border-color); border-radius: 6px;
  background: var(--bs-tertiary-bg); font-size: .78rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.calc-title { font-weight: 600; margin-bottom: .3rem; color: var(--bs-secondary-color); }
.calc-row { display: grid; grid-template-columns: 6.5rem 1fr auto auto; gap: .15rem .4rem; align-items: baseline; padding: .12rem 0; }
.calc-row + .calc-row { border-top: 1px solid var(--bs-border-color-translucent); }
.calc-label { font-weight: 600; }
.calc-expr { color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.calc-eq { color: var(--bs-secondary-color); }
.calc-res { text-align: right; white-space: nowrap; min-width: 5.5rem; }
.calc-sub .calc-label { font-weight: 500; }
.calc-total { font-size: .82rem; }
@media (max-width: 575.98px) {
  .calc-row { grid-template-columns: 1fr auto auto; }
  .calc-expr { grid-column: 1 / -1; order: 2; }
}

/* Business Cards page */
.card-thumb { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #d8b25a; }
.card-thumb-empty { display: inline-grid; place-items: center; background: #145a41; color: #f6e2a6; font-weight: 700; font-size: .8rem; }
.card-avatar-edit { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #2a8a63, #0c2f23); color: #f6e2a6; font-size: 1.8rem; font-weight: 600; box-shadow: 0 0 0 3px #d8b25a; }
.card-avatar-edit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* App Quotes page */
.aq-row { cursor: pointer; }
.aq-layout-box { border: 1px solid var(--bs-border-color); border-radius: 6px; background: #fafafa; padding: 6px; }
.aq-layout { width: 100%; max-height: 360px; display: block; }
.aq-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); vertical-align: -1px; margin-right: 4px; }
.aq-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.aq-photos a { position: relative; display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--bs-border-color); aspect-ratio: 4 / 3; background: #eee; }
.aq-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aq-photos span { position: absolute; left: 4px; bottom: 4px; font-size: .7rem; background: rgba(0,0,0,.6); color: #fff; padding: 0 5px; border-radius: 3px; }
.aq-cnotes { white-space: pre-wrap; border-left: 4px solid #0091ea; background: rgba(0,145,234,.08); padding: 8px 12px; border-radius: 4px; }