/* Battery POS - modern UI layer on top of Bootstrap 5.3 */
:root { --sidebar-w: 264px; --radius: 12px; }
html { font-size: var(--app-font-size, 14px); }
body { background: var(--bs-tertiary-bg); font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
[data-bs-theme=light] { --surface: #fff; --surface-2: #f6f7fb; --line: #e6e8ef; --muted: #6b7280; --bs-tertiary-bg: #f3f5f9; }
[data-bs-theme=dark] { --surface: #161b26; --surface-2: #1c2230; --line: #2a3242; --muted: #9aa4b2; --bs-body-bg: #0f131b; --bs-tertiary-bg: #0f131b; }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--accent) 75%, #000); }
.btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); }
.text-accent { color: var(--accent) !important; }
a { color: var(--accent); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 20%, transparent); }

.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 1040; }
.brand { display: flex; gap: .65rem; align-items: center; padding: 1rem 1rem .8rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.brand-logo { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 1.3rem; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text small { color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: .5rem .5rem 1rem; }
.nav-section { margin-top: .35rem; }
.nav-section-title { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); padding: .55rem .75rem .35rem; text-align: left; }
.nav-toggle { cursor: pointer; border-radius: 8px; }
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle .caret { margin-left: auto; transition: transform .2s; }
.nav-toggle.collapsed .caret { transform: rotate(-90deg); }
.fav-title i { color: #f59e0b; }
.nav-link-item { display: flex; align-items: center; gap: .65rem; padding: .42rem .75rem; border-radius: 8px; color: var(--bs-body-color); text-decoration: none; font-size: .9rem; }
.nav-link-item.sub { padding-left: 1.05rem; }
.nav-link-item i { font-size: 1rem; color: var(--muted); width: 1.1rem; text-align: center; }
.nav-link-item kbd { margin-left: auto; font-size: .65rem; padding: .05rem .3rem; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.nav-link-item:hover { background: var(--surface-2); }
.nav-link-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
.nav-link-item.active i { color: var(--accent); }
.sidebar-widget { border-top: 1px solid var(--line); padding: .7rem .8rem; }
.clock { text-align: center; margin-bottom: .4rem; }
#clockDate { font-weight: 600; font-size: .85rem; }
#clockTime { font-size: 1.35rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.mini-cal { font-size: .72rem; }
.mini-cal .cal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: .2rem; }
.mini-cal .cal-head button { border: 0; background: var(--surface-2); border-radius: 6px; width: 24px; height: 22px; color: inherit; }
.mini-cal table { width: 100%; text-align: center; table-layout: fixed; }
.mini-cal th { color: var(--muted); font-weight: 600; }
.mini-cal td { padding: 1px 0; border-radius: 6px; }
.mini-cal td.other { color: var(--muted); opacity: .45; }
.mini-cal td.today { background: var(--accent); color: #fff; font-weight: 700; }
.mini-cal td.work { outline: 1px dashed var(--accent); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: .6rem; padding: .55rem 1.25rem; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.btn-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--bs-body-color); border: 0; }
.btn-icon:hover { background: var(--surface-2); }
.cmdk-btn { display: flex; align-items: center; gap: .6rem; min-width: min(420px, 50vw); padding: .45rem .8rem; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; color: var(--muted); }
.cmdk-btn kbd { margin-left: auto; font-size: .7rem; background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
@media (max-width: 575px) { .cmdk-btn span, .cmdk-btn kbd { display: none; } .cmdk-btn { min-width: 0; } }
.workdate-badge { text-decoration: none; color: var(--bs-body-color); padding: .4rem .7rem; border-radius: 10px; border: 1px solid var(--line); font-size: .85rem; white-space: nowrap; }
.btn-user { display: flex; gap: .5rem; align-items: center; border: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
[data-bs-theme=dark] .theme-dark-hide, [data-bs-theme=light] .theme-light-hide { display: none; }

.content { padding: 1.25rem 1.5rem 3rem; max-width: 1600px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.crumb { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.page-title { font-size: 1.45rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
.page-title > i { color: var(--accent); }
.page-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.btn-fav { border: 0; background: none; color: var(--muted); font-size: 1.05rem; padding: 0 .25rem; }
.btn-fav.on, .btn-fav:hover { color: #f59e0b; }

.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 600; padding: .75rem 1rem; }
.stat { padding: 1rem 1.1rem; display: flex; gap: .9rem; align-items: center; height: 100%; }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; flex: none; }
.stat-label { color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-sub { font-size: .78rem; color: var(--muted); }
.bg-soft-blue { background: #dbeafe; color: #1d4ed8; } .bg-soft-green { background: #dcfce7; color: #15803d; }
.bg-soft-amber { background: #fef3c7; color: #b45309; } .bg-soft-red { background: #fee2e2; color: #b91c1c; }
.bg-soft-violet { background: #ede9fe; color: #6d28d9; } .bg-soft-cyan { background: #cffafe; color: #0e7490; }
[data-bs-theme=dark] .bg-soft-blue { background: #1e3a8a55; color: #93c5fd; } [data-bs-theme=dark] .bg-soft-green { background: #14532d55; color: #86efac; }
[data-bs-theme=dark] .bg-soft-amber { background: #78350f55; color: #fcd34d; } [data-bs-theme=dark] .bg-soft-red { background: #7f1d1d55; color: #fca5a5; }
[data-bs-theme=dark] .bg-soft-violet { background: #4c1d9555; color: #c4b5fd; } [data-bs-theme=dark] .bg-soft-cyan { background: #164e6355; color: #67e8f9; }


.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .5rem .65rem; border-color: var(--line); }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.table-hover tbody tr:hover > * { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.table tfoot td, .table tfoot th { font-weight: 700; background: var(--surface-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap { overflow: auto; max-height: 70vh; }
.neg { color: #dc2626; }
.density-compact .table > :not(caption) > * > * { padding: .3rem .5rem; }
.density-compact .form-control, .density-compact .form-select { padding-top: .25rem; padding-bottom: .25rem; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.filters .form-label { font-size: .75rem; color: var(--muted); margin-bottom: .15rem; font-weight: 600; }
.form-label { font-weight: 600; font-size: .82rem; }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty-state > i { font-size: 3rem; display: block; margin-bottom: .5rem; color: var(--accent); }

/* Pickers */
.picker { position: relative; }
.picker-menu { position: absolute; z-index: 1060; top: 100%; left: 0; right: 0; min-width: 320px; max-height: 340px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .15); margin-top: 4px; display: none; }
.picker-menu.show { display: block; }
.picker-item { padding: .45rem .7rem; cursor: pointer; display: flex; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); }
.picker-item:last-child { border-bottom: 0; }
.picker-item.active, .picker-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.picker-item .pi-main { min-width: 0; }
.picker-item .pi-title { font-weight: 600; }
.picker-item .pi-sub { font-size: .76rem; color: var(--muted); }
.picker-item .pi-right { text-align: right; font-size: .8rem; white-space: nowrap; }
.picker-item mark { padding: 0; background: #fde68a; color: inherit; }

/* Invoice entry */
.doc-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; align-items: start; }
@media (max-width: 1199px) { .doc-layout { grid-template-columns: 1fr; } }
.entry-bar { display: grid; grid-template-columns: minmax(240px, 3fr) 90px 120px 110px 70px minmax(120px, 1.4fr) auto; gap: .5rem; align-items: end; }
@media (max-width: 991px) { .entry-bar { grid-template-columns: 1fr 1fr; } .entry-bar .ep { grid-column: 1 / -1; } }
.entry-bar .form-label { font-size: .72rem; color: var(--muted); margin-bottom: .1rem; }
.lines-table td { vertical-align: middle; }
.lines-table input { min-width: 60px; }
.lines-table .form-control-sm { padding: .15rem .35rem; }
.totals-card { position: sticky; top: 72px; }
.totals-row { display: flex; justify-content: space-between; padding: .3rem 0; font-variant-numeric: tabular-nums; }
.totals-row.grand { font-size: 1.5rem; font-weight: 800; border-top: 2px dashed var(--line); margin-top: .35rem; padding-top: .6rem; color: var(--accent); }
.kbd-hints { font-size: .72rem; color: var(--muted); }
.kbd-hints kbd { font-size: .65rem; background: var(--surface-2); color: var(--bs-body-color); border: 1px solid var(--line); }
.stock-pill { font-size: .72rem; }
.scrap-box { background: var(--surface-2); border-radius: 10px; padding: .6rem; }

.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.calc-grid .btn { padding: .65rem 0; font-weight: 600; }
#cmdkList .list-group-item { border: 0; border-radius: 8px; cursor: pointer; display: flex; gap: .6rem; align-items: center; }
#cmdkList .list-group-item.active { background: var(--accent); }
#cmdkList small { margin-left: auto; opacity: .7; }

.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-hero { background: radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.login-hero h1 { font-weight: 800; font-size: 2.4rem; }
.login-form { display: grid; place-items: center; padding: 2rem; background: var(--surface); }
@media (max-width: 860px) { .login-wrap { grid-template-columns: 1fr; } .login-hero { display: none; } }

.coa-tree .grp { font-weight: 700; }
.coa-tree td:first-child { white-space: nowrap; }
.print-only { display: none; }

@media (max-width: 991px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1035; }
  .content { padding: 1rem; }
}
@media print {
  .sidebar, .topbar, .d-print-none, .btn, .filters, .btn-fav, .alert { display: none !important; }
  .print-only { display: block !important; }
  .print-head { text-align: center; margin-bottom: 10px; }
  .print-head h3 { margin: 0; } .print-head h4 { margin-top: 6px; }
  body, .card { background: #fff !important; color: #000 !important; }
  .card { border: 0; box-shadow: none; }
  .content { padding: 0; max-width: none; }
  .table-wrap { max-height: none; overflow: visible; }
  .table thead th { position: static; background: #eee !important; color: #000; }
  html { font-size: 11px; }
}
/* invoice lines: keep the product column readable */
#lines td:nth-child(2) { min-width: 210px; }
#lines td:nth-child(3) { min-width: 130px; }

/* charts */
.chart-box { position: relative; width: 100%; }
.chart-box canvas { width: 100% !important; }
.chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: .25rem; }
.chart-empty i { font-size: 2rem; opacity: .5; }
.chart-card .card-header { font-weight: 600; }
.spin { display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.kpi-link .stat { transition: transform .12s, box-shadow .12s; }
.kpi-link:hover .stat { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.stat-sub b { font-weight: 600; }
.mini-cal td[data-date] { cursor: pointer; }
.mini-cal td[data-date]:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.mini-cal td.has-sales::after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin: 0 auto; opacity: .7; }
.mini-cal td.today.has-sales::after { background: #fff; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable::after { content: '\2195'; opacity: .3; margin-left: .3rem; font-size: .8em; }
th.sortable.asc::after { content: '\2191'; opacity: .9; }
th.sortable.desc::after { content: '\2193'; opacity: .9; }
.grid-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .5rem .75rem; border-top: 1px solid var(--line); }
.notif-menu { width: 340px; max-height: 70vh; overflow-y: auto; }
.notif-menu .dropdown-item { white-space: normal; display: flex; gap: .6rem; align-items: flex-start; }
.notif-menu .dropdown-item i { font-size: 1.1rem; margin-top: .1rem; }
.btn-icon .badge-dot { position: absolute; top: 2px; right: 0; font-size: .6rem; }
.btn-icon { position: relative; }
@media print { .chart-box { height: 240px !important; } .chart-card { break-inside: avoid; } }
.mini-cal .cal-head .cal-title { width: auto; background: none; font-weight: 700; padding: 0 .3rem; }
.fav-item { position: relative; }
.fav-item .fav-unpin { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); opacity: 0; border-radius: 6px; padding: 0 .25rem; }
.fav-item:hover .fav-unpin, .fav-item .fav-unpin:focus { opacity: 1; }
.fav-item .fav-unpin:hover { background: var(--surface-2); color: var(--bs-danger); }