/* The TallyPrime look in the pharmacy — the stylesheet of its own application
 * (js/tp-*.js), the retail desktop's look brought over the same day.
 *
 * The colours are TallyPrime's, measured off TallyPrime Release 5/6 screens
 * (the Gateway, the Day Book, Select Company, Go To, voucher entry):
 *   #134b90  the band across the top          #88bee6  the screen's strip
 *   #def1fc  the buttons down the right       #e3f1fc  a list's body
 *   #2b66b2  a list's own header              #fec530  the bar on the chosen line
 *   #fee8af  the box being typed in           #51aad6  its edge
 *   #4da1d9  a button's key                   #2a67b1  the hotkey letter
 *   #efefef  every other row                  #c9c9c9  rules
 *   #a2a2a2  what cannot be used
 * The frame's own elements exist only while the look is on; what it changes
 * of the rest of the app (the band across the top, a dialog of the rest of
 * the app that can still appear over it) is under html[data-theme="tally"],
 * so the Bilzy look is not touched by a line of this. */

html[data-theme="tally"] {
  --tp-head: #134b90;
  --tp-head-key: #a6cfed;
  --tp-strip: #88bee6;
  --tp-panel: #def1fc;
  --tp-list: #e3f1fc;
  --tp-list-head: #2b66b2;
  --tp-sel: #fec530;
  --tp-input: #fee8af;
  --tp-input-line: #51aad6;
  --tp-key: #4da1d9;
  --tp-chev: #2a67b1;
  --tp-rule: #c9c9c9;
  --tp-stripe: #f4f4f4;
  --tp-dim: #a2a2a2;
  --tp-btn-line: #b7d8f0;
  --tp-frame: #7f7f7f;
  --tp-hover: #cfe6f8;
  --tp-red: #b3261e;
  --tp-font: 13px/1.38 Arial, "Segoe UI", system-ui, sans-serif;
}

