:root { --brand: #1b3478; --brand-2: #f5a524; --brand-red: #c62828; }
/* Karbhar brand font (wordmark only) */
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url(../fonts/baloo-2-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20B9; }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url(../fonts/baloo-2-devanagari-800-normal.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+20B9, U+25CC, U+A8E0-A8FF; }
.brand-word { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; line-height: 1.05; font-size: 2.1rem; color: var(--brand); }
.brand-word .mr { color: #f08a24; font-size: .82em; }
.brand-tag { color: #475569; font-weight: 600; letter-spacing: .01em; }
.brand-slogan { color: var(--brand-red); font-weight: 600; margin-top: 2px; font-size: .95rem; }
.brand-icon { border-radius: 18px; box-shadow: 0 6px 18px rgba(20, 40, 107, .25); margin-bottom: 8px; }
.brand-bg { background: linear-gradient(135deg, #2b4fb0, #132a6b); min-height: 100vh; }
.app-nav .brand-mini { width: 26px; height: 26px; border-radius: 7px; margin-right: 6px; vertical-align: -6px; }
.powered { font-size: .72rem; color: #8a94a3; text-align: center; margin-top: 18px; }
.powered b { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; color: var(--brand); }
body { background: #f3f5f8; font-size: 15px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Nirmala UI", "Noto Sans Devanagari", Mangal, Arial, sans-serif; }
.app-nav { background: var(--brand); }
.app-nav .dropdown-menu { font-size: 14px; }
.card { border: 0; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.card-header { background: #fff; font-weight: 600; }
.stat { border-left: 4px solid var(--brand-2); }
.stat .v { font-size: 1.4rem; font-weight: 700; }
.stat .l { color: #6b7280; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.table-sm td, .table-sm th { vertical-align: middle; }
.table thead th { background: #eef1f5; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.suggest { position: absolute; z-index: 1050; background: #fff; border: 1px solid #ccd3dc; border-radius: 6px; max-height: 320px; overflow-y: auto; width: 100%; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.suggest div { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f0f2f5; }
.suggest div.active, .suggest div:hover { background: #e8f0fb; }
.suggest small { color: #6b7280; }
.bill-total { font-size: 1.6rem; font-weight: 700; color: var(--brand); }
.sticky-summary { position: sticky; top: 70px; }
.badge-low { background: #fde2e1; color: #b42318; }
@media (max-width: 576px) {
  body { font-size: 14px; }
  .app-main { padding-left: 8px; padding-right: 8px; }
}
@media print { body { background: #fff; } .card { box-shadow: none; } }
@media (max-width: 991px) {
  .app-nav .navbar-brand { max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.qa-btn { font-weight: 700; }
.input-group > .position-relative { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .position-relative > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cust-box .cust-info { font-size: .85rem; color: #4b5563; min-height: 1.2em; }
.suggest .cash-row { background: #fff8e6; }

/* ================= Mobile version ================= */
@media (min-width: 992px) {
  .navbar-expand-lg .app-menu .offcanvas-body { flex-grow: 1; }
}
.app-menu { background: var(--brand); color: #fff; }
.app-menu .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.15); }
.app-menu .btn-close { filter: invert(1); }
@media (max-width: 991.98px) {
  .app-menu .navbar-nav .nav-link { padding: .7rem .25rem; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .app-menu .dropdown-menu { background: rgba(255,255,255,.06); border: 0; }
  .app-menu .dropdown-item { color: #e6edf5; padding: .55rem 1.2rem; }
  .app-menu .dropdown-item:active, .app-menu .dropdown-item:hover { background: rgba(255,255,255,.12); color: #fff; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .app-nav { padding-top: env(safe-area-inset-top); }
}
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; background: #fff; border-top: 1px solid #dfe3ea;
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 7px 2px 6px; color: #5b6573; text-decoration: none; font-size: .72rem; line-height: 1.1; min-height: 58px; }
.tabbar a i { font-size: 1.35rem; }
.tabbar a.active { color: var(--brand); font-weight: 600; }
.tabbar a.tab-main i { background: var(--brand-2); color: #1b1b1b; border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center;
  margin-top: -22px; box-shadow: 0 3px 10px rgba(0,0,0,.2); font-size: 1.5rem; }
.tabbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Tables become cards on phones (table.m-cards; td labels are filled in by app.js) */
@media (max-width: 767.98px) {
  input.form-control, select.form-select, textarea.form-control { font-size: 16px; } /* stops iPhone zoom */
  .card:has(> .table-responsive > table.m-cards), .card:has(> table.m-cards) { background: transparent; box-shadow: none; }
  table.m-cards, table.m-cards tbody, table.m-cards tfoot, table.m-cards tr, table.m-cards td, table.m-cards th { display: block; width: 100%; }
  table.m-cards thead { display: none; }
  table.m-cards tr { background: #fff; border: 1px solid #e5e8ee; border-radius: 12px; margin-bottom: 10px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
  table.m-cards tr.table-light { background: #f6f8fb; }
  table.m-cards td, table.m-cards tfoot th { border: 0 !important; padding: 3px 0 !important; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; white-space: normal; }
  table.m-cards td::before, table.m-cards tfoot th::before { content: attr(data-label); color: #6b7280; font-size: .78rem; font-weight: 400; text-align: left; flex-shrink: 0; }
  table.m-cards td[data-label=""]::before, table.m-cards td:not([data-label])::before { display: none; }
  table.m-cards td:empty, table.m-cards tfoot th:empty { display: none; }
  table.m-cards td.m-title, table.m-cards td:first-child { font-size: 1.02rem; font-weight: 600; text-align: left; }
  table.m-cards td.m-actions, table.m-cards td.text-end { justify-content: flex-end; padding-top: 6px !important; }
  table.m-cards td[colspan] { justify-content: center; text-align: center; }
  table.m-cards tfoot tr { background: #eef3fa; font-weight: 600; }
  .table-responsive:has(> table.m-cards) { overflow: visible; }
  h4 { font-size: 1.2rem; }
  .dropdown-menu { max-width: 92vw; }
}

/* Billing grid: one row per item, tap a cell to edit it (phone and desktop) */
.bill-grid { width: 100%; margin: 0; font-size: .95rem; }
.bill-grid th { font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; color: #6b7280; font-weight: 600; white-space: nowrap; background: #f6f8fc; }
.bill-grid td, .bill-grid th { padding: .45rem .4rem; vertical-align: middle; border-bottom: 1px solid #e9ecf1; }
.bill-grid .num { text-align: right; white-space: nowrap; }
.bill-grid .c-item { min-width: 120px; }
.bill-grid .c-item .fw-semibold { line-height: 1.2; }
.bill-grid .c-del { width: 28px; text-align: center; }
.bill-grid td.ed { cursor: pointer; position: relative; }
.bill-grid td.ed:not(.editing) { background-image: linear-gradient(transparent calc(100% - 2px), rgba(27,52,120,.18) 2px); background-size: calc(100% - 10px) 100%; background-repeat: no-repeat; background-position: center; }
.bill-grid td.ed:hover { background-color: #f1f5ff; }
.bill-grid td.editing { background: #fff8e6; padding: .2rem; }
.bill-grid td.bad { color: #c62828; }
.bill-grid td.bad .v::after { content: ' !'; font-weight: 700; }
.bill-grid .u { display: block; font-size: .72rem; color: #6b7280; }
.bill-grid .ed-u { text-decoration: underline dotted; cursor: pointer; }
.bill-grid .cell-input { min-width: 64px; font-size: 16px; padding: .2rem .35rem; }
.bill-grid .cell-unit { font-size: 14px; padding: .15rem 1.4rem .15rem .3rem; margin-top: 2px; }
.bill-grid tr.new-line td { animation: lineIn .8s ease; }
@keyframes lineIn { from { background: #fff3cd; } to { background: transparent; } }
@media (max-width: 767.98px) {
  .bill-grid { font-size: .88rem; }
  .bill-grid td, .bill-grid th { padding: .4rem .25rem; }
  .bill-grid .c-item { min-width: 0; width: 44%; }
  .bill-grid td.num { font-size: .84rem; }
  .bill-grid .c-disc { width: 1%; }
  .bill-grid td.c-del, .bill-grid th.c-del { width: 18px; padding-left: 0; padding-right: 0; }
  .bill-grid .u { font-size: .66rem; }
  .bill-grid .c-item small { font-size: .7rem; }
  .bill-grid th.c-gst, .bill-grid td.c-gst { display: none !important; }
  .bill-grid th { font-size: .66rem; }
  .page-sale .sticky-summary { position: static; }
}
.bill-type-chip { border: 1px solid var(--brand); color: var(--brand); background: #eef2fb; border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; font-weight: 600; }
.bill-type-chip.gst { background: var(--brand); color: #fff; }
.bt-opt { text-align: left; padding: .8rem 1rem; }
.bt-opt small { display: block; font-weight: 400; opacity: .8; }

/* purchase entry */
.upload-card { border: 2px dashed #b9c6d6; background: #f8fbff; }
.bill-thumb { max-height: 160px; max-width: 100%; border: 1px solid #dfe4ea; border-radius: 6px; }
.p-line { border: 1px solid #e3e8ef; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
.p-line .p-head { display: flex; gap: 8px; align-items: center; }
.p-line .p-no { color: #6c7a89; font-size: .85rem; min-width: 1.6rem; }
.p-line .p-sub { margin: 2px 0 4px 2.1rem; }
.p-line .p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px 8px; }
.p-line .p-grid label { margin: 0; min-width: 0; }
.p-line .p-grid label > span:first-child { display: block; font-size: .72rem; color: #6c7a89; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-line .p-grid .p-cat, .p-line .p-grid .p-pack { grid-column: span 2; }
.p-line .p-grid .p-sp input { border-color: #198754; }
.p-line output.f-amt { display: block; text-align: right; }
.p-totals td { vertical-align: middle; }
@media (max-width: 575.98px) { .p-line .p-grid { grid-template-columns: repeat(3, 1fr); } .p-line .p-sub { margin-left: 0; } }

/* purchase lines table: double-click (tap on phones) a cell to edit */
.p-wrap { max-height: 70vh; }
.p-table { font-size: .86rem; min-width: 1350px; }
.p-table thead th { position: sticky; top: 0; background: #eef2f6; z-index: 2; white-space: nowrap; font-weight: 600; font-size: .78rem; }
.p-table td { white-space: nowrap; }
.p-table td[data-k="no"], .p-table thead th:nth-child(1) { position: sticky; left: 0; width: 34px; min-width: 34px; max-width: 34px; background: #fff; z-index: 1; text-align: center; color: #6c7a89; }
.p-table td[data-k="name"] { white-space: normal; min-width: 230px; max-width: 320px; position: sticky; left: 34px; background: #fff; z-index: 1; box-shadow: 2px 0 0 #dee2e6; }
.p-table thead th:nth-child(1), .p-table thead th:nth-child(2) { z-index: 3; background: #eef2f6; }
.p-table thead th:nth-child(2) { position: sticky; left: 34px; }
.p-table td.ed { cursor: cell; }
.p-table td.ed:hover { background: #f3f8ff; }
.p-table td.editing { padding: 1px; background: #fff8e1; }
.p-table td.editing .form-control, .p-table td.editing .form-select { min-width: 70px; }
.p-table td[data-k="name"].editing .form-control { min-width: 220px; }
.p-table .col-cost { background: #f4fbf6; }
.p-table .col-sp { background: #f0f9f3; font-weight: 600; }
.p-table td.man { box-shadow: inset 0 -2px 0 #f0ad4e; }

/* ---- Popups: dim + blur what is behind so the popup stands out (phones and the Android app too) ---- */
.modal-backdrop, .offcanvas-backdrop { background-color: #0b1724; }
.modal-backdrop.show, .offcanvas-backdrop.show { opacity: .6; }
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .modal-backdrop.show, .offcanvas-backdrop.show { opacity: 1; background-color: rgba(11, 23, 36, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}
/* a popup opened from another popup (e.g. "+" category inside New item) gets its own dark layer */
.modal.modal-stacked { background: rgba(11, 23, 36, .45); }
.modal-content { border: 0; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.modal-header { background: #f4f7fb; border-top-left-radius: 14px; border-top-right-radius: 14px; }
/* while a popup is open, the bottom bars stay behind the dark layer and do not take taps */
body.modal-open .tabbar { z-index: 1000; pointer-events: none; filter: brightness(.5); }
@media (max-width: 575.98px) {
  .modal-dialog { margin: .6rem; }
  .modal-dialog-scrollable .modal-content, .modal-content { max-height: calc(100vh - 1.2rem); }
  .modal-body { overflow-y: auto; }
}

/* ad space (website, free plans) */
.ad-slot { text-align: center; min-height: 60px; position: relative; background: #fff; border: 1px dashed #d5dbe3; border-radius: 8px; padding: 14px 6px 6px; overflow: hidden; }
.ad-slot .ad-label { position: absolute; top: 2px; left: 8px; font-size: .65rem; color: #8a94a3; text-transform: uppercase; letter-spacing: .05em; }

/* Karbhar brand colours on buttons and links */
.btn-primary { --bs-btn-bg: #1b3478; --bs-btn-border-color: #1b3478; --bs-btn-hover-bg: #142a64; --bs-btn-hover-border-color: #142a64; --bs-btn-active-bg: #10224f; --bs-btn-active-border-color: #10224f; --bs-btn-disabled-bg: #1b3478; --bs-btn-disabled-border-color: #1b3478; }
.btn-outline-primary { --bs-btn-color: #1b3478; --bs-btn-border-color: #1b3478; --bs-btn-hover-bg: #1b3478; --bs-btn-hover-border-color: #1b3478; --bs-btn-active-bg: #1b3478; --bs-btn-active-border-color: #1b3478; }
.btn-warning { --bs-btn-bg: #f5a524; --bs-btn-border-color: #f5a524; --bs-btn-hover-bg: #e6951a; --bs-btn-hover-border-color: #e6951a; }
a { color: #1d4ed8; }