:root {
  --bar: #232f3c; --bar-2: #1b2530; --panel: #1f2a35; --tile: #2b3a4a; --data: #2b3a4a; --accent-bar: #2a9d8f;
  --line: #d5dde0; --ink: #1f2d33; --muted: #5f7076; --bg: #f3f4f6; --row: #fdf3d0; --grid: #dcebe3; --field: #b9dcf2;
  --danger: #d9463e; --ok: #1e9e6a; --accent: #f4743b; --select: #0b8ad8; --new: #3b8fe0;
}
:root[data-skin="teal"] { --bar: #2a9d8f; --bar-2: #17423f; --panel: #1d4a46; --tile: #17423f; --data: #2b3a4a; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 13px "Segoe UI", Tahoma, Arial, sans-serif; color: var(--ink); background: var(--bg); overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: #fff; border: 1px solid #aebbc0; border-radius: 2px; padding: 2px 6px; min-height: 24px; max-width: 100%; }
.card input:not([type=checkbox]):not([type=date]), .card select { background: var(--field); border-color: #8fbfdc; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=number] { text-align: left; direction: ltr; }
input[type=checkbox] { min-height: 0; width: 15px; height: 15px; vertical-align: middle; }
button { cursor: pointer; border: 0; border-radius: 2px; padding: 5px 14px; background: var(--tile); color: #fff; }
button:hover { filter: brightness(1.2); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent-bar); }
button.ok { border-bottom: 3px solid var(--ok); }
button.danger { border-bottom: 3px solid var(--danger); }
button.new { border-bottom: 3px solid var(--new); }
button.ghost { background: #fff; color: var(--ink); border: 1px solid #c9d2d6; border-bottom: 3px solid var(--ok); }
button.icon { padding: 1px 6px; background: var(--danger); color: #fff; border-radius: 50%; font-size: 11px; line-height: 16px; }
button.icon.edit { background: var(--tile); }

.shell { display: grid; grid-template: 62px minmax(0, 1fr) / 157px minmax(0, 1fr); height: 100vh; background: var(--bar); }
.brandbar { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: #fff; overflow: hidden; }
.brandbar small { display: block; color: #4fe0c8; font-size: 11px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #26d4c4; color: #123; display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: none; }
.topbar { grid-column: 2; grid-row: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-inline-end: 6px; color: #fff; min-width: 0; }
.tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; min-width: 0; align-items: flex-end; height: 100%; }
.tab { flex: none; background: var(--bar-2); color: #fff; padding: 7px 26px 7px 14px; border-radius: 8px 8px 0 0; white-space: nowrap; display: flex; gap: 12px; align-items: center; cursor: pointer; border-top: 2px solid transparent; }
.tab.active { background: #fff; color: var(--ink); border-top-color: var(--accent-bar); }
.tab .close { color: var(--accent-bar); background: none; padding: 0 2px; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 2px; padding-bottom: 16px; flex: none; }
.top-actions button { background: none; padding: 3px 7px; position: relative; }
.top-actions svg { width: 20px; height: 20px; display: block; }
.top-actions small { opacity: .75; padding-inline-start: 10px; font-size: 11px; }
.badge { position: absolute; top: -5px; inset-inline-end: 0; background: var(--danger); border-radius: 9px; font-size: 10px; padding: 0 4px; }

.sidebar { grid-column: 1; grid-row: 2; overflow-y: auto; padding-bottom: 10px; }
.sidebar button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px 7px 12px; background: none; border-radius: 0; text-align: start; font-size: 12px; }
.sidebar button.brand-row { color: #cfe; padding-block: 11px; }
.sidebar button.active, .sidebar button:hover { background: var(--panel); filter: none; }
.sidebar svg { width: 19px; height: 19px; flex: none; }
.sidebar .mark { border-inline-end: 2px solid; padding-inline-end: 4px; display: inline-flex; }
.main { grid-column: 2; grid-row: 2; position: relative; overflow: hidden; display: flex; min-width: 0; background: var(--bar); }
.toolstrip { width: 24px; flex: none; order: 2; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.toolstrip button { background: none; padding: 5px 3px; }
.toolstrip svg { width: 17px; height: 17px; display: block; }
.content { flex: 1; overflow: auto; background: #fff; min-width: 0; }

.flyout { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--panel); z-index: 20; display: grid; grid-template-columns: repeat(var(--cols, 3), 133px); grid-auto-rows: 84px; gap: 0; padding: 4px; overflow-y: auto; align-content: start; box-shadow: -3px 0 12px #0005; }
.flyout button { background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 11px; border-bottom: 1px solid #ffffff1c; border-radius: 0; padding: 4px; }
.flyout button:hover { background: #ffffff14; filter: none; color: #ffa27a; }
.flyout svg { width: 34px; height: 34px; }
.home { display: grid; grid-template-columns: repeat(5, 108px); grid-auto-rows: 108px; gap: 13px; justify-content: center; align-content: center; min-height: 100%; padding: 20px; background: var(--bg); }
.tile { background: var(--tile); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 11px; padding: 6px; }
.tile svg { width: 50px; height: 50px; }
.notif { position: absolute; top: 80px; inset-inline-start: 6px; width: min(340px, calc(100% - 16px)); max-height: calc(100% - 96px); overflow: auto; background: var(--tile); color: #fff; z-index: 25; padding: 12px; box-shadow: 0 6px 24px #0005; border: 4px solid #cfe7f7; }
.notif h3 { margin: 0 0 8px; }
.notif details { border-top: 1px solid #ffffff25; padding: 7px 0; }
.notif summary { cursor: pointer; display: flex; justify-content: space-between; }
.notif ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 12px; }

.page { padding: 8px 12px; display: flex; flex-direction: column; min-height: 100%; }
.page > .table-wrap, .page > .fill > .table-wrap { flex: 1; }
.page > .fill { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.page h2 { margin: 0 0 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
.bar { display: flex; flex-wrap: wrap; gap: 7px 12px; align-items: end; margin-bottom: 8px; border-bottom: 2px solid #e8a39d; padding-bottom: 8px; }
.field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.field input, .field select, .field textarea { color: var(--ink); }
.field.check { flex-direction: row; align-items: center; gap: 5px; min-height: 24px; }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; max-width: 980px; }
.form .wide { grid-column: 1 / -1; }
.section { margin: 12px 0 6px; font-size: 13px; color: var(--ink); font-weight: 700; border-bottom: 2px solid #e8a39d; padding-bottom: 3px; grid-column: 1 / -1; }

.table-wrap { overflow: auto; background: var(--data); min-height: 110px; }
table { border-collapse: collapse; width: 100%; }
th { background: #fff; color: var(--ink); position: sticky; top: 0; font-weight: 600; font-size: 12px; z-index: 1; }
th, td { padding: 4px 8px; text-align: start; white-space: nowrap; }
.table-wrap tbody tr { background: #e8f2f8; color: var(--ink); }
.table-wrap td { border-bottom: 1px solid #c6d6df; }
td.num, th.num { text-align: left; direction: ltr; font-variant-numeric: tabular-nums; }
.table-wrap tbody tr:hover, .table-wrap tbody tr.selected { background: var(--select); color: #fff; }
.table-wrap tbody tr:hover .neg { color: #fff; }
tr.clickable { cursor: pointer; }
.empty { padding: 24px; text-align: center; color: #cdd8de; }
.empty.error { color: var(--danger); }
.neg { color: var(--danger); }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px 12px; margin: 0 0 8px; }
.stat { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; background: #eef0f1; font-size: 12px; align-items: baseline; }
.stat small { color: var(--muted); }
.stat b { font-variant-numeric: tabular-nums; direction: ltr; }
.foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-top: 6px; }
.foot .summary { flex: 1; margin: 0; }

/* Item card */
.card { display: flex; flex-direction: column; min-height: 100%; }
.card-top { display: grid; grid-template-columns: minmax(330px, 42%) minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-bottom: 2px solid #e8a39d; }
.card-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; align-items: center; font-size: 12px; color: var(--muted); }
.card-fields > label { display: contents; }
.card-fields span, .card-fields input { display: block; width: 100%; }
.foot > button { align-self: end; }
.card-buttons { display: flex; gap: 6px; margin-top: 8px; }
.card-buttons button { flex: 1; padding-block: 7px; }
.card-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid #c9d2d6; flex-wrap: wrap; }
.card-tabs button { background: #eef0f1; color: var(--ink); border-radius: 3px 3px 0 0; padding: 4px 12px; }
.card-tabs button.active { background: #fff; border: 1px solid #c9d2d6; border-bottom-color: #fff; font-weight: 700; margin-bottom: -1px; }
.card-panel { padding: 12px; flex: 1; }

/* Stock documents */
.sdoc { display: grid; grid-template-columns: minmax(0, 1fr) 280px; height: 100%; min-height: 480px; }
.sdoc-main { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-width: 0; }
.sdoc-side { grid-column: 2; grid-row: 1; background: var(--data); padding: 8px; display: flex; flex-direction: column; gap: 6px; color: #dfe7ec; min-width: 0; }
.sdoc-side .field { color: #dfe7ec; }
.sdoc-side .fill { flex: 1; min-height: 0; overflow: auto; }
.sdoc-head { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 6px 10px; align-items: center; border-bottom: 3px solid #e6e6e6; }
.sdoc-head .field { flex-direction: row; align-items: center; gap: 5px; }
.sdoc-title { color: var(--bar-2); font-size: 14px; margin-inline-end: 8px; }
.sdoc-grid { flex: 1; background: var(--doc); overflow: auto; padding: 6px; min-height: 180px; }
.sdoc-grid thead th { background: #fff; }
.sdoc-grid tbody tr { background: var(--row); }
.sdoc-grid td { padding: 2px 5px; border-bottom: 1px solid #e5d9a8; }
.sdoc-grid input, .sdoc-grid select { width: 100%; min-width: 54px; border-color: transparent; background: transparent; }
.sdoc-grid .table-wrap { background: transparent; }
.with-dots { display: inline-flex; gap: 3px; align-items: center; }
button.dots { padding: 1px 7px; border-bottom-width: 1px; }
button.sky { background: #b9dcf2; color: var(--ink); border: 1px solid #5f9cc6; font-weight: 700; }
dialog.dlg { width: min(860px, 94vw); max-height: 88vh; overflow: auto; border: 0; border-top: 3px solid #e8a39d; padding: 10px 14px; }
dialog.dlg::backdrop { background: #0006; }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dlg-split { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 10px; }

.task-talk { min-height: 70px; max-height: 180px; overflow: auto; background: #f3f6f8; padding: 6px; margin-bottom: 6px; }
.task-msg { padding: 3px 0; }
.task-msg small { color: var(--muted); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar { cursor: pointer; border: 0; padding: 0; }

/* Vouchers */
.voucher { padding: 18px; display: flex; justify-content: center; }
.voucher-card { position: relative; width: min(760px, 100%); border-top: 3px solid var(--ok); padding: 10px 14px; background: #fff; }
.voucher-card.kind-payment { border-top-color: var(--danger); }
.voucher-card.kind-neutral { border-top-color: var(--select); }
.voucher-card h3 { margin: 0 0 10px; color: var(--ok); }
.voucher-card.kind-payment h3 { color: var(--danger); }
.voucher-card.kind-neutral h3 { color: var(--ink); }
.voucher-box { float: left; width: 280px; margin: 0 14px 10px 0; background: var(--ok); color: #fff; padding: 8px; font-size: 12px; }
.voucher-fields { display: grid; }
.accounts-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 8px; align-items: stretch; }
.accounts-split > div { min-width: 0; }
@media (max-width: 760px) { .voucher-box { float: none; width: auto; margin-inline: 0; } .accounts-split { display: block; } }
.voucher-card.kind-payment .voucher-box { background: var(--danger); }
.voucher-box .table-wrap { min-height: 0; margin-top: 4px; }
.voucher-rest { align-self: end; color: var(--muted); font-size: 12px; }
.voucher-fields textarea { width: 100%; }
.multi-grid { background: var(--data); overflow: auto; min-height: 180px; }
.multi-grid tbody tr { background: #9ff19f; color: var(--ink); }
.multi-grid td { padding: 2px 6px; }
.multi-grid input, .multi-grid select { background: transparent; border-color: transparent; width: 100%; min-width: 70px; }

/* Users */
.users-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 100%; }
.user-card { background: var(--tile); color: #fff; padding: 14px; }
.user-card .field { color: #dfe7ec; }
.user-card input { background: #fff; }
.user-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.user-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.pick-grid { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 10px; }
.pick-list { min-height: 180px; border: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.pick-arrows { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.perm-box { max-height: 52vh; overflow: auto; }
.backup-tiles { display: flex; gap: 2px; justify-content: center; margin: 24px 0 10px; flex-wrap: wrap; }
.backup-tile { background: #eef7f2; color: var(--ink); width: 180px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.backup-tile svg { width: 56px; height: 56px; }
@media (max-width: 760px) { .users-split, .pick-grid { display: block; } }

/* Reports */
tr.row-due td { background: #f7e27e; }
tr.row-limit td { background: #f4a64e; }
tr.row-both td { background: #ef8b86; }
tr.row-paid td { background: #bde8c4; }
tr.row-open td { background: #f7dcc0; }
.bars { display: flex; align-items: flex-end; gap: 8px; min-height: 240px; padding: 12px; overflow-x: auto; background: #fff; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; }
.chart-bar { width: 26px; background: var(--select); border-radius: 3px 3px 0 0; }
.bar-val { color: var(--ink); }

/* Invoice */
.inv { display: grid; grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr) 168px; height: 100%; min-height: 470px; }
.inv-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 6px 10px; border-bottom: 3px solid #e6e6e6; align-items: center; }
.inv-head .field { flex-direction: row; align-items: center; gap: 6px; }
.inv-grid { background: var(--grid); overflow: auto; padding: 8px 6px; min-width: 0; }
.inv-grid thead th { background: #fff; }
.inv-grid tbody tr { background: var(--row); }
.inv-grid td { padding: 2px 5px; border-bottom: 1px solid #e5d9a8; font-size: var(--invoice-size, 13px); }
.inv-grid input, .inv-grid select { width: 100%; min-width: 54px; border-color: transparent; background: transparent; }
.inv-grid input:focus { background: var(--tile); color: #fff; }
.inv-side { grid-column: 2; grid-row: 2 / 4; background: var(--tile); color: #fff; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.inv-side .field { color: #e7eef2; flex-direction: row; justify-content: space-between; align-items: center; }
.inv-side output { background: #fff; color: var(--ink); padding: 2px 6px; direction: ltr; text-align: left; min-width: 76px; }
.total-box { margin-top: auto; background: #0c1a1a; border-radius: 8px; padding: 8px; text-align: center; border: 1px solid #39505a; }
.total-box b { display: block; font-size: 19px; color: #ffd778; }
.total-box small { color: #8ff0a4; }
.inv-foot { padding: 5px 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.inv-foot .row { display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: center; }
.inv-foot .field { flex-direction: row; align-items: center; gap: 5px; }
.inv-foot .spacer { flex: 1; }
.inv-foot button.wait { background: var(--select); }

.inv-grid.kind-purchase, .inv-grid.kind-purchase_return { background: #efe9f8; }
.inv-grid.kind-sale_return { background: #9ccdb1; }
.inv-grid.kind-quote { background: #d5dbe8; }
.inv-grid tr.found td { outline: 2px solid var(--accent); }
.line-details { font-size: 11px; color: var(--muted); background: #fff8df; }
.search-cell { position: relative; }
.search-cell > input { background: #fff; border: 1px solid #c8b878; min-width: 260px; width: min(420px, 100%); }
.suggest { position: absolute; top: 100%; inset-inline-start: 0; z-index: 15; background: var(--row); border: 1px solid #8a8a7a; max-height: 260px; overflow: auto; width: min(760px, 86vw); box-shadow: 0 4px 12px #0004; }
.suggest tbody tr:hover { background: var(--tile); color: #fff; }
.suggest td, .suggest th { padding: 3px 7px; font-size: 12px; }
.side-tabs, .side-subs { display: flex; gap: 2px; }
.side-tabs button, .side-subs button { flex: 1; padding: 4px; background: #566078; font-size: 12px; }
.side-tabs button.active, .side-subs button.active { background: #fff; color: var(--ink); }
.side-content { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; color: #e7eef2; }
.side-content .table-wrap { min-height: 60px; font-size: 11px; }
.side-content .field input, .side-content .field select { max-width: 90px; }
button.linkish { background: #e4e9eb; color: var(--ink); padding: 3px 9px; border-bottom: 2px solid var(--select); }
.note-label { cursor: pointer; color: var(--muted); user-select: none; }

/* POS */
.pos { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) 50px 350px; background: #3a4560; color: #fff; }
.pos-main { grid-column: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0 8px 8px; }
.pos-tabs { display: flex; gap: 2px; justify-content: center; }
.pos-tabs button { background: #566078; width: 86px; border-radius: 0 0 8px 8px; padding-block: 10px; font-size: 11px; }
.pos-tabs button.active { background: #fff; color: var(--ink); }
.pos-tabs button.has { background: #ffe24a; color: var(--ink); }
.pos-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px; padding: 12px 0; }
.pos-groups button { background: #232f4a; padding: 8px; }
.pos-groups button.active { background: #fff; color: var(--ink); }
.pos-items { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); grid-auto-rows: 44px; gap: 2px; overflow: auto; align-content: start; }
.pos-items button { background: #566078; font-size: 11px; padding: 2px; }
.pos-items small { display: block; color: #ffe38a; }
.pos-strip { grid-column: 2; display: flex; flex-direction: column; background: #566078; padding-top: 144px; gap: 2px; }
.pos-strip button { background: #fff6dc; color: var(--ink); height: 42px; font-size: 18px; padding: 0; border-radius: 0; }
.pos-strip button.round { background: var(--accent); color: #fff; font-weight: 700; }
.pos-left { grid-column: 3; display: flex; flex-direction: column; min-height: 0; }
.pos-head { padding: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; color: var(--ink); align-items: center; }
.pos-head input, .pos-head select, .pos-head span > input { width: 100%; background: #e6efff; border-radius: 12px; border: 0; min-height: 26px; }
.pos-head .pos-exit { background: #e8222a; padding-block: 3px; }
.pos-head .pos-help { background: var(--select); border-radius: 50%; width: 26px; height: 26px; padding: 0; justify-self: start; }
.pos-clock { background: #fff; color: var(--ink); padding: 2px 8px; border-radius: 4px; text-align: center; }
.pos-lines { flex: 1; background: #c4c6f5; overflow: auto; color: var(--ink); min-height: 0; }
.pos-lines td { padding: 3px 4px; border-bottom: 1px solid #e5d9a8; background: var(--row); font-size: 12px; }
.pos-lines th { background: #fff; font-size: 11px; }
.pos-lines td.tap { cursor: pointer; background: #fdf0b8; text-align: center; min-width: 38px; }
.pos-lines .search-cell input { width: 100%; background: #ffe24a; border: 0; }
.pos-total { background: #fff; margin: 3px 6px; padding: 3px; border-radius: 3px; }
.pos-total-row { display: flex; justify-content: space-between; align-items: center; gap: 4px; background: #111c20; color: #fff; padding: 3px 6px; }
.pos-total-row:first-child { background: #566078; }
.pos-total small { color: #8ff0a4; font-size: 10px; }
.pos-total select, .pos-total input { color: var(--ink); background: #fff; }
.pos-net { font-size: 24px; }
.pos-prev { font-size: 11px; }
.pos-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 0 6px 6px; }
.pos-buttons button { background: #fff; color: var(--ink); padding: 11px 2px; font-size: 11px; }
.pos-buttons button.sell { background: #dbeaff; }
.pos-buttons button.print-on { background: var(--select); color: #fff; }
.pos-buttons button.cancel { background: #cc4a2b; color: #fff; }
input.pad-display { background: var(--tile); color: #fff; border-radius: 20px; text-align: center; font-size: 20px; width: 100%; min-height: 40px; margin-bottom: 8px; direction: ltr; }
.pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; justify-items: center; margin-bottom: 8px; direction: ltr; }
button.key { width: 46px; height: 46px; border-radius: 50%; background: #e9e9e9; color: var(--ink); border: 1px solid #aaa; padding: 0; font-weight: 700; }
button.key.del { background: #e8222a; color: #fff; }
button.key.ent { background: var(--tile); color: #fff; }
.pack-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
button.note { height: 56px; font-weight: 700; border-radius: 3px; }
button.note-IQD { background: linear-gradient(135deg, #5b7a58, #b6a768); }
button.note-USD { background: linear-gradient(135deg, #3e6a4f, #8aa384); }
.pay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pay-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px; align-items: center; margin-bottom: 6px; font-size: 13px; color: var(--ink); }
.pay-row input, .pay-row select, .pay-row textarea { width: 100%; }
.pay-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.paper-80mm { width: 72mm; font-size: 11px; }
.paper-A5 { width: 138mm; }

.login { height: 100%; display: grid; place-items: center; background: linear-gradient(150deg, var(--tile), var(--bar-2)); padding: 16px; }
.login form { background: #fff; padding: 28px; border-radius: 8px; width: min(360px, 100%); display: flex; flex-direction: column; gap: 13px; }
.login h1 { margin: 0; color: var(--bar-2); font-size: 26px; }
.error { color: var(--danger); min-height: 18px; font-size: 13px; }
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 18px; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; max-width: 90vw; }
#toast.show { opacity: 1; }
#toast.err { background: var(--danger); }
.labels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.label { border: 1px dashed #999; padding: 6px; width: 190px; text-align: center; font-size: 12px; background: #fff; }
.label svg { width: 100%; height: 46px; display: block; }
#print-area { display: none; }

@media (max-width: 760px) {
  .shell { grid-template-columns: 54px minmax(0, 1fr); }
  .brandbar div, .sidebar span:not(.mark) { display: none; }
  .sidebar button { justify-content: center; padding-inline: 4px; }
  .home { grid-template-columns: repeat(auto-fill, 88px); grid-auto-rows: 88px; }
  .flyout { --cols: 2 !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .card-top, .inv, .pos, .sdoc, .dlg-split { display: block; height: auto; }
  .toolstrip { display: none; }
}
@media print {
  body { overflow: visible; background: #fff; }
  #app, #toast { display: none; }
  #print-area { display: block; padding: 8px; color: #000; }
  #print-area table { font-size: 12px; }
  #print-area th { position: static; }
  #print-area .table-wrap { background: #fff; }
  #print-area .table-wrap tbody tr { background: #fff; }
  #print-area td { border-bottom: 1px solid #999; }
  #print-area .label { break-inside: avoid; }
  .doc-head { display: flex; justify-content: space-between; margin-bottom: 10px; }
}

/* Section review: video 1 and 2 */
#app { height: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.login-new { background: #1d2a36; }
.login-win { background: #2b3036; width: min(660px, 100%); padding: 0 34px 26px; }
.login-bar { display: flex; flex-direction: row-reverse; gap: 8px; height: 50px; align-items: center; margin-inline: -24px; justify-content: flex-start; direction: ltr; }
.login-bar button { background: none; padding: 4px; }
.login-bar svg { width: 20px; height: 20px; display: block; }
.login .login-card { width: 100%; border-radius: 0; border-top: 3px solid #2ad0c0; padding: 12px 16px; gap: 14px; align-items: center; }
.login-top { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.login-top small { position: absolute; inset-inline-end: 0; color: #667; }
.login .login-name { border: 0; border-bottom: 1px solid #ddd; text-align: center; width: 180px; border-radius: 0; }
.login-face { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle, #f9a15f, #ef6a22); display: grid; place-items: center; }
.login-face svg { width: 52px; height: 52px; }
.login-pass { display: flex; align-items: center; gap: 8px; }
.login-pass > svg { width: 22px; height: 22px; }
.login-pass input { width: 170px; }
.login-pass .primary { padding: 3px 6px; order: 3; }
.login-pass .primary svg { width: 16px; height: 16px; display: block; }
.login-foot { width: 100%; border-top: 1px solid #eee; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #445; }
.login-foot svg { width: 26px; height: 26px; display: block; }
.notif { background: #2b3a4aee; padding-top: 58px; border: 5px solid #bfe0f5; overflow: visible; }
.notif-bell { position: absolute; top: -6px; inset-inline-start: -6px; width: 92px; height: 74px; border-radius: 0 0 0 60px; background: #bfe0f5; display: grid; place-items: center; }
.notif-bell svg { width: 46px; height: 46px; }
.notif-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.notif-row button { background: none; color: #fff; font-size: 15px; display: flex; flex: 1; justify-content: space-between; padding: 2px; text-align: start; }
.cuts { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; height: 100%; }
.cuts-tiles { min-height: 0; justify-content: start; align-content: start; }
.cuts-head { display: flex; align-items: center; gap: 8px; }
.cuts-head b { background: #f28c38; color: #fff; padding: 3px 10px; }
.cuts-head input { flex: 1; }
.cuts-list { max-height: calc(100vh - 150px); overflow: auto; }
.cuts-list svg { width: 18px; height: 18px; display: block; margin: auto; }
.cuts-list tr.cut-on td { background: #f4424f; color: #fff; }
.cuts-list tr.cut-off td { background: #0fadaa; color: #fff; }
.check-on { background: #1fb760 !important; color: #fff !important; border-radius: 50%; }
.check-off { background: #c7ccd1 !important; color: #fff !important; border-radius: 50%; }
.look-screen { display: grid; grid-template-columns: 210px 180px minmax(0, 1fr); gap: 14px; height: 100%; }
.look-form { display: flex; flex-direction: column; gap: 10px; }
.look-list { display: flex; flex-direction: column; justify-content: space-between; border-top: 3px solid #f28c38; }
.look-preview { display: flex; flex-direction: column; padding: 8px; color: #fff; min-height: 430px; }
.look-top { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; height: 44px; justify-content: flex-end; }
.look-top svg { width: 18px; height: 18px; }
.look-user { margin-inline-end: auto; }
.look-body { flex: 1; display: grid; grid-template-columns: 90px minmax(0, 1fr) 24px; direction: rtl; }
.look-rail { order: 3; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.look-rail svg { width: 16px; height: 16px; }
.look-page { order: 2; background: #fff; }
.look-menu { order: 1; padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.tasks-page { display: flex; flex-direction: column; }
.tasks-page .fill { flex: 1; }
.tasks-foot { display: flex; justify-content: flex-end; padding-top: 8px; }
.task-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.task-main { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.task-main .wide, .task-users, .task-main .row { grid-column: 1 / -1; }
.task-users { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.task-users .pick-list { background: #dcdfe8; min-height: 92px; padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-content: start; }
.task-users .pick-list button { background: #fff; color: #222; border: 1px solid #555; padding: 2px 10px; }
.task-side { display: flex; flex-direction: column; gap: 8px; border-top: 3px solid #d9463e; padding-top: 6px; }
.task-side .task-talk { flex: 1; min-height: 200px; overflow: auto; }
.pass-steps { display: flex; flex-direction: column; gap: 10px; width: 280px; margin-bottom: 10px; }

/* Section review: stores, videos 3 to 5 */
.card-top { grid-template-columns: minmax(330px, 30%) minmax(0, 1fr); }
.card-fields.two { display: grid; grid-template-columns: repeat(2, auto minmax(0, 1fr)); gap: 5px 8px; }
.card-fields.two > .ph { display: contents; font-size: 0; }
.card-fields.two .ph input { font-size: 13px; grid-column: span 2; }
.card-fields .with-dots { display: flex; gap: 2px; }
.card-fields .with-dots select { flex: 1; min-width: 0; }
.card-buttons button svg { width: 15px; height: 15px; vertical-align: middle; margin-inline-end: 6px; }
.card-buttons button:disabled { opacity: .45; }
.size-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; flex-wrap: wrap; }
.size-row label.field:not(.check) { display: flex; align-items: center; gap: 4px; }
.size-row input[type=number] { width: 60px; }
.card-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card-left > label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.card-left > label input { flex: 1; }
.card-list { flex: 1; min-height: 190px; max-height: 240px; overflow: auto; background: var(--tile); }
.pack-box { min-height: 36px; margin-bottom: 8px; }
.pack-grid { display: grid; grid-template-columns: 110px repeat(3, minmax(0, 1fr)); gap: 4px 14px; align-items: start; }
.pack-col { display: flex; flex-direction: column; gap: 5px; }
.pack-name { display: flex; gap: 4px; align-items: center; }
.pack-name select, .pack-name b { width: 90px; flex: none; }
.pack-name input { flex: 1; min-width: 0; }
.pack-col label.field:not(.check) { display: flex; gap: 6px; align-items: center; }
.pack-col label.field:not(.check) input { width: 90px; }
.pack-summary { margin-top: 6px; font-size: 12px; color: var(--ink); white-space: pre; }
.price-box { display: flex; flex-direction: column; gap: 5px; position: relative; }
.price-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.price-row label.field:not(.check) { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; font-size: 12px; }
.price-row input:disabled { opacity: .75; }
.price-convert { position: absolute; top: -34px; inset-inline-end: 0; }
.check-row { display: flex; gap: 60px; margin-top: 14px; flex-wrap: wrap; }
.disc-row { display: flex; gap: 14px; margin-bottom: 8px; }
.disc-row label.field { display: flex; gap: 6px; align-items: center; }
.disc-row input { width: 90px; }
.extra-grid { display: grid; grid-template-columns: 340px 190px; gap: 30px; }
.extra-fields { display: flex; flex-direction: column; gap: 4px; }
.extra-fields label.field { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; font-size: 12px; }
.extra-fields textarea { background: var(--field); border: 1px solid #8fbfdc; }
.item-image { width: 190px; height: 160px; background: #ddd; display: grid; place-items: center; cursor: pointer; font-size: 12px; overflow: hidden; }
.item-image img { max-width: 100%; max-height: 100%; }
.expiry-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; }
.expiry-row label.field:not(.check) { display: flex; gap: 6px; align-items: center; }
.expiry-row input[type=number] { width: 60px; }
.barcode-panels { display: flex; gap: 6px; margin-top: 70px; flex-wrap: wrap; }
.code-panel { background: var(--tile); color: #fff; width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 5px; min-height: 186px; }
.code-panel input { width: 100%; }
.code-list { background: #fff; color: #222; flex: 1; min-height: 72px; overflow: auto; padding: 2px; }
.code-list button { display: block; width: 100%; background: none; color: #222; text-align: start; padding: 1px 3px; }
.code-panel > button { align-self: flex-start; }
.fill-tab { display: flex; flex-direction: column; gap: 6px; min-height: 340px; }
.fill-tab .fill { flex: 1; }
.tab-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dots-list { max-height: 300px; overflow: auto; margin: 6px 0; min-height: 200px; background: var(--tile); }
.dots-actions { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.group-win { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
.group-form { display: flex; flex-direction: column; gap: 8px; border-top: 3px solid #f28c38; padding-top: 8px; }
.items-page { display: flex; flex-direction: column; padding-top: 4px; }
.items-tabs { display: flex; gap: 2px; font-size: 12px; }
.items-tabs button { background: #eef0f1; color: var(--ink); padding: 2px 10px; }
.items-tabs button.active { background: #fff; border: 1px solid #c9d2d6; font-weight: 700; }
.items-top { min-height: 62px; border-top: 3px solid #f0877c; padding: 6px 0; }
.items-cols { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 12px; }
.items-bulk { align-items: center; }
.items-foot { display: flex; gap: 8px; align-items: flex-start; padding-top: 6px; }
.items-actions { display: flex; flex-direction: column; gap: 4px; flex: none; }
.items-sum { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.wh-page { display: flex; justify-content: center; }
.wh-mid { width: min(430px, 100%); display: flex; flex-direction: column; height: 100%; }
.wh-mid .fill { flex: 1; }
.wh-form { display: flex; flex-direction: column; gap: 5px; border-top: 3px solid #f28c38; padding: 6px 0; }
.wh-form label.field { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; }
.import-page { display: flex; flex-direction: column; gap: 8px; }
.import-head { display: flex; gap: 14px; align-items: center; }
.import-head label.field { display: flex; gap: 6px; align-items: center; }
.import-map { display: flex; flex-wrap: wrap; gap: 2px; }
.import-map select { width: 96px; }
.import-preview { flex: 1; overflow: auto; background: #eef0f1; min-height: 240px; }
.import-actions { display: flex; gap: 6px; justify-content: flex-end; }

.card-top { grid-template-columns: minmax(430px, 36%) minmax(0, 1fr); }
.card-fields.two { grid-template-columns: 1fr 1fr; }
.card-fields.two > label, .card-fields.two > label.ph { display: flex; align-items: center; gap: 6px; flex-direction: row; white-space: nowrap; }
.card-fields.two > label.ph { font-size: 0; }
.card-fields.two select, .card-fields.two input, .card-fields.two .with-dots { flex: 1; min-width: 0; width: auto; }
.card-fields.two span.with-dots { display: flex; }
.card-fields.two .dots { flex: none; padding: 1px 6px; }
.card-left > label.field { flex-direction: row; display: flex; }
.pack-box > label.field { flex-direction: row; display: flex; align-items: center; gap: 8px; width: 240px; }
.pack-box > label.field input { flex: 1; min-width: 0; }
.pack-col label.field:not(.check), .pack-grid > label.field { flex-direction: row; display: flex; align-items: center; gap: 6px; }
.pack-grid > label.field input { width: 50px; }
.wh-page { height: 100%; align-items: stretch; box-sizing: border-box; }
.wh-mid { margin-inline: auto; }
.wh-mid .fill { min-height: 260px; }
.expiry-row label.field:not(.check) { flex-direction: row; }

/* Section review: stock documents, videos 6 and 7 */
.sdoc.no-side { grid-template-columns: minmax(0, 1fr); }
.sdoc { grid-template-columns: minmax(0, 1fr) 400px; }
.sdoc-head { flex-wrap: nowrap; justify-content: flex-start; gap: 30px; }
.head-col { display: flex; flex-direction: column; gap: 4px; }
.head-line { display: flex; gap: 6px; align-items: center; }
.head-line input[aria-label="بحث باركود"] { width: 96px; }
.sdoc-head .field { display: flex; justify-content: space-between; }
.sdoc-grid .pick-row td { background: var(--row); }
.sdoc-grid .pick-row input { background: #fff8; }
.sdoc-grid thead th { white-space: nowrap; }
.sdoc-grid td .icon { width: 22px; height: 22px; padding: 0; }
.sdoc-grid table { width: auto; min-width: 62%; }
.sdoc-grid tr.mf-head td { background: #fff3c4; }
.sdoc-grid tr.mf-part td { background: #8ff0c4; }
.side-search { flex-direction: row !important; align-items: center; gap: 6px; }
.side-search input { flex: 1; }
.grid-pop { position: fixed; z-index: 90; background: #fff8dc; box-shadow: 0 3px 12px #0005; max-height: 180px; overflow: auto; min-width: 620px; font-size: 12px; }
.grid-pop table { width: 100%; border-collapse: collapse; }
.grid-pop th { background: #fff; padding: 3px 6px; text-align: start; position: sticky; top: 0; }
.grid-pop td { padding: 2px 6px; border-bottom: 1px solid #e5d9a8; cursor: pointer; white-space: nowrap; }
.grid-pop tr.on td, .grid-pop tbody tr:hover td { background: #4a5468; color: #fff; }
.comp-win { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 12px; }
.comp-win > .comp-col { order: 2; display: flex; flex-direction: column; gap: 8px; }
.comp-win > .comp-right { order: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; }
.comp-entry { display: flex; flex-direction: column; gap: 8px; }
.comp-list { min-height: 220px; background: #eef0f1; }
.comp-lines { min-height: 260px; background: #eef0f1; padding: 4px; }
.mf-win { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; min-height: 340px; }
.mf-right { display: flex; flex-direction: column; gap: 6px; }
.mf-list, .mf-lines { flex: 1; background: #eef0f1; min-height: 240px; overflow: auto; }
.mf-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mf-foot { display: flex; justify-content: space-between; align-items: center; }
.bc-page { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 0; height: 100%; align-content: center; }
.bc-page.bc-multi { grid-template-columns: minmax(0, 1fr) 260px; align-content: stretch; gap: 6px; }
.bc-right { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bc-right > label.field { flex-direction: row; display: flex; align-items: center; gap: 6px; }
.bc-right > label.field input { flex: 1; }
.bc-list { background: var(--tile); max-height: 400px; min-height: 340px; overflow: auto; }
.bc-box { background: var(--tile); color: #fff; padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 5px; border-top: 3px solid #2ad0c0; }
.bc-box.light { background: #e8e8e8; color: #222; border: 0; }
.bc-box .field { color: inherit; flex-direction: row; display: flex; align-items: center; gap: 8px; }
.bc-box .field input, .bc-box .field select { flex: 1; min-width: 0; }
.bc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bc-stage { background: #a9a9a9; min-height: 170px; display: grid; place-items: center; padding: 8px; color: #111; overflow: hidden; }
.bc-stage .label { border: 2px solid #1a1a6e; border-radius: 2px; padding: 2px; box-sizing: border-box; overflow: hidden; }
.bc-texts { display: flex; flex-direction: column; gap: 5px; }
.bc-actions { display: flex; gap: 6px; padding-top: 8px; align-items: center; }
.bc-actions select { width: 130px; }
.bc-grid { flex: 1; --doc: #c3bdf5; }

.comp-win { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); }
.comp-win > .comp-col { order: 1; }
.comp-win > .comp-right { order: 2; }
.bc-page.bc-multi { grid-template-columns: minmax(0, 1fr) 300px; }
.bc-row label.field input { width: 100%; }
.bc-row label.field { min-width: 0; }

/* Section review: sale screen, videos 8 and 9 */
.inv-head { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
.head-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.head-gap { flex: 1; }
.head-meta { font-size: 11px; color: #1b8a5a; direction: ltr; }
.scan-box { display: inline-flex; align-items: center; gap: 4px; }
.scan-box svg { width: 22px; height: 18px; color: #2b4d8a; }
.pack-cell { background: none; color: inherit; padding: 0 2px; width: 100%; text-align: start; min-width: 50px; }
.pack-pick { display: flex; flex-direction: column; gap: 2px; min-width: 180px; margin-bottom: 40px; }
.pack-pick button { background: #e8f2fa; color: #222; text-align: center; padding: 3px; }
.pack-pick button.on { background: #1b9ad6; color: #fff; }
.inv-grid tr.bundle-row td { background: #2ff0f0; }
.inv-grid tr.bundle-part td { background: #8ff0c4; font-size: 12px; }
.side-line { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.side-prep .field select { max-width: 76px; }
.bal-box { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 8px; }
.bal-box .bal-sign { grid-column: 1 / -1; text-align: start; color: #2ad0c0; font-size: 18px; }
.bal-box output { text-align: center !important; }
.side-bottom { margin-top: auto; }
.total-box small:last-child { display: block; }
.list-days { display: flex; align-items: center; gap: 4px; font-size: 11px; margin-top: 6px; }
.held-win { position: absolute; inset: 0; background: #1b2530; z-index: 15; display: flex; flex-direction: column; }
.held-head { background: #3a4fbf; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 4px 12px; }
.held-body { width: min(430px, 100%); margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: 6px; color: #fff; padding: 6px; }
.held-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.held-filters fieldset { border: 1px solid #667; padding: 4px; margin: 0; }
.held-body .field { color: #fff; flex-direction: row; align-items: center; gap: 6px; display: flex; justify-content: space-between; }
.held-body .field input:not([type=checkbox]), .held-body .field select { flex: 1; min-width: 0; }
.held-list { flex: 1; background: #e8ecf2; color: #222; overflow: auto; }
.print-extras { display: inline-flex; gap: 5px; }
.inv-foot input[aria-label="الواصل"], .inv-foot input[aria-label="الباقي"] { width: 92px !important; }
.inv-foot input[aria-label="الطلب السابق"], .inv-foot input[aria-label="الطلب الكلي"] { width: 76px !important; }
.inv-foot input[aria-label="الخصم"] { width: 76px !important; }

/* Section review: point of sale, video 10 */
.pos-head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-items: start; }
.pos-head-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pos-head-line { display: flex; gap: 3px; align-items: center; }
.pos-head-line > * { min-width: 0; }
.pos-head-line select { flex: 1; }
.pos-head .pos-exit { flex: 1; padding: 3px 4px; }
.pos-head .pos-help { flex: none; }
.pos-pill { display: flex; align-items: center; gap: 4px; background: #e6efff; border-radius: 12px; padding: 0 8px; }
.pos-pill svg { width: 16px; height: 16px; color: #3b6fd6; flex: none; }
.pos-pill input, .pos-pill select { flex: 1; min-width: 0; background: transparent !important; }
.pos-past { flex: 1; display: flex; align-items: center; justify-content: space-between; background: #8d97c7; color: #fff; border-radius: 12px; padding: 3px 8px; }
.pos-past svg { width: 16px; height: 16px; }
.strip-empty { height: 42px; background: #6a7495; margin-top: 2px; }
.pos-strip { padding-top: 144px; }

/* Section review: purchase, video 11 */
.exp-box { border: 1px solid #556; padding: 4px 6px; display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; }
.exp-box legend { font-size: 12px; }
.exp-block { display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid #ffffff22; padding-bottom: 4px; }
.exp-block small { color: #9fe; }

/* Section review: accounts, video 12 */
.acc-form { padding: 6px 10px 0; border-bottom: 2px solid #e8a39d; }
.acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.2fr); gap: 6px 18px; }
.acc-col { display: flex; flex-direction: column; gap: 4px; }
.acc-col > label.field:not(.check), .acc-line > label.field:not(.check) { flex-direction: row; display: flex; align-items: center; gap: 6px; font-size: 12px; }
.acc-col > label.field:not(.check) > input, .acc-col > label.field:not(.check) > select, .acc-col > label.field:not(.check) > .with-dots, .acc-col textarea { flex: 1; min-width: 0; }
.acc-col label.field > :is(input, select, textarea, span) { background: var(--field); }
.acc-line { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.acc-line label.field input:not([type=checkbox]) { min-width: 0; }
.acc-meta { font-size: 11px; color: var(--muted); }
.acc-bar { padding: 6px 0 !important; }
.accounts-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 6px; padding: 8px 10px; }
.acc-bal { background: var(--tile); min-height: 200px; }
.opening-win { display: flex; flex-direction: column; gap: 8px; width: min(380px, 80vw); }
.opening-win .row2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.opening-win label.field { flex-direction: row; display: flex; align-items: center; gap: 8px; }
.opening-win label.field > :is(input, textarea) { flex: 1; }
.acc-form { overflow: hidden; }
.acc-grid > * { min-width: 0; }
.acc-col label.field, .acc-line label.field { white-space: nowrap; }
.acc-line { flex-wrap: wrap; }
.acc-line > label.field:not(.check) { flex: 1; min-width: 0; }
.acc-line > label.field:not(.check) > :is(input, select) { flex: 1; min-width: 0; width: auto !important; }
.acc-col > label.field:not(.check) { padding-inline-start: 2px; }

/* Section review: cash vouchers, video 13 */
.voucher-card.v-single, .voucher-card:has(.v-two) { width: min(540px, 100%); margin: 0 auto; border-top: 3px solid #1db07a; padding: 6px 12px; }
.v-body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; }
.v-fields { display: flex; flex-direction: column; gap: 5px; }
.v-line { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 6px; font-size: 12px; }
.v-line > span:first-child { letter-spacing: .5px; }
.v-line.field { flex-direction: row; }
.v-ctl { display: flex; gap: 6px; align-items: center; min-width: 0; }
.v-ctl > :is(input, select, span, textarea) { flex: 1; min-width: 0; }
.v-ctl > input[disabled] { flex: none; }
.v-small { flex: none !important; font-size: 11px; }
.v-side { display: flex; flex-direction: column; gap: 6px; }
.v-side .voucher-box { font-size: 11px; }
.v-side .empty-box { min-height: 110px; }
.v-last { color: #1b8a5a; font-size: 12px; }
.v-prev { margin-top: auto; }
.v-foot { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.v-cur { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
.v-cur-fields { display: flex; flex-direction: column; gap: 4px; }
.v-cur-box { font-size: 11px; }
.v-words { color: var(--muted); font-size: 11px; background: #eef0f1; padding: 3px 6px; min-height: 18px; }
.multi-grid tr[data-line] td { background: #9df09d; }
.multi-grid .pick-row td { background: #9df09d; }
.m-totals { display: flex; flex-direction: column; gap: 2px; }
.m-tot { display: grid; grid-template-columns: repeat(3, 1fr); }
.m-tot.iqd { background: #9df09d; }
.m-tot.usd { background: #f6b8c1; }
.m-tot .stat { background: transparent; }
.m-slip { border: 1px dashed #999; padding: 10px; margin-bottom: 10px; min-height: 120mm; }

/* Section review: cash documents, video 14 */
.voucher-card.kind-payment { border-top-color: #e04b5a; }
.voucher-card.kind-payment .voucher-box { background: #e04b5a; }
.voucher-card.kind-teal { border-top-color: #12a39a; }
.v-head { display: flex; gap: 10px; }
.v-head > label { flex: 1; }
.v-section { color: #1b8a5a; font-weight: 700; margin-top: 4px; }
.v-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; }
.v-mini { font-size: 11px; }
.v-mini.red { background: #e04b5a; }
.v-acc { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; align-items: center; }
.v-via { border: 1px dashed #bbb; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.v-via.off { color: var(--muted); font-size: 11px; }
.t-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0; }
.t-panel { border-top: 22px solid #e04b5a; position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 150px; background: #eef0f1; padding: 4px; }
.t-panel > b { position: absolute; top: -20px; inset-inline-start: 6px; color: #fff; font-size: 12px; }
.t-panel.teal { border-top-color: #12a39a; }
.tv-card { width: min(420px, 100%); margin: 60px auto; border-top: 3px solid #12a39a; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tv-body { display: flex; flex-direction: column; gap: 6px; }

/* Section review: financial reports, video 15 */
label.field.check.flag-due { background: #ffcf3f; padding: 1px 6px; }
label.field.check.flag-limit { background: #f28c38; color: #fff; padding: 1px 6px; }
label.field.check.flag-both { background: #f6a5a5; padding: 1px 6px; }

/* Section review: control reports, video 18 */
.im-top { display: grid; grid-template-columns: 1fr minmax(220px, 280px); gap: 10px; align-items: start; }
.im-items { background: #2c3e50; padding: 6px; max-height: 180px; overflow: auto; border-radius: 4px; }
.im-items input { width: 100%; margin-bottom: 4px; }
.im-items tr.selected td { background: #19b5e8; color: #fff; }
.im-opts { display: flex; flex-direction: column; gap: 4px; }
.im-sum { margin-top: 8px; }
.im-sum td { background: #19b5e8; color: #fff; font-weight: 600; }
.im-chart { display: flex; gap: 12px; align-items: center; justify-content: center; }
.im-chart-modes { display: flex; flex-direction: column; gap: 10px; }
.svg-chart { flex: 1; text-align: center; color: var(--text, #222); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; border: 1px solid #999; padding: 4px 8px; margin-top: 6px; font-size: 12px; }
.chart-legend i { display: inline-block; width: 14px; height: 10px; margin-inline-end: 4px; }
tr.row-deleted td { color: #c0392b; text-decoration: line-through; }
@media (max-width: 700px) { .im-top { grid-template-columns: 1fr; } }

/* Section review: cash reports, video 16 */
tr.row-in td { background: #8fd18f; color: #12361a; }
tr.row-out td { background: #f08e80; color: #3d0f0a; }

/* Section review: users and settings, videos 19-20 */
.perm-panel .exit { min-width: 120px; }
.cur-split { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 12px; align-items: start; }
.cur-form { background: #2c3e50; color: #fff; padding: 10px; border-radius: 4px; }
.cur-form label.field { color: #fff; }
.backup-progress { width: 100%; max-width: 420px; display: block; margin: 8px auto; }
.report-logo { max-width: 120px; max-height: 80px; vertical-align: middle; background: #eee; }
#print-area .print-head { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #999; margin-bottom: 8px; padding-bottom: 6px; }
#print-area .print-head img { max-height: 60px; }
#print-area .print-foot { border-top: 1px solid #999; margin-top: 8px; padding-top: 4px; font-size: 11px; }
@media (max-width: 700px) { .cur-split { grid-template-columns: 1fr; } }

/* Branches (docs/BRANCHES.md) */
.sync-card { margin-top: 16px; padding: 12px; border: 1px solid #c9d3dc; border-radius: 6px; background: #f6f9fb; }
.sync-card h3 { margin: 0 0 8px; }
.sync-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin-bottom: 8px; }
.sync-grid .warn, .sync-card .warn { color: #b3261e; }
.act-code { font: 700 32px/1.4 monospace; letter-spacing: 6px; text-align: center; background: #eef3f7; border-radius: 6px; padding: 10px; margin: 8px 0; user-select: all; }
.sync-grid b[dir=ltr] { text-align: right; }
.lab-note { background: #fff6d6; border: 1px solid #e6c65c; border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
.lab-link { font-weight: 700; color: #0b6fb3; }
.transfer-warn { background: #fff6d6; border: 1px solid #e6c65c; border-radius: 6px; padding: 8px 24px; }
.transfer-card details { margin: 6px 0; }
.transfer-card summary { cursor: pointer; font-weight: 600; }
.backup-progress[hidden] { display: none; }