/* ── The band across the top: the brand and TallyPrime's menu ───────── */
html[data-theme="tally"] .titlebar { height: 40px; flex: 0 0 40px; color: #fff; background: var(--tp-head); }
html[data-theme="tally"] .tb-drag { flex: 0 0 auto; gap: 10px; padding-left: 12px; }
html[data-theme="tally"] .tb-mark, html[data-theme="tally"] .tb-shop, html[data-theme="tally"] .tb-help { display: none; }
/* The Bilzy counter's own chips (its style, its salesman) belong to its
 * screen; the counter refills them whenever the bill changes, and the Sales
 * voucher changes the same bill. */
html[data-theme="tally"] .tb-slot { display: none; }
/* The business switcher of the Bilzy look; this look keeps it under F3. */
html[data-theme="tally"] .tb-co { display: none; }
html[data-theme="tally"] .tb-btn, html[data-theme="tally"] .tb-menu, html[data-theme="tally"] .tb-points, html[data-theme="tally"] .tb-sync { color: #e8f3fb; }
.tp-brand { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.tp-brand b { font: italic 700 18px/1 Arial, sans-serif; letter-spacing: -.2px; color: #fff; }
.tp-brand i { font: 600 10px/1 Arial, sans-serif; letter-spacing: .12em; font-style: normal; color: #bfbfbf; }
.tp-menu { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: space-evenly; min-width: 0; margin-left: 18px; -webkit-app-region: no-drag; }
.tp-mi { padding: 0 10px; font: 14px/1 Arial, sans-serif; color: #fff; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.tp-mi b { font-weight: 400; color: var(--tp-head-key); text-decoration: underline; text-underline-offset: 2px; }
.tp-mi:hover, .tp-mi:focus-visible { color: #272727; background: var(--tp-list); outline: none; }
.tp-mi:hover b, .tp-mi:focus-visible b { color: var(--tp-chev); }
.tp-mi.tp-off { opacity: .45; }
body:has(#shell[hidden]) .tp-menu, body:has(#shell[hidden]) .tp-brand { display: none; }

.tp-drop { position: fixed; z-index: 300; min-width: 280px; background: var(--tp-list); border: 1px solid var(--tp-frame); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); font: 13px/1.35 Arial, sans-serif; }
.tp-drop-t { padding: 4px 10px; color: #fff; background: var(--tp-list-head); }
.tp-drop-i { display: flex; justify-content: space-between; gap: 18px; width: 100%; padding: 4px 12px; font: inherit; text-align: left; color: #000; background: none; border: 0; cursor: pointer; }
.tp-drop-i kbd { font: 11.5px/1.35 Arial, sans-serif; color: var(--tp-chev); }
.tp-drop-i:hover, .tp-drop-i.tp-sel, .tp-drop-i:focus { background: var(--tp-sel); outline: none; }
.tp-drop-gap { height: 1px; margin: 3px 0; background: var(--tp-rule); }

/* ── The frame: in the shell, in place of the rail and the pages ────── */
.shell.tp-on > .side, .shell.tp-on > .main { display: none !important; }
.shell > .tp-app {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 196px;
  grid-template-rows: 24px minmax(0, 1fr) 28px;
  font: var(--tp-font);
  color: #000;
  background: #fff;
}
.tp-app[hidden] { display: none !important; }
.tp-app.tp-nobottom { grid-template-rows: 24px minmax(0, 1fr) 0; }
.tp-app.tp-nobottom .tp-bottom { display: none; }
.tp-app button, .tp-app input, .tp-app textarea, .tp-app select { font: inherit; color: inherit; }
.tp-app u { text-decoration: none; font-weight: 700; color: var(--tp-chev); }

.tp-strip {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-width: 0;
  padding: 0 4px 0 10px;
  font: 700 13px/24px Arial, sans-serif;
  background: var(--tp-strip);
  border-bottom: 1px solid #6fa7d4;
}
.tp-st-l, .tp-st-c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-st-c { text-align: center; }
.tp-st-x { justify-self: end; width: 26px; height: 22px; font: 14px/1 Arial, sans-serif; background: none; border: 0; cursor: pointer; }
.tp-st-x:hover { background: rgba(255, 255, 255, .45); }

.tp-work { grid-column: 1; grid-row: 2; display: flex; min-width: 0; min-height: 0; position: relative; }
.tp-screens { flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden; }
.tp-screen { position: absolute; inset: 0; overflow: auto; outline: none; background: #fff; }
.tp-screen[hidden] { display: none; }

/* The buttons down the right. */
.tp-right {
  grid-column: 2;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  padding: 4px 4px 4px 5px;
  overflow: auto;
  background: var(--tp-panel);
  border-left: 1px solid var(--tp-frame);
}
.tp-rb {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-height: 26px;
  padding: 3px 18px 3px 7px;
  font: 13px/1.25 Arial, sans-serif;
  text-align: left;
  position: relative;
  background: #fff;
  border: 1px solid #cadbe5;
  cursor: pointer;
}
.tp-rb b { margin-right: 2px; font-weight: 400; color: var(--tp-key); }
.tp-rb::after { content: '\2039'; position: absolute; right: 5px; top: 50%; transform: translateY(-52%); font: 15px/1 Arial, sans-serif; color: var(--tp-chev); }
.tp-rb:hover { background-color: var(--tp-sel); }
.tp-rb.tp-on { font-weight: 700; background-color: var(--tp-sel); }
.tp-rb.tp-dim, .tp-rb.tp-dim b { color: var(--tp-dim); cursor: default; }
.tp-rb.tp-dim::after { color: var(--tp-dim); }
.tp-rb.tp-dim:hover { background: #fff; }
.tp-rgap { flex: 0 0 8px; }
.tp-rhead { flex: 0 0 auto; padding: 8px 4px 2px; font: 700 11px/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-chev); }
.tp-rfill { flex: 1 1 auto; }

/* The keys along the foot. */
.tp-bottom { grid-column: 1; grid-row: 3; display: flex; align-items: stretch; min-width: 0; overflow: hidden; background: #fff; border-top: 1px solid var(--tp-frame); }
.tp-bb { flex: 0 1 140px; min-width: 0; padding: 0 9px; font: 13px/27px Arial, sans-serif; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; border: 0; border-right: 1px solid var(--tp-btn-line); cursor: pointer; }
.tp-bb b { font-weight: 400; color: var(--tp-key); }
.tp-bb:hover { background: var(--tp-sel); }
.tp-bb.tp-dim, .tp-bb.tp-dim b { color: var(--tp-dim); cursor: default; }
.tp-bb.tp-dim:hover { background: #fff; }
.tp-bfill { flex: 1 1 auto; }

.tp-toast { position: absolute; left: 50%; bottom: 14px; z-index: 40; max-width: 70%; padding: 6px 14px; font: 13px/1.35 Arial, sans-serif; color: #fff; background: var(--tp-list-head); border: 1px solid var(--tp-head); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .15s, transform .15s; }
.tp-toast.tp-show { opacity: 1; transform: translate(-50%, 0); }
.tp-toast.tp-err { background: var(--tp-red); border-color: #7d1a15; }

/* ── A list to choose from, down the right ──────────────────────────── */
.tp-list { flex: 0 0 340px; width: 340px; display: flex; flex-direction: column; min-height: 0; background: var(--tp-list); border-left: 1px solid var(--tp-frame); box-shadow: -3px 0 10px rgba(0, 0, 0, .12); z-index: 5; }
.tp-list[hidden] { display: none; }
.tp-lp-head { flex: none; padding: 3px 10px; font: 14px/1.45 Arial, sans-serif; color: #fff; background: var(--tp-list-head); }
.tp-lp-create { flex: none; padding: 2px 10px; font-size: 12.5px; text-align: right; background: #fff; border-bottom: 1px solid var(--tp-rule); cursor: pointer; }
.tp-lp-create kbd { margin-left: 4px; font: 11px/1.3 Arial, sans-serif; color: var(--tp-key); }
.tp-lp-list { flex: 1 1 auto; overflow-y: auto; padding: 2px 0; }
.tp-lp-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; padding: 1px 10px; cursor: default; }
.tp-lp-item.tp-sel { background: var(--tp-sel); }
.tp-lp-item:not(.tp-sel):hover { background: var(--tp-hover); }
.tp-lp-special { font-style: italic; }
.tp-lp-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tp-lp-right { margin-left: auto; font-size: 12px; white-space: nowrap; color: #333; }
.tp-lp-sub { width: 100%; font-size: 11.5px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-lp-empty { padding: 8px 10px; font-style: italic; color: #555; }
.tp-lp-group { padding: 6px 10px 1px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-chev); }

/* ── Boxes: a form, a Yes/No, a message ─────────────────────────────── */
.tp-app input[type="text"], .tp-app textarea {
  height: 21px;
  padding: 0 4px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px dotted #9a9a9a;
  border-radius: 0;
  outline: none;
}
.tp-app textarea { height: auto; padding: 1px 4px; line-height: 1.35; resize: none; }
.tp-app input[type="text"]:focus, .tp-app textarea:focus { background: var(--tp-input); border: 1px solid var(--tp-input-line); }
.tp-app input.tp-num { text-align: right; }
.tp-app input.tp-pick { font-weight: 700; }
.tp-app input.tp-date { width: 118px; }
.tp-app input.tp-yn { width: 48px; font-weight: 700; cursor: default; }
.tp-app input.tp-upper { text-transform: uppercase; }
.tp-app input.tp-drcr { flex: none; width: 44px; font-weight: 700; }
.tp-inline { display: flex; flex: 1 1 auto; gap: 6px; max-width: 380px; }
.tp-inline input.tp-num { flex: 0 1 150px; }

.tp-form { max-width: 980px; padding: 12px 20px 30px; }
.tp-form-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 44px; }
@media (max-width: 1100px) { .tp-form-cols { grid-template-columns: minmax(0, 1fr); } }
.tp-fsection { margin: 12px 0 4px; padding-bottom: 2px; font-weight: 700; font-style: italic; color: var(--tp-chev); border-bottom: 1px solid #e0e0e0; }
.tp-frow { display: flex; align-items: flex-start; min-height: 22px; margin: 1px 0; }
.tp-flabel { flex: none; width: 178px; padding-top: 2px; }
.tp-fcolon { flex: none; width: 12px; padding-top: 2px; }
.tp-frow input[type="text"], .tp-frow textarea { flex: 1 1 auto; min-width: 0; max-width: 380px; }
.tp-frow input.tp-num { max-width: 150px; }
.tp-frow input.tp-date { max-width: 126px; }
.tp-frow input.tp-yn { max-width: 60px; }
.tp-fvalue { padding-top: 2px; font-weight: 700; }
.tp-fnote { padding: 2px 0 0 8px; font-size: 12px; font-style: italic; color: #555; }
.tp-foot-note { display: block; margin-top: 18px; padding-left: 0; }
.tp-form-screen .tp-form { padding-top: 14px; }

.tp-modals { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
/* Over the work area only: the buttons down the right stay in view, and the
 * list a box chooses from stands above the shade, beside the box. */
.tp-mwrap { position: absolute; top: 24px; left: 0; right: 196px; bottom: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 70px; background: rgba(40, 60, 80, .10); pointer-events: auto; }
.tp-app:has(.tp-list:not([hidden])) .tp-mwrap { right: 536px; }
.tp-app:has(.tp-mwrap) .tp-list { position: relative; z-index: 70; }
.tp-modal { background: #fff; border: 1px solid var(--tp-frame); box-shadow: 0 6px 22px rgba(0, 0, 0, .28); outline: none; }
.tp-mconfirm { min-width: 240px; padding: 12px 24px 10px; text-align: center; background: var(--tp-panel); }
.tp-mconfirm.tp-danger { border-color: var(--tp-red); }
.tp-mc-q { margin-bottom: 4px; font-size: 14px; font-weight: 700; }
.tp-mc-d { max-width: 360px; margin: 0 auto 6px; font-size: 12.5px; color: #333; }
.tp-mc-a { margin-top: 4px; }
.tp-mc-btn { padding: 0 3px; font-weight: 700; background: transparent; border: 0; cursor: pointer; }
.tp-malert { min-width: 340px; max-width: 540px; }
.tp-ma-title { padding: 3px 12px; font-weight: 700; color: #fff; background: var(--tp-red); }
.tp-ma-body { padding: 12px 14px; white-space: pre-line; }
.tp-ma-hint, .tp-mf-hint { padding: 4px 10px 6px; font-size: 11.5px; color: #555; text-align: center; border-top: 1px solid #e3e3e3; }
.tp-mform { min-width: 400px; }
.tp-mf-title { padding: 3px 12px; font-weight: 700; text-align: center; background: var(--tp-strip); }
.tp-mf-body { padding: 10px 16px; }
.tp-mf-body .tp-flabel { width: 120px; }
.tp-mpick { width: 440px; }
.tp-mp-search { padding: 8px 10px; }
.tp-mp-search input[type="text"] { width: 100%; }
.tp-mhelp { display: flex; flex-direction: column; width: 600px; max-height: 84vh; }
.tp-help-body { overflow: auto; padding: 6px 14px 10px; }
.tp-keys { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tp-keys td { padding: 2px 6px; }
.tp-keys .tp-k { width: 44%; font-weight: 700; white-space: nowrap; color: var(--tp-chev); }
.tp-kh td { padding-top: 9px; font-weight: 700; letter-spacing: .06em; color: var(--tp-key); border-bottom: 1px solid #e3e3e3; }

/* ── Menus: the Gateway and every menu under it ─────────────────────── */
.tp-mlayout { display: flex; min-height: 100%; }
.tp-mleft { flex: 1 1 0; min-width: 0; padding: 18px 20px; border-right: 1px solid var(--tp-rule); }
.tp-mright { flex: 1 1 0; display: flex; justify-content: center; align-items: flex-start; padding: 22px 16px; }
.tp-mlayout:not(.tp-has-left) .tp-mright { padding-top: 40px; }
.tp-mbox { width: 340px; background: var(--tp-list); border: 1px solid var(--tp-frame); box-shadow: 2px 2px 0 rgba(0, 0, 0, .1); }
.tp-mbox-t { padding: 3px 0; font: italic 13px/1.35 Arial, sans-serif; text-align: center; color: #272727; background: #fff; border-bottom: 1px solid var(--tp-rule); }
.tp-mbox-sub { padding: 3px 10px; font: 14px/1.4 Arial, sans-serif; text-align: center; color: #fff; background: var(--tp-list-head); }
.tp-mbox-body { padding: 4px 0 10px; }
.tp-mbox-h { padding: 10px 26px 3px; font: 11px/1.2 Arial, sans-serif; letter-spacing: .08em; color: var(--tp-key); }
.tp-mbox-gap { height: 2px; }
.tp-mbox-i { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 1px 14px 1px 26px; font: 14px/1.42 Arial, sans-serif; cursor: pointer; }
.tp-mbox-i kbd { flex: none; font: 11.5px/1.4 Arial, sans-serif; color: var(--tp-chev); }
.tp-mbox-i:hover { background: var(--tp-hover); }
.tp-mbox-i.tp-sel { background: var(--tp-sel); }
.tp-mbox-i.tp-dim { color: var(--tp-dim); }
.tp-mbox-i.tp-dim u { color: var(--tp-dim); }
.tp-inf { margin-bottom: 16px; }
.tp-cap { display: block; margin-bottom: 2px; font: 11px/1.3 Arial, sans-serif; letter-spacing: .06em; color: #595959; }
.tp-inf b { font: 700 14px/1.3 Arial, sans-serif; }
.tp-cos { width: 100%; margin-top: 8px; border-collapse: collapse; font: 13.5px/1.4 Arial, sans-serif; }
.tp-cos th { padding: 3px 4px; font: 11px/1.3 Arial, sans-serif; letter-spacing: .06em; text-align: left; color: #595959; border-bottom: 1px solid var(--tp-rule); }
.tp-cos td { padding: 3px 4px; }
.tp-cos .tp-r { text-align: right; }
.tp-cos tr.tp-cur td { font-weight: 700; }

/* ── Reports ────────────────────────────────────────────────────────── */
.tp-report { min-height: 100%; padding: 0 0 24px; }
.tp-rpt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 6px 10px 5px; border-bottom: 1px solid #000; }
.tp-rpt-title { font-size: 14px; font-weight: 700; }
.tp-rpt-sub { font-size: 12.5px; color: #333; }
.tp-rpt-period { font-size: 12.5px; text-align: right; white-space: nowrap; }
.tp-rpt-note { padding: 6px 10px; font-size: 12.5px; font-style: italic; color: #444; }
.tp-empty { padding: 30px; text-align: center; font-style: italic; color: #666; }
.tp-gwrap.tp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tp-gwrap.tp-split .tp-gpane + .tp-gpane { border-left: 1px solid #000; }
.tp-grid { width: 100%; border-collapse: collapse; }
.tp-grid th { position: sticky; top: 0; z-index: 1; padding: 3px 8px; font-weight: 700; text-align: left; white-space: nowrap; background: #fff; border-bottom: 1px solid #000; }
.tp-grid tr.tp-super th { font-weight: 400; font-style: italic; text-align: center; border-bottom: 1px solid #ddd; }
.tp-grid td { padding: 1px 8px; white-space: nowrap; }
.tp-grid .tp-r { text-align: right; font-variant-numeric: tabular-nums; }
.tp-grid td.tp-n { min-width: 104px; }
.tp-grid tbody tr:nth-child(even) td { background: var(--tp-stripe); }
.tp-grid tr.tp-drill { cursor: pointer; }
.tp-grid tr.tp-sel td, .tp-grid tr.tp-sel:nth-child(even) td { background: var(--tp-sel); }
.tp-grid tr.tp-b td { font-weight: 700; }
.tp-grid tr.tp-i td { font-style: italic; }
.tp-grid tr.tp-l1 td:first-child { padding-left: 26px; }
.tp-grid tr.tp-l2 td:first-child { padding-left: 44px; }
.tp-grid tr.tp-l3 td:first-child { padding-left: 62px; }
.tp-grid tr.tp-l1 td, .tp-grid tr.tp-l2 td, .tp-grid tr.tp-l3 td { font-size: 12.5px; }
.tp-grid tr.tp-total td { font-weight: 700; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.tp-grid tr.tp-sect td { padding-top: 10px; font-weight: 700; color: var(--tp-chev); }
.tp-grid tr.tp-muted td { color: #777; }
.tp-grid tr.tp-warn td { font-weight: 700; color: var(--tp-red); }

/* ── Voucher entry ──────────────────────────────────────────────────── */
.tp-vch { display: flex; flex-direction: column; min-height: 100%; }
.tp-vch-top { display: flex; align-items: center; gap: 12px; padding: 5px 10px 3px; }
.tp-vch-type { min-width: 110px; padding: 1px 18px; font-weight: 700; text-align: center; color: #fff; background: var(--tp-list-head); }
.tp-vch-no { display: flex; align-items: center; gap: 4px; }
.tp-vch-no input[type="text"] { width: 120px; font-weight: 700; }
.tp-vch-mode { font-size: 12px; font-style: italic; color: #555; }
.tp-vch-alter { padding: 0 8px; font-size: 11.5px; font-weight: 700; color: #000; background: var(--tp-sel); }
.tp-vch-date { margin-left: auto; line-height: 1.2; text-align: right; }
.tp-vch-date input[type="text"] { font-weight: 700; text-align: right; }
.tp-vch-day { padding-right: 4px; font-size: 12px; color: #444; }
.tp-vch-head { padding: 2px 10px 6px; border-bottom: 1px solid #000; }
.tp-vch-head .tp-frow { max-width: 820px; }
.tp-vch-head .tp-flabel { width: 150px; }
.tp-vch-info { min-height: 15px; margin-left: 162px; font-size: 12px; font-style: italic; color: #444; }
.tp-vch-body { flex: 1 1 auto; padding: 0 0 8px; }
.tp-vgrid { width: 100%; border-collapse: collapse; }
.tp-vgrid th { position: sticky; top: 0; z-index: 1; padding: 2px 6px; font-weight: 700; text-align: left; background: #fff; border-bottom: 1px solid #000; }
.tp-vgrid th.tp-r, .tp-vgrid td.tp-r { text-align: right; }
.tp-vgrid td { padding: 0 6px; vertical-align: top; }
.tp-vgrid td input[type="text"] { width: 100%; }
.tp-vgrid .tp-c-drcr { width: 44px; }
.tp-vgrid .tp-c-drcr input[type="text"] { width: 36px; text-transform: capitalize; }
.tp-vgrid .tp-c-amt { width: 140px; }
.tp-vgrid .tp-c-qty { width: 100px; }
.tp-vgrid .tp-c-rate { width: 104px; }
.tp-vgrid .tp-c-per { width: 48px; padding-top: 2px; color: #444; }
.tp-vgrid .tp-c-disc { width: 62px; }
.tp-vgrid .tp-c-gst { width: 58px; padding-top: 2px; }
.tp-vgrid .tp-c-sl { width: 30px; padding-top: 2px; color: #666; }
.tp-vgrid .tp-sub { padding: 0 0 2px 4px; font-size: 11.5px; font-style: italic; color: #444; }
.tp-vgrid .tp-sub.tp-over { color: var(--tp-red); }
.tp-vgrid tr.tp-tax td { padding-top: 1px; padding-bottom: 1px; font-style: italic; color: #333; }
.tp-vgrid tr.tp-tax td.tp-r { font-style: normal; }
.tp-vch-foot { position: sticky; bottom: 0; padding: 4px 10px 8px; background: #fff; border-top: 1px solid #000; }
.tp-vch-totals { display: flex; justify-content: flex-end; margin-bottom: 4px; padding: 2px 0 4px; font-weight: 700; border-bottom: 1px solid #000; }
.tp-vch-totals span { display: inline-block; min-width: 140px; padding: 0 6px; text-align: right; }
.tp-vch-totals .tp-lbl { flex: 1 1 auto; text-align: left; }
.tp-vch-foot .tp-flabel { width: 130px; }
.tp-vch-foot textarea { max-width: none !important; }
.tp-diff { color: var(--tp-red); }
.tp-app input.tp-mini { width: 130px; height: 19px; font-size: 12.5px; }
.tp-gridhost { min-height: 0; }

/* ── A dialog of the rest of the app, over this look ────────────────── */
html[data-theme="tally"] .wallmodal { background: rgba(92, 104, 114, .38); }
html[data-theme="tally"] .wallcard { border-radius: 0; border: 1px solid var(--tp-frame); box-shadow: 0 8px 26px rgba(0, 0, 0, .3); }
html[data-theme="tally"] .wallcard h3 { margin: -20px -22px 12px; padding: 4px 22px; font: 700 13.5px/1.5 Arial, sans-serif; color: #000; background: var(--tp-strip); }
html[data-theme="tally"] .wallfoot, html[data-theme="tally"] .modal-actions { border-top: 1px solid var(--tp-rule); border-radius: 0; }
html[data-theme="tally"] .th-card { border-radius: 0; }

/* ── Stock item: tracking, alternate units, allocations ─────────────── */
/* "Where 1 Box = 20 Pc" on one line, the number box sized for a number. */
.tp-conv { display: inline-flex; flex: 1 1 auto; align-items: center; gap: 6px; }
.tp-frow .tp-conv input[type="text"] { flex: none; width: 72px; max-width: 72px; }
.tp-conv-u { min-width: 26px; padding-top: 0; }
/* Stock Item Allocations (a medicine's batches): the voucher grid, kept to
 * the width of what it holds. */
.tp-alloc .tp-vgrid { max-width: 980px; }
.tp-alloc .tp-vch-totals { max-width: 980px; }
.tp-vgrid .tp-c-date { width: 104px; }

/* A line of an item with an alternate unit: the pack's box, and under it
 * "+ [5] Tab" — the pack may be 0 and the pieces 5. */
.tp-qty2 { display: flex; align-items: center; justify-content: flex-end; gap: 3px; padding-top: 1px; }
.tp-qty2[hidden] { display: none; }
.tp-vgrid .tp-qty2 input.tp-loose { width: 52px; height: 19px; font-size: 12.5px; }
.tp-loose-plus { font-size: 12px; color: #555; }
.tp-loose-u { min-width: 22px; font-size: 12px; color: #444; text-align: left; }

/* Figures shown from this computer's copy while the server is asked
 * (js/tp-data.js swr) — small, under the period, so it is seen and not loud. */
.tp-rpt-cache { padding-top: 2px; font-size: 11.5px; font-style: italic; color: #5b6b7a; text-align: right; white-space: nowrap; }
.tp-rpt-cache.tp-rpt-offline { font-style: normal; font-weight: 700; color: var(--tp-red); }

/* Company Security's password boxes look like every other box of a form. */
.tp-app input[type="password"] { height: 21px; padding: 0 4px; background: transparent; border: 1px solid transparent; border-bottom: 1px dotted #9a9a9a; border-radius: 0; outline: none; }
.tp-app input[type="password"]:focus { background: var(--tp-input); border: 1px solid var(--tp-input-line); }
.tp-frow input[type="password"] { flex: 1 1 auto; min-width: 0; max-width: 260px; }

/* The shop's registrations under its name on the Gateway. */
.tp-inf-reg { margin-top: 10px; font: 12.5px/1.4 Arial, sans-serif; color: #444; }

/* ── Settings → Look: the two looks side by side (js/theme.js) ─────── */
.th-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 14px; }
.th-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid #d5dbe3; border-radius: 10px; cursor: pointer; }
.th-card:hover { border-color: #8aa4c4; }
.th-card.on { border-color: #134b90; box-shadow: 0 0 0 2px rgba(19, 75, 144, .18); }
.th-swatch { display: flex; height: 34px; overflow: hidden; border-radius: 6px; }
.th-swatch i { flex: 1 1 0; }
.th-sw-bilzy i:nth-child(1) { background: #0f3460; }
.th-sw-bilzy i:nth-child(2) { background: #2563eb; }
.th-sw-bilzy i:nth-child(3) { background: #f1f5f9; }
.th-sw-tally i:nth-child(1) { background: #134b90; }
.th-sw-tally i:nth-child(2) { background: #88bee6; }
.th-sw-tally i:nth-child(3) { background: #fec530; }
.th-say { font-size: 12.5px; color: #475569; }
.th-state { font-size: 12px; font-weight: 700; color: #134b90; }
.th-note { margin-top: 10px; font-size: 12.5px; color: #64748b; }

/* ── The pharmacy's own columns and boxes ─────────────────────────────── */
/* A line's batch, its free strips, a voucher's expiry. */
.tp-vgrid .tp-c-batch { width: 112px; }
.tp-vgrid .tp-c-free { width: 64px; }
.tp-vgrid .tp-c-free[hidden], .tp-vgrid th.tp-c-free[hidden] { display: none; }
/* A list beside the voucher (Modes of Payment, the medicines) narrows it; the
 * figures' columns then give the medicine's name the room. */
.tp-vch-body { container-type: inline-size; }
@container (max-width: 960px) {
  .tp-vgrid td, .tp-vgrid th { padding-left: 4px; padding-right: 4px; }
  .tp-vgrid th { white-space: nowrap; }
  .tp-vgrid .tp-c-amt { width: 92px; }
  .tp-vgrid .tp-c-rate { width: 80px; }
  .tp-vgrid .tp-c-qty { width: 84px; }
  .tp-vgrid .tp-c-batch { width: 92px; }
  .tp-vgrid .tp-c-date { width: 72px; }
  .tp-vgrid .tp-c-free { width: 48px; }
  .tp-vgrid .tp-c-disc { width: 48px; }
  .tp-vgrid .tp-c-gst { width: 44px; }
  .tp-vgrid .tp-c-per { width: 40px; }
  .tp-vgrid .tp-qty2 input.tp-loose { width: 40px; }
}
/* The medicine's batches, opened with Enter. */
.tp-app input.tp-batches { font-weight: 700; color: var(--tp-chev); cursor: pointer; }
/* Age, sex and registration on one line of the head. */
.tp-patient .tp-inline { max-width: 420px; }
.tp-patient input.tp-mini { flex: 0 1 120px; }