/* ==========================================================================
   PanoSys - the ONLY stylesheet of the program (one design, Auditna palette).
   Order: tokens, base, app frame, panel, buttons, forms, tables, menu tiles, entry screens, toast/dialog.
   Logical properties (inline-start/end) make every component work in Arabic (RTL) and English (LTR).
   No screen has its own CSS: a new screen only combines the components below.
   ========================================================================== */

/* ---- font: Cairo (variable, weights 400-800), served from the program (wwwroot/fonts) ---- */
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/cairo-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EEF1; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/cairo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/cairo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- tokens ---- */
:root {
    --navy: #15385F;
    --navy-text: #123760;
    --primary: #245F97;
    --primary-dark: #173F69;
    --bg: #F4F7FB;
    --surface: #FFFFFF;
    --text: #30465F;
    --muted: #71849B;
    --line: #C9D8E7;
    --field-line: #9DB9D9;
    --card-line: #2D679E;
    --soft: #EAF3FC;
    --row-alt: #F7FAFD;
    --row-pick: #D6E6F7;
    --ok: #198754;
    --ok-bg: #E8F6EE;
    --danger: #C94C4C;
    --danger-bg: #FBEDED;
    --radius: 11px;
    --radius-sm: 8px;
    --shadow: 0 6px 18px rgba(24, 65, 104, .08);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 14px;
    --space-5: 20px;
    --control-h: 32px;
    --font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --hero: linear-gradient(100deg, #2E6DA8, #1E4F7D);
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 11.5px; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.5; font-weight: 700; }
h1, h2, h3 { margin: 0 0 var(--space-3); line-height: 1.3; }
a { color: var(--primary); }
button, input, select { font: inherit; }
.muted { color: var(--muted); }
.is-hidden, [hidden] { display: none !important; }

/* ---- app frame: header, navigation, info cards, page ---- */
.app-header {
    height: 60px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: 0 14px; background: var(--navy); color: #fff; box-shadow: 0 2px 7px rgba(20, 52, 87, .16);
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand-mark {
    display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #8FA9C5; border-radius: 12px;
    background: rgba(255, 255, 255, .05); font-size: 21px; font-weight: 700;
}
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: .04em; line-height: 1.1; }
.brand-sub { font-size: 11.5px; color: #BFD2E6; font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-actions form { margin: 0; }
.header-tool {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 36px; padding: 0 10px;
    border: 2px solid #7E9ABB; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; font-weight: 700; cursor: pointer; text-decoration: none;
}
.header-tool:hover { background: rgba(255, 255, 255, .14); }
.header-user { display: flex; flex-direction: column; justify-content: center; min-width: 150px; height: 36px; padding: 0 14px; border: 2px solid #7E9ABB; border-radius: 10px; line-height: 1.15; }
.header-user small { color: #BFD2E6; font-size: 10px; font-weight: 700; }
.header-user strong { font-size: 13px; }

.main-nav { display: flex; align-items: center; justify-content: center; flex: 1; gap: 6px; min-width: 0; margin-inline: var(--space-4); overflow-x: auto; white-space: nowrap; }
.main-nav form { display: contents; }
.nav-item {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 76px; height: 36px; padding: 0 12px;
    border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; box-shadow: none;
    color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.nav-item:hover { background: rgba(255, 255, 255, .12); }
.nav-item.active { border-bottom-color: #fff; background: rgba(255, 255, 255, .10); }

.info-bar { display: grid; grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px 14px 0; }
.info-card {
    display: grid; justify-items: center; padding: 2px 10px 9px; min-width: 0; background: var(--surface);
    border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.info-card small { font-size: 9px; color: var(--muted); font-weight: 700; }
.info-card b { font-size: 12px; color: var(--navy-text); font-weight: 800; white-space: nowrap; }
.info-card:nth-child(-n+2) b { color: var(--primary); }
.info-card:last-child b { font-size: 12px; }

.page { width: 100%; padding: 10px 12px 20px; }
.page-narrow { width: 100%; max-width: 720px; margin-inline: auto; }

/* ---- panel (the one card used by every screen) ---- */
.panel { margin-bottom: var(--space-4); overflow: hidden; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 38px; padding: 0 var(--space-4);
    background: var(--hero); color: #fff;
}
.panel-head h1, .panel-head h2 { margin: 0; font-size: 12px; font-weight: 800; color: #fff; }
.panel-body { padding: var(--space-4); }
.panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--soft); border-top: 1px solid #B9CDE1; }
.panel-foot .grow { margin-inline-end: auto; font-weight: 700; color: var(--navy-text); }
.badge { display: inline-block; padding: 1px var(--space-2); border-radius: 999px; background: var(--soft); color: var(--primary); font-size: .85rem; font-weight: 700; }
.panel-head .badge { background: rgba(255, 255, 255, .18); color: #fff; }

/* old name kept for the few simple pages (settings, branches, attachments) */
.card { margin-bottom: var(--space-4); overflow: hidden; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); }
.card-narrow { max-width: 440px; margin-inline: auto; }
.card-title { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4); padding: var(--space-2) var(--space-4); background: var(--hero); color: #fff; font-size: 1.05rem; font-weight: 800; }

/* ---- buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: calc(var(--control-h) + 2px); padding: 0 var(--space-4);
    border: 2px solid #94B4D5; border-radius: 10px; background: var(--surface); color: var(--navy-text);
    font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--bg); }
.btn-primary { background: var(--primary); border-color: var(--primary-dark); color: #fff; box-shadow: 0 2px 5px rgba(28, 70, 111, .2); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-icon { width: 28px; height: 28px; padding: 0; border-radius: 7px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: default; pointer-events: none; }
.btn:focus-visible, .control:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field label { color: var(--navy-text); font-weight: 700; }
.field-check { flex-direction: row; align-items: center; gap: var(--space-2); }
.field-check label { font-weight: 400; }
.control {
    width: 100%; height: var(--control-h); padding: 0 var(--space-3); border: 1.5px solid var(--field-line);
    border-radius: var(--radius-sm); background: #fff; color: var(--text);
}
.control:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px rgba(36, 95, 151, .12); }
.control[readonly] { background: var(--row-alt); }
.help { color: var(--muted); font-size: .85rem; }
.field-error { color: var(--danger); font-size: .85rem; }
.field-error:empty, .validation-summary-valid, .field-validation-valid { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--soft); border-bottom: 1px solid #B9CDE1; }
.toolbar .control { flex: 1 1 14rem; max-width: 420px; }
.toolbar .grow { margin-inline-end: auto; }
.inline-form { display: inline; margin: 0; }

.alert { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--soft); }
.alert ul { margin: 0; padding-inline-start: var(--space-4); }
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-ok { background: var(--ok-bg); color: var(--ok); }

/* ---- data grid (every list screen) ---- */
.grid-table { width: 100%; border-collapse: collapse; }
.grid-table th, .grid-table td { padding: 5px var(--space-3); border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
.grid-table th { background: var(--primary); color: #fff; font-weight: 800; }
.grid-table tbody tr:nth-child(even) { background: var(--row-alt); }
.grid-table tbody tr:hover { background: #DDE9F6; }
.grid-table tbody tr.is-picked, .grid-table tbody tr:has(input:checked) { background: var(--row-pick); }
.grid-table form { margin: 0; }
.grid-table .num { text-align: end; direction: ltr; }
.grid-table .center { text-align: center; }
.col-actions { width: 1%; white-space: nowrap; }
.col-pick { width: 1%; }
.row-actions { display: inline-flex; gap: var(--space-1); }
.scroll-y { max-height: 62vh; overflow-y: auto; }

/* ---- menu tiles (dashboard and the five menus) ---- */
.menu-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 14px; width: 100%; max-width: 860px; margin-inline: auto; }
@media (max-width: 1000px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 135px; padding: 12px 10px;
    background: var(--surface); border: 1px solid var(--card-line); border-radius: 14px; box-shadow: var(--shadow);
    color: var(--navy-text); font-size: 11.5px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.menu-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24, 65, 104, .18); border-color: var(--primary); }
.menu-tile img { width: 66px; height: 60px; object-fit: contain; }
.menu-tile.is-soon { cursor: default; }
.menu-tile.is-soon img { opacity: .8; }

/* ---- entry screens (login, companies, financial year) ---- */
.entry { min-height: 100%; display: grid; place-items: center; padding: var(--space-4); }
.entry-card { width: min(1100px, 100%); }
.app-header ~ main > .entry { min-height: calc(100vh - 60px); }
.entry-card.is-sm { width: min(780px, 100%); }
.login-card { width: min(460px, 100%); padding: 28px 30px 30px; background: var(--surface); border: 2px solid #7D9FC7; border-radius: 16px; box-shadow: 0 10px 30px rgba(24, 65, 104, .14); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
.login-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--hero); color: #fff; font-size: 24px; font-weight: 800; box-shadow: 0 6px 14px rgba(30, 79, 125, .3); }
.login-brand-text { display: grid; line-height: 1.25; }
.login-brand-text strong { font-size: 18px; letter-spacing: .08em; color: var(--navy-text); }
.login-brand-text small { font-size: 12px; color: var(--muted); font-weight: 700; }
.login-card h1 { margin: 6px 0 20px; text-align: center; font-size: 22px; font-weight: 800; color: var(--navy-text); }
.control.is-filled { height: 46px; background: #EEF4FB; border-color: #4F7BA6; border-radius: 10px; font-size: 15px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.page-head h1 { margin: 0; font-size: 17px; font-weight: 800; color: var(--navy-text); }
.filter-card { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); padding: 12px 16px 14px; background: var(--surface); border: 2px solid #B9CDE1; border-radius: 12px; box-shadow: var(--shadow); }
.filter-card label { font-weight: 800; color: var(--navy-text); }
.filter-card .control { flex: 1 1 auto; width: auto; height: 34px; border-color: #245F97; border-radius: 10px; }
.text-primary { color: var(--primary); }
.panel .grid-table th { background: #F1F6FC; color: var(--navy-text); border-bottom: 2px solid #C9D8E8; }
.panel .grid-table td { padding-block: 14px; }
.entry-banner { display: block; width: 100%; max-height: 38vh; object-fit: cover; }
.entry-split { display: grid; grid-template-columns: 240px 1fr; min-height: 60vh; }
.entry-side { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); background: var(--soft); border-inline-end: 1px solid #B9CDE1; text-align: center; }
.entry-side img { width: 120px; height: auto; }
.entry-side .logo-name { font-size: 22px; font-weight: 800; letter-spacing: .08em; color: var(--navy-text); }
.entry-side .side-line { font-weight: 800; color: var(--navy-text); }
.entry-main { display: flex; flex-direction: column; min-width: 0; }
.login-form { display: grid; grid-template-columns: minmax(0, 340px) auto; gap: var(--space-5); align-items: start; justify-content: center; padding: var(--space-5); }
.lang-switch { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid #B9CDE1; border-radius: var(--radius-sm); background: var(--bg); }
.lang-switch strong { color: var(--primary); }
.lang-switch .btn { justify-content: flex-start; }
.lang-switch .btn.is-on::before { content: "\2713"; color: var(--primary); }
.year-picker { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-5); padding: var(--space-5); align-items: start; }
.year-list { display: flex; flex-direction: column; border: 1.5px solid var(--field-line); border-radius: var(--radius-sm); overflow: hidden; max-height: 48vh; overflow-y: auto; }
.year-item { position: relative; display: block; padding: var(--space-2); border-bottom: 1px solid var(--line); text-align: center; font-weight: 800; color: var(--navy-text); cursor: pointer; }
.year-item input { position: absolute; opacity: 0; pointer-events: none; }
.year-item:hover { background: #F2F7FC; }
.year-item:has(input:checked) { background: var(--primary); color: #fff; }
.year-big { font-size: 46px; line-height: 1; font-weight: 800; color: var(--primary); text-align: center; }
.year-period { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); justify-items: center; margin-bottom: var(--space-4); text-align: center; }
.year-period .control { width: var(--date-w); height: 33px; text-align: center; }
.year-side { --date-w: 130px; display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.year-side h2 { margin: 0; font-size: 15px; }
.year-side .btn-block { width: calc(var(--date-w) * 2 + var(--space-3)); }

/* ---- toast / confirm dialog ---- */
.toast-host { position: fixed; inset-block-end: var(--space-4); inset-inline-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: 50; }
.toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--ok); color: #fff; box-shadow: var(--shadow); }
.toast-error { background: var(--danger); }
.dialog { min-width: 280px; padding: var(--space-5); border: 1px solid var(--field-line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(15, 42, 74, .25); }
.dialog::backdrop { background: rgba(15, 42, 74, .4); }
.dialog-actions { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.dialog p { margin: 0; text-align: center; font-weight: 800; }
.dialog-actions .btn { min-width: 84px; }

/* ---- small screens ---- */
@media (max-width: 900px) {
    .info-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .entry-split, .login-form, .year-picker { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .app-header { flex-wrap: wrap; height: auto; padding-block: var(--space-2); }
    .card { padding: var(--space-4); }
}

/* ruled table: visible lines between rows and columns */
.grid-table.is-ruled th, .grid-table.is-ruled td { border: 1px solid #B9CDE1; text-align: start; }
.grid-table.is-ruled .col-actions { text-align: center; width: 1%; white-space: nowrap; }
.btn-icon img { width: 20px; height: 20px; }
.btn-icon.is-off { opacity: .45; cursor: not-allowed; }
.badge.is-warn { margin-inline-start: 8px; background: #FFF4D6; color: #8A5A00; }
.grid-table.is-company { table-layout: fixed; }
.grid-table.is-company th:nth-child(1) { width: 90px; }
.grid-table.is-company th:nth-child(3) { width: 200px; }
.grid-table.is-company td:nth-child(3) { white-space: nowrap; }
.grid-table.is-company th:nth-child(4) { width: 130px; }
.page-head .badge { margin-inline-start: 10px; padding: 2px 16px; background: var(--navy); color: #fff; font-size: 1.1rem; font-weight: 800; }
.btn-lg { height: 46px; min-width: 140px; padding: 0 24px; font-size: 15px; }
.panel-foot .foot-end { margin-inline-start: auto; }
.page-centered { max-width: 900px; margin-inline: auto; }
.years-panel { width: min(760px, 100%); margin-bottom: 0; }
.year-picker h2 { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 800; color: var(--navy-text); text-align: center; }
.year-side h2 { font-size: 13px; }
.toolbar-grow { flex: 1 1 auto; min-width: 0; }
.toolbar .toolbar-grow .control { max-width: none; width: 100%; }
.toolbar-end { display: flex; gap: var(--space-2); margin-inline-start: auto; }
.grid-table.is-accounts { table-layout: fixed; }
.grid-table.is-accounts th:nth-child(1) { width: 110px; }
.grid-table.is-accounts th:nth-child(3) { width: 90px; }
.grid-table.is-accounts th:nth-child(4) { width: 130px; }
.grid-table.is-accounts th:nth-child(5) { width: 150px; }
.grid-table.is-accounts td:nth-child(1) { text-align: start; }
.grid-table.is-accounts td { padding-block: 4px; }
.grid-table.is-accounts .btn-icon { width: 28px; height: 28px; font-size: 14px; }
.toolbar .btn:not(.btn-icon) { width: 108px; height: 34px; padding: 0; }
.head-badges { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.panel-head .head-badges .badge { padding: 2px 14px; font-weight: 800; }
.si-edit .panel-head { position: relative; }
.si-edit .panel-head .si-head-bill { position: absolute; inset-inline: 0; margin-inline: auto; width: max-content; padding: 2px 16px; font-weight: 800; pointer-events: none; transform: translateX(-96px); }

/* ---- Company form (add / edit) ---- */
.company-panel { width: min(1180px, 100%); margin-bottom: 0; }
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-4); }
.form-grid .col-1 { grid-column: span 1; } .form-grid .col-2 { grid-column: span 2; } .form-grid .col-3 { grid-column: span 3; } .form-grid .col-4 { grid-column: span 4; }
.form-grid .col-5 { grid-column: span 5; } .form-grid .col-6 { grid-column: span 6; } .form-grid .col-9 { grid-column: span 9; } .form-grid .col-12 { grid-column: span 12; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } .form-grid > .field { grid-column: auto !important; } }
.field-flag input[type="checkbox"] { appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid #000; border-radius: 3px; background: #fff; cursor: pointer; }
.field-flag input[type="checkbox"]:checked { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/16px no-repeat; }
.field-flag label { color: var(--danger); font-weight: 800; }
.btn-sm-w { width: 100px; height: 33px; justify-content: center; }
.form-grid { align-items: start; }
.form-grid .control { height: 34px; }
.form-grid .field { margin-bottom: var(--space-3); }
.form-grid .col-8 { grid-column: span 8; } .form-grid .col-10 { grid-column: span 10; }
.year-item-info { cursor: default; display: flex; justify-content: space-between; gap: var(--space-3); }
.year-item-info:hover { background: transparent; }
.year-side .field { width: 100%; max-width: 260px; margin-bottom: var(--space-2); }
.grid-table.is-company td { padding-block: 7px; }
.grid-table.is-company .btn-icon { width: 28px; height: 28px; }
.grid-table.is-company .btn-icon img { width: 18px; height: 18px; }
.years-panel.year-add { width: min(1000px, 100%); }
.year-add .year-picker { padding: var(--space-6, 32px) var(--space-5); gap: 40px; grid-template-columns: 1fr 1.8fr; }
.year-add .year-list { max-height: 55vh; min-height: 260px; }
.year-add .year-side { justify-items: stretch; align-content: start; }
.year-add .year-side .field { max-width: none; }
.year-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.year-add .field-year .control { height: 48px; font-size: 21px; text-align: center; }
.year-add .field-year label { font-size: 15px; }
.year-add .year-picker { align-items: center; }
.year-add .year-side { align-content: center; justify-items: center; gap: 36px; }
.year-add .year-dates { width: 100%; max-width: 520px; margin-inline: auto; }
.year-add .field-year { width: 100%; max-width: 260px; margin-inline: auto; }
.year-add .year-side .field { text-align: center; }
.year-add .year-side .control { text-align: center; }
.year-add .year-side .field-error { display: block; text-align: center; }
.year-add .field-year { width: calc((min(520px, 100%) - var(--space-4)) / 2); max-width: none; }
.years-panel { width: min(880px, 100%); }
.years-panel .year-picker { padding: 36px var(--space-5); }
.years-panel .year-list { max-height: 56vh; min-height: 300px; }
.year-item-info .btn-icon { width: 26px; height: 26px; font-size: 13px; flex: none; }
.year-item-info { align-items: center; }
.form-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-fieldset:disabled .control { background: var(--row-alt); }

/* ---- Company details screen ---- */
.company-info { font-size: 11px; }
.company-info .control, .company-info .field label, .company-info .help, .company-info .grid-table { font-size: 11px; }
.company-info .control { text-align: right; }
.company-info .panel { margin-bottom: var(--space-3); }
.info-title { margin: 0 0 var(--space-3); font-size: 13px; font-weight: 800; color: var(--navy-text); }
.info-top { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: var(--space-4); align-items: start; }
.info-top > .panel-body { min-width: 0; }
.logo-card { margin: var(--space-4) 0 var(--space-4); margin-inline-end: var(--space-4); padding: var(--space-3); border: 1.5px solid var(--field-line); border-radius: var(--radius-sm); display: grid; gap: var(--space-2); justify-items: stretch; text-align: center; }
.logo-box { height: 150px; display: grid; place-items: center; border: 1.5px solid var(--field-line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-wide { width: 160px; height: 33px; justify-content: center; }
.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.info-table th, .info-table td { text-align: center; padding: 6px 8px; }
@media (max-width: 900px) { .info-top, .info-split { grid-template-columns: 1fr; } }
.btn-block { display: flex; width: 100%; justify-content: center; cursor: pointer; }
.field-check { display: flex; align-items: center; gap: var(--space-2); }

/* ---- Definition screens (currencies, documents, sales reps, cities): table on the start side, form on the other ---- */
.lookup { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; font-size: 11px; }
.lookup .control, .lookup .field label, .lookup .grid-table { font-size: 11px; }
.lookup-stack { display: grid; gap: var(--space-4); min-width: 0; }
.lookup-main { min-width: 0; }
.lookup-form .panel-foot { justify-content: stretch; }
.lookup-form .panel-foot .btn { flex: 1; justify-content: center; }
.lookup .grid-table th, .lookup .grid-table td { padding: 6px 8px; }
.lookup .grid-table .is-off td { color: var(--muted, #6b7c93); background: #f4f6f9; }
@media (max-width: 900px) { .lookup { grid-template-columns: 1fr; } }

/* ---- Users permissions screen: users list at the start, permissions grid beside it ---- */
.perm { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-4); align-items: start; font-size: 11px; }
.perm .grid-table, .perm .control { font-size: 11px; }
.perm-users { margin-bottom: 0; }
.perm-user-list { list-style: none; margin: 0; padding: var(--space-2); min-height: 220px; }
.perm-user { display: block; padding: 5px var(--space-3); border-radius: 6px; color: var(--navy-text); text-decoration: none; }
.perm-user:hover { background: var(--soft); }
.perm-user.is-active { background: var(--navy); color: #fff; }
.perm-group { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
.perm-group label { font-weight: 800; color: var(--navy-text); white-space: nowrap; }
.perm-group .control { max-width: 320px; }
.perm .dist-company-search { width: 100%; max-width: none; }
.perm .dist-company-search-bar { padding-top: 0; padding-inline: 0; margin-top: calc(var(--space-1) * -1); margin-bottom: var(--space-2); }
.perm .dist-user-search-bar { flex-direction: column; align-items: stretch; gap: var(--space-1); }
.btn-sm { height: 22px; padding: 0 var(--space-3); border-radius: 6px; font-size: 10.5px; }
.perm-table th, .perm-table td { padding: 0 6px; line-height: 1; height: 14px; }
.perm-table tbody tr, .perm-table tbody tr:nth-child(even), .perm-table tbody tr:hover { background: #fff; }
.perm-table tbody td { background: #fff; }
.perm-table .btn-sm { height: 28px; line-height: 1; padding: 0 var(--space-2); font-size: 11px; font-weight: 800; border-width: 1.5px; border-radius: 5px; }
.perm-table .btn-sm[data-row-check="1"] { background: var(--soft); border-color: var(--primary); color: var(--primary-dark); }
.perm-table .btn-sm[data-row-check="0"] { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.perm-table .btn-sm:hover { filter: brightness(.96); }
.perm-table thead th { padding: 6px; height: 32px; }
.perm-table .col-actions { width: 34%; }
.perm-table .row-actions { display: flex; gap: var(--space-2); padding: 1px 0; }
.perm-table .row-actions .btn-sm { flex: 1; }
.perm-table input[type="checkbox"] { width: 11px; height: 11px; margin: 0; vertical-align: middle; }
.perm .panel-foot { gap: var(--space-3); }
.perm .panel-foot .btn { flex: 1; width: auto; }
@media (max-width: 900px) { .perm { grid-template-columns: 1fr; } }

/* ---- Close period, shortcuts, change log, backup and new year screens ---- */
.closep-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.closep-form { width: 100%; max-width: 420px; margin-inline: auto; }
.closep-note { height: 150px; resize: none; }
.closep-art { text-align: center; }
.closep-art img { width: 240px; max-width: 100%; height: auto; }
.closep input[type="date"] { text-align: right; direction: rtl; }
.closep input[type="date"]::-webkit-datetime-edit { text-align: right; }
.closep .panel-foot > .btn, .closep .panel-foot form .btn { min-width: 160px; justify-content: center; }
.shortcuts-table { width: 100%; max-width: 600px; margin: var(--space-5) auto; }
.shortcuts-table td { padding-block: 9px; font-weight: 700; }
.shortcuts-key { width: 120px; color: var(--danger); font-weight: 800; font-size: 1.3rem; }
.log-top, .newyear-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: start; }
.log-label { margin-bottom: var(--space-2); font-weight: 800; color: var(--navy-text); }
.log-reports, .newyear-methods { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft); padding: var(--space-3); min-height: 180px; }
.log-report { display: flex; align-items: center; gap: var(--space-3); padding: 5px var(--space-3); border-radius: 6px; cursor: pointer; font-weight: 700; }
.log-report:hover { background: var(--row-pick); }
.log-no { min-width: 34px; font-weight: 800; color: var(--primary-dark); }
.log-result { border-top: 1px solid var(--line); }
.log-result-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.log-result-head .btn { margin-inline-start: auto; }
.newyear-warning { margin-top: var(--space-4); font-weight: 800; }
.backup-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.backup-location { height: 90px; resize: none; background: var(--row-alt); }
.backup-list-title { margin: 0 0 var(--space-3); font-size: 1rem; color: var(--navy-text); }
.backup-list .grid-table tbody tr[data-pick] { cursor: pointer; }
.backup-list .grid-table tbody tr[data-pick]:hover { background: var(--row-pick); }
@media (max-width: 900px) { .closep-body, .log-top, .newyear-body, .backup-body { grid-template-columns: 1fr; } }
@media print {
    .app-header, .info-bar, .panel-head, .panel-foot, .log-top, .toast-host, [data-print] { display: none !important; }
    .log-result { border: 0; }
}
.lookup .grid-table tbody tr, .lookup .grid-table tbody td { background: #fff; }
.grid-table .group-row td { color: var(--navy-text); font-weight: 800; border-block: 1px solid var(--field-line); cursor: pointer; user-select: none; }
.grid-table .group-row:hover td { background: var(--soft); }
.group-arrow { display: inline-block; transition: transform .15s; color: var(--primary); }
.group-row.is-open .group-arrow { transform: rotate(90deg); }
.grid-table .sub-name { padding-inline-start: 28px; }

/* ---- Account card (add / edit account) ---- */
.acc-card { width: min(1100px, 100%); margin-inline: auto; }
.acc-card .form-grid .control { height: 34px; }
.acc-kind { display: flex; align-items: center; gap: var(--space-4); min-height: 34px; }
.acc-kind label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.acc-details { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4) 0; border: 1px solid var(--field-line); border-radius: var(--radius-sm); }
.acc-details legend { padding-inline: var(--space-2); font-weight: 800; color: var(--danger); }

/* ---- Journal vouchers (سندات القيد) ---- */
.jv-filter { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.jv-filter .field { min-width: 120px; }
.jv-filter .jv-search { flex: 1 1 200px; }
.jv-scroll { max-height: 56vh; }
.jv-total { display: flex; gap: var(--space-4); align-items: center; padding-top: var(--space-3); font-size: 1.05rem; }
.jv-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.jv-head .field { min-width: 150px; }
.jv-head .jv-note { flex: 1 1 320px; }
.jv-no { font-weight: 800; letter-spacing: .5px; }
.field-hint { display: block; font-size: .8rem; color: var(--muted, #667); }
.jv-grid-wrap { max-height: 52vh; }
.jv-grid th, .jv-grid td { padding: 3px 4px; }
.jv-grid .control { width: 100%; min-width: 0; height: 30px; padding: 2px 6px; }
.jv-grid .jv-n { min-width: 84px; text-align: end; }
.jv-grid td:nth-child(2) { width: 120px; min-width: 120px; }
.jv-grid td:nth-child(3) { min-width: 260px; }
.jv-grid td:nth-child(4) { width: 68px; min-width: 68px; }
.jv-grid td:nth-child(4) .jv-n { min-width: 0; padding-inline: 3px; text-align: center; }
.jv-grid td:nth-child(7) { min-width: 300px; }
.jv-grid [data-jv="desc"] { font-weight: 700; }
.jv-grid .jv-name { resize: none; overflow: hidden; }
.jv-grid .jv-text { height: auto; min-height: 30px; resize: vertical; line-height: 1.35; font-family: inherit; display: block; }
.jv-grid .jv-del { width: 32px; height: 28px; padding: 0; }
.jv-sum td { background: #F1F6FC; font-weight: 700; }
.jv-sum .badge { margin-inline-start: var(--space-3); }
.jv-sum .badge.jv-bad { background: var(--danger); color: #fff; }
.jv-add { margin-top: var(--space-3); }
.jv-add-actions { display: flex; align-items: center; gap: var(--space-2); }
.jv-add-standard, .jv-add-repeat { min-width: 190px; }
.jv-add-standard { background: #EAF3FC; border-color: #9DB9D9; color: #173F69; }
.jv-add-standard:hover { background: #D7E9FA; border-color: #7198BE; }
.jv-info { display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: .9rem; }
@media print {
    [data-no-print], .jv-add { display: none !important; }
    .jv-grid .control { border: 0; background: transparent; height: auto; }
    .jv-grid-wrap, .jv-scroll { max-height: none; overflow: visible; }
}
/* Journal entry: the foot buttons share the whole width of the screen. */
/* Shared voucher actions: compact, equal-width buttons across Journal/CashReceipt/CashPayment and cheques. */
.jv-edit .panel-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.jv-edit .panel-foot > .btn, .jv-edit .panel-foot > form {
    flex: 0 0 125px; width: 125px; min-width: 125px; max-width: 125px;
    box-sizing: border-box; margin: 0;
}
.jv-edit .panel-foot > form .btn { width: 100%; box-sizing: border-box; }
.jv-edit .panel-foot > .btn { justify-content: center; }
/* Journal grid: the multi-line boxes use the same font size as the other boxes; names and descriptions are bold. */
.jv-grid textarea.control { font-size: inherit; font-family: inherit; }
.jv-grid .jv-name, .jv-grid [data-jv="desc"] { font-weight: 700; }
/* Delete button: stays red with white text on hover (the general .btn:hover made the background light). */
.btn.btn-danger:hover { background: #A32222; border-color: #A32222; color: #fff; }
.jv-grid textarea.jv-name { font-size: 0.9em; }
.jv-grid [data-jv="acc"] { text-align: right; }
.jv-grid th:nth-child(5), .jv-grid th:nth-child(6), .jv-grid td:nth-child(5), .jv-grid td:nth-child(6) { width: 110px; min-width: 110px; max-width: 110px; }
.jv-grid .jv-del + .jv-del { margin-inline-start: 4px; }
.jv-grid td:last-child { white-space: nowrap; }
/* Journal list: foot buttons share the screen width, narrow month column, wide description, text on the right. */
.jv-list .panel-foot { display: flex; gap: var(--space-3); }
.jv-list .panel-foot > .btn, .jv-list .panel-foot > form { flex: 1 1 0; margin: 0; justify-content: center; }
.jv-list .grid-table th, .jv-list .grid-table td { text-align: right; }
.jv-list .grid-table th:nth-child(1), .jv-list .grid-table td:nth-child(1) { width: 36px; text-align: center; }
.jv-list .grid-table th:nth-child(4), .jv-list .grid-table td:nth-child(4) { width: 56px; }
.jv-list .grid-table th:nth-child(5), .jv-list .grid-table td:nth-child(5) { width: 130px; }
.jv-list .grid-table th:nth-child(6), .jv-list .grid-table td:nth-child(6) { min-width: 340px; }
/* Journal entry grid: debit, credit and foreign currency have the same width; headers and boxes are aligned right. */
.jv-grid th:nth-child(5), .jv-grid th:nth-child(6), .jv-grid th:nth-child(8),
.jv-grid td:nth-child(5), .jv-grid td:nth-child(6), .jv-grid td:nth-child(8) { width: 110px; min-width: 110px; max-width: 110px; }
.jv-grid thead th { text-align: right; direction: rtl; }
.jv-grid thead th.center { text-align: center; }
.jv-grid .control, .jv-grid .control.jv-n { text-align: right; }
.jv-grid td:nth-child(4) .jv-n { text-align: right; }
/* Journal entry grid, final widths: fixed layout so the debit, credit and foreign-currency columns are exactly equal. */
.jv-edit .jv-grid { table-layout: fixed; width: 100%; min-width: 1180px; }
.jv-edit .jv-grid th:nth-child(1) { width: 36px; }
.jv-edit .jv-grid th:nth-child(2) { width: 120px; }
.jv-edit .jv-grid th:nth-child(3) { width: 22%; }
.jv-edit .jv-grid th:nth-child(4) { width: 68px; }
.jv-edit .jv-grid th:nth-child(5), .jv-edit .jv-grid th:nth-child(6), .jv-edit .jv-grid th:nth-child(8) { width: 112px; }
.jv-edit .jv-grid th:nth-child(9) { width: 150px; }
.jv-edit .jv-grid th:nth-child(10) { width: 56px; }
.jv-edit .jv-grid th:nth-child(11) { width: 84px; }
.jv-edit .jv-grid td { min-width: 0; max-width: none; }
.jv-edit .jv-grid .control, .jv-edit .jv-grid .jv-n { min-width: 0; text-align: right; }
.jv-edit .jv-grid thead th { text-align: right; }
.jv-edit .jv-grid thead th.center, .jv-edit .jv-grid thead th:nth-child(1), .jv-edit .jv-grid thead th:nth-child(10) { text-align: center; }
.jv-edit .jv-grid-wrap { overflow-x: auto; }
.jv-list .grid-table th:nth-child(5), .jv-list .grid-table td:nth-child(5) { width: 190px; }
.jv-list .grid-table th:nth-child(8), .jv-list .grid-table td:nth-child(8) { width: 46px; text-align: center; padding-inline: 2px; }
.jv-list .grid-table tfoot td { font-weight: 800; background: #F1F6FC; text-align: right; }
.jv-list .grid-table tfoot td.num { direction: ltr; }
.jv-count { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: #000; color: #fff; font-weight: 800; }
.jv-total-label { direction: rtl; margin-inline-end: 6px; }
.jv-list .grid-table tfoot td { text-align: right; direction: rtl; }
.jv-foot-count { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }

/* Journal voucher print form (same layout as the Access report A_004), A4. */
.jv-print { display: none; }
@page { size: A4; margin: 12mm 10mm 16mm; @bottom-center { content: "Page No. " counter(page) " - " counter(pages); font-size: 8pt; font-weight: 700; } }
@media print {
    .jv-edit { display: none !important; }
    .jv-print { display: block; color: #000; font-size: 8pt; }
    .jvp-company { text-align: center; font-size: 10pt; font-weight: 800; margin: 0 0 14px; }
    .jvp-title { text-align: center; font-size: 8pt; font-weight: 800; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid #1B2A8C; }
    .jvp-head { display: flex; justify-content: space-between; gap: 40px; margin: 8px 0 6px; font-size: 8pt; }
    .jvp-head strong { margin-inline-start: 6px; }
    .jvp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .jvp-table th { background: #F2F2F2; border: 1px solid #888; padding: 3px 5px; font-weight: 400; text-align: center; font-size: 8pt; }
    .jvp-table td { border: 1px solid #888; padding: 4px 6px; vertical-align: top; height: 20px; font-size: 8pt; }
    .jvp-table .jvp-c-no { width: 70px; }
    .jvp-table .jvp-c-name { width: 28%; }
    .jvp-table .jvp-c-amt { width: 80px; }
    .jvp-center { text-align: center; }
    .jvp-desc { text-align: right; }
    .jvp-table tfoot td { height: 20px; padding: 3px 8px; }
    .jvp-table tfoot td.jvp-nob { border: 0; }
    .jvp-table tfoot td.jvp-total-label { background: #E2E2E2; text-align: center; }
    .jvp-sign { display: flex; justify-content: space-between; margin-top: 12px; }
    .jvp-sign-box { display: flex; align-items: flex-start; gap: 4px; font-size: 7.5pt; }
    .jvp-gray { display: inline-block; width: 98px; height: 34px; background: #E6E6E6; }
    .jvp-foot { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 7pt; direction: ltr; }
}

.jv-edit .jv-grid tfoot td { text-align: right; direction: rtl; }

.jv-edit .jv-addbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.jv-edit .jv-addbar .jv-info { display: flex; gap: 24px; margin-inline-start: auto; font-size: 14px; direction: rtl; }

@media print {
    .jvp-table td:nth-child(2) { font-size: 7pt; }
}

.jv-edit .jv-head input.jv-no, .jv-edit .jv-head input[type="date"] { text-align: right; direction: rtl; }
.jv-edit .jv-head input[type="date"]::-webkit-datetime-edit { text-align: right; }
@media print {
    .jvp-head span { direction: rtl; text-align: right; unicode-bidi: plaintext; }
    .jvp-head strong { direction: rtl; unicode-bidi: isolate; text-align: right; }
}

@media print {
    .jvp-table td.jvp-desc { white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; line-height: 1.5; }
    .jvp-table td { overflow-wrap: anywhere; }
}

.jv-edit .jv-sum td { text-align: right; direction: rtl; font-weight: 800; }
.jv-edit .jv-sum .jv-foot-count { display: inline-flex; align-items: center; gap: 8px; }

/* Journal list: filter boxes keep the text on the right; documents-between page. */
.jv-list .jv-filter .control { text-align: right; direction: rtl; }
.jv-between { max-width: 800px; margin-inline: auto; }
.jvp-bar { display: flex; gap: var(--space-3); margin: 12px 0; }
.jv-between .jv-print { display: block; background: #fff; padding: 16px; margin-bottom: 12px; border: 1px solid var(--field-line); }
.jv-between .jvp-foot { display: none; }
@media print {
    .jvp-bar { display: none !important; }
    .jv-between { max-width: none; }
    .jv-between .jv-print { border: 0; padding: 0; margin: 0; break-after: page; page-break-after: always; }
    .jv-between .jv-print:last-of-type { break-after: auto; page-break-after: auto; }
    .jv-between .jvp-foot { display: flex; }
}

/* "Documents between two numbers" page: same look on screen as on paper. */
.jv-between .jv-print { display: block; color: #000; font-size: 8pt; }
.jv-between .jvp-company { text-align: center; font-size: 10pt; font-weight: 800; margin: 0 0 14px; }
.jv-between .jvp-title { text-align: center; font-size: 8pt; font-weight: 800; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid #1B2A8C; }
.jv-between .jvp-head { display: flex; justify-content: space-between; gap: 40px; margin: 8px 0 6px; font-size: 8pt; }
.jv-between .jvp-head strong { margin-inline-start: 6px; }
.jv-between .jvp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.jv-between .jvp-table th { background: #F2F2F2; border: 1px solid #888; padding: 3px 5px; font-weight: 400; text-align: center; font-size: 8pt; }
.jv-between .jvp-table td { border: 1px solid #888; padding: 4px 6px; vertical-align: top; height: 20px; font-size: 8pt; }
.jv-between .jvp-table .jvp-c-no { width: 70px; }
.jv-between .jvp-table .jvp-c-name { width: 28%; }
.jv-between .jvp-table .jvp-c-amt { width: 80px; }
.jv-between .jvp-center { text-align: center; }
.jv-between .jvp-desc { text-align: right; }
.jv-between .jvp-table tfoot td { height: 20px; padding: 3px 8px; }
.jv-between .jvp-table tfoot td.jvp-nob { border: 0; }
.jv-between .jvp-table tfoot td.jvp-total-label { background: #E2E2E2; text-align: center; }
.jv-between .jvp-sign { display: flex; justify-content: space-between; margin-top: 12px; }
.jv-between .jvp-sign-box { display: flex; align-items: flex-start; gap: 4px; font-size: 7.5pt; }
.jv-between .jvp-gray { display: inline-block; width: 98px; height: 34px; background: #E6E6E6; }
.jv-between { max-width: 210mm; }
.jv-between .jv-print { padding: 12mm 10mm; box-sizing: border-box; }
.jv-between .jvp-table td:nth-child(2) { font-size: 7pt; }
.jv-between .jvp-table td.jvp-desc { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.jv-between .jvp-table td { overflow-wrap: anywhere; }
.jv-between .jvp-head span { direction: rtl; text-align: right; unicode-bidi: plaintext; }
.jv-between .jvp-head strong { direction: rtl; unicode-bidi: isolate; }
.jv-between .jvp-foot { display: flex; position: static; margin-top: 6px; font-size: 7pt; direction: ltr; justify-content: space-between; }
@media print { .jv-between .jvp-foot { position: fixed; margin: 0; } }
@media print { .jv-between .jv-print { padding: 0; border: 0; margin: 0; } .jv-between { max-width: none; } }

/* Message box (same look as the confirmation box: round icon, title, text, button). */
.dialog-notice { min-width: 340px; max-width: 92vw; padding: 28px 32px; text-align: center; border: 0; border-radius: 14px; }
.dialog-notice .notice-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #FDE8EA; color: #D6404E; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.dialog-notice h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--navy-text); }
.dialog-notice p { margin: 0; font-weight: 400; color: #5B6B84; }
.dialog-notice .dialog-actions { margin-top: 22px; }
.dialog-notice .dialog-actions .btn { min-width: 120px; }
.jv-between .jvp-filter { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin: 0 0 12px; }
.jv-between .jvp-filter .control { text-align: right; direction: rtl; }
@media print { .jvp-filter { display: none !important; } }

/* Documents-between page: filter and buttons span the width of the print sheet. */
.jv-between .jvp-filter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); align-items: end; width: 100%; }
.jv-between .jvp-filter .field, .jv-between .jvp-filter .control { width: 100%; min-width: 0; box-sizing: border-box; }
.jv-between .jvp-bar { display: flex; flex-wrap: nowrap; gap: var(--space-3); width: 100%; }
.jv-between .jvp-bar > .btn { flex: 0 0 150px; justify-content: center; text-align: center; margin: 0; }
.jv-between .jvp-bar > a.btn:last-child { margin-inline-start: auto; }

/* Message boxes: text is black and bold. */
.dialog p, .dialog-notice p, .dialog-notice h2, #confirm-text { color: #000; font-weight: 800; }

/* Journal: the drop-down lists (accounts, cost centres) use the normal font size, bold. */
.jv-edit select.control, .jv-edit select.control option, .jv-edit input[list], .jv-edit datalist, .jv-edit datalist option { font: inherit; font-weight: 700; }

.dialog-notice .jv-copy-date { margin-top: 14px; text-align: right; }
.dialog-notice .jv-copy-date .control { width: 100%; text-align: right; direction: rtl; }

/* Main menu tiles: narrower, grouped in the middle of the screen. */
.menu-panel { min-height: calc(100vh - 190px); display: grid; place-items: center; }
.menu-panel .menu-grid { grid-template-columns: repeat(5, 118px); justify-content: center; max-width: none; width: auto; }
@media (max-width: 760px) { .menu-panel .menu-grid { grid-template-columns: repeat(3, 118px); } }
@media (max-width: 420px) { .menu-panel .menu-grid { grid-template-columns: repeat(2, 118px); } }

.dialog-notice .jv-copy-date { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dialog-notice .jv-copy-date label { margin: 0; white-space: nowrap; }
.dialog-notice .jv-copy-date .control { width: auto; flex: 0 1 190px; }

/* Print form: the account-number column fits 13 digits; copy box date input is a normal-height box. */
.jvp-table .jvp-c-no, .jv-between .jvp-table .jvp-c-no { width: 95px; }
.dialog-notice .jv-copy-date .control { height: 30px; padding: 0 6px; font-size: 13px; flex: 0 1 150px; }

/* Copy box: label and date input side by side, normal height. */
.dialog-notice .jv-copy-date { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.dialog-notice .jv-copy-date .control { flex: none; width: 160px; height: 30px; }

/* Financial year screen: the year and the dates sit in the middle of the list's height. */
.years-panel:not(.year-add) .year-picker { align-items: center; }
.years-panel:not(.year-add) .year-list { min-height: 300px; }

/* ---- Main screen (dashboard): numbers of documents and totals ---- */
.dash { display: grid; gap: 40px; justify-items: center; padding: 20px 12px; }
.dash-top { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.dash-group { width: 320px; display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--card-line); box-shadow: var(--shadow); }
.dash-group hr { border: 0; border-top: 1px solid #000; margin: 6px 24px; }
.dash-bottom { display: grid; grid-template-columns: repeat(4, 250px); grid-auto-rows: 120px; gap: 36px 30px; justify-content: center; }
.dash-stat { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--card-line); box-shadow: var(--shadow); text-decoration: none; color: var(--navy-text); cursor: pointer; }
.dash-group .dash-stat { border: 0; box-shadow: none; padding: 4px 0; }
.dash-stat:not(.has-icon) { grid-template-columns: 1fr; }
.dash-stat img { grid-row: 1 / span 2; width: 74px; height: 70px; object-fit: contain; }
.dash-stat .dash-label { color: #B00000; font-weight: 800; font-size: 15px; text-align: center; }
.dash-stat .dash-num, .dash-month .dash-num { font-size: 26px; font-weight: 800; text-align: center; color: #333; }
.dash-month { grid-row: 1 / span 2; grid-column: 4; display: grid; align-content: center; gap: 6px; padding: 16px; background: #E1E7F0; border: 1px solid var(--card-line); box-shadow: var(--shadow); text-align: center; }
.dash-month hr { border: 0; border-top: 4px solid #000; margin: 14px 10px; }
.dash-label-dark { font-weight: 800; font-size: 16px; color: #000; }
.dash-month .dash-num { font-size: 22px; }
@media (max-width: 1200px) { .dash-bottom { grid-template-columns: repeat(2, 250px); } .dash-month { grid-column: auto; grid-row: auto; } }

/* Main screen: smaller cards and fonts. */
.dash { gap: 28px; padding: 14px 12px; }
.dash-top { gap: 20px; }
.dash-group { width: 260px; padding: 10px 12px; }
.dash-bottom { grid-template-columns: repeat(4, 205px); grid-auto-rows: 96px; gap: 26px 22px; }
.dash-stat { padding: 8px 10px; column-gap: 8px; }
.dash-stat img { width: 58px; height: 54px; }
.dash-stat .dash-label { font-size: 12.5px; }
.dash-stat .dash-num, .dash-month .dash-num { font-size: 21px; }
.dash-label-dark { font-size: 13.5px; }
.dash-month .dash-num { font-size: 18px; }
@media (max-width: 1000px) { .dash-bottom { grid-template-columns: repeat(2, 205px); } }

/* Other menus (accounts, cheques, stores, reports, settings): same cards as the main screen, no panel background. */
.menu-panel .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 10px 12px 14px; width: 100%; max-width: 1500px; }
.menu-panel .menu-tile { text-decoration: none; }
.menu-card-unified {
    display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
    min-height: 205px; padding: 14px 15px 15px; border-radius: 14px; background: var(--surface);
    border: 1px solid #7ea1c9; box-shadow: 0 6px 18px rgba(24, 65, 104, .08); color: var(--navy-text);
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.menu-card-unified:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(24, 65, 104, .13); border-color: #5d89b7; }
.menu-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.menu-card-mini {
    min-width: 96px; max-width: 128px; min-height: 58px; padding: 9px 10px; border-radius: 12px;
    background: #eef4fb; border: 1px solid #8fb2d8; color: var(--navy-text);
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.menu-card-mini small { font-size: 10px; font-weight: 700; opacity: .88; }
.menu-card-mini strong { font-size: 12px; font-weight: 800; line-height: 1.35; }
.menu-card-iconbox {
    width: 56px; height: 56px; border-radius: 12px; background: #2e67a2; display: flex;
    align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.menu-card-iconbox img {
    width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1); opacity: 1;
}
.menu-card-body {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 5px 10px;
}
.menu-card-title { color: var(--navy-text); font-weight: 800; font-size: 17px; line-height: 1.45; }
.menu-card-action {
    display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 12px;
    background: #2e67a2; color: #fff; border-radius: 10px; text-align: center; font-size: 12.5px; font-weight: 800;
    box-shadow: 0 3px 8px rgba(24, 65, 104, .14);
}
.menu-card-action-metrics { justify-content: center; }
.menu-card-action-metrics .cheque-sector-metric { gap: 6px; }
.menu-card-action-metrics .cheque-sector-metric small,
.menu-card-action-metrics .cheque-sector-metric strong { color: #fff; opacity: 1; }
.menu-panel .menu-card-unified.is-soon .menu-card-action { background: #6f8fae; }
@media (max-width: 1200px) { .menu-panel .menu-grid { grid-template-columns: repeat(2, minmax(250px, 1fr)); max-width: 950px; } }
@media (max-width: 700px) {
    .menu-panel .menu-grid { grid-template-columns: 1fr; max-width: 460px; }
    .menu-card-unified { min-height: 192px; padding: 13px; }
    .menu-card-title { font-size: 15.5px; }
}

/* Center the dashboard and menu cards in the middle of the screen */
.dash, .menu-panel { min-height: calc(100vh - 190px); align-content: center; }
.menu-panel .menu-grid { justify-content: center; }


/* Distribution of users on companies and branches */
.perm-user.is-stopped { opacity: .6; }
.dist-note { margin: 0 0 8px; font-weight: 700; color: var(--navy-text); }
.dist-branches { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dist-branch { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }

/* Centers a narrow form panel in the middle of the screen */
.center-screen { min-height: calc(100vh - 190px); display: grid; place-items: center; }

/* Password field with a show / hide (eye) button */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap .control { width: 100%; padding-inline-end: 40px; }
.pw-eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--navy-text); cursor: pointer; display: grid; place-items: center; }
.pw-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pw-eye .pw-slash { display: none; }
.pw-eye.is-shown .pw-slash { display: inline; }

/* Permissions table: rows packed tightly (beats ".panel .grid-table td" padding) */
.panel .perm-table td { padding-block: 1px; }
.panel .perm-table thead th { padding-block: 5px; }
.perm-table .btn-sm { height: 22px; font-size: 10.5px; }
.perm-table .row-actions { padding: 0; }

/* Users list: the sign-in email under the name */
.perm-user-mail { direction: ltr; unicode-bidi: isolate; font-weight: 700; overflow-wrap: anywhere; }

/* Menus with headings (settings): each group has a title line above its tiles */
.menu-panel:has(.menu-groups) { align-content: center; }
.menu-groups { display: grid; gap: 6px; justify-content: center; }
.menu-group-title { margin: 14px 14px 0; padding-bottom: 6px; border-bottom: 2px solid var(--navy); color: var(--navy-text); font-size: 15px; font-weight: 800; }
.menu-groups .menu-grid { padding-top: 14px; }

/* Small cards in the middle of the screen (data source, branch choice) */
.center-screen > .card-narrow { width: 100%; max-width: 600px; }
.page-wide { width: 100%; max-width: 940px; margin-inline: auto; }
.form-actions .foot-end { margin-inline-start: auto; }

/* Voucher print: the branch in small letters under the company name */
.jvp-branch { text-align: center; font-size: 7.5pt; font-weight: 400; margin: -10px 0 8px; }

/* Cash vouchers: the unused side (debit or credit) of the grid is hidden. */
.jv-grid [hidden] { display: none; }
.jv-head .jv-cash { min-width: 160px; }
.jv-head .jv-cash-name { flex: 1 1 220px; }

/* Cheque vouchers (main screen): debit side, credit side, total. */
.chq-side { margin-bottom: var(--space-4); }
.chq-side-title { font-size: 1rem; margin: 0 0 var(--space-2); }
.chq-side-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.chq-side-row .field { min-width: 160px; }
.chq-side-row .chq-name { flex: 1 1 260px; }
.chq-total { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-3); }

/* Cash vouchers: upper block (cash line) of the entry screen and the cash print form. */
.jv-cashbox .jv-cash-amount { min-width: 130px; }
.jv-cashbox .jv-amount { display: flex; align-items: center; justify-content: center; font-weight: 700; }
.jv-cashbox .jv-cash-sub { min-width: 120px; }
.jv-cashbox .jv-cash-rep { min-width: 220px; }
.jvp-line { text-align: center; margin: 8px 0; }
.jvp-words { margin: 8px 0 0; font-weight: 700; text-align: right; }

/* Voucher entry screens: tighter rows and blocks. */
.jv-edit .jv-head { padding-block: 3px; gap: 4px var(--space-2); }
.jv-edit .jv-head .field { gap: 0; }
.jv-edit .jv-head .field label { margin-bottom: 0; font-size: .85rem; line-height: 1.2; }
.jv-edit .jv-head .control { height: 28px; padding-block: 1px; }
.jv-edit .jv-head .field-hint { display: none; }

/* Cash vouchers: every header field flows on the same lines (number, date, description, cash line, statement...). */
.jv-edit .jv-head .jv-note { flex: 1 1 240px; }
.jv-edit .jv-head .jv-statement { flex: 1 1 200px; }
.jv-edit .jv-head .jv-cash { min-width: 110px; max-width: 130px; }
.jv-edit .jv-head .jv-cash-name { flex: 1 1 180px; min-width: 150px; }
.jv-edit .jv-head .jv-cash-amount { min-width: 100px; max-width: 120px; }
.jv-edit .jv-head .jv-cash-sub { min-width: 90px; max-width: 110px; }
.jv-edit .jv-head .jv-cash-rep { min-width: 170px; flex: 0 1 210px; }

/* Voucher header: more room between the rows and the boxes. */
.jv-edit .jv-head { padding-block: 8px; gap: 10px var(--space-3); }
.jv-edit .jv-head .field { gap: 4px; }
.jv-edit .jv-head .field label { margin-bottom: 3px; }
.jv-edit .jv-head { padding-block: 12px; gap: 16px var(--space-3); }
.jv-edit .jv-head .field { gap: 6px; }

/* Voucher header: the account number starts on the right; the amount box is wider. */
.jv-edit .jv-head .jv-cash .control { direction: rtl; text-align: right; }
.jv-edit .jv-head .jv-cash-amount { min-width: 170px; max-width: 220px; }

/* Voucher header: boxes a little closer together. */
.jv-edit .jv-head { padding-block: 6px; gap: 6px var(--space-2); }
.jv-edit .jv-head .field { gap: 3px; }

/* Cash receipt / payment print form (copy of the Access report). */
.cp-print { color: #000; font-size: 8pt; }
.cp-print .jvp-company { font-size: 10pt; margin-bottom: 10px; }
.cp-title { display: flex; flex-direction: column; align-items: center; margin: 0 0 22px; font-size: 10pt; }
.cp-title span:first-child { font-weight: 800; }
.cp-title span:last-child { font-weight: 400; }
.cp-head { display: flex; justify-content: flex-start; gap: 150px; padding: 0 8px 4px; border-bottom: 3px solid #222; margin-bottom: 6px; }
.cp-head strong { margin-inline-start: 6px; font-size: 9pt; }
.cp-received { margin: 0 0 6px; font-weight: 700; font-size: 9pt; letter-spacing: .5px; }
.cp-cashrow { display: flex; align-items: stretch; border: 1px solid #333; margin-bottom: 4px; min-height: 22px; }
.cp-cash-label { flex: 0 0 18%; padding: 3px 8px; font-size: 9pt; }
.cp-cash-no { flex: 0 0 13%; border-left: 1px solid #333; border-right: 1px solid #333; padding: 3px; text-align: center; }
.cp-cash-name { flex: 1; padding: 3px 8px; font-size: 7pt; }
.cp-statement { display: flex; align-items: stretch; border: 1px solid #333; margin-bottom: 6px; min-height: 40px; }
.cp-statement-label { flex: 0 0 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid #333; font-size: 8pt; }
.cp-statement-text { flex: 1; padding: 3px 8px; font-weight: 700; font-size: 9pt; white-space: pre-line; overflow-wrap: anywhere; }
.cp-row { display: grid; grid-template-columns: 18% 35% 27% 20%; border: 1px solid #333; margin-bottom: 3px; }
.cp-row > span { padding: 4px 6px; border-left: 1px solid #333; overflow-wrap: anywhere; }
.cp-row > span:last-child { border-left: 0; }
.cp-th > span { background: #F2F2F2; text-align: center; padding: 3px; }
.cp-line { min-height: 36px; font-weight: 700; font-size: 9pt; }
.cp-line > .cp-c { text-align: center; }
.cp-line > .cp-desc { white-space: pre-line; }
.cp-total { grid-template-columns: 80% 20%; margin-bottom: 0; font-weight: 700; font-size: 9pt; }
.cp-total-label { text-align: left; padding-left: 30px; }
.cp-total > .cp-c { text-align: center; }
.cp-line > span:nth-child(2) { font-size: 7pt; }
.cp-words { background: #EEE; border: 1px solid #333; border-top: 0; text-align: center; font-weight: 700; font-size: 9pt; padding: 3px; margin-bottom: 14px; min-height: 18px; }
.cp-signbox { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #333; padding: 14px 20px; min-height: 60px; }
.cp-sign { display: flex; align-items: flex-start; gap: 4px; font-size: 7.5pt; }
.cp-sign-label { line-height: 1.8; }
.cp-grey { display: inline-block; width: 120px; height: 38px; background: #E6E6E6; }

/* Cheque receipt / payment print form (same look as the cash form) */
.cp-acc { margin-bottom: 10px; }
.cp-acc .cp-cash-no { border-right: 0; font-weight: 700; }
.cp-acc .cp-cash-name { font-weight: 700; }
.cp-statement-gap { margin-top: 4px; }
.cp-row.cp-chq { grid-template-columns: 15% 14% 51% 20%; }
.cp-chq.cp-line > span:nth-child(2) { font-size: 9pt; }
.cp-chq-total { grid-template-columns: 80% 20%; }

/* Cheque screens: tighter lines above the table (both sides next to each other) */
.chq-edit .jv-head { padding-block: 4px; gap: 4px var(--space-2); }
.chq-edit .jv-head .field, .chq-edit .chq-side-row .field { gap: 2px; }
.chq-edit .jv-head .control, .chq-edit .chq-side-row .control { height: 28px; padding-block: 1px; }
.chq-edit .chq-sides { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); }
.chq-edit .chq-side { flex: 1 1 460px; margin-bottom: 4px; }
.chq-edit .chq-side-title { font-size: .85rem; margin: 0 0 2px; }
.chq-edit .chq-side-row { gap: 4px var(--space-2); }
.chq-edit .chq-side-row .field { min-width: 110px; }
.chq-edit .chq-side-row .chq-name { flex: 1 1 160px; }
.chq-edit .chq-total { margin-bottom: 4px; }

/* Receipt only: stack debit and credit, using the available width for each account row. */
.chq-compact .chq-sides { display: grid; grid-template-columns: minmax(0, 1fr); }
.chq-compact .chq-side { min-width: 0; }
.chq-compact .chq-side-row { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 7fr) minmax(0, 2.5fr); }
.chq-compact .chq-side-row .field,
.chq-compact .chq-side-row .chq-name { min-width: 0; }
.chq-compact .chq-side-row .control { width: 100%; min-width: 0; }
/* Receipt details: equal-width fields across the full row. */
.chq-compact .chq-extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chq-compact .chq-extra .field { min-width: 0; }
.chq-compact .chq-extra .control { width: 100%; min-width: 0; }
@media (max-width: 720px) {
  .chq-compact .chq-side-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chq-compact .chq-side-row .chq-name { grid-column: 1 / -1; grid-row: 2; }
  .chq-compact .chq-extra { grid-template-columns: 1fr; }
}

/* Cheque receipt / payment: the extra fields and the cheques grid */
.chq-extra { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); margin-bottom: 6px; }
.chq-extra .field { min-width: 180px; gap: 2px; }
.chq-extra .control { height: 28px; padding-block: 1px; }
.chq-grid { table-layout: fixed; width: 100%; min-width: 900px; }
.chq-grid th, .chq-grid td { padding: 3px 4px; }
.chq-grid .control { width: 100%; min-width: 0; height: 30px; padding: 2px 6px; text-align: right; }
.chq-grid thead th { text-align: right; direction: rtl; }
.chq-grid thead th.center { text-align: center; }
.chq-grid th:nth-child(1), .chq-grid td:nth-child(1) { width: 40px; }
.chq-grid th:nth-child(2), .chq-grid td:nth-child(2) { width: 140px; }
.chq-grid th:nth-child(3), .chq-grid td:nth-child(3) { width: 150px; }
.chq-grid th:nth-child(4), .chq-grid td:nth-child(4) { width: 72px; }
.chq-grid th:nth-child(6), .chq-grid td:nth-child(6), .chq-grid th:nth-child(7), .chq-grid td:nth-child(7) { width: 130px; }
.chq-grid th:nth-child(8), .chq-grid td:nth-child(8) { width: 52px; white-space: nowrap; }
.chq-grid .jv-del { width: 32px; height: 28px; padding: 0; }
.chq-grid input[type="date"] { direction: rtl; }

/* Cheque receipt edit only: compact header, RTL labels and inputs, and one-line audit trail. */
.chq-compact .panel-body.jv-head { padding-block: 3px; gap: 4px var(--space-2); }
.chq-compact .panel-body:not(.jv-head) { padding-block: 5px; }
.chq-compact .field { gap: 2px; min-width: 0; }
.chq-compact .field label { display: block; text-align: right; margin-bottom: 0; }
.chq-compact .jv-head .field { gap: 2px; }
.chq-compact .chq-sides { row-gap: 3px; }
.chq-compact .chq-side { margin-bottom: 1px; }
.chq-compact .chq-side-title { margin-bottom: 1px; text-align: right; }
.chq-compact .chq-side-row, .chq-compact .chq-extra { gap: 4px var(--space-2); }
.chq-compact .chq-extra { margin-bottom: 4px; }
.chq-compact .jv-head .control, .chq-compact .chq-side-row .control, .chq-compact .chq-extra .control { height: 28px; text-align: right; direction: rtl; }
.chq-compact .jv-addbar { flex-wrap: nowrap; justify-content: space-between; }
.chq-compact .jv-addbar .chq-compact-audit { margin-inline-start: auto; display: flex; flex-wrap: nowrap; gap: 16px; white-space: nowrap; font-size: 1rem; font-weight: 600; direction: rtl; }
@media (max-width: 800px) {
  .chq-compact .jv-addbar { overflow-x: auto; }
  .chq-compact .jv-addbar .chq-compact-audit { font-size: .9rem; }
}

/* Cheque receipt edit: inline account-side titles, right-aligned table headings,
   and readable single-line audit metadata. Scoped to receipts only. */
.chq-compact .panel-body.jv-head { padding-top: 12px; }
.chq-compact .chq-side { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; column-gap: 10px; }
.chq-compact .chq-side-title { margin: 0; color: #b00000; font-size: 1.15rem; font-weight: 800; line-height: 1.35; text-align: right; }
.chq-compact .chq-side-row { min-width: 0; }
.chq-compact .chq-grid thead th,
.chq-compact .chq-grid thead th.center { text-align: right; direction: rtl; }
.chq-compact .jv-addbar .chq-compact-audit { font-size: 1.15rem; font-weight: 800; gap: 14px; white-space: nowrap; }
@media (max-width: 720px) {
  .chq-compact .chq-side { grid-template-columns: 1fr; row-gap: 3px; }
}

/* Cheque receipt only: align the sub-receipt input with the account-number input,
   and reduce cheque-grid row height slightly without affecting payment screens. */
@media (min-width: 721px) {
  .chq-compact .chq-extra { padding-inline-start: 140px; }
}
.chq-compact .chq-grid th,
.chq-compact .chq-grid td { padding-block: 2px; }
.chq-compact .chq-grid .control { height: 27px; padding-block: 1px; }
.chq-compact .chq-grid .jv-del { height: 26px; }

/* Cheque payment: arrange movement and bank across the available row. */
.chq-compact:is(.chq-payment, .chq-entry) .chq-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .chq-compact:is(.chq-payment, .chq-entry) .chq-extra { grid-template-columns: minmax(0, 1fr); }
}

/* Opening balances: same controls and ruled-table language as the journal screen. */
.ob-screen .ob-scroll { overflow-x:auto; }
.ob-table { min-width:1610px; width:100%; table-layout:fixed; }
.ob-table .ob-num { width:36px; }
.ob-table .ob-account { width:125px; } .ob-table .ob-name { width:370px; }
.ob-table .ob-rate { width:83px; } .ob-table .ob-money { width:111px; }
.ob-table .ob-desc { width:320px; } .ob-table .ob-foreign { width:120px; }
.ob-table .ob-cost { width:170px; } .ob-table .ob-actions { width:92px; }
.ob-table th, .ob-table td { text-align:right; vertical-align:middle; }
.ob-table td { padding:3px 4px; } .ob-table .control { box-sizing:border-box; width:100%; min-width:0; font-weight:700; text-align:right; }
.ob-table textarea.control { resize:vertical; min-height:32px; }
.ob-table input[readonly], .ob-table textarea[readonly] { background:transparent; }
.ob-table tfoot th { font-weight:800; } .ob-add { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.ob-audit { display:flex; gap:20px; margin-top:10px; font-size:.85rem; }
.ob-table [data-ob-foreign] { direction:ltr; text-align:right; }
.ob-report-head { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:12px 0; }
.ob-report-head .field { min-width:0; }
.ob-report-head .control { width:100%; }
.ob-report-filter { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.ob-report-filter .control { width:100%; }
.obr-group { break-inside:avoid; }

/* Opening balances: only screen-scoped adjustments using the existing design tokens. */
.ob-screen, .ob-screen button, .ob-screen input, .ob-screen select, .ob-screen textarea {
    font-family: var(--font); font-size: 1rem; font-weight: 700;
}
.ob-screen .ob-table th, .ob-screen .ob-table td { padding: 2px 4px; }
.ob-screen .ob-table .control { height: 27px; padding: 1px 6px; line-height: 1.4; }
.ob-screen .ob-table textarea.control { min-height: 27px; resize: vertical; }
.ob-screen .ob-table td:last-child { white-space: nowrap; }
.ob-screen .ob-table td:last-child .btn-icon {
    display: inline-flex; vertical-align: middle; width: 25px; height: 25px;
    min-width: 25px; padding: 0; margin-inline-end: 3px;
}
.ob-screen .form-actions { display: flex; width: 100%; flex-wrap: nowrap; }
.ob-screen .form-actions > .btn { flex: 1 1 0; min-width: 0; text-align: center; }
.ob-screen .ob-audit { font-size: 1.15rem; font-weight: 700; }
@media (max-width: 600px) {
    .ob-screen .form-actions { flex-wrap: wrap; }
    .ob-screen .form-actions > .btn { flex: 1 1 30%; }
}

/* Opening balance printed A4 report: original approved paper layout. */
.opening-balances-report { direction: rtl; background: #fff; color: #111; padding: 18px; font-size: 12px; }
.opening-balances-report .opening-balances-print-actions { display:flex; gap:10px; justify-content:flex-start; margin-bottom:16px; }
.obr-heading { text-align:center; margin-bottom:20px; }
.obr-heading h1 { font-size:16px; font-weight:800; margin:0 0 14px; }
.obr-title { display:flex; align-items:center; justify-content:center; position:relative; min-height:27px; }
.obr-title h2 { margin:0; font-size:15px; font-weight:800; }
.obr-title > strong { position:absolute; right:0; font-size:18px; }
.obr-group { margin:0 0 26px; break-inside:avoid; page-break-inside:avoid; }
.obr-group h3 { font-size:12px; font-weight:800; margin:0 0 9px; text-align:right; }
.obr-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.obr-table th,.obr-table td { border:1px solid #333; padding:4px 7px; text-align:right; font-size:11px; }
.obr-table th { background:#eee; text-align:center; font-weight:800; }
.obr-table td:nth-child(3),.obr-table td:nth-child(4) { text-align:center; font-variant-numeric:tabular-nums; }
.obr-group-total { display:flex; justify-content:space-between; align-items:flex-start; min-height:26px; }
.obr-balance,.obr-grand-total > strong { color:#d71920; font-weight:800; padding:5px 12px; }
.obr-grand-total table { border-collapse:collapse; width:100%; table-layout:fixed; margin:0; }
.obr-summary-row td,.obr-grand-total td { border:1px solid #333; padding:5px 8px; text-align:center; font-weight:700; }
.obr-grand-total { border-top:1px solid #333; display:flex; justify-content:space-between; font-weight:800; }
.obr-footer { display:flex; justify-content:space-between; margin-top:30px; font-size:10px; }
@media print {
  @page { size:A4 portrait; margin:12mm 10mm 15mm; }
  body:has(.opening-balances-report) .app-header,
  body:has(.opening-balances-report) .info-bar,
  body:has(.opening-balances-report) nav,
  body:has(.opening-balances-report) .opening-balances-print-actions { display:none !important; }
  .opening-balances-report { padding:0; }
  .obr-footer { position:fixed; bottom:0; right:0; left:0; }
  .obr-page-number::after { content:counter(page); }
}
@media print { .ob-report-filter, .ob-report-head { display:none !important; } }

/* Opening balances: multiline account names and descriptions, within the existing screen only. */
.ob-screen .ob-table textarea[data-ob-name],
.ob-screen .ob-table textarea[data-ob-desc] { height:auto; min-height:48px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.ob-screen .ob-table textarea[data-ob-name] { resize:vertical; }

/* Opening balances: wider multiline text columns, local to this screen. */
.ob-screen .ob-table { min-width: 1910px; }
.ob-screen .ob-table .ob-name { width: 500px; }
.ob-screen .ob-table .ob-desc { width: 455px; }
.ob-screen .ob-table textarea[data-ob-name],
.ob-screen .ob-table textarea[data-ob-desc] { min-height: 64px; height: auto; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-screen .ob-delete-all-button { background: #c62828; border-color: #c62828; color: #fff; }
.ob-screen .ob-delete-all-button:hover { background: #a91f1f; border-color: #a91f1f; color: #fff; }

/* Opening balances: fit the full grid without horizontal scrolling. */
.ob-screen .ob-scroll { width:100%; overflow-x:hidden; }
.ob-screen .ob-table { width:100%; min-width:0; table-layout:fixed; }
.ob-screen .ob-table .ob-num { width:2.5%; }
.ob-screen .ob-table .ob-account { width:9%; }
.ob-screen .ob-table .ob-name { width:23%; }
.ob-screen .ob-table .ob-rate { width:5%; }
.ob-screen .ob-table .ob-money { width:8%; }
.ob-screen .ob-table .ob-desc { width:21%; }
.ob-screen .ob-table .ob-foreign { width:8%; }
.ob-screen .ob-table .ob-cost { width:9.5%; }
.ob-screen .ob-table .ob-actions { width:6%; }
.ob-screen .ob-table th, .ob-screen .ob-table td { overflow-wrap:anywhere; }
.ob-screen .ob-table textarea[data-ob-name],
.ob-screen .ob-table textarea[data-ob-desc] { height:27px; min-height:27px; overflow:hidden; resize:none; box-sizing:border-box; }
.ob-screen input[type=number]::-webkit-inner-spin-button,
.ob-screen input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.ob-screen input[type=number] { -moz-appearance:textfield; appearance:textfield; }

/* Opening balances only: center the two action buttons in their column. */
.ob-screen .ob-table td:last-child { text-align: center; vertical-align: middle; white-space: nowrap; }
.ob-screen .ob-table td:last-child .btn-icon { margin-inline: 2px; }

/* Unified document audit stamp: RTL headings and LTR Gregorian time. */
.pano-audit-trail { display:flex; flex-wrap:wrap; align-items:center; gap: 6px 24px; direction:rtl; font-family:Cairo, sans-serif; font-weight:700; }
.pano-audit-trail > span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.pano-audit-trail bdi { direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.pano-print-audit { margin-top:12px; font-size:1rem; }
@media print { .pano-print-audit { break-inside:avoid; } }

/* Opening balances print screen: A4 portrait preview and controls only. */
@media screen {
  .opening-balances-report {
    box-sizing: border-box;
    width: 100%;
    max-width: 190mm;
    margin-inline: auto;
  }
  .opening-balances-report .ob-report-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 10px;
    align-items: end;
    width: 100%;
    margin-bottom: 12px;
  }
  .opening-balances-report .ob-report-filter .field { min-width: 0; }
  .opening-balances-report .ob-report-filter .control { box-sizing: border-box; width: 100%; }
  .opening-balances-report .ob-report-filter .btn { width: 100%; }
  .opening-balances-report .opening-balances-print-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 16px;
  }
  .opening-balances-report .opening-balances-print-actions > .btn {
    box-sizing: border-box;
    flex: 0 1 48%;
    text-align: center;
  }
}

/* Opening balances report: totals share the exact four-column grid used by detail rows. */
.opening-balances-report .obr-totals-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    display: table;
    margin: 0;
}
.opening-balances-report .obr-totals-table td {
    box-sizing: border-box;
    border: 1px solid #333;
    padding: 5px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
}
.opening-balances-report .obr-totals-table .obr-difference {
    border: 0;
    text-align: right;
}
.opening-balances-report .obr-totals-table .obr-balance {
    display: inline-block;
}
.opening-balances-report .obr-table td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.6;
}

/* Opening balances printed report: identical column geometry for rows and totals. */
.opening-balances-report .obr-table,
.opening-balances-report .obr-totals-table,
.opening-balances-report .obr-grand-total {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    display: table;
    margin-inline: 0;
    flex: none;
}
.opening-balances-report .obr-table th,
.opening-balances-report .obr-table td,
.opening-balances-report .obr-totals-table td { box-sizing: border-box; }
.opening-balances-report .obr-table td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
.opening-balances-report .obr-totals-table td:nth-last-child(-n+2) { text-align: center; }

/* Opening balances print: align subtotals in the SAME table as details, no second table grid. */
.opening-balances-report .obr-table tfoot td,
.opening-balances-report .obr-grand-total td {
    border: 1px solid #333;
    box-sizing: border-box;
    padding: 5px 7px;
    font-size: 11px;
    text-align: center;
    font-weight: 800;
}
.opening-balances-report .obr-table tfoot .obr-difference,
.opening-balances-report .obr-grand-total .obr-difference { text-align: right; }
.opening-balances-report .obr-table tfoot td:first-child { border-right: 0; }
.opening-balances-report .obr-table tfoot .obr-difference { border-left: 0; }
@media screen {
  .opening-balances-report .ob-report-filter { grid-template-columns: minmax(0, 1fr) 105px; align-items: center; }
  .opening-balances-report .opening-balances-print-actions > .btn { flex: 0 0 155px; width:155px; }
}

/* Opening balances print controls: search and button on one line at A4 width. */
@media screen {
  .opening-balances-report .ob-report-filter {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
    gap: 8px;
  }
  .opening-balances-report .ob-report-filter .field { flex: 1 1 0; min-width: 0; }
  .opening-balances-report .ob-report-filter > .btn { flex: 0 0 88px; width: 88px; }
}

/* Opening balances printing: one column-sizing source for group rows and final totals,
   using the fixed table strategy of the existing journal print view. */
.opening-balances-report .obr-table,
.opening-balances-report .obr-totals-table {
    display: table;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.opening-balances-report .obr-col-no { width: 16%; }
.opening-balances-report .obr-col-name { width: 52%; }
.opening-balances-report .obr-col-debit,
.opening-balances-report .obr-col-credit { width: 16%; }
.opening-balances-report .obr-table th,
.opening-balances-report .obr-table td,
.opening-balances-report .obr-totals-table td {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}
.opening-balances-report .obr-table tfoot { width: auto; }
.opening-balances-report .obr-summary-row td { width: auto; }

/* Opening balances print: remove old subtotal/grand-total border distortion.
   Both report tables use the same colgroup widths and a full four-cell row. */
.opening-balances-report .obr-table tfoot td:first-child,
.opening-balances-report .obr-table tfoot .obr-difference,
.opening-balances-report .obr-totals-table td,
.opening-balances-report .obr-totals-table .obr-difference {
    border: 1px solid #333;
}
.opening-balances-report .obr-table tfoot td,
.opening-balances-report .obr-totals-table td {
    width: auto;
    box-sizing: border-box;
}
.opening-balances-report .obr-grand-total {
    display: table;
    justify-content: initial;
    border-top: 0;
}

/* Opening balances print: align search input and action on the identical baseline. */
@media screen {
  .opening-balances-report .ob-report-filter { align-items: stretch; }
  .opening-balances-report .ob-report-filter .field { margin: 0; }
  .opening-balances-report .ob-report-filter .control,
  .opening-balances-report .ob-report-filter > .btn { height: 38px; min-height: 38px; margin: 0; box-sizing: border-box; align-self: stretch; }
}
/* The difference spans the two descriptive columns, with no divider before it. */
.opening-balances-report .obr-table tfoot .obr-difference,
.opening-balances-report .obr-totals-table .obr-difference { text-align: right; border-right: 0; }

/* Branch selection: scoped sizing and action alignment. */
.branch-selection-panel { min-height: 340px; display: flex; flex-direction: column; }
.branch-selection-panel .branch-selection-actions { margin-top: auto; justify-content: center; padding-top: var(--space-4); }
.branch-selection-panel .branch-selection-actions > .btn { margin-inline-start: 0; }
.branch-selection-panel .branch-enter-btn { display: inline-flex; justify-content: center; align-items: center; width: 34px; height: 34px; min-width: 34px; padding: 5px; }
.branch-selection-panel .branch-enter-btn img { display: block; width: 20px; height: 20px; }
.branch-selection-panel .grid-table td.col-actions { text-align: center; }

/* Company/Years: equal-sized entry and exit buttons. */
.company-panel .company-add-action { width: 120px; min-width: 120px; justify-content: center; }
.year-add .year-add-action { width: 120px; min-width: 120px; justify-content: center; }
.years-panel .company-years-actions .company-years-action {
    box-sizing: border-box; width: 160px; min-width: 160px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 16px; flex: 0 0 160px;
}
/* Company list: allocate more width to the company name, leave other screens unchanged. */
.company-index-page { max-width: 1050px; }
.company-index-page .grid-table.is-company th:nth-child(1) { width: 90px; }
.company-index-page .grid-table.is-company th:nth-child(3) { width: 240px; }
.company-index-page .grid-table.is-company td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
.company-index-page .grid-table.is-company th:nth-child(4) { width: 130px; }
.company-index-page .grid-table.is-company td:nth-child(2) { overflow-wrap: anywhere; }
/* Company list: lower only its exit action slightly. */
.company-index-page .company-index-exit { margin-top: 26px; }

/* Accounting settings: account links (external CSS; CSP compatible) */

/* شاشة ربط الحسابات فقط: جدول موحد يمنع اختلاف عرض الأعمدة بين الأقسام */
.account-links-page .account-links-table { width:100%; table-layout:fixed; border-collapse:collapse; direction:rtl; }
.account-links-page .account-links-table > tbody > tr:not(.account-links-heading) > th,
.account-links-page .account-links-table > tbody > tr:not(.account-links-heading) > td {
    box-sizing:border-box; padding:1px 6px !important; height:35px; vertical-align:middle; overflow:hidden;
    border:1px solid #B9CDE1;
}
.account-links-page .account-links-table .control { width:100%; min-width:0; max-width:100%; height:29px; min-height:29px; box-sizing:border-box; }
.account-links-page .account-links-table .account-links-search { text-align:right; direction:rtl; font-family:Cairo,sans-serif; font-weight:700; }
.account-links-page .account-links-table .account-number { text-align:center; direction:ltr; }
.account-links-page .account-links-table .account-links-actions { text-align:center; white-space:nowrap; }
.account-links-page .account-links-table .account-links-actions .btn-icon { display:inline-flex; width:28px; height:28px; margin:0; }
.account-links-page .account-links-table .account-links-heading > td {
    border:0; background:#fff; height:auto; padding:19px 8px 9px !important;
    text-align:right; color:#bd1721; font-weight:800; line-height:1.75;
}
.account-links-page .account-links-table .account-links-heading:first-child > td { padding-top:14px; }
.account-links-page .account-links-buttons { display:flex; justify-content:space-between; gap:12px; margin-top:18px; direction:rtl; }
.account-links-page .account-links-buttons > .btn { min-width:166px; height:42px; display:inline-flex; align-items:center; justify-content:center; }

.account-links-page .account-links-col-label { width:25%; }
.account-links-page .account-links-col-number { width:16%; }
.account-links-page .account-links-col-search { width:53%; }
.account-links-page .account-links-col-actions { width:6%; }
.account-links-page .account-links-table > tbody > tr:not(.account-links-heading) > th { text-align:right; }
.account-links-page .account-links-table > tbody > tr:not(.account-links-heading) > td { padding-block:1px !important; }
.account-links-page .account-links-buttons { width:100%; }
.account-links-page .account-links-buttons > .btn { flex:0 0 166px; width:166px; min-width:166px; }



/* Document numbering sequence – scoped to its screen; matches PanoWeb Cairo RTL design. */
.document-sequence-page .panel-body { padding: 20px 24px 22px; }
.document-sequence-page .document-sequence-groups {
    width: min(1120px, 100%); margin: 0 auto; padding: 20px 26px;
    border: 1px solid var(--field-line, #bdcbd9); background: #fff;
}
.document-sequence-page .document-sequence-group {
    display: grid; grid-template-columns: minmax(210px, 31%) minmax(0, 1fr);
    align-items: center; gap: 24px; padding: 19px 6px;
    border-bottom: 1px solid var(--field-line, #bdcbd9);
}
.document-sequence-page .document-sequence-group:last-child { border-bottom: 0; }
.document-sequence-page .document-sequence-heading {
    color: #be1822; font-family: Cairo, sans-serif; font-weight: 700;
    font-size: 1.05rem; text-align: right; line-height: 1.6;
}
.document-sequence-page .document-sequence-options { display: grid; gap: 14px; }
.document-sequence-page .document-sequence-option {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    font-family: Cairo, sans-serif; font-weight: 700; font-size: 1rem;
    text-align: right; line-height: 1.6;
}
.document-sequence-page .document-sequence-option input[type=radio] {
    flex: 0 0 auto; width: 17px; height: 17px; margin: 0;
    accent-color: var(--primary, #24649d);
}
.document-sequence-page .document-sequence-actions {
    display: flex; justify-content: space-between; align-items: center;
    width: min(1120px, 100%); margin: 0 auto;
    gap: 16px; padding-top: 24px;
}
.document-sequence-page .document-sequence-actions > .btn {
    min-width: 160px; height: 46px; display: inline-flex;
    align-items: center; justify-content: center; font-family: Cairo, sans-serif; font-weight: 700;
}
@media (max-width: 720px) {
    .document-sequence-page .panel-body { padding: 12px; }
    .document-sequence-page .document-sequence-groups { padding: 8px 12px; }
    .document-sequence-page .document-sequence-group { grid-template-columns: 1fr; gap: 10px; padding: 16px 4px; }
    .document-sequence-page .document-sequence-actions > .btn { min-width: 120px; }
}

/* Journal list and create/edit: slightly tighter table rows only. */
@media screen {
  .jv-list .grid-table tbody td { padding-top: 8px; padding-bottom: 8px; }
  .jv-edit .jv-grid tbody td { padding-top: 2px; padding-bottom: 2px; }
  .jv-edit .jv-grid tbody .control { height: 28px; }
  .jv-edit .jv-grid tbody textarea.jv-text { height: auto; min-height: 28px; }
}

/* Chart of accounts: standalone A4 report, using the approved PanoWeb print layout. */
.chart-print-report { direction: rtl; background: #fff; color: #111; padding: 18px; font-family: Cairo, sans-serif; font-weight: 700; font-size: 12px; }
.chart-print-actions { display: flex; gap: 10px; margin-bottom: 16px; }
.chart-print-heading { text-align: center; margin-bottom: 20px; }
.chart-print-heading h1 { font-size: 16px; font-weight: 800; margin: 0 0 14px; }
.chart-print-title { display: flex; align-items: center; justify-content: center; position: relative; min-height: 27px; }
.chart-print-title h2 { margin: 0; font-size: 15px; font-weight: 800; }
.chart-print-title > strong { position: absolute; right: 0; font-size: 18px; }
.chart-print-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.chart-print-table th, .chart-print-table td { border: 1px solid #333; padding: 4px 7px; font-size: 11px; }
.chart-print-table th { background: #eee; font-weight: 800; text-align: center; }
.chart-print-table td:first-child, .chart-print-table td:nth-child(3), .chart-print-table td:nth-child(4) { text-align: center; }
.chart-print-table td:nth-child(2) { text-align: right; overflow-wrap: anywhere; }
.chart-print-name { display: inline-block; }
.chart-print-indent-2 { padding-inline-start: 10px; }
.chart-print-indent-3 { padding-inline-start: 20px; }
.chart-print-indent-4 { padding-inline-start: 30px; }
.chart-print-level-1 td { font-weight: 800; }
.chart-print-footer { display: flex; justify-content: space-between; margin-top: 30px; font-size: 10px; }
.chart-print-empty { text-align: center; }
@media print {
  @page { size: A4 portrait; margin: 12mm 10mm 15mm; }
  body:has(.chart-print-report) .app-header,
  body:has(.chart-print-report) .info-bar,
  body:has(.chart-print-report) nav,
  body:has(.chart-print-report) .chart-print-actions,
  body:has(.chart-print-report) .chart-print-filters { display: none !important; }
  .chart-print-report { padding: 0; }
  .chart-print-table thead { display: table-header-group; }
  .chart-print-table tr { break-inside: avoid; page-break-inside: avoid; }
  .chart-print-footer { margin-bottom: 0; }
}

/* Chart of Accounts print preview: A4 portrait content width (210mm less 10mm margins on each side).
   Shared report only; paper output continues to use the existing @page settings. */
@media screen {
  .chart-print-report {
    box-sizing: border-box;
    width: 100%;
    max-width: 190mm;
    margin-inline: auto;
  }
  .chart-print-actions { justify-content: space-between; align-items: center; }
  .chart-print-actions > .btn {
    box-sizing: border-box;
    flex: 0 0 155px;
    width: 155px;
    min-width: 155px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Chart of Accounts print: enforce the approved 12/71/7/10 split in preview and on A4.
   Long values and column headings must wrap instead of widening narrow columns. */
.chart-print-report .chart-print-table { width: 100%; max-width: 100%; table-layout: fixed; }
.chart-print-report .chart-print-table > colgroup > col:nth-child(1) { width: 14%; }
.chart-print-report .chart-print-table > colgroup > col:nth-child(2) { width: 69%; }
.chart-print-report .chart-print-table > colgroup > col:nth-child(3) { width: 7%; }
.chart-print-report .chart-print-table > colgroup > col:nth-child(4) { width: 10%; }
.chart-print-report .chart-print-table th,
.chart-print-report .chart-print-table td {
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: normal;
  padding-inline: 3px;
}
.chart-print-report .chart-print-table th:nth-child(3) { font-size: 9px; padding-inline: 1px; }

/* Chart of Accounts: level three receives a subtle gray row in preview and on paper. */
.chart-print-report .chart-print-table tbody tr.chart-print-level-3 > td {
  background-color: #e8e8e8;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Chart of Accounts print filters: the shared PanoWeb labels-above-controls design.
   Controls remain in one RTL row; print and exit actions below are unchanged. */
@media screen {
  .chart-print-report .chart-print-filters {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(110px, 1fr) 100px 115px;
    align-items: end;
    gap: 10px;
    margin-bottom: 16px;
    width: 100%;
  }
  .chart-print-report .chart-print-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }
  .chart-print-report .chart-print-filter-field label {
    display: block;
    margin: 0;
    font-family: Cairo, sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #15365a;
    text-align: right;
    line-height: 1.5;
  }
  .chart-print-report .chart-print-filter-field input,
  .chart-print-report .chart-print-filter-field select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 5px 10px;
    border: 1px solid #9dbde1;
    border-radius: 10px;
    background: #fff;
    color: #17385d;
    font-family: Cairo, sans-serif;
    font-size: 12px;
    font-weight: 700;
  }
  .chart-print-report .chart-print-filters > .btn {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-family: Cairo, sans-serif;
    font-weight: 800;
    font-size: 12px;
  }
}

/* Chart of accounts index: common bottom action row. */
/* Chart of accounts: actions live in the real panel footer, below the table. */
.panel-foot.chart-accounts-bottom-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    direction: rtl;
    width: 100%;
    box-sizing: border-box;
}
.chart-accounts-export-actions { display: inline-flex; align-items: center; gap: 10px; }
.panel-foot.chart-accounts-bottom-actions .btn { flex: 0 0 auto; }
.panel-foot.chart-accounts-bottom-actions .chart-accounts-exit { margin-inline-start: auto; }

/* Cheque movement reference: inherited PanoWeb table and panel styling. */
.cheque-movement-guide { max-width: 860px; margin-inline: auto; }
.cheque-movement-guide .grid-table { table-layout: fixed; width: 100%; }
.cheque-movement-guide .grid-table th:first-child,
.cheque-movement-guide .grid-table td:first-child { width: 22%; }
.cheque-movement-guide .grid-table th:last-child,
.cheque-movement-guide .grid-table td:last-child { width: 78%; }

/* Shared cheque selection controls: used with the receipt/payment voucher design. */
.cheque-search-action { flex: 0 0 auto; width: 150px; min-width: 150px; max-width: 150px; }
.jv-addbar:has([data-cheque-search]) { margin-top: 12px; }
.cheque-search-panel { margin-top: 12px; }
.cheque-search-panel .cheque-search-results-wrap { margin-top: 10px; }
.cheque-search-panel .cheque-search-grid { width: 100%; table-layout: fixed; }
/* Fixed table columns: the browser must not distribute the six search columns equally. */
.cheque-search-panel .cheque-search-grid { table-layout: fixed; min-width: 0; }
.cheque-search-panel .cheque-search-grid > colgroup > col:nth-child(1) { width: 8%; }
.cheque-search-panel .cheque-search-grid > colgroup > col:nth-child(2) { width: 9%; }
.cheque-search-panel .cheque-search-grid > colgroup > col:nth-child(3) { width: 51%; }
.cheque-search-panel .cheque-search-grid > colgroup > col:nth-child(4) { width: 10%; }
.cheque-search-panel .cheque-search-grid > colgroup > col:nth-child(5) { width: 14%; }
.cheque-search-panel .cheque-search-grid > colgroup > col:nth-child(6) { width: 8%; }
.cheque-search-panel .cheque-search-grid th,
.cheque-search-panel .cheque-search-grid td { min-width: 0; box-sizing: border-box; }
.cheque-search-panel .cheque-search-grid th,
.cheque-search-panel .cheque-search-grid td { padding: 2px 5px; vertical-align: middle; overflow-wrap: anywhere; }
.cheque-search-panel .cheque-search-grid td:nth-child(3),
.cheque-search-panel .cheque-search-grid th:nth-child(3) { text-align: right; }
.cheque-search-panel .cheque-search-grid td:last-child,
.cheque-search-panel .cheque-search-grid th:last-child { text-align: center; padding-inline: 1px; }
.cheque-search-panel .cheque-search-grid td:last-child .btn { min-width: 76px; width: 76px; max-width: 100%; padding-inline: 9px; white-space: nowrap; }
.cheque-search-actions { display: flex; justify-content: flex-start; margin-top: 12px; }

/* Cheque sector: distinguish ordinary navigation buttons from data summary cards. */
.cheque-sector { width: min(100%, 1500px); margin: 0 auto; padding: 8px 12px 18px; }
.cheque-sector-group { margin-bottom: 14px; }
.cheque-sector-heading { display: flex; gap: 9px; align-items: center; margin: 0 0 12px; padding: 0 9px 7px;
    color: var(--navy-text); font-size: 13px; font-weight: 800; border-bottom: 1px solid var(--card-line); }
.cheque-sector-heading::before { content: ""; display: inline-block; width: 3px; height: 16px; background: var(--navy-text); border-radius: 2px; }
.cheque-sector-heading small { font-size: 11px; font-weight: 500; opacity: .7; }
.cheque-sector-shortcuts, .cheque-sector-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; gap: 14px; }
.cheque-sector-shortcut { min-width: 0; }
.menu-panel .cheque-sector-shortcut .menu-tile { width: 100%; min-height: 205px; }
.cheque-sector-card { min-width: 0; min-height: 205px; box-sizing: border-box; overflow: hidden; padding: 0; }
.cheque-sector-card-link { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 0; min-height: 100%; padding: 0; color: inherit; text-decoration: none; }
.cheque-sector-card-link img { flex: 0 0 auto; object-fit: contain; }
.cheque-sector-card-values { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-top: 0; background: transparent; }
.cheque-sector-metric { display: flex; gap: 5px; align-items: baseline; min-width: 0; }
.cheque-sector-metric small, .cheque-today-value small { font-size: 10px; color: var(--navy-text); opacity: .78; }
.cheque-sector-metric strong, .cheque-today-value strong { font-size: 12px; color: var(--navy-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.cheque-sector-card:hover { border-color: var(--navy-text); box-shadow: 0 4px 12px rgba(24,65,104,.13); }
.cheque-sector-footer { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.cheque-sector-footer-tile { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 9px 12px; background: var(--surface); border: 1px solid #7ea1c9; border-radius: 12px; box-shadow: 0 6px 18px rgba(24,65,104,.08); font-weight: 800; }
.cheque-today-name { font-size: 11px; color: var(--navy-text); }
.cheque-today-name small { display: block; font-size: 10px; font-weight: 500; opacity: .7; }
.cheque-today-value { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.cheque-sector-movements { display: flex; justify-content: center; margin-top: 0; }
.cheque-sector-movements-link { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 0; width: 100%; min-height: 205px; box-sizing: border-box; padding: 14px 15px 15px; color: var(--navy-text); text-decoration: none; font-size: 12.5px; font-weight: 800; background: var(--surface); border: 1px solid #7ea1c9; border-radius: 14px; box-shadow: 0 6px 18px rgba(24,65,104,.08); }
.cheque-sector-movements-link img { width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1); }
.cheque-sector-movements-link:hover { box-shadow: 0 4px 12px rgba(24,65,104,.13); }
@media (max-width: 950px) {
    .cheque-sector-shortcuts, .cheque-sector-cards { grid-template-columns: repeat(2,minmax(250px,1fr)); }
}
@media (max-width: 560px) {
    .cheque-sector-shortcuts, .cheque-sector-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .cheque-sector-footer { grid-template-columns: 1fr; gap: 10px; }
    .cheque-sector-footer-tile { flex-wrap: wrap; }
    .cheque-sector-card-link { padding: 5px 7px; }
}

/* Cheque movement guide: wider exit button without changing other screens. */
.cheque-movement-guide .panel-foot .foot-end { min-width: 180px; justify-content: center; text-align: center; }

/* V13: four quick actions above, three summary cards per row. */
.cheque-sector-summary .cheque-sector-cards { grid-template-columns: repeat(3, minmax(0, 205px)); }
.cheque-sector-actions .cheque-sector-movements { display: block; margin-top: 0; }
.cheque-sector-actions .cheque-sector-movements-link { width: 100%; min-height: 91px; }
@media (max-width: 700px) {
    .cheque-sector-summary .cheque-sector-cards { grid-template-columns: repeat(2, minmax(0, 205px)); }
}
@media (max-width: 560px) {
    .cheque-sector-summary .cheque-sector-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* V16: increase only the vertical space between quick actions and summary cards. */
.cheque-sector-actions + .cheque-sector-summary { margin-top: 26px; }

/* V15: span summary rows across the same width as the four quick-action cards.
   4 x 205px + 3 x 18px = 874px. Keep three equal summary cards per row. */
.cheque-sector-summary .cheque-sector-cards { width: 100%; max-width: 1500px; margin-inline: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) {
    .cheque-sector-summary .cheque-sector-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* V20: unify all sector cards including cheques, with visible icon and more compact size. */
.cheque-sector-movements-link::before,
.cheque-sector-movements-link::after { content: none; }
.cheque-sector-movements-link {
    position: relative;
}
.cheque-sector-movements-link img {
    align-self: flex-end;
    background: #2e67a2;
    padding: 12px;
    border-radius: 12px;
    box-sizing: content-box;
}
.cheque-sector-movements-link span {
    display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 12px;
    background: #2e67a2; color: #fff; border-radius: 10px; text-align: center; font-size: 12.5px; font-weight: 800;
    box-shadow: 0 3px 8px rgba(24, 65, 104, .14);
}
.cheque-sector-movements-link {
    justify-content: space-between;
}
.cheque-sector-movements-link > span:first-of-type {
    flex: 1 1 auto;
    background: transparent;
    color: var(--navy-text);
    box-shadow: none;
    min-height: auto;
    padding: 14px 5px 10px;
    font-size: 16px;
}
.cheque-sector-movements-link::before {
    content: 'الدليل';
    position: absolute;
    top: 14px;
    inset-inline-start: 15px;
    min-width: 96px;
    max-width: 128px;
    min-height: 58px;
    padding: 9px 10px;
    border-radius: 12px;
    background: #eef4fb;
    border: 1px solid #8fb2d8;
    color: var(--navy-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
.cheque-sector-footer-tile {
    font-size: 11.5px;
}
.cheque-sector-footer-tile .cheque-today-value strong {
    font-size: 12px;
}
@media (max-width: 1200px) {
    .cheque-sector-shortcuts, .cheque-sector-cards, .cheque-sector-summary .cheque-sector-cards { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
}
@media (max-width: 700px) {
    .cheque-sector-shortcuts, .cheque-sector-cards, .cheque-sector-summary .cheque-sector-cards, .cheque-sector-footer { grid-template-columns: 1fr; }
    .cheque-sector-movements-link, .menu-panel .cheque-sector-shortcut .menu-tile, .cheque-sector-card, .menu-card-unified { min-height: 188px; }
    .menu-card-title, .cheque-sector-movements-link > span:first-of-type { font-size: 15px; }
}

/* V21: compact consistent cards, real transparent navy icon assets, no redundant side label. */
.menu-panel .menu-grid { max-width: 1240px; gap: 12px; }
.menu-panel .menu-card-unified,
.menu-panel .cheque-sector-card,
.menu-panel .cheque-sector-movements-link {
    min-height: 156px; padding: 10px 11px 11px; border-radius: 11px;
}
.menu-card-head { justify-content: flex-start; min-height: 37px; }
.menu-card-iconbox { width: 39px; height: 39px; border-radius: 9px; background: #eaf1f9; border: 1px solid #a5bcd3; box-shadow: none; }
.menu-card-iconbox img, .menu-panel .menu-card-unified .menu-card-iconbox img,
.menu-panel .cheque-sector-card .menu-card-iconbox img,
.menu-panel .cheque-sector-movements-link .menu-card-iconbox img {
    display: block; width: 31px; height: 31px; object-fit: contain;
    background: transparent; filter: none; opacity: 1; padding: 0; border-radius: 0;
}
.menu-card-body { padding: 6px 4px; }
.menu-card-title { font-size: 13px; }
.menu-card-action { font-size: 11px; min-height: 29px; padding: 4px 8px; border-radius: 7px; }
.menu-panel .menu-card-unified .menu-card-title,
.menu-panel .menu-card-unified .menu-card-action { color: inherit; }
.menu-panel .menu-card-unified .menu-card-action { color: #fff; }
.menu-panel .cheque-sector-shortcut .menu-tile { min-height: 156px; height: auto; }
.cheque-sector { max-width: 1240px; }
.cheque-sector-actions + .cheque-sector-summary { margin-top: 32px; }
.cheque-sector-summary .cheque-sector-cards { max-width: 1240px; gap: 12px; }
.cheque-sector-shortcuts { gap: 12px; }
.cheque-sector-card-link { min-height: 100%; }
.cheque-sector-card-values.menu-card-action-metrics { display: flex; gap: 12px; background: #2e67a2; }
.cheque-sector-card-values.menu-card-action-metrics .cheque-sector-metric { gap: 4px; }
.cheque-sector-movements-link { display: flex; flex-direction: column; justify-content: space-between; }
.cheque-sector-movements-link::before { content: none; }
.cheque-sector-movements-link img { align-self: auto; box-sizing: border-box; }
.cheque-sector-movements-link > span.menu-card-action { flex: none; font-size: 11px; padding: 4px 8px; min-height: 29px; color: #fff; background: #2e67a2; }
@media (max-width: 700px) {
 .menu-panel .menu-grid, .cheque-sector-shortcuts, .cheque-sector-summary .cheque-sector-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
 .menu-panel .menu-card-unified, .menu-panel .cheque-sector-card, .menu-panel .cheque-sector-movements-link { min-height: 153px; }
}

/* V22: slightly smaller sector cards; preserve all icons, metrics and actions. */
.menu-panel .menu-card-unified,
.menu-panel .cheque-sector-card,
.menu-panel .cheque-sector-movements-link,
.menu-panel .cheque-sector-shortcut .menu-tile {
    min-height: 142px;
    padding: 9px 10px 10px;
}
.menu-panel .menu-grid,
.cheque-sector-shortcuts,
.cheque-sector-summary .cheque-sector-cards { gap: 11px; }
.menu-card-head { min-height: 35px; }
.menu-card-iconbox { width: 36px; height: 36px; }
.menu-card-iconbox img,
.menu-panel .menu-card-unified .menu-card-iconbox img,
.menu-panel .cheque-sector-card .menu-card-iconbox img,
.menu-panel .cheque-sector-movements-link .menu-card-iconbox img { width: 29px; height: 29px; }
.menu-card-body { padding: 4px 3px; }
.menu-card-title { font-size: 12.5px; }
.menu-card-action,
.cheque-sector-movements-link > span.menu-card-action { min-height: 27px; font-size: 10.5px; padding: 4px 7px; }
@media (max-width: 700px) {
    .menu-panel .menu-card-unified,
    .menu-panel .cheque-sector-card,
    .menu-panel .cheque-sector-movements-link,
    .menu-panel .cheque-sector-shortcut .menu-tile { min-height: 142px; }
}


/* V23: cheque cards should read as summaries, not action buttons, while preserving current colors. */
.cheque-sector-card.cheque-summary-card {
    min-height: 176px;
    padding: 0;
    background: var(--surface);
    border: 1px solid #7ea1c9;
    border-radius: 11px;
    box-shadow: 0 6px 18px rgba(24, 65, 104, .08);
}
.cheque-summary-link {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 9px 10px 10px;
    color: inherit;
    text-decoration: none;
}
.cheque-summary-head {
    justify-content: flex-end;
    min-height: 34px;
}
.cheque-summary-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 2px 4px 4px;
}
.cheque-summary-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--navy-text);
    margin-bottom: 2px;
}
.cheque-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--navy-text);
}
.cheque-summary-stat small {
    font-size: 10.5px;
    font-weight: 700;
    color: #b00000;
}
.cheque-summary-stat strong {
    font-size: 15px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--navy-text);
    font-variant-numeric: tabular-nums;
}
.cheque-summary-divider {
    width: calc(100% - 28px);
    height: 1px;
    background: #263746;
    opacity: .55;
    margin: 2px 0 1px;
}
.cheque-summary-amount strong {
    font-size: 14px;
}
.cheque-sector-card.cheque-summary-card:hover {
    border-color: #5d89b7;
    box-shadow: 0 10px 22px rgba(24,65,104,.13);
}
.cheque-sector-card.cheque-summary-card .menu-card-action,
.cheque-sector-card.cheque-summary-card .cheque-sector-card-values {
    display: none !important;
}
.cheque-sector-footer-tile.cheque-today-summary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    min-height: 84px;
    padding: 10px 12px;
}
.cheque-sector-footer-tile.cheque-today-summary .cheque-today-name {
    text-align: center;
    font-size: 11.5px;
    font-weight: 800;
}
.cheque-sector-footer-tile.cheque-today-summary .cheque-today-name small {
    display: block;
    margin-top: 1px;
}
.cheque-today-summary-values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-top: 1px solid rgba(38,55,70,.45);
    padding-top: 7px;
}
.cheque-today-summary-values .cheque-today-value {
    display: flex;
    gap: 5px;
    align-items: baseline;
}
.cheque-today-summary-values .cheque-today-value small {
    color: #b00000;
    font-size: 10px;
    opacity: 1;
}
.cheque-today-summary-values .cheque-today-value strong {
    font-size: 12.5px;
    color: var(--navy-text);
}
@media (max-width: 700px) {
    .cheque-sector-card.cheque-summary-card { min-height: 165px; }
    .cheque-summary-stat strong { font-size: 14px; }
    .cheque-summary-amount strong { font-size: 13px; }
    .cheque-sector-footer-tile.cheque-today-summary { min-height: 78px; }
    .cheque-today-summary-values { flex-wrap: wrap; gap: 9px 14px; }
}


/* V24: slightly tighter summary cards, with clearer typography. */
.cheque-sector-card.cheque-summary-card { min-height: 160px; }
.cheque-summary-link { padding: 7px 10px 8px; }
.cheque-summary-body { gap: 4px; padding: 1px 4px 3px; }
.cheque-summary-title { font-size: 13.5px; }
.cheque-summary-stat small { font-size: 11px; }
.cheque-summary-stat strong { font-size: 16.5px; }
.cheque-summary-amount strong { font-size: 15px; }
.cheque-summary-divider { margin: 1px 0; }
.cheque-sector-footer-tile.cheque-today-summary { min-height: 74px; padding: 8px 12px; gap: 5px; }
.cheque-sector-footer-tile.cheque-today-summary .cheque-today-name { font-size: 12.5px; }
.cheque-today-summary-values .cheque-today-value strong { font-size: 13.5px; }

/* V24: dashboard summaries share cheque-sector palette and hierarchy. */
.dash { gap: 23px; padding: 14px 12px 20px; }
.dash-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 1080px); gap: 14px; }
.dash-group {
    width: auto; min-width: 0; padding: 11px 13px; border: 1px solid #7ea1c9;
    border-radius: 11px; box-shadow: 0 6px 18px rgba(24,65,104,.08);
    background: var(--surface); gap: 4px;
}
.dash-group hr { border: 0; border-top: 1px solid rgba(38,55,70,.5); margin: 3px 12px; }
.dash-group .dash-stat { min-height: 64px; padding: 3px 4px; }
.dash-group .dash-stat:first-child { min-height: 74px; }
.dash-group .dash-stat:not(.has-icon) { grid-template-columns: 1fr; }
.dash-bottom { width: min(100%, 1080px); grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 104px; gap: 13px; }
.dash-stat {
    min-width: 0; padding: 10px 12px; border: 1px solid #7ea1c9;
    border-radius: 11px; box-shadow: 0 6px 18px rgba(24,65,104,.08);
    grid-template-columns: 45px minmax(0,1fr); gap: 5px 9px;
    background: var(--surface); color: var(--navy-text);
}
.dash-stat:hover { border-color: #5d89b7; box-shadow: 0 9px 20px rgba(24,65,104,.12); }
.dash-stat img { grid-row: 1 / span 2; width: 39px; height: 39px; object-fit: contain; background: #eaf1f9; border: 1px solid #a5bcd3; border-radius: 9px; padding: 4px; }
.dash-stat .dash-label { color: var(--navy-text); font-size: 13.5px; font-weight: 800; }
.dash-stat .dash-num { color: var(--navy-text); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dash-month {
    padding: 10px 12px; background: var(--surface); border: 1px solid #7ea1c9;
    border-radius: 11px; box-shadow: 0 6px 18px rgba(24,65,104,.08); gap: 4px;
}
.dash-month hr { border: 0; border-top: 1px solid rgba(38,55,70,.5); margin: 7px 8px; }
.dash-label-dark { font-size: 12.5px; color: var(--navy-text); }
.dash-month .dash-num { font-size: 17px; color: var(--navy-text); }
@media (max-width: 1100px) {
    .dash-bottom { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .dash-month { grid-column: auto; grid-row: span 2; }
}
@media (max-width: 760px) {
    .dash-top { grid-template-columns: 1fr; max-width: 450px; }
    .dash-bottom { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 550px; }
    .dash-month { grid-row: span 2; }
}
@media (max-width: 460px) {
    .dash-bottom { grid-template-columns: 1fr; }
    .dash-month { grid-row: auto; }
}


/* V25: guide tile should match the other top cards exactly, and cheque summary cards are slightly shorter. */
.cheque-sector .cheque-sector-guide-tile {
    width: 100%;
}
.cheque-sector-card.cheque-summary-card { min-height: 148px; }
.cheque-summary-link { padding: 6px 9px 7px; }
.cheque-summary-head { min-height: 30px; }
.cheque-summary-body { gap: 3px; padding: 0 3px 2px; }
.cheque-summary-title { font-size: 13px; }
.cheque-summary-stat small { font-size: 10.5px; }
.cheque-summary-stat strong { font-size: 16px; }
.cheque-summary-amount strong { font-size: 14.5px; }
.cheque-summary-divider { width: calc(100% - 34px); margin: 1px 0; }
@media (max-width: 700px) {
    .cheque-sector-card.cheque-summary-card { min-height: 148px; }
}

/* V26: six cards per row in Settings only; other sectors retain their layouts. */
@media (min-width: 1301px) {
  .menu-panel.menu-panel-settings .menu-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1500px; }
}
@media (min-width: 701px) and (max-width: 1300px) {
  .menu-panel.menu-panel-settings .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; }
}
@media (max-width: 700px) {
  .menu-panel.menu-panel-settings .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
}
@media (max-width: 400px) {
  .menu-panel.menu-panel-settings .menu-grid { grid-template-columns: minmax(0, 1fr); }
}

/* V27: cheque summary cards only - reduced height without changing fonts or metrics. */
.cheque-sector .cheque-sector-card.cheque-summary-card { min-height: 132px; }
.cheque-sector .cheque-summary-link { padding: 4px 9px 5px; }
.cheque-sector .cheque-summary-head { min-height: 26px; }
.cheque-sector .cheque-summary-body { gap: 2px; padding: 0 3px 1px; }
@media (max-width: 700px) {
    .cheque-sector .cheque-sector-card.cheque-summary-card { min-height: 132px; }
}


/* V29: cheque summaries match the approved sample: title on top, larger icon, thin black divider, count/right and amount/left. */
.cheque-sector .cheque-sector-card.cheque-summary-card {
    min-height: 124px;
}
.cheque-sector .cheque-summary-link {
    padding: 6px 12px 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
}
.cheque-sector .cheque-summary-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
}
.cheque-sector .cheque-summary-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--navy-text);
    line-height: 1.3;
    text-align: right;
    padding-top: 4px;
}
.cheque-sector .cheque-summary-iconbox {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #eaf1f9;
    border: 1px solid #a5bcd3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.cheque-sector .cheque-summary-iconbox img {
    width: 33px;
    height: 33px;
    object-fit: contain;
    background: transparent;
    filter: none;
}
.cheque-sector .cheque-summary-divider {
    width: calc(100% - 70px);
    align-self: center;
    height: 1px;
    background: #000;
    opacity: .95;
    margin: 0;
}
.cheque-sector .cheque-summary-metrics-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 4px 6px 0;
}
.cheque-sector .cheque-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 0;
    gap: 3px;
    text-align: center;
}
.cheque-sector .cheque-summary-stat small {
    font-size: 10.5px;
    font-weight: 800;
    color: #c21f16;
    opacity: 1;
}
.cheque-sector .cheque-summary-stat strong {
    font-size: 18px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--navy-text);
    font-variant-numeric: tabular-nums;
}
.cheque-sector .cheque-summary-amount strong {
    font-size: 17px;
}
.cheque-sector .cheque-summary-body,
.cheque-sector .cheque-summary-head {
    display: contents;
}
@media (max-width: 700px) {
    .cheque-sector .cheque-sector-card.cheque-summary-card {
        min-height: 124px;
    }
    .cheque-sector .cheque-summary-link {
        padding: 6px 10px 8px;
    }
    .cheque-sector .cheque-summary-title {
        font-size: 13px;
    }
    .cheque-sector .cheque-summary-stat strong {
        font-size: 16px;
    }
    .cheque-sector .cheque-summary-amount strong {
        font-size: 15.5px;
    }
    .cheque-sector .cheque-summary-metrics-row {
        gap: 10px;
        padding-inline: 2px;
    }
}


/* Accounting settings: safe, user-friendly error state instead of a developer exception page. */
.accounting-settings-error { max-width: 680px; margin: 24px auto; }
.accounting-settings-error-body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 24px; text-align: center; }
.accounting-settings-error-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff2e9; border: 1px solid #e7b59b; color: #a64a25; font-size: 25px; font-weight: 800; }
.accounting-settings-error-body h2 { margin: 0; font-size: 18px; color: var(--navy-text); }
.accounting-settings-error-body p { margin: 0; line-height: 1.8; font-weight: 700; }
.accounting-settings-error-body .accounting-settings-error-hint { color: var(--muted); font-size: 12px; }
.accounting-settings-error-body .btn { min-width: 190px; justify-content: center; }

/* Cheque due balance reports: same compact lined style as standard financial printouts. */
.cheque-due-report { background: #fff; max-width: 1000px; margin: 12px auto; padding: 16px; color: #152d45; }
.cheque-report-controls { display: flex; justify-content: space-between; margin-bottom: 12px; }
.cheque-report-header { border: 1px solid #999; text-align: center; padding: 8px 12px; }
.cheque-report-header h1 { font-size: 15px; margin: 4px 0; }
.cheque-report-header p { margin: 2px 0; font-size: 11px; }
.cheque-report-table { border-collapse: collapse; width: 100%; font-size: 11px; margin-top: 13px; }
.cheque-report-table th, .cheque-report-table td { border: 1px solid #777; padding: 5px 7px; text-align: center; }
.cheque-report-table thead th { background: #e8eef5; }
.cheque-report-table td:nth-child(3) { text-align: right; }
.cheque-report-table tfoot th { background: #e8eef5; }
.cheque-empty-report { padding: 20px !important; }
.cheque-report-foot { display: flex; justify-content: space-between; font-size: 10px; margin-top: 28px; }
.cheque-due-report-actions { display: flex; justify-content: center; gap: 12px; margin: 12px auto; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .cheque-due-report { max-width: none; margin: 0; padding: 0; }
  .cheque-report-controls, .cheque-due-report-actions { display: none !important; }
  .cheque-report-table thead { display: table-header-group; }
  .cheque-report-table tr { break-inside: avoid; }
}

/* V32: only the two daily cheque summary tiles open their matching report. */
.cheque-today-report-link { color: inherit; text-decoration: none; cursor: pointer; }
.cheque-today-report-link:hover, .cheque-today-report-link:focus-visible { color: inherit; text-decoration: none; border-color: #5d89b7; box-shadow: 0 8px 20px rgba(24,65,104,.15); }
.cheque-today-report-link:focus-visible { outline: 2px solid #2e67a2; outline-offset: 2px; }

/* V33: separate daily cheque reports by their final movement code, with subtotals. */
.cheque-report-table .cheque-report-group-title th { background: #e8eef5; color: #142f50; font-weight: 800; text-align: right; padding: 7px 9px; }
.cheque-report-table .cheque-report-group-total th { background: #f4f6f9; font-weight: 800; }
@media print {
  .cheque-report-table .cheque-report-group-title { break-after: avoid; page-break-after: avoid; }
  .cheque-report-table .cheque-report-group-total { break-inside: avoid; page-break-inside: avoid; }
}

/* Opening cheques & cheque postponement: restrained PanoWeb report layout. */
.cheque-ops-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.cheque-ops-details>div{display:flex;align-items:center;gap:10px;min-width:0}.cheque-ops-details b{min-width:145px}.cheque-ops-details span{overflow-wrap:anywhere}.cheque-ops-report{background:#fff;color:#111;direction:rtl;margin:0 auto;padding:18px 20px;max-width:1100px;min-height:850px}.cheque-ops-report-header{text-align:center;border-bottom:1px solid #274e89;padding:8px 0 18px;margin-bottom:20px}.cheque-ops-report-header h2{font-size:17px}.cheque-ops-report-header h3{font-size:15px}.cheque-ops-title{display:flex;justify-content:space-between;align-items:center}.cheque-ops-report-group{break-inside:avoid;margin-bottom:25px}.cheque-ops-report-group h3,.cheque-ops-report-group h4{text-align:right;margin:10px 0;font-size:14px}.cheque-ops-table{border-collapse:collapse;width:100%;font-size:12px}.cheque-ops-table th,.cheque-ops-table td{border:1px solid #333;padding:6px 8px;text-align:right}.cheque-ops-table thead{background:#e7edf5}.cheque-ops-table tfoot{font-weight:700}.cheque-ops-subtotal{border-top:1px solid black;margin-top:12px;padding-top:9px;font-size:13px}.cheque-ops-footer{display:flex;justify-content:space-between;font-size:11px;margin-top:35px}.cheque-ops-actions{display:flex;gap:10px;margin-bottom:15px}.cheque-ops-print-fields>div{border:1px solid #444;padding:10px}.cheque-ops-print-fields b{font-size:12px}.cheque-ops-print-fields span{font-size:13px}.cheque-ops-reason{grid-column:1/-1;min-height:55px}@media(max-width:700px){.cheque-ops-details{grid-template-columns:1fr}}@media print{@page{size:A4 portrait;margin:12mm}.cheque-ops-actions{display:none!important}.cheque-ops-report{padding:0;max-width:none;min-height:0}.cheque-ops-footer{break-inside:avoid}}

/* V39: cheque opening / postponement screen refinements. */
.cheque-opening-screen .grid-table th,.cheque-opening-screen .grid-table td{text-align:right}
.cheque-opening-screen .cheque-opening-note{min-width:260px;white-space:pre-wrap;overflow-wrap:anywhere}
.cheque-opening-screen .cheque-opening-group th{background:#d8e6f6;color:#173b67;font-weight:800}
.cheque-opening-screen .cheque-opening-year th{background:#e9f1fa;color:#244e80;font-weight:750;padding-right:20px}
.cheque-opening-screen .cheque-opening-month th{background:#f2f6fb;color:#355f8c;padding-right:36px}
.cheque-opening-screen .lookup-main{flex:2.5;min-width:0}
.cheque-opening-screen .lookup-form{flex:1;min-width:0}
.cheque-opening-screen .control{text-align:right}
.cheque-opening-screen .cheque-opening-description{width:100%;min-height:76px;resize:vertical;line-height:1.5;text-align:right;white-space:pre-wrap}
.cheque-postpone-search{max-width:540px}
.cheque-postpone-search-controls{display:flex;align-items:end;gap:9px}
.cheque-postpone-search-controls .control{flex:1;min-width:0}
.cheque-postpone-search .cheque-postpone-search-button{min-width:120px;margin-top:5px;align-self:end}
.cheque-postpone-select{min-width:105px;display:inline-flex;justify-content:center}
.cheque-opening-print-actions{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:12px}
.cheque-opening-print-actions>.btn{min-width:155px;justify-content:center;text-align:center}
.cheque-opening-print-actions>.cheque-print-exit{margin-inline-start:auto}
@media(max-width:700px){.cheque-postpone-search-controls{flex-wrap:wrap}.cheque-opening-print-actions>.btn{min-width:115px}}

/* V40: cheque postponement search and action alignment, screen scoped. */
.cheque-postpone-screen .cheque-postpone-search { max-width:none; width:100%; }
.cheque-postpone-screen .cheque-postpone-search-controls { display:flex; flex-wrap:nowrap; align-items:end; width:100%; gap:10px; }
.cheque-postpone-screen .cheque-postpone-search-controls .control { flex:1 1 auto; min-width:0; width:100%; text-align:right; }
.cheque-postpone-screen .cheque-postpone-search-button { flex:0 0 130px; min-width:130px; }
.cheque-postpone-screen .cheque-postpone-select-cell { text-align:center; vertical-align:middle; }
.cheque-postpone-screen .cheque-postpone-select { min-width:120px; margin-inline:auto; text-align:center; align-items:center; justify-content:center; }
.cheque-postpone-screen .cheque-postpone-edit-fields .field { flex-direction:column; align-items:stretch; gap:6px; }
.cheque-postpone-screen .cheque-postpone-edit-fields .field label { display:block; width:100%; text-align:right; }
.cheque-postpone-screen .cheque-postpone-edit-fields .field .control { width:100%; text-align:right; direction:rtl; }
.cheque-postpone-screen .cheque-postpone-form-actions { display:flex; align-items:center; gap:10px; }
.cheque-postpone-screen .cheque-postpone-form-actions .btn { min-width:165px; width:165px; text-align:center; justify-content:center; }
@media(max-width:700px) {
 .cheque-postpone-screen .cheque-postpone-search-controls { flex-wrap:nowrap; }
 .cheque-postpone-screen .cheque-postpone-search-button { flex:0 0 100px; min-width:100px; }
 .cheque-postpone-screen .cheque-postpone-form-actions .btn { width:145px; min-width:145px; }
}

/* V41: Preserve the chronological date order in the RTL cheque-opening print report. */
.cheque-ops-report .cheque-opening-print-date { direction: ltr; unicode-bidi: isolate; white-space: nowrap; display: inline-block; font-variant-numeric: tabular-nums; }

/* V42: Cheque postponement layout and invariant RTL-safe printed dates. */
.cheque-postpone-screen .cheque-postpone-results { width:100%; table-layout:auto; }
.cheque-postpone-screen .cheque-postpone-results th:nth-child(2),
.cheque-postpone-screen .cheque-postpone-results td:nth-child(2) { width:38%; }
.cheque-postpone-screen .cheque-postpone-results th:last-child,
.cheque-postpone-screen .cheque-postpone-results td:last-child { width:88px; min-width:88px; max-width:88px; padding-inline:4px; text-align:center; }
.cheque-postpone-screen .cheque-postpone-select { width:72px; min-width:72px; max-width:72px; padding-inline:6px; }
.cheque-postpone-screen .cheque-postpone-description { white-space:pre-wrap; overflow-wrap:anywhere; text-align:right; }
.cheque-postpone-screen .cheque-postpone-description-field { grid-column:span 2; align-items:flex-start; }
.cheque-postpone-screen .cheque-postpone-description-field span { flex:1; min-width:0; text-align:right; white-space:pre-wrap; }
.cheque-postpone-screen .cheque-postpone-edit-fields { grid-template-columns:minmax(180px,1fr) minmax(0,2.2fr); }
.cheque-postpone-screen .cheque-postpone-edit-fields .cheque-postpone-new-date { min-width:0; }
.cheque-postpone-screen .cheque-postpone-edit-fields .cheque-postpone-reason-field { min-width:0; }
.cheque-ops-report .cheque-postpone-print-date { direction:ltr; unicode-bidi:isolate; display:inline-block; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cheque-ops-report .cheque-postpone-print-description { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:700px) {
 .cheque-postpone-screen .cheque-postpone-edit-fields { grid-template-columns:1fr; }
 .cheque-postpone-screen .cheque-postpone-description-field { grid-column:1/-1; }
}

/* V46 – opening cheque edit/delete controls and bold cheque memo */
.cheque-opening-screen .cheque-opening-description { font-weight: 800; text-align: right; direction: rtl; }
.cheque-opening-screen .cheque-opening-actions { white-space: nowrap; text-align: center; }
.cheque-opening-screen .cheque-opening-delete { display: inline-block; margin-inline-start: 4px; }

/* V47: opening cheque expandable hierarchy and tighter date/action columns. */
.cheque-opening-screen .cheque-opening-description { font-family: inherit; font-weight: 800; }
.cheque-opening-screen .cheque-opening-table { width: 100%; table-layout: fixed; }
.cheque-opening-screen .cheque-opening-table .cheque-opening-note { min-width: 0; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; }
.cheque-opening-screen .cheque-opening-table .cheque-opening-actions { white-space: nowrap; padding-inline: 3px; }
.cheque-opening-screen .cheque-opening-table .cheque-opening-actions .btn { padding-inline: 6px; }
.cheque-opening-screen .cheque-opening-table tr[hidden] { display: none; }
.cheque-opening-screen .cheque-opening-toggle { color: inherit; font: inherit; font-weight: 800; width: 100%; text-align: right; background: transparent; border: 0; cursor: pointer; padding: 3px 6px; }
.cheque-opening-screen .cheque-opening-toggle small { font-size: 11px; font-weight: 700; }
.cheque-opening-screen .cheque-opening-toggle:focus-visible { outline: 2px solid #275c98; border-radius: 3px; }

/* V47 final: opening-cheque table hierarchy and form typography. */
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(1){width:12%!important}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(2){width:11%!important}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(3){width:40%!important}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(4){width:13%!important}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(5){width:14%!important}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(6){width:10%!important}
.cheque-opening-screen .cheque-opening-description{font-family:inherit;font-weight:800;direction:rtl;text-align:right}
.cheque-opening-screen .cheque-opening-table .cheque-opening-actions .btn{font-size:11px;padding-inline:4px}
.cheque-opening-screen .field-validation-error{display:block;color:#b42318;font-weight:700;margin-top:3px}
.cheque-opening-screen .control:invalid:not(:focus):not(:placeholder-shown){border-color:#c94242}


/* V48: opening-cheque list reuses standard field/button typography and colors. */
.cheque-opening-screen .cheque-opening-filters{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) auto;gap:9px;align-items:end;width:100%;margin-bottom:10px}
.cheque-opening-screen .cheque-opening-filters .field{min-width:0;margin:0}
.cheque-opening-screen .cheque-opening-filters .control,.cheque-opening-screen .cheque-opening-filters label{font-family:inherit;font-weight:800;text-align:right;direction:rtl;width:100%}
.cheque-opening-screen .cheque-opening-clear-filters{white-space:nowrap;align-self:end}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(1){width:11%!important}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(2){width:12%!important}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(3){width:43%!important}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(4){width:12%!important}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(5){width:12%!important}
.cheque-opening-screen .cheque-opening-table colgroup col:nth-child(6){width:10%!important}
.cheque-opening-screen .cheque-opening-table .cheque-opening-actions{text-align:center;vertical-align:middle}
.cheque-opening-screen .cheque-opening-delete{vertical-align:middle}
.cheque-opening-screen .cheque-opening-empty{text-align:center;padding:16px;font-weight:800}
@media(max-width:1000px){.cheque-opening-screen .cheque-opening-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.cheque-opening-screen .cheque-opening-filters{grid-template-columns:1fr}}

/* V49: keep edit and delete actions on exactly one centered row. */
.cheque-opening-screen .cheque-opening-action-buttons {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}
.cheque-opening-screen .cheque-opening-action-buttons > .btn,
.cheque-opening-screen .cheque-opening-action-buttons > form {
    flex: 0 0 auto;
    margin: 0;
}
.cheque-opening-screen .cheque-opening-action-buttons > form {
    display: flex;
    align-items: center;
}

/* V50 - same column proportions in every opening-cheques print section. */
.cheque-ops-report .cheque-opening-print-table{width:100%;table-layout:fixed}
.cheque-ops-report .cheque-opening-print-table th,.cheque-ops-report .cheque-opening-print-table td{overflow-wrap:anywhere;vertical-align:middle}
.cheque-ops-report .cheque-opening-print-table tbody td:nth-child(3){white-space:pre-wrap}

/* V51: fixed, identical opening-cheque print column widths across every movement/month. */
.cheque-ops-report table.cheque-opening-print-table { width:100%; table-layout:fixed; border-collapse:collapse; }
.cheque-ops-report .cheque-opening-print-table col.opening-col-date { width:16%; }
.cheque-ops-report .cheque-opening-print-table col.opening-col-number { width:12%; }
.cheque-ops-report .cheque-opening-print-table col.opening-col-description { width:57%; }
.cheque-ops-report .cheque-opening-print-table col.opening-col-amount { width:15%; }
.cheque-ops-report .cheque-opening-print-table th,
.cheque-ops-report .cheque-opening-print-table td { box-sizing:border-box; overflow-wrap:break-word; word-break:normal; }
.cheque-ops-report .cheque-opening-print-table tbody td:nth-child(3) { white-space:pre-wrap; }
.cheque-ops-report .cheque-opening-print-table tfoot th { border-top:1px solid #333; }

/* V52: print-column width normalization, shared for every cheque opening group. */
.cheque-ops-report table.cheque-opening-print-table { table-layout: fixed !important; width: 100% !important; }
.cheque-ops-report table.cheque-opening-print-table th:nth-child(1),
.cheque-ops-report table.cheque-opening-print-table td:nth-child(1) { width: 16%; }
.cheque-ops-report table.cheque-opening-print-table th:nth-child(2),
.cheque-ops-report table.cheque-opening-print-table td:nth-child(2) { width: 12%; }
.cheque-ops-report table.cheque-opening-print-table th:nth-child(3),
.cheque-ops-report table.cheque-opening-print-table td:nth-child(3) { width: 57%; white-space: pre-wrap; overflow-wrap: anywhere; }
.cheque-ops-report table.cheque-opening-print-table th:nth-child(4),
.cheque-ops-report table.cheque-opening-print-table td:nth-child(4) { width: 15%; }


/* V53 – cheque postponement adjustments within the established UI. */
.cheque-postpone-screen .cheque-postpone-exit-row {display:flex;width:100%;justify-content:flex-end;margin-top:var(--space-4)}
.cheque-postpone-screen .cheque-postpone-exit {min-width:175px;justify-content:center;text-align:center}
.cheque-postpone-screen .cheque-postpone-results {width:100%;table-layout:fixed}
.cheque-postpone-screen .cheque-postpone-results th:nth-child(2),.cheque-postpone-screen .cheque-postpone-results td:nth-child(2) {width:46%}
.cheque-postpone-screen .cheque-postpone-results th:nth-child(4),.cheque-postpone-screen .cheque-postpone-results td:nth-child(4) {width:110px;white-space:nowrap}
.cheque-postpone-screen .cheque-postpone-results td.cheque-postpone-description {white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;height:auto;line-height:1.65;vertical-align:top;font-family:inherit;font-weight:700}
.cheque-postpone-screen .cheque-postpone-description-field {grid-column:1/-1;display:grid;grid-template-columns:145px minmax(0,1fr);align-items:start}
.cheque-postpone-screen .cheque-postpone-description-field span {display:block;width:100%;height:auto;min-height:36px;max-height:none;overflow:visible;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.65;font-family:inherit;font-weight:700}
.cheque-ops-report .cheque-postpone-print-actions {width:100%;display:flex;align-items:center;gap:12px}
.cheque-ops-report .cheque-postpone-print-actions>.btn {min-width:175px;justify-content:center;text-align:center}
.cheque-ops-report .cheque-postpone-print-exit {margin-inline-start:auto}
@media(max-width:700px) {.cheque-postpone-screen .cheque-postpone-results {table-layout:auto}.cheque-postpone-screen .cheque-postpone-description-field {grid-template-columns:minmax(0,1fr)}.cheque-postpone-screen .cheque-postpone-exit,.cheque-ops-report .cheque-postpone-print-actions>.btn {min-width:140px}}

/* V54: consistent multiline cheque description in postponement forms and print. */
.cheque-postpone-screen .cheque-postpone-description,
.cheque-postpone-screen .cheque-postpone-description-field span,
.cheque-ops-report .cheque-postpone-print-description {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
    max-height: none;
    height: auto;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.65;
}
.cheque-postpone-screen .cheque-postpone-results td.cheque-postpone-description { width: 46%; }
.cheque-ops-report .cheque-ops-print-fields .cheque-postpone-print-description { display: block; width: 100%; }

/* V55: cheque description stays fully visible in both selected details and print. */
.cheque-postpone-screen .cheque-postpone-description-field,
.cheque-ops-report .cheque-postpone-print-description-row {
    grid-column: 1 / -1;
    min-width: 0;
    align-items: start;
}
.cheque-postpone-screen .cheque-postpone-description-field span,
.cheque-ops-report .cheque-postpone-print-description-row span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    overflow: visible;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
    line-height: 1.65;
    font-family: inherit;
    font-weight: 700;
}
.cheque-ops-report .cheque-postpone-print-description-row {
    break-inside: avoid;
}

/* V56: do not clip multiline cheque descriptions; retain the shared UI typography. */
.cheque-postpone-screen .cheque-postpone-full-description,
.cheque-ops-report .cheque-postpone-full-description {
    display:block;
    box-sizing:border-box;
    min-width:0;
    width:100%;
    min-height:0;
    max-width:none;
    height:auto;
    max-height:none;
    overflow:visible;
    text-overflow:clip;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    font-family:inherit;
    font-weight:700;
    line-height:1.65;
    text-align:right;
}
.cheque-postpone-screen .cheque-postpone-description-field,
.cheque-ops-report .cheque-postpone-print-description-row {
    display:grid;
    grid-template-columns:145px minmax(0,1fr);
    align-items:start;
    grid-column:1/-1;
    min-height:0;
    height:auto;
    overflow:visible;
}
.cheque-postpone-screen .cheque-postpone-description-field > b,
.cheque-ops-report .cheque-postpone-print-description-row > b { min-width:0; }
.cheque-postpone-screen .cheque-postpone-results td.cheque-postpone-description {
    min-width:0;
    white-space:normal;
    height:auto;
    max-height:none;
    overflow:visible;
    vertical-align:top;
}
@media(max-width:700px) {
    .cheque-postpone-screen .cheque-postpone-description-field,
    .cheque-ops-report .cheque-postpone-print-description-row {grid-template-columns:minmax(0,1fr)}
}

/* V61: receipt/payment actions remain on one row, with repeat description at far left. */
.chq-compact .chq-repeat-addbar { display: flex; align-items: center; flex-wrap: nowrap; }
.chq-compact .chq-repeat-addbar .chq-repeat-action { margin-inline-start: auto; flex-shrink: 0; }
.chq-compact .chq-repeat-addbar .chq-compact-audit { margin-inline-start: 0; }


/* V62 - shared document lists: ten whole rows visible before scrolling.
   The same class can be reused by every document-list screen. */
@media screen {
    .jv-list .jv-filter {
        padding-bottom: 4px;
        row-gap: 4px;
    }
    .jv-list .jv-filter .field { margin-bottom: 0; }
    .jv-list > .panel-body { padding-top: 4px; }
    .document-list-ten-rows {
        --document-row-h: 38px;
        --document-heading-h: 36px;
        height: calc(var(--document-heading-h) + 10 * var(--document-row-h) + 2px);
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .panel .document-list-ten-rows > .grid-table thead th {
        box-sizing: border-box;
        height: var(--document-heading-h);
        padding-block: 5px;
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .panel .document-list-ten-rows > .grid-table tbody tr {
        height: var(--document-row-h);
    }
    .panel .document-list-ten-rows > .grid-table tbody td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        height: var(--document-row-h);
        padding-block: 5px;
        line-height: 1.35;
    }
}
@media print {
    .document-list-ten-rows { height: auto !important; max-height: none !important; overflow: visible !important; }
}

/* V63: shared cheque voucher action bar stays on one line in receipt and payment. */
.chq-compact .jv-addbar.chq-repeat-addbar { display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.chq-compact .jv-addbar.chq-repeat-addbar > .jv-add { flex:0 0 auto; order:0; }
.chq-compact .jv-addbar.chq-repeat-addbar > .jv-add { min-width:170px; }
.chq-compact .jv-addbar.chq-repeat-addbar > .chq-repeat-action { flex:0 0 auto; margin-inline-start:auto; order:2; }
.chq-compact .jv-addbar.chq-repeat-addbar > .chq-compact-audit { order:1; flex:0 1 auto; min-width:0; }

/* Cheque grid: fit the voucher screen without horizontal scrolling. */
.jv-edit.chq-compact .jv-grid-wrap { overflow-x:hidden; }
.jv-edit.chq-compact .chq-grid { width:100%; min-width:0; table-layout:fixed; }
.jv-edit.chq-compact .chq-grid th:nth-child(1), .jv-edit.chq-compact .chq-grid td:nth-child(1) { width:40px; }
.jv-edit.chq-compact .chq-grid th:nth-child(2), .jv-edit.chq-compact .chq-grid td:nth-child(2) { width:110px; }
.jv-edit.chq-compact .chq-grid th:nth-child(3), .jv-edit.chq-compact .chq-grid td:nth-child(3) { width:120px; }
.jv-edit.chq-compact .chq-grid th:nth-child(4), .jv-edit.chq-compact .chq-grid td:nth-child(4) { width:65px; }
.jv-edit.chq-compact .chq-grid th:nth-child(5), .jv-edit.chq-compact .chq-grid td:nth-child(5) { width:auto; }
.jv-edit.chq-compact .chq-grid th:nth-child(6), .jv-edit.chq-compact .chq-grid td:nth-child(6) { width:120px; }
.jv-edit.chq-compact .chq-grid th:nth-child(7), .jv-edit.chq-compact .chq-grid td:nth-child(7) { width:120px; }
.jv-edit.chq-compact .chq-grid th:nth-child(8), .jv-edit.chq-compact .chq-grid td:nth-child(8) { width:72px; }
.jv-edit.chq-compact .chq-grid th, .jv-edit.chq-compact .chq-grid td { min-width:0; padding-inline:2px; overflow:hidden; }
.jv-edit.chq-compact .chq-grid .control { min-width:0; padding-inline:3px; font-size:12px; }

/* Cheque-entry finder: draw attention to the required search number and show the last movement clearly. */
.cheque-search-panel [data-cheque-search-term]{background:#FFF8DC;border-color:#D99A16;color:#5A3D00}
.cheque-search-panel [data-cheque-search-term]:focus{border-color:#B57A00;outline:2px solid rgba(217,154,22,.25)}
.cheque-status-label{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid #C8D5E1;border-radius:999px;background:#F3F8FD;color:#245F97;font-size:11px;font-weight:800;line-height:1.2}
/* V63: opening cheque dates keep day/month/year reading order in RTL tables. */
.cheque-opening-screen .cheque-opening-date-cell { text-align:center; white-space:nowrap; }
.cheque-opening-screen .pano-date-ltr { display:inline-block; direction:ltr; unicode-bidi:isolate; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* V64: cheque summaries use the single approved visual pattern. */
.cheque-sector .cheque-sector-card.cheque-summary-card { min-height: 130px; }
.cheque-sector .cheque-summary-link { padding: 8px 12px 10px; gap: 5px; }
.cheque-sector .cheque-summary-top { align-items: center; min-height: 42px; }
.cheque-sector .cheque-summary-title { flex: 1; text-align: center; font-size: 16px; padding: 0; }
.cheque-sector .cheque-summary-iconbox { height: 44px; width: 44px; flex: 0 0 44px; }
.cheque-sector .cheque-summary-iconbox img { height: 34px; width: 34px; }
.cheque-sector .cheque-summary-divider { height: 1px; width: calc(100% - 68px); background: #222; opacity: 1; margin: 0 auto; }
.cheque-sector .cheque-summary-metrics-row { padding: 3px 6px 0; }
.cheque-sector .cheque-summary-stat strong { font-size: 18px; }
.cheque-sector .cheque-summary-amount strong { font-size: 18px; }
.cheque-postpone-results .cheque-postpone-unavailable { color: var(--text-muted, #68788c); font-weight: 700; white-space: nowrap; }

/* V65: cheque summary titles match the typography of the sector's other cards. */
.cheque-sector .cheque-sector-summary .cheque-summary-title { font-size: 12.5px; }

/* V70: reuse the existing cheque grid visual language for protected movements. */
.chq-grid tr.chq-line-locked input.control[readonly] {
    background-color: var(--pano-readonly-bg, #f1f4f8);
    cursor: not-allowed;
}
.chq-grid .chq-line-lock-icon {
    display: inline-block;
    margin-inline-start: 3px;
    vertical-align: middle;
    font-size: 12px;
}

/* V72: reuse standard buttons and panels for warehouse settings navigation. */
.warehouse-settings-tabs { display:flex; flex-wrap:wrap; gap:8px; }

/* V72.4: unified warehouse settings toolbar, with print and exit on the same row. */
.warehouse-settings-tabs { display:flex; flex-wrap:nowrap; align-items:center; gap:10px; }
.warehouse-settings-tabs > .btn { min-width:155px; text-align:center; justify-content:center; white-space:nowrap; }
.warehouse-settings-tabs > .warehouse-settings-print { margin-inline-start:auto; }
@media (max-width:930px) { .warehouse-settings-tabs { flex-wrap:wrap; } .warehouse-settings-tabs > .warehouse-settings-print { margin-inline-start:0; } }

/* Warehouse settings V72.5: right-aligned tax rate and unified print toolbar. */
.warehouse-settings-tax-rate { text-align:right !important; }
.warehouse-settings-tax-rate > span { display:inline-block; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.cheque-ops-report .warehouse-settings-print-actions { display:flex; align-items:center; gap:12px; width:100%; }
.cheque-ops-report .warehouse-settings-print-actions > .btn { min-width:185px; justify-content:center; text-align:center; }
.cheque-ops-report .warehouse-settings-print-actions > .warehouse-settings-print-exit { margin-inline-start:auto; }
@media(max-width:430px) { .cheque-ops-report .warehouse-settings-print-actions > .btn { min-width:125px; } }

/* Read-only item card (V73 initial safety review) */
.itemcard-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.itemcard-exit{margin-inline-start:auto;min-width:110px}.itemcard-search{display:flex;gap:8px;align-items:center;margin:12px 0}.itemcard-search .control{flex:1;min-width:160px}.itemcard-warning{padding:9px 12px;border:1px solid #b3a58e;border-radius:5px;margin:10px 0;font-weight:600}

/* Item card uses the same layout and compact tree grid as Chart of Accounts. */
/* V73.13: account-tree layout; columns ordered right-to-left and all cells right aligned. */
.itemcard-accounts .itemcard-tree-table { direction:rtl; width:100%; }
.itemcard-accounts .itemcard-tree-table th,
.itemcard-accounts .itemcard-tree-table td { text-align:right !important; vertical-align:middle; }
.itemcard-accounts .itemcard-tree-table th:nth-child(1){width:145px}
.itemcard-accounts .itemcard-tree-table th:nth-child(2){width:165px}
.itemcard-accounts .itemcard-tree-table th:nth-child(3){width:auto}
.itemcard-accounts .itemcard-tree-table th:nth-child(4){width:95px}
.itemcard-accounts .itemcard-tree-table th:nth-child(5){width:90px}
.itemcard-accounts .itemcard-tree-table th:nth-child(6){width:155px}
.itemcard-accounts .itemcard-tree-table .itemcard-code { display:inline-block; text-align:right; unicode-bidi:isolate; }
.itemcard-accounts .itemcard-tree-table .row-actions { justify-content:flex-start; }
.itemcard-accounts .itemcard-tree-table td{padding-block:4px}
.itemcard-accounts .itemcard-tree-table .btn-icon{width:28px;height:28px;font-size:14px}
.itemcard-editor{margin-top:var(--space-3)}

/* V73.15 – item card actions and seven-column account-style grid. */
.itemcard-accounts .itemcard-tree-table th:nth-child(4){width:74px}
.itemcard-accounts .itemcard-tree-table th:nth-child(5){width:128px}
.itemcard-accounts .itemcard-tree-table th:nth-child(6){width:90px}
.itemcard-accounts .itemcard-tree-table th:nth-child(7){width:158px}
.itemcard-accounts .itemcard-tree-table th:last-child,
.itemcard-accounts .itemcard-tree-table td:last-child{text-align:center !important}
.itemcard-accounts .itemcard-tree-table .row-actions{display:flex;align-items:center;justify-content:center;gap:6px}
.itemcard-accounts .itemcard-tree-table .row-actions form{margin:0}
.itemcard-bottom-tools .btn{min-width:125px;text-align:center}
@media(max-width:650px){.itemcard-bottom-tools{flex-wrap:wrap}.itemcard-bottom-tools .btn{min-width:88px}}

/* V73.16: ItemCard Editor — consistent six-field RTL row and wider equal actions. */
.itemcard-accounts .itemcard-editor-main-fields .field { min-width:0; }
.itemcard-accounts .itemcard-editor-main-fields .control { width:100%; box-sizing:border-box; }
.itemcard-accounts .itemcard-editor-main-fields .acc-kind { min-height:34px; display:flex; align-items:center; gap:5px; }
.itemcard-accounts .itemcard-editor-actions > .btn { min-width:175px; min-height:38px; justify-content:center; text-align:center; }
@media(max-width:720px) { .itemcard-accounts .itemcard-editor-actions > .btn { min-width:125px; } }

/* V73.23: Item card lower section aligned to approved three-column layout. */
.itemcard-accounts .itemcard-top-fields .field { min-width:0; }
.itemcard-accounts .itemcard-top-fields .control { width:100%; box-sizing:border-box; }
.itemcard-lower-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 28px;align-items:start;margin-top:14px}
.itemcard-lower-layout .itemcard-column{min-width:0}
.itemcard-lower-layout .field{margin-bottom:14px}
.itemcard-lower-layout label{display:block;margin-bottom:6px;font-weight:700;color:#143d70}
.itemcard-lower-layout .control{width:100%;box-sizing:border-box;height:42px}
.itemcard-lower-layout .itemcard-column-title{margin:6px 0 12px;text-align:center;font-size:1.35rem;font-weight:800;color:#143d70}
.itemcard-lower-layout .itemcard-column-title-spacer{visibility:hidden;pointer-events:none}
.itemcard-lower-layout .itemcard-note-field{grid-column:1 / -1;margin-top:2px}
.itemcard-lower-layout .itemcard-note-field .control{height:42px}
.itemcard-lower-layout .barcode-field label{color:#9a6a00}
.itemcard-lower-layout .barcode-control{background:#fff8d9 !important;border-color:#e4c66b !important;box-shadow:inset 0 0 0 1px rgba(228,198,107,.15)}
@media(max-width:980px){.itemcard-lower-layout{grid-template-columns:1fr;gap:10px}.itemcard-lower-layout .itemcard-column-title{text-align:right}}

/* V73.25: slightly wider Exit button in ItemCard list only. */
.itemcard-accounts .itemcard-list-exit { min-width: 155px; text-align: center; justify-content: center; }

/* V73.26: material list hierarchy and exit button */
.itemcard-materials-table .itemcard-main-group td{font-weight:800;background:#eaf1fb}
.itemcard-materials-table .itemcard-sub-group td{font-weight:700;background:#f5f8fc}
.itemcard-materials-table .itemcard-sub-group .itemcard-material-name{padding-inline-start:22px}
.itemcard-materials-table .itemcard-leaf .itemcard-material-name{padding-inline-start:42px}
.itemcard-accounts .itemcard-materials-exit{min-width:170px;text-align:center;justify-content:center}

/* PANO-UI-CODE-STANDARD-V2 / V73.30: reusable single-line filter and proportional columns. */
.itemcard-material-filters {
  display:grid;
  grid-template-columns:minmax(140px,1.5fr) minmax(125px,1fr) minmax(125px,1fr) minmax(76px,.55fr) minmax(86px,.6fr) max-content;
  gap:8px; align-items:end; direction:rtl; margin-bottom:12px;
}
.itemcard-material-filters .field{min-width:0;margin:0}
.itemcard-material-filters .field label{display:block;font-weight:700;margin-bottom:4px}
.itemcard-material-filters .control{width:100%;box-sizing:border-box;height:36px;min-height:36px}
.itemcard-material-filter-actions{display:flex;grid-column:auto;align-items:flex-end;gap:6px;white-space:nowrap;flex-wrap:nowrap}
.itemcard-material-filter-actions .btn{min-width:0;min-height:36px;height:36px;box-sizing:border-box;padding-inline:10px;white-space:nowrap}
.itemcard-print-filters{margin-bottom:22px}
@media(max-width:1200px) and (min-width:701px){
 .itemcard-material-filters{overflow-x:auto;grid-template-columns:150px 140px 140px 85px 95px max-content;padding-bottom:4px}
}
@media(max-width:700px){
 .itemcard-material-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
 .itemcard-material-filter-actions{grid-column:1/-1;flex-wrap:wrap}
}
@media(max-width:460px){.itemcard-material-filters{grid-template-columns:1fr}}
.itemcard-materials-table{table-layout:fixed;width:100%}
.itemcard-materials-table th,.itemcard-materials-table td{overflow-wrap:anywhere}
.itemcard-materials-table th:nth-child(1),.itemcard-materials-table td:nth-child(1){width:11%}
.itemcard-materials-table th:nth-child(2),.itemcard-materials-table td:nth-child(2){width:11%}
.itemcard-materials-table th:nth-child(3),.itemcard-materials-table td:nth-child(3){width:40%}
.itemcard-materials-table th:nth-child(4),.itemcard-materials-table td:nth-child(4){width:5%}
.itemcard-materials-table th:nth-child(5),.itemcard-materials-table td:nth-child(5){width:11%}
.itemcard-materials-table th:nth-child(6),.itemcard-materials-table td:nth-child(6){width:7%}
.itemcard-materials-table th:nth-child(7),.itemcard-materials-table td:nth-child(7){width:9%}
.itemcard-materials-table th:nth-child(8),.itemcard-materials-table td:nth-child(8){width:6%;min-width:0;white-space:nowrap}
.cheque-ops-report .pano-standard-print-actions{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;direction:rtl}
.cheque-ops-report .pano-standard-print-actions>.btn{flex:0 0 180px;width:180px;min-width:180px;min-height:38px;box-sizing:border-box;justify-content:center;text-align:center}
.cheque-ops-report .pano-standard-print-actions>.pano-standard-print-exit{margin-inline-start:auto}
@media(max-width:420px){.cheque-ops-report .pano-standard-print-actions>.btn{flex-basis:125px;width:125px;min-width:125px}}
@media print{
 .itemcard-print-filters,.pano-standard-print-actions{display:none!important}
 .cheque-ops-table.itemcard-materials-table{table-layout:fixed}
}

/* V73.29: widen material name in standard item print, on screen and paper. */
.cheque-ops-report .cheque-ops-table:not(.itemcard-materials-table):not(.store-opening-print-table) th:nth-child(3),.cheque-ops-report .cheque-ops-table:not(.itemcard-materials-table):not(.store-opening-print-table) td:nth-child(3){width:36%}

/* V73.31: balanced column widths for the list and print, without changing other tables. */
.itemcard-accounts .itemcard-materials-table :is(th,td):nth-child(3){width:38%}
.itemcard-accounts .itemcard-materials-table :is(th,td):nth-child(4){width:7%}
.cheque-ops-report .itemcard-materials-table :is(th,td):nth-child(1),
.cheque-ops-report .itemcard-materials-table :is(th,td):nth-child(2){width:10%}
.cheque-ops-report .itemcard-materials-table :is(th,td):nth-child(7){width:11%}

/* V73.32: level heading stays on one line in MaterialsPrint. */
.cheque-ops-report .itemcard-materials-table :is(th,td):nth-child(3){width:38%}
.cheque-ops-report .itemcard-materials-table :is(th,td):nth-child(4){width:7%}
.cheque-ops-report .itemcard-materials-table th:nth-child(4){white-space:nowrap}

/* V73.33: MaterialsPrint only — more space for user codes and stable bilingual timestamp. */
.cheque-ops-report .itemcard-materials-table :is(th,td):nth-child(1){width:9%}
.cheque-ops-report .itemcard-materials-table :is(th,td):nth-child(2){width:14%;overflow-wrap:break-word;word-break:normal}
.cheque-ops-report .itemcard-materials-table :is(th,td):nth-child(3){width:35%}
.cheque-ops-report .itemcard-print-timestamp{display:inline-flex;align-items:center;gap:8px;direction:rtl;white-space:nowrap;font-variant-numeric:tabular-nums}
.cheque-ops-report .itemcard-print-timestamp time{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
@media print{.cheque-ops-report .itemcard-print-timestamp{font-size:10px}}

/* Store opening balances — PANO unified UI V2 */
.store-opening-filters,.store-opening-entry{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.store-opening-filters .field{flex:1;min-width:140px;margin:0}.store-opening-filters .field:first-child{flex:2}
.store-opening-filters .btn{height:38px;min-width:98px}.store-opening-filters .store-opening-exit{margin-inline-start:auto}
.store-opening-entry{padding:12px;border:1px solid #cfdaea;border-radius:6px}
.store-opening-entry .field{flex:1;min-width:120px;margin:0}.store-opening-entry .field:first-child{flex:3;min-width:240px}
.store-opening-entry .control{width:100%;box-sizing:border-box;height:38px}
.store-opening-table{table-layout:auto;min-width:1050px}.store-opening-table th:nth-child(4){width:30%;min-width:230px}
.store-opening-table th:nth-child(5),.store-opening-table th:nth-child(6){width:7%}
.store-opening-table td{vertical-align:middle}.store-opening-table td.num{direction:ltr;text-align:center}
.store-opening-table .row-actions{display:flex;gap:5px;justify-content:center}
@media(min-width:1250px){.store-opening-filters{flex-wrap:nowrap}}

/* V73.36 — Inventory opening balances follow accounting opening-balance layout. */
.store-opening .store-opening-entry{display:grid;grid-template-columns:minmax(260px,3fr) repeat(3,minmax(100px,1fr)) minmax(155px,1.5fr) repeat(3,minmax(110px,1fr));align-items:end;gap:8px;margin:12px 0 16px;padding:12px;border:1px solid #bdccdf;border-radius:5px;background:#f8fafc}
.store-opening .store-opening-entry .field{min-width:0;margin:0}
.store-opening .store-opening-entry .field:first-child{min-width:0}
.store-opening .store-opening-entry .control{height:36px;width:100%}
.store-opening .store-opening-entry .btn{height:36px;white-space:nowrap}
.store-opening .store-opening-table{width:100%;table-layout:fixed;min-width:1120px}
.store-opening .store-opening-table th:nth-child(4){width:29%;min-width:0}
.store-opening .store-opening-table th:nth-child(1),.store-opening .store-opening-table th:nth-child(2){width:10%}
.store-opening .store-opening-table th:nth-child(3){width:12%}
.store-opening .store-opening-table th:nth-child(5){width:7%}
.store-opening .store-opening-table th:nth-child(6),.store-opening .store-opening-table th:nth-child(7),.store-opening .store-opening-table th:nth-child(8){width:7%}
.store-opening .store-opening-table th:nth-child(9){width:8%}
.store-opening .store-opening-table th:nth-child(10){width:6%}
@media(max-width:1500px){.store-opening .store-opening-entry{display:flex;flex-wrap:wrap}.store-opening .store-opening-entry .field{flex:1 1 140px}.store-opening .store-opening-entry .field:first-child{flex:2 1 280px}}

/* V73.37: Warehouse opening balances reuse the accounting opening-balance panel, grid and actions. */
.store-ob-screen .store-ob-filters{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr) 88px 88px;align-items:end;gap:8px;width:100%;margin-bottom:12px}
.store-ob-screen .store-ob-filters .field{min-width:0;margin:0}
.store-ob-screen .store-ob-filters .control{width:100%;min-width:0;box-sizing:border-box}
.store-ob-screen .store-ob-filters .btn{display:inline-flex;justify-content:center;align-items:center;width:100%;height:36px;min-width:0;white-space:nowrap;box-sizing:border-box}
@media (max-width:680px){
 .store-ob-screen .store-ob-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .store-ob-screen .store-ob-filters .field:first-child{grid-column:1/-1}
}
.store-ob-screen .store-ob-table{table-layout:fixed;min-width:0;width:100%}
.store-ob-screen .store-ob-table col.so-number{width:3%}
.store-ob-screen .store-ob-table col.so-prog{width:9%}
.store-ob-screen .store-ob-table col.so-user{width:9%}
.store-ob-screen .store-ob-table col.so-barcode{width:11%}
.store-ob-screen .store-ob-table col.so-name{width:25%}
.store-ob-screen .store-ob-table col.so-unit{width:7%}
.store-ob-screen .store-ob-table col.so-qty{width:7%}
.store-ob-screen .store-ob-table col.so-price{width:7%}
.store-ob-screen .store-ob-table col.so-total{width:8%}
.store-ob-screen .store-ob-table col.so-warehouse{width:10%}
.store-ob-screen .store-ob-table col.so-actions{width:4%}
.store-ob-screen .store-ob-table input,.store-ob-screen .store-ob-table select{width:100%;min-width:0;box-sizing:border-box}
.store-ob-screen .store-ob-table [data-name]{text-align:right}
.store-ob-screen .store-ob-table [data-total],.store-ob-screen .store-ob-table [data-qty],.store-ob-screen .store-ob-table [data-price]{text-align:right;direction:ltr}
.store-ob-screen .store-ob-table tr.so-selected{background:#e8f1fb}
@media(max-width:1050px){.store-ob-screen .ob-scroll{overflow-x:auto}.store-ob-screen .store-ob-table{min-width:1200px}}

/* Store opening print — compact A4 report and single-row desktop filters (V73.59). */
.store-opening-print-report .store-opening-print-filters {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 88px;
    align-items: end;
    column-gap: 8px;
    width: 100%;
    margin-bottom: 12px;
}
.store-opening-print-report .store-opening-print-filters .field { min-width: 0; margin: 0; }
.store-opening-print-report .store-opening-print-filters .control {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.store-opening-print-report .store-opening-print-filters .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
}
.store-opening-print-report .store-opening-print-table { width: 100%; table-layout: fixed; }
.store-opening-print-report .store-opening-print-table th,
.store-opening-print-report .store-opening-print-table td {
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: middle;
}
.store-opening-print-report .store-opening-print-table .store-opening-print-name {
    text-align: right;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.45;
}
.store-opening-print-report .store-opening-print-table td:nth-child(6),
.store-opening-print-report .store-opening-print-table td:nth-child(7),
.store-opening-print-report .store-opening-print-table td:nth-child(8) {
    text-align: center;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 650px) {
    .store-opening-print-report .store-opening-print-filters {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .store-opening-print-report .store-opening-print-filters .field:first-child { grid-column: 1 / -1; }
}

/* V73.60: Store opening print has its own column geometry; no inherited 36% barcode column. */
.store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(1) { width: 8%; }
.store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(2) { width: 8%; }
.store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(3) { width: 10%; }
.store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(4) { width: 34%; }
.store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(5) { width: 7%; }
.store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(6) { width: 7%; }
.store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(7) { width: 9%; }
.store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(8) { width: 9%; }
.store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(9) { width: 8%; }
.store-opening-print-report .store-opening-print-table :is(th,td):nth-child(3) { width: auto; }
.store-opening-print-report .store-opening-print-table :is(th,td):nth-child(4) { text-align: right; overflow-wrap: break-word; word-break: normal; }
.store-opening-print-report .store-opening-print-filters { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr) 88px; align-items: end; gap: 8px; }
.store-opening-print-report .store-opening-print-filters > .field { min-width: 0; }
.store-opening-print-report .store-opening-print-filters > .btn { align-self: end; margin: 0; }
.store-opening-print-report .store-opening-version-check { text-align: left; font-size: 11px; margin: 0 0 6px; color: #365475; }
@media print { .store-opening-print-report .store-opening-version-check { display: none; } }
@media (max-width: 650px) { .store-opening-print-report .store-opening-print-filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

/* Store opening: full multiline names and explicit row editing. V73.61 */
.store-ob-screen .store-ob-table .so-multiline-value {
  display:block; width:100%; min-width:0; height:auto; white-space:normal;
  overflow-wrap:break-word; word-break:normal; line-height:1.55;
  text-align:right; padding:5px 4px; box-sizing:border-box;
}
.store-ob-screen .store-ob-table td {vertical-align:middle;}
.store-ob-screen .store-ob-table td:last-child {white-space:nowrap;}
.store-ob-screen .store-ob-table .so-edit-action {padding:4px 7px; min-height:30px; font-size:12px;}

/* Store opening: editable warehouse names wrap naturally without affecting the print layout. */
.store-ob-screen .store-ob-table select.so-warehouse-select {white-space:normal; min-height:38px; height:auto;}

/* Store opening balances: let the browser print dialog choose portrait or landscape.
   A named page avoids the global cheque-report portrait page rule. */
@media print {
  @page storeOpeningPaper { size: auto; margin: 12mm; }
  .store-opening-print-report { page: storeOpeningPaper; }
}


/* V73.64 - Store opening balances print typography only; isolated from other reports. */
@media print {
  @page storeOpeningPaper { size: auto; margin: 8mm 7mm 12mm; }
  .store-opening-print-report { page: storeOpeningPaper; font-size: 9pt; }
  .store-opening-print-report .cheque-ops-report-header { margin-bottom: 9px; padding: 2px 0 8px; }
  .store-opening-print-report .cheque-ops-report-header h2 { font-size: 11pt; margin: 0 0 5px; }
  .store-opening-print-report .cheque-ops-report-header > div { font-size: 9pt; }
  .store-opening-print-report .store-opening-print-table { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: 8pt; line-height: 1.3; }
  .store-opening-print-report .store-opening-print-table th,
  .store-opening-print-report .store-opening-print-table td { font-size: 8pt; padding: 3px 3px; line-height: 1.3; vertical-align: middle; overflow-wrap: normal; word-break: normal; }
  .store-opening-print-report .store-opening-print-table thead th { text-align: center; font-weight: 700; }
  .store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(1) { width: 9%; }
  .store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(2) { width: 13%; }
  .store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(3) { width: 9%; }
  .store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(4) { width: 29%; }
  .store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(5) { width: 7%; }
  .store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(6) { width: 7%; }
  .store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(7) { width: 9%; }
  .store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(8) { width: 10%; }
  .store-opening-print-report .store-opening-print-table > colgroup > col:nth-child(9) { width: 7%; }
  .store-opening-print-report .store-opening-print-table tbody td:nth-child(1),
  .store-opening-print-report .store-opening-print-table tbody td:nth-child(2),
  .store-opening-print-report .store-opening-print-table tbody td:nth-child(3) { overflow-wrap: anywhere; }
  .store-opening-print-report .store-opening-print-table .store-opening-print-name { text-align: right; overflow-wrap: break-word; white-space: normal; word-break: normal; line-height: 1.35; }
  .store-opening-print-report .store-opening-print-table tbody td:nth-child(5),
  .store-opening-print-report .store-opening-print-table tbody td:nth-child(6),
  .store-opening-print-report .store-opening-print-table tbody td:nth-child(7),
  .store-opening-print-report .store-opening-print-table tbody td:nth-child(8),
  .store-opening-print-report .store-opening-print-table tfoot th:nth-child(2) { white-space: nowrap; overflow-wrap: normal; }
  .store-opening-print-report .store-opening-print-table tbody td:nth-child(9) { overflow-wrap: break-word; }
  .store-opening-print-report .cheque-ops-footer { margin-top: 14px; font-size: 8pt; }
  .store-opening-print-report .itemcard-print-timestamp { font-size: 8pt; }
  .store-opening-print-report .store-opening-print-table tr { break-inside: avoid; page-break-inside: avoid; }
}

/* Warehouse opening print groups: warehouse title followed by its own 8-column table. */
.store-opening-print-report .store-opening-warehouse-group { margin: 12px 0 16px; break-inside: auto; }
.store-opening-print-report .store-opening-warehouse-heading { margin: 0 0 7px; text-align: right; font-size: 12px; font-weight: 700; }
.store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(1) { width: 9%; }
.store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(2) { width: 14%; }
.store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(3) { width: 10%; }
.store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(4) { width: 32%; }
.store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(5) { width: 8%; }
.store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(6) { width: 8%; }
.store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(7) { width: 9%; }
.store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(8) { width: 10%; }
.store-opening-print-report .store-opening-grouped-table tfoot th { font-weight: 700; }
.store-opening-print-report .store-opening-grand-total { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 12px; border-top: 2px solid #222; font-weight: 700; }
.store-opening-print-report .store-opening-grand-total strong { white-space: nowrap; }
@media print {
  .store-opening-print-report .store-opening-warehouse-heading { font-size: 9pt; margin: 9px 0 5px; break-after: avoid; page-break-after: avoid; }
  .store-opening-print-report .store-opening-grouped-table { font-size: 8pt; }
  .store-opening-print-report .store-opening-grouped-table thead { display: table-header-group; }
  .store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(1) { width: 9%; }
  .store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(2) { width: 14%; }
  .store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(3) { width: 10%; }
  .store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(4) { width: 32%; }
  .store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(5) { width: 8%; }
  .store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(6) { width: 8%; }
  .store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(7) { width: 9%; }
  .store-opening-print-report .store-opening-grouped-table > colgroup > col:nth-child(8) { width: 10%; }
  .store-opening-print-report .store-opening-grand-total { font-size: 9pt; padding: 6px 4px; break-inside: avoid; }
}

/* Store opening: numeric warehouse display, native named dropdown, explicit row checkbox. */
.store-ob-screen .store-ob-table col.so-warehouse{width:5%}
.store-ob-screen .store-ob-table col.so-name{width:29%}
.store-ob-screen .store-ob-table col.so-actions{width:4%}
.store-ob-screen .store-ob-table .so-warehouse-picker{display:block;position:relative;min-width:0;width:100%}
.store-ob-screen .store-ob-table .so-warehouse-picker select{width:100%;min-width:0;color:transparent;text-shadow:none;padding-inline:2px;cursor:pointer}
.store-ob-screen .store-ob-table .so-warehouse-picker select option{color:#162c47;background:#fff}
.store-ob-screen .store-ob-table .so-warehouse-number{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font-weight:700;pointer-events:none;direction:ltr;text-align:center;color:#102a47}
.store-ob-screen .store-ob-table .so-select-checkbox{appearance:auto;width:19px;height:19px;min-width:19px;min-height:19px;accent-color:#2767a6;cursor:pointer;margin:0 auto;display:block}
.store-ob-screen .so-row-actions{display:flex;align-items:center;justify-content:center;gap:4px}
.store-ob-screen .so-row-actions .btn-icon{min-width:28px;width:28px;height:28px;padding:0}
.store-ob-screen .store-ob-table td:last-child{text-align:center}

/* User form: emphasize only the system administrator option. */
.perm-system-admin-label { font-weight: 900; }

/* Payment routing: compact year routing subheading */
.payment-routing-year-title { font-size: 0.92rem; margin-top: 18px; margin-bottom: 10px; }

/* Payment routing: all six columns fit the panel, including the edit action. */
.lookup .payment-routing-table-wrap { overflow-x: hidden; }
.lookup .payment-routing-accounts-table { width: 100%; max-width: 100%; min-width: 0; table-layout: fixed; }
.lookup .payment-routing-accounts-table :is(th, td) { box-sizing: border-box; min-width: 0; }
.lookup .payment-routing-accounts-table :is(th, td):nth-child(1) { width: 16%; }
.lookup .payment-routing-accounts-table :is(th, td):nth-child(2) { width: 8%; }
.lookup .payment-routing-accounts-table :is(th, td):nth-child(3) { width: 9%; }
.lookup .payment-routing-accounts-table :is(th, td):nth-child(4) { width: 13%; }
.lookup .payment-routing-accounts-table :is(th, td):nth-child(5) { width: 45%; text-align: right; overflow-wrap: break-word; white-space: normal; }
.lookup .payment-routing-accounts-table :is(th, td):nth-child(6) { width: 9%; text-align: center; white-space: nowrap; }
.lookup .payment-routing-accounts-table .row-actions { justify-content: center; }
.lookup .payment-routing-accounts-table .btn-icon { margin: 0; }

/* Sales and sales-return Index: shared compact table layout (no changes to journal lists). */
@media screen and (min-width: 1000px) {
    .sales-invoices-list .jv-filter { gap: 6px; }
    .sales-invoices-list .jv-filter .field { min-width: 0; flex: 1 1 95px; }
    .sales-invoices-list .jv-filter .field.compact-range { flex: 0.65 1 65px; }
    .sales-invoices-list .jv-filter .field.jv-search { flex: 1.4 1 130px; }
    .sales-invoices-list .jv-filter .field.jv-go { flex: 0 0 auto; }
}
.sales-invoices-list .jv-scroll { overflow-x: hidden; }
.sales-invoices-list .grid-table { width: 100%; min-width: 0; table-layout: fixed; }
.sales-invoices-list .grid-table :is(th, td) { box-sizing: border-box; min-width: 0; }
/* Columns: pick, invoice no, code, date, month, document type, customer, amount, posted. The customer column takes the rest. */
.sales-invoices-list .grid-table :is(th, td):nth-child(1) { width: 3%; }
.sales-invoices-list .grid-table :is(th, td):nth-child(2) { width: 11%; }
.sales-invoices-list .grid-table :is(th, td):nth-child(3) { width: 5%; }
.sales-invoices-list .grid-table :is(th, td):nth-child(4) { width: 10%; }
.sales-invoices-list .grid-table :is(th, td):nth-child(5) { width: 4%; }
.sales-invoices-list .grid-table :is(th, td):nth-child(6) { width: 9%; }
.sales-invoices-list .grid-table :is(th, td):nth-child(7) { white-space: normal; overflow-wrap: break-word; }
.sales-invoices-list .grid-table :is(th, td):nth-child(8) { width: 10%; white-space: nowrap; }
.sales-invoices-list .grid-table :is(th, td):nth-child(9) { width: 5%; }
.sales-invoices-list .grid-table tbody td:nth-child(7) { text-align: right; }

/* Sales draft only: no global or other invoice list styles changed. */
.sales-invoice-draft .sales-draft-scroll { overflow-x: auto; }
.sales-invoice-draft .sales-draft-scroll table { min-width: 1250px; }
.sales-invoice-draft .sales-draft-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 0; }
.sales-invoice-draft .sales-draft-summary b { font-variant-numeric: tabular-nums; }


/* ---- Column widths moved out of inline style (strict CSP) ---- */
.path-ltr { overflow-wrap: anywhere; text-align: left; }
.cheque-opening-table > colgroup > col:nth-child(1) { width: 11%; }
.cheque-opening-table > colgroup > col:nth-child(2) { width: 12%; }
.cheque-opening-table > colgroup > col:nth-child(4) { width: 14%; }
.cheque-opening-table > colgroup > col:nth-child(5) { width: 13%; }
.cheque-opening-table > colgroup > col:nth-child(6) { width: 112px; }
.cheque-opening-print-table { width: 100%; table-layout: fixed; }
.cheque-opening-print-table > colgroup > col:nth-child(1) { width: 16%; }
.cheque-opening-print-table > colgroup > col:nth-child(2) { width: 12%; }
.cheque-opening-print-table > colgroup > col:nth-child(3) { width: 57%; }
.cheque-opening-print-table > colgroup > col:nth-child(4) { width: 15%; }
.store-opening-grouped-table > colgroup > col:nth-child(1) { width: 9%; }
.store-opening-grouped-table > colgroup > col:nth-child(2) { width: 14%; }
.store-opening-grouped-table > colgroup > col:nth-child(3) { width: 10%; }
.store-opening-grouped-table > colgroup > col:nth-child(4) { width: 32%; }
.store-opening-grouped-table > colgroup > col:nth-child(5) { width: 8%; }
.store-opening-grouped-table > colgroup > col:nth-child(6) { width: 8%; }
.store-opening-grouped-table > colgroup > col:nth-child(7) { width: 9%; }
.store-opening-grouped-table > colgroup > col:nth-child(8) { width: 10%; }

/* ---- Sales invoice entry ---- */
.si-edit .si-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.si-edit .si-head > .field { flex: 1 1 140px; min-width: 0; }
.si-edit .si-radios { display: flex; gap: var(--space-4); align-items: center; }
.si-edit .si-head > .si-mode { flex: 0 0 auto; }
.si-edit .si-head .control { width: 100%; box-sizing: border-box; }
.si-edit .si-accounts { display: grid; gap: var(--space-3); }
.si-edit .si-acc-row { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: var(--space-3); align-items: end; }
.si-edit .si-name { background: transparent; }
.si-edit .si-wide { grid-column: 1 / -1; }
.si-edit .si-grid { table-layout: fixed; width: 100%; min-width: 1300px; }
.si-edit .si-grid th:nth-child(1) { width: 36px; }
.si-edit .si-grid th:nth-child(2) { width: 100px; }
.si-edit .si-grid th:nth-child(3) { width: 17%; }
.si-edit .si-grid th:nth-child(4) { width: 64px; }
.si-edit .si-grid th:nth-child(5) { width: 14%; }
.si-edit .si-grid th:nth-child(6) { width: 120px; }
.si-edit .si-grid th:nth-child(7) { width: 110px; }
.si-edit .si-grid th:nth-child(8), .si-edit .si-grid th:nth-child(9), .si-edit .si-grid th:nth-child(11), .si-edit .si-grid th:nth-child(13) { width: 96px; }
.si-edit .si-grid th:nth-child(10), .si-edit .si-grid th:nth-child(12) { width: 78px; }
.si-edit .si-grid th:nth-child(14) { width: 44px; }
.si-edit .si-grid td { min-width: 0; }
.si-edit .si-grid .control { min-width: 0; width: 100%; box-sizing: border-box; }
.si-edit .si-grid thead th.num, .si-edit .si-grid td .num { text-align: right; }
.si-edit .si-idx { text-align: center; }
.si-edit .si-taxprice[hidden], .si-edit .si-grid [hidden] { display: none; }
.si-edit .si-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
.si-edit .si-options { display: grid; gap: var(--space-2); align-content: start; }
.si-edit .si-totals { display: grid; gap: var(--space-2); min-width: 280px; }
.si-edit .si-total { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--border, #d1d5db); border-radius: var(--radius, 6px); }
.si-edit .si-grand { font-weight: 700; }
.si-edit .control, .si-edit select.control, .si-edit textarea.control { text-align: right; text-align-last: right; }
.si-edit .si-head-one { flex-wrap: nowrap; padding-bottom: 0; }
.si-edit .si-head-one > .field { flex: 1 1 0; min-width: 0; }
.si-edit .si-head > .si-sm { flex: 0 0 96px; }
/* compact: the lines of the invoice header and the grid are packed together */
.si-edit .si-head, .si-edit .si-accounts { gap: 6px var(--space-2); padding-top: 6px; padding-bottom: 6px; }
.si-edit .si-head-one { padding-bottom: 0; }
.si-edit .si-acc-row { gap: var(--space-2); }
.si-edit .si-head .field, .si-edit .si-accounts .field { margin: 0; gap: 2px; }
.si-edit .si-grid th, .si-edit .si-grid td { padding-top: 2px; padding-bottom: 2px; }
.si-edit .si-grid-wrap, .si-edit .jv-grid-wrap { margin-top: 14px; }
.si-edit .si-bottom { margin-top: var(--space-2); }
.si-edit .si-acc-row:has(> :nth-child(3)) { grid-template-columns: minmax(130px, 200px) 1fr minmax(200px, 280px); }
.si-edit .si-head-one { padding-top: 18px; }
/* the customer account, its name and the customer name on the invoice are lightly tinted */
.si-edit #Form_AccNo, .si-edit .si-name input[data-si-name="Form_AccNo"], .si-edit #Form_CustomerName { background: var(--soft); }
.si-edit .si-note { height: auto; min-height: var(--control-h); resize: vertical; line-height: 1.5; }
/* the items grid fits the width of the screen: no horizontal scroll bar */
.si-edit .jv-grid-wrap { overflow-x: hidden; }
.si-edit .si-grid { min-width: 0; width: 100%; table-layout: fixed; }
.si-edit .si-grid th:nth-child(1) { width: 3%; }
.si-edit .si-grid th:nth-child(2) { width: 8%; }
.si-edit .si-grid th:nth-child(3) { width: 14%; }
.si-edit .si-grid th:nth-child(4) { width: 5%; }
.si-edit .si-grid th:nth-child(5) { width: 12%; }
.si-edit .si-grid th:nth-child(6) { width: 9%; }
.si-edit .si-grid th:nth-child(7) { width: 8%; }
.si-edit .si-grid th:nth-child(8) { width: 6%; }
.si-edit .si-grid th:nth-child(9) { width: 7%; }
.si-edit .si-grid th:nth-child(10) { width: 5%; }
.si-edit .si-grid th:nth-child(11) { width: 6%; }
.si-edit .si-grid th:nth-child(12) { width: 6%; }
.si-edit .si-grid th:nth-child(13) { width: 8%; }
.si-edit .si-grid th:nth-child(14) { width: 3%; }
.si-edit .si-grid th, .si-edit .si-grid td { padding-left: 2px; padding-right: 2px; font-size: 12px; overflow: hidden; }
.si-edit .si-grid .control { padding-left: 4px; padding-right: 4px; font-size: 12px; text-overflow: ellipsis; }
.si-edit .si-grid .jv-del { padding: 0; min-width: 0; width: 100%; }
/* add-line button a little lower, the totals a little higher */
.si-edit .jv-addbar { margin-top: 12px; margin-bottom: 0; padding-bottom: 0; }
.si-edit .si-bottom { margin-top: -26px; }
/* totals higher, the three options (negative sale, prices with tax, exempt) lower */
.si-edit .si-bottom { margin-top: 0; }
.si-edit .si-totals { margin-top: -40px; }
.si-edit .si-options { margin-top: 24px; }
/* totals packed together; the foot buttons (New, Save, Delete, Exit) are wider */
.si-edit .si-totals { gap: 0; }
.si-edit .si-total { padding-top: 1px; padding-bottom: 1px; margin-top: -1px; }
.si-edit .panel-foot > .btn, .si-edit .panel-foot > form { flex: 0 0 170px; width: 170px; min-width: 170px; max-width: 170px; }

/* Sales invoice: item name and description accept several lines */
.si-edit .si-grid textarea.si-ta { height: auto; min-height: var(--control-h, 32px); resize: none; overflow: hidden; line-height: 1.4; padding-top: 4px; padding-bottom: 4px; }
/* item name and description in bold; grid closer to the note; the store column as narrow as possible */
.si-edit .si-grid textarea.si-ta { font-weight: 700; }
.si-edit .si-accounts { padding-bottom: 0; }
.si-edit .si-grid-wrap, .si-edit .jv-grid-wrap { margin-top: 0; }
.si-edit .si-grid th:nth-child(3) { width: 16%; }
.si-edit .si-grid th:nth-child(5) { width: 15%; }
.si-edit .si-grid th:nth-child(6) { width: 3%; }
.si-edit .si-grid td:nth-child(6) .control { padding-left: 0; padding-right: 0; text-overflow: clip; }
/* grid headers smaller and on one line; every cell is one line high */
.si-edit .si-grid thead th { font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-left: 1px; padding-right: 1px; }
.si-edit .si-grid td { white-space: nowrap; vertical-align: middle; }
.si-edit .si-grid .control { height: var(--control-h, 32px); white-space: nowrap; }
.si-edit .si-grid textarea.si-ta { white-space: pre-wrap; }
/* store column a little wider so the word fits */
.si-edit .si-grid th:nth-child(5) { width: 12%; }
.si-edit .si-grid th:nth-child(6) { width: 6%; }
.si-edit .si-grid td:nth-child(6) .control { padding-left: 2px; padding-right: 2px; }
/* every input of a grid row has the same height and sits on the same level */
.si-edit .si-grid .control { height: 34px; min-height: 34px; box-sizing: border-box; }
.si-edit .si-grid textarea.si-ta { min-height: 34px; box-sizing: border-box; display: block; }
.si-edit .si-grid td { vertical-align: top; }
/* each line: one main row; the description and the credit account sit in a collapsed second row */
.si-edit .si-grid th:nth-child(1) { width: 4%; }
.si-edit .si-grid th:nth-child(2) { width: 9%; }
.si-edit .si-grid th:nth-child(3) { width: 24%; }
.si-edit .si-grid th:nth-child(4) { width: 6%; }
.si-edit .si-grid th:nth-child(5) { width: 7%; }
.si-edit .si-grid th:nth-child(6) { width: 8%; }
.si-edit .si-grid th:nth-child(7) { width: 9%; }
.si-edit .si-grid th:nth-child(8) { width: 6%; }
.si-edit .si-grid th:nth-child(9) { width: 7%; }
.si-edit .si-grid th:nth-child(10) { width: 7%; }
.si-edit .si-grid th:nth-child(11) { width: 9%; }
.si-edit .si-grid th:nth-child(12) { width: 4%; }
.si-edit .si-grid th:nth-child(13), .si-edit .si-grid th:nth-child(14) { width: 0; padding: 0; }
.si-edit .si-grid tbody[data-si-row] > tr > td { vertical-align: middle; }
.si-edit .si-toggle { border: 0; background: transparent; cursor: pointer; padding: 0 2px; font-size: 12px; color: inherit; }
.si-edit .si-sub[hidden] { display: none; }
.si-edit .si-sub-box { display: flex; gap: var(--space-3); align-items: flex-start; padding: 2px 0 4px; }
.si-edit .si-sub-field { display: grid; gap: 2px; font-size: 11px; font-weight: 700; }
.si-edit .si-sub-desc { flex: 1 1 auto; }
.si-edit .si-sub-credit { flex: 0 0 200px; }
/* store moved to the second row: 11 columns in the main row */
.si-edit .si-grid th:nth-child(1) { width: 4%; }
.si-edit .si-grid th:nth-child(2) { width: 10%; }
.si-edit .si-grid th:nth-child(3) { width: 26%; }
.si-edit .si-grid th:nth-child(4) { width: 7%; }
.si-edit .si-grid th:nth-child(5) { width: 8%; }
.si-edit .si-grid th:nth-child(6) { width: 9%; }
.si-edit .si-grid th:nth-child(7) { width: 7%; }
.si-edit .si-grid th:nth-child(8) { width: 8%; }
.si-edit .si-grid th:nth-child(9) { width: 8%; }
.si-edit .si-grid th:nth-child(10) { width: 9%; }
.si-edit .si-grid th:nth-child(11) { width: 4%; }
.si-edit .si-grid th:nth-child(12) { width: 0; padding: 0; }
.si-edit .si-sub-store { flex: 0 0 220px; }
.si-edit .si-sub-store select { width: 100%; }
/* the store is entered in bold and has the room for its full name */
.si-edit .si-grid select.si-store { font-weight: 700; }
.si-edit .si-sub-store { flex: 0 0 320px; }
/* a column for the price with tax: 12 columns in the main row */
.si-edit .si-grid th:nth-child(1) { width: 3%; }
.si-edit .si-grid th:nth-child(2) { width: 9%; }
.si-edit .si-grid th:nth-child(3) { width: 31%; }
.si-edit .si-grid th:nth-child(4) { width: 7%; }
.si-edit .si-grid th:nth-child(5) { width: 6%; }
.si-edit .si-grid th:nth-child(6) { width: 7%; }
.si-edit .si-grid th:nth-child(7) { width: 8%; }
.si-edit .si-grid th:nth-child(8) { width: 4%; }
.si-edit .si-grid th:nth-child(9) { width: 6%; }
.si-edit .si-grid th:nth-child(10) { width: 5%; }
.si-edit .si-grid th:nth-child(11) { width: 8%; }
.si-edit .si-grid th:nth-child(12) { width: 4%; }
.si-edit .si-grid select.si-store { font-size: 11px; }
.si-edit .si-sub-cost { flex: 0 0 260px; }
.si-edit .si-sub-cost select { width: 100%; }
/* one font for every cell of the grid; item name and description in bold; narrower % and tax, wider item name */
.si-edit .si-grid .control, .si-edit .si-sub .control { font-family: var(--font); font-size: 12px; }
.si-edit .si-grid textarea.si-ta, .si-edit .si-sub textarea.si-ta { font-family: var(--font); font-weight: 700; }
.si-edit .si-grid th:nth-child(3) { width: 31%; }
.si-edit .si-grid th:nth-child(8) { width: 4%; }
.si-edit .si-grid th:nth-child(10) { width: 5%; }
/* the unit: smaller font, may take more than one line */
.si-edit .si-grid textarea.si-unit { font-size: 10.5px; }
/* the cheques of the invoice (below the totals) */
.si-edit .si-cheques[hidden] { display: none; }
.si-edit .si-cheques { margin-top: var(--space-3); }
.si-edit .si-cheques-title { font-size: 14px; margin: 0 0 4px; }
.si-edit .si-cheque-grid { table-layout: fixed; width: 100%; }
.si-edit .si-cheque-grid th:nth-child(1) { width: 4%; }
.si-edit .si-cheque-grid th:nth-child(2) { width: 22%; }
.si-edit .si-cheque-grid th:nth-child(3) { width: 18%; }
.si-edit .si-cheque-grid th:nth-child(4) { width: 34%; }
.si-edit .si-cheque-grid th:nth-child(5) { width: 16%; }
.si-edit .si-cheque-grid th:nth-child(6) { width: 6%; }
.si-edit .si-cheque-grid th, .si-edit .si-cheque-grid td { padding: 2px; font-size: 12px; }
.si-edit .si-cheque-grid .control { height: 34px; box-sizing: border-box; font-family: var(--font); font-size: 12px; }
.si-edit .si-cheque-grid thead th.num, .si-edit .si-cheque-grid td .num { text-align: right; }
.si-edit .si-cheques-foot { display: flex; gap: var(--space-3); align-items: center; margin-top: 6px; }
.si-edit .si-cheques-foot .si-total { min-width: 200px; }
/* the audit fields (who entered / who changed) are centred on the same line as the add-line button */
.si-edit .jv-addbar { display: flex; align-items: center; flex-wrap: nowrap; }
.si-edit .jv-addbar .jv-info { flex: 1 1 auto; justify-content: center; margin: 0; }
/* the audit fields in the exact middle of the screen; a smaller font for the cheques table */
.si-edit .jv-addbar { position: relative; min-height: 34px; }
.si-edit .jv-addbar .jv-info { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; margin: 0; white-space: nowrap; }
.si-edit .si-cheque-grid th, .si-edit .si-cheque-grid td { font-size: 11px; }
.si-edit .si-cheque-grid thead th { font-size: 10.5px; white-space: nowrap; }
.si-edit .si-cheque-grid .control { font-size: 11px; height: 30px; }
/* cheques table: narrow number, wide drawer name, narrow delete button; the totals at the far left */
.si-edit .si-cheque-grid th:nth-child(1) { width: 4%; }
.si-edit .si-cheque-grid th:nth-child(2) { width: 12%; }
.si-edit .si-cheque-grid th:nth-child(3) { width: 16%; }
.si-edit .si-cheque-grid th:nth-child(4) { width: 48%; }
.si-edit .si-cheque-grid th:nth-child(5) { width: 16%; }
.si-edit .si-cheque-grid th:nth-child(6) { width: 4%; }
.si-edit .si-cheque-grid .jv-del { padding: 0; min-width: 0; width: 100%; }
.si-edit .si-cheques-foot .si-total:first-of-type { margin-inline-start: auto; }
.si-edit .si-cheques { margin-top: 28px; }
/* sales invoice printing: the invoice form and the accounting entry (the journal print form) */
.si-print-invoice, .si-print-entry { display: none; }
@media print {
    body[data-si-printing="invoice"] .si-print-invoice, body[data-si-printing="entry"] .si-print-entry { display: block; }
    .si-print-invoice .jv-print { padding: 10mm; }
    .si-p-table th { font-size: 8pt; }
    .si-p-table .si-p-c-item { width: 12%; }
    .si-p-table .si-p-c-name { width: 30%; }
    .si-p-desc { font-size: 7pt; color: #444; }
    .si-p-totals { width: 45%; margin: 8px 0 0 auto; margin-inline-start: auto; margin-inline-end: 0; font-size: 8pt; }
    .si-p-totals > div { display: flex; justify-content: space-between; padding: 2px 6px; border: 1px solid #888; margin-top: -1px; }
    .si-p-totals .si-p-grand { background: #E2E2E2; font-weight: 800; }
    .si-p-note { margin-top: 8px; font-size: 8pt; }
}
/* invoices list: narrow footer buttons */
.sales-invoices-list .panel-foot .btn { min-width: 0; padding-inline: 14px; width: auto; }
.sales-invoices-list .jv-filter .field.field-wide { flex: 1.8 1 170px; }
.sales-invoices-list .group-row td:first-child { text-align: start; }
.sales-invoices-list .group-row .sec-name { font-size: 15px; margin-inline: 6px; }
.sales-invoices-list .group-row .jv-count { font-size: 14px; }
.sales-invoices-list .grid-table .num { text-align: center; }
/* invoices between two numbers: every invoice on its own page */
.jv-between .si-print-invoice { display: block; }
.si-between-item { break-after: page; page-break-after: always; }
.si-between-item:last-of-type { break-after: auto; page-break-after: auto; }
.jv-between .si-p-table .si-p-c-item { width: 12%; }
.jv-between .si-p-table .si-p-c-name { width: 30%; }
.jv-between .si-p-desc { font-size: 7pt; color: #444; }
.jv-between .si-p-totals { width: 45%; margin: 8px 0 0 auto; font-size: 8pt; }
.jv-between .si-p-totals > div { display: flex; justify-content: space-between; padding: 2px 6px; border: 1px solid #888; margin-top: -1px; }
.jv-between .si-p-totals .si-p-grand { background: #E2E2E2; font-weight: 800; }
.jv-between .si-p-note { margin-top: 8px; font-size: 8pt; }
/* invoice template settings screen */
.it-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.it-grid .it-wide { grid-column: 1 / -1; }
.it-preview { display: block; max-width: 100%; max-height: 140px; margin: 4px 0; border: 1px solid var(--field-line); }
/* invoice print: full-width pictures and free text of the company template */
.si-p-banner { display: block; width: 100%; height: auto; margin: 0 0 6px; }
.si-p-text { white-space: pre-line; text-align: center; font-size: 8pt; }
.si-p-note .si-p-text { text-align: start; }
.si-p-footer-text { margin-top: 10px; }
.jv-print .si-p-banner, .jv-between .si-p-banner { max-height: 120px; object-fit: contain; }
/* thermal receipt: its own named page so the other prints keep their size */
.si-thermal-bar { display: flex; gap: 6px; margin: 12px auto; }
.si-thermal-bar-80 { width: 72mm; }
.si-thermal-bar-58 { width: 48mm; }
.si-thermal-bar .btn { flex: 1; min-width: 0; }
.si-thermal { background: #fff; color: #000; margin: 0 auto 16px; padding: 6px; font-size: 11px; line-height: 1.35; font-weight: 700; border: 1px dashed var(--field-line); page: thermal80; }
.si-thermal-80 { width: 72mm; page: thermal80; }
.si-thermal-58 { width: 48mm; page: thermal58; font-size: 10px; }
.si-th-img { display: block; width: 100%; height: auto; margin: 4px 0; }
.si-th-company { text-align: center; font-size: 14px; font-weight: 800; }
.si-th-center { text-align: center; }
.si-th-text { white-space: pre-line; font-weight: 600; margin: 2px 0; }
.si-th-small { font-size: 9px; font-weight: 600; margin-top: 6px; }
.si-th-title { text-align: center; font-size: 13px; font-weight: 800; border-block: 1px solid #000; margin: 6px 0; padding: 2px 0; }
.si-th-row { display: flex; justify-content: space-between; gap: 6px; }
.si-th-sep { border-top: 1px dashed #000; margin: 5px 0; }
.si-th-item { margin-bottom: 4px; }
.si-th-name { overflow-wrap: anywhere; }
.si-th-grand { font-size: 13px; font-weight: 800; border-top: 1px solid #000; margin-top: 3px; padding-top: 3px; }
@page thermal80 { size: 80mm 200mm; margin: 2mm; } /* "auto" as the height is not understood by the browser (the page fell back to A4 and the printer shrank it); the exact height is set by site.js */
@page thermal58 { size: 58mm 200mm; margin: 1mm; }
@media print {
    .si-thermal-bar { display: none !important; }
    .si-thermal { border: 0; margin: 0; padding: 0; }
}
/* QR code of the invoice */
.si-p-qr { display: block; width: 28mm; height: 28mm; margin: 8px 0; }
.si-th-qr { display: block; width: 32mm; height: 32mm; margin: 6px auto; }
.si-thermal-58 .si-th-qr { width: 26mm; height: 26mm; }
/* Sales invoice print template (coral design): header, two rounded boxes, items table, signature + totals, footer */
.si-inv { --si-coral: #F2D7BF; --si-edge: #D9B48F; --si-pink: #FBEFE3; --si-line: #7A7A7A; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #000; font-size: 9pt; }
.si-inv .si-p-banner { max-height: 110px; object-fit: contain; }
.si-inv-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; margin-bottom: 8px; }
.si-inv-co { font-size: 9pt; line-height: 1.6; text-align: start; }
.si-inv-co strong { font-size: 10.5pt; }
.si-p-text-start { white-space: pre-line; }
.si-inv-badge { background: var(--si-coral); color: #000; border-radius: 12px; padding: 4px 26px; text-align: center; font-weight: 800; display: flex; flex-direction: column; line-height: 1.2; }
.si-inv-badge span:first-child { font-size: 15pt; }
.si-inv-badge span:last-child { font-size: 14pt; }
.si-inv-qr { display: flex; justify-content: flex-end; }
.si-inv-qr img { width: 24mm; height: 24mm; }
.si-inv-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.si-inv-box { border: 1.2px solid var(--si-edge); border-radius: 14px; padding: 8px 12px; min-height: 36mm; }
.si-inv-cust { display: flex; flex-direction: column; justify-content: space-between; font-size: 10pt; }
.si-inv-kind { font-size: 12pt; font-weight: 800; margin-bottom: 4px; }
.si-inv-big { display: flex; gap: 8px; font-size: 12pt; }
.si-inv-big strong { font-size: 13pt; }
.si-inv-small { display: flex; gap: 8px; font-size: 8.5pt; }
.si-inv-items { position: relative; border: 1.2px solid var(--si-line); border-radius: 12px 12px 0 0; overflow: hidden; min-height: 150mm;
    background:
        linear-gradient(var(--si-line), var(--si-line)) 5% 0 / 1px 100% no-repeat,
        linear-gradient(var(--si-line), var(--si-line)) 19% 0 / 1px 100% no-repeat,
        linear-gradient(var(--si-line), var(--si-line)) 57% 0 / 1px 100% no-repeat,
        linear-gradient(var(--si-line), var(--si-line)) 65% 0 / 1px 100% no-repeat,
        linear-gradient(var(--si-line), var(--si-line)) 74% 0 / 1px 100% no-repeat,
        linear-gradient(var(--si-line), var(--si-line)) 87% 0 / 1px 100% no-repeat; }
.si-inv-items table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.si-inv-items th { background: var(--si-coral); color: #000; font-weight: 700; font-size: 9pt; padding: 5px 3px; text-align: center; border-inline-start: 1px solid var(--si-edge); }
.si-inv-items th:first-child { border-inline-start: 0; }
.si-inv-items td { padding: 3px 4px; font-size: 8.5pt; vertical-align: top; }
.si-inv-items .si-c-no { width: 5%; text-align: center; }
.si-inv-items .si-c-code { width: 14%; text-align: center; }
.si-inv-items .si-c-desc { width: 38%; text-align: start; overflow-wrap: anywhere; }
.si-inv-items .si-c-qty { width: 8%; text-align: center; }
.si-inv-items .si-c-unit { width: 9%; text-align: center; }
.si-inv-items .si-c-price { width: 13%; text-align: center; }
.si-inv-items .si-c-total { width: 13%; text-align: center; }
.si-inv-bottom { display: flex; border: 1.2px solid var(--si-line); border-top: 1.2px solid var(--si-line); border-radius: 0 0 14px 14px; overflow: hidden; }
.si-inv-sign { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px; gap: 14px; }
.si-inv-line { display: flex; align-items: baseline; gap: 6px; font-size: 9pt; }
.si-inv-line i { flex: 1; border-bottom: 1px dotted #666; }
.si-inv-words { text-align: center; font-weight: 700; font-size: 10pt; border-top: 1px solid var(--si-line); padding-top: 6px; }
.si-inv-sums { width: 26%; border-inline-start: 1px solid var(--si-line); background: var(--si-pink); }
.si-inv-sums > div { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 9mm; border-bottom: 1px solid var(--si-line); font-size: 8.5pt; }
.si-inv-sums > div:last-child { border-bottom: 0; }
.si-inv-sums span { padding: 0 6px; border-inline-end: 1px solid var(--si-line); height: 100%; display: flex; align-items: center; }
.si-inv-sums strong { text-align: center; font-size: 9pt; }
.si-inv-foot { text-align: center; margin-top: 10px; font-size: 8.5pt; line-height: 1.6; }
.si-inv-foot .si-p-text { text-align: center; }
@media print { .si-inv .si-inv-items { min-height: 150mm; } }
.si-inv-meta { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
/* invoice head: company, the word invoice + branch, then one box with number/date, type/ids/rep and the customer */
.si-inv-head { position: relative; text-align: center; margin-bottom: 8px; }
.si-inv-company { font-size: 14pt; font-weight: 800; margin-bottom: 4px; }
.si-inv-head .si-inv-badge { display: inline-flex; margin-bottom: 4px; }
.si-inv-branch { font-size: 10pt; font-weight: 700; }
.si-inv-qr-img { position: absolute; top: 0; inset-inline-end: 0; width: 24mm; height: 24mm; }
.si-inv-info { display: flex; flex-direction: column; gap: 8px; min-height: 0; margin-bottom: 8px; }
.si-inv-row { display: flex; justify-content: space-between; gap: 12px; }
.si-inv-row-4 > div { flex: 1; font-size: 9pt; }
.si-inv-row-cust { font-size: 10.5pt; }
.si-inv-row-cust strong { font-size: 11pt; }

/* Sales-invoice documents-between: search button on the same line as the search field; small Print/Exit buttons. */
.jv-between-si .jvp-filter { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr) auto; }
.jv-between-si .jvp-filter .jv-go { width: auto; }
.jv-between-si .jvp-bar { width: 100%; }
.jv-between-si .jvp-bar > a.btn { margin-inline-start: auto; }
.jv-between-si .jvp-bar > .btn { flex: 0 0 auto; min-width: 90px; padding-inline: 18px; }

/* Invoice template texts (header, address, payment, bank, footer, notes) stay inside the form: long words wrap, line breaks are kept. */
.si-th-text, .si-p-text, .si-th-name, .si-th-row strong, .si-inv-note { max-width: 100%; box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.si-thermal { overflow: hidden; }
.si-inv-foot { overflow: hidden; }

/* Sales invoice: debit / customer / credit rows like the cheque vouchers (red side title on the right). */
.si-edit .si-side { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; column-gap: 10px; }
.si-edit .si-side-title { margin: 0; color: #b00000; font-size: 1.15rem; font-weight: 800; line-height: 1.35; text-align: right; }
.si-edit .si-side-row { display: grid; grid-template-columns: minmax(130px, 200px) 1fr minmax(200px, 280px); gap: var(--space-2); align-items: end; }
.si-edit .si-side-row .si-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .si-edit .si-side { grid-template-columns: 1fr; row-gap: 3px; } .si-edit .si-side-row { grid-template-columns: 1fr; } }

/* A thin horizontal line above the cheques section. */
.si-edit .si-cheques { border-top: 1px solid #1a2b4a; padding-top: 8px; }

.si-edit .si-side-row.si-note-row { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); }

/* Sales return: original invoice no., reason, original value and the previous-year option on one line. */
.si-edit .si-return { flex-wrap: nowrap; }
.si-edit .si-return > .field { flex: 1 1 0; }
.si-edit .si-return > .si-wide { flex: 3 1 0; }
.si-edit .si-return .checkbox { white-space: nowrap; }

/* ---- A4 sales invoice (form S_S001): bilingual, item table from right to left, the page is used to its full length ---- */
.si-ax { display: flex; flex-direction: column; min-height: 245mm; color: #000; font-size: 7.6pt; box-sizing: border-box; }
.jv-between .si-ax { min-height: 262mm; }
.si-ax .si-ax-ar, .si-ax .si-ax-en { display: block; line-height: 1.25; }
.si-ax .si-ax-en { font-size: 6.4pt; }
.si-ax-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; margin-bottom: 6px; }
.si-ax-company { font-size: 10.2pt; }
.si-ax-co { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.si-ax-title { text-align: center; font-weight: 800; }
.si-ax-title .si-ax-ar { font-size: 12.8pt; }
.si-ax-title .si-ax-en { font-size: 11pt; }
.si-ax-qr { display: flex; justify-content: flex-end; }
.si-ax-qr img { width: 24mm; height: 24mm; }
.si-ax-kv { display: flex; align-items: center; gap: 8px; }
.si-ax-kv > span { display: inline-block; text-align: start; }
.si-ax-strip { display: flex; justify-content: space-between; border-top: 1.2px solid #000; border-bottom: 1px solid #999; padding: 3px 6px; font-size: 8.1pt; margin-bottom: 6px; }
.si-ax-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 8.1pt; }
.si-ax-client { display: flex; align-items: center; gap: 10px; border-bottom: 1px dotted #000; padding-bottom: 2px; margin-bottom: 8px; font-size: 8.5pt; }
.si-ax-client strong { font-size: 8.9pt; }
.si-ax-items { flex: 1 1 auto; display: flex; border: 1px solid #000; min-height: 0; }
.si-ax-items table { flex: 1 1 auto; align-self: stretch; width: 100%; border-collapse: collapse; table-layout: fixed; }
.si-ax-items th { border: 1px solid #000; padding: 3px 2px; font-size: 7.2pt; font-weight: 700; text-align: center; vertical-align: middle; }
.si-ax-items td { border-inline: 1px solid #000; padding: 3px 4px; font-size: 7.2pt; vertical-align: top; overflow-wrap: anywhere; }
.si-ax-items .si-ax-ctr { text-align: center; }
.si-ax-items tr.si-ax-fill td { height: 100%; padding: 0; }
.si-ax-c-code { width: 12%; } .si-ax-c-name { width: auto; } .si-ax-c-unit { width: 9%; } .si-ax-c-qty { width: 8%; }
.si-ax-c-price { width: 11%; } .si-ax-c-ptax { width: 12%; } .si-ax-c-tax { width: 9%; } .si-ax-c-amount { width: 12%; }
/* the value column of the totals is as wide as the amount column of the item table, so their lines continue each other */
.si-ax:not(.wd-print) .si-ax-sums > div { grid-template-columns: 1fr 30%; }
.si-ax-bottom { display: flex; align-items: stretch; border: 1px solid #000; border-top: 0; }
.si-ax-sign { flex: 1; display: flex; flex-direction: column; justify-content: space-around; padding: 6px 10px; gap: 10px; }
.si-ax-sums { width: 46%; border-inline-start: 1px solid #000; }
.si-ax-sums > div { display: grid; grid-template-columns: 1fr 34%; align-items: stretch; border-bottom: 1px solid #000; min-height: 8mm; }
.si-ax-sums > div:last-child { border-bottom: 0; }
.si-ax-sums > div > span { padding: 1px 6px; display: flex; flex-direction: column; justify-content: center; border-inline-end: 1px solid #000; }
.si-ax-sums strong { display: flex; align-items: center; justify-content: center; font-size: 8.1pt; }
.si-ax-net strong { font-size: 8.9pt; }
.si-ax-words { border: 1px solid #000; border-top: 0; background: #EDEDED; padding: 5px 8px; font-weight: 700; font-size: 8.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.si-ax-foot { margin-top: 6px; font-size: 7.2pt; line-height: 1.6; overflow: hidden; }
.si-ax-note { display: flex; gap: 8px; align-items: flex-start; }
/* National no. and tax no. on one line at the far left. */
.si-ax-ids { display: flex; justify-content: flex-end; gap: 22px; margin-bottom: 4px; }
/* Company name across the full width and centered; branch under it; the title lower. */
.si-ax-head { display: block; }
.si-ax-head .si-ax-company { display: block; width: 100%; text-align: center; font-size: 12pt; }
.si-ax-branch, .si-ax-htext { text-align: center; font-size: 8.5pt; margin-top: 1px; }
.si-ax-titlerow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; margin-top: 10px; }
/* Smaller company name and title; national no. at the right, tax no. at the left. */
.si-ax-head .si-ax-company { font-size: 10pt; }
.si-ax-title .si-ax-ar { font-size: 10pt; }
.si-ax-title .si-ax-en { font-size: 8.5pt; }
.si-ax-ids { justify-content: space-between; }
/* The invoice table uses the full printable width (the page margins are enough). */
@media print { .si-print-invoice .jv-print.si-ax { padding: 0; min-height: 262mm; } }
/* Company logo at the top left of the invoice. */
.si-ax-head { position: relative; }
.si-ax-logo { position: absolute; top: 0; inset-inline-end: 0; max-width: 38mm; max-height: 20mm; object-fit: contain; }
/* The QR code sits in the middle of the totals row, between the signatures and the sums. */
.si-ax-qrbox { flex: 0 0 34mm; display: flex; align-items: center; justify-content: center; border-inline-start: 1px solid #000; padding: 2mm; }
.si-ax-qrbox img { width: 28mm; height: 28mm; }
.si-ax-sums { width: 40%; }
/* Notes at the right, payment details and bank account at the left, an empty band at the bottom for the address. */
.si-ax-two { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.si-ax-two .si-ax-note { flex: 1 1 50%; }
.si-ax-pay { flex: 1 1 40%; text-align: end; }
.si-ax-addr { min-height: 22mm; margin-top: 6px; text-align: center; }
.si-ax-addr .si-p-text { text-align: center; }
/* Open / fold all the folded rows of the item table. */
.si-edit .si-tools { display: flex; margin-bottom: 4px; }
.si-edit .si-tools .btn { min-width: 200px; padding-inline: 24px; }
/* Print form: the English label is centered under the Arabic one. */
.si-ax .si-ax-ar, .si-ax .si-ax-en { text-align: center; }
.si-ax .si-ax-kv > span { text-align: center; }
.si-ax-sums > div > span { align-items: center; text-align: center; }
.si-ax-note > strong { text-align: center; }

/* Thermal receipt: Arabic label with the English one centered under it. */
.si-th-lbl, .si-th-title { text-align: center; }
.si-th-ar, .si-th-en { display: block; line-height: 1.2; text-align: center; }
.si-th-en { font-size: 8px; font-weight: 600; }
.si-th-title .si-th-en { font-size: 10px; }
.si-th-lbl { flex: 0 0 auto; }
/* Thermal receipt: smaller type. */
.si-thermal { font-size: 9.5px; }
.si-thermal-58 { font-size: 8.5px; }
.si-th-company { font-size: 12px; }
.si-th-title { font-size: 11px; }
.si-th-grand { font-size: 11px; }
.si-th-small { font-size: 8px; }
.si-th-en { font-size: 7px; }
.si-th-title .si-th-en { font-size: 8.5px; }
.it-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.it-word { border-top: 1px solid var(--field-line); }
.it-inline { display: flex; gap: 6px; align-items: center; }
/* Invoice template screen: bold fields, multi-line boxes, tidy cards. */
.it-page .it-grid .field { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 8px; background: #fff; }
.it-page .it-grid .field > label:not(.checkbox) { font-weight: 800; }
.it-page .control, .it-page select.control { font-weight: 700; }
.it-page textarea.control { min-height: 96px; line-height: 1.5; resize: vertical; white-space: pre-wrap; }
.it-page .it-preview { max-width: 100%; max-height: 120px; object-fit: contain; align-self: flex-start; }
.it-page .checkbox { font-weight: 700; }
.it-word { padding: 14px 16px; }
.it-word h2 { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.it-checks .btn, .it-inline .btn { white-space: nowrap; }

.si-edit .si-totals--left { margin-right: auto; margin-left: 0; }

/* Invoices between two numbers: the generic between rules (block, 8pt, padding) must not break the full-height A4 invoice. */
.jv-between .jv-print.si-ax { display: flex; flex-direction: column; font-size: 7.6pt; padding: 0; border: 0; margin: 0; min-height: 262mm; }
.jv-between .si-between-item { margin-bottom: 12px; }
@media print { .jv-between .si-between-item { margin: 0; } }

/* Print form: smaller recipient name / signature, a wider QR cell so the dotted lines run through. */
.si-ax-sign .si-inv-line { font-size: 6.6pt; gap: 4px; }
.si-ax-sign { padding: 6px 8px; }
.si-ax .si-ax-qrbox { flex: 0 0 52mm; }

/* Print form: the page content is moved inward (side margins). */
.si-ax { box-sizing: border-box; }
/* One width for every invoice print form (from the document and between two numbers): a little wider than the page margins (4mm each side). */

/* One named page for BOTH prints (from the document, and between two numbers): small margins, the same width and height. */
@page siinvoice { size: A4 portrait; margin: 8mm 6mm 12mm; @bottom-center { content: "Page No. " counter(page) " - " counter(pages); font-size: 8pt; font-weight: 700; } }
@media print {
    .si-print-invoice, .jv-between { page: siinvoice; padding: 0; margin: 0; max-width: none; }
    .si-print-invoice .jv-print.si-ax, .jv-between .jv-print.si-ax { width: 100%; max-width: none; margin: 0; padding: 0; box-sizing: border-box; min-height: 270mm; }
}

/* Invoices between two numbers: the preview is moved inward too (same side margins as the print). */
@media screen { .jv-between .jv-print.si-ax { padding: 0 9mm; } }
.jv-between .si-between-item { padding: 6mm 0; background: #fff; }
@media print { .jv-between .si-between-item { padding: 0; } }

/* The vertical line at the recipient cell lines up with the column line of the item table above it (the unit | name border = 61% of the width: sums 40% + QR cell 21%). */
.si-ax .si-ax-qrbox { flex: 0 0 21%; box-sizing: border-box; }

/* Warehouse documents: a balance that is not enough is shown in red. */
.si-edit .control.is-bad { color: #b00020; font-weight: 700; }

/* Warehouse documents: the reference is wider and the statement is the widest field of the header. */
/* The same widths on the three screens: fixed fields, a reference of fixed width, and the statement takes all the rest. */
.si-edit .si-head-one[data-wd-head] > .field { flex: 0 0 150px; }
.si-edit .si-head-one[data-wd-head] > .wd-ref { flex: 0 0 260px; }
.si-edit .si-head-one[data-wd-head] > .wd-note { flex: 1 1 0; min-width: 260px; }
/* The transfer voucher: the two warehouse fields are wide enough for "number - name". */
.si-edit .si-head-one[data-wd-head] > .wd-store { flex: 3 1 0; min-width: 300px; }

/* The list of the warehouse documents: its own layout (it does not use the invoice lists rules), fixed columns, the statement takes the rest. */
.wd-list-page .jv-filter { gap: 8px; }
.wd-list-page .jv-filter .field { min-width: 0; flex: 0 0 170px; }
.wd-list-page .jv-filter .field.jv-search { flex: 1 1 260px; }
.wd-list-page .jv-filter .field.jv-go { flex: 0 0 auto; }
.wd-list-page .jv-scroll { overflow-x: hidden; }
.wd-list-page .panel-foot .btn { min-width: 0; padding-inline: 14px; width: auto; }
.wd-list { table-layout: fixed; width: 100%; min-width: 0; }
.wd-list :is(th, td) { box-sizing: border-box; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.wd-list .wd-c-pick { width: 44px; }
.wd-list .wd-c-no { width: 120px; }
.wd-list .wd-c-date { width: 120px; }
.wd-list .wd-c-store { width: 200px; }
.wd-list .wd-c-ref { width: 200px; }
.wd-list .wd-c-value { width: 150px; }
.wd-list .wd-c-qty { width: 90px; }
.wd-list .wd-c-note { width: 220px; }
.wd-list td.num, .wd-list th.num { text-align: center; }

/* The lines of the warehouse documents: its own columns (the invoice grid rules are made for the invoice columns). */
.si-edit .wd-grid { table-layout: fixed; width: 100%; min-width: 0; }
.si-edit .wd-grid .wd-g-idx { width: 44px; }
.si-edit .wd-grid .wd-g-item { width: 150px; }
.si-edit .wd-grid .wd-g-unit { width: 170px; }
.si-edit .wd-grid .wd-g-num { width: 130px; }
.si-edit .wd-grid .wd-g-del { width: 50px; }
.si-edit .wd-grid :is(th, td) { box-sizing: border-box; min-width: 0; padding: 2px 4px; overflow: hidden; vertical-align: middle; white-space: nowrap; }
.si-edit .wd-grid thead th { font-size: 12px; text-overflow: ellipsis; }
.si-edit .wd-grid thead th.num { text-align: right; }
.si-edit .wd-grid .control { width: 100%; min-width: 0; box-sizing: border-box; height: 34px; min-height: 34px; padding-left: 6px; padding-right: 6px; font-size: 12px; text-overflow: ellipsis; }
.si-edit .wd-grid textarea.si-ta { display: block; height: 34px; min-height: 34px; resize: none; overflow: hidden; white-space: pre-wrap; line-height: 1.4; font-weight: 700; padding-top: 6px; padding-bottom: 4px; }
.si-edit .wd-grid .jv-del { padding: 0; min-width: 0; width: 100%; }
.si-edit .wd-grid .control.is-bad { color: #b00020; font-weight: 700; }
.si-edit .wd-grid .wd-total-row td { font-weight: 700; padding-top: 6px; }
.si-edit .wd-grid .wd-total-label { text-align: end; }
.si-edit .wd-grid .wd-total-row td.num { text-align: right; font-size: 14px; }
.si-edit .wd-note-row { padding-top: 6px; padding-bottom: 0; }
.si-edit .wd-note-row > .wd-note { flex: 1 1 100%; }
.si-edit .si-head-one[data-wd-head] > .wd-ref { flex: 1 1 0; min-width: 260px; }
/* The warehouse documents use the font of the program everywhere (inputs, text areas, tables and buttons). */
.si-edit .wd-grid, .si-edit .wd-grid .control, .si-edit .wd-grid textarea.si-ta, .si-edit [data-wd-form] .control,
.si-edit .wd-note-row .control, .wd-list-page .control, .wd-list, .wd-list-page .btn { font-family: var(--font); }
.wd-list tfoot .wd-sum-label { text-align: end; font-weight: 700; }
.wd-list tfoot td.num { text-align: center; font-weight: 700; }

/* Print form of the warehouse documents: the two warehouses of a transfer, one box each, and the total over the full width. */
.wd-print .si-ax-sums { width: 100%; border-inline-start: 0; }
/* The total: the label next to the number, the number under the amount column (the vertical line continues the column line above). */
.wd-print .si-ax-sums > div { grid-template-columns: 1fr 12%; }
.wd-print .si-ax-sums > div > span { align-items: flex-end; text-align: end; padding-inline: 10px; }
.wd-print .wd-stores { width: 100%; border-collapse: collapse; margin-bottom: 6px; font-size: 8.5pt; }
.wd-print .wd-stores td { border: 1px solid #000; padding: 3px 6px; }
.wd-print .wd-stores .wd-st-label { width: 24%; }
.wd-print .wd-stores .wd-st-no { width: 18%; }
.si-edit .wd-addrow { display: flex; justify-content: flex-start; margin-top: 6px; }
.si-edit .wd-grid td { vertical-align: top; }
.si-edit .wd-grid textarea.si-ta { overflow-wrap: anywhere; }
/* Warehouse document print: one page (the page number takes the bottom margin, so the form is a little shorter). */
@media print {
    .si-print-invoice .jv-print.si-ax.wd-print, .jv-between .jv-print.si-ax.wd-print { min-height: 258mm; }
    .si-print-invoice:has(.wd-print) { break-after: avoid; page-break-after: avoid; }
}
.wd-list-transfer .wd-c-store { width: 280px; }
.wd-list td.wd-wrap { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4; }
.wd-print .wd-stores .wd-st-no, .wd-print .wd-stores td:nth-child(2) { text-align: center; }
.fc-table .fc-l1 td { font-weight: 800; background: #e4ecf6; }
.fc-table .fc-l2 td { font-weight: 700; background: #f2f6fb; }
.fc-table .fc-l2 .fc-name { padding-inline-start: 24px; }
.fc-table .fc-l3 .fc-name { padding-inline-start: 48px; }

/* Financial classification: the tool that links many accounts at once. */
.fc-link { margin-top: 12px; }
.fc-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.fc-filter .field { min-width: 120px; }
.fc-filter-q { flex: 1 1 200px; }
.fc-filter-btns { display: flex; gap: 6px; }
.fc-link-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
.fc-link-class { flex: 1 1 520px; }
.fc-link-list { max-height: 75vh; min-height: 420px; }
.fc-check { width: 36px; }
.fc-link-bar .field, .fc-filter .field { margin-bottom: 0; }
.fc-link-bar .badge { align-self: flex-end; height: var(--control-h); display: inline-flex; align-items: center; }
.fc-accno { text-align: right; }
.fc-dot { display: inline-block; width: 9px; height: 9px; margin-inline-end: 6px; border-radius: 50%; background: #d32f2f; vertical-align: middle; }
.fc-num { text-align: right; }
.fc-filter-s { min-width: 200px; }
.fc-link .grid-table.is-ruled .fc-accno { text-align: right; }
.fc-link .control.fc-num { text-align: right; }
.fc-link .grid-table .fc-cur { width: 38%; }
.fc-link .grid-table .fc-accno { width: 130px; }

/* Account statement */
.st-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.st-filter .field { margin-bottom: 0; min-width: 130px; }
.st-account { flex: 1 1 220px; }
.st-filter-btns { display: flex; gap: 6px; }
.st-title { font-weight: 800; margin: 6px 0 8px; }
.st-period { color: var(--muted); font-weight: 700; margin-inline-start: 12px; }
.st-list { max-height: 68vh; min-height: 300px; overflow-x: hidden; }
.st-table { width: 100%; }
.st-table td:not(.num):not(.st-side) { white-space: normal; overflow-wrap: anywhere; }
.st-foot { display: flex; gap: 8px; }
.st-foot .btn, .st-foot .btn.foot-end { flex: 0 0 120px; min-width: 0; text-align: center; }
.st-foot .btn.foot-end { margin-inline-start: auto; }
.st-foot { position: relative; }
.st-foot .st-daily { display: flex; align-items: center; gap: 8px; margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pano-native-shell .st-foot .st-daily { position: static; transform: none; }
.st-foot .st-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #c62828; white-space: nowrap; cursor: pointer; }
.st-table .st-side { width: 52px; text-align: center; white-space: nowrap; }
.st-table .st-sum td, .st-print-table .st-sum td { font-weight: 800; background: #eef3f9; }
.st-table td.num, .st-table th.num { white-space: nowrap; }
.st-list .st-table td:not(.num):not(.st-side):not(.col-actions) { text-align: left; }
html[dir="rtl"] .st-list .st-table td:not(.st-side):not(.col-actions), html[dir="rtl"] .st-list .st-table th:not(.st-side):not(.col-actions) { text-align: right; }
.st-table td.st-kind { font-size: 11px; }
.st-list .st-table { table-layout: fixed; }
.st-list { margin-inline: 0; }
.st-table th.st-no { width: 9%; font-size: 11px; white-space: nowrap; }
.st-table th.st-date { width: 9%; }
.st-table th.st-kind { width: 9%; }
.st-table th.st-cost { width: 6%; }
.st-table th.st-amt { width: 10%; }
.st-table th.st-side { width: 4%; }
.st-list .st-table.is-ruled th.col-actions, .st-list .st-table.is-ruled td.col-actions { width: 3%; white-space: normal; overflow: visible; }
.st-list .st-table td.col-actions, .st-list .st-table td.st-side { padding-inline: 2px; text-align: center; }
.st-list .st-table td { padding-block: 2px; line-height: 1.2; }
.st-list .st-table th { padding-block: 4px; }
.st-list .st-table .btn-icon { width: 22px; height: 22px; font-size: 12px; }
.st-print-table th.st-amt { width: 85px; }
.st-print-table th.st-no { width: 70px; }
.st-print-table th.st-kind { width: 100px; }
.st-print-table td.st-kind { font-size: 9px; }
.st-print-table th { font-size: 9.5px; }
html[dir="rtl"] .st-print-table th, html[dir="rtl"] .st-print-table td { text-align: right; }
.st-print .chart-print-heading h1 { font-size: 14px; }
.st-print .chart-print-title h2 { font-size: 13px; }
html[dir="rtl"] .st-filter input.control { text-align: right; }
html[dir="rtl"] .st-filter input[type="date"] { direction: rtl; }
.st-many { margin-top: 0; }
.st-many-title { flex: 1 0 100%; font-weight: 800; }
.st-group { flex: 1 1 480px; min-width: 320px; }
.st-group select.control, .st-group select.control option { font-weight: 800; }
.st-print-item { break-after: page; page-break-after: always; }
.st-print-item:last-of-type { break-after: auto; page-break-after: auto; }
@media print { .st-print-filter { display: none !important; } }
.st-print-sub { margin-top: 6px; font-weight: 800; }
.st-print-table { width: 100%; border-collapse: collapse; }
.st-print-table th, .st-print-table td { border: 1px solid #333; padding: 2.5px 5px; font-size: 10.5px; line-height: 1.35; }
.st-print-table th { background: #eee; font-weight: 800; text-align: center; }
.st-print-table td.num { text-align: left; direction: ltr; white-space: nowrap; }

/* Trial balance (shares the statement look) */
.tb-table th, .tb-print-table th { text-align: center; }
.tb-table th.tb-no, .tb-print-table th.tb-no { width: 8%; }
.tb-table th.tb-amt, .tb-print-table th.tb-amt { width: 10%; }
html[dir="rtl"] .tb-table td:not(.num), html[dir="rtl"] .tb-print-table td:not(.num) { text-align: right; }
.tb-table td.num, .tb-print-table td.num { text-align: left; direction: ltr; white-space: nowrap; }
.tb-print-table td, .tb-print-table th { font-size: 8px; }
.st-table tfoot .st-sum td, .st-print-table tfoot .st-sum td { padding-block: 9px; }
.tb-filter .field { flex: 1 1 160px; }
.tb-filter .control { width: 100%; }
.tb-table th { font-size: 11px; }
.tb-print-table th { font-size: 7px; }
.tb-table th.tb-no, .tb-print-table th.tb-no { width: 7%; }
.tb-table th.tb-amt, .tb-print-table th.tb-amt { width: 9%; }
.tb-table col.tb-col-no, .tb-print-table col.tb-col-no { width: 8%; }
.tb-table col.tb-col-amt, .tb-print-table col.tb-col-amt { width: 9%; }
.tb-print-table { table-layout: fixed; }
.tb-table tbody td, .tb-print-table tbody td { padding-block: 5px; }
.tb-table col.tb-col-act { width: 4%; }
.tb-table th.col-actions, .tb-table td.col-actions { text-align: center; }
@media print { .tb-print-table .col-actions, .tb-print-table col.tb-col-act { display: none; } }
.tb-table tbody td, .tb-print-table tbody td { padding-block: 8px; }
.tb-table tbody td, .tb-table tfoot td { height: 34px; padding-block: 0; vertical-align: middle; }
.tb-table td .btn-icon { height: 24px; min-height: 0; padding-block: 0; line-height: 1; }
.tb-print-table tbody td, .tb-print-table tfoot td { height: 24px; padding-block: 0; vertical-align: middle; }
.tb-print-table col.tb-col-no { width: 9%; }
.tb-print-table col.tb-col-amt { width: 10.5%; }
.tb-print-table td, .tb-print-table th { padding-inline: 3px; }
.tb-print-table td.num { font-size: 7.5px; overflow: hidden; }
.st-list .tb-table td.col-actions { text-align: center; padding-inline: 0; }
.st-list .tb-table td.col-actions .btn-icon { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; vertical-align: middle; }
.st-list .tb-table td.col-actions .btn-icon { display: flex; margin-inline: auto; float: none; }
.st-list.tb-list { max-height: 82vh; min-height: 480px; }

/* Financial statements */
.fs-block { margin-bottom: 18px; }
.fs-title { font-size: 1rem; font-weight: 800; margin: 8px 0; padding-bottom: 4px; border-bottom: 2px solid #333; }
.fs-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid #d6dde6; }
.fs-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fs-amt { flex: 0 0 150px; text-align: left; direction: ltr; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs-no { flex: 0 0 90px; text-align: right; }
.fs-l1 { font-weight: 800; background: #dfe8f3; }
.fs-l2 { font-weight: 800; background: #eef3f9; padding-inline-start: 22px; }
.fs-l3 { font-weight: 700; cursor: pointer; padding-inline-start: 40px; list-style: none; }
.fs-line > summary::-webkit-details-marker { display: none; }
.fs-line > summary::before { content: "+"; font-weight: 800; width: 14px; }
.fs-line[open] > summary::before { content: "−"; }
.fs-acc { font-size: .9em; padding-inline-start: 70px; background: #fafcfe; }
.fs-total { font-weight: 800; background: #e3ecf6; border-top: 2px solid #333; }
.fs-warn .fs-title { color: #b3261e; }
.fs-hint { color: var(--muted); padding: 2px 8px 6px; }
.fs-print .fs-row { padding: 2px 6px; font-size: 9px; border-color: #999; }
.fs-print .fs-title { font-size: 11px; }
.fs-print .fs-amt { flex-basis: 110px; }
html[dir="rtl"] .fs-name { text-align: right; }
.fs-block > summary.fs-title { cursor: pointer; list-style: none; }
.fs-block > summary.fs-title::-webkit-details-marker { display: none; }
.fs-block > summary.fs-title::before { content: "+"; display: inline-block; width: 18px; font-weight: 800; }
.fs-block[open] > summary.fs-title::before { content: "−"; }
.fs-title { font-size: 1.1rem; }
.fs-l3 { padding-inline-start: 40px; }
.fs-list { max-width: 900px; margin-inline: auto; }
.fs-print { max-width: 900px; margin-inline: auto; }
.fs-note-total { font-weight: 800; background: #eef3f9; border-top: 1px solid #333; padding-inline-start: 70px; }
.fs-notes-title { margin-top: 22px; }
.fs-note { border: 1px solid #b9c6d6; border-radius: 6px; margin-bottom: 10px; }
.fs-note > summary.fs-note-title { margin: 0; padding: 8px 10px; font-size: 1rem; border-bottom: 0; background: #eef3f9; }
.fs-note[open] > summary.fs-note-title { border-bottom: 1px solid #b9c6d6; }
.fs-note .fs-acc { padding-inline-start: 22px; }
.fs-note .fs-note-total { padding-inline-start: 22px; }
.fs-tabs { display: flex; gap: 8px; margin: 6px 0 10px; }
.fs-tab { flex: 0 0 170px; text-align: center; }
.fs-tab.is-active { background: var(--primary, #1f5f99); color: #fff; font-weight: 800; }
.st-list.fs-list { max-height: none; overflow: visible; min-height: 0; }
.fs-note-title { display: flex; align-items: center; gap: 8px; }
.fs-note-title .fs-name { flex: 1 1 auto; }
.fs-note-print { flex: 0 0 auto; }
.fs-tab { flex: 0 0 260px; }
.fs-print .fs-row { padding-block: 5px; }
.fs-tabs { justify-content: center; }
.fs-ratio .fs-formula { flex: 0 1 45%; color: var(--muted); font-size: .85em; }
.fs-tab { flex: 0 0 200px; }

/* Other documents: choose the document type */
.od-pick .grid-table th:nth-child(1), .od-pick .grid-table td:nth-child(1) { width: 90px; }
.od-pick .panel-foot .foot-end { min-width: 160px; justify-content: center; }

/* Price quote / purchase order: the invoice screen without the accounting fields */
.si-nopost { display: none !important; }

/* Lists without invoice sections (purchases, quotes, orders): 8 columns */
.sales-invoices-list.sil-flat .grid-table :is(th, td):nth-child(1) { width: 4%; }
.sales-invoices-list.sil-flat .grid-table :is(th, td):nth-child(2) { width: 6%; white-space: nowrap; }
.sales-invoices-list.sil-flat .grid-table :is(th, td):nth-child(3) { width: 9%; white-space: nowrap; }
.sales-invoices-list.sil-flat .grid-table :is(th, td):nth-child(4) { width: 5%; }
.sales-invoices-list.sil-flat .grid-table :is(th, td):nth-child(5) { width: 9%; white-space: nowrap; }
.sales-invoices-list.sil-flat .grid-table :is(th, td):nth-child(6) { width: auto; white-space: normal; overflow-wrap: break-word; }
.sales-invoices-list.sil-flat .grid-table :is(th, td):nth-child(7) { width: 13%; white-space: nowrap; }
.sales-invoices-list.sil-maint.sil-flat .grid-table :is(th, td):nth-child(7) { width: 8%; }
.sales-invoices-list.sil-maint .grid-table thead th.num { text-align: right; }
.sales-invoices-list.sil-maint.sil-flat .grid-table :is(th, td):nth-child(9) { width: 10%; white-space: nowrap; }
.sales-invoices-list.sil-flat .grid-table :is(th, td):nth-child(8) { width: 8%; white-space: nowrap; }
.sales-invoices-list.sil-flat .grid-table tbody td:nth-child(6) { text-align: start; }

/* Quote / order converted to an invoice: red dot */
.conv-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #D32F2F; vertical-align: middle; }
.conv-badge { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* Invoice note: the same font as the other fields */
.si-edit textarea.control { font: inherit; }

/* Quote / order print: no QR, so no line beside it */
.si-ax .si-ax-qrbox.si-ax-noqr { border: 0; }

/* Documents balance / search for an amount */
.st-table col.cw-4 { width: 4%; }
.st-table col.cw-8 { width: 8%; }
.st-table col.cw-9 { width: 9%; }
.st-table col.cw-10 { width: 10%; }
.st-table col.cw-11 { width: 11%; }
.st-table col.cw-18 { width: 18%; }
.db-ok { color: #1A7F37; font-weight: 800; }
.db-bad { color: #B42318; font-weight: 800; }

/* Search for an amount: the filter fields share the whole width */
.st-filter-wide .field { flex: 1 1 140px; }
.st-filter-wide .field .control { width: 100%; }
.st-filter-wide .st-filter-btns { flex: 0 0 auto; }

/* Stock reports: the option check boxes sit in one row under the filter */
.st-chk-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; flex: 1 1 100%; }
.st-chk { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.st-filter .st-chk { font-weight: 800; }

/* Stock reports: wider warehouse and item name columns, slightly taller rows */
.panel .grid-table.inv-table td { padding-block: 12px; }
.inv-table .inv-store { width: 20%; }
.inv-table .inv-name { width: 34%; }
.st-chk-row { flex: 1 1 100%; }
.st-filter-wide .st-filter-btns { margin-inline-start: auto; flex: 0 0 auto; }

/* Stock reports: the search box and the Show button share one line (the box takes what is left, the button sits at the far end) */
.st-search-row { display: flex; align-items: flex-end; gap: 8px; flex: 2 1 280px; }
.st-search-row .field { flex: 1 1 auto; }
.st-search-row .st-filter-btns { flex: 0 0 auto; margin-inline-start: 0; }

/* Item movements: the details of an item sit in a nested table under its summary row */
.panel .grid-table.inv-table td.im-detail-cell { padding: 6px 14px 14px; background: #f7fafd; }
.im-detail { width: 100%; }
.panel .grid-table.im-detail td { padding-block: 7px; }

/* Stock reports: the warehouse name box is wider than the other filter boxes */
.st-filter-wide .field.field-store { flex: 3 1 260px; }
.inv-store-row td { background: #eef3f9; font-weight: 800; color: var(--navy-text); }
.im-detail { table-layout: fixed; }
.im-detail col.im-c-date { width: 9.5%; }
.im-detail col.im-c-type { width: 11%; }
.im-detail col.im-c-no { width: 8%; }
.im-detail col.im-c-store { width: 13%; }
.im-detail col.im-c-qty { width: 8%; }
.im-detail col.im-c-act { width: 4%; }
.im-detail td { overflow-wrap: anywhere; }

/* Item movements print sheet: the statement column takes what the fixed columns leave */
.im-print { table-layout: fixed; }
.im-print col.imp-date { width: 9.5%; }
.im-print col.imp-type { width: 10%; }
.im-print col.imp-no { width: 10.5%; }
.im-print col.imp-store { width: 10%; }
.im-print col.imp-qty { width: 7%; }
.im-print td { overflow-wrap: anywhere; }
.im-detail col.im-c-bal { width: 10.5%; }
.im-print col.imp-bal { width: 9.5%; }
.im-detail td:nth-child(4) { font-size: 11px; }
.panel .im-detail td:nth-child(2) { font-size: 10px; }
.im-print td:nth-child(4) { font-size: 7px; }
.st-print .im-head h1 { font-size: 11px; }
.st-print .im-head .chart-print-title h2 { font-size: 10px; }
.st-print .im-head .chart-print-title strong { font-size: 10px; }
.st-print .im-head .st-print-sub { font-size: 10px; margin-top: 4px; }
.st-print .im-head .im-sub { font-weight: 600; }

/* Item movements print sheet (the Access "Item Statement" form): landscape, header boxes, one table, summary box */
.imx-sheet { color: #000; }
@page imx { size: A4 landscape; margin: 10mm; }
@media print { .imx-sheet { page: imx; max-width: none; } }
@media screen { .chart-print-report.imx-sheet { max-width: 277mm; } }
.imx-item { break-after: page; page-break-after: always; margin-bottom: 14px; }
.imx-item:last-of-type { break-after: auto; page-break-after: auto; }
.imx-title { font-size: 15px; margin: 0 0 8px; }
.imx-info { display: flex; gap: 14px; margin-bottom: 8px; }
.imx-box { display: flex; align-items: stretch; border: 1px solid #333; font-size: 11px; }
.imx-store { flex: 1 1 auto; }
.imx-itembox { margin-bottom: 10px; }
.imx-lbl { padding: 4px 10px; font-weight: 700; background: #eee; display: flex; align-items: center; min-width: 90px; }
.imx-val { padding: 4px 10px; display: flex; align-items: center; }
.imx-no { border-inline: 1px solid #333; min-width: 70px; justify-content: center; }
.imx-name { flex: 1 1 auto; }
.imx-dates { flex-direction: column; min-width: 240px; }
.imx-dates > div { display: flex; flex: 1 1 auto; }
.imx-dates > div + div { border-top: 1px solid #333; }
.imx-dates .imx-val { flex: 1 1 auto; justify-content: center; }
.imx-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px; }
.imx-table th, .imx-table td { border: 1px solid #333; padding: 4px 6px; }
.imx-table th { background: #eee; font-weight: 800; text-align: center; }
.imx-table .imx-groups th { background: #fff; border: 0; font-size: 11px; padding: 6px 4px; }
.imx-table td { text-align: right; }
.imx-table td.num { text-align: right; direction: ltr; white-space: nowrap; }
.imx-table col.imx-w-no { width: 7%; }
.imx-table col.imx-w-desc { width: 12%; }
.imx-table col.imx-w-date { width: 8%; }
.imx-table col.imx-w-note { width: 17%; }
.imx-table col.imx-w-q { width: 7%; }
.imx-table col.imx-w-p { width: 8%; }
.imx-table col.imx-w-t { width: 9%; }
.imx-prev td { font-weight: 800; font-size: 11px; }
.imx-sum td { background: #eee; font-weight: 800; }
.imx-summary { display: flex; align-items: stretch; margin-top: 12px; border: 1px solid #333; padding: 8px; gap: 12px; font-size: 9px; }
.imx-sum-title { flex: 0 0 70px; font-size: 11px; font-weight: 800; display: flex; align-items: center; }
.imx-sum-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 6px 12px; }
.imx-kv { display: flex; border: 1px solid #333; }
.imx-kv span { flex: 1 1 55%; padding: 4px 8px; font-weight: 700; }
.imx-kv b { flex: 1 1 45%; padding: 4px 8px; text-align: center; background: #fff; border-inline-start: 1px solid #333; }
.imx-kv-a span { background: #dde3fb; }
.imx-kv-b span { background: #fbd9c3; }

/* Move screens (accounts, items): the target and the mode sit on one row above the list */
.tr-target { align-items: center; }
.tr-target .st-chk-row { flex: 0 1 auto; }
.st-table.tr-table th.st-kind { width: 17%; }
.st-table.tr-table td.st-kind { white-space: nowrap; }
.st-table.tr-table th.col-actions { width: 4%; }

/* Warehouse reports screen: the list of reports beside the filters. */
.sr-layout { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.sr-list { flex: 0 0 340px; max-width: 100%; border: 1px solid var(--line, #cbd5e1); border-radius: 8px; padding: 6px 10px; }
.sr-item { display: flex; gap: 8px; align-items: center; padding: 2px 0; font-size: 13px; cursor: pointer; }
.sr-filters { flex: 1 1 420px; }
.sr-title { font-size: 15px; margin: 8px 0; }
.sr-table td, .sr-table th { font-size: 12px; }
.sr-pair { flex: 1 1 100%; display: flex; gap: 10px; }
.sr-pair .field { flex: 1 1 0; }
.sr-pair .field .control { width: 100%; }
.st-cash-title { margin-top: 12px; font-weight: 700; }
.st-filter .st-opt-row { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-filter .st-show-wide { min-width: 260px; }
.st-table.ci-table th.st-kind { width: 17%; }
.st-table.ci-table td.st-kind { white-space: nowrap; }
.st-table.ci-table th.col-actions { width: 4%; }
.st-list .st-table.ci-table td, .st-list .st-table.ci-table th { text-align: right; }
.st-list .st-table.ci-table td.col-actions, .st-list .st-table.ci-table th.col-actions { text-align: center; }
.ci-lines { width: 100%; border-collapse: collapse; font-size: 12px; }
.ci-lines th, .ci-lines td { border: 1px solid #94a3b8; padding: 2px 6px; text-align: right; }
.ci-lines th { background: #eef3f9; }
.ci-lines-row > td { background: #f8fafc; padding: 4px 8px; }
.ci-wide-btn { min-width: 230px; white-space: nowrap; }
.ci-print-inv { break-inside: avoid; margin-bottom: 10px; }
.ci-print-head td { text-align: right; }
.ci-foot .btn { min-width: 230px; white-space: nowrap; }
.ci-print-table td, .ci-print-table th { text-align: right; }
.ci-print-lines { margin: 2px 0 4px; }
.ci-print-inv { break-inside: avoid; }
.st-print-table.sr-wide { table-layout: fixed; width: 100%; }
.st-print-table.sr-wide th, .st-print-table.sr-wide td { padding-inline: 3px; font-size: 10px; }
col.srw-no { width: 7%; }
col.srw-name { width: 20%; }
col.srw-unit { width: 6%; }
col.srw-total { width: 6%; }
.st-print-table.sr-wide td, .st-print-table.sr-wide th { overflow-wrap: anywhere; }
.st-print-table.sr-wide th.st-amt, .st-print-table.sr-wide th.st-no, .st-print-table.sr-wide th.st-kind { width: auto; }

/* sector menus: every card has the Settings size (fixed), centered rows, navy icons */
.menu-panel .menu-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; grid-template-columns: none; width: 100%; max-width: 1500px; }
.menu-panel .menu-grid > .menu-tile { flex: 0 0 210px; width: 210px; max-width: 210px; height: 174px; min-height: 174px; padding: 10px 10px; }
@media (min-width: 1000px) {
    .menu-panel .menu-grid { flex-wrap: nowrap; }
    .menu-panel .menu-grid > .menu-tile:not(.chq-stat) { flex: 0 1 210px; width: auto; min-width: 0; }
}
.menu-panel .menu-grid > .menu-tile img { width: 84px; height: 84px; object-fit: contain; }
.menu-panel .menu-grid > .menu-tile span { font-size: 13px; line-height: 1.5; }

/* cheque sector: tiles, live count/amount cards and the two "due today" report cards */
.chq-stack { display: grid; gap: 16px; justify-items: center; width: 100%; }
.menu-panel .menu-grid > .menu-tile.chq-stat { gap: 4px; flex: 0 0 236px; width: 236px; max-width: 236px; cursor: default; }
.menu-panel .menu-grid > .menu-tile.chq-stat:hover { transform: none; box-shadow: var(--shadow); border-color: var(--card-line); }
.menu-panel .menu-grid > .menu-tile.chq-stat img { width: 40px; height: 40px; }
.menu-panel .menu-grid > .menu-tile.chq-stat { padding: 8px 4px; }
.menu-panel .menu-grid > .menu-tile.chq-stat > span:not(.chq-line) { font-size: 12px; line-height: 1.3; }
.menu-panel .menu-grid.chq-stats-row { flex-wrap: nowrap; width: 100%; max-width: 1500px; }
.menu-panel .menu-grid.chq-stats-row > .menu-tile.chq-stat { flex: 1 1 0; width: auto; min-width: 0; max-width: none; }
.chq-line { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.chq-line small { color: #b00020; font-size: 11px; font-weight: 700; }
.chq-line b { color: var(--navy-text); font-size: 12.5px; }
.chq-today-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.chq-today { display: grid; gap: 4px; justify-items: center; width: 360px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--card-line); border-radius: 14px; box-shadow: var(--shadow); color: var(--navy-text); text-decoration: none; text-align: center; transition: transform .12s, box-shadow .12s; }
.chq-today:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24, 65, 104, .18); border-color: var(--primary); }

/* Main screen. */
.db { display: grid; gap: 14px; padding: 12px 16px 24px; width: 100%; max-width: 1500px; margin-inline: auto; }
.db-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.db-title h1 { font-size: 20px; margin: 0; }
.db-sub { color: #55657a; font-size: 13px; }
.db-filter { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.db-filter .control { width: auto; min-width: 150px; margin: 0; }
.db-filter .btn { flex: 0 0 auto; white-space: nowrap; }
.db-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.db-kpi { display: grid; gap: 4px; padding: 12px 16px; background: #fff; border: 1px solid var(--card-line); border-radius: 10px; border-inline-start: 5px solid #8a9bb0; box-shadow: 0 1px 3px rgba(24, 65, 104, .08); }
.db-kpi-blue { border-inline-start-color: #1456a8; }
.db-kpi-teal { border-inline-start-color: #0f9d8a; }
.db-kpi-orange { border-inline-start-color: #e08a00; }
.db-kpi-green { border-inline-start-color: #2e9e4f; }
.db-kpi-label { color: #55657a; font-size: 13px; font-weight: 700; }
.db-kpi-num { font-size: 24px; color: #14304f; }
.db-delta { font-size: 12px; color: #55657a; }
.db-up { color: #1d8a45; font-weight: 700; }
.db-down { color: #c0392b; font-weight: 700; }
.db-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; }
.db-card { background: #fff; border: 1px solid var(--card-line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; }
.db-card h2 { font-size: 15px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.db-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; background: #e3eefb; border-radius: 99px; color: #1456a8; }
.db-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.db-table th, .db-table td { padding: 4px 6px; border-bottom: 1px solid #e3e9f1; text-align: right; }
.db-table th { color: #55657a; font-size: 12px; }
.db-table td.num { white-space: nowrap; direction: ltr; text-align: right; }
.db-dim { color: #8a9bb0; font-size: 11px; }
.db-bar-cell { width: 28%; }
.db-bar { width: 100%; height: 10px; accent-color: #1456a8; }
.db-bar-orange { accent-color: #e08a00; }
.db-bar-teal { accent-color: #0f9d8a; }
.db-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.db-doc { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--card-line); border-radius: 8px; text-decoration: none; color: var(--navy-text); background: #f8fafd; }
.db-doc:hover { background: #eaf2fc; }
.db-doc img { width: 30px; height: 30px; object-fit: contain; }
.db-doc strong { font-size: 16px; }
.db-doc.is-soon { cursor: default; }
@media (max-width: 760px) { .db-cols { grid-template-columns: 1fr; } }

/* account card: readonly dates are read left to right (day/month/year) and sit at the start of the box; wide Save / Exit buttons */
html[dir] input.control.date-text { direction: ltr !important; unicode-bidi: isolate !important; text-align: right; }
.ca-actions .btn { flex: 0 0 200px; min-width: 0; justify-content: center; text-align: center; }
/* account card: every field text sits at the right */
.acc-card input.control, .acc-card select.control, .acc-card textarea.control { text-align: right; text-align-last: right; }

/* Cost center of a line: mandatory (marked) / none (locked) by the account's rule. */
select.control.cost-required { border-color: #b3261e; }
select.control[data-cost-locked] { opacity: .45; }

/* Company list: one panel like the other screens (head with count, search row, table, exit at the foot). */
.company-list-panel, .company-list-panel.company-index-page { width: min(1250px, 100%); max-width: none; margin-bottom: 0; }
.company-list-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.company-list-tools label, .company-list-tools .btn { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.company-list-tools label { font-weight: 800; color: var(--navy-text); }
.company-list-tools .control { flex: 1 1 auto; width: auto; height: 34px; }
.company-list-panel .scroll-y { max-height: 74vh; min-height: 55vh; }

/* Years screen: the picture on the side, about the size of the list. */
.years-panel:not(.year-add) .year-picker { grid-template-columns: 1fr 1.2fr 1.1fr; }
.year-art { width: 100%; max-height: 56vh; object-fit: contain; align-self: center; justify-self: center; }
@media (max-width: 900px) { .year-art { display: none; } }

/* Branch choice: one panel like the other screens, tall list, exit at the far end of the foot. */
.branch-list-panel { width: min(820px, 100%); margin-bottom: 0; }
.branch-list-panel .scroll-y { max-height: 70vh; min-height: 50vh; }
.branch-list-panel .grid-table th, .branch-list-panel .grid-table td { padding: 10px 14px; }
.branch-list-panel .grid-table td { font-size: 14px; }
.branch-list-panel .grid-table th:first-child { width: 110px; }
.branch-list-panel .grid-table th.col-actions { width: 90px; }
.branch-list-panel .branch-enter-btn { display: inline-flex; justify-content: center; align-items: center; width: 34px; height: 34px; min-width: 34px; padding: 5px; }
.branch-list-panel .branch-enter-btn img { display: block; width: 20px; height: 20px; }
.branch-list-panel .grid-table td.col-actions { text-align: center; }

/* Permission / error / not-found pages: one small panel. */
.status-panel { width: min(620px, 100%); margin-bottom: 0; }
.status-body { display: grid; justify-items: center; gap: var(--space-3); padding-block: 36px; text-align: center; }
.status-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--soft); border: 2px solid #B9CDE1; color: var(--navy-text); font-size: 30px; font-weight: 800; }
.status-msg { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy-text); }
.status-art { width: 132px; height: 132px; display: block; }
.status-art .sa-bg { fill: #E8F0F9; }
.status-art .sa-main { fill: #1b5f9e; }
.status-art--warn .sa-main { fill: #f2a516; stroke: #f2a516; stroke-width: 6; stroke-linejoin: round; }
.status-art .sa-mark { stroke: #fff; stroke-width: 7; stroke-linecap: round; fill: none; }
.status-art .sa-markdot { fill: #fff; }
.status-art .sa-line { stroke: #12305a; stroke-width: 6; stroke-linecap: round; fill: none; }
.status-art .sa-thin { stroke: #B9CDE1; stroke-width: 4; }
.status-art .sa-dot { fill: #fff; }
.status-art .sa-dotline { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.status-art .sa-page { fill: #fff; stroke: #B9CDE1; stroke-width: 3; }
.status-art .sa-lens { fill: #fff; stroke: #12305a; stroke-width: 6; }
.status-panel .panel-foot { display: flex; flex-wrap: wrap; gap: 8px; }
html.pano-native-shell .status-panel .panel-foot > * { flex: 1 1 0; }
html.pano-native-shell .status-art { width: 104px; height: 104px; }

/* Data migration (Access -> SQL Server) */
.dm-panel { width: min(1250px, 100%); max-width: none; }
.dm-units { max-height: 62vh; min-height: 45vh; }
.dm-tables { max-height: 50vh; }
.dm-result-title { margin: 1rem 0 .4rem; font-size: 1rem; }
.dm-ok { color: #1b7a3a; font-weight: 600; }
.dm-bad { color: #b3261e; font-weight: 600; }
.dm-detail { display: block; font-size: .8rem; overflow-wrap: anywhere; }

/* Delete year files */
.yf-panel { width: min(1100px, 100%); max-width: none; }
.yf-list { max-height: 58vh; min-height: 44vh; }
.yf-err { display: block; font-size: .75rem; overflow-wrap: anywhere; }
.yf-all, .yf-unreg { margin: 0; white-space: nowrap; }
.yf-year-form .yf-show { min-width: 120px; justify-content: center; background: var(--navy); border-color: var(--navy); color: #fff; }
.yf-no { width: 90px; white-space: nowrap; }
.yf-year-form { display: flex; gap: var(--space-2); align-items: center; margin: 0; }
.yf-year { width: 170px; }
.yf-list .grid-table td, .yf-panel .yf-list .grid-table td { padding-block: 2px; }
.yf-list .grid-table th { padding-block: 4px; }
.yf-act { width: 44px; white-space: nowrap; }
.yf-del { width: 24px; height: 24px; padding: 0; }
.yf-del img { width: 15px; height: 15px; }
.yf-panel .panel-foot .foot-end { min-width: 160px; }
.yf-have { color: #1b7a3a; font-weight: 700; }
.yf-miss { color: #b26a00; font-weight: 700; }
.entry.yf-entry { place-items: start center; padding-top: var(--space-2); }

/* Company info: the logo card sits in the middle of the data block, larger and clearer */
.info-top { grid-template-columns: minmax(0, 1fr) 290px; align-items: center; }
.logo-card { align-self: center; padding: var(--space-4); gap: var(--space-3); border-color: var(--navy-text); box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.logo-box { height: 230px; border-width: 2px; border-color: var(--navy-text); padding: var(--space-2); }
.logo-box img { width: 100%; height: 100%; object-fit: contain; }

/* Sales invoice print: leave a few mm of slack so the form never spills onto a second (blank) page. */
@media print {
    body[data-si-printing="invoice"], body[data-si-printing="entry"] { min-height: 0; height: auto; }
    .si-print-invoice .jv-print.si-ax, .jv-between .jv-print.si-ax { min-height: 260mm; }
    .si-print-invoice { break-after: avoid; page-break-after: avoid; }
}

/* Voucher print (receipt, payment, journal): the empty screen frame must not add a blank second page. */
@media print {
    html:has(.jv-print) body { min-height: 0 !important; height: auto !important; }
    html:has(.jv-print) :is(main, .entry, .ph-app, .ph-main) { min-height: 0 !important; height: auto !important; }
    .jv-print:last-child { break-after: avoid; page-break-after: avoid; }
}

/* Thermal receipt print: no screen-height frame around it, so no blank page after the receipt. */
@media print {
    html:has(.si-thermal), html:has(.si-thermal) body { min-height: 0 !important; height: auto !important; overflow: visible !important; }
    html:has(.si-thermal) :is(main, .entry, .ph-app, .ph-main) { min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; }
    .si-thermal { margin: 0 !important; break-after: avoid; page-break-after: avoid; break-inside: auto; }
}

/* Sales-tax reports (201-204): the invoice list split by classification and tax rate */
.stx-table .stx-class td { font-weight: 800; background: #dfe8f3; text-align: start; }
.stx-table .stx-no { width: 90px; }
.stx-table .stx-date { width: 80px; }
.stx-table .stx-rate { width: 70px; text-align: center; }
.stx-panel .sr-layout { align-items: flex-start; }
.entry.stx-entry { place-items: start center; padding-top: var(--space-2); }
.stx-panel input[type="date"] { text-align: right; }
.stx-table .stx-rate-head td { font-weight: 700; background: #f1f5fa; text-align: start; }
.stx-dates { display: flex; gap: 14px; align-items: flex-end; flex-wrap: nowrap; }
.stx-bar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.stx-bar .field { margin: 0; }
.stx-rate-in { width: 110px; text-align: right; }
.stx-bar { flex-wrap: nowrap; gap: 10px; }
.stx-bar .field { flex: 0 0 auto; width: auto; }
.stx-bar label { font-size: 11px; }
.stx-bar .control { font-size: 12px; height: 33px; padding-block: 2px; }
.stx-bar input[type="date"] { width: 128px; }
.stx-bar select { width: 260px; }
.stx-bar .stx-rate-in { width: 80px; }
.stx-bar .btn { width: 100px; height: 33px; flex: 0 0 auto; }
@media print { .stx-bar { display: none !important; } }
.stx-bar { width: 100%; box-sizing: border-box; }
.stx-bar .field:has(select) { flex: 1 1 auto; min-width: 0; }
.stx-bar select { width: 100%; min-width: 0; }
.stx-bar label { font-size: 10px; }
.stx-bar .control { font-size: 11px; }
.stx-bar .stx-rate-in { width: 90px; }
.stx-panel .stx-rate-in { width: 110px; }
.stx-bar .field:has(#b_Rate) { flex: 0 0 auto; }
.stx-bar #b_Rate { width: 90px; }
.chart-print-report.stx-sheet { width: 210mm; max-width: 100%; margin-inline: auto; box-sizing: border-box; box-shadow: 0 0 6px rgba(0,0,0,.25); }
@media print { .chart-print-report.stx-sheet { width: auto; max-width: none; box-shadow: none; } }
.stx-panel .stx-dates { gap: 48px; }
.stx-panel .stx-dates { justify-content: center; }
.stx-bar input[type="date"] { width: 160px; }
.stx-bar > .btn { margin-inline-start: auto; }
.stx-table tr.stx-neg td { color: #b3261e; }
.stx-box { border: 2px solid #1f2a6b; border-radius: 2px; padding: 8px 12px 12px; margin: 22px 0 14px; }
.stx-box legend { text-align: center; font-weight: 800; padding-inline: 18px; }
.stx-sum .stx-rate { width: 90px; }
.stx-balance { width: 50%; margin-inline-start: 0; }
.stx-balance { width: 40%; margin-left: 0; margin-right: auto; }

/* Document posting */
.entry.pd-entry, .pd-panel { max-width: 1100px; }
.pd-body { display: flex; gap: 16px; align-items: flex-start; }
.pd-months { flex: 1 1 auto; min-width: 0; }
.pd-doc { flex: 0 0 300px; border: 1px solid var(--line, #cbd5e1); border-radius: 6px; padding: 10px 14px 14px; }
.pd-doc h2 { margin: 0 0 12px; text-align: center; color: #b3261e; font-size: 15px; }
.pd-doc-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 12px; }
.pd-act { white-space: nowrap; }
.pd-btn { min-width: 110px; height: 28px; margin-inline: 3px; }

/* Document posting: raise the screen and tighten the month rows */
.entry.pd-entry { place-items: center; padding-top: 6px; padding-bottom: 16vh; }
.entry.pd-entry { margin-inline: auto; width: 100%; }
.pd-panel { width: min(1000px, 100%); }
.pd-months .grid-table th, .pd-months .grid-table td { padding-block: 1px; line-height: 1.2; height: 28px; }
.pd-months .pd-btn { height: 22px; font-size: 11px; padding-block: 0; }

/* Report preview zoom (Ctrl + wheel): the sheet is scaled on screen only. */
@media print {
  main > *, .chart-print-report, .chart-print-report > * { zoom: 1 !important; }
  .chart-print-actions, .cheque-ops-actions, .opening-balances-print-actions, .jvp-bar, .jvp-filter { zoom: 1 !important; }
}

/* ---- Point of sale ---- */
.pos { overflow: visible; }
.pos-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--soft); }
.pos-modes { display: flex; flex: 0 0 auto; border: 1.5px solid var(--card-line); border-radius: var(--radius-sm); overflow: hidden; }
.pos-mode { flex: 0 0 auto; border: 0; min-width: 8rem; height: 32px; padding: 0 20px; background: var(--surface); color: var(--primary-dark); font-weight: 800; cursor: pointer; }
.pos-mode.is-on { background: var(--primary); color: #fff; }
.pos-mode[data-pos-mode="return"].is-on { background: var(--danger); }
.pos-customer { display: flex; align-items: center; gap: var(--space-2); order: 3; flex: 1 1 100%; min-width: 0; }
.pos-customer label { color: var(--navy-text); white-space: nowrap; }
.pos-customer .control { flex: 1 1 auto; min-width: 0; width: auto; height: 34px; font-size: 1.05rem; border-color: var(--card-line); }
.pos-customer-name { flex: 0 0 auto; max-width: 25%; color: var(--navy-text); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-type { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.pos-type label { color: var(--navy-text); white-space: nowrap; }
.pos-type .control { flex: 1 1 auto; min-width: 0; width: auto; height: 34px; font-size: 1.05rem; border-color: var(--card-line); }
.pos-type label, .pos-customer label { font-size: 1.05rem; }
.pos-after { margin-bottom: 0; }
.pos-held-box { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pos-held-btn { min-width: 10rem; }
.pos-exit-form { display: inline-flex; margin: 0; margin-inline-start: auto; }
.pos-user { margin-inline-start: auto; color: var(--navy-text); font-size: 1.35rem; font-weight: 800; white-space: nowrap; }
.pos-return { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--danger-bg); border-bottom: 1px solid var(--line); }
.pos-return .field { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.pos-return .pos-reason { flex: 1.7 1 0; width: auto; }
.pos-check { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--navy-text); }
.pos-body { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-4); align-items: start; padding: var(--space-4); }
.pos-lines { min-width: 0; }
.pos-scan { position: relative; margin-bottom: var(--space-3); }
.pos-scan-input { height: 46px; font-size: 1rem; border: 2px solid var(--card-line); border-radius: 10px; background: #EEF4FB; }
.pos-suggest { position: absolute; inset-inline: 0; top: 100%; z-index: 20; margin: 2px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1.5px solid var(--card-line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.pos-sug { display: flex; justify-content: space-between; gap: var(--space-3); width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: start; cursor: pointer; }
.pos-sug:hover, .pos-sug.is-hot { background: var(--row-pick); }
.pos-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: auto; height: calc(100vh - 420px); min-height: 22rem; background: var(--surface); }
.pos-table { width: 100%; table-layout: fixed; }
.pos-table .pos-c-no { width: 4%; }
.pos-table .pos-c-num { width: 9%; }
.pos-table .pos-c-disc { width: 8%; }
.pos-table .pos-c-tax { width: 8%; }
.pos-table th { white-space: normal; padding-inline: 4px; font-size: clamp(.66rem, .95vw, .9rem); line-height: 1.2; }
.pos-table .pos-c-inc { width: 10%; }
.pos-table .pos-c-damt { width: 9%; }
.pos-table .pos-c-total { width: 11%; }
.pos-table .pos-c-del { width: 5%; }
.panel .pos-table td { padding-block: 5px; padding-inline: 4px; vertical-align: middle; line-height: 1; font-size: clamp(.8rem, 1.1vw, 1.1rem); }
.pos-table td .control { height: 30px; min-height: 0; padding-block: 0; padding-inline: 4px; font-size: clamp(.8rem, 1.2vw, 1.2rem); line-height: 1; }
.pos-table td .btn { height: 28px; min-height: 0; padding-block: 0; }
.pos-name { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.pos-num { width: 100%; height: 28px; direction: ltr; padding-inline: 3px; }
.pos-index, .pos-total { text-align: center; }
.pos-total { font-weight: 800; color: var(--navy-text); direction: ltr; }
.panel .pos-table td.pos-total { text-align: right; padding-inline: 8px; }
.pos-del { display: flex; margin-inline: auto; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--danger-bg); color: var(--danger); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.panel .pos-table td:last-child { text-align: center; padding-inline: 0; }
.pos-del:hover { background: var(--danger); color: #fff; }
.pos-empty { margin: var(--space-5) 0 0; text-align: center; }
.pos-side { display: grid; gap: var(--space-3); position: sticky; top: var(--space-3); }
.pos-sum { margin: 0; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--card-line); border-radius: var(--radius); background: var(--surface); }
.pos-sum > div { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; }
.pos-sum dt { color: #000; font-size: 1.15rem; }
.pos-sum dd { margin: 0; direction: ltr; font-weight: 800; color: #000; font-size: 1.15rem; }
.pos-sum-total { margin-top: var(--space-2); padding-top: var(--space-2) !important; border-top: 2px solid var(--line); }
.pos-sum-total dt { color: #000; font-size: 1.3rem; }
.pos-sum-total dd { font-size: 2rem; color: var(--primary-dark); line-height: 1.1; }
.pos-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.pos-pay { height: 52px; grid-column: 1 / -1; font-size: 1.25rem; }
.pos-method { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; margin: 0; }
.pos-method label { color: var(--navy-text); white-space: nowrap; font-size: 1.05rem; }
.pos-method .control { width: 11rem; height: 34px; font-size: 1.05rem; border-color: var(--card-line); }
.pos-pay-cash { background: var(--ok); border-color: #136C42; color: #fff; }
.pos-pay-cash:hover { background: #136C42; }
.pos-actions kbd { margin-inline-start: 6px; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .25); font-size: .75rem; font-family: inherit; }
.pos-actions .btn:not(.pos-pay) kbd { background: var(--soft); color: var(--muted); }
.pos-clear { color: var(--danger); border-color: var(--danger); }
.pos-auto { justify-content: center; }
.pos-last { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1.5px solid var(--ok); border-radius: var(--radius); background: var(--ok-bg); text-align: center; color: #136C42; }
.pos-last-links { display: flex; gap: var(--space-2); justify-content: center; }
.pos-after label { color: #000; font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.pos-after .control { height: 38px; font-size: 1.05rem; border-color: var(--card-line); }
.pos-last strong { font-size: 1.05rem; line-height: 1.5; }
.pos-last-links .btn { flex: 1 1 0; min-width: 0; height: 38px; padding-inline: 4px; font-size: 1.05rem; justify-content: center; }
.pos-dialog { width: min(30rem, 92vw); }
.pos-dialog h2 { text-align: center; }
.pos-mini { height: 32px; padding-inline: 12px; white-space: nowrap; }
.pos-balance { padding: 2px 10px; border-radius: 999px; background: var(--card-line); color: var(--navy-text); font-weight: 800; white-space: nowrap; direction: ltr; }
.pos-balance.is-credit { background: var(--danger-bg); color: var(--danger); }
.pos-scan-input { padding-left: 12rem; }
.pos-browse-btn { position: absolute; left: 96px; top: 50%; transform: translateY(-50%); height: 34px; min-width: 82px; width: 82px; padding-inline: 10px; font-weight: 800; }
.pos-keypad-btn { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); height: 34px; min-width: 82px; width: 82px; padding-inline: 10px; font-weight: 800; }
.dialog.pos-st-dialog { width: 96vw; max-width: 96vw; }
.pos-st-table { table-layout: fixed; }
.pos-st-table th:nth-child(1) { width: 9rem; }
.pos-st-table th:nth-child(2) { width: 14rem; }
.pos-st-table th:nth-child(3) { width: 8rem; }
.pos-st-table th:nth-child(5), .pos-st-table th:nth-child(6), .pos-st-table th:nth-child(7) { width: 9rem; }
.pos-st-wrap { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.panel .pos-st-table th { padding: 10px; font-size: 1rem; }
.panel .pos-st-table td { padding: 3px 10px; font-size: 1rem; line-height: 1.1; }
.panel .pos-st-table td.pos-st-num { text-align: right; direction: ltr; }
.panel .pos-st-table td:last-child { font-size: 1.2rem; font-weight: 800; }
.pos-st-table .pos-st-num { text-align: right; direction: ltr; white-space: nowrap; }
.dialog .pos-st-total { margin: var(--space-3) 0 0; text-align: left; font-size: 1.3rem; color: var(--navy-text); font-weight: 800; }
.pos-st-total strong { direction: ltr; unicode-bidi: isolate; }
.pos-rc-who { text-align: center; color: var(--navy-text); font-weight: 800; }
.pos-rc-done { text-align: center; }
.pos-keypad { width: min(20rem, 92vw); }
.pos-keypad-for { margin: 0 0 var(--space-2); text-align: center; color: var(--navy-text); font-weight: 800; }
.pos-keypad-display { height: 52px; font-size: 1.8rem; text-align: right; direction: ltr; margin-bottom: var(--space-3); }
.pos-keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); direction: ltr; }
.pos-key { height: 56px; font-size: 1.5rem; font-weight: 800; }
.pos-browse { width: min(1280px, 97vw); height: min(96vh, 640px); padding: 0; }
.pos-browse[open] { display: flex; flex-direction: column; }
.pos-browse-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--soft); }
.pos-browse-head h2 { margin: 0; flex: 0 0 auto; text-align: start; color: var(--navy-text); }
.pos-browse-added { flex: 1 1 auto; text-align: center; color: #136C42; font-weight: 800; }
.pos-browse-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 15rem 1fr; }
.pos-browse-groups { margin: 0; padding: var(--space-2); list-style: none; overflow: auto; display: grid; gap: 6px; align-content: start; background: var(--soft); border-inline-end: 1px solid var(--line); }
.pos-group { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: auto; min-height: 40px; padding: 6px 12px; text-align: start; font-size: 1.05rem; font-weight: 700; }
.pos-group.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pos-browse-cards { padding: var(--space-3); overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-2); align-content: start; }
.pos-browse-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 12px; }
.pos-card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; height: 100%; min-height: 0; gap: 8px; padding: 12px 10px; border: 1.5px solid var(--card-line); border-radius: 14px; background: var(--surface); color: var(--navy-text); font: inherit; text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(23, 63, 105, .08); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.pos-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 6px 14px rgba(23, 63, 105, .16); }
.pos-card:active { transform: translateY(0); }
.pos-card-img { display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--soft); border: 1px solid var(--card-line); }
.pos-card-img img { width: 36px; height: 36px; object-fit: contain; }
.pos-card strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; font-size: 1.1rem; font-weight: 700; line-height: 1.3; text-align: center; }
.pos-card em { padding: 2px 14px; border-radius: 999px; background: var(--primary); color: #fff; font-style: normal; font-weight: 800; font-size: 1.05rem; direction: ltr; }
.pos-card.is-added { background: var(--ok-bg); border-color: var(--ok); }
.pos-card.is-added em { background: var(--ok); }
.pos-browse-empty { grid-column: 1 / -1; margin: var(--space-4) 0; text-align: center; color: var(--muted); }
.pos-held-panel { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.pos-held-panel h2 { margin: 0 0 var(--space-2); color: var(--navy-text); font-size: 1.2rem; }
.pos-held-wrap { max-height: 15rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.panel .pos-held-table td { padding-block: 6px; font-size: 1.05rem; line-height: 1.2; }
.panel .pos-held-table td.pos-held-num { text-align: right; direction: ltr; font-weight: 800; }
.panel .pos-held-table td.pos-held-actions { white-space: nowrap; text-align: end; }
.pos-held-table th:last-child { width: 20rem; }
.pos-held-actions .btn { display: inline-flex; align-items: center; justify-content: center; width: calc(50% - 4px); height: 32px; min-height: 0; padding: 0 4px; margin: 0; }
.pos-held-actions .btn + .btn { margin-inline-start: 8px; }
.pos-held-none { margin: var(--space-2) 0 0; }
.pos-held-none[hidden] { display: none; }
.pos.is-return .pos-scan-input { border-color: var(--danger); background: var(--danger-bg); }
@media (max-width: 900px) {
    .pos-body { grid-template-columns: minmax(0, 1fr); }
    .pos-side { position: static; }
    .pos-return { flex-wrap: wrap; }
    .pos-return .field { min-width: 180px; }
}
.pos-itembar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); padding: 6px var(--space-4); border: 1.5px solid var(--card-line); border-radius: var(--radius-sm); background: var(--soft); }
.pos-itembar-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; color: var(--navy-text); }
.pos-itembar-list { color: var(--muted); white-space: nowrap; }
.pos-itembar-price { direction: ltr; font-size: 1.9rem; line-height: 1.1; color: var(--primary-dark); }
.pos-itembar-price.is-zero, .pos-num.is-zero { color: var(--danger); border-color: var(--danger); }
.pos-foot .btn, .pos-foot .pos-pay { display: inline-flex; align-items: center; justify-content: center; width: 12rem; flex: 0 1 12rem; min-width: 0; height: 42px; padding-block: 0; padding-inline: 8px; grid-column: auto; }
.pos-foot { flex-wrap: nowrap; }
.pos-foot [data-pos-fullscreen] { margin-inline-start: auto; }
.pos-foot .foot-end, .pos-foot .pos-exit-form { margin-inline-start: 3rem; }
.pos-foot kbd { margin-inline-start: 6px; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .25); font-size: .75rem; font-family: inherit; }
.pos input.control { text-align: right; }

/* ---- Point of sale: Z report ---- */
.pos-z-filter { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
@media print { .pos-z-filter { display: none; } }
.pos-z-filter label { margin: 0; white-space: nowrap; font-weight: 800; }
.pos-z-filter .control { width: auto; flex: 1 1 0; min-width: 0; height: 34px; }
.pos-z-filter .btn { flex: 0 0 auto; min-width: 8rem; }
.pos-z-sum { max-width: 34rem; margin: 0 auto var(--space-4); }
.pos-z-sum td { padding: 4px 10px; }

/* Cheque reports */
.cq-panel .sr-list { flex: 0 0 340px; }
.cq-panel .sr-filters { flex: 1 1 700px; }
.cq-panel #f_Account { width: 100%; max-width: none; }
.cq-const { margin-top: 12px; width: 100%; }
.cq-const-table { width: 100%; table-layout: fixed; }
.cq-const-table col.cq-col-code { width: 56px; }
.panel .cq-const-table td { padding-block: 6px; }
.cq-const h2 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--navy-text); }
.cq-const td.cq-code { width: 60px; font-weight: 800; color: #b3261e; }

.sm-panel .sr-list{flex:0 0 380px}
.sm-note{margin-top:.75rem}
.cq-panel .cq-line { flex-wrap: nowrap; }
.cq-panel .cq-line .field { flex: 1 1 0; min-width: 0; }
.cq-panel .ci-foot .btn, .sm-panel .ci-foot .btn { min-width: 150px; justify-content: center; text-align: center; }
.cq-panel .sr-filters .field.cq-full { flex: 1 1 100%; }
.cq-panel .sr-filters .field.cq-full + .field.cq-full { margin-top: 14px; }

/* Menus with headings (settings, accounts...): each group is a light panel that fits its cards; every card has the same size */
.menu-panel .menu-groups { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.menu-panel .menu-groups .menu-group { width: fit-content; max-width: 100%; padding: 10px 28px 20px; background: #f3f6fb; }
.menu-panel .menu-groups .menu-group-title { margin: 0; }
.menu-panel .menu-groups .menu-grid { width: auto; max-width: none; flex-wrap: wrap; justify-content: center; padding: 16px 0 0; }
.menu-panel .menu-groups .menu-grid > .menu-tile:not(.chq-stat) { flex: 0 0 150px; width: 150px; min-width: 150px; max-width: 150px; height: 160px; min-height: 160px; }
.cp-line > .cp-c bdi { unicode-bidi: isolate; direction: ltr; }

/* Invoice screens only: rebalance item grid widths: wider item name and unit, slightly narrower qty/price/discount/amount. */
.si-edit .si-grid th:nth-child(3) { width: 31%; }
.si-edit .si-grid th:nth-child(4) { width: 7%; }
.si-edit .si-grid th:nth-child(5) { width: 6%; }
.si-edit .si-grid th:nth-child(6) { width: 7%; }
.si-edit .si-grid th:nth-child(7) { width: 8%; }
.si-edit .si-grid th:nth-child(9) { width: 6%; }
.si-edit .si-grid th:nth-child(11) { width: 8%; }

/* Invoice screens only: equal-width line controls and a light Add line button. */
.si-edit .si-tools { justify-content: flex-start; }
.si-edit .si-tools [data-si-toggle-all],
.si-edit .jv-addbar [data-si-add],
.si-edit .wd-addrow [data-si-add],
.si-edit .wd-addrow [data-wd-prod-add] {
    box-sizing: border-box;
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    text-align: center;
    justify-content: center;
}
.si-edit .jv-addbar { justify-content: flex-start; }
.si-edit .jv-addbar [data-si-add],
.si-edit .wd-addrow [data-si-add],
.si-edit .wd-addrow [data-wd-prod-add] {
    background-color: #edf5ff;
    border-color: #9dbde4;
    color: #173d70;
}
.si-edit .jv-addbar [data-si-add]:hover,
.si-edit .wd-addrow [data-si-add]:hover,
.si-edit .wd-addrow [data-wd-prod-add]:hover {
    background-color: #e2efff;
    border-color: #82acd9;
    color: #173d70;
}

/* Account statement: distinguish the option to print customer-linked cash invoices. */
.st-filter .st-chk.st-cash-invoices-option { font-size: 15px; font-weight: 800; color: #175c96; }

/* Only the entry-mode switch; existing desktop layout is unchanged. */
.mobile-mode-entry { margin-top:12px; }
.mobile-mode-switch { background:#edf5fc; color:#214d73; border:1px solid #bed5ea; }

/* ===== Phone mode (the phone shell: html.pano-native-shell, loaded by _PhoneLayout) ===== */
@media screen {
html.pano-native-shell {--ph-blue:#1b5f9e;--ph-blue-dark:#164f85;--ph-ink:#1f2d45;--ph-muted:#6b7c93;--ph-bg:#f3f7fc;--ph-stroke:#dbe6f3;--ph-field:#f5f9fe;--ph-field-stroke:#cddff0;--ph-card:#fff;--ph-soft:#e9f2fb;--ph-shadow:0 4px 18px rgba(30,70,120,.07);--ph-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b5f9e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");--ph-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231f2d45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");font-family:Cairo,sans-serif;background:var(--ph-bg);-webkit-text-size-adjust:100%}
.pano-native-shell,.pano-native-shell body{width:100%;max-width:100%;margin:0!important;padding:0!important;min-width:0!important;overflow-x:clip!important;background:var(--ph-bg)!important;color:var(--ph-ink);font:500 13px/1.45 Cairo,Arial,sans-serif!important}
.pano-native-shell *{box-sizing:border-box;min-width:0}
.pano-native-shell :where(button,input,select,textarea,table,td,th,label,a,small,p,div,span,h1,h2,h3){font-family:Cairo,Arial,sans-serif}
.pano-native-shell .ph-app{min-height:100dvh;width:100%;display:flex;flex-direction:column}

/* top bar */
.pano-native-shell .ph-appbar{position:sticky;z-index:100;top:0;height:48px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:6px 12px!important;background:#fff;border-bottom:1px solid var(--ph-stroke)}
.pano-native-shell .ph-brand{display:flex;gap:9px;align-items:center;flex:0 0 auto;text-decoration:none;color:var(--ph-blue);font-size:15px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.pano-native-shell .ph-logo{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--ph-blue);color:#fff;font:800 18px/1 Arial,sans-serif}
.pano-native-shell .ph-top-actions{display:flex;gap:7px;align-items:center;flex-direction:row-reverse}
.pano-native-shell .ph-top-actions form{margin:0!important;display:block}
.pano-native-shell .ph-pill{border:1px solid var(--ph-field-stroke)!important;background:#f4f9ff!important;color:var(--ph-blue)!important;border-radius:12px!important;min-height:30px!important;height:30px!important;padding:0 10px!important;line-height:1!important;font-size:12px!important;font-weight:700;white-space:nowrap;box-shadow:none!important}
.pano-native-shell .ph-context{display:none}
.pano-native-shell .ph-icon-btn{width:34px!important;min-width:34px!important;padding:0!important;display:inline-grid!important;place-items:center}
.pano-native-shell .ph-icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pano-native-shell .ph-main{flex:1;width:100%;max-width:620px;margin:0 auto!important;padding:10px 10px 16px!important;display:block}
.pano-native-shell .ph-main.ph-has-nav{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
.pano-native-shell .ph-main :where(.app-header,.main-nav,.info-bar,.phone-mode-nav){display:none!important}

/* bottom tab bar */
.pano-native-shell .ph-tabbar{position:fixed;z-index:150;bottom:0;right:0;left:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(56px + env(safe-area-inset-bottom));padding:3px 3px calc(3px + env(safe-area-inset-bottom))!important;background:#fff;border-top:1px solid var(--ph-stroke);direction:rtl}
.pano-native-shell .ph-tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;padding:3px 0 6px;color:#6b7c93;font-size:10.5px;font-weight:600;line-height:1.2;text-decoration:none}
.pano-native-shell .ph-tabbar a.ph-active{color:var(--ph-blue);font-weight:800}
.pano-native-shell .ph-tabbar a.ph-active::after{content:"";position:absolute;bottom:0;left:12%;right:12%;height:3px;border-radius:3px;background:var(--ph-blue)}
.pano-native-shell .ph-tab-ico{display:block;width:21px;height:21px}
.pano-native-shell .ph-tab-ico svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* cards */
.pano-native-shell :where(.panel,.st-panel,.jv-list,.jv-edit,.si-edit,.phone-launcher,.si-panel){width:100%!important;max-width:100%!important;background:var(--ph-card)!important;border:1px solid var(--ph-stroke)!important;border-radius:14px!important;box-shadow:var(--ph-shadow)!important;margin:0 0 10px!important;overflow:visible!important}
.pano-native-shell .phone-launcher{padding:12px!important}
.pano-native-shell .panel-head{display:none!important}
.pano-native-shell .panel-body{padding:12px!important;max-width:100%!important}
.pano-native-shell .panel-foot,.pano-native-shell .st-foot{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding:0 12px 12px!important;background:none!important;border:0!important}
.pano-native-shell .panel-foot .foot-end{display:none!important}
.pano-native-shell :where(h1,h2,h3){font-weight:800!important;overflow-wrap:break-word}

/* fields */
.pano-native-shell :where(.field,.form-group){min-width:0!important;margin:0!important;display:flex;flex-direction:column;gap:4px}
.pano-native-shell :where(label,.field>label,.form-group>label){font-size:12px!important;font-weight:700!important;color:var(--ph-ink)!important;line-height:1.35!important;white-space:normal!important}
.pano-native-shell :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea,.control){width:100%;max-width:100%;min-height:38px!important;height:auto!important;border:1px solid var(--ph-field-stroke)!important;border-radius:11px!important;background:var(--ph-field);color:var(--ph-ink);font-size:13px!important;font-weight:500!important;padding:5px 11px!important;line-height:1.4!important;box-shadow:none!important}
.pano-native-shell select,.pano-native-shell select.control{-webkit-appearance:none;appearance:none;background-image:var(--ph-chev)!important;background-repeat:no-repeat!important;background-position:left 12px center!important;padding-inline-end:12px!important;padding-inline-start:32px!important}
.pano-native-shell input[type=date]{position:relative;text-align:start;padding-inline-start:38px!important}
html[dir=rtl].pano-native-shell input[type=date]{text-align:right}
.pano-native-shell input[type=date]::-webkit-calendar-picker-indicator{position:absolute;left:10px;right:auto;width:18px;height:18px;opacity:1;background:var(--ph-cal) center/contain no-repeat;cursor:pointer}
.pano-native-shell input[type=date]::-webkit-calendar-picker-indicator{filter:none}
.pano-native-shell textarea{min-height:64px!important;resize:vertical}
.pano-native-shell :where(input[type=checkbox],input[type=radio]){width:18px!important;height:18px!important;flex:0 0 18px!important;accent-color:var(--ph-blue);margin:0!important;border-radius:7px}
.pano-native-shell :where(.st-chk,.st-cash-invoices-option,.check-row){display:flex!important;flex-direction:row!important;gap:8px!important;align-items:center!important;font-size:12.5px!important;font-weight:600!important}

/* buttons */
.pano-native-shell :where(button,.btn,input[type=submit],input[type=button]){min-height:38px!important;height:auto!important;max-width:100%;font-size:13.5px!important;line-height:1.3!important;font-weight:700!important;padding:5px 12px!important;border-radius:11px!important;white-space:normal!important;touch-action:manipulation;border:1.5px solid var(--ph-blue)!important;background:#fff!important;color:var(--ph-blue)!important;box-shadow:none!important;display:flex;align-items:center;justify-content:center;text-decoration:none}
.pano-native-shell :where(.btn-primary,.st-show-wide){background:var(--ph-blue)!important;border-color:var(--ph-blue)!important;color:#fff!important}
.pano-native-shell :where(.btn-danger,.btn-delete){border-color:#c0392b!important;color:#c0392b!important}
.pano-native-shell .ph-pill{display:inline-flex}
.pano-native-shell :where(.btn-icon,.jv-del,.btn-sm-w){min-height:32px!important;min-width:32px;font-size:12.5px!important}

/* filters: one column like the app screens */
.pano-native-shell :where(.st-filter,.jv-filter,.st-filter-wide,.filter-bar,.filters,.si-side-row){width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;align-items:end!important}
.pano-native-shell :where(.st-filter,.jv-filter,.st-filter-wide,.filter-bar,.filters,.si-side-row)>*{min-width:0!important;width:100%!important;grid-column:auto!important;flex:auto!important}
.pano-native-shell :where(.jv-filter)>.compact-range{display:flex}
.pano-native-shell :where(.st-opt-row){display:flex!important;flex-direction:column!important;gap:8px!important}
.pano-native-shell :where(.st-filter-btns,.st-filter-actions,.jv-actions,.panel-actions,.form-actions,.si-bottom-actions,.si-tools,.si-actions,.dialog-actions){display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
.pano-native-shell :where(.st-filter-btns,.st-filter-actions,.jv-actions,.panel-actions,.form-actions,.si-bottom-actions,.si-tools,.si-actions,.dialog-actions)>*{width:100%!important}
.pano-native-shell .st-filter-btns .btn-primary{background:var(--ph-blue)!important}
.pano-native-shell :where(.scroll-x,.scroll-y,.table-wrap,.table-responsive){width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}

/* record lists: every row of a plain table is a card (see the phone card-tables script) */
.pano-native-shell table.ph-records,.pano-native-shell table.ph-records>tbody,.pano-native-shell table.ph-records>tfoot{display:block!important;width:100%!important;border:0!important;background:none!important}
.pano-native-shell table.ph-records>thead{display:none!important}
.pano-native-shell table.ph-records>tbody>tr{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 12px!important;margin:0 0 8px!important;border:1px solid var(--ph-stroke)!important;border-radius:14px!important;background:#fff!important;box-shadow:var(--ph-shadow)!important;width:100%!important}
.pano-native-shell table.ph-records>tbody>tr>td{display:flex!important;flex-direction:column!important;gap:2px!important;flex:1 1 28%;height:auto!important;text-align:start!important;padding:0!important;border:0!important;overflow-wrap:anywhere!important;white-space:normal!important;font-size:13px!important;font-weight:700;color:var(--ph-ink)}
.pano-native-shell table.ph-records>tbody>tr>td::before{content:attr(data-phone-label);color:var(--ph-muted);font-size:10.5px;font-weight:500}
.pano-native-shell table.ph-records>tbody>tr>td.ph-full{flex:1 1 100%}
.pano-native-shell table.ph-records>tbody>tr>td.ph-figure{color:var(--ph-blue)}
.pano-native-shell table.ph-records>tbody>tr>td.col-actions{flex:0 0 auto;order:99;flex-direction:row!important;align-items:center;gap:8px!important}
.pano-native-shell table.ph-records>tbody>tr>td.col-actions::before{content:none}
.pano-native-shell table.ph-records>tbody>tr>td:empty{display:none!important}
.pano-native-shell table.ph-records>tfoot>tr{display:flex!important;flex-wrap:wrap;gap:8px 14px;padding:9px 12px!important;border-radius:12px;background:var(--ph-soft)!important;font-weight:800}
.pano-native-shell table.ph-records>tfoot td{padding:0!important;border:0!important;background:none!important;font-size:13px!important}
.pano-native-shell .si-grid:not(.ph-records){width:100%;min-width:560px}
.pano-native-shell .si-grid td :is(input,select){min-width:0!important}
.pano-native-shell :where(dialog,.dialog){width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;max-height:90dvh;border-radius:20px!important;overflow:auto!important}
.pano-native-shell .si-totals{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;width:100%!important}
.pano-native-shell .si-total{display:flex!important;justify-content:space-between!important;gap:8px!important;padding:4px 2px!important;font-size:13px}
.pano-native-shell .alert{border-radius:14px;padding:9px 12px;font-size:12.5px}
.pano-native-shell .muted{color:var(--ph-muted)}

/* launcher */
.pano-native-shell .phone-actions{display:grid;gap:8px}
.pano-native-shell .phone-action{background:#fff;border:1px solid var(--ph-stroke);border-radius:14px;padding:9px 12px;text-decoration:none;display:flex;gap:10px;align-items:center;min-height:54px;color:var(--ph-ink);box-shadow:var(--ph-shadow)}
.pano-native-shell .phone-icon{display:grid;place-items:center;flex:0 0 34px;background:var(--ph-soft);color:var(--ph-blue);border-radius:10px;height:34px;font-size:16px}
.pano-native-shell .phone-action strong{display:block;font-size:13.5px}.pano-native-shell .phone-action small{display:block;font-size:11px;color:var(--ph-muted)}
.pano-native-shell .phone-arrow{margin-inline-start:auto;color:var(--ph-blue);font-size:22px}
.pano-native-shell .phone-launcher-title h1{font-size:18px!important;margin:4px 0}.pano-native-shell .phone-launcher-title p,.pano-native-shell .phone-launcher-foot{font-size:13px;color:var(--ph-muted)}
.pano-native-shell .phone-launcher-kicker{color:var(--ph-blue);font-weight:800;font-size:11px;letter-spacing:.08em}

/* phone cash receipt */
.pano-native-shell .phone-receipt .panel-body{display:flex;flex-direction:column;gap:12px}
.pano-native-shell .pr-accname{min-height:16px;font-size:11.5px;font-weight:600;color:var(--ph-blue)}
.pano-native-shell .pr-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pano-native-shell .pr-actions:has(>:only-child){grid-template-columns:1fr}
/* print / preview pages opened inside the phone shell */
.pano-native-shell .chart-print-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-bottom:10px}
@media(max-width:380px){.pano-native-shell .ph-main{padding:10px 10px 18px!important}.pano-native-shell .ph-brand{font-size:16px}.pano-native-shell .ph-pill{padding:0 9px!important;font-size:12px!important}}
}
@media print{html.pano-native-shell .ph-appbar,html.pano-native-shell .ph-context,html.pano-native-shell .ph-tabbar{display:none!important}html.pano-native-shell .ph-main{padding:0!important;margin:0!important;max-width:none!important}html.pano-native-shell body{background:white!important}}
/* phone preview (compact breakdown of an invoice / statement, and the full-sheet view) */
@media screen{
html.pano-phone-mode .ph-print-open{width:100%;min-height:38px;font:700 13.5px Cairo,sans-serif!important;border:1.5px solid #1b5f9e!important;background:#fff!important;color:#1b5f9e!important;border-radius:11px!important;margin:0 0 8px}
html.pano-phone-mode .ph-print-viewer{position:fixed;inset:0;z-index:2147482000;background:#f3f7fc;display:flex;flex-direction:column;direction:rtl;overflow:hidden;font:500 13px/1.45 Cairo,sans-serif;color:#1f2d45}
html.pano-phone-mode .ph-print-viewer[hidden]{display:none!important}
html.pano-phone-mode .ph-print-bar{height:46px;min-height:46px;display:flex;gap:6px;align-items:center;padding:6px 10px;background:#fff;border-bottom:1px solid #dbe6f3}
html.pano-phone-mode .ph-print-bar strong{flex:1;min-width:0;font-size:14.5px;font-weight:800;color:#1f2d45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.pano-phone-mode .ph-print-bar button{font:700 12px Cairo,sans-serif;border-radius:10px;padding:0 10px;min-height:32px;color:#1b5f9e;background:#f4f9ff;border:1px solid #cddff0}
html.pano-phone-mode .ph-print-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:10px;-webkit-overflow-scrolling:touch}
html.pano-phone-mode .ph-print-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #dbe6f3}
html.pano-phone-mode .ph-print-foot button{font:700 13.5px Cairo,sans-serif;min-height:38px;border-radius:11px;border:1.5px solid #1b5f9e;background:#fff;color:#1b5f9e}
html.pano-phone-mode .ph-print-foot .ph-print-action{background:#1b5f9e;color:#fff}
html.pano-phone-mode .ph-sum-head{background:#fff;border:1px solid #dbe6f3;border-radius:14px;padding:10px 12px;margin-bottom:8px;box-shadow:0 4px 18px rgba(30,70,120,.07)}
html.pano-phone-mode .ph-sum-company{font-size:11.5px;color:#6b7c93;font-weight:600}
html.pano-phone-mode .ph-sum-title{font-size:16px;font-weight:800;color:#1b5f9e;margin:2px 0 6px}
html.pano-phone-mode .ph-sum-kv{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-top:1px solid #edf2f8;font-size:12.5px}
html.pano-phone-mode .ph-sum-kv span{color:#6b7c93;font-weight:500}
html.pano-phone-mode .ph-sum-kv strong{font-weight:700;text-align:end;overflow-wrap:anywhere}
html.pano-phone-mode .ph-sum-card{background:#fff;border:1px solid #dbe6f3;border-radius:13px;padding:9px 12px;margin-bottom:8px;box-shadow:0 3px 12px rgba(30,70,120,.05)}
html.pano-phone-mode .ph-sum-card-title{font-size:13px;font-weight:800;color:#1f2d45;margin-bottom:4px;overflow-wrap:anywhere}
html.pano-phone-mode .ph-sum-card-grid{display:flex;flex-wrap:wrap;gap:4px 12px}
html.pano-phone-mode .ph-sum-cell{display:flex;flex-direction:column;flex:1 1 28%}
html.pano-phone-mode .ph-sum-cell span{font-size:10.5px;color:#6b7c93;font-weight:500}
html.pano-phone-mode .ph-sum-cell b{font-size:12.5px;font-weight:700;direction:ltr;text-align:start}
html.pano-phone-mode .ph-sum-last b{color:#1b5f9e;font-weight:800}
html.pano-phone-mode .ph-sum-totals{background:#e9f2fb;border-radius:13px;padding:9px 12px;margin-bottom:8px}
html.pano-phone-mode .ph-sum-totals .ph-sum-kv{border-top:0;padding:4px 0}
html.pano-phone-mode .ph-sum-totals .ph-sum-net{font-size:14.5px;color:#1b5f9e}
html.pano-phone-mode .ph-sum-totals .ph-sum-net strong{font-weight:800}
html.pano-phone-mode .ph-sum-note{font-size:11.5px;color:#6b7c93;padding:4px 4px 10px}
html.pano-phone-mode .ph-print-stage{position:relative;flex:1;overflow:auto;overscroll-behavior:contain;direction:ltr;padding:22px 14px 30px}
html.pano-phone-mode .ph-print-sheet{width:max-content!important;min-width:794px!important;max-width:1100px!important;min-height:400px;position:relative;box-sizing:border-box;background:white;color:#111;padding:0;direction:rtl;overflow:hidden}
html.pano-phone-mode .ph-print-sheet *{max-height:none}
html.pano-phone-mode .ph-print-sheet table{width:100%;table-layout:auto;border-collapse:collapse}
html.pano-phone-mode .ph-print-sheet :where(th,td){overflow-wrap:normal;word-break:normal;white-space:normal;vertical-align:top}
html.pano-phone-mode .ph-print-viewer :where(.chart-print-actions,.jvp-actions,[data-print]){pointer-events:none}
html.pano-phone-mode .ph-print-sheet .chart-print-actions{display:none!important}
html.pano-phone-mode.ph-print-locked,html.pano-phone-mode.ph-print-locked body{overflow:hidden!important}
}
@media print{.ph-print-viewer,.ph-print-open{display:none!important}}
/* Phone mode: sales / purchase invoice entry (cards instead of the wide grid; the desktop design is untouched) */
@media screen{
html.pano-native-shell .si-edit :is(.si-head,.si-head-one,.si-return){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:12px!important;flex-wrap:wrap}
html.pano-native-shell .si-edit :is(.si-head,.si-head-one,.si-return)>:is(.field,.si-mode,.si-sm){flex:none!important;width:auto!important;min-width:0!important}
html.pano-native-shell .si-edit :is(.si-head,.si-return)>.si-wide{grid-column:1/-1!important}
html.pano-native-shell .si-edit .si-head .control{font-size:13px!important}
html.pano-native-shell .si-edit .si-accounts{display:grid!important;gap:8px!important;padding:0 12px 12px!important}
html.pano-native-shell .si-edit .si-side{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
html.pano-native-shell .si-edit .si-side-title{font-size:14px!important;text-align:start!important}
html.pano-native-shell .si-edit .si-side>span:empty{display:none}
html.pano-native-shell .si-edit .si-side-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
html.pano-native-shell .si-edit .si-side-row.si-note-row{grid-template-columns:minmax(0,1fr)!important}
html.pano-native-shell .si-edit .jv-grid-wrap{overflow:visible!important;margin:0!important}
html.pano-native-shell .si-edit table.si-grid{display:block!important;width:100%!important;min-width:0!important;table-layout:auto!important;border:0!important;background:none!important}
html.pano-native-shell .si-edit table.si-grid>thead{display:none!important}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]{display:block!important;border:1px solid var(--ph-stroke)!important;border-radius:14px!important;padding:10px!important;margin:0 0 8px!important;background:#fff!important;box-shadow:var(--ph-shadow)}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px 6px;align-items:end;width:100%;border:0!important;background:none!important}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td{display:flex!important;flex-direction:column;gap:2px;padding:0!important;border:0!important;width:auto!important;min-width:0;overflow:visible!important;white-space:normal!important;vertical-align:top}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td::before{content:attr(data-phone-label);font-size:10.5px;font-weight:600;color:var(--ph-muted);line-height:1.2}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(1){grid-row:1;grid-column:1/4}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(12){grid-row:1;grid-column:4/7}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(2){grid-row:2;grid-column:1/3}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(3){grid-row:2;grid-column:3/7}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(4){grid-row:3;grid-column:1/3}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(5){grid-row:3;grid-column:3/5}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(6){grid-row:3;grid-column:5/7}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(7){grid-row:4;grid-column:1/3}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(8){grid-row:4;grid-column:3/5}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(9){grid-row:4;grid-column:5/7}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(10){grid-row:5;grid-column:1/3}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(11){grid-row:5;grid-column:3/7}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:is(:nth-child(1),:nth-child(12))::before{content:none}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(1){flex-direction:row!important;align-items:center;gap:8px!important;font-weight:800;font-size:13px;color:var(--ph-blue)}
html.pano-native-shell .si-edit table.si-grid>tbody[data-si-row]>tr:first-child>td:nth-child(12){align-items:flex-end;justify-content:center}
html.pano-native-shell .si-edit .si-grid :is(.control,textarea.si-ta,select.control){height:auto!important;min-height:34px!important;font-size:13px!important;padding:4px 8px!important;border-radius:10px!important}
html.pano-native-shell .si-edit .si-grid textarea.si-ta{min-height:34px!important;overflow:hidden;resize:none}
html.pano-native-shell .si-edit .si-grid .si-toggle{min-height:30px!important;min-width:30px;padding:0!important;border:1px solid var(--ph-field-stroke)!important;border-radius:9px!important;font-size:12px!important}
html.pano-native-shell .si-edit .si-grid .jv-del{min-height:30px!important;min-width:34px;width:auto!important;padding:0 10px!important}
html.pano-native-shell .si-edit .si-grid tr.si-sub:not([hidden]){display:block!important;margin-top:8px;padding-top:8px;border-top:1px dashed var(--ph-stroke)}
html.pano-native-shell .si-edit .si-grid tr.si-sub>td{display:block!important;padding:0!important;border:0!important}
html.pano-native-shell .si-edit .si-sub-box{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
html.pano-native-shell .si-edit .si-sub-field{display:flex!important;flex-direction:column;gap:2px;flex:none!important;width:auto!important;font-size:10.5px!important;color:var(--ph-muted)}
html.pano-native-shell .si-edit .si-sub-field .control{width:100%!important}
html.pano-native-shell .si-edit .si-tools{display:block!important;margin:0 0 8px!important}
html.pano-native-shell .si-edit :is(.si-tools [data-si-toggle-all],.jv-addbar [data-si-add]){width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:5px 12px!important}
html.pano-native-shell .si-edit .jv-addbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;position:static!important;margin:0 0 8px!important;min-height:0!important}
html.pano-native-shell .si-edit .jv-addbar .jv-info{position:static!important;transform:none!important;white-space:normal!important;flex-direction:column;gap:2px!important;margin:0!important;font-size:11px!important;color:var(--ph-muted);text-align:start}
html.pano-native-shell .si-edit .si-bottom{display:flex!important;flex-direction:column!important;gap:8px!important;margin:0!important}
html.pano-native-shell .si-edit .si-options{display:grid!important;gap:6px!important;margin:0!important}
html.pano-native-shell .si-edit .si-options label{display:flex!important;flex-direction:row;align-items:center;gap:8px;font-size:12.5px!important;font-weight:600!important;margin:0!important;white-space:normal}
html.pano-native-shell .si-edit .si-totals{display:grid!important;gap:6px!important;margin:0!important;min-width:0!important;width:100%!important}
html.pano-native-shell .si-edit .si-total{display:flex!important;justify-content:space-between;align-items:center;gap:8px;margin:0!important;padding:7px 12px!important;border:1px solid var(--ph-stroke)!important;border-radius:11px!important;background:var(--ph-field);font-size:13px!important}
html.pano-native-shell .si-edit .si-grand{background:var(--ph-soft)!important;font-weight:800!important;color:var(--ph-blue)}
html.pano-native-shell .si-edit .si-cheques{margin-top:12px!important;padding-top:10px!important}
html.pano-native-shell .si-edit table.si-cheque-grid{display:block!important;width:100%!important;table-layout:auto!important;border:0!important}
html.pano-native-shell .si-edit table.si-cheque-grid>thead{display:none!important}
html.pano-native-shell .si-edit table.si-cheque-grid>tbody{display:block!important}
html.pano-native-shell .si-edit table.si-cheque-grid tr[data-si-cheque]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px!important;margin:0 0 8px!important;border:1px solid var(--ph-stroke)!important;border-radius:14px!important;background:#fff!important;align-items:end}
html.pano-native-shell .si-edit table.si-cheque-grid tr[data-si-cheque]>td{display:flex!important;flex-direction:column;gap:2px;padding:0!important;border:0!important;width:auto!important}
html.pano-native-shell .si-edit table.si-cheque-grid tr[data-si-cheque]>td::before{content:attr(data-phone-label);font-size:10.5px;font-weight:600;color:var(--ph-muted)}
html.pano-native-shell .si-edit table.si-cheque-grid tr[data-si-cheque]>td:nth-child(1){grid-column:1/-1;flex-direction:row!important;font-weight:800;color:var(--ph-blue)}
html.pano-native-shell .si-edit table.si-cheque-grid tr[data-si-cheque]>td:nth-child(4){grid-column:1/-1}
html.pano-native-shell .si-edit table.si-cheque-grid tr[data-si-cheque]>td:is(:nth-child(1),:nth-child(6))::before{content:none}
html.pano-native-shell .si-edit .si-cheque-grid .control{height:auto!important;min-height:34px!important;font-size:13px!important}
html.pano-native-shell .si-edit .si-cheques-foot{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
html.pano-native-shell .si-edit .si-cheques-foot .si-total:first-of-type{margin-inline-start:0!important}
html.pano-native-shell .si-edit .panel-foot>:is(.btn,form){min-width:0!important;max-width:none!important;margin:0!important}
html.pano-native-shell .si-edit .panel-foot>form .btn{width:100%!important}
html.pano-native-shell .si-edit .panel-foot>.btn-primary{order:-1}
html.pano-native-shell .si-edit .panel-foot>:is(.ph-print-open,[data-si-print]){width:100%!important}
html.pano-native-shell .si-edit .panel-foot>.ph-print-open{grid-column:1/-1}
}
/* Phone mode: lists (fixed 10-row height of the desktop list is released; each row is a tappable card) */
@media screen{
html.pano-native-shell .scroll-y,html.pano-native-shell .jv-grid-wrap,html.pano-native-shell .document-list-ten-rows,html.pano-native-shell .jv-scroll{height:auto!important;max-height:none!important;overflow:visible!important}
html.pano-native-shell .panel .document-list-ten-rows>.grid-table tbody tr,html.pano-native-shell .panel .document-list-ten-rows>.grid-table tbody td{height:auto!important}
html.pano-native-shell .panel .document-list-ten-rows>.grid-table tbody td{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;padding:0!important}
html.pano-native-shell table.ph-records>tbody>tr>td:has(>input[type=radio]){display:none!important}
html.pano-native-shell table.ph-records>tbody>tr[data-pick]{cursor:pointer}
html.pano-native-shell table.ph-records>tbody>tr[data-pick]:active{background:var(--ph-soft)!important}
html.pano-native-shell table.ph-records>tbody>tr.group-row{background:var(--ph-soft)!important;box-shadow:none!important}
html.pano-native-shell table.ph-records>tbody>tr.group-row>td{flex-direction:row!important;align-items:center;gap:6px!important;font-size:14px!important}
html.pano-native-shell table.ph-records>tbody>tr.group-row>td::before{content:none}
html.pano-native-shell table.ph-records>tbody>tr.group-row .jv-count{font-size:11px!important;min-width:20px;height:20px;line-height:20px;padding:0 6px;border-radius:10px}
html.pano-native-shell table.ph-records>tfoot>tr>td{flex:1 1 auto!important;text-align:start}
html.pano-native-shell .si-edit .panel-foot{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
html.pano-native-shell .si-edit .panel-foot>:is(.btn,form){flex:1 1 calc(50% - 4px)!important;width:auto!important}
html.pano-native-shell .si-edit .panel-foot>.btn-primary{flex:1 1 100%!important}
}
/* Phone mode: the section picker (open button on the right, then the code and the name, no "Section" caption) */
@media screen{
html.pano-native-shell .od-pick table.ph-records>tbody>tr{justify-content:flex-start;gap:10px}
html.pano-native-shell .od-pick table.ph-records>tbody>tr>td{flex:0 0 auto;width:auto!important}
html.pano-native-shell .od-pick table.ph-records>tbody>tr>td.col-actions{order:-1;width:auto!important;min-width:40px!important}
html.pano-native-shell .od-pick table.ph-records>tbody>tr>td:nth-child(2){flex:1 1 0;text-align:start!important;align-items:flex-start!important}
html.pano-native-shell .od-pick table.ph-records>tbody>tr>td:nth-child(2)::before{content:none}
html.pano-native-shell .od-pick table.ph-records>tbody>tr>td:nth-child(1)::before{content:none}
html.pano-native-shell .od-pick table.ph-records>tbody>tr>td:nth-child(2){padding-inline-start:14px!important}
}
/* Phone mode: invoice list filters in pairs (from / to on one line); no first / last / between-numbers buttons */
@media screen{
html.pano-native-shell .sales-invoices-list .jv-filter{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
html.pano-native-shell .sales-invoices-list .jv-filter>:is(.field-wide,.jv-search,.jv-go,.field:has(#DocumentType),.field:has(#PaymentMethodId)){grid-column:1/-1!important}
html.pano-native-shell .sales-invoices-list .jv-filter .jv-go label{display:none}
html.pano-native-shell :is([data-jv-edge],[data-jv-between]){display:none!important}
}
/* Phone mode: long item names / descriptions show in full; no accounting-entry print */
@media screen{
html.pano-native-shell .si-edit textarea.control{field-sizing:content;height:auto!important;min-height:34px!important;overflow:hidden!important;line-height:1.5!important;padding-block:6px!important}
html.pano-native-shell .si-edit .panel-foot>[data-si-print=entry]{display:none!important}
}
@media screen{html.pano-phone-mode .ph-print-bar button{min-height:26px!important;height:26px!important;padding:0 12px!important;line-height:1!important;font-size:12px!important;border-radius:9px!important}
html.pano-phone-mode .ph-print-bar .ph-print-pdf{background:#12305a!important;color:#fff!important;border-color:#12305a!important;min-width:56px;font-weight:800!important}}
@media screen{html.pano-phone-mode .ph-print-bar .ph-print-exit{margin-inline-start:auto}}
/* WhatsApp share dialog (desktop and phone) */
.wa-dialog { width: 380px; max-width: 92vw; }
.wa-dialog .wa-title { margin: 0 0 12px; font-size: 1.1rem; color: var(--navy-text); text-align: start; }
.wa-dialog .wa-hint { margin: 6px 0 0; font-size: .8rem; font-weight: 400; color: #5B6B84; text-align: start; }
.wa-dialog .wa-msg { min-height: 1.4em; margin-top: 8px; font-size: .9rem; font-weight: 700; text-align: start; }
.wa-dialog .wa-msg.is-ok { color: #1c7c3a; }
.wa-dialog .wa-msg.is-err { color: #b00020; }
.wa-dialog .dialog-actions .btn { min-width: 90px; }
html .wa-dialog #wa-phone, html.pano-native-shell .wa-dialog #wa-phone { font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: .06em; text-align: center; height: auto !important; min-height: 46px; }
/* Phone mode: the "from" and "to" date fields of every filter share one line */
@media screen{
html.pano-native-shell :is(.st-filter,.jv-filter,.st-filter-wide,.filter-bar,.filters){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px 8px!important}
html.pano-native-shell :is(.st-filter,.jv-filter,.st-filter-wide,.filter-bar,.filters)>*{grid-column:1/-1!important}
html.pano-native-shell :is(.st-filter,.jv-filter,.st-filter-wide,.filter-bar,.filters)>.field:has(>input[type=date]){grid-column:auto!important}
html.pano-native-shell .sales-invoices-list .jv-filter>*{grid-column:auto!important}
}
@media screen{
html.pano-native-shell table.ph-records>tbody>tr>td.col-actions{flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important}
html.pano-native-shell table.ph-records>tbody>tr>td.col-actions :is(a,button,.btn){width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;min-height:36px!important;margin:0!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box!important}
html.pano-native-shell table.ph-records>tbody>tr{overflow:hidden}
}
@media screen{
html.pano-native-shell table.ph-records>tfoot>tr{justify-content:flex-start}
html.pano-native-shell table.ph-records>tfoot td.jv-foot-sum{margin-inline-start:auto!important;flex:0 0 auto!important;text-align:end!important}
html.pano-native-shell table.ph-records>tfoot td.jv-foot-sum .jv-foot-count{display:inline-flex;gap:8px;align-items:center}
}
@media screen{
html.pano-native-shell .jv-filter.jv-filter{grid-template-columns:repeat(6,minmax(0,1fr))!important}
html.pano-native-shell .jv-filter.jv-filter>.field:has(>input[type=date]),html.pano-native-shell .jv-filter.jv-filter>.field:has(>input[type=number]),html.pano-native-shell .jv-filter.jv-filter>.field:has(>select[name=M1]),html.pano-native-shell .jv-filter.jv-filter>.field:has(>select[name=M2]),html.pano-native-shell .sales-invoices-list .jv-filter.jv-filter>*{grid-column:span 3!important}
html.pano-native-shell .jv-filter.jv-filter>.jv-search{grid-column:span 4!important}
html.pano-native-shell .jv-filter.jv-filter>.jv-go{grid-column:span 2!important}
html.pano-native-shell .jv-filter.jv-filter>.jv-go>label{display:none!important}
html.pano-native-shell .jv-filter.jv-filter>.jv-go{align-self:end}
}
@media screen{
html.pano-native-shell .jv-filter.jv-filter.jv-filter>.jv-search,html.pano-native-shell .sales-invoices-list .jv-filter.jv-filter.jv-filter>.jv-search{grid-column:1 / span 4!important}
html.pano-native-shell .jv-filter.jv-filter.jv-filter>.jv-go,html.pano-native-shell .sales-invoices-list .jv-filter.jv-filter.jv-filter>.jv-go{grid-column:5 / span 2!important}
}
@media screen{
html.pano-native-shell #jv-filter .jv-filter.jv-filter>.jv-search{grid-column:1 / span 4!important}
html.pano-native-shell #jv-filter .jv-filter.jv-filter>.jv-go{grid-column:5 / span 2!important}
html.pano-native-shell #jv-filter .jv-filter.jv-filter>.jv-go>label{display:none!important}
}
@media screen{
html.pano-native-shell,html.pano-native-shell body{font-size:12px!important}
html.pano-native-shell :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea,.control){min-height:34px!important;font-size:12px!important;padding:4px 10px!important}
html.pano-native-shell :where(label,.field>label,.form-group>label){font-size:11px!important}
html.pano-native-shell :where(button,.btn,input[type=submit],input[type=button]){min-height:34px!important;font-size:12.5px!important}
html.pano-native-shell table.ph-records>tbody>tr>td{font-size:12px!important}
html.pano-native-shell table.ph-records>tbody>tr>td::before{font-size:10px}
html.pano-native-shell .ph-print-open{min-height:34px;font-size:12.5px!important}
}
@media screen{
html.pano-native-shell,html.pano-native-shell body{font-size:11px!important}
html.pano-native-shell :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea,.control){min-height:32px!important;font-size:11px!important;padding:3px 9px!important}
html.pano-native-shell :where(label,.field>label,.form-group>label){font-size:10px!important}
html.pano-native-shell :where(button,.btn,input[type=submit],input[type=button]){min-height:32px!important;font-size:11.5px!important}
html.pano-native-shell table.ph-records>tbody>tr>td{font-size:11px!important}
html.pano-native-shell table.ph-records>tbody>tr>td::before{font-size:9.5px}
html.pano-native-shell table.ph-records>tfoot td,html.pano-native-shell .si-total,html.pano-native-shell .si-edit .si-head .control,html.pano-native-shell .si-edit .si-grid :is(.control,textarea.si-ta,select.control),html.pano-native-shell .si-edit .si-cheque-grid .control{font-size:11px!important}
html.pano-native-shell .panel-head h1,html.pano-native-shell h1{font-size:15px!important}
html.pano-native-shell .ph-print-open{min-height:32px;font-size:11.5px!important}
}
@media screen{
html.pano-native-shell :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea,.control){min-height:30px!important;padding:2px 8px!important;border-radius:9px!important}
html.pano-native-shell :where(button,.btn,input[type=submit],input[type=button]){min-height:30px!important;padding:3px 12px!important;border-radius:9px!important}
html.pano-native-shell .si-edit .si-grid :is(.control,textarea.si-ta,select.control),html.pano-native-shell .si-edit .si-cheque-grid .control{min-height:30px!important}
html.pano-native-shell .ph-print-open{min-height:30px}
html.pano-native-shell :where(.field){gap:3px}
}
@media screen{
html.pano-native-shell input[type=date].control,html.pano-native-shell input[type=date]{text-align:right!important;direction:rtl!important;padding-left:36px!important;padding-right:10px!important}
html.pano-native-shell input[type=date]::-webkit-datetime-edit{text-align:right!important;padding:0!important}
html.pano-native-shell input[type=date]::-webkit-datetime-edit-fields-wrapper{direction:ltr}
}
@media screen{
html.pano-phone-mode .ph-sum-company{font-size:10px!important}
html.pano-phone-mode .ph-sum-title{font-size:13.5px!important}
html.pano-phone-mode .ph-sum-kv{font-size:10.5px!important;padding:3px 0!important}
html.pano-phone-mode .ph-sum-card-title{font-size:11.5px!important}
html.pano-phone-mode .ph-sum-cell span{font-size:9px!important}
html.pano-phone-mode .ph-sum-cell b{font-size:10.5px!important}
html.pano-phone-mode .ph-sum-totals .ph-sum-net{font-size:12px!important}
html.pano-phone-mode .ph-sum-note{font-size:10px!important}
html.pano-phone-mode .ph-sum-head,html.pano-phone-mode .ph-sum-card,html.pano-phone-mode .ph-sum-totals{padding:8px 10px!important}
}
@media screen{
html.pano-phone-mode .ph-sum-head{text-align:center!important}
html.pano-phone-mode .ph-sum-head .ph-sum-company,html.pano-phone-mode .ph-sum-head .ph-sum-title,html.pano-phone-mode .ph-sum-head .ph-sum-note{text-align:center!important}
html.pano-phone-mode .ph-sum-head .ph-sum-note{padding:4px 0 2px!important}
html.pano-phone-mode .ph-sum-card-title{font-size:10.5px!important}
html.pano-phone-mode .ph-sum-cell span{font-size:8.5px!important}
html.pano-phone-mode .ph-sum-cell b{font-size:9.5px!important}
html.pano-phone-mode .ph-sum-kv{font-size:9.5px!important}
html.pano-phone-mode .ph-sum-totals .ph-sum-net{font-size:11px!important}
html.pano-phone-mode .ph-sum-note{font-size:9.5px!important}
}
@media screen{
html.pano-native-shell dialog#confirm-dialog.dialog{width:min(300px,calc(100vw - 40px))!important;max-width:300px!important;min-width:0!important;padding:16px 16px 14px!important;border-radius:16px!important;margin:auto!important}
html.pano-native-shell #confirm-dialog #confirm-text{font-size:12px!important;line-height:1.5!important}
html.pano-native-shell #confirm-dialog .dialog-actions{display:flex!important;flex-direction:row;gap:8px!important;margin-top:12px!important}
html.pano-native-shell #confirm-dialog .dialog-actions>*{flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:30px!important;padding:3px 8px!important;font-size:12px!important}
}
@media screen{
html.pano-native-shell .entry{padding:14px 14px 24px;align-content:start;justify-items:center}
html.pano-native-shell .login-card{width:min(360px,100%)!important;padding:22px 18px 18px!important;border:1.5px solid #9db8d8!important;border-radius:18px!important;box-shadow:0 8px 24px rgba(24,65,104,.12)!important}
html.pano-native-shell .login-brand{flex-direction:column;gap:8px;margin-bottom:10px;text-align:center}
html.pano-native-shell .login-mark{width:44px!important;height:44px!important;font-size:21px!important;border-radius:13px!important}
html.pano-native-shell .login-brand-text{justify-items:center;text-align:center}
html.pano-native-shell .login-brand-text strong{font-size:15px!important}
html.pano-native-shell .login-brand-text small{font-size:10.5px!important}
html.pano-native-shell .login-card h1{font-size:15px!important;margin:4px 0 14px!important}
html.pano-native-shell .login-card .field{margin:0 0 12px!important;display:flex;flex-direction:column;gap:5px}
html.pano-native-shell .login-card .pw-wrap{position:relative;display:block}
html.pano-native-shell .login-card .pw-wrap .control{padding-inline-end:12px!important;padding-inline-start:38px!important}
html.pano-native-shell .login-card .pw-eye{position:absolute!important;inset-inline-end:auto!important;inset-inline-start:4px!important;left:4px!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important;width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;display:grid!important;place-items:center}
html.pano-native-shell .login-card .pw-eye svg{width:17px;height:17px}
html.pano-native-shell .login-card .btn-block{width:100%!important;margin-top:4px}
html.pano-native-shell .login-card .mobile-mode-entry{margin-top:10px}
html.pano-native-shell .login-card .mobile-mode-switch{font-size:11.5px!important;min-height:30px!important}
}
@media screen{
html.pano-native-shell .company-index-page .grid-table.is-company{table-layout:fixed;width:100%!important}
html.pano-native-shell .company-index-page .grid-table.is-company :is(th,td):nth-child(3){display:none!important}
html.pano-native-shell .company-index-page .grid-table.is-company th:nth-child(1){width:46px!important;padding-inline:2px!important;font-size:10.5px!important}
html.pano-native-shell .company-index-page .company-list-tools>a.btn{display:none!important}
html.pano-native-shell .company-index-page .grid-table.is-company th:nth-child(2){width:auto!important}
html.pano-native-shell .company-index-page .grid-table.is-company th:nth-child(4){width:56px!important}
html.pano-native-shell .company-index-page .grid-table.is-company td:nth-child(1){padding:6px 2px!important;text-align:center!important;font-size:11px}
html.pano-native-shell .company-index-page .grid-table.is-company td:nth-child(2){padding:8px 10px!important;font-size:12px;font-weight:700;white-space:normal!important;text-align:start!important}
html.pano-native-shell .company-index-page .grid-table.is-company td.col-actions{padding:4px!important}
html.pano-native-shell .company-index-page .row-actions>a.btn,html.pano-native-shell .company-index-page .row-actions>.btn-danger,html.pano-native-shell .company-index-page .row-actions>form[action*=DeleteCompany]{display:none!important}
html.pano-native-shell .company-index-page .row-actions{justify-content:center}
html.pano-native-shell .company-index-page .row-actions .btn-icon{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important}
html.pano-native-shell .company-index-page .badge.is-warn{display:inline-block;margin:4px 0 0!important;font-size:10px!important}
}
@media screen{
html.pano-native-shell .company-index-page .grid-table.is-company td:nth-child(2){font-size:10.5px!important;font-weight:600!important;line-height:1.4}
html.pano-native-shell .company-index-page .grid-table.is-company th:nth-child(2){font-size:10.5px!important}
html.pano-native-shell .company-index-page .badge.is-warn{font-size:9px!important}
}
@media screen{
html.pano-native-shell .company-index-page .grid-table.is-company td:nth-child(2){font-weight:800!important}
}
@media screen{
html.pano-native-shell .years-panel:not(.year-add) .year-picker{grid-template-columns:minmax(0,1fr)!important;gap:14px!important;padding:16px 14px 6px!important;align-items:start!important}
html.pano-native-shell .years-panel:not(.year-add) .year-art,html.pano-native-shell .years-panel:not(.year-add) .year-side>a.btn{display:none!important}
html.pano-native-shell .years-panel:not(.year-add) .year-list{min-height:0!important;max-height:32vh!important}
html.pano-native-shell .years-panel:not(.year-add) .year-item{font-size:13px!important}
html.pano-native-shell .years-panel .year-picker h2{font-size:12px!important;margin:0 0 6px!important}
html.pano-native-shell .years-panel:not(.year-add) .year-big{font-size:34px!important;margin-bottom:4px}
html.pano-native-shell .years-panel:not(.year-add) .year-period{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px 8px!important}
html.pano-native-shell .years-panel:not(.year-add) .year-period>label{font-size:10.5px!important}
html.pano-native-shell .years-panel .company-years-actions{padding:6px 14px 16px!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
html.pano-native-shell .years-panel .company-years-action{width:100%!important;min-width:0!important}
}
@media screen{
html.pano-native-shell .years-panel:not(.year-add) .year-item:has(input:checked),html.pano-native-shell .years-panel:not(.year-add) .year-item:has(input:checked) span{color:#fff!important}
html.pano-native-shell .years-panel:not(.year-add) .year-period .control{width:100%!important}
html.pano-native-shell .years-panel:not(.year-add) .year-side{width:100%;--date-w:100%}
}
@media screen{
html.pano-native-shell .years-panel:not(.year-add) :is(.year-side,.company-years-actions){display:none!important}
html.pano-native-shell .years-panel:not(.year-add) .year-list{max-height:none!important}
html.pano-native-shell .years-panel:not(.year-add) .year-item{padding:12px 10px!important;font-size:14px!important}
}
@media screen{
html.pano-native-shell .branch-list-panel .panel-foot,html.pano-native-shell .branch-list-panel .grid-table.is-branch>thead,html.pano-native-shell .branch-list-panel .grid-table.is-branch :is(td,th):nth-child(1),html.pano-native-shell .branch-list-panel .grid-table.is-branch :is(td,th):nth-child(3){display:none!important}
html.pano-native-shell .branch-list-panel .scroll-y{min-height:0!important}
html.pano-native-shell .branch-list-panel .grid-table.is-branch,html.pano-native-shell .branch-list-panel .grid-table.is-branch>tbody{display:block!important;width:100%!important;border:0!important}
html.pano-native-shell .branch-list-panel .grid-table.is-branch>tbody>tr{display:block!important;margin:0 0 8px!important;padding:0!important;border:1px solid var(--ph-stroke,#dbe6f3)!important;border-radius:12px!important;background:#fff!important;cursor:pointer}
html.pano-native-shell .branch-list-panel .grid-table.is-branch>tbody>tr:active{background:var(--ph-soft,#eef4fb)!important}
html.pano-native-shell .branch-list-panel .grid-table.is-branch>tbody>tr>td:nth-child(2){display:block!important;padding:13px 14px!important;border:0!important;font-size:13px!important;font-weight:800!important;text-align:start!important;width:auto!important}
}
@media screen{
html.pano-native-shell .company-index-page .grid-table.is-company>thead,html.pano-native-shell .company-index-page .grid-table.is-company :is(td,th):is(:nth-child(1),:nth-child(3),:nth-child(4)){display:none!important}
html.pano-native-shell .company-index-page .scroll-y{min-height:0!important;max-height:none!important}
html.pano-native-shell .company-index-page .grid-table.is-company,html.pano-native-shell .company-index-page .grid-table.is-company>tbody{display:block!important;width:100%!important;border:0!important}
html.pano-native-shell .company-index-page .grid-table.is-company>tbody>tr{display:block!important;margin:0 0 8px!important;padding:0!important;border:1px solid var(--ph-stroke,#dbe6f3)!important;border-radius:12px!important;background:#fff!important;cursor:pointer}
html.pano-native-shell .company-index-page .grid-table.is-company>tbody>tr:active{background:var(--ph-soft,#eef4fb)!important}
html.pano-native-shell .company-index-page .grid-table.is-company>tbody>tr>td:nth-child(2){display:block!important;padding:13px 14px!important;border:0!important;width:auto!important}
}
@media screen{html.pano-native-shell .company-index-page .grid-table.is-company>tbody>tr[hidden],html.pano-native-shell .company-index-page .grid-table.is-company>tbody>tr.is-hidden{display:none!important}}
@media screen{
html.pano-native-shell :is(.company-index-page .grid-table.is-company,.branch-list-panel .grid-table.is-branch)>tbody>tr:nth-child(odd){background:#fff!important}
html.pano-native-shell :is(.company-index-page .grid-table.is-company,.branch-list-panel .grid-table.is-branch)>tbody>tr:nth-child(even){background:#e6f0fb!important}
html.pano-native-shell .years-panel:not(.year-add) .year-item:nth-child(odd){background:#fff}
html.pano-native-shell .years-panel:not(.year-add) .year-item:nth-child(even){background:#e6f0fb}
html.pano-native-shell .years-panel:not(.year-add) .year-item:has(input:checked){background:var(--primary)!important}
}
@media screen{html.pano-native-shell .years-panel:not(.year-add) .year-picker h2{margin:0 0 16px!important}}
@media screen{
html.pano-native-shell .phone-launcher-title,html.pano-native-shell .phone-launcher-foot,html.pano-native-shell .phone-action small{display:none!important}
html.pano-native-shell .phone-launcher{padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
html.pano-native-shell .phone-actions{display:block!important;border:2px solid #7d9fc7;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(24,65,104,.12)}
html.pano-native-shell .phone-action{border:0!important;border-bottom:1px solid #9db8d8!important;border-radius:0!important;box-shadow:none!important;min-height:50px!important;padding:8px 14px!important}
html.pano-native-shell .phone-action:last-child{border-bottom:0!important}
html.pano-native-shell .phone-action:nth-child(odd){background:#fff!important}
html.pano-native-shell .phone-action:nth-child(even){background:#e6f0fb!important}
html.pano-native-shell .phone-action strong{font-size:13px!important}
}
@media screen{
html.pano-native-shell .phone-action{min-height:80px!important;padding:12px 16px!important;gap:14px!important;transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;position:relative}
html.pano-native-shell .phone-icon{flex:0 0 52px!important;width:52px!important;height:52px!important;font-size:26px!important;border-radius:14px!important;background:#fff!important;border:1.5px solid #b7cde6;transition:background-color .18s ease,color .18s ease,transform .18s ease}
html.pano-native-shell .phone-action strong{font-size:14.5px!important}
html.pano-native-shell .phone-action:hover,html.pano-native-shell .phone-action:focus-visible{background:#d3e5f9!important;transform:translateX(-4px);box-shadow:inset -4px 0 0 #1b5f9e!important}
html.pano-native-shell .phone-action:active{background:#c2d9f3!important;transform:scale(.985);box-shadow:inset -4px 0 0 #12305a!important}
html.pano-native-shell .phone-action:hover .phone-icon,html.pano-native-shell .phone-action:active .phone-icon{background:#1b5f9e!important;color:#fff!important;transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){html.pano-native-shell .phone-action,html.pano-native-shell .phone-icon{transition:none}html.pano-native-shell .phone-action:hover{transform:none}}
@media screen{
html.pano-native-shell .ph-tabbar{bottom:auto!important;top:48px!important;height:54px!important;padding:3px!important;border-top:0!important;border-bottom:1px solid var(--ph-stroke)!important;box-shadow:0 3px 10px rgba(24,65,104,.08)}
html.pano-native-shell .ph-tabbar a.ph-active::after{bottom:0;top:auto}
html.pano-native-shell .ph-main.ph-has-nav{padding-top:64px!important;padding-bottom:16px!important}
}
@media screen{
@keyframes phone-shake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-4px) rotate(-1.2deg)}30%{transform:translateX(4px) rotate(1.2deg)}45%{transform:translateX(-3px) rotate(-.8deg)}60%{transform:translateX(3px) rotate(.8deg)}75%{transform:translateX(-2px) rotate(-.4deg)}90%{transform:translateX(2px) rotate(.4deg)}}
html.pano-native-shell .phone-actions{display:grid!important;gap:12px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
html.pano-native-shell .phone-action{border:1.5px solid #9db8d8!important;border-radius:16px!important;box-shadow:0 4px 12px rgba(24,65,104,.12)!important}
html.pano-native-shell .phone-action:last-child{border-bottom:1.5px solid #9db8d8!important}
html.pano-native-shell .phone-action:hover,html.pano-native-shell .phone-action:focus-visible{transform:none!important;box-shadow:0 6px 16px rgba(24,65,104,.2)!important;animation:phone-shake .5s ease-in-out}
html.pano-native-shell .phone-action:active{transform:scale(.985)!important;box-shadow:0 2px 6px rgba(24,65,104,.2)!important}
}
@media (prefers-reduced-motion:reduce){html.pano-native-shell .phone-action:hover,html.pano-native-shell .phone-action:focus-visible{animation:none}}
@media screen{
html.pano-native-shell .ph-main:has(>.phone-launcher){display:flex!important;flex-direction:column;justify-content:center;min-height:calc(100dvh - 60px)!important;padding-top:12px!important;padding-bottom:12px!important}
html.pano-native-shell .ph-main:has(>.phone-launcher)>.phone-launcher{width:100%;margin:0 auto!important}
}
@media screen{
html.pano-native-shell .entry:has(>.login-card),html.pano-native-shell .entry:has(>.branch-list-panel){min-height:100dvh!important;display:grid!important;align-content:center!important;align-items:center!important;justify-items:center!important;padding-top:16px!important;padding-bottom:16px!important;box-sizing:border-box}
html.pano-native-shell .entry>.branch-list-panel{width:min(420px,100%)!important}
}
/* Phone screen 70 x 160 mm (about 360 x 820 CSS px): on a wider window the phone pages stay in a column of that width, in the middle. */
@media screen and (min-width:481px){
html.pano-native-shell{background:#dfe8f3!important}
html.pano-native-shell body{width:100%!important;max-width:360px!important;margin-inline:auto!important;min-height:100dvh;box-shadow:0 0 0 1px #c3d3e6,0 12px 40px rgba(24,65,104,.18)}
html.pano-native-shell .ph-tabbar{left:0!important;right:0!important;width:360px!important;max-width:100%!important;margin-inline:auto!important}
}
@media screen and (max-width:360px){html.pano-native-shell .ph-main{padding-inline:8px!important}}
@media screen{
html.pano-native-shell .si-thermal-bar .btn{min-height:28px!important;height:28px!important;padding:0 10px!important;font-size:11.5px!important;border-radius:9px!important}
html.pano-native-shell .si-thermal{padding:8px 16px!important}
}
.si-thermal .si-th-row>.si-th-lbl{text-align:start}
@media screen,print{
.si-thermal{min-height:0!important;padding-top:14px!important;padding-bottom:18px!important;line-height:1.6!important}
.si-thermal .si-th-row{padding-block:3px}
.si-thermal .si-th-item{margin-bottom:8px}
.si-thermal .si-th-sep{margin:8px 0}
.si-thermal .si-th-title{margin:10px 0!important;padding:4px 0!important}
.si-thermal .si-th-company{margin-bottom:6px;font-size:10.5px!important}
.si-thermal .si-th-qr{margin:10px auto}
.si-thermal .si-th-small{margin-top:10px}
}
.si-ax-kv>strong,.si-th-row>strong{direction:ltr;unicode-bidi:isolate}
.si-ax-kv>strong bdi,.si-th-row>strong bdi{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
@media screen{html.pano-phone-mode .ph-print-sheet .jv-between .jv-print{border:0!important;margin:0!important;background:transparent!important}html.pano-phone-mode .ph-print-sheet .jv-between .jvp-foot{display:flex!important}}
@media screen{html.pano-native-shell .ci-foot a.ci-wide-btn[href*="InvoicesExcel"],html.pano-native-shell .ci-foot a.ci-wide-btn[href*="f.Detail"]{display:none!important}}
/* Cash drawer slip (80 mm) */
@page drawer { size: 80mm auto; margin: 0; }
.cash-drawer-body { page: drawer; margin: 0; width: 80mm; min-height: 1mm; }
@media screen { .cash-drawer-body { font-family: sans-serif; padding: 1rem; } }
@media print { .cash-drawer-body { visibility: hidden; } }

/* Phone: the page content stays hidden until the cards are ready (site.js removes ph-boot); after 1.2 s it shows anyway. */
@media screen {
    html.pano-native-shell.ph-boot .ph-main { visibility: hidden; animation: ph-boot-show 0s 1.2s forwards; }
    @keyframes ph-boot-show { to { visibility: visible; } }
}

/* Dashboard: the lists (branch, period) and the Show button stand under each other, as the first item of the summary cards row; the cards stay on one line. */
.db-kpis { grid-template-columns: minmax(230px, 1.7fr) repeat(6, minmax(0, 1fr)); align-items: stretch; }
.db-kpis > .db-kpi-filter { grid-column: auto; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--card-line); border-radius: 10px; }
.db-kpis > .db-kpi-filter .control { flex: 0 0 auto; width: 100%; min-width: 0; }
.db-kpis > .db-kpi-filter .btn { width: 100%; justify-content: center; }
@media (max-width: 1100px) { .db-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .db-kpis > .db-kpi-filter { grid-column: 1 / -1; } }
.db-kpis > .db-kpi:not(.db-kpi-filter) { text-align: center; justify-items: center; align-content: center; }
.db-kpis > .db-kpi .db-kpi-num { font-size: 17px; text-align: center; }
.db-kpis > .db-kpi .db-kpi-label { text-align: center; }
.db-kpis > .db-kpi .db-delta { text-align: center; }

/* Menu screens with groups: each group is its own rounded panel (no titles); the space between the panels divides them. */
.menu-panel .menu-groups { gap: 12px; }
.menu-panel .menu-groups .menu-group { position: relative; padding: 18px 20px 16px; background: #fff; border: 1px solid #cfdcec; border-radius: 24px; box-shadow: 0 8px 22px rgba(24, 65, 104, .09); }
.menu-panel .menu-groups .menu-group::before { content: ""; position: absolute; inset-inline: 24px; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #1b5f9e, #4f9bd8); }
.menu-panel .menu-groups .menu-grid { padding: 0; gap: 10px; }
.menu-panel .menu-groups .menu-grid > .menu-tile:not(.chq-stat) { flex-basis: 140px; width: 140px; min-width: 140px; max-width: 140px; height: 128px; min-height: 128px; gap: 8px; background: #f3f7fc; border: 1px solid #d6e2f0; border-radius: 18px; box-shadow: none; font-size: 13px; }
.menu-panel .menu-groups .menu-grid > .menu-tile:not(.chq-stat):hover { background: #fff; border-color: var(--primary); box-shadow: 0 10px 22px rgba(24, 65, 104, .16); }
.menu-panel .menu-groups .menu-tile img { box-sizing: content-box; width: 42px; height: 42px; padding: 9px; border-radius: 16px; background: #e1ecf8; object-fit: contain; }

/* Cheque sector: the same divided panels (the three tiles, the six counters, the two "today" cards). */
.menu-panel .menu-groups .chq-stats-group { width: min(100%, 1240px); }
.menu-panel .menu-groups .menu-grid.chq-stats-row { width: 100%; }
.menu-panel .menu-groups .menu-grid.chq-stats-row > .menu-tile.chq-stat { flex: 1 1 0; width: auto; min-width: 0; max-width: none; height: auto; min-height: 136px; padding: 10px 6px; background: #f3f7fc; border: 1px solid #d6e2f0; border-radius: 18px; box-shadow: none; }
.menu-panel .menu-groups .menu-grid.chq-stats-row > .menu-tile.chq-stat:hover { transform: none; box-shadow: none; border-color: #d6e2f0; }
.menu-panel .menu-groups .chq-today-row { gap: 10px; }
.menu-panel .menu-groups .chq-today { width: 340px; background: #f3f7fc; border: 1px solid #d6e2f0; border-radius: 18px; box-shadow: none; }
.menu-panel .menu-groups .chq-today:hover { background: #fff; border-color: var(--primary); box-shadow: 0 10px 22px rgba(24, 65, 104, .16); }

/* Opening balances: the "add row" button a little wider, the bottom buttons a little narrower (each one keeps a fixed width). */
@media screen and (min-width: 901px) {
    .ob-screen #ob-add-row, .ob-screen #so-add-row { min-width: 140px; justify-content: center; }
    .ob-screen .form-actions { justify-content: space-between; }
    .ob-screen .form-actions > .btn { flex: 0 0 190px; width: 190px; }
}

/* Store opening: the warehouse is a short box (type the number or pick from the list). */
.store-ob-screen .store-ob-table input.so-warehouse-select { height: 27px; min-height: 0; padding: 1px 4px; text-align: center; direction: ltr; font-weight: 700; }
.store-ob-screen .store-ob-table input.so-warehouse-select { text-align: center !important; direction: ltr; }
.store-ob-screen .store-ob-table .so-row-delete { display: inline-flex; justify-content: center; align-items: center; width: 28px; height: 27px; min-width: 28px; padding: 0; color: #b00020; border-color: #e3b5bc; }
.store-ob-screen .store-ob-table .so-row-delete:hover:not(:disabled) { background: #fde8ea; border-color: #b00020; }
.store-ob-screen .store-ob-table .so-multiline-value[data-unit] { text-align: center; }
.store-ob-screen .store-ob-table td:has(> input.so-warehouse-select), .store-ob-screen .store-ob-table th:last-child, .store-ob-screen .store-ob-table td:last-child { text-align: center !important; }
.store-ob-screen .store-ob-table input.so-warehouse-select { width: 100% !important; box-sizing: border-box; text-align: center !important; text-align-last: center; padding-inline: 2px !important; }
/* The list arrow of the warehouse box takes room on the right: the same room is kept on the left so the number is truly in the middle. */
.store-ob-screen .store-ob-table input.so-warehouse-select { padding-left: 22px !important; padding-right: 2px !important; }
.store-ob-screen .store-ob-table input.so-warehouse-select::-webkit-calendar-picker-indicator { width: 18px; margin: 0; padding: 0; }
/* Store opening: a shorter total row. */
.store-ob-screen .store-ob-table tfoot th, .store-ob-screen .store-ob-table tfoot td { height: 24px !important; padding: 0 6px !important; line-height: 1.2 !important; }

/* Items browser (cash sale screen): nicer cards and a wider Close button. */
.pos-browse-head [data-pos-browse-close] { min-width: 130px; width: 130px; justify-content: center; }
.pos-browse-cards { gap: 14px; grid-auto-rows: 172px; padding: 16px; }
.pos-card { position: relative; overflow: hidden; padding: 18px 10px 12px; border: 1px solid #cfdcec; border-radius: 18px; background: linear-gradient(180deg, #fff, #f1f6fc); box-shadow: 0 5px 14px rgba(24, 65, 104, .09); }
.pos-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; background: linear-gradient(90deg, #1b5f9e, #4f9bd8); }
.pos-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 12px 24px rgba(24, 65, 104, .16); }
.pos-card-img { width: 60px; height: 60px; border: 0; border-radius: 18px; background: #e1ecf8; }
.pos-card-img img { width: 38px; height: 38px; }
.pos-card strong { min-height: 2.6em; font-size: .88rem; font-weight: 800; color: #12305a; }
.pos-card em { padding: 3px 16px; font-size: 1rem; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(27, 95, 158, .25); }
.pos-card.is-added { background: linear-gradient(180deg, #fff, var(--ok-bg)); }
.pos-card.is-added::before { background: var(--ok); }
/* Chart of accounts: wider bottom buttons. */
.panel-foot.chart-accounts-bottom-actions .btn { flex: 0 0 150px; width: 150px; justify-content: center; text-align: center; }

/* ---- Item units (item card) and the unit column of the invoice lines ---- */
.iu-panel { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line, #d7dde5); border-radius: 10px; background: #fff; }
.iu-panel .itemcard-column-title { margin: 0 0 6px; text-align: center; }
.iu-hint { margin: 0 0 8px; font-size: 12px; color: #5b6573; text-align: center; }
.iu-scroll { overflow-x: auto; margin-bottom: 8px; }
.iu-table { width: 100%; table-layout: fixed; min-width: 720px; }
.iu-table th { text-align: center; font-size: 12px; padding: 4px 3px; }
.iu-table td { padding: 3px; }
.iu-table th:first-child { width: 16%; }
.iu-table th:nth-child(2) { width: 9%; }
.iu-table th:nth-child(3) { width: 15%; }
.iu-table th:last-child { width: 44px; }
.iu-table .control { width: 100%; text-align: center; font-size: 12px; }
.iu-panel [data-iu-add] { display: block; margin: 0 auto; }
.si-edit .si-grid select.si-unitsel { font-size: 10.5px; padding-inline: 2px; }
html.pano-native-shell .iu-scroll { overflow-x: auto; }

/* Item units table: tight rows, no horizontal scroll, wide add button on the right */
.iu-panel .iu-scroll { overflow-x: visible; margin-bottom: 6px; }
.iu-panel .iu-table { min-width: 0; width: 100%; border-collapse: collapse; }
.iu-panel .iu-table th { padding: 2px 2px; font-size: 11px; line-height: 1.2; }
.iu-panel .iu-table td { padding: 1px 2px; }
.iu-panel .iu-table .control { height: 26px; min-height: 26px; padding: 0 3px; font-size: 11.5px; }
.iu-panel .iu-table .jv-del { width: 26px; height: 26px; }
.iu-panel [data-iu-add] { display: block; margin: 0; margin-inline-start: 0; margin-inline-end: auto; width: 220px; }
html.pano-native-shell .iu-panel .iu-scroll { overflow-x: auto; }
html.pano-native-shell .iu-panel .iu-table { min-width: 720px; }
html.pano-native-shell .iu-panel [data-iu-add] { width: 100%; }

/* Item units: the hint (small) and the add button on one line, button on the left */
.iu-panel .iu-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; direction: rtl; }
.iu-panel .iu-bar .iu-hint { flex: 1 1 auto; margin: 0; font-size: 10.5px; line-height: 1.4; text-align: start; }
.iu-panel .iu-bar [data-iu-add] { flex: 0 0 auto; width: 150px; margin: 0; }
html.pano-native-shell .iu-panel .iu-bar { flex-direction: column; align-items: stretch; }
html.pano-native-shell .iu-panel .iu-bar [data-iu-add] { width: 100%; }

/* Item units: add button = same size as the Exit button, navy */
.iu-panel .iu-bar [data-iu-add] { width: 175px; min-height: 38px; background: var(--navy); border-color: var(--navy); color: #fff; justify-content: center; text-align: center; }
.iu-panel .iu-bar [data-iu-add]:hover { background: #1d4b7d; border-color: #1d4b7d; color: #fff; }
html.pano-native-shell .iu-panel .iu-bar [data-iu-add] { width: 100%; background: var(--navy) !important; color: #fff !important; }

/* Invoice unit cell: the name box (one unit) or the chooser (extra units) - [hidden] must win over the control display */
.si-edit .si-grid [data-si="unit"][hidden], .si-edit .si-grid [data-si="unitname"][hidden] { display: none !important; }

/* Invoice unit cell with extra units: the wrapping name stays visible, the chooser lies over it invisibly */
.si-edit .si-grid td.si-unit-multi { position: relative; }
.si-edit .si-grid td.si-unit-multi select.si-unitsel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.si-edit .si-grid td.si-unit-multi textarea.si-unit { padding-inline-end: 22px; }
.si-edit .si-grid td.si-unit-multi::after { content: "\25BE"; position: absolute; inset-inline-end: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #245F97; font-size: 13px; }

/* Original invoice number on a return: light tint to stand out */
.control[data-si="original"] { background: #fff3c4; border-color: #e0b84a; }
.control[data-si="original"]:focus { background: #fff8dc; }

/* Warehouse documents: the unit of a line (a wrapping name; with extra units an invisible chooser lies over it) */
.si-edit .wd-grid select.si-unitsel { font-size: 10.5px; padding-inline: 2px; }
.si-edit .wd-grid textarea.si-unit { font-size: 10.5px; }
[data-wd="unit"][hidden] { display: none !important; }
.si-edit .wd-grid td.si-unit-multi { position: relative; }
.si-edit .wd-grid td.si-unit-multi select.si-unitsel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.si-edit .wd-grid td.si-unit-multi textarea.si-unit { padding-inline-end: 22px; }
.si-edit .wd-grid td.si-unit-multi::after { content: "\25BE"; position: absolute; inset-inline-end: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #245F97; font-size: 13px; }

/* The Add line button sits close under the lines table: the same on the invoices and the warehouse documents. */
.si-edit .jv-addbar:has([data-si-add]), .si-edit .wd-addrow { margin-top: 4px; }
.si-edit .jv-grid-wrap:has(+ .jv-addbar), .si-edit .jv-grid-wrap:has(+ .wd-addrow) { margin-bottom: 0; padding-bottom: 0; }

/* Totals: a little lower (the Add line button moved up, the totals follow it). */
.si-edit .si-totals { margin-top: -30px; }
html.pano-native-shell .si-edit .si-totals { margin-top: 10px !important; }
.si-edit .si-total { padding-top: 5px; padding-bottom: 5px; }
html.pano-native-shell .si-edit .si-total { padding: 10px 12px !important; }

/* Assembly document: the box of the new item above the components */
.si-edit .wd-section-title { padding-block: 6px 0; font-size: 14px; }
.si-edit .wd-product { display: grid; grid-template-columns: 160px minmax(0, 1fr) 190px 130px 130px; gap: 8px; align-items: start; }
.si-edit .wd-product .field { margin: 0; min-width: 0; }
.si-edit .wd-product .control { width: 100%; min-width: 0; box-sizing: border-box; height: 34px; min-height: 34px; font-size: 12px; }
.si-edit .wd-product textarea.si-ta { display: block; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; font-weight: 700; padding-top: 6px; padding-bottom: 4px; }
.si-edit .wd-p-unitbox { position: relative; }
.si-edit .wd-p-unitbox select.si-unitsel { font-size: 10.5px; padding-inline: 2px; }
.si-edit .wd-p-unitbox.si-unit-multi select.si-unitsel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.si-edit .wd-p-unitbox.si-unit-multi textarea.si-unit { padding-inline-end: 22px; }
.si-edit .wd-p-unitbox.si-unit-multi::after { content: "\25BE"; position: absolute; inset-inline-end: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #245F97; font-size: 13px; }
@media (max-width: 900px) { .si-edit .wd-product { grid-template-columns: 1fr 1fr; } .si-edit .wd-product .wd-p-name { grid-column: 1 / -1; } }

.si-edit .si-head-one[data-wd-head] > .wd-note-inline { flex: 3 1 0; min-width: 300px; }

/* Assembly print: the produced item takes one line only, the components fill the rest of the page. */
.si-ax-items.wd-print-product { flex: 0 0 auto; }
.si-ax-items.wd-print-product table { align-self: auto; }
.si-ax-items.wd-print-product td { border-bottom: 0; padding-block: 4px; }

.si-edit .wd-grid .wd-g-store { width: 150px; }
.si-edit .wd-grid select.control { font-size: 11px; padding-inline: 4px; }

/* Production formulas list: the item name takes the most room */
.wd-list.bf-list { table-layout: fixed !important; width: 100% !important; }
.wd-list.bf-list col.bf-c-pick { width: 4% !important; }
.wd-list.bf-list col.bf-c-no { width: 9% !important; }
.wd-list.bf-list col.bf-c-code { width: 10% !important; }
.wd-list.bf-list col.bf-c-name { width: 45% !important; }
.wd-list.bf-list col.bf-c-unit { width: 12% !important; }
.wd-list.bf-list col.bf-c-qty { width: 10% !important; }
.jv-between-si .jvp-filter.bf-between { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) auto; }

/* Production document: the accounts of the entry and the cost boxes */
.si-edit .wd-mf-accs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.si-edit .wd-mf-accbox { display: flex; gap: 6px; }
.si-edit .wd-mf-accbox > .control:first-child { flex: 0 0 120px; width: 120px; min-width: 0; }
.si-edit .wd-mf-accbox > .control:last-child { flex: 1 1 auto; min-width: 0; }
.si-edit .wd-mf-sums { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.si-edit .wd-mf-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.si-edit .wd-mf-bar .wd-addrow, .si-edit .wd-mf-bar .wd-mf-sums { margin-top: 8px; }
.si-edit .wd-mf-sum { display: flex; border: 1px solid var(--line, #b9c7d8); border-radius: 6px; overflow: hidden; min-width: 260px; }
.si-edit .wd-mf-sum > span { flex: 1 1 auto; padding: 8px 12px; background: #eef4fb; font-weight: 700; }
.si-edit .wd-mf-sum > strong { flex: 0 0 130px; padding: 8px 12px; text-align: center; background: #fff; font-size: 14px; }
@media (max-width: 900px) { .si-edit .wd-mf-accs { grid-template-columns: 1fr; } .si-edit .wd-mf-sum { min-width: 0; flex: 1 1 100%; } }
.si-edit .wd-product.wd-product-mf { grid-template-columns: 160px minmax(0, 1fr) 190px 130px 130px 130px; }
@media (max-width: 900px) { .si-edit .wd-product.wd-product-mf { grid-template-columns: 1fr 1fr; } }

/* Production document print form (like the form of the Access program). */
.mf-print { display: block; font-size: 9pt; }
.mf-print .mf-p-company { background: #d9d9d9; border: 1px solid #bbb; padding: 8px 14px; text-align: center; margin: 0 6% 14px; }
.mf-print .mf-p-title { text-align: center; font-weight: 700; font-size: 13pt; margin-bottom: 8px; }
.mf-print .si-ax-ar { display: block; }
.mf-print .si-ax-en { display: block; font-size: 7pt; font-weight: 400; color: #444; }
.mf-print .mf-p-box { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 6px; }
.mf-print .mf-p-kv { display: flex; align-items: center; gap: 6px; }
.mf-print .mf-p-kv > strong { border: 1px solid #999; padding: 3px 10px; min-width: 70px; text-align: center; font-weight: 400; }
.mf-print .mf-p-grow { flex: 1 1 auto; }
.mf-print .mf-p-grow .mf-p-name { flex: 1 1 auto; background: #d9d9d9; text-align: start; }
.mf-print .mf-p-red { color: #c00; font-weight: 700 !important; }
.mf-print .mf-p-items table, .mf-print .mf-p-entry { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mf-print .mf-p-items th { background: #d9d9d9; border: 1px solid #999; padding: 3px 4px; font-weight: 400; }
.mf-print .mf-p-items td, .mf-print .mf-p-entry td { border: 1px solid #bbb; padding: 4px 5px; }
.mf-print .mf-ctr { text-align: center; }
.mf-print .mf-c-code { width: 8%; } .mf-print .mf-c-unit { width: 8%; } .mf-print .mf-c-store { width: 14%; } .mf-print .mf-c-num { width: 10%; }
.mf-print .mf-p-weights { border: 1px solid #bbb; padding: 14px 12px; margin: 14px 0; justify-content: space-between; }
.mf-print .mf-p-entry { margin-top: 18px; }
.mf-print .mf-p-entry td { padding: 3px 5px; }
.mf-print .mf-e-label { width: 14%; } .mf-print .mf-e-no { width: 14%; } .mf-print .mf-e-amount { width: 14%; }
.mf-print .mf-p-entry .mf-e-head, .mf-print .mf-p-entry .mf-e-lab { border: 0; }
.mf-print .mf-p-words { border: 1px solid #bbb; padding: 6px 12px; margin-top: 4px; }
.mf-print .mf-p-note { margin-top: 6px; }
.mf-print .mf-p-sign { display: flex; justify-content: space-between; margin-top: 40px; text-align: center; }
.mf-print .mf-p-sign > div { width: 24%; }
.mf-print .mf-p-sign i { display: block; border-top: 1px solid #999; margin-top: 60px; }
.mf-print .mf-p-meta { flex-wrap: nowrap; width: 100%; }
.mf-print .mf-p-meta .mf-p-grow .mf-p-name { background: transparent; text-align: center; }
.mf-print .mf-p-company, .mf-print .mf-p-grow .mf-p-name, .mf-print .mf-p-items th { background: transparent; }
.si-edit .wd-invlink { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 12px; }
.si-edit .wd-invlink-form { display: flex; align-items: center; gap: 6px; }
.si-edit .wd-invlink-form .control { width: 150px; }
.si-edit .wd-invlink .btn, .si-edit .wd-invlink .control { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.si-edit .wd-invlink .btn { min-width: 150px; padding-inline: 18px; }
.si-edit .wd-invlink a.btn[href*="Create"] { min-width: 200px; }
.si-edit .wd-invlink .wd-invlink-trail { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
.si-edit .wd-invlink { padding-block: 0; margin-top: 2px; margin-bottom: 0; }
.si-edit .wd-invlink .wd-invlink-trail, .si-edit .wd-invlink .wd-invlink-trail span, .si-edit .wd-invlink .wd-invlink-trail strong { font-size: 13.5px; }
.si-edit .wd-invlink { margin-bottom: -8px; }
.si-edit .wd-invlink + .panel-foot { margin-top: 0; }
.si-edit .wd-invlink { margin-bottom: 16px; }
.si-edit .wd-mf-bar .wd-addrow { margin-top: -6px; }
/* The production voucher form in the design of the other print forms (black rules, no grey backgrounds). */
.wd-print.mf-print { display: flex; font-size: inherit; }
.wd-print.mf-print .si-ax-items { flex: 0 0 auto; }
.wd-print.mf-print .si-ax-items tr.si-ax-fill td { height: 40mm; }
.wd-print .si-ax-items col.mf-c-store { width: 13%; } .wd-print .si-ax-items col.mf-c-num { width: 10%; }
.wd-print .mf-entry col.mf-e-label { width: 14%; } .wd-print .mf-entry col.mf-e-no { width: 14%; } .wd-print .mf-entry col.mf-e-amount { width: 14%; }
.wd-print .mf-entry td { border: 1px solid #000; }
.wd-print .si-ax-strip.mf-p-gap { margin-top: 10px; }
.wd-print .si-ax-words { background: transparent; }
.wd-print .mf-p-sign { display: flex; justify-content: space-between; margin-top: 10mm; text-align: center; font-size: 8.5pt; }
.wd-print .mf-p-sign > div { width: 24%; }
.wd-print .mf-p-sign i { display: block; border-top: 1px solid #000; margin-top: 14mm; }
.si-edit .wd-mf-bar .wd-addrow { margin-top: -14px; }
.wd-print .mf-entry.mf-p-gap { margin-top: 10px; }
.si-edit .wd-mf-bar .wd-addrow { margin-top: -22px; }
.wd-list.wd-list-production col.wd-c-pick { width: 4% !important; }
.wd-list.wd-list-production col.wd-c-no { width: 14% !important; }
.wd-list.wd-list-production col.wd-c-date { width: 14% !important; }
.wd-list.wd-list-production col.wd-c-value { width: 16% !important; }
.wd-list.wd-list-production col:not([class]) { width: auto !important; }

/* ---- cost and profit report: column widths so the item name has room and the rows stay short ---- */
.icr-table { table-layout: fixed; width: 100%; }
.icr-table .icr-date { width: 7.5%; }
.icr-table .icr-doc { width: 9%; }
.icr-table .icr-party { width: 8%; }
.icr-table .icr-item { width: 22%; }
.icr-table .icr-store { width: 8%; }
.icr-table .icr-state { width: 6%; }
.icr-table td, .icr-table th { overflow-wrap: anywhere; }
.icr-table td.num, .icr-table th.num, .icr-table td.st-amt, .icr-table th.st-amt { white-space: nowrap; }
.st-print-table.icr-table th.st-amt { width: auto; }

/* Cost and profit report: landscape paper and a wide screen. */
@media print {
  @page icrPaper { size: A4 landscape; margin: 10mm 8mm 12mm; }
  .icr-print { page: icrPaper; }
}
.icr-print { max-width: 1120px; margin-inline: auto; }
.icr-screen { max-width: none; width: 100%; }

/* Cost and profit report: smaller, centred headings that wrap inside their cell. */
.icr-table th { font-size: 10.5px; line-height: 1.35; padding: 5px 3px; text-align: center; white-space: normal; overflow-wrap: anywhere; vertical-align: middle; }
.icr-table td { font-size: 11px; padding: 4px 4px; }
.icr-table .icr-date { width: 6.5%; }
.icr-table .icr-doc { width: 8%; }
.icr-table .icr-party { width: 7.5%; }
.icr-table .icr-item { width: 17%; }
.icr-table .icr-store { width: 7%; }
.icr-table .icr-state { width: 5%; }
@media print { .icr-table th { font-size: 8.5pt; } .icr-table td { font-size: 8.5pt; } }

/* Sales tax reports: the dates of the filter bar start at the right. */
.stx-bar input[type="date"], .stx-panel input[type="date"] { text-align: right; direction: rtl; }
.stx-bar input[type="date"]::-webkit-datetime-edit, .stx-panel input[type="date"]::-webkit-datetime-edit { text-align: right; }

/* Stop companies: compact rows (the lines of the table are close together). */
.cs-table th, .cs-table td { padding: 0 8px; line-height: 1.2; }
.cs-table tbody tr { height: 21px; }
.cs-table .btn { min-height: 0; height: 19px; padding: 0 12px; font-size: 11.5px; line-height: 1; }
.cs-table .badge { padding: 0 8px; line-height: 1.5; }
.cs-table form { margin: 0; }
.cs-exit { min-width: 260px; text-align: center; }
.cs-table th:nth-child(1), .cs-table td:nth-child(1), .cs-table th:nth-child(3), .cs-table td:nth-child(3) { text-align: center; }
.grp-add { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.grp-add .control { width: 260px; }
.grp-title { font-size: 14px; margin: 12px 0 4px; }
.cs-table .control { min-height: 0; height: 20px; padding: 0 6px; font-size: 12px; }
.cs-table .row-actions { display: flex; gap: 6px; align-items: center; justify-content: center; }
.grp-table { table-layout: fixed; width: 100%; }
.grp-table .grp-c-no { width: 56px; }
.grp-table .grp-c-name { width: 28%; }
.grp-table .grp-c-admin { width: 28%; }
.grp-table .grp-c-num { width: 80px; }
.grp-table .grp-c-state { width: 80px; }
.grp-table .grp-c-act { width: 190px; }
.grp-table .grp-c-flag { width: 90px; }
.grp-table .grp-c-move { width: 300px; }
.grp-table select.control { width: 170px; }
.grp-side-actions { display: flex; gap: 8px; }
.grp-table select.control { font-size: 12px; }
.grp-table td.grp-admin { text-align: center; font-size: 20px; font-weight: 700; line-height: 1; color: #1a7f37; }
.grp-head { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; }
.grp-head .grp-title { margin: 0; }
.grp-head .grp-search { width: 260px; }
.grp-head .grp-search { width: 440px; max-width: 100%; font-size: 12px; }
.grp-head .grp-search::placeholder { font-size: 11.5px; }
.lookup-main .grp-head h2.grp-title { font-size: 12px; font-weight: 700; white-space: nowrap; }
.lookup-main .grp-head input.grp-search { flex: 1 1 auto; width: auto; max-width: none; }
.lookup-main .grp-table td .row-actions select.control { font-size: 11px; height: 30px; padding-block: 0; width: 160px; }
.lookup-main .grp-table td .row-actions select.control option { font-size: 11px; }
.grp-sec { margin: 8px 0; }
.grp-sec > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; font-size: 13px; font-weight: 700; }
.grp-sec > summary .grp-title { font-size: 13px; }
.lookup-main .grp-sec input.grp-search { display: block; width: 100%; max-width: none; margin: 4px 0 6px; font-size: 12px; }
.lookup-main .grp-table th, .lookup-main .grp-table td { padding: 1px 8px; line-height: 1.2; }
.lookup-main .grp-table tbody tr { height: 30px; }
.lookup-main .grp-table td .btn { min-height: 0; height: 24px; padding: 0 10px; font-size: 12px; line-height: 1; }
.lookup-main .grp-table td .btn.btn-icon { width: 26px; min-width: 0; padding: 0; }
.lookup-main .grp-table td .row-actions select.control { height: 24px; }
.lookup-main .grp-table td.grp-admin { font-size: 16px; }
.lookup-main .grp-table form { margin: 0; }
.lookup-main .grp-sec > summary { padding: 6px 12px; background: var(--primary-dark); color: #fff; border-radius: 6px; }
.lookup-main .grp-sec > summary .grp-title { color: #fff; }
.lookup-main .grp-sec > summary .badge { background: rgba(255, 255, 255, .2); color: #fff; }
.lookup-main .grp-table thead th { height: 38px; padding-block: 8px; }
.lookup-main .grp-table .grp-c-move { width: 420px; }
.lookup-main .grp-table td .row-actions select.control { width: 250px; }
.lookup-main .grp-table td .btn.btn-icon img { width: 18px; height: 18px; }
.lookup-main .grp-sec > summary .grp-title + .badge { margin-inline-start: auto; }
.lookup-main .grp-table .grp-c-move { width: 480px; }
.lookup-main .grp-table td .row-actions select.control { font-size: 10px; }
.lookup-main .grp-table td .row-actions select.control option { font-size: 10px; }
.lookup-main .grp-table td .row-actions form { display: flex; align-items: center; gap: 4px; }
.lookup-main .grp-sec > summary { padding: 3px 12px; min-height: 0; line-height: 1.2; }
.lookup-main .grp-sec > summary .grp-title { margin: 0; line-height: 1.2; }
.lookup-main .grp-sec > summary .badge { padding-block: 1px; line-height: 1.3; }
.lookup-main .grp-sec > summary { padding: 7px 12px; }
.lookup-main .grp-sec > summary, .lookup-main .grp-sec > summary .grp-title { font-size: 11.5px; }
.lookup-main .grp-sec > summary .badge { font-size: 10px; }
.lookup-main .grp-sec > summary, .lookup-main .grp-sec > summary .grp-title { font-size: 10.5px; }
.lookup-main .grp-sec > summary .badge { font-size: 9.5px; }
.lookup-main .grp-sec input.grp-search { font-size: 10.5px; height: 28px; min-height: 0; padding-block: 0; }
.lookup-main .grp-sec input.grp-search::placeholder { font-size: 10.5px; }
.lookup-main .grp-table td .row-actions select.control { width: 340px; max-width: 100%; }
.field-check > label { font-weight: 800; }
.panel.user-form-card { margin-top: 40px; }

/* ---- Forgot password ---- */
.login-forgot { display: block; margin: -6px 0 14px; text-align: end; font-size: 12px; font-weight: 700; color: var(--navy-text); text-decoration: none; }
.login-forgot:hover { text-decoration: underline; }
.login-note { margin: 0 0 14px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.7; }
.login-card .login-back { margin-top: 10px; }
.login-card h1.login-title-sm { font-size: 13px; margin: 4px 0 14px; }
.login-card h1.login-title-md { font-size: 18px; margin: 6px 0 18px; }

.panel .grid-table.dist-table td { padding-block: 3px; }
.panel .grid-table.dist-table .dist-branches { gap: 2px 14px; }
.grid-table.dist-table td, .grid-table.dist-table th { font-size: 10px; }
.grid-table.dist-table .dist-branch { font-size: 10px; }
.company-info .panel-foot .btn-wide.foot-end { width: 240px; }
.grp-table .grp-c-uname { width: 20%; }
.grp-table .grp-c-mail { width: 40%; }
.grp-table .grp-c-adm { width: 56px; }
.lookup-main .grp-table.grp-stack .grp-c-move { width: 460px; }
.grid-table.is-ruled.grp-stack .col-actions { text-align: start; width: auto; }
.grp-stack .row-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 4px; }
.grp-stack .row-actions form { display: flex; align-items: center; gap: 4px; margin: 0; }
.grp-stack .row-actions form .control { width: 150px; }

/* Template preparation tool */
.tp-body { display: grid; gap: 14px; }
.tp-intro { margin: 0; color: var(--muted); line-height: 1.7; }
.tp-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.tp-source { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.tp-source.is-found { border-inline-start: 5px solid var(--ok); }
.tp-source.is-missing { border-inline-start: 5px solid var(--danger); }
.tp-source-name { font-weight: 800; color: var(--primary-dark); }
.tp-source-state { font-size: .85rem; font-weight: 700; }
.tp-source.is-found .tp-source-state { color: var(--ok); }
.tp-source.is-missing .tp-source-state { color: var(--danger); }
.tp-output { margin: 0; font-size: .85rem; color: var(--muted); }
.tp-file { border: 1px solid var(--card-line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); padding: 14px 16px; display: grid; gap: 12px; }
.tp-file.is-ok { border-top: 4px solid var(--ok); }
.tp-file.is-bad { border-top: 4px solid var(--danger); }
.tp-file-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-file-head h2 { margin: 0; font-size: 1.1rem; color: var(--primary-dark); }
.tp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
.tp-step { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: .9rem; flex-wrap: wrap; }
.tp-step.is-ok { background: var(--ok-bg); }
.tp-step.is-bad { background: var(--danger-bg); }
.tp-step-mark { font-weight: 800; }
.tp-step.is-ok .tp-step-mark { color: var(--ok); }
.tp-step.is-bad .tp-step-mark { color: var(--danger); }
.tp-step-target { margin-inline-start: auto; font-weight: 700; color: var(--primary-dark); }
.tp-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.tp-col h3 { margin: 0 0 6px; font-size: .95rem; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; }
.tp-scroll { max-height: 340px; }
.tp-rels { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.tp-rels li { padding: 6px 10px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--soft); font-size: .9rem; }
.tp-rels li span { color: var(--primary); margin-inline: 4px; }
@media (max-width: 760px) { .tp-cols { grid-template-columns: 1fr; } }
.tp-panel .panel-foot .btn { width: 240px; justify-content: center; text-align: center; }
.tp-panel .grid-table td, .tp-panel .grid-table th { padding-block: 2px; font-size: 11px; line-height: 1.25; }
.tp-step { padding: 3px 10px; font-size: 11px; }
.tp-steps { gap: 3px; }
.tp-rels { gap: 2px; }
.tp-rels li { padding: 2px 10px; font-size: 11px; }
.tp-scroll .grid-table th:nth-child(2), .tp-scroll .grid-table td:nth-child(2) { text-align: left; }
.menu-tile.is-locked { cursor: not-allowed; position: relative; }
.menu-tile.is-locked img { opacity: .45; filter: grayscale(1); }
.menu-tile.is-locked span { opacity: .6; }
.menu-tile .tile-lock { position: absolute; top: 8px; inset-inline-end: 10px; font-style: normal; font-size: 16px; }
html:not(.pano-native-shell) .panel-foot > .foot-end { margin-inline-start: auto; }
.st-many-wrap .st-filter-btns .btn { flex: 0 0 120px; width: 120px; justify-content: center; text-align: center; }
.si-edit .si-options .si-bill { font-family: var(--font); font-size: 1.12em; font-weight: 700; }
.si-edit .si-options .si-bill--sent { color: var(--ok); justify-self: start; direction: rtl; text-align: start; }
.si-edit .jv-addbar .si-audit { flex-direction: column; align-items: center; gap: 4px; }
.si-edit .si-audit .si-audit-row { display: flex; gap: 24px; white-space: nowrap; }
.si-edit .si-audit .si-bill-sent { color: var(--ok); font-family: var(--font); font-size: 17px; font-weight: 800; }
.si-edit .si-options .si-bill--error { color: var(--danger); line-height: 1.5; display: block; max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-foot .foot-gone { visibility: hidden; pointer-events: none; }
.si-edit .panel-foot { flex-wrap: nowrap; gap: 6px; }
.si-edit .panel-foot form { display: contents; }
.si-edit .panel-foot .btn { white-space: nowrap; flex: 0 1 auto; padding-inline: 10px; }
.pos-billing { margin-block: var(--space-2); font-weight: 600; }
/* Invoice screen: the audit line sits lower and the totals closer to the table. */
.si-edit .jv-addbar .jv-info { transform: translate(-50%, calc(-50% + 20px)); }
/* One line always (options | totals): a long text in the options column never pushes the totals down, so new and saved invoices look the same. */
.si-edit .si-bottom { flex-wrap: nowrap; align-items: flex-start; }
.si-edit .si-options { min-width: 0; flex: 1 1 auto; }
.si-edit .si-totals { margin-top: -34px; flex: 0 0 auto; }
/* The add-line bar has the same fixed height in every state (new, saved, posted). */
.si-edit .jv-addbar { height: 34px; min-height: 34px; max-height: 34px; box-sizing: border-box; }
/* same gap under the table whether or not the add-line button exists (it only exists when editable) */
.si-edit .jv-addbar, .si-edit .jv-addbar:has([data-si-add]) { margin-top: 4px; }

/* Warehouse documents: the warehouse field wider, the reference number field narrower */
.si-edit .si-head-one[data-wd-head] > .wd-ref { flex: 0 0 120px; min-width: 0; }
.si-edit .si-head-one[data-wd-head] > .wd-store { flex: 6 1 0; min-width: 340px; }
/* assembly list: no reference column, the warehouse column takes the free room */
.wd-list.wd-list-assembly .wd-c-pick { width: 3%; }
.wd-list.wd-list-assembly .wd-c-no { width: 8%; }
.wd-list.wd-list-assembly .wd-c-date { width: 9%; }
.wd-list.wd-list-assembly .wd-c-store { width: 28%; }
.wd-list.wd-list-assembly col:not([class]) { width: 42%; }
.wd-list.wd-list-assembly .wd-c-value { width: 10%; }

/* Assembly entry: the statement field (shares the line with the warehouse) is wider */
.si-edit .si-head-one[data-wd-head] > .wd-note-inline { flex: 10 1 0; min-width: 300px; }
.si-edit .si-head-one[data-wd-head] > .wd-note-inline ~ .wd-store, .si-edit .si-head-one[data-wd-head] > .wd-store:has(~ .wd-note-inline) { flex: 5 1 0; }

/* Stock in / stock out lists: the warehouse column wider, the statement narrower (percent widths, they add up to 100) */
.wd-list:not(.wd-list-transfer):not(.wd-list-production):not(.wd-list-assembly) .wd-c-pick { width: 3%; }
.wd-list:not(.wd-list-transfer):not(.wd-list-production):not(.wd-list-assembly) .wd-c-no { width: 8%; }
.wd-list:not(.wd-list-transfer):not(.wd-list-production):not(.wd-list-assembly) .wd-c-date { width: 9%; }
.wd-list:not(.wd-list-transfer):not(.wd-list-production):not(.wd-list-assembly) .wd-c-store { width: 22%; }
.wd-list:not(.wd-list-transfer):not(.wd-list-production):not(.wd-list-assembly) .wd-c-ref { width: 12%; }
.wd-list:not(.wd-list-transfer):not(.wd-list-production):not(.wd-list-assembly) col:not([class]) { width: 38%; }
.wd-list:not(.wd-list-transfer):not(.wd-list-production):not(.wd-list-assembly) .wd-c-value { width: 8%; }

/* POS: the post (send to e-invoicing) tick box: centred, bigger, red, bold */
.pos-check.pos-billing { display: flex; justify-content: center; align-items: center; gap: 8px; text-align: center; font-size: 17px; font-weight: 800; color: #c62828; }
.pos-check.pos-billing input { width: 18px; height: 18px; }

/* Section picker (sales invoices / returns): the whole name cell opens the section, like the folder button */
.od-pick td.pick-cell { padding: 0; }
.od-pick td.pick-cell .pick-link { display: block; padding: 10px 12px; color: inherit; text-decoration: none; font-weight: 600; }
.od-pick td.pick-cell .pick-link:hover, .od-pick td.pick-cell .pick-link:focus-visible { text-decoration: underline; background: var(--soft); }

/* Section picker: the open (folder) button wider */
.od-pick table.grid-table.is-ruled .col-actions { width: 110px; }
.od-pick .col-actions .btn.btn-icon { width: 80px; min-width: 80px; }

/* Section picker: the section name bigger and bold */
.od-pick td.pick-cell .pick-link { font-size: 16px; font-weight: 800; }

/* Data change log: tighter rows, fixed column widths, a clear line between documents, zero amounts dimmed */
.log-table { table-layout: fixed; width: 100%; }
.log-table :is(th, td) { padding: 0 8px; height: auto; line-height: 1.1; font-size: 11px; vertical-align: middle; overflow-wrap: anywhere; }
.log-table .lg-type { width: 8%; }
.log-table .lg-no { width: 7%; }
.log-table .lg-date { width: 7%; }
.log-table .lg-acc { width: 23%; }
.log-table .lg-amt { width: 8%; }
.log-table .lg-exp { width: 21%; }
.log-table .lg-upd { width: 7%; }
.log-table .lg-user { width: 8%; }
.log-table .lg-time { width: 10%; }
.log-table-sum .lg-type { width: 18%; }
.log-table-sum .lg-no { width: 12%; }
.log-table-sum .lg-date { width: 12%; }
.log-table-sum .lg-amt { width: 14%; }
.log-table-sum .lg-upd { width: 14%; }
.log-table-sum .lg-user { width: 14%; }
.log-table-sum .lg-time { width: 16%; }
.log-table tbody tr.log-new > td { border-top: 2px solid var(--ph-stroke, #7f9bb8); }
.log-table td.num { font-weight: 600; font-variant-numeric: tabular-nums; }
.log-table td.log-zero { color: #9aa7b5; font-weight: 400; }
.log-table .log-type { font-weight: 700; color: #1f4e79; }

/* Data change log: a taller header row */
.log-table thead th { padding-top: 9px; padding-bottom: 9px; font-size: 12px; }

/* Data change log: every change of a document is a folded block; click the head line (or use the buttons) to open it */
.log-group .log-line { display: none; }
.log-group.log-open .log-line { display: table-row; }
.log-group .log-head { cursor: pointer; background: #eef4fb; }
.log-group .log-head:hover { background: #e2edf9; }
.log-group .log-head td { font-weight: 700; border-top: 2px solid var(--ph-stroke, #7f9bb8); }
.log-group .log-arrow { display: inline-block; width: 12px; transition: transform .12s; }
.log-group.log-open .log-arrow { transform: rotate(90deg); }
.log-group .log-count { font-weight: 600; color: #5b6b7c; }
.log-group .log-line td { background: #fff; }
.log-result-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media print { .log-group .log-line { display: table-row; } [data-log-open-all], [data-log-close-all] { display: none; } }

/* Data change log: smaller header text; text and data aligned to the right */
.log-table thead th { font-size: 11px; }
.log-table :is(th, td), .log-table :is(th, td).center, .log-table :is(th, td).num { text-align: right; }

/* Data change log: the dates, and the document type with its number, each stay on one line */
.log-table .log-date, .log-table .log-doc { white-space: nowrap; }
.log-table .log-doc { overflow: hidden; text-overflow: ellipsis; }
.log-table .log-vno { font-weight: 800; color: #1f4e79; margin-inline-start: 6px; }

/* Data change log filters: from / to dates on one line; document type and document number on one line */
.log-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-content: start; }
.log-fields > .alert { grid-column: 1 / -1; }
.log-fields > .field { min-width: 0; }

/* Data change log: the print button at the far left, the fold buttons are icons */
.log-result-head { justify-content: flex-start; }
.log-result-head .log-print { margin-right: auto; }
.log-result-head .log-ico { margin-inline-start: 0; width: 38px; min-width: 38px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; }

/* Data change log filters: the fields take the whole width of their column */
.log-top { grid-template-columns: 640px minmax(0, 1fr); align-items: stretch; }
.log-top .log-reports { min-height: 0; } /* the reports list comes first in the page, so its column is the narrow one */
.log-fields { width: 100%; }
.log-fields > .field .control { width: 100%; max-width: none; }

/* Data change log: narrower filter fields; the print and fold buttons together at the far left */
.log-fields { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: end; } /* end = the far left in the Arabic (right-to-left) page */
.log-result-head .log-tools { margin-right: auto; display: flex; align-items: center; gap: 6px; }
.log-result-head .log-tools .btn { margin: 0; }

/* Data change log: the foot buttons (preview, print, exit) have the same width */
.changelog .panel-foot > .btn { flex: 0 0 170px; width: 170px; min-width: 170px; max-width: 170px; }

/* Change log print sheet (same design as the other reports) */
.log-print-table { table-layout: fixed; width: 100%; }
.log-print-table th, .log-print-table td { font-size: 9px; padding: 2px 4px; overflow-wrap: anywhere; vertical-align: top; }
.log-print-table td.num { vertical-align: top; }
.log-print-table .lp-type { width: 9%; }
.log-print-table .lp-no { width: 7%; }
.log-print-table .lp-date { width: 8%; }
.log-print-table .lp-acc { width: 22%; }
.log-print-table .lp-amt { width: 9%; }
.log-print-table .lp-exp { width: 18%; }
.log-print-table .lp-upd { width: 8%; }
.log-print-table .lp-user { width: 7%; }
.log-print-table .lp-time { width: 11%; }
.log-print-sum .lp-type { width: 14%; }
.log-print-sum .lp-no { width: 11%; }
.log-print-sum .lp-date { width: 14%; }
.log-print-sum .lp-amt { width: 15%; }
.log-print-sum .lp-upd { width: 14%; }
.log-print-sum .lp-user { width: 14%; }
.log-print-sum .lp-time { width: 17%; }
.log-print-table .log-pc { text-align: center; white-space: nowrap; }
html[dir="rtl"] .log-print-table .log-pc { text-align: center; }
.log-print-group { break-inside: avoid; page-break-inside: avoid; }

/* Change log print: landscape A4, the sheet uses the full paper width */
@page logp { size: A4 landscape; margin: 10mm; }
@media print { .chart-print-report.log-print { page: logp; max-width: none; width: 100%; } }
@media screen { .chart-print-report.log-print { max-width: 277mm; } }
.log-print .log-print-table th, .log-print .log-print-table td { font-size: 10px; }

.log-print-type { margin-top: 8px; font-size: 14px; font-weight: 800; }
.log-print-notype .lp-no { width: 8%; }
.log-print-notype .lp-date { width: 9%; }
.log-print-notype .lp-acc { width: 24%; }
.log-print-notype .lp-amt { width: 10%; }
.log-print-notype .lp-exp { width: 20%; }
.log-print-notype .lp-upd { width: 8%; }
.log-print-notype .lp-user { width: 7%; }
.log-print-notype .lp-time { width: 12%; }
.log-print-notype.log-print-sum .lp-no { width: 13%; }
.log-print-notype.log-print-sum .lp-date { width: 17%; }
.log-print-notype.log-print-sum .lp-amt { width: 18%; }
.log-print-notype.log-print-sum .lp-upd { width: 15%; }
.log-print-notype.log-print-sum .lp-user { width: 15%; }
.log-print-notype.log-print-sum .lp-time { width: 19%; }

/* Change log filters: a tidy 3 x 2 grid, equal columns, same control height */
.changelog .log-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; align-content: center; gap: 14px 18px; }
.changelog .log-fields > .field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.changelog .log-fields > .field label { margin: 0; }
.changelog .log-fields > .field .control { height: 38px; min-height: 38px; box-sizing: border-box; width: 100%; }

/* A heading line for every kind of change (new entry, edit, delete) */
.log-table .log-kind > td { background: #dfe8f3; font-weight: 800; font-size: 13px; padding: 6px 10px; border-top: 2px solid #274e89; text-align: right; }
.log-print-table .log-print-kind > td { background: #dfe8f3; font-weight: 800; font-size: 12px; padding: 4px 8px; text-align: right; }

/* Print sheet: the band of a change and the document number written once beside its lines */
.log-print-table .log-print-band { background: #e6edf7; }
.log-print-table .log-print-top { vertical-align: top; text-align: center; }

/* Journal / cash vouchers: the foot buttons keep their width and are spread over the whole screen by the space between them */
html .jv-edit .panel-foot > .foot-end { margin-inline-start: 0; }
html .jv-edit .panel-foot { justify-content: space-between; flex-wrap: nowrap; }

/* Backup screen: the three foot buttons are wider and all the same width */
.backup .panel-foot > .btn, .backup .panel-foot > form { flex: 0 0 190px; width: 190px; min-width: 190px; max-width: 190px; margin: 0; box-sizing: border-box; }
.backup .panel-foot > form .btn { width: 100%; box-sizing: border-box; }

/* Navy button (cancel all permissions of a user) */
.btn.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.btn-navy:hover { background: #0F2D4D; border-color: #0F2D4D; color: #fff; }

/* User distribution: Save and Exit are narrow; Save stays on the right, Exit goes to the far left */
.perm[data-user-distribution] .panel-foot > .btn { flex: 0 0 110px; width: 110px; min-width: 110px; max-width: 110px; }
.perm[data-user-distribution] .panel-foot > .foot-end { margin-inline-start: auto; }

/* New year: wider footer buttons */
.newyear .panel-foot > .btn { flex: 0 0 230px; width: 230px; min-width: 230px; max-width: 230px; }

/* Invoice settings: sales invoices and returns in separate parts */
.lookup-part-title { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 14px; font-weight: 800; color: var(--navy); }
.lookup-part-title:first-child { margin-top: 0; }
/* Invoice settings: the same column widths in both parts */
.si-set-table { table-layout: fixed; width: 100%; }
.si-set-table .si-c1 { width: 8%; }
.si-set-table .si-c2 { width: 26%; }
.si-set-table .si-c3 { width: 20%; }
.si-set-table .si-c4 { width: 13%; }
.si-set-table .si-c5 { width: 19%; }
.si-set-table .si-c6 { width: 9%; }
.si-set-table .si-c7 { width: 5%; }

/* Main navigation: no horizontal scroll bar (the items are tighter so every menu fits) */
.main-nav { overflow: visible; gap: 2px; }
.main-nav .nav-item { flex: 0 1 auto; min-width: 0; padding: 0 9px; font-size: 12px; }

/* Navigation drop-down lists: open on hover or with the small arrow, the title still opens the menu page */
.nav-drop { position: relative; display: inline-flex; align-items: center; flex: 0 1 auto; }
.nav-drop:hover > .nav-item, .nav-drop.is-open > .nav-item { background: rgba(255, 255, 255, .12); }
.nav-drop-toggle { height: 36px; padding: 0 3px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #fff; font-size: 10px; cursor: pointer; }
.nav-drop-menu {
    display: none; position: absolute; top: 100%; inset-inline-start: 0; z-index: 60; min-width: 220px; max-height: 75vh; overflow-y: auto;
    padding: 6px; background: #fff; color: #1d2b3a; border: 1px solid #b9c7d6; border-radius: 6px; box-shadow: 0 8px 22px rgba(20, 52, 87, .22);
}
.nav-drop-end > .nav-drop-menu { inset-inline-start: auto; inset-inline-end: 0; }
.nav-drop:hover > .nav-drop-menu, .nav-drop.is-open > .nav-drop-menu { display: block; }
.nav-drop-wide { min-width: 460px; column-count: 2; column-gap: 8px; }
.nav-drop-group { break-inside: avoid; margin-bottom: 4px; }
.nav-drop-title { padding: 4px 8px; font-size: 11px; font-weight: 800; color: var(--navy); border-bottom: 1px solid #d5dee8; margin-bottom: 2px; }
.nav-drop-link { display: block; padding: 6px 10px; border-radius: 4px; color: #1d2b3a; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-drop-link:hover, .nav-drop-link:focus-visible { background: #e8eff7; }
@media (max-width: 700px) { .nav-drop-menu, .nav-drop-toggle { display: none !important; } }

/* Production document: the products list (several products in manual mode) and the mode choice */
.si-edit .wd-product.wd-product-mf { grid-template-columns: 160px minmax(0, 1fr) 190px 130px 130px 40px; }
.si-edit .wd-prod-list { display: grid; gap: 6px; }
.si-edit .wd-prod-list .wd-product:not(:first-child) .field > label { display: none; }
.si-edit .wd-prod-list.is-formula .wd-p-del { visibility: hidden; }
.si-edit .wd-p-del { align-self: end; }
.si-edit .wd-p-del .btn { height: 34px; padding: 0 10px; }
.si-edit .wd-mode-opts { display: flex; gap: 14px; align-items: center; height: 34px; }
.si-edit .wd-mode-opt { display: inline-flex; gap: 5px; align-items: center; font-weight: 700; cursor: pointer; white-space: nowrap; }
@media (max-width: 900px) { .si-edit .wd-product.wd-product-mf { grid-template-columns: 1fr 1fr; } }
.si-edit [data-wd-formula-field][hidden], .si-edit [data-wd-prod-addwrap][hidden] { display: none; }
.si-edit .si-head-one[data-wd-head] > .wd-mode { flex: 0 0 250px; min-width: 250px; }
.si-edit .si-head-one[data-wd-head] > .wd-store[data-wd-formula-field] { flex: 0 0 480px; min-width: 480px; }
.si-edit .si-head-one[data-wd-head] > .wd-store:not([data-wd-formula-field]):not(.wd-mode) { min-width: 200px; }
.si-edit .wd-mf-accs { background: #eef4fb; border: 1px solid #c9d8ea; border-radius: 6px; padding: 10px 12px; }
.si-edit .wd-mf-accs { margin-top: 10px; }
.si-edit .wd-prod-grid.is-formula .wd-p-del { visibility: hidden; }
.si-edit .wd-section-title { padding-bottom: 0; margin-bottom: -6px; }
.si-edit .wd-section-title + .panel-body { padding-top: 2px; }
.si-edit .wd-section-title { font-size: 12px; }
.si-edit .wd-section-title strong { color: #c00000; }
.si-edit .wd-section-title { margin-bottom: 0; }
.si-edit .wd-section-title + .panel-body { padding-top: 5px; }
.si-edit .wd-mf-bar .wd-addrow[data-wd-prod-addwrap] { margin-top: -30px; }
.si-edit .wd-addrow .btn[data-wd-add], .si-edit .wd-addrow .btn[data-wd-prod-add] { box-sizing: border-box; width: 180px; min-width: 180px; max-width: 180px; justify-content: center; text-align: center; }
.si-edit .wd-mf-bar .wd-addrow { margin-top: -30px; }
/* The add buttons of the production document sit in the last row of their table, on its start edge. */
.si-edit .wd-grid .wd-add-row td.wd-add-cell { padding: 6px 0 0; overflow: visible; text-align: start; border: 0; background: transparent; }
.si-edit .wd-grid .wd-add-cell .btn { box-sizing: border-box; width: 180px; min-width: 180px; max-width: 180px; justify-content: center; text-align: center; background-color: #edf5ff; border-color: #9dbde4; color: #173d70; }
.si-edit .wd-grid .wd-add-cell .btn:hover { background-color: #e2efff; border-color: #82acd9; }
.si-edit .wd-mf-bar .wd-mf-sums { margin-inline-start: auto; }
.si-edit .wd-invtools { display: contents; }
.si-edit .wd-invtools[hidden] { display: none; }
/* Production document: the statement shares the line of the warehouse (the row wraps on a narrow screen). */
.si-edit .si-head-one.wd-head-mf[data-wd-head] { flex-wrap: wrap; }
.si-edit .si-head-one.wd-head-mf[data-wd-head] > .wd-store:not([data-wd-formula-field]):not(.wd-mode) { flex: 1 1 260px; min-width: 220px; }
.si-edit .si-head-one.wd-head-mf[data-wd-head] > .wd-note-inline { flex: 3 1 340px; min-width: 260px; }
/* Production document header: the statement shares the line of the warehouse, the other fields are narrower so everything fits one line. */
.si-edit .si-head-one.wd-head-mf[data-wd-head] > .wd-mode { flex: 0 0 230px; min-width: 230px; }
.si-edit .si-head-one.wd-head-mf[data-wd-head] > .wd-store.wd-store[data-wd-formula-field] { flex: 0 0 400px; min-width: 400px; }
.si-edit .si-head-one.wd-head-mf[data-wd-head] > .wd-store.wd-store:not([data-wd-formula-field]):not(.wd-mode) { flex: 1 1 300px; min-width: 260px; }
.si-edit .si-head-one.wd-head-mf[data-wd-head] > .wd-note.wd-note-inline { flex: 2 1 300px; min-width: 240px; }
.si-edit .si-head-one.wd-head-mf[data-wd-head] > .field:first-child { flex: 0 0 132px; min-width: 132px; }
/* Production document: the page keeps room for the scroll bar, so the screen does not shift sideways when the lines of a formula make it longer. */
html:has(form[data-wd-manuf="1"]) { scrollbar-gutter: stable; }
/* Production document: the four totals, and the invoice line with the user and time, each fit on one line. */
.si-edit .wd-mf-sums { flex-wrap: nowrap; gap: 6px; }
.si-edit .wd-mf-sum { flex: 0 1 auto; min-width: 0; }
.si-edit .wd-mf-sum > span { padding: 8px 10px; font-size: 12.5px; white-space: nowrap; }
.si-edit .wd-mf-sum > strong { flex: 0 0 96px; padding: 8px 6px; font-size: 13.5px; }
.si-edit .wd-invlink { flex-wrap: nowrap; gap: 6px; }
.si-edit .wd-invlink .btn { min-width: 100px; padding-inline: 12px; white-space: nowrap; }
.si-edit .wd-invlink a.btn[href*="Create"] { min-width: 150px; }
.si-edit .wd-invlink-form .control { width: 130px; }
.si-edit .wd-invlink .wd-invlink-trail, .si-edit .wd-invlink .wd-invlink-trail span, .si-edit .wd-invlink .wd-invlink-trail strong { font-size: 12px; white-space: nowrap; }
.si-edit .wd-invlink .wd-invlink-trail { gap: 10px; }
/* The invoice link sits on the line of the totals. */
.si-edit .wd-invtools { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.si-edit .wd-invtools[hidden] { display: none; }
.si-edit .wd-invtools .btn, .si-edit .wd-invtools .control { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.si-edit .wd-invtools .btn { min-width: 100px; padding-inline: 12px; white-space: nowrap; }
.si-edit .wd-invtools a.btn[href*="Create"] { min-width: 150px; }
.si-edit .wd-invtools .control { width: 130px; }
.wd-invlink-hidden { display: none; }
.si-edit .wd-mf-bar { flex-wrap: nowrap; align-items: center; }
/* The totals are raised, and the user and time share their line. */
.si-edit .wd-mf-bar { flex-wrap: wrap; margin-top: -16px; }
.si-edit .wd-mf-bar .wd-mf-sums { margin-top: 0; margin-inline-start: 0; }
.si-edit .wd-mf-bar .wd-invlink-trail { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 12px; }
/* The invoice line: the link controls on one side, the user and time on the same line. */
.si-edit .wd-invrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.si-edit .wd-invrow .wd-invlink-trail { margin-inline-start: auto; }
.si-edit .wd-mf-bar .wd-invlink-trail { margin-inline-start: 0; }
/* Production document, bottom part exactly as approved: the add-line button on the start edge and the four totals on the same line,
   then the invoice line (the link controls on one side, the user and the time on the other). */
.si-edit .wd-mf-bar.wd-mf-bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; }
.si-edit .wd-mf-bar.wd-mf-bar > .wd-addrow { margin: 8px 0 0; flex: 0 0 auto; }
.si-edit .wd-mf-bar.wd-mf-bar > .wd-addrow .btn[data-wd-add] { width: 200px; min-width: 200px; max-width: 200px; }
.si-edit .wd-mf-bar.wd-mf-bar > .wd-mf-sums { margin: 8px 0 0; flex: 0 1 auto; }
.si-edit .wd-invrow.wd-invrow { margin-top: 14px; }

/* Customer vehicles: the search row above the table. */
.veh-search { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.veh-search .control { flex: 1; min-width: 0; }
.veh-group { border: 1px solid var(--border, #c9d3df); border-radius: 6px; margin-bottom: var(--space-2); background: #fff; }
.veh-group > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 6px 10px; cursor: pointer; font-weight: 700; background: #eef3f8; }
.veh-group[open] > summary { border-bottom: 1px solid var(--border, #c9d3df); }
.veh-group .grid-table { margin: 0; }

/* Maintenance order: the vehicle block of the entry screen and of the print form. */
.mo-vehicle { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 10px; align-items: start; gap: var(--space-2) 10px; margin-top: 14px; background: #EEF5FC; border: 1px solid #C9DAEC; border-radius: 8px; }
.mo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.mo-grid .mo-pick { grid-column: span 2; }
.mo-grid .mo-odo { background: #FFF6CC; }
.mo-grid .mo-wide { grid-column: span 2; }
@media (max-width: 900px) { .mo-vehicle { grid-template-columns: 1fr; } .mo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mo-grid .mo-wide { grid-column: span 1; } }
/* Maintenance orders report: the statement column takes the free width, the other columns stay narrow. */
.mo-report-table { table-layout: fixed; width: 100%; }
.mo-report-table .mo-c-idx { width: 28px; }
.mo-report-table .mo-c-no { width: 50px; }
.mo-report-table .mo-c-date { width: 72px; }
.mo-report-table .mo-c-status { width: 56px; }
.mo-report-table .mo-c-inv { width: 70px; }
.mo-report-table .mo-c-amt { width: 78px; }
.mo-print-vehicle { border: 1px solid #000; padding: 4px 8px; margin: 14px 0 6px; font-size: 8.5pt; background: #EEF5FC; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mo-print-title { color: #c00000; font-weight: 800; margin-bottom: 3px; }
.mo-print-row { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr; gap: 3px 8px; align-items: center; border-top: 1px solid #999; padding: 3px 0; }
.mo-print-row .si-ax-ar, .mo-print-row .si-ax-en { display: block; }
.mo-print-odo, .mo-print-plate { display: block; text-align: right; }
.mo-rep-filter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; margin-bottom: 14px; }
.mo-rep-filter .control { width: 100%; box-sizing: border-box; }
.mo-rep-filter label { font-size: 0.9rem; font-weight: 700; }
.mo-rep-filter .control { font-size: 0.92rem; font-weight: 700; text-align: right; text-align-last: right; }
.mo-rep-filter .mo-rep-go { grid-column: span 2; }
.mo-rep-filter .mo-rep-go .btn { width: 100%; font-weight: 700; }
@media (max-width: 900px) { .mo-rep-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .mo-rep-filter { display: none !important; } }
.mo-ord { margin: 0 0 14px; break-inside: avoid; }
.mo-ord-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 24px; padding: 6px 10px; background: #EEF5FC; border: 1px solid #000; border-bottom: 0; font-size: 9pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mo-ord-veh { background: #FFFDF0; }
.mo-ord-table { table-layout: auto; width: 100%; }
.mo-print-chassis-l { grid-column: 7; }
.mo-print-chassis { grid-column: 8; display: block; text-align: right; }
.mo-print-odo { background: #FFF6CC; padding: 0 4px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mo-print-plate { color: #c00000; font-weight: 800; font-size: 11pt; }
.mo-print-warn { font-weight: 700; margin: 8px 0; }
/* Menu: groups that share one row (manufacturing + maintenance). */
.menu-panel .menu-groups .menu-group-row { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 12px; }
@media (max-width: 900px) { .menu-panel .menu-groups .menu-group-row { flex-wrap: wrap; } }
/* User permissions: table rows slightly taller. */
.panel .perm-table td { padding-block: 3px; }
/* User permissions: the user buttons sit above the user list; the footer keeps the permission buttons. */
.perm-user-actions { display: flex; justify-content: center; gap: 10px; padding: var(--space-2) var(--space-2) 0; }
.perm-user-actions .btn-icon { width: 34px; height: 34px; padding: 0; }
.perm-user-actions .btn-icon img { width: 20px; height: 20px; }
/* User permissions: the user list is as tall as the permissions panel; the user buttons sit at its bottom. */
.perm { align-items: stretch; }
.perm-users { display: flex; flex-direction: column; contain: size layout; min-height: 320px; }
.perm-users .perm-user-list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.perm-users .perm-user-actions { padding: var(--space-2); border-top: 1px solid var(--line, #d8e2ee); }
@media (max-width: 900px) { .perm-users { contain: none; } .perm-users .perm-user-list { flex: none; max-height: 260px; } }
@media (min-width: 901px) { .perm { grid-template-columns: 280px minmax(0, 1fr); } }
/* User permissions: the permission table shows every row (no inner scroll bar); the page itself grows. */
.perm .perm-main .scroll-y { max-height: none; overflow: visible; }
/* User permissions: both panels end at the same line. */
.perm .perm-main, .perm .perm-users { margin-bottom: 0; }
/* User permissions: more space between the footer buttons. */
.perm .perm-main .panel-foot { gap: 28px; }
/* User permissions: the search label and its box share one line; smaller text in the box. */
.perm .perm-users .dist-user-search-bar { flex-direction: row; align-items: center; gap: var(--space-2); }
.perm .perm-users .dist-user-search-bar .control { flex: 1 1 auto; min-width: 0; font-size: 10px; }
/* User permissions: wider user list, with the state (active / inactive) at the end of every user. */
@media (min-width: 901px) { .perm { grid-template-columns: 330px minmax(0, 1fr); } }
.perm-users .perm-user { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.perm-users .perm-user > :first-child { flex: 1 1 auto; min-width: 0; }
.perm-user-state { flex: none; padding: 0 7px; border-radius: 999px; font-size: 9.5px; font-weight: 800; line-height: 16px; background: #fff; border: 1px solid transparent; }
.perm-user-state.is-on { color: #1F7A3E; border-color: #1F7A3E; }
.perm-user-state.is-off { color: #C0392B; border-color: #C0392B; }
/* User permissions: user names sit at the right; the group box is wider. */
html[dir="rtl"] .perm-users .perm-user > :first-child { text-align: right; }
.perm .perm-main .perm-group .control { flex: 1 1 auto; max-width: 560px; }
/* User permissions: clear-all / select-all buttons at the far end of the group line. */
.perm .perm-main .perm-group .perm-group-actions { display: flex; gap: 8px; margin-inline-start: auto; }
.perm .perm-main .perm-group .perm-group-actions .btn { height: 28px; padding: 0 12px; font-size: 11px; font-weight: 800; white-space: nowrap; }
/* User permissions: narrow Save and Exit buttons; Save stays at the right, Exit at the far left. */
.perm .perm-main .panel-foot .btn { flex: 0 0 130px; width: 130px; }
.perm .perm-main .panel-foot .btn:last-child { margin-inline-start: auto; }
/* Close period: no picture, the form takes the whole width. */
.closep-body { grid-template-columns: minmax(0, 1fr); }
/* Invoice template: two clear sections (header / footer, then print settings). */
.it-page .it-section-title { margin: 0 0 12px; padding-bottom: 6px; font-size: 15px; font-weight: 800; color: var(--navy-text); border-bottom: 2px solid var(--primary); }
.it-page form > .panel-body + .panel-body { border-top: 1px solid var(--field-line); }

/* ===== A4 sales invoice: own header / footer pictures (InvoiceTemplate/Design) ===== */
.si-hf-zone { position: relative; container-type: inline-size; }
.si-hf-zone > img { display: block; width: 100%; height: auto; }
.si-hf-zone.is-blank { visibility: hidden; }
.si-ax:has(.is-behind) { position: relative; isolation: isolate; }
.si-hf-zone.is-behind { position: absolute; left: 0; top: 0; width: 100%; z-index: -1; }
/* The footer always stays in the page flow, right under the notes box: even with the pictures behind the text it never covers the invoice details. */
.si-hf-zone.si-hf-foot.is-behind { position: relative; width: auto; z-index: auto; }
.si-hf-e, .dz-box { position: absolute; box-sizing: border-box; overflow: hidden; color: #000; line-height: 1.15; }
.si-hf-e .si-p-text, .si-hf-e .si-ax-note { text-align: inherit; }
.si-hf-e img { display: block; width: 100%; height: 100%; object-fit: contain; }
.si-hf-e .si-ax-ar, .si-hf-e .si-ax-en { display: block; font-size: inherit; }
.dz-uploads { display: flex; flex-direction: column; gap: 10px; }
.dz-plain { font-weight: 800; }
.dz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.dz-opts { grid-column: 1 / -1; }
.dz-page-prev { position: relative; container-type: inline-size; display: flex; flex-direction: column; width: 100%; max-width: 760px; aspect-ratio: 210 / 297; margin-inline: auto; background: #fff; border: 1px solid var(--line); direction: ltr; overflow: hidden; user-select: none; touch-action: none; }
.dz-zone { position: relative; container-type: inline-size; flex: 0 0 auto; width: 100%; }
.dz-zone > img { display: block; width: 100%; height: auto; pointer-events: none; }
.dz-zone.is-empty { aspect-ratio: 210 / 22; background: repeating-linear-gradient(45deg, #f4f6f9, #f4f6f9 8px, #fff 8px, #fff 16px); }
.dz-zone-foot { margin-top: auto; }
.dz-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 4cqw; opacity: .8; pointer-events: none; }
.dz-sk-bar { height: 3cqw; margin-top: 1.4cqw; background: #dfe5ec; border-radius: 1px; }
.dz-sk-bar.is-wide { width: 100%; }
.dz-sk-bar.is-mid { width: 60%; }
.dz-sk-table { width: 100%; margin-top: 3cqw; border-collapse: collapse; }
.dz-sk-table th, .dz-sk-table td { height: 4.6cqw; border: 1px solid #b8c2cf; }
.dz-sk-table th { background: #e8edf3; }
.dz-sk-sums { width: 40%; height: 20cqw; margin-top: 3cqw; border: 1px solid #b8c2cf; background: #f1f4f8; }
.dz-box { border: 1px dashed var(--primary); background: rgba(36, 95, 151, .10); cursor: move; }
.dz-box.is-sel { border: 2px solid #E8590C; background: rgba(232, 89, 12, .12); z-index: 2; }
.dz-txt { display: block; width: 100%; padding-inline: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.dz-rs { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background: var(--primary); cursor: nwse-resize; }
.dz-box.is-sel .dz-rs { background: #E8590C; }
.dz-side { display: flex; flex-direction: column; gap: 10px; }
.dz-fieldlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.dz-fieldlist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.dz-fieldlist li.is-sel { border-color: #E8590C; background: #FFF4E8; }
.dz-fieldlist .control { flex: 0 0 150px; width: 150px; }
.dz-props.is-off { opacity: .45; pointer-events: none; }
.dz-props .field { margin-bottom: 6px; }
.dz-shift { display: flex; align-items: center; gap: 6px; }
.dz-shift .control { flex: 0 0 80px; width: 80px; text-align: center; }
@media (max-width: 1000px) { .dz-layout { grid-template-columns: minmax(0, 1fr); } }
.dz-upload .control { flex: 1 1 560px; max-width: none; }
.dz-upload .btn { min-width: 200px; }
.dz-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dz-upload label { font-weight: 800; }

/* thermal receipt: optional company logo */
.si-th-logo { display: block; margin: 0 auto 4px; max-width: 70%; max-height: 24mm; object-fit: contain; }
.it-page .it-grid.it-grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.it-page .it-grid .it-check-field { justify-content: flex-end; }
@media (max-width: 1100px) { .it-page .it-grid.it-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.it-page .panel-foot .btn { min-width: 170px; }
.it-page .it-grid.it-grid-3 .it-span3 { grid-column: span 3; }
@media (max-width: 1100px) { .it-page .it-grid.it-grid-3 .it-span3 { grid-column: auto; } }
.it-page .it-grid.it-grid-3 .it-span3 .it-checks { gap: 6px 36px; }
.it-page .it-checks .it-design-open { margin-inline-start: auto; min-width: 260px; justify-content: center; }
.it-page .it-design-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; border-top: 0; padding-block: 10px; }
.it-page .it-design-card h2, .it-page .it-design-card p { margin: 0; }
.it-page .it-design-card .it-checks { margin-inline-start: auto; }

/* Login: the user name is typed left-to-right but sits on the right side of the field. */
.login-card input[autocomplete="username"] { text-align: right; }

/* Trial balance: the from / to accounts share one line (half each). */
.tb-filter .field.st-group { flex: 1 1 calc(50% - 100px); min-width: 280px; }
.tb-filter .st-filter-btns { flex: 0 0 auto; align-self: flex-end; }
.tb-filter .st-filter-btns .btn { min-width: 150px; justify-content: center; }
.tb-filter .field:has(#f_Branch), .tb-filter .field:has(#f_CostCenter), .tb-filter .field:has(#f_DocType) { flex: 1 1 250px; }
.st-filter .st-break { flex: 1 1 100%; height: 0; margin: 0; }
.st-filter .st-show-wide.st-show-inline { min-width: 150px; }
.st-filter .st-opt-row { justify-content: flex-end; }
.st-title.st-title-big { font-size: 1.15rem; margin-top: 16px; }
.st-title.st-title-big .st-period { font-size: 1.15rem; }
.st-filter .st-chk.st-cash-invoices-option { font-size: 11.5px; color: #c62828; }
.st-cash-row { display: flex; justify-content: flex-end; margin: 0 0 2px; line-height: 1.1; }
.st-cash-row .st-chk { margin: 0; padding-block: 0; font-size: 11.5px; color: #c62828; font-weight: 800; }
/* Every row of the statement has the height of a row that holds the preview button (previous balance, opening rows too). */
.st-list .st-table.is-ruled tbody td { height: 28px; }
.st-headline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-headline .st-chk { margin: 0; padding-block: 0; font-size: 11.5px; color: #c62828; font-weight: 800; }
.st-table.st-stmt th.st-no { width: 7%; }
.st-table.st-stmt th.st-kind { width: 8%; }
.st-table.st-stmt th.st-cost { width: 8%; }
.st-table.st-stmt th.st-amt { width: 9%; }
.st-table.cf-table th.cf-name { width: 50%; }

/* ---- chart of accounts levels (company information): wide gap between the two choices ---- */
.company-info .document-sequence-options { display: flex; flex-wrap: wrap; gap: 24px 140px; }
.company-info .document-sequence-option { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.company-info .cl-hint { flex: 1 1 320px; margin-inline-start: auto; text-align: end; color: #c62828; font-size: 12px; font-weight: 700; }
.sc-panel { margin-top: 24px; }
.sc-band { margin: 0 0 12px; padding: 8px 14px; background: var(--hero); color: #fff; font-size: 12px; font-weight: 800; }
.sc-title { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--navy-text); }
.sc-hint { margin: 0 0 10px; font-size: 12px; color: #555; }
.sc-form { display: flex; flex-wrap: nowrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.sc-form .field { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.sc-form .field .control { width: 100%; }
.sc-form .sc-file { flex: 2 1 0; }
.sc-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.sc-btns .btn { white-space: nowrap; }
.sc-form input[type="date"] { text-align: right; }
.sc-panel .grid-table th, .sc-panel .grid-table td, .sc-panel .grid-table .num, table.sc-compact th, table.sc-compact td, table.sc-compact .num { text-align: right; }
@media (max-width: 900px) { .sc-form { flex-wrap: wrap; } .sc-form .field { flex: 1 1 160px; } }
.sc-meta { margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.sc-warn { color: #c62828; }
.sc-tabs { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.sc-tabs .btn { flex: 0 0 120px; min-width: 0; text-align: center; }
.sc-tabs:dir(ltr) { justify-content: flex-start; }
.sc-short { color: #c62828; font-weight: 700; }
.sc-over { color: #1565c0; font-weight: 700; }
table.sc-compact.sc-compact th, table.sc-compact.sc-compact td { padding-top: 3px; padding-bottom: 3px; line-height: 1.25; }
table.sc-compact.sc-compact thead th { padding-top: 9px; padding-bottom: 9px; }
.sc-panel .grid-table .col-actions .btn-icon { width: 24px; height: 24px; }
.sc-panel .grid-table .col-actions .btn-icon img { width: 16px; height: 16px; }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sc-top .sc-meta, .sc-top .sc-tabs { margin: 0; }
.sc-top .sc-meta { white-space: nowrap; }
.stx-posted { margin-top: 10px; color: #c62828; font-size: 13px; font-weight: 800; }
.stx-post-form { display: contents; }
.stx-panel .sr-filters { align-self: stretch; display: flex; flex-direction: column; }
.stx-unreg { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; color: #c62828; font-size: 13px; font-weight: 700; }
.imp-panel .imp-steps { margin: 0 0 12px; padding-inline-start: 22px; line-height: 1.9; font-size: 13px; font-weight: 700; }
.imp-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.imp-form .field { flex: 1 1 280px; margin-bottom: 0; }
.imp-btns { display: flex; gap: 8px; }
.imp-btns .btn { min-width: 140px; justify-content: center; text-align: center; }
.imp-columns { width: 100%; table-layout: fixed; }
.imp-columns th:nth-child(1), .imp-columns td:nth-child(1) { width: 44px; }
.imp-columns th:nth-child(3), .imp-columns td:nth-child(3) { width: 90px; }
.panel .imp-columns td, .panel .imp-table td { padding-block: 5px; }
.imp-req { text-align: center; }
.imp-file-name { margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.imp-ok { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; font-weight: 800; }
.imp-bad { background: #fdecea; color: #b3261e; }
.imp-summary { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; }
.imp-panel .imp-list { max-height: 85vh; min-height: 75vh; margin-bottom: 10px; }
.imp-table { width: 100%; }
.imp-table td.imp-amt { text-align: right; direction: ltr; }
.imp-sub { margin: 10px 0 4px; font-size: 13px; font-weight: 800; color: var(--navy-text); }
.imp-more { margin: 0 0 6px; font-size: 12px; color: #b3261e; font-weight: 700; }
.imp-approve { margin: 0; display: flex; align-items: center; gap: 10px; }
.imp-date { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.imp-date .control { width: 150px; direction: rtl; text-align: right; }

/* The one suggestion list of every box that offers choices (site.js): the width and the font of the box, one line per choice. */
.pano-dd { position: fixed; z-index: 3000; box-sizing: border-box; max-height: 260px; overflow-y: auto; background: #fff; border: 1.5px solid var(--field-line, #4F7BA6); border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.pano-dd[hidden] { display: none; }
.pano-dd-opt { padding: 6px 10px; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; color: var(--navy-text, #1f2d45); }
.pano-dd-opt + .pano-dd-opt { border-top: 1px solid #E3EBF4; }
.pano-dd-opt:hover, .pano-dd-opt.is-active { background: #D6E5F6; }

/* Account statement: journal entry pop-up */
.st-entry-dialog { width: min(960px, 96vw); max-height: 90vh; padding: 0; overflow: auto; }
.st-entry-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--field-line); }
.st-entry-head h2 { margin: 0; font-size: 1.1rem; color: var(--navy-text); }
.st-entry-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: .85rem; }
.st-entry-body { padding: var(--space-3) var(--space-4); }
.st-entry-ok, .st-entry-bad { margin-top: var(--space-2); padding: 8px; text-align: center; font-weight: 800; border-radius: var(--radius); }
.st-entry-ok { background: #EAF6EC; color: #1E6B34; }
.st-entry-bad { background: #FDE8EA; color: #B3202E; }
.st-entry-foot { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--field-line); }
.st-entry-table tbody tr.st-entry-mine td { background: #FFF8D6; }
.st-stmt td.col-actions { white-space: nowrap; }
.st-stmt td.col-actions .btn-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-inline: 2px; }
.st-list .st-table.is-ruled.st-stmt th.col-actions, .st-list .st-table.is-ruled.st-stmt td.col-actions { width: 62px; white-space: nowrap; }
.st-list .st-table.st-stmt tbody td, .st-list .st-table.st-stmt tfoot td { font-size: .93em; }
.st-list .st-table.st-stmt td.st-kind { font-size: 10.5px; }
.st-table.st-stmt th.st-date { width: 7.5%; }
.st-table.st-stmt th.st-kind { width: 10.5%; }
.st-foot .btn.st-btn-long { flex: 0 0 190px; }
.ci-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ci-count { font-weight: 700; white-space: nowrap; }
.cf-search { max-width: 340px; margin-bottom: 6px; }
.cf-table th.cf-mark, .cf-table td.cf-mark { width: 34px; text-align: center; }
.cf-table .cf-dot { display: inline-block; width: 13px; height: 13px; border-radius: 2px; background: transparent; vertical-align: middle; }
.cf-table tr:has(input[name="f.AccNos"]:checked) .cf-dot { background: #D6404E; }
.cf-search { max-width: none; width: 100%; }
.cf-search .control { width: 100%; }
.cf-row2 { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.cf-row2 .cf-search { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; max-width: none; width: auto; }
.cf-row2 .cf-search label { white-space: nowrap; font-weight: 700; }
.cf-row2 .cf-search .control { flex: 1; }
.cf-stat { flex: 0 0 290px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border: 1.5px solid #94B4D5; border-radius: 10px; background: var(--surface); font-weight: 700; font-size: 12px; }
.cf-stat { background: #E4EEF9; }
.ci-range { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.ci-range label { font-weight: 700; white-space: nowrap; }
.ci-range .control { width: 140px; }
.ci-range .ci-stat { flex: 0 0 auto; padding: 0 14px; }
.ci-range .ci-print-btn { margin-inline-start: auto; min-width: 130px; }
.ci-range .control { width: 210px; }
.ci-range .ci-stat { flex: 0 0 230px; }
.ci-range .ci-stat:first-of-type { margin-inline-start: 130px; }

/* Company logo on the print sheets: a small picture at the top (left in Arabic); it is a link to one cached picture, so the reports stay light. */
.chart-print-heading, .cheque-ops-report-header, .obr-heading, .jv-print, .imx-item { position: relative; }
.print-logo { position: absolute; top: 0; inset-inline-end: 3mm; max-width: 32mm; max-height: 14mm; object-fit: contain; }
/* The logo has its own corner slot: the heading keeps at least the height of the logo and its titles keep away from the logo side, so nothing overlaps. */
.chart-print-heading:has(.print-logo), .cheque-ops-report-header:has(.print-logo), .obr-heading:has(.print-logo) { min-height: 16mm; }
.chart-print-heading:has(.print-logo) :is(h1, h2, h3), .cheque-ops-report-header:has(.print-logo) :is(h1, h2, h3), .obr-heading:has(.print-logo) :is(h1, h2, h3) { padding-inline: 48mm; }
/* On paper the page margin (12mm top, 10mm sides) is empty and cannot be printed on, so the logo sits 12mm/13mm from the corner; on the preview the sheet has only a small inner space (18px), so the logo is moved in to the same distance from the corner. */
@media screen {
  .print-logo { top: 7mm; inset-inline-end: 8mm; }
  .chart-print-heading:has(.print-logo), .cheque-ops-report-header:has(.print-logo), .obr-heading:has(.print-logo) { min-height: 23mm; }
}

/* Watermark of the sales invoice design: faint text or logo in the middle of the sheet, behind the details (pure classes, no inline style). */
.si-ax { position: relative; isolation: isolate; }
.si-wm { position: absolute; inset: 0; z-index: -1; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
.si-wm span { display: block; font-weight: 800; line-height: 1.1; text-align: center; overflow-wrap: anywhere; color: #000; }
.si-wm img { display: block; object-fit: contain; }
.si-wm-o10 { opacity: .10; } .si-wm-o15 { opacity: .15; } .si-wm-o20 { opacity: .20; } .si-wm-o30 { opacity: .30; }
.si-wm > * { transform: translate(var(--wx, 0mm), var(--wy, 0mm)) rotate(var(--wr, 0deg)); }
.si-wm-a30 { --wr: -30deg; } .si-wm-a45 { --wr: -45deg; }
.dz-wm { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0; }
/* Size of the watermark in steps of 10 mm: the width of the box, and the height (the letters of a text are 30% of it). */
.si-wm-w30 > * { width: 30mm; }
.si-wm-w40 > * { width: 40mm; }
.si-wm-w50 > * { width: 50mm; }
.si-wm-w60 > * { width: 60mm; }
.si-wm-w70 > * { width: 70mm; }
.si-wm-w80 > * { width: 80mm; }
.si-wm-w90 > * { width: 90mm; }
.si-wm-w100 > * { width: 100mm; }
.si-wm-w110 > * { width: 110mm; }
.si-wm-w120 > * { width: 120mm; }
.si-wm-w130 > * { width: 130mm; }
.si-wm-w140 > * { width: 140mm; }
.si-wm-w150 > * { width: 150mm; }
.si-wm-w160 > * { width: 160mm; }
.si-wm-w170 > * { width: 170mm; }
.si-wm-w180 > * { width: 180mm; }
.si-wm-w190 > * { width: 190mm; }
.si-wm-h20 > img { height: 20mm; } .si-wm-h20 > span { font-size: 6mm; }
.si-wm-h30 > img { height: 30mm; } .si-wm-h30 > span { font-size: 9mm; }
.si-wm-h40 > img { height: 40mm; } .si-wm-h40 > span { font-size: 12mm; }
.si-wm-h50 > img { height: 50mm; } .si-wm-h50 > span { font-size: 15mm; }
.si-wm-h60 > img { height: 60mm; } .si-wm-h60 > span { font-size: 18mm; }
.si-wm-h70 > img { height: 70mm; } .si-wm-h70 > span { font-size: 21mm; }
.si-wm-h80 > img { height: 80mm; } .si-wm-h80 > span { font-size: 24mm; }
.si-wm-h90 > img { height: 90mm; } .si-wm-h90 > span { font-size: 27mm; }
.si-wm-h100 > img { height: 100mm; } .si-wm-h100 > span { font-size: 30mm; }
.si-wm-h110 > img { height: 110mm; } .si-wm-h110 > span { font-size: 33mm; }
.si-wm-h120 > img { height: 120mm; } .si-wm-h120 > span { font-size: 36mm; }
.si-wm-h130 > img { height: 130mm; } .si-wm-h130 > span { font-size: 39mm; }
.si-wm-h140 > img { height: 140mm; } .si-wm-h140 > span { font-size: 42mm; }
.si-wm-h150 > img { height: 150mm; } .si-wm-h150 > span { font-size: 45mm; }
.si-wm-h160 > img { height: 160mm; } .si-wm-h160 > span { font-size: 48mm; }
.si-wm-h170 > img { height: 170mm; } .si-wm-h170 > span { font-size: 51mm; }
.si-wm-h180 > img { height: 180mm; } .si-wm-h180 > span { font-size: 54mm; }
.si-wm-h190 > img { height: 190mm; } .si-wm-h190 > span { font-size: 57mm; }
.si-wm-h200 > img { height: 200mm; } .si-wm-h200 > span { font-size: 60mm; }
.si-wm-h210 > img { height: 210mm; } .si-wm-h210 > span { font-size: 63mm; }
.si-wm-h220 > img { height: 220mm; } .si-wm-h220 > span { font-size: 66mm; }
.si-wm-h230 > img { height: 230mm; } .si-wm-h230 > span { font-size: 69mm; }
.si-wm-h240 > img { height: 240mm; } .si-wm-h240 > span { font-size: 72mm; }
.si-wm-h250 > img { height: 250mm; } .si-wm-h250 > span { font-size: 75mm; }
/* Move the watermark from the middle, in steps of 5 mm (m = minus): x to the right, y downwards. */
.si-wm-xm90 { --wx: -90mm; }
.si-wm-xm85 { --wx: -85mm; }
.si-wm-xm80 { --wx: -80mm; }
.si-wm-xm75 { --wx: -75mm; }
.si-wm-xm70 { --wx: -70mm; }
.si-wm-xm65 { --wx: -65mm; }
.si-wm-xm60 { --wx: -60mm; }
.si-wm-xm55 { --wx: -55mm; }
.si-wm-xm50 { --wx: -50mm; }
.si-wm-xm45 { --wx: -45mm; }
.si-wm-xm40 { --wx: -40mm; }
.si-wm-xm35 { --wx: -35mm; }
.si-wm-xm30 { --wx: -30mm; }
.si-wm-xm25 { --wx: -25mm; }
.si-wm-xm20 { --wx: -20mm; }
.si-wm-xm15 { --wx: -15mm; }
.si-wm-xm10 { --wx: -10mm; }
.si-wm-xm5 { --wx: -5mm; }
.si-wm-x5 { --wx: 5mm; }
.si-wm-x10 { --wx: 10mm; }
.si-wm-x15 { --wx: 15mm; }
.si-wm-x20 { --wx: 20mm; }
.si-wm-x25 { --wx: 25mm; }
.si-wm-x30 { --wx: 30mm; }
.si-wm-x35 { --wx: 35mm; }
.si-wm-x40 { --wx: 40mm; }
.si-wm-x45 { --wx: 45mm; }
.si-wm-x50 { --wx: 50mm; }
.si-wm-x55 { --wx: 55mm; }
.si-wm-x60 { --wx: 60mm; }
.si-wm-x65 { --wx: 65mm; }
.si-wm-x70 { --wx: 70mm; }
.si-wm-x75 { --wx: 75mm; }
.si-wm-x80 { --wx: 80mm; }
.si-wm-x85 { --wx: 85mm; }
.si-wm-x90 { --wx: 90mm; }
.si-wm-ym130 { --wy: -130mm; }
.si-wm-ym125 { --wy: -125mm; }
.si-wm-ym120 { --wy: -120mm; }
.si-wm-ym115 { --wy: -115mm; }
.si-wm-ym110 { --wy: -110mm; }
.si-wm-ym105 { --wy: -105mm; }
.si-wm-ym100 { --wy: -100mm; }
.si-wm-ym95 { --wy: -95mm; }
.si-wm-ym90 { --wy: -90mm; }
.si-wm-ym85 { --wy: -85mm; }
.si-wm-ym80 { --wy: -80mm; }
.si-wm-ym75 { --wy: -75mm; }
.si-wm-ym70 { --wy: -70mm; }
.si-wm-ym65 { --wy: -65mm; }
.si-wm-ym60 { --wy: -60mm; }
.si-wm-ym55 { --wy: -55mm; }
.si-wm-ym50 { --wy: -50mm; }
.si-wm-ym45 { --wy: -45mm; }
.si-wm-ym40 { --wy: -40mm; }
.si-wm-ym35 { --wy: -35mm; }
.si-wm-ym30 { --wy: -30mm; }
.si-wm-ym25 { --wy: -25mm; }
.si-wm-ym20 { --wy: -20mm; }
.si-wm-ym15 { --wy: -15mm; }
.si-wm-ym10 { --wy: -10mm; }
.si-wm-ym5 { --wy: -5mm; }
.si-wm-y5 { --wy: 5mm; }
.si-wm-y10 { --wy: 10mm; }
.si-wm-y15 { --wy: 15mm; }
.si-wm-y20 { --wy: 20mm; }
.si-wm-y25 { --wy: 25mm; }
.si-wm-y30 { --wy: 30mm; }
.si-wm-y35 { --wy: 35mm; }
.si-wm-y40 { --wy: 40mm; }
.si-wm-y45 { --wy: 45mm; }
.si-wm-y50 { --wy: 50mm; }
.si-wm-y55 { --wy: 55mm; }
.si-wm-y60 { --wy: 60mm; }
.si-wm-y65 { --wy: 65mm; }
.si-wm-y70 { --wy: 70mm; }
.si-wm-y75 { --wy: 75mm; }
.si-wm-y80 { --wy: 80mm; }
.si-wm-y85 { --wy: 85mm; }
.si-wm-y90 { --wy: 90mm; }
.si-wm-y95 { --wy: 95mm; }
.si-wm-y100 { --wy: 100mm; }
.si-wm-y105 { --wy: 105mm; }
.si-wm-y110 { --wy: 110mm; }
.si-wm-y115 { --wy: 115mm; }
.si-wm-y120 { --wy: 120mm; }
.si-wm-y125 { --wy: 125mm; }
.si-wm-y130 { --wy: 130mm; }
/* Item units table: the same look as the journal lines table (ruled cells, numbered rows, 30px fields). */
.iu-panel .iu-table th:nth-child(1) { width: 4%; }
.iu-panel .iu-table th:nth-child(2) { width: 14%; }
.iu-panel .iu-table th:nth-child(3) { width: 8%; }
.iu-panel .iu-table th:nth-child(4) { width: 15%; }
.iu-panel .iu-table th:last-child { width: 48px; }
.iu-panel .iu-table th { padding: 4px; font-size: 12px; font-weight: 800; }
.iu-panel .iu-table td { padding: 3px 4px; }
.iu-panel .iu-table .control { height: 30px; min-height: 30px; padding: 2px 6px; font-size: 12px; }
.iu-panel .iu-table .control { text-align: right; }
.iu-panel .iu-table .jv-idx { font-weight: 800; }
.iu-panel .iu-table .jv-del { width: 32px; height: 28px; padding: 0; }
/* Sales tax party of an invoice (normal / zero-rated / exempt). */
.si-entity { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.si-entity .control { width: auto; min-width: 120px; height: 28px; padding: 0 6px; }
/* Item card: tax rate and the kind of a 0% tax on one line. */
.ic-taxrow { display: flex; gap: 10px; }
.ic-taxrow > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ic-taxrow select:disabled { opacity: .55; }
.ic-name-row { display: flex; gap: var(--space-4); align-items: flex-start; }
.ic-name-row > .ic-name-cell { flex: 1 1 0; min-width: 0; }
.ic-name-row > .ic-level-cell { flex: 0 0 150px; }
.ic-name-row > .ic-stop-cell { flex: 0 0 auto; white-space: nowrap; }
.control.ic-name-input { background: #fffbd0; }
.iu-panel .itemcard-column-title { position: relative; }
.ic-price-note { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--navy-text); }
.place-dialog { width: min(900px, 94vw); }
.place-dialog-title { margin: 0 0 10px; text-align: center; font-size: 1.1rem; color: var(--navy-text); }
.place-dialog-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.place-dialog-results { max-height: 50vh; margin-top: 8px; }
.place-dialog-empty { margin-top: 10px; font-weight: 700; }
.place-dialog-empty[hidden] { display: none; }
.stx-bar input[type="date"] { width: 125px; }
.stx-bar .field:has(#b_Class) { flex: 4 1 0; }
.stx-bar .field:has(#b_Entity) { flex: 2 1 0; }
.stx-bar > .btn.btn-wide { width: 72px; }
.si-edit .si-head-one > .field:has(#Form_Classification) { flex: 2.2 1 0; }
.st-entry-table th, .st-entry-table td, .st-entry-table td.num { text-align: right; }
.st-entry-foot [data-dialog-close] { margin-inline-start: auto; }

/* ---- Responsive foundation: small windows and phones (one set of rules for every screen) ---- */
.nav-burger { display: none; }
@media screen and (max-width: 900px) {
    /* header: brand + actions on the first line, the menu button opens the navigation as a stacked list */
    .app-header { flex-wrap: wrap; height: auto; min-height: 60px; padding-block: var(--space-2); row-gap: var(--space-2); }
    .brand { order: 1; margin-inline-end: auto; }
    .nav-burger {
        order: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; padding: 0;
        border: 2px solid #7E9ABB; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 19px; line-height: 1; cursor: pointer;
    }
    .header-actions { order: 3; flex-wrap: wrap; }
    .main-nav { order: 4; display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; margin-inline: 0; white-space: normal; }
    .app-header.is-nav-open .main-nav { display: flex; }
    .main-nav .nav-item { justify-content: flex-start; width: 100%; height: 42px; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 14px; }
    .nav-drop { display: flex; width: 100%; }
    .nav-drop > .nav-item { flex: 1 1 auto; }
    .nav-drop-toggle, .nav-drop-menu { display: none !important; }
    .header-user { min-width: 0; padding: 0 10px; }

    /* page frame */
    .page-head { flex-wrap: wrap; }

    /* tables keep the full width of the page and, when their columns need more, scroll sideways inside the frame the script puts around them */
    .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll > table { margin-bottom: 0; }

    /* dialogs never wider than the screen */
    dialog { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; }
    .dialog, .dialog-notice { min-width: 0; }
}
@media screen and (max-width: 560px) {
    .info-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 8px; }
    .info-card:nth-child(1) { grid-column: 1 / -1; }
    .page { padding-inline: 6px; }
    .header-user small { display: none; }
    .header-user { height: 36px; }
    .panel-body, .card { padding: var(--space-3); }
    .toolbar .control { max-width: none; }
}

/* ---- Responsive layer: components with fixed widths ---- */
@media screen and (max-width: 900px) {
    /* two-column page layouts become one column */
    .entry-split, .info-top, .lookup, .perm, .log-top, .newyear-body, .backup-body, .dz-layout { grid-template-columns: minmax(0, 1fr); }
    .document-sequence-page .document-sequence-group, .cheque-postpone-screen .cheque-postpone-edit-fields { grid-template-columns: minmax(0, 1fr); }
    /* wide entry grids scroll inside their frame (the table keeps the width it needs) */
    .ob-screen .ob-scroll, .jv-edit.chq-compact .jv-grid-wrap, .lookup .payment-routing-table-wrap, .sales-invoices-list .jv-scroll,
    .si-edit .jv-grid-wrap, .wd-list-page .jv-scroll, .st-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* tiles and cards fill the row instead of using fixed widths */
    .menu-panel .menu-grid, .dash-bottom { grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr)); }
    .cheque-sector-shortcuts, .cheque-sector-cards, .cheque-sector-summary .cheque-sector-cards, .cheque-sector-summary .cheque-sector-card { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
    .db-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
    .si-edit .si-head-one[data-wd-head] > .wd-store[data-wd-formula-field],
    .si-edit .si-head-one.wd-head-mf[data-wd-head] > .wd-store.wd-store[data-wd-formula-field] { min-width: 0; }
}
@media screen and (max-width: 700px) {
    /* filter bars: two columns */
    .itemcard-material-filters, .chart-print-report .chart-print-filters, .store-ob-screen .store-ob-filters,
    .store-opening-print-report .store-opening-print-filters, .opening-balances-report .ob-report-filter,
    .store-opening .store-opening-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .log-fields { grid-template-columns: minmax(0, 1fr); }
    .grp-head .grp-search { width: 100%; }
}
@media screen and (max-width: 560px) {
    /* label + field rows: the label sits above the field */
    .chq-compact .chq-side, .si-edit .si-side, .si-edit .si-side-row, .si-edit .si-acc-row, .si-edit .si-acc-row:has(> :nth-child(3)),
    .si-edit .si-side-row.si-note-row, .mo-vehicle, .cheque-postpone-screen .cheque-postpone-description-field { grid-template-columns: minmax(0, 1fr); }
    .itemcard-material-filters, .chart-print-report .chart-print-filters, .store-ob-screen .store-ob-filters,
    .store-opening-print-report .store-opening-print-filters, .opening-balances-report .ob-report-filter,
    .store-opening .store-opening-entry { grid-template-columns: minmax(0, 1fr); }
    /* comfortable touch targets; 16px stops phones from zooming into a field */
    .control, select.control, .btn { min-height: 40px; }
    input.control, select.control, textarea.control { font-size: 16px; }
}

/* ---- Responsive layer: rows as cards on phones (entry grids and simple lists; the script gives every cell its title) ---- */
@media screen and (max-width: 900px) {
    main table.is-cards.is-cards { display: block; width: 100%; min-width: 0; table-layout: auto; border: 0; background: transparent; }
    main table.is-cards.is-cards colgroup, main table.is-cards.is-cards thead { display: none; }
    main table.is-cards.is-cards tbody { display: block; }
    main table.is-cards.is-cards tbody tr {
        position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; padding: 10px;
        border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
    }
    main table.is-cards.is-cards tbody tr:nth-child(even) { background: var(--surface); }
    main table.is-cards.is-cards tbody td {
        display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; width: auto; height: auto; padding: 0; border: 0;
        text-align: start; white-space: normal; overflow: visible; text-overflow: clip;
    }
    main table.is-cards.is-cards tbody td::before { content: attr(data-label); font-size: .72rem; font-weight: 700; line-height: 1.2; color: var(--muted); }
    main table.is-cards.is-cards tbody td[data-label=""]::before { display: none; }
    main table.is-cards.is-cards tbody td.is-wide { grid-column: 1 / -1; }
    main table.is-cards.is-cards tbody td.is-index { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; padding-inline-end: 52px; font-weight: 800; color: var(--navy-text); }
    main table.is-cards.is-cards tbody td.is-index::before { display: none; }
    main table.is-cards.is-cards tbody td.is-actions { position: absolute; top: 8px; inset-inline-end: 8px; flex-direction: row; }
    main table.is-cards.is-cards tbody td.is-actions::before { display: none; }
    main table.is-cards.is-cards [hidden] { display: none; }
    /* fields inside a card fill their cell and are comfortable to touch */
    main table.is-cards.is-cards td .control, main table.is-cards.is-cards td textarea { width: 100%; max-width: none; height: 40px; min-height: 40px; }
    main table.is-cards.is-cards td textarea.si-ta { height: auto; min-height: 40px; }
    /* the second row of an invoice line (description / credit account) stays attached under its card */
    main table.is-cards.is-cards tbody tr.si-sub { display: block; margin-top: -6px; }
    main table.is-cards.is-cards tbody tr.si-sub td { display: block; }
    main table.is-cards.is-cards tbody tr.si-sub[hidden] { display: none; }
    /* totals under the cards */
    main table.is-cards.is-cards tfoot { display: block; }
    main table.is-cards.is-cards tfoot tr { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
    main table.is-cards.is-cards tfoot th, main table.is-cards.is-cards tfoot td { display: inline-flex; padding: 0; border: 0; background: transparent; }
    /* the frames around grids no longer need a sideways bar */
    .jv-grid-wrap, .jv-scroll, .ob-scroll, .sales-draft-scroll, .iu-scroll { overflow-x: visible; }
}

/* ---- Responsive layer: text that must fit ---- */
.info-card b { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.3; }
@media screen and (max-width: 900px) {
    /* a button's text wraps instead of running out of the button; the button grows in height */
    .btn:not(.btn-icon) { height: auto; min-height: calc(var(--control-h) + 2px); padding-block: 5px; white-space: normal; line-height: 1.25; text-align: center; max-width: 100%; }
    .nav-item, .header-tool { max-width: 100%; }
    .header-tool { height: auto; min-height: 36px; padding-block: 3px; line-height: 1.2; }
    .panel-head h1, .panel-head h2, .page-head h1 { overflow-wrap: anywhere; }
}
@media print { .table-scroll { overflow: visible; } }

/* ---- Point of sale: responsive (tablet, phone) ---- */
.pos-bar { display: none; }
@media screen and (max-width: 900px) {
    .pos-top { gap: var(--space-2); }
    .pos-type { flex: 1 1 45%; }
    .pos-table-wrap { height: auto; min-height: 12rem; max-height: 55vh; }
    .pos-foot { flex-wrap: wrap; }
    .pos-foot .btn, .pos-foot .pos-pay { flex: 1 1 calc(33% - 8px); width: auto; min-width: 7.5rem; height: auto; min-height: 42px; padding-block: 4px; }
    .pos-foot [data-pos-fullscreen], .pos-foot .foot-end, .pos-foot .pos-exit-form { margin-inline-start: 0; }
    .pos-browse { width: calc(100vw - 8px); height: calc(100dvh - 8px); max-width: none; max-height: none; }
    .pos-browse-cards { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
    .pos-held-table th:last-child { width: auto; }
    .panel .pos-held-table td.pos-held-actions { white-space: normal; }
}
@media screen and (max-width: 900px) {
    .pos { padding-bottom: 76px; }
    .pos-modes { flex: 1 1 100%; }
    .pos-mode { flex: 1 1 0; min-width: 0; height: 40px; padding-inline: 8px; }
    .pos-type { flex: 1 1 100%; }
    .pos-customer { flex-wrap: wrap; }
    .pos-customer .control { flex: 1 1 8rem; }
    .pos-method { flex: 1 1 100%; }
    .pos-method .control { flex: 1 1 auto; width: auto; }
    .pos-customer-name { flex: 1 1 100%; max-width: none; white-space: normal; }
    .pos-user { flex: 1 1 100%; margin-inline-start: 0; white-space: normal; font-size: 1.05rem; }
    .pos-held-box, .pos-held-btn { width: 100%; }
    /* the same label width everywhere, so every field and the held-invoices button start and end at the same place */
    .pos-type label, .pos-customer label, .pos-method label { flex: 0 0 5.5rem; }
    .pos-method { display: flex; align-items: center; gap: var(--space-2); }
    .pos-held-box { padding-inline-start: calc(5.5rem + var(--space-2)); box-sizing: border-box; }
    .pos-held-btn { height: 34px; min-width: 0; }
    .pos-return { flex-wrap: wrap; }
    .pos-return .field, .pos-return .pos-reason { flex: 1 1 100%; }
    .pos-body { padding: var(--space-2); gap: var(--space-3); }

    /* scan box: the field takes the whole row, the two helper buttons sit under it */
    .pos-scan { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .pos-scan-input { flex: 1 1 100%; padding-left: 12px; }
    .pos-keypad-btn, .pos-browse-btn { position: static; transform: none; flex: 1 1 0; width: auto; min-width: 0; height: 42px; }
    .pos-suggest { top: 52px; }

    /* the lines become cards: name on top, the fields in a grid, the line total at the bottom */
    .pos-table-wrap { height: auto; min-height: 0; max-height: none; overflow: visible; border: 0; background: transparent; }
    .pos-table, .pos-table tbody { display: block; table-layout: auto; min-width: 0; }
    .pos-table colgroup, .pos-table thead { display: none; }
    .pos-table tbody tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; margin-bottom: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
    .pos-table.grid-table tbody tr:nth-child(even) { background: var(--surface); }
    .pos-table tbody td, .pos-table.is-ruled tbody td { display: flex; flex-direction: column; gap: 2px; width: auto; padding: 0; border: 0; text-align: start; }
    .pos-table tbody td::before { content: attr(data-label); font-size: .72rem; font-weight: 700; color: var(--muted); }
    .pos-table tbody td:nth-child(1) { display: none; }
    .pos-table tbody td:nth-child(2) { grid-column: 1 / -1; padding-inline-end: 38px; }
    .pos-table tbody td:nth-child(2)::before, .pos-table tbody td:nth-child(10)::before { display: none; }
    .pos-table tbody td:nth-child(10) { position: absolute; top: 8px; inset-inline-end: 8px; }
    .pos-table tbody td:nth-child(9) { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--line); font-size: 1.25rem; }
    .pos-table tbody td:nth-child(9)::before { font-size: .85rem; }
    .pos-table td .control { height: 42px; font-size: 1.15rem; }
    .pos-del { width: 32px; height: 32px; font-size: 1.1rem; }

    /* summary, payment options and last receipt under the lines */
    .pos-sum-total dd { font-size: 1.7rem; }
    .pos-last-links { flex-wrap: wrap; }

    /* bottom bar: total + save stay in view */
    .pos-bar {
        position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-3);
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 2px solid var(--card-line); box-shadow: 0 -4px 14px rgba(20, 52, 87, .16);
    }
    .pos-bar-total { display: flex; flex-direction: column; align-items: center; flex: 0 0 45%; line-height: 1.1; }
    .pos-bar-total small { color: var(--muted); font-weight: 700; }
    .pos-bar-total strong { direction: ltr; font-size: 1.5rem; color: var(--primary-dark); }
    .pos-bar .pos-pay { flex: 1 1 auto; grid-column: auto; height: 38px; }
    .pos-foot .pos-pay { display: none; }
    .pos-foot .btn { flex: 1 1 calc(50% - 8px); }
    .pos-foot [data-pos-fullscreen] { display: none; }
    .pos-browse-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .pos-browse-groups { display: flex; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); }
    .pos-browse-groups > * { flex: 0 0 auto; }
    .pos-browse-head { flex-wrap: wrap; }
    .pos-browse-added { flex: 1 1 100%; order: 3; }
    .pos-browse-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; padding: 10px; }
    .pos-st-wrap, .pos-held-wrap { overflow-x: auto; }
}
@media screen and (hover: none) { .pos kbd { display: none; } }

/* ---- Responsive layer: document heads (invoices, vouchers, warehouse documents) laid out like a table on phones ---- */
@media screen and (max-width: 900px) {
    .si-edit .si-head, .si-edit .si-head-one, .si-edit .si-return, .jv-edit .jv-head {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; align-items: stretch; margin: var(--space-2); padding: 0;
        border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); overflow: hidden;
    }
    .si-edit .si-head > *, .si-edit .si-head-one > *, .si-edit .si-return > *, .jv-edit .jv-head > * {
        min-width: 0 !important; max-width: none; margin: 0; padding: 6px 8px; background: var(--surface);
    }
    .si-edit .si-head > .field, .si-edit .si-head-one > .field, .si-edit .si-return > .field, .jv-edit .jv-head > .field { display: flex; flex-direction: column; gap: 2px; }
    .si-edit .si-head label, .si-edit .si-head-one label, .si-edit .si-return label, .jv-edit .jv-head label { font-size: .72rem; font-weight: 700; color: var(--muted); }
    .si-edit .si-head .control, .si-edit .si-head-one .control, .si-edit .si-return .control, .jv-edit .jv-head .control { width: 100%; min-width: 0; max-width: none; }
    /* long fields take the whole row; an odd last cell does too, so no empty block shows */
    .si-edit .si-head > .si-wide, .si-edit .si-head-one > .wd-store, .si-edit .si-head-one > .wd-note, .si-edit .si-head-one > .wd-note-inline,
    .si-edit .si-head-one > .wd-ref, .si-edit .si-head-one > .wd-mode, .jv-edit .jv-head > .jv-note, .jv-edit .jv-head > .jv-statement,
    .jv-edit .jv-head > .jv-cash-name { grid-column: 1 / -1; }
    .si-edit .si-head > :last-child:nth-child(odd), .si-edit .si-head-one > :last-child:nth-child(odd),
    .si-edit .si-return > :last-child:nth-child(odd), .jv-edit .jv-head > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- Responsive layer: action buttons (bottom bars, add-line bars, filter bars) ---- */
@media screen and (max-width: 900px) {
    /* the bottom action bar: two buttons per row, the main one (Save) full width on top, Exit full width at the end */
    main .panel-foot.panel-foot.panel-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); justify-content: stretch; padding: var(--space-3); }
    main .panel-foot.panel-foot.panel-foot > :is(.btn, form) { width: auto; min-width: 0; max-width: none; flex: none; margin: 0; justify-content: center; text-align: center; }
    main .panel-foot.panel-foot.panel-foot > .btn, main .panel-foot.panel-foot.panel-foot > form > .btn { min-height: 44px; }
    main .panel-foot.panel-foot.panel-foot > form > .btn { width: 100%; }
    main .panel-foot.panel-foot.panel-foot > .btn-primary, main .panel-foot.panel-foot.panel-foot > form:has(> .btn-primary) { grid-column: 1 / -1; order: -1; }
    main .panel-foot.panel-foot.panel-foot > .btn-primary, main .panel-foot.panel-foot.panel-foot > form > .btn-primary { min-height: 48px; font-size: 1.05rem; }
    main .panel-foot.panel-foot.panel-foot > .grow, main .panel-foot.panel-foot.panel-foot > .foot-end { grid-column: 1 / -1; margin: 0; }
    /* add-line bar and its totals */
    .jv-edit .jv-addbar, .chq-compact .jv-addbar { flex-wrap: wrap; gap: var(--space-2); }
    .jv-edit .jv-addbar > .btn { flex: 1 1 100%; min-height: 44px; }
    .jv-edit .jv-addbar .jv-info, .chq-compact .jv-addbar .chq-compact-audit { flex-wrap: wrap; gap: 6px 16px; margin-inline-start: 0; white-space: normal; }
    /* filter bars: fields wrap, their buttons share the row */
    .filter-card { flex-wrap: wrap; }
    .filter-card .control { flex: 1 1 10rem; }
    .filter-card .btn, .toolbar .btn { flex: 1 1 40%; min-height: 44px; }
}
@media screen and (hover: none) { .btn kbd { display: none; } }

/* ---- Responsive layer: line buttons inside cards (delete / repeat line) ---- */
@media screen and (max-width: 900px) {
    main table.is-cards.is-cards td.is-actions { gap: 6px; align-items: center; }
    main table.is-cards.is-cards td.is-actions .btn {
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; min-height: 40px; margin: 0; padding: 0;
        border-radius: 50%; font-size: 1.05rem; line-height: 1; box-shadow: none;
    }
    main table.is-cards.is-cards td.is-actions .btn:is([data-si-remove], [data-jv-remove], [data-wd-remove], [data-wd-prod-remove], [data-bom-remove], [data-iu-remove], [data-chq-remove], [data-delete-line]) {
        border-color: #E7B9B9; background: var(--danger-bg); color: var(--danger);
    }
    main table.is-cards.is-cards td.is-actions .btn:is([data-si-remove], [data-jv-remove], [data-wd-remove], [data-wd-prod-remove], [data-bom-remove], [data-iu-remove], [data-chq-remove], [data-delete-line]):active {
        background: var(--danger); border-color: var(--danger); color: #fff;
    }
    /* room at the top of the card for one or two round buttons */
    main table.is-cards.is-cards tbody tr:has(td.is-actions .btn:nth-child(2)) td.is-index { padding-inline-end: 100px; }
    main table.is-cards.is-cards td.is-actions { top: 6px; inset-inline-end: 6px; }
}

/* ---- Responsive layer: invoice bottom part (add line, audit trail, options, totals) ---- */
@media screen and (max-width: 900px) {
    .si-edit .jv-addbar { position: static; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); margin-inline: var(--space-2); }
    .si-edit .jv-addbar > .btn, .si-edit .jv-addbar [data-si-add] { flex: 1 1 100%; width: 100%; min-height: 44px; }
    .si-edit .jv-addbar .jv-info { position: static; transform: none; flex: 1 1 100%; justify-content: flex-start; margin: 0; white-space: normal; }
    /* who added / changed the document: one line each, with the sent-to-tax-system mark under them */
    .si-edit .si-audit { display: grid; gap: 4px; font-size: .85rem; direction: inherit; }
    .si-edit .si-audit-row { display: grid; gap: 2px; }
    .si-edit .si-audit-row > span { display: block; }
    .si-edit .si-bill-sent { justify-self: start; }
    /* options (post, allow negative) and totals: stacked, full width */
    .si-edit .si-bottom { flex-direction: column; align-items: stretch; gap: var(--space-3); margin: var(--space-3) var(--space-2) 0; }
    .si-edit .si-options { margin-top: 0; }
    .si-edit .si-options .checkbox { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; }
    /* totals as a small ruled table: title on one side, the amount on the other, the invoice total emphasised */
    .si-edit .si-totals, .si-edit .si-totals--left { gap: 0; width: 100%; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
    .si-edit .si-total { margin: 0; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; align-items: baseline; }
    .si-edit .si-total:last-child { border-bottom: 0; }
    .si-edit .si-total > span { color: var(--navy-text); font-weight: 700; }
    .si-edit .si-total > strong { direction: ltr; font-weight: 800; }
    .si-edit .si-grand { background: var(--soft); }
    .si-edit .si-grand > strong { font-size: 1.35rem; color: var(--primary-dark); }
    .si-edit .si-cheques-foot .si-total, .si-edit .si-cheques-foot .si-total:first-of-type { min-width: 0; margin-inline-start: 0; }
}

/* ---- Responsive layer: clear borders around line cards, and room between the cards and what follows them ---- */
@media screen and (max-width: 900px) {
    main table.is-cards.is-cards tbody tr { border: 1px solid var(--field-line); border-inline-start: 4px solid var(--primary); box-shadow: 0 1px 4px rgba(24, 65, 104, .10); }
    main table.is-cards.is-cards tbody tr.si-sub { border-inline-start-color: var(--field-line); }
    .jv-grid-wrap, .si-edit .jv-grid-wrap, .jv-edit.chq-compact .jv-grid-wrap { padding: var(--space-2); margin-bottom: var(--space-3); }
    .si-edit .jv-addbar, .jv-edit .jv-addbar { margin-top: var(--space-3); }
    .si-edit .si-bottom { margin-top: var(--space-4); }
}

/* ---- Responsive layer: no scroll boxes inside the page on phones (the page itself scrolls; the cards flow one after the other) ---- */
@media screen and (max-width: 900px) {
    .jv-grid-wrap, .jv-scroll, .si-edit .jv-grid-wrap, .jv-edit .jv-grid-wrap, .jv-edit.chq-compact .jv-grid-wrap,
    .sales-invoices-list .jv-scroll, .wd-list-page .jv-scroll, .st-list { max-height: none; overflow: visible; }
    /* the add-line bar grows with its content instead of keeping its desktop height */
    .si-edit .jv-addbar { height: auto; min-height: 0; max-height: none; }
}

/* ---- Responsive layer: document lists between phone and desktop width (titles and cells wrap instead of being cut) ---- */
@media screen and (max-width: 900px) {
    .sales-invoices-list .grid-table, .wd-list { table-layout: auto; }
    .sales-invoices-list .grid-table :is(th, td):nth-child(n), .wd-list :is(th, td) { width: auto; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
    .sales-invoices-list .grid-table thead th, .wd-list thead th { line-height: 1.25; vertical-align: middle; }
}

/* Small screens: boxes may shrink below their content so the fit script can lower the font instead of cutting the text */
@media screen and (max-width: 900px) {
    main :is(input.control, select.control, .btn, button) { min-width: 0; max-width: 100%; }
    main :is(input.control, select.control) { text-overflow: clip; }
}

/* ---- Responsive layer: document lists get their natural height on small screens (the desktop 10-row box, fixed row height and nowrap cells are released) ---- */
@media screen and (max-width: 900px) {
    .panel .document-list-ten-rows.document-list-ten-rows { height: auto; max-height: none; overflow: visible; }
    .panel .document-list-ten-rows.document-list-ten-rows > .grid-table.grid-table thead th {
        height: auto; min-height: 36px; position: static; padding: 6px 4px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; vertical-align: middle;
    }
    .panel .document-list-ten-rows.document-list-ten-rows > .grid-table.grid-table tbody tr { height: auto; }
    .panel .document-list-ten-rows.document-list-ten-rows > .grid-table.grid-table tbody td {
        height: auto; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4; padding-block: 7px;
    }
}

/* ---- Responsive layer: document lists as elegant cards on phones ---- */
@media screen and (max-width: 900px) {
    .panel .document-list-ten-rows.document-list-ten-rows > .grid-table.is-cards.is-cards tbody tr {
        height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 12px 10px; margin-bottom: 12px;
        border-radius: 12px; background: var(--surface); box-shadow: 0 2px 8px rgba(24, 65, 104, .12);
    }
    .panel .document-list-ten-rows.document-list-ten-rows > .grid-table.is-cards.is-cards tbody td {
        height: auto; padding: 0; min-height: 0; line-height: 1.35; white-space: normal; overflow: visible; text-align: start;
    }
    .sales-invoices-list .grid-table.is-cards.is-cards tbody td::before, .wd-list.is-cards.is-cards tbody td::before { font-size: .7rem; letter-spacing: 0; }
    /* the document number is the card title */
    .sales-invoices-list .grid-table.is-cards.is-cards tbody td:nth-child(2) { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; padding-inline-end: 40px; font-size: 1.05rem; font-weight: 800; color: var(--navy-text); }
    .sales-invoices-list .grid-table.is-cards.is-cards tbody td:nth-child(2)::before { font-size: .7rem; font-weight: 700; color: var(--muted); }
    /* the amount is the strongest value after the title */
    .sales-invoices-list .grid-table.is-cards.is-cards tbody td.num { font-weight: 800; color: var(--navy-text); font-variant-numeric: tabular-nums; }
    .sales-invoices-list .grid-table.is-cards.is-cards tbody td.is-wide { padding-top: 6px; border-top: 1px dashed var(--line); }
    .sales-invoices-list .grid-table.is-cards.is-cards tbody td.is-actions { top: 10px; inset-inline-end: 10px; }
    .sales-invoices-list .grid-table.is-cards.is-cards tbody td input[type="radio"] { width: 22px; height: 22px; margin: 0; accent-color: var(--primary); }
    .sales-invoices-list .grid-table.is-cards.is-cards tbody tr:has(input:checked) { border-color: var(--primary); background: var(--primary-soft, #EAF2FB); box-shadow: 0 0 0 2px var(--primary); }
    .sales-invoices-list .grid-table.is-cards.is-cards tfoot tr.jv-sum { background: #F1F6FC; border-style: solid; }
}

/* ---- Responsive layer: list filters as a tidy two-column form, section picker as tappable cards (phones) ---- */
@media screen and (max-width: 900px) {
    html:not(.pano-native-shell) .jv-list .jv-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
    html:not(.pano-native-shell) .jv-list .jv-filter > .field { flex: none; width: auto; min-width: 0; margin: 0; }
    html:not(.pano-native-shell) .jv-list .jv-filter > :is(.field-wide, .jv-search, .jv-go) { grid-column: 1 / -1; }
    html:not(.pano-native-shell) .jv-list .jv-filter label { font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
    html:not(.pano-native-shell) .jv-list .jv-filter .jv-go label { display: none; }
    html:not(.pano-native-shell) .jv-list .jv-filter .jv-go .btn { width: 100%; min-height: 44px; font-weight: 800; }
    html:not(.pano-native-shell) .jv-list .jv-filter .control { width: 100%; }

    .od-pick .grid-table.is-cards.is-cards tbody tr {
        display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px; cursor: pointer;
        border-radius: 12px; box-shadow: 0 2px 8px rgba(24, 65, 104, .12);
    }
    .od-pick .grid-table.is-cards.is-cards tbody td { flex-direction: row; align-items: center; padding: 0; text-align: start; }
    .od-pick .grid-table.is-cards.is-cards tbody td::before { display: none; }
    .od-pick .grid-table.is-cards.is-cards tbody td:first-child {
        flex: 0 0 auto; min-width: 38px; height: 38px; justify-content: center; border-radius: 10px;
        background: var(--primary); color: #fff; font-weight: 800; font-size: 1rem;
    }
    .od-pick .grid-table.is-cards.is-cards tbody td.pick-cell { flex: 1 1 auto; min-width: 0; }
    .od-pick .pick-link { font-size: 1.1rem; font-weight: 800; color: var(--navy-text); text-decoration: none; }
    .od-pick .pick-link::after { content: ""; position: absolute; inset: 0; }
    .od-pick .grid-table.is-cards.is-cards tbody td.is-actions { position: relative; top: auto; inset-inline-end: auto; flex: 0 0 auto; z-index: 1; }
}

/* ---- Responsive layer: smaller field text and a compact delete-line button (phones) ---- */
@media screen and (max-width: 900px) {
    main :is(input.control, select.control) { min-height: 36px; }
    main .jv-filter :is(input.control, select.control) { height: 36px; padding-block: 0; }
    main table.is-cards.is-cards td.is-actions .btn { width: 32px; min-width: 32px; height: 32px; min-height: 32px; font-size: .9rem; }
    /* a card without a number row: the button sits at the card's end, in its own slim row, instead of covering the first field */
    main table.is-cards.is-cards tbody tr:not(:has(td.is-index)) td.is-actions {
        position: static; order: -1; grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; min-height: 0; margin: -2px 0 -4px;
    }
}

/* ---- Responsive layer: add-line / repeat-line bar as two equal, soft buttons (phones) ---- */
@media screen and (max-width: 900px) {
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; height: auto; max-height: none; padding: 0; margin-inline: 0;
    }
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar > .btn.btn {
        display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 46px; min-height: 46px; margin: 0; padding: 4px 10px;
        border: 1px solid var(--field-line); border-radius: 12px; background: #F3F8FD; color: var(--primary);
        font-size: .88rem; font-weight: 700; line-height: 1.25; text-align: center; white-space: normal; box-shadow: none;
    }
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar > .btn.btn:first-of-type { background: var(--primary); border-color: var(--primary); color: #fff; }
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar > .btn.btn:active { transform: scale(.98); }
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar > .btn.btn:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar > :not(.btn) { grid-column: 1 / -1; }
}

/* ---- Responsive layer: document heads without coloured holes (cells packed densely; lines drawn on the cells, the empty space stays white) ---- */
@media screen and (max-width: 900px) {
    .si-edit .si-head.si-head, .si-edit .si-head-one.si-head-one, .si-edit .si-return.si-return, .jv-edit .jv-head.jv-head {
        gap: 0; grid-auto-flow: row dense; background: var(--surface);
    }
    .si-edit .si-head.si-head > *, .si-edit .si-head-one.si-head-one > *, .si-edit .si-return.si-return > *, .jv-edit .jv-head.jv-head > * {
        box-shadow: 0 0 0 .5px var(--line); max-width: 100%; box-sizing: border-box; overflow: hidden;
    }
    .si-edit .si-head.si-head > *:empty, .si-edit .si-head-one.si-head-one > *:empty, .jv-edit .jv-head.jv-head > *:empty { display: none; }
}

/* ---- Responsive layer: one fluid type scale on small screens (the font follows the screen width, between a floor and the desktop size; the fit script
        still lowers any text that does not fit its box). The :not(#_) selector adds the weight of one id so this scale beats the older per-screen sizes. ---- */
@media screen and (max-width: 700px) {
    main:not(#_) :is(td, th) { font-size: clamp(9.5px, 2.8vw, 11px); }
    main:not(#_) :is(label, small, .info-card small, .field > span) { font-size: clamp(8.5px, 2.4vw, 10px); }
    main:not(#_) :is(.badge, .pill, .jv-count) { font-size: clamp(9px, 2.6vw, 10.5px); }
    main:not(#_) :is(.btn, button.btn, .btn-icon) { font-size: clamp(10px, 2.9vw, 11.5px); }
    main:not(#_) :is(input.control, select.control, textarea.control, .control) { font-size: clamp(9.5px, 2.7vw, 11px); }
    main:not(#_) .panel-head :is(h1, h2) { font-size: clamp(11px, 3.2vw, 13px); }
    main:not(#_) .info-card b { font-size: clamp(9.5px, 2.8vw, 11px); }
    main:not(#_) table.is-cards tbody td::before { font-size: clamp(8.5px, 2.4vw, 10px); }
    /* the few emphasised values keep their rank in the scale */
    main:not(#_) .sales-invoices-list .grid-table.is-cards tbody td:nth-child(2), main:not(#_) table.is-cards tbody td.is-index { font-size: clamp(11px, 3.2vw, 13px); }
    main:not(#_) td.num, main:not(#_) .jv-foot-sum strong { font-size: clamp(10px, 2.9vw, 11.5px); }
}

/* ---- Responsive layer: every add-line button stretches across the phone width (two equal buttons per row; wrapper and fixed-width buttons released) ---- */
@media screen and (max-width: 900px) {
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar .jv-add-actions {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; grid-column: 1 / -1;
    }
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar .jv-add-actions > .btn.btn {
        display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 46px; min-height: 46px; margin: 0; padding: 4px 10px;
        border: 1px solid var(--field-line); border-radius: 12px; background: #F3F8FD; color: var(--primary);
        font-size: .9rem; font-weight: 700; line-height: 1.25; text-align: center; white-space: normal; box-shadow: none;
    }
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar .jv-add-actions > .btn.btn:first-child { background: var(--primary); border-color: var(--primary); color: #fff; }
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar .jv-add-actions > .btn.btn:only-child { grid-column: 1 / -1; }
    :is(.si-edit, .jv-edit) .jv-addbar.jv-addbar > .btn.btn-sm-w, .chq-compact .jv-addbar.chq-repeat-addbar > .btn { width: 100%; min-width: 0; }
    .chq-compact .jv-addbar.chq-repeat-addbar > .chq-repeat-action { margin-inline-start: 0; order: 0; }
}

/* ---- Responsive layer: card fields all the same width and height (the desktop column widths of the entry grids are released inside cards) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) table.is-cards tbody td { width: auto; min-width: 0; max-width: none; padding: 0; overflow: visible; }
    main:not(#_) table.is-cards tbody td :is(.control, textarea) { width: 100%; min-width: 0; max-width: none; height: 36px; min-height: 36px; padding: 0 10px; box-sizing: border-box; }
    main:not(#_) table.is-cards tbody td textarea.si-ta { height: auto; padding-block: 6px; }
    main:not(#_) table.is-cards tbody td input[type="date"] { direction: rtl; text-align: start; }
}

/* ---- Responsive layer: chart of accounts (toolbar, account cards, bottom actions) ---- */
@media screen and (max-width: 900px) {
    .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: var(--space-3); }
    .toolbar > .toolbar-grow { grid-column: 1 / -1; order: -1; }
    .toolbar > .toolbar-end { margin: 0; }
    .toolbar > .toolbar-end:nth-child(2) { grid-column: 1 / -1; }
    .toolbar > .btn:not(.btn-icon), .toolbar .toolbar-end .btn:not(.btn-icon) { width: 100%; height: 40px; }
    .toolbar .toolbar-end { display: grid; grid-template-columns: 1fr; }

    /* an account card: number and name as the title, level and kind below, the three round actions in the corner */
    .grid-table.is-accounts.is-cards.is-cards tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
    .grid-table.is-accounts.is-cards.is-cards tbody td:nth-child(1) {
        grid-column: 1 / -1; flex-direction: row; align-items: center; padding-inline-end: 118px; font-weight: 800; color: var(--primary);
    }
    .grid-table.is-accounts.is-cards.is-cards tbody td:nth-child(2) { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 800; color: var(--navy-text); }
    .grid-table.is-accounts.is-cards.is-cards tbody td:is(:nth-child(1), :nth-child(2))::before { display: none; }
    .grid-table.is-accounts.is-cards.is-cards tbody td.is-actions { top: 8px; inset-inline-end: 8px; }
    .grid-table.is-accounts.is-cards.is-cards tbody td.is-actions .row-actions { display: inline-flex; align-items: center; gap: 6px; }
    .grid-table.is-accounts.is-cards.is-cards tbody td.is-actions .row-actions form { margin: 0; }
    main table.is-cards.is-cards td.is-actions .btn.btn-danger { border-color: var(--danger); background: var(--danger); color: #fff; }

    .panel-foot.chart-accounts-bottom-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .chart-accounts-export-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
    .panel-foot.chart-accounts-bottom-actions .btn { flex: none; width: 100%; min-width: 0; margin: 0; }
}

/* ---- Responsive layer: chart of accounts between phone and desktop width (the name column takes the free space; no scroll box; fluid footer buttons) ---- */
@media screen and (max-width: 900px) {
    .scroll-y:has(> .grid-table.is-accounts) { max-height: none; overflow: visible; }
    .grid-table.is-accounts { table-layout: auto; width: 100%; }
    .grid-table.is-accounts :is(th, td):nth-child(n) { width: auto; }
    .grid-table.is-accounts :is(th, td):nth-child(1) { white-space: nowrap; width: 1%; }
    .grid-table.is-accounts :is(th, td):nth-child(3) { width: 1%; white-space: nowrap; }
    .grid-table.is-accounts :is(th, td):nth-child(4) { width: 1%; white-space: nowrap; }
    .grid-table.is-accounts :is(th, td):nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
    .grid-table.is-accounts :is(th, td).col-actions { width: 1%; white-space: nowrap; }
    .grid-table.is-accounts .row-actions { display: inline-flex; flex-wrap: nowrap; gap: 4px; }
    .panel-foot.chart-accounts-bottom-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .chart-accounts-export-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; }
    .panel-foot.chart-accounts-bottom-actions .btn { flex: 1 1 130px; width: auto; min-width: 0; }
    .panel-foot.chart-accounts-bottom-actions .chart-accounts-exit { flex: 1 1 100%; margin-inline-start: 0; }
}

/* ---- Responsive layer: several action cells in one card (a select circle and a preview button) sit side by side in the corner instead of on top of each other ---- */
@media screen and (max-width: 900px) {
    main:not(#_) table.is-cards tbody td.is-actions { top: 8px; inset-inline-end: 8px; height: 32px; align-items: center; justify-content: center; }
    main:not(#_) table.is-cards tbody td.is-actions ~ td.is-actions { inset-inline-end: 46px; }
    main:not(#_) table.is-cards tbody td.is-actions ~ td.is-actions ~ td.is-actions { inset-inline-end: 84px; }
    main:not(#_) table.is-cards tbody tr:has(td.is-actions ~ td.is-actions) td.is-index,
    main:not(#_) .sales-invoices-list table.is-cards tbody tr:has(td.is-actions ~ td.is-actions) td:nth-child(2) { padding-inline-end: 96px; }
}

/* ---- Responsive layer: journal voucher line card (account and name on one row; rate, debit and credit on one row; actions inline) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .jv-edit .jv-grid.is-cards tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 8px; }
    main:not(#_) .jv-edit .jv-grid.is-cards tbody td:nth-child(2) { grid-column: span 2; }
    main:not(#_) .jv-edit .jv-grid.is-cards tbody td:nth-child(3) { grid-column: span 4; }
    main:not(#_) .jv-edit .jv-grid.is-cards tbody td:is(:nth-child(4), :nth-child(5), :nth-child(6)) { grid-column: span 2; }
    main:not(#_) .jv-edit .jv-grid.is-cards tbody td:nth-child(7) { grid-column: 1 / -1; }
    main:not(#_) .jv-edit .jv-grid.is-cards tbody td:is(:nth-child(8), :nth-child(9)) { grid-column: span 3; }
    main:not(#_) .jv-edit .jv-grid.is-cards tbody td:last-child {
        grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px dashed var(--line);
    }
    main:not(#_) .jv-edit .jv-grid.is-cards tbody td:last-child::before { margin-inline-end: auto; }
    main:not(#_) .jv-edit .jv-grid.is-cards tbody td:last-child .btn { margin: 0; }
}

/* ---- Responsive layer: opening balances line card (same arrangement as the journal voucher line) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .ob-table.is-cards tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 8px; }
    main:not(#_) .ob-table.is-cards tbody td:nth-child(2) { grid-column: span 2; }
    main:not(#_) .ob-table.is-cards tbody td:nth-child(3) { grid-column: span 4; }
    main:not(#_) .ob-table.is-cards tbody td:is(:nth-child(4), :nth-child(5), :nth-child(6)) { grid-column: span 2; }
    main:not(#_) .ob-table.is-cards tbody td:nth-child(7) { grid-column: 1 / -1; }
    main:not(#_) .ob-table.is-cards tbody td:is(:nth-child(8), :nth-child(9)) { grid-column: span 3; }
    main:not(#_) .ob-table.is-cards tbody td:last-child {
        grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px dashed var(--line);
    }
    main:not(#_) .ob-table.is-cards tbody td:last-child::before { margin-inline-end: auto; }
    main:not(#_) .ob-table.is-cards tbody td:last-child .btn { margin: 0; }
}

/* ---- Responsive layer: document list cards (journal, vouchers): select circle and preview button side by side in the corner, the number as the card title ---- */
@media screen and (max-width: 900px) {
    /* the slim button row above the fields is only for line cards that hold a delete button; list cards keep their buttons in the corner */
    main:not(#_) table.is-cards tbody tr td.is-actions.is-actions:not(:has(:is([data-si-remove], [data-jv-remove], [data-wd-remove], [data-wd-prod-remove], [data-bom-remove], [data-iu-remove], [data-chq-remove], [data-delete-line]))) {
        position: absolute; order: 0; grid-column: auto; top: 10px; inset-inline-end: 10px; flex-direction: row; justify-content: center; margin: 0;
    }
    main:not(#_) table.is-cards tbody tr td.is-actions.is-actions:not(:has(:is([data-si-remove], [data-jv-remove], [data-wd-remove], [data-wd-prod-remove], [data-bom-remove], [data-iu-remove], [data-chq-remove], [data-delete-line]))) ~ td.is-actions { inset-inline-end: 52px; }
    main:not(#_) .jv-list table.is-cards tbody td.is-actions ~ td.is-actions + td {
        grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; padding-inline-end: 100px; min-height: 32px; align-self: center;
        font-size: clamp(13px, 3.8vw, 15px); font-weight: 800; color: var(--navy-text);
    }
    main:not(#_) .jv-list table.is-cards tbody td.is-actions ~ td.is-actions + td::before { font-size: clamp(9px, 2.6vw, 10.5px); font-weight: 700; color: var(--muted); }
    main:not(#_) .jv-list table.is-cards tbody tr:has(td.is-actions ~ td.is-actions) { padding-top: 12px; }
    main:not(#_) .jv-list table.is-cards tbody tr:has(td.is-actions ~ td.is-actions) td.num { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px dashed var(--line); font-size: clamp(12px, 3.5vw, 14px); color: var(--primary); }
}

/* ---- Responsive layer: an empty document list shows one clear notice and a slim count bar instead of a cut-off header row ---- */
@media screen and (max-width: 900px) {
    .grid-table:has(tbody td.muted[colspan]) { display: block; width: 100%; min-width: 0; table-layout: auto; border: 0; background: transparent; }
    .grid-table:has(tbody td.muted[colspan]) :is(thead, colgroup) { display: none; }
    .grid-table:has(tbody td.muted[colspan]) :is(tbody, tbody tr, tfoot) { display: block; }
    .grid-table:has(tbody td.muted[colspan]) tbody td.muted {
        display: block; width: auto; padding: 28px 12px; text-align: center; white-space: normal;
        border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); color: var(--muted);
    }
    .grid-table:has(tbody td.muted[colspan]) tfoot tr {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 8px; padding: 10px 12px;
        border: 1px solid var(--line); border-radius: 10px; background: #F1F6FC;
    }
    .grid-table:has(tbody td.muted[colspan]) tfoot :is(td, th) { display: inline-flex; width: auto; padding: 0; border: 0; background: transparent; }
    .grid-table:has(tbody td.muted[colspan]) tfoot :is(td, th):empty { display: none; }
}

/* ---- Responsive layer: every document list (warehouse documents, formulas, invoices, vouchers) uses the same card: select circle in the corner, number as the title, value on the last row ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .jv-list table.is-cards tbody td.is-actions + td:not(.is-actions) {
        grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; min-height: 32px; align-self: center; padding-inline-end: 52px;
        font-size: clamp(13px, 3.8vw, 15px); font-weight: 800; color: var(--navy-text);
    }
    main:not(#_) .jv-list table.is-cards tbody td.is-actions ~ td.is-actions + td:not(.is-actions) { padding-inline-end: 100px; }
    main:not(#_) .jv-list table.is-cards tbody td.is-actions + td:not(.is-actions)::before { font-size: clamp(9px, 2.6vw, 10.5px); font-weight: 700; color: var(--muted); }
    main:not(#_) .jv-list table.is-cards tbody tr:has(td.is-actions) { padding-top: 12px; }
    main:not(#_) .jv-list table.is-cards tbody tr:has(td.is-actions) td.num {
        grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px dashed var(--line);
        font-size: clamp(12px, 3.5vw, 14px); color: var(--primary);
    }
    main:not(#_) .jv-list table.is-cards tbody tr:has(td.is-actions input:checked) { border-color: var(--primary); background: var(--primary-soft, #EAF2FB); box-shadow: 0 0 0 2px var(--primary); }
    main:not(#_) .jv-list table.is-cards tfoot tr { background: #F1F6FC; border-style: solid; }
}

/* ---- Responsive layer: grouped lists (opening cheques): group title bars, one card per record, buttons in a row at the card end ---- */
@media screen and (max-width: 900px) {
    .scroll-y:has(> .cheque-opening-table) { max-height: none; overflow: visible; }
    main table.is-cards tbody tr.is-group { display: block; margin: 4px 0 8px; padding: 0; border: 0; background: transparent; box-shadow: none; }
    main table.is-cards tbody tr.is-group > :is(th, td) {
        display: block; width: auto; padding: 9px 12px; border: 0; border-radius: 10px; background: var(--primary); color: #fff; text-align: start; font-weight: 800;
    }
    main:not(#_) table.cheque-opening-table.is-cards tbody td:first-child {
        grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; font-size: clamp(13px, 3.8vw, 15px); font-weight: 800; color: var(--navy-text);
    }
    main:not(#_) table.cheque-opening-table.is-cards tbody td:nth-child(5) {
        grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px dashed var(--line);
        font-size: clamp(12px, 3.5vw, 14px); color: var(--primary);
    }
    main:not(#_) table.cheque-opening-table.is-cards tbody td.cheque-opening-actions {
        grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line);
    }
    main:not(#_) table.cheque-opening-table.is-cards tbody td.cheque-opening-actions::before { display: none; }
    main:not(#_) table.cheque-opening-table.is-cards .cheque-opening-action-buttons { display: flex; gap: 8px; width: 100%; }
    main:not(#_) table.cheque-opening-table.is-cards .cheque-opening-action-buttons > * { flex: 1 1 0; margin: 0; min-width: 0; }
    main:not(#_) table.cheque-opening-table.is-cards .cheque-opening-action-buttons .btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 38px; min-height: 38px; }
    main table.is-cards tfoot :is(th, td):empty { display: none; }
}

/* ---- Responsive layer: warehouse settings (tabs, list cards) ---- */
@media screen and (max-width: 900px) {
    .warehouse-settings-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
    .warehouse-settings-tabs > .btn { grid-column: span 2; min-width: 0; width: 100%; height: 40px; padding-inline: 4px; white-space: normal; line-height: 1.2; }
    .warehouse-settings-tabs > :is(.warehouse-settings-print, .warehouse-settings-exit) { grid-column: span 3; margin: 0; }

    /* a list card: the number is a small line, the name is the title, the buttons close the card */
    main:not(#_) .lookup-main table.is-cards tbody td:nth-child(1) { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 6px; color: var(--muted); }
    main:not(#_) .lookup-main table.is-cards tbody td:nth-child(2) {
        grid-column: 1 / -1; font-size: clamp(13px, 3.8vw, 15px); font-weight: 800; color: var(--navy-text);
    }
    main:not(#_) .lookup-main table.is-cards tbody td:nth-child(2)::before { display: none; }
    main:not(#_) .lookup-main table.is-cards tbody td:is(.col-actions, .is-actions) {
        position: static; grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding-top: 8px; border-top: 1px dashed var(--line);
    }
    main:not(#_) .lookup-main table.is-cards tbody td:is(.col-actions, .is-actions)::before { display: none; }
    main:not(#_) .lookup-main table.is-cards tbody td:is(.col-actions, .is-actions) .row-actions { display: flex; gap: 8px; margin-inline-start: auto; }
    main:not(#_) .lookup-main table.is-cards tbody td:is(.col-actions, .is-actions):empty { display: none; }
}

/* ---- Responsive layer: item card editor (fields in two columns, tax and name rows full width, units as cards) ---- */
@media screen and (max-width: 900px) {
    .itemcard-accounts .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
    .itemcard-accounts .form-grid > .col-12, .itemcard-accounts .form-grid > .ic-name-row { grid-column: 1 / -1; }
    .itemcard-accounts .form-grid > .field:is(:has(.ic-taxrow), :has(input[name="Note"]), :has(input[name="Place"])) { grid-column: 1 / -1 !important; }
    .itemcard-accounts .ic-taxrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .itemcard-accounts .ic-name-row { flex-wrap: wrap; gap: 8px 10px; }
    .itemcard-accounts .ic-name-row > .ic-name-cell { flex: 1 1 100%; }
    .itemcard-accounts .ic-name-row > .ic-level-cell { flex: 1 1 0; }
    .itemcard-accounts .ic-name-row > .ic-stop-cell { flex: 1 1 0; }
    .itemcard-accounts .ic-price-note { position: static; display: block; transform: none; margin-top: 2px; text-align: center; }
    .iu-panel { padding: 10px; border-radius: 12px; }
    .iu-panel .iu-scroll { overflow: visible; }
    .iu-panel .iu-bar { flex-direction: column; align-items: stretch; gap: 8px; }
    .iu-panel .iu-bar [data-iu-add] { width: 100%; flex: none; height: 44px; }

    /* a unit card: unit and factor, barcode, three selling prices, three buying prices */
    main:not(#_) .iu-table.is-cards tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
    main:not(#_) .iu-table.is-cards tbody td:nth-child(2) { grid-column: span 4; }
    main:not(#_) .iu-table.is-cards tbody td:nth-child(3) { grid-column: span 2; }
    main:not(#_) .iu-table.is-cards tbody td:nth-child(4) { grid-column: 1 / -1; }
    main:not(#_) .iu-table.is-cards tbody td:is(:nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10)) { grid-column: span 2; }
    main:not(#_) .iu-table.is-cards tbody td.is-actions:empty { display: none; }
    main:not(#_) .iu-table.is-cards tbody tr.iu-base { border-inline-start-color: var(--primary); background: var(--primary-soft, #EAF2FB); }
}

/* ---- Responsive layer: the section picker's number chip (a clear rounded square with a readable number) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .od-pick table.is-cards tbody td:first-child {
        flex: 0 0 auto; min-width: 42px; width: auto; height: 42px; padding: 0 10px; justify-content: center; align-items: center;
        border-radius: 12px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
    }
    main:not(#_) .od-pick table.is-cards tbody tr { gap: 14px; }
}

/* ---- Responsive layer: a footer with exactly two buttons (Save / Cancel, Save / Exit) keeps both on one line, equal in width ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .panel-foot:has(> .btn:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    main:not(#_) .panel-foot:has(> .btn:nth-child(2):last-child) > .btn { grid-column: auto; width: 100%; margin: 0; }
}

/* ---- Responsive layer: toolbars keep their buttons on one line (search on top, buttons equal in width below) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .toolbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
    main:not(#_) .toolbar > .toolbar-grow { flex: 1 1 100%; order: -1; }
    main:not(#_) .toolbar > .toolbar-end { display: contents; }
    main:not(#_) .toolbar > .btn:not(.btn-icon), main:not(#_) .toolbar .toolbar-end > .btn:not(.btn-icon) {
        flex: 1 1 0; min-width: 0; width: auto; height: 40px; padding-inline: 6px; white-space: normal; line-height: 1.2;
    }
    main:not(#_) .itemcard-accounts .chart-accounts-bottom-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
    main:not(#_) .itemcard-accounts .chart-accounts-bottom-actions > .itemcard-bottom-tools { display: contents; }
    main:not(#_) .itemcard-accounts .chart-accounts-bottom-actions .btn { flex: 1 1 0; min-width: 0; width: auto; height: 42px; padding-inline: 6px; white-space: normal; line-height: 1.2; }
}

/* ---- Responsive layer: item card list (one card per item: name as the title, number and code, level and classification, status, round action buttons) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .itemcard-tree-table.is-cards tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px; border-radius: 12px; }
    main:not(#_) .itemcard-tree-table.is-cards tbody td { padding: 0; }
    main:not(#_) .itemcard-tree-table.is-cards tbody td:nth-child(3) {
        order: -3; grid-column: 1 / -1; flex-direction: row; align-items: center; font-size: clamp(13px, 3.8vw, 15px); font-weight: 800; color: var(--navy-text);
        padding-bottom: 6px; border-bottom: 1px dashed var(--line);
    }
    main:not(#_) .itemcard-tree-table.is-cards tbody td:nth-child(3)::before { display: none; }
    main:not(#_) .itemcard-tree-table.is-cards tbody td:nth-child(1) { order: -2; grid-column: auto; flex-direction: column; align-items: stretch; color: var(--primary); font-weight: 800; padding-inline-end: 0; }
    main:not(#_) .itemcard-tree-table.is-cards tbody td:nth-child(2) { order: -1; grid-column: auto; flex-direction: column; align-items: stretch; font-weight: 700; color: var(--navy-text); }
    main:not(#_) .itemcard-tree-table.is-cards tbody td:is(:nth-child(4), :nth-child(5), :nth-child(6)) { grid-column: auto; font-weight: 700; }
    main:not(#_) .itemcard-tree-table.is-cards tbody td:nth-child(6) .badge { align-self: flex-start; }
    main:not(#_) .itemcard-tree-table.is-cards tbody td.col-actions {
        grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; padding-top: 8px; border-top: 1px dashed var(--line);
    }
    main:not(#_) .itemcard-tree-table.is-cards tbody td.col-actions::before { display: none; }
    main:not(#_) .itemcard-tree-table.is-cards td.col-actions .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; }
    main:not(#_) .itemcard-tree-table.is-cards td.col-actions .row-actions form { margin: 0; }
    main:not(#_) .itemcard-tree-table.is-cards td.col-actions .btn-icon {
        display: inline-flex; align-items: center; justify-content: center; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; font-size: 1rem;
    }
    main:not(#_) .itemcard-tree-table.is-cards td.col-actions .btn-danger { border-color: var(--danger); background: var(--danger); color: #fff; }
    main:not(#_) .itemcard-tree-table.is-cards td.col-actions .row-actions > :first-child { margin-inline-end: auto; }
}

/* ---- Responsive layer: the count / total bar under a list keeps its words whole (no letter-by-letter wrapping) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) table tfoot tr.jv-sum :is(td, th) { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; width: auto; }
    main:not(#_) table tfoot tr.jv-sum .jv-foot-count { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
    main:not(#_) table tfoot tr.jv-sum .jv-foot-count > span { white-space: nowrap; overflow-wrap: normal; }
    main:not(#_) table tfoot tr.jv-sum .jv-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; }
    main:not(#_) table.is-cards tfoot tr.jv-sum, main:not(#_) .grid-table:has(tbody td.muted[colspan]) tfoot tr.jv-sum { justify-content: space-between; flex-wrap: nowrap; }
    main:not(#_) table tfoot tr.jv-sum td:first-child { flex: 1 1 auto; }
}

/* ---- Responsive layer: printed reports (statements, trial balance, lists) read on a small screen: compact type that follows the width, whole numbers, two action buttons ---- */
@media screen and (max-width: 900px) {
    .chart-print-report:not(#_) { padding: 10px; }
    .chart-print-report:not(#_) .chart-print-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
    .chart-print-report:not(#_) .chart-print-actions > .btn { width: 100%; min-width: 0; }
    .chart-print-report:not(#_) .chart-print-heading { margin-bottom: 12px; }
    .chart-print-report:not(#_) .chart-print-heading h1 { font-size: clamp(12px, 3.6vw, 15px); margin-bottom: 8px; }
    .chart-print-report:not(#_) .chart-print-title h2 { font-size: clamp(12px, 3.6vw, 15px); }
    .chart-print-report:not(#_) .chart-print-title > strong { font-size: clamp(12px, 3.6vw, 16px); }
    .chart-print-report:not(#_) .st-print-sub { font-size: clamp(10px, 2.9vw, 12px); line-height: 1.6; }
    .chart-print-report:not(#_) table :is(th, td) { padding: 3px 3px; font-size: clamp(8.5px, 2.5vw, 10.5px); line-height: 1.3; }
    .chart-print-report:not(#_) .st-print-table { table-layout: auto; width: 100%; }
    .chart-print-report:not(#_) .st-print-table :is(td.num, th.st-amt, td.st-amt) { white-space: nowrap; }
    .chart-print-report:not(#_) .st-print-table td:nth-child(2) { white-space: nowrap; }
    .chart-print-report:not(#_) .st-print-table :is(td.st-kind, th.st-kind) { white-space: normal; overflow-wrap: normal; }
}

/* ---- Responsive layer: the action bar of a printed report keeps every button on one line, equal in width ---- */
@media screen and (max-width: 900px) {
    .chart-print-report:not(#_) .chart-print-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
    .chart-print-report:not(#_) .chart-print-actions > :is(.btn, a, button, form) { flex: 1 1 0; min-width: 0; width: auto; }
    .chart-print-report:not(#_) .chart-print-actions .btn { width: 100%; height: 42px; padding-inline: 6px; white-space: normal; line-height: 1.2; justify-content: center; }
}

/* ---- Responsive layer: trial balance and statements on small screens: the table keeps readable column widths and scrolls sideways inside its frame (the page does not) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .st-list { overflow-x: auto; overflow-y: visible; max-height: none; min-height: 0; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; }
    main:not(#_) .st-list .st-table { min-width: 780px; }
    main:not(#_) .st-list .tb-table { min-width: 920px; table-layout: fixed; width: 100%; }
    main:not(#_) .st-list .tb-table col.tb-col-no { width: 96px; }
    main:not(#_) .st-list .tb-table col.tb-col-amt { width: 104px; }
    main:not(#_) .st-list .tb-table col.tb-col-act { width: 48px; }
    main:not(#_) .st-list .tb-table :is(th, td) { overflow-wrap: normal; word-break: normal; }
    main:not(#_) .st-list .tb-table td:first-child { white-space: nowrap; }
    main:not(#_) .st-list .tb-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
    main:not(#_) .st-list .tb-table th { font-size: clamp(10px, 2.8vw, 11.5px); line-height: 1.3; }
    main:not(#_) .st-list .tb-table td .btn-icon { width: 32px; height: 28px; margin-inline: auto; }
}

/* ---- Responsive layer: report footer (print, Excel, general ledger with its opening-balance option, exit) as a tidy grid with no overlap ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .panel-foot.st-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
    main:not(#_) .panel-foot.st-foot > .btn, main:not(#_) .panel-foot.st-foot .btn { flex: none; width: 100%; min-width: 0; margin: 0; height: 42px; white-space: normal; line-height: 1.2; }
    main:not(#_) .panel-foot.st-foot > .btn.st-btn-long, main:not(#_) .panel-foot.st-foot > .foot-end { grid-column: 1 / -1; }
    main:not(#_) .panel-foot.st-foot > .st-daily {
        position: static; transform: none; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0;
        padding: 8px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface);
    }
    main:not(#_) .panel-foot.st-foot .st-opt { font-size: clamp(10px, 2.9vw, 12px); }
}

/* ---- Responsive layer: class follow-up (a long account list to tick: one slim two-line row per account, search and counters, three action buttons on one line) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .st-list:has(> .cf-table) { max-height: 70vh; overflow-x: hidden; overflow-y: auto; }
    main:not(#_) .st-list .cf-table { min-width: 0; table-layout: auto; display: block; width: 100%; }
    main:not(#_) .cf-table :is(colgroup, .cf-mark) { display: none; }
    main:not(#_) .cf-table :is(thead, tbody, tfoot) { display: block; }
    main:not(#_) .cf-table thead tr { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--soft); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
    main:not(#_) .cf-table thead th { display: none; padding: 0; border: 0; background: transparent; }
    main:not(#_) .cf-table thead th:is(.col-actions, .cf-name) { display: block; }
    main:not(#_) .cf-table thead th.cf-name { flex: 1 1 auto; text-align: start; }
    main:not(#_) .cf-table tbody tr {
        display: grid; grid-template-columns: 30px minmax(86px, auto) minmax(0, 1fr); grid-auto-flow: row; gap: 1px 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line);
    }
    main:not(#_) .cf-table tbody td { display: block; padding: 0; border: 0; height: auto; min-width: 0; width: auto; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-align: start; }
    main:not(#_) .cf-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; justify-self: center; }
    main:not(#_) .cf-table tbody td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; overflow-wrap: normal; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
    main:not(#_) .cf-table tbody td:nth-child(4) { grid-column: 3; grid-row: 1; font-weight: 700; color: var(--navy-text); }
    main:not(#_) .cf-table tbody td:nth-child(5) { grid-column: 3; grid-row: 2; font-size: clamp(9px, 2.6vw, 10.5px); color: var(--muted); }
    main:not(#_) .cf-table tbody td:nth-child(5):empty { display: none; }
    main:not(#_) .cf-table tbody td input[type="checkbox"] { width: 16px; height: 16px; min-width: 0; min-height: 0; padding: 0; margin: 0; accent-color: var(--primary); }
    main:not(#_) .cf-table tbody tr:has(input:checked) { background: var(--primary-soft, #EAF2FB); }
    main:not(#_) .cf-table tfoot tr { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #F1F6FC; }
    main:not(#_) .cf-table tfoot td { display: inline-flex; padding: 0; border: 0; background: transparent; }
    main:not(#_) .panel-foot.ci-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    main:not(#_) .panel-foot.ci-foot > .btn { height: auto; min-height: 44px; padding-block: 4px; }
}

/* ---- Responsive layer: financial statements tabs (four tabs as a 2 x 2 segmented block, the active one filled) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .fs-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; justify-content: stretch; margin: 6px 0 12px; }
    main:not(#_) .fs-tabs > .fs-tab { flex: none; width: 100%; min-width: 0; height: 42px; padding-inline: 6px; white-space: normal; line-height: 1.2; border-radius: 12px; }
    main:not(#_) .fs-tabs > .fs-tab.is-active { box-shadow: 0 2px 8px rgba(24, 65, 104, .25); }
}

/* ---- Responsive layer: tables sit a little inside the panel on small screens (a slim margin on both sides of every table frame) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) :is(.scroll-y, .st-list, .jv-scroll, .iu-scroll, .table-scroll, .ob-scroll, .jv-grid-wrap) { margin-inline: 6px; }
    main:not(#_) .panel-body > :is(table.grid-table, .grid-table) { width: calc(100% - 12px); margin-inline: 6px; }
    main:not(#_) .panel-body > :is(table.grid-table, .grid-table).is-cards { width: auto; }
}

/* ---- Responsive layer: account number columns narrower, account name columns wider (trial balance, class follow-up) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .st-list .tb-table { min-width: 980px; }
    main:not(#_) .st-list .tb-table col.tb-col-no { width: 78px; }
    main:not(#_) .st-list .tb-table td:first-child { font-size: clamp(9px, 2.6vw, 10.5px); padding-inline: 3px; }
    main:not(#_) .cf-table tbody tr { grid-template-columns: 28px 70px minmax(0, 1fr); gap: 1px 8px; }
    main:not(#_) .cf-table tbody td:nth-child(3) { font-size: clamp(9px, 2.6vw, 10.5px); }
    main:not(#_) .cf-table tbody td:nth-child(4) { font-size: clamp(10.5px, 3vw, 12px); }
}

/* ---- Responsive layer: smaller headings on small screens (panel titles, table column titles, section titles, card labels) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .panel-head :is(h1, h2), main:not(#_) .panel-head { font-size: clamp(10.5px, 3vw, 12.5px); }
    main:not(#_) :is(h3, .itemcard-column-title, .section-title) { font-size: clamp(10.5px, 3vw, 12px); }
    main:not(#_) table thead :is(th, td) { font-size: clamp(8.5px, 2.4vw, 10px); line-height: 1.25; }
    main:not(#_) .st-list .tb-table th { font-size: clamp(8.5px, 2.4vw, 10px); }
    main:not(#_) table.is-cards tbody td::before { font-size: clamp(8px, 2.3vw, 9.5px); }
    main:not(#_) .field > label, main:not(#_) .field label { font-size: clamp(8.5px, 2.4vw, 10px); }
    main:not(#_) .badge { font-size: clamp(8.5px, 2.4vw, 10px); }
}

/* ---- Responsive layer: class follow-up row: the account number on the right edge, the name taking the width, the tick box on the left ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .cf-table tbody tr { grid-template-columns: 68px minmax(0, 1fr) 26px; gap: 1px 8px; }
    main:not(#_) .cf-table tbody td:nth-child(3) { grid-column: 1; grid-row: 1 / span 2; }
    main:not(#_) .cf-table tbody td:nth-child(4), main:not(#_) .cf-table tbody td:nth-child(5) { grid-column: 2; }
    main:not(#_) .cf-table tbody td:nth-child(1) { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
    main:not(#_) .cf-table thead th.cf-name { order: 1; }
    main:not(#_) .cf-table thead th.col-actions { order: 2; margin-inline-start: auto; }
}

/* ---- Responsive layer: all headings follow one small size on small screens (page and panel titles, section titles, statement titles) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) :is(h1, h2, h3, h4, .fs-title, .fs-note-title, .grp-title, .wd-section-title, .cheque-summary-title, .si-th-title, .si-ax-title, .si-side-title,
        .st-title, .obr-title, .cp-title, .lookup-part-title, .it-section-title, .info-title, .itemcard-column-title, .sr-title, .chq-side-title, .cheque-report-group-title) {
        font-size: clamp(10px, 2.9vw, 11.5px); line-height: 1.35;
    }
    main:not(#_) .panel-head :is(h1, h2) { font-size: clamp(10.5px, 3vw, 12px); }
}

/* ---- Responsive layer: financial statements rows: the account number on the right edge and narrow, the name taking the width, the amount narrower, slim indents ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .fs-row { gap: 8px; padding: 6px 6px; font-size: clamp(10px, 2.9vw, 11.5px); }
    main:not(#_) .fs-row .fs-no { flex: 0 0 64px; font-size: clamp(8.5px, 2.5vw, 10px); white-space: nowrap; overflow-wrap: normal; }
    main:not(#_) .fs-row .fs-name { flex: 1 1 0; min-width: 0; overflow-wrap: normal; word-break: normal; }
    main:not(#_) .fs-row .fs-amt { flex: 0 0 104px; font-size: clamp(9.5px, 2.8vw, 11px); }
    main:not(#_) :is(.fs-acc, .fs-note .fs-acc, .fs-note-total, .fs-note .fs-note-total) { padding-inline-start: 8px; }
    main:not(#_) .fs-l2 { padding-inline-start: 12px; }
    main:not(#_) .fs-l3 { padding-inline-start: 22px; }
    main:not(#_) .fs-note > summary.fs-note-title { padding: 7px 8px; }
}

/* ---- Responsive layer: account names a step smaller (financial statements, class follow-up, trial balance, chart of accounts, entry cards) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .fs-row .fs-name { font-size: clamp(8.5px, 2.4vw, 9.5px); }
    main:not(#_) .cf-table tbody td:nth-child(4) { font-size: clamp(8.5px, 2.4vw, 9.5px); }
    main:not(#_) .st-list .tb-table td:nth-child(2) { font-size: clamp(8.5px, 2.4vw, 9.5px); }
    main:not(#_) .grid-table.is-accounts.is-cards tbody td:nth-child(2), main:not(#_) .itemcard-tree-table.is-cards tbody td:nth-child(3) { font-size: clamp(9.5px, 2.6vw, 10.5px); }
    main:not(#_) :is(.jv-grid, .ob-table).is-cards tbody td:nth-child(3) :is(textarea, input) { font-size: clamp(8.5px, 2.4vw, 9.5px); }
}

/* ---- Responsive layer: class follow-up search and counters (search full width with its title above, the two counters side by side) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .cf-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
    main:not(#_) .cf-row2 .cf-search { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; }
    main:not(#_) .cf-row2 .cf-search .control { flex: none; width: 100%; }
    main:not(#_) .cf-row2 .cf-stat { flex: none; width: auto; min-width: 0; height: 36px; padding-inline: 6px; font-size: clamp(9.5px, 2.8vw, 11px); text-align: center; }
}

/* ---- Responsive layer: tick boxes in the class follow-up list: small, the same size in the header and in every row, rows compact ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .cf-table input[type="checkbox"] { width: 16px; height: 16px; min-width: 0; min-height: 0; padding: 0; margin: 0; }
    main:not(#_) .cf-table tbody tr { padding: 6px 8px; min-height: 0; }
    main:not(#_) .cf-table tbody td:nth-child(1) { display: flex; align-items: center; justify-content: center; height: auto; }
}

/* ---- Responsive layer: a footer with exactly three actions (print / Excel / exit, ...) keeps them on ONE line ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .panel-foot:has(> :nth-child(3):last-child) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
    main:not(#_) .panel-foot:has(> :nth-child(3):last-child) > :is(.btn, form, .grow, .foot-end) { grid-column: auto; order: 0; width: 100%; min-width: 0; max-width: none; margin: 0; }
    main:not(#_) .panel-foot:has(> :nth-child(3):last-child) :is(.btn) { width: 100%; min-width: 0; height: auto; min-height: 44px; padding-inline: 4px; white-space: normal; line-height: 1.2; font-size: clamp(10px, 2.9vw, 11.5px); justify-content: center; text-align: center; margin: 0; }
}

/* ---- Responsive layer: cheque movement constants as tidy cards (code chip + name), in the natural order 1..11 ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .cq-const-table { display: block; table-layout: auto; border: 0; background: transparent; }
    main:not(#_) .cq-const-table :is(colgroup) { display: none; }
    main:not(#_) .cq-const-table tbody { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px minmax(0, 1fr); gap: 6px 6px; align-items: stretch; }
    main:not(#_) .cq-const-table tbody tr { display: contents; }
    main:not(#_) .cq-const-table tbody td { display: flex; align-items: center; min-width: 0; width: auto; height: auto; padding: 6px 8px; border: 1px solid var(--line); background: var(--surface); font-size: clamp(9.5px, 2.8vw, 11px); font-weight: 700; line-height: 1.35; color: var(--navy-text); overflow-wrap: anywhere; }
    main:not(#_) .cq-const-table tbody td:empty { display: none; }
    main:not(#_) .cq-const-table tbody td.cq-code { justify-content: center; padding: 6px 0; border-inline-end: 0; border-start-end-radius: 0; border-end-end-radius: 0; border-radius: 8px 0 0 8px; background: var(--soft); color: #b3261e; font-weight: 800; }
    main:not(#_) .cq-const-table tbody td:not(.cq-code) { border-radius: 0 8px 8px 0; }
    html[dir="rtl"] main:not(#_) .cq-const-table tbody td.cq-code { border-radius: 0 8px 8px 0; }
    html[dir="rtl"] main:not(#_) .cq-const-table tbody td:not(.cq-code) { border-radius: 8px 0 0 8px; }
    main:not(#_) .cq-const-table tbody tr:nth-child(1) > td:nth-child(1) { order: 2; }
    main:not(#_) .cq-const-table tbody tr:nth-child(1) > td:nth-child(2) { order: 3; }
    main:not(#_) .cq-const-table tbody tr:nth-child(1) > td:nth-child(3) { order: 10; }
    main:not(#_) .cq-const-table tbody tr:nth-child(1) > td:nth-child(4) { order: 11; }
    main:not(#_) .cq-const-table tbody tr:nth-child(1) > td:nth-child(5) { order: 18; }
    main:not(#_) .cq-const-table tbody tr:nth-child(1) > td:nth-child(6) { order: 19; }
    main:not(#_) .cq-const-table tbody tr:nth-child(2) > td:nth-child(1) { order: 4; }
    main:not(#_) .cq-const-table tbody tr:nth-child(2) > td:nth-child(2) { order: 5; }
    main:not(#_) .cq-const-table tbody tr:nth-child(2) > td:nth-child(3) { order: 12; }
    main:not(#_) .cq-const-table tbody tr:nth-child(2) > td:nth-child(4) { order: 13; }
    main:not(#_) .cq-const-table tbody tr:nth-child(2) > td:nth-child(5) { order: 20; }
    main:not(#_) .cq-const-table tbody tr:nth-child(2) > td:nth-child(6) { order: 21; }
    main:not(#_) .cq-const-table tbody tr:nth-child(3) > td:nth-child(1) { order: 6; }
    main:not(#_) .cq-const-table tbody tr:nth-child(3) > td:nth-child(2) { order: 7; }
    main:not(#_) .cq-const-table tbody tr:nth-child(3) > td:nth-child(3) { order: 14; }
    main:not(#_) .cq-const-table tbody tr:nth-child(3) > td:nth-child(4) { order: 15; }
    main:not(#_) .cq-const-table tbody tr:nth-child(3) > td:nth-child(5) { order: 22; }
    main:not(#_) .cq-const-table tbody tr:nth-child(3) > td:nth-child(6) { order: 23; }
    main:not(#_) .cq-const-table tbody tr:nth-child(4) > td:nth-child(1) { order: 8; }
    main:not(#_) .cq-const-table tbody tr:nth-child(4) > td:nth-child(2) { order: 9; }
    main:not(#_) .cq-const-table tbody tr:nth-child(4) > td:nth-child(3) { order: 16; }
    main:not(#_) .cq-const-table tbody tr:nth-child(4) > td:nth-child(4) { order: 17; }
    main:not(#_) .cq-const-table tbody tr:nth-child(4) > td:nth-child(5) { order: 24; }
    main:not(#_) .cq-const-table tbody tr:nth-child(4) > td:nth-child(6) { order: 25; }
}
@media screen and (max-width: 520px) {
    main:not(#_) .cq-const-table tbody { grid-template-columns: 34px minmax(0, 1fr); }
}

/* ---- Responsive layer: printed account statement on a small screen: the statement column gets the room, the document type and the side word stay compact ---- */
@media screen and (max-width: 900px) {
    .chart-print-report:not(#_) .st-print-table:not(.is-cash) :is(th, td):nth-child(1) { width: 1%; white-space: nowrap; }
    .chart-print-report:not(#_) .st-print-table :is(th, td).st-kind { width: 12%; font-size: clamp(8px, 2.3vw, 9.5px); line-height: 1.25; }
    .chart-print-report:not(#_) .st-print-table tbody td:nth-child(4) { width: 34%; overflow-wrap: anywhere; line-height: 1.3; }
    .chart-print-report:not(#_) .st-print-table :is(th, td):nth-child(8) { width: 1%; white-space: nowrap; padding-inline: 2px; font-weight: 700; }
    .chart-print-report:not(#_) .st-print-table thead th { vertical-align: middle; text-align: center; }
    .chart-print-report:not(#_) .st-print-table tbody tr:not(.st-sum):nth-child(even) { background: var(--soft); }
}

/* ---- Responsive layer: printed statement: the numbers take only their own width, the statement column takes the rest and breaks at spaces only ---- */
@media screen and (max-width: 900px) {
    .chart-print-report:not(#_) .st-print-table :is(th.st-amt, td.num) { width: 1%; }
    .chart-print-report:not(#_) .st-print-table :is(th, td).st-kind { width: 11%; }
    .chart-print-report:not(#_) .st-print-table tbody td:nth-child(4) { width: auto; overflow-wrap: break-word; word-break: normal; hyphens: manual; min-width: 64px; }
    .chart-print-report:not(#_) .st-print-table thead th:nth-child(4) { width: auto; }
    .chart-print-report:not(#_) .st-print-table tr.st-sum td { white-space: nowrap; }
}

/* ---- Responsive layer: printed statement: smaller type everywhere (headings too) so the seven columns and the side word fit the width ---- */
@media screen and (max-width: 900px) {
    .chart-print-report:not(#_) .st-print-table { width: 100%; max-width: 100%; }
    .chart-print-report:not(#_) .st-print-table :is(th, td) { padding: 2px 2px; font-size: clamp(7.5px, 2.1vw, 9px); line-height: 1.25; }
    .chart-print-report:not(#_) .st-print-table thead th { font-size: clamp(7.5px, 2.1vw, 9px); font-weight: 800; line-height: 1.2; white-space: normal; }
    .chart-print-report:not(#_) .st-print-table :is(th, td).st-kind { font-size: clamp(7px, 1.9vw, 8.5px); width: 9%; }
    .chart-print-report:not(#_) .st-print-table tbody td:nth-child(4) { min-width: 0; }
    .chart-print-report:not(#_) .st-print-table :is(th, td):nth-child(8) { width: 1%; padding-inline: 1px; font-size: clamp(7px, 1.9vw, 8.5px); }
    .chart-print-report:not(#_) .st-print-table :is(th, td):nth-child(n+5):nth-child(-n+7) { padding-inline: 2px; letter-spacing: -.1px; }
}

/* ---- Responsive layer: invoice range bar (number from / to, difference, selected, print): a tidy 2-column grid, the print button full width ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .ci-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; align-items: end; margin: 8px 0; }
    main:not(#_) .ci-range > label { grid-row: 1; margin: 0; font-size: clamp(9.5px, 2.7vw, 11px); }
    main:not(#_) .ci-range > label[for="ci_no_from"] { grid-column: 1; }
    main:not(#_) .ci-range > label[for="ci_no_to"] { grid-column: 2; }
    main:not(#_) .ci-range > .control { grid-row: 2; width: 100%; min-width: 0; height: 36px; border-radius: 8px; }
    main:not(#_) .ci-range > #ci_no_from { grid-column: 1; }
    main:not(#_) .ci-range > #ci_no_to { grid-column: 2; }
    main:not(#_) .ci-range > .ci-stat { grid-row: 3; flex: none; width: auto; min-width: 0; height: 36px; margin: 4px 0 0; padding-inline: 6px; border-radius: 8px; font-size: clamp(9.5px, 2.8vw, 11px); }
    main:not(#_) .ci-range > .ci-stat:first-of-type { grid-column: 1; margin-inline-start: 0; }
    main:not(#_) .ci-range > .ci-stat ~ .ci-stat { grid-column: 2; }
    main:not(#_) .ci-range > .ci-print-btn { grid-row: 4; grid-column: 1 / -1; width: 100%; min-width: 0; margin: 4px 0 0; height: 42px; justify-content: center; }
}

/* ---- Responsive layer: invoice preview on a small screen: the sheet is the normal desktop invoice (A4 width), scaled down to the screen width by site.js ---- */
@media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) {
    main:not(#_):has(.jv-between) { padding-inline: 8px; overflow-x: hidden; }
    main:not(#_) .jv-between .si-between-item { width: 210mm; max-width: none; margin: 0 0 8px; box-sizing: border-box; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .18); overflow: hidden; }
    main:not(#_) .jv-between .si-between-item .si-ax-items table { border: 0; }
    main:not(#_) .jv-between .si-between-item .si-ax-items th { border-top: 0; }
    /* physical sides: a cell may carry its own dir attribute (dir="ltr" numbers), which would flip logical sides */
    main:not(#_) .jv-between .si-between-item .si-ax[dir="rtl"] .si-ax-items :is(th, td):first-child { border-right: 0; }
    main:not(#_) .jv-between .si-between-item .si-ax[dir="rtl"] .si-ax-items :is(th, td):last-child { border-left: 0; }
    main:not(#_) .jv-between .si-between-item .si-ax[dir="ltr"] .si-ax-items :is(th, td):first-child { border-left: 0; }
    main:not(#_) .jv-between .si-between-item .si-ax[dir="ltr"] .si-ax-items :is(th, td):last-child { border-right: 0; }
}

/* ---- Responsive layer: printed summary reports (class balances, statements): smaller headings, a tidy compact table with a two-level heading ---- */
@media screen and (max-width: 900px) {
    .chart-print-report.st-print:not(#_) .chart-print-heading { margin-bottom: 8px; }
    .chart-print-report.st-print:not(#_) .chart-print-heading h1 { font-size: clamp(9.5px, 2.6vw, 11.5px); margin: 0 0 4px; }
    .chart-print-report.st-print:not(#_) .chart-print-title { gap: 6px; }
    .chart-print-report.st-print:not(#_) .chart-print-title h2, .chart-print-report.st-print:not(#_) .chart-print-title > strong { font-size: clamp(9px, 2.4vw, 10.5px); margin: 0; }
    .chart-print-report.st-print:not(#_) .st-print-sub { font-size: clamp(8px, 2.1vw, 9.5px); line-height: 1.5; margin-top: 3px; }
    .chart-print-report.st-print:not(#_) .jvp-foot { display: flex; justify-content: space-between; gap: 8px; position: static; margin-top: 6px; direction: ltr; font-size: clamp(7px, 1.9vw, 8.5px); }
    .chart-print-report:not(#_) .tb-print-table { table-layout: auto; width: 100%; }
    .chart-print-report:not(#_) .tb-print-table :is(th, td) { padding: 2px 2px; line-height: 1.25; }
    .chart-print-report:not(#_) .tb-print-table thead th { font-size: clamp(6.5px, 1.8vw, 8px); font-weight: 800; background: #eef3f9; white-space: normal; vertical-align: middle; }
    .chart-print-report:not(#_) .tb-print-table tbody td { font-size: clamp(7px, 1.95vw, 8.5px); }
    .chart-print-report:not(#_) .tb-print-table td.num, .chart-print-report:not(#_) .tb-print-table th.tb-amt { white-space: nowrap; width: 1%; }
    .chart-print-report:not(#_) .tb-print-table :is(td, th):nth-child(1) { white-space: nowrap; width: 1%; }
    .chart-print-report:not(#_) .tb-print-table tbody td:nth-child(2) { width: auto; overflow-wrap: break-word; }
    .chart-print-report:not(#_) .tb-print-table tr.st-sum td { font-size: clamp(7px, 1.95vw, 8.5px); padding-block: 3px; }
    .chart-print-report:not(#_) .tb-print-table tfoot tr.st-sum td { padding-block: 4px; }
}

/* ---- Responsive layer: posting screen: the document form first, the twelve months as compact cards (number, names, posted tick, post / unpost buttons on one line) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .pd-body { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
    main:not(#_) .pd-body > .pd-doc { order: -1; flex: none; width: 100%; box-sizing: border-box; }
    main:not(#_) .pd-body > .pd-months { order: 0; width: 100%; }
    main:not(#_) .pd-months .scroll-y { max-height: none; overflow: visible; }
    main:not(#_) .pd-months table { display: block; border: 0; background: transparent; }
    main:not(#_) .pd-months thead { display: none; }
    main:not(#_) .pd-months tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    main:not(#_) .pd-months tbody tr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 1px 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; min-height: 0; }
    main:not(#_) .pd-months tbody td { display: block; padding: 0; border: 0; height: auto; min-width: 0; width: auto; white-space: normal; overflow: visible; text-align: start; background: transparent; }
    main:not(#_) .pd-months tbody td::before { content: none; display: none; }
    main:not(#_) .pd-months tbody td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; justify-self: center; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft, #EAF2FB); color: var(--primary); font-weight: 800; font-size: clamp(9px, 2.6vw, 10.5px); }
    main:not(#_) .pd-months tbody td:nth-child(2) { grid-column: 2; grid-row: 1; font-weight: 800; color: var(--navy-text); font-size: clamp(10px, 2.9vw, 11.5px); }
    main:not(#_) .pd-months tbody td:nth-child(3) { grid-column: 2; grid-row: 2; color: var(--muted); font-size: clamp(8.5px, 2.4vw, 9.5px); }
    main:not(#_) .pd-months tbody td:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
    main:not(#_) .pd-months tbody td:nth-child(4) input[type="checkbox"] { width: 16px; height: 16px; min-width: 0; min-height: 0; margin: 0; padding: 0; }
    main:not(#_) .pd-months tbody td.pd-act { grid-column: 1 / -1; grid-row: 3; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; margin-top: 6px; white-space: nowrap; }
    main:not(#_) .pd-doc .pd-doc-actions { flex-direction: row; align-items: stretch; gap: 8px; }
    main:not(#_) .pd-doc .pd-doc-actions > .btn { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
    main:not(#_) .pd-months tbody td.pd-act .pd-btn { flex: 1 1 0; min-width: 0; width: auto !important; max-width: none; height: 28px; margin: 0; padding: 0 4px; font-size: clamp(9px, 2.6vw, 10.5px); white-space: nowrap; justify-content: center; }
}
@media screen and (max-width: 420px) {
    main:not(#_) .pd-months tbody { grid-template-columns: 1fr; }
}

/* ---- Responsive layer: financial / customer class list: the whole table fits the width, small type, the names wrap at spaces, the edit / delete icons stay on one line ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .fc-table { table-layout: fixed; width: 100%; min-width: 0; }
    main:not(#_) .fc-table :is(th, td) { padding: 4px 3px; font-size: clamp(8.5px, 2.4vw, 10px); line-height: 1.3; white-space: normal; overflow-wrap: break-word; word-break: normal; }
    main:not(#_) .fc-table thead th { font-size: clamp(8px, 2.2vw, 9.5px); font-weight: 800; }
    main:not(#_) .fc-table :is(th, td):nth-child(1) { width: 15%; }
    main:not(#_) .fc-table :is(th, td):nth-child(3) { width: 11%; }
    main:not(#_) .fc-table :is(th, td):nth-child(4) { width: 17%; }
    main:not(#_) .fc-table :is(th, td):nth-child(5) { width: 12%; }
    main:not(#_) .fc-table :is(th, td).col-actions { width: 52px; padding-inline: 2px; }
    main:not(#_) .fc-table .fc-l2 .fc-name { padding-inline-start: 12px; }
    main:not(#_) .fc-table .fc-l3 .fc-name { padding-inline-start: 22px; }
    main:not(#_) .fc-table .row-actions { display: flex; flex-wrap: nowrap; gap: 3px; justify-content: center; }
    main:not(#_) .fc-table .row-actions .btn-icon { width: 22px; min-width: 0; height: 22px; padding: 0; font-size: 11px; }
    main:not(#_) .fc-table .row-actions form { margin: 0; display: inline-flex; }
}

/* ---- Responsive layer: change log: the table keeps readable column widths (numbers, dates and users whole, the account and the statement wrap at spaces) and scrolls sideways inside its frame, in small type ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .log-table { table-layout: auto; width: 100%; min-width: 760px; }
    main:not(#_) .log-table col { width: auto; }
    main:not(#_) .log-table :is(th, td) { padding: 4px 5px; font-size: clamp(8.5px, 2.4vw, 10px); line-height: 1.3; overflow-wrap: normal; word-break: normal; vertical-align: middle; }
    main:not(#_) .log-table thead th { font-size: clamp(8px, 2.2vw, 9.5px); font-weight: 800; white-space: nowrap; padding-block: 6px; }
    main:not(#_) .log-table :is(td.num, td.log-date, .log-count, .log-vno) { white-space: nowrap; }
    main:not(#_) .log-table td:nth-child(n+7), main:not(#_) .log-table th:nth-child(n+7) { white-space: nowrap; }
    main:not(#_) .log-table td.log-acc, main:not(#_) .log-table td:nth-child(4) { min-width: 150px; white-space: normal; overflow-wrap: break-word; }
    main:not(#_) .log-table td.log-doc { white-space: nowrap; }
    main:not(#_) .log-table tr.log-kind td { font-size: clamp(9px, 2.6vw, 10.5px); padding-block: 5px; }
}

/* ---- Responsive layer: link accounts to a financial class: compact filter grid, buttons on one line, a small account list (table or cards) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .fc-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; align-items: end; margin-bottom: 8px; }
    main:not(#_) .fc-filter > .field { min-width: 0; margin: 0; }
    main:not(#_) .fc-filter > .field > label { font-size: clamp(9px, 2.6vw, 10.5px); }
    main:not(#_) .fc-filter .control { height: 34px; font-size: clamp(9.5px, 2.7vw, 11px); }
    main:not(#_) .fc-filter > .fc-filter-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    main:not(#_) .fc-filter > .fc-filter-btns > .btn { width: 100%; min-width: 0; height: 36px; padding-inline: 4px; font-size: clamp(10px, 2.9vw, 11.5px); justify-content: center; }
    main:not(#_) .fc-link-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px 8px; align-items: end; margin-bottom: 8px; }
    main:not(#_) .fc-link-bar > .fc-link-class { grid-column: 1 / -1; min-width: 0; flex: none; }
    main:not(#_) .fc-link-bar .control { height: 34px; font-size: clamp(9.5px, 2.7vw, 11px); }
    main:not(#_) .fc-link-bar > .btn { width: 100%; min-width: 0; height: 36px; padding-inline: 4px; font-size: clamp(10px, 2.9vw, 11.5px); justify-content: center; white-space: nowrap; }
    main:not(#_) .fc-link-bar > .badge { height: 36px; padding-inline: 8px; font-size: clamp(9px, 2.6vw, 10.5px); white-space: nowrap; }
    main:not(#_) .fc-link-list { min-height: 0; max-height: 70vh; }
    main:not(#_) .fc-link-list table:not(.is-cards) { table-layout: fixed; width: 100%; min-width: 0; }
    main:not(#_) .fc-link-list table:not(.is-cards) :is(th, td) { padding: 4px 4px; font-size: clamp(8.5px, 2.4vw, 10px); line-height: 1.3; white-space: normal; overflow-wrap: break-word; }
    main:not(#_) .fc-link-list table:not(.is-cards) thead th { font-size: clamp(8px, 2.2vw, 9.5px); }
    main:not(#_) .fc-link-list table:not(.is-cards) :is(th, td).fc-check { width: 30px; padding-inline: 2px; }
    main:not(#_) .fc-link-list table:not(.is-cards) :is(th, td).fc-accno { width: 22%; white-space: nowrap; }
    main:not(#_) .fc-link-list table:not(.is-cards) :is(th, td).fc-cur { width: 30%; }
    main:not(#_) .fc-link-list input[type="checkbox"] { width: 16px; height: 16px; min-width: 0; min-height: 0; margin: 0; padding: 0; }
    main:not(#_) .fc-link-list table.is-cards tbody tr { display: grid; grid-template-columns: 30px 86px minmax(0, 1fr); gap: 1px 6px; align-items: center; padding: 6px 8px; min-height: 0; }
    main:not(#_) .fc-link-list table.is-cards tbody td { display: block; padding: 0; border: 0; height: auto; font-size: clamp(9px, 2.6vw, 10.5px); }
    main:not(#_) .fc-link-list table.is-cards tbody td::before { content: none; display: none; }
    main:not(#_) .fc-link-list table.is-cards tbody td.fc-check { grid-column: 1; grid-row: 1 / span 2; justify-self: center; }
    main:not(#_) .fc-link-list table.is-cards tbody td.fc-accno { grid-column: 2; grid-row: 1 / span 2; font-weight: 800; color: var(--primary); white-space: nowrap; }
    main:not(#_) .fc-link-list table.is-cards tbody td:nth-child(3) { grid-column: 3; grid-row: 1; font-weight: 700; color: var(--navy-text); }
    main:not(#_) .fc-link-list table.is-cards tbody td.fc-cur { grid-column: 3; grid-row: 2; color: var(--muted); font-size: clamp(8.5px, 2.4vw, 9.5px); }
    main:not(#_) .fc-link-list table.is-cards tbody td.fc-cur:empty { display: none; }
}
@media screen and (max-width: 900px) {
    main:not(#_) .fc-link-list table.is-cards.is-cards tbody tr td.fc-check.is-actions { position: static; top: auto; inset-inline-end: auto; transform: none; grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: center; display: flex; }
    main:not(#_) .fc-link-list table.is-cards tbody tr td.fc-accno { font-size: clamp(10px, 2.9vw, 11.5px); }
    main:not(#_) .fc-link-list table.is-cards tbody tr td::after { content: none; display: none; }
    main:not(#_) .fc-link-list table.is-cards tbody tr td.fc-cur:empty { display: none; }
    main:not(#_) .fc-link-list table.is-cards tbody tr td:nth-child(3) { grid-row: 1 / span 2; align-self: center; font-size: clamp(9.5px, 2.7vw, 11px); }
    main:not(#_) .fc-link-list table.is-cards tbody tr:has(td.fc-cur:not(:empty)) td:nth-child(3) { grid-row: 1; }
    main:not(#_) .fc-link-list table.is-cards.is-cards tbody tr td.fc-check::before, main:not(#_) .fc-link-list table.is-cards.is-cards tbody tr td.fc-check::after { content: none; display: none; }
    main:not(#_) .fc-link-list table.is-cards.is-cards tbody tr td.fc-check.is-actions { border-top: 0; padding-top: 0; }
}

/* ---- Responsive layer: user permissions: the group picker keeps its room, each screen is a tidy card (number + name, four ticks on one line, select / clear all side by side) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .perm-main > form.perm-group { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; align-items: center; padding-inline: 12px; }
    main:not(#_) .perm-main > form.perm-group > .control { max-width: none; width: 100%; min-width: 0; height: 34px; font-size: clamp(9.5px, 2.7vw, 11px); }
    main:not(#_) .perm-main > form.perm-group > label { font-size: clamp(9.5px, 2.7vw, 11px); }
    main:not(#_) .perm-main .perm-group-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    main:not(#_) .perm-main .perm-group-actions > .btn { width: 100%; min-width: 0; height: 36px; padding-inline: 4px; font-size: clamp(9.5px, 2.8vw, 11px); white-space: nowrap; justify-content: center; }
    main:not(#_) .perm-users .perm-user { font-size: clamp(9.5px, 2.7vw, 11px); }
    main:not(#_) .perm-table.is-cards tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; align-items: center; padding: 8px 10px; min-height: 0; }
    main:not(#_) .perm-table.is-cards tbody td { display: flex; min-width: 0; padding: 0; border: 0; height: auto; background: transparent; }
    main:not(#_) .perm-table.is-cards tbody td:nth-child(1) { grid-column: 1; grid-row: 1; justify-content: center; align-items: center; flex-direction: row; width: 100%; font-weight: 800; color: var(--primary); font-size: clamp(10px, 2.9vw, 11.5px); }
    main:not(#_) .perm-table.is-cards tbody td:nth-child(2) { grid-column: 2 / -1; grid-row: 1; flex-direction: row; justify-content: flex-start; font-weight: 800; color: var(--navy-text); font-size: clamp(10px, 2.9vw, 11.5px); }
    main:not(#_) .perm-table.is-cards tbody td:nth-child(n+3):nth-child(-n+6) { grid-row: 2; flex-direction: column; align-items: center; gap: 3px; }
    main:not(#_) .perm-table.is-cards tbody td:nth-child(1)::before, main:not(#_) .perm-table.is-cards tbody td:nth-child(2)::before { content: none; display: none; }
    main:not(#_) .perm-table.is-cards tbody td:nth-child(n+3):nth-child(-n+6)::before { font-size: clamp(8.5px, 2.4vw, 9.5px); color: var(--muted); }
    main:not(#_) .perm-table.is-cards tbody td input[type="checkbox"] { width: 17px; height: 17px; min-width: 0; min-height: 0; margin: 0; }
    main:not(#_) table.perm-table.is-cards.is-cards tbody tr td.col-actions.is-actions { position: static; inset: auto; transform: none; width: auto; border: 0; grid-column: 1 / -1; grid-row: 3; display: block; padding: 0; margin-top: 4px; }
    main:not(#_) .perm-table.is-cards .row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; padding: 0; }
    main:not(#_) .perm-table.is-cards .row-actions .btn-sm { width: 100%; min-width: 0; height: 28px; padding: 0 4px; border-radius: 8px; font-size: clamp(9.5px, 2.7vw, 10.5px); white-space: nowrap; }
}

/* ---- Responsive layer: user groups list: each group is a card (number + name + status, manager, counts, actions on one line) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) table.grp-list.is-cards.is-cards { table-layout: auto; width: 100%; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody tr { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; align-items: center; padding: 8px 10px; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody td { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0; border: 0; min-width: 0; height: auto; width: auto; font-size: clamp(10px, 2.9vw, 11.5px); overflow-wrap: anywhere; white-space: normal; text-align: start; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody td::before { font-size: clamp(8.5px, 2.4vw, 9.5px); color: var(--muted); font-weight: 700; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody td:nth-child(1) { grid-column: 1; grid-row: 1; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody td:nth-child(2) { grid-column: 2 / -1; grid-row: 1; font-weight: 800; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody td:nth-child(4) { grid-column: 1; grid-row: 3; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody td:nth-child(5) { grid-column: 2; grid-row: 3; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody td:nth-child(6) { grid-column: 3; grid-row: 3; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody tr td.col-actions.is-actions { position: static; inset: auto; transform: none; grid-column: 1 / -1; grid-row: 4; display: block; margin-top: 4px; }
    main:not(#_) table.grp-list.is-cards.is-cards tbody td.col-actions::before { content: none; display: none; }
    main:not(#_) table.grp-list.is-cards.is-cards .row-actions { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: nowrap; }
    main:not(#_) table.grp-list.is-cards.is-cards .row-actions .btn-icon { margin: 0; }
}

/* ---- Responsive layer: payment methods list: one tidy card (code + name + edit on top, type / branch / status in one line) ---- */
@media screen and (max-width: 900px) {
    main:not(#_) table.pr-list.is-cards.is-cards tbody tr { height: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 10px; }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0; border: 0; min-width: 0; height: auto; width: auto; text-align: start; font-size: clamp(10px, 2.9vw, 11.5px); }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td::before { font-size: clamp(8.5px, 2.4vw, 9.5px); color: var(--muted); font-weight: 700; }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td:nth-child(1) { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 13px; background: var(--soft); color: var(--primary); font-weight: 800; }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td:nth-child(1)::before { content: none; display: none; }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: clamp(11.5px, 3.3vw, 13px); font-weight: 800; color: var(--navy-text); }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td:nth-child(2)::before { content: none; display: none; }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td:nth-child(n+3):nth-child(-n+5) { grid-row: 2; }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td:nth-child(3) { grid-column: 1; }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td:nth-child(4) { grid-column: 2; }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td:nth-child(5) { grid-column: 3; }
    main:not(#_) table.pr-list.is-cards.is-cards tbody tr td.col-actions.is-actions { position: static; inset: auto; transform: none; grid-column: 3; grid-row: 1; display: block; margin: 0; padding: 0; border: 0; }
    main:not(#_) table.pr-list.is-cards.is-cards tbody td.col-actions::before { content: none; display: none; }
    main:not(#_) table.pr-list.is-cards.is-cards .row-actions .btn-icon { margin: 0; width: 30px; min-width: 30px; height: 30px; min-height: 30px; font-size: .9rem; }
}

/* ---- Responsive layer: financial year picker: one column, a short year list, then the big year with its dates and the new-year button ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .years-panel:not(.year-add) .year-picker { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 14px 10px; align-items: start; }
    main:not(#_) .years-panel:not(.year-add) .year-list { min-height: 0; max-height: 28vh; }
    main:not(#_) .years-panel:not(.year-add) .year-item { padding: 9px 8px; font-size: clamp(11px, 3.2vw, 13px); }
    main:not(#_) .years-panel:not(.year-add) .year-side { width: 100%; --date-w: 100%; gap: 8px; }
    main:not(#_) .years-panel:not(.year-add) .year-big { font-size: clamp(30px, 10vw, 40px); }
    main:not(#_) .years-panel:not(.year-add) .year-period { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin-bottom: 4px; }
    main:not(#_) .years-panel:not(.year-add) .year-period > label { font-size: clamp(9.5px, 2.7vw, 10.5px); }
    main:not(#_) .years-panel:not(.year-add) .year-period .control { width: 100%; height: 32px; font-size: clamp(10.5px, 3vw, 12px); }
    main:not(#_) .years-panel:not(.year-add) .year-side .btn-block { width: 100%; height: 38px; font-size: clamp(11px, 3.2vw, 12.5px); }
    main:not(#_) .years-panel .company-years-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 14px 16px; }
    main:not(#_) .years-panel .company-years-action { width: 100%; min-width: 0; height: 40px; font-size: clamp(11px, 3.2vw, 12.5px); }
}

/* ---- Responsive layer: new financial year: one column, the entered years as slim rows, the two dates side by side, then the year ---- */
@media screen and (max-width: 900px) {
    main:not(#_) .years-panel.year-add .year-picker { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 14px 10px; align-items: start; }
    main:not(#_) .years-panel.year-add .year-list { min-height: 0; max-height: 28vh; }
    main:not(#_) .years-panel.year-add .year-item-info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; text-align: start; font-size: clamp(10px, 2.9vw, 11.5px); }
    main:not(#_) .years-panel.year-add .year-item-info > span { white-space: nowrap; text-align: center; font-size: clamp(9.5px, 2.7vw, 10.5px); }
    main:not(#_) .years-panel.year-add .year-item-info .btn-icon { width: 26px; min-width: 26px; height: 26px; min-height: 26px; font-size: 12px; }
    main:not(#_) .years-panel.year-add .year-side { width: 100%; gap: 12px; justify-items: stretch; align-content: start; }
    main:not(#_) .years-panel.year-add .year-dates { width: 100%; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    main:not(#_) .years-panel.year-add .year-side .field { min-width: 0; }
    main:not(#_) .years-panel.year-add .year-side .field label { font-size: clamp(9.5px, 2.7vw, 10.5px); }
    main:not(#_) .years-panel.year-add .year-dates .control { width: 100%; min-width: 0; height: 34px; padding-inline: 6px; font-size: clamp(10px, 2.9vw, 11.5px); }
    main:not(#_) .years-panel.year-add .field-year { width: 100%; max-width: none; margin: 0; }
    main:not(#_) .years-panel.year-add .field-year .control { height: 40px; font-size: clamp(14px, 4.4vw, 17px); }
    main:not(#_) .years-panel.year-add .field-year label { font-size: clamp(9.5px, 2.7vw, 10.5px); }
    main:not(#_) .years-panel.year-add .panel-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 14px 16px; }
    main:not(#_) .years-panel.year-add .year-add-action { width: 100%; min-width: 0; height: 40px; font-size: clamp(11px, 3.2vw, 12.5px); }
}

/* Document lists on a computer screen: the pick (radio) and preview (eye) columns take only the room of their button. */
@media screen and (min-width: 901px) {
    .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child) :is(th, td):is(:nth-child(1), :nth-child(2)) { width: 1%; min-width: 0; white-space: nowrap; padding-inline: 6px; text-align: center; }
    .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child) tbody td:nth-child(2) .btn-icon { width: 28px; min-width: 28px; height: 24px; min-height: 24px; padding: 0; }
}

/* Voucher lists on a computer screen: wide document number and description, narrow month and type. */
@media screen and (min-width: 901px) {
    .jv-list .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child):has(thead th:nth-child(9):last-child) { table-layout: fixed; width: 100%; }
    .jv-list .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child):has(thead th:nth-child(9):last-child) :is(th, td):is(:nth-child(1), :nth-child(2)) { width: 44px; min-width: 0; }
    .jv-list .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child):has(thead th:nth-child(9):last-child) :is(th, td):nth-child(3) { width: 110px; min-width: 0; }
    .jv-list .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child):has(thead th:nth-child(9):last-child) :is(th, td):nth-child(4) { width: 110px; min-width: 0; }
    .jv-list .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child):has(thead th:nth-child(9):last-child) :is(th, td):nth-child(5) { width: 60px; min-width: 0; }
    .jv-list .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child):has(thead th:nth-child(9):last-child) :is(th, td):nth-child(6) { width: 110px; min-width: 0; }
    .jv-list .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child):has(thead th:nth-child(9):last-child) :is(th, td):nth-child(7) { width: auto; min-width: 0; overflow-wrap: anywhere; }
    .jv-list .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child):has(thead th:nth-child(9):last-child) :is(th, td):nth-child(8) { width: 120px; min-width: 0; }
    .jv-list .grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child):has(thead th:nth-child(9):last-child) :is(th, td):nth-child(9) { width: 64px; min-width: 0; }
}

/* Invoice, quote and order lists on a computer screen: the preview (eye) column joined the pick column, so the widths move one place. */
@media screen and (min-width: 901px) {
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table :is(th, td):nth-child(1) { width: 3%; min-width: 0; }
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table :is(th, td):nth-child(2) { width: 3%; min-width: 0; }
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table :is(th, td):nth-child(3) { width: 9%; min-width: 0; }
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table :is(th, td):nth-child(4) { width: 5%; min-width: 0; }
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table :is(th, td):nth-child(5) { width: 9%; min-width: 0; }
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table :is(th, td):nth-child(6) { width: 4%; min-width: 0; }
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table :is(th, td):nth-child(7) { width: 9%; min-width: 0; }
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table :is(th, td):nth-child(8) { width: auto; min-width: 0; }
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table :is(th, td):nth-child(9) { width: 10%; min-width: 0; }
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table :is(th, td):nth-child(10) { width: 5%; min-width: 0; }
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table :is(th, td):nth-child(1) { width: 3%; min-width: 0; white-space: nowrap; }
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table :is(th, td):nth-child(2) { width: 3%; min-width: 0; white-space: nowrap; }
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table :is(th, td):nth-child(3) { width: 9%; min-width: 0; white-space: nowrap; }
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table :is(th, td):nth-child(4) { width: 9%; min-width: 0; white-space: nowrap; }
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table :is(th, td):nth-child(5) { width: 5%; min-width: 0; white-space: nowrap; }
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table :is(th, td):nth-child(6) { width: 9%; min-width: 0; white-space: nowrap; }
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table :is(th, td):nth-child(7) { width: auto; min-width: 0; white-space: normal; }
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table :is(th, td):nth-child(8) { width: 12%; min-width: 0; white-space: nowrap; }
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table :is(th, td):nth-child(9) { width: 8%; min-width: 0; white-space: nowrap; }
    .sales-invoices-list.sales-invoices-list.sil-flat.sil-maint .grid-table.grid-table :is(th, td):nth-child(10) { width: 10%; min-width: 0; white-space: nowrap; }
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table tbody td:nth-child(7) { text-align: start; overflow-wrap: anywhere; }
    .wd-list.wd-list col.wd-c-eye { width: 3% !important; }
    .wd-list.wd-list:has(td:nth-child(2) > a.btn-icon:only-child) :is(th, td):is(:nth-child(1), :nth-child(2)) { width: 3%; min-width: 40px; }
}

/* The description (البيان) cells are aligned to the right edge. */
@media screen and (min-width: 901px) {
    .sales-invoices-list.sales-invoices-list:not(.sil-flat) .grid-table.grid-table.grid-table :is(th, td):nth-child(8),
    .sales-invoices-list.sales-invoices-list.sil-flat .grid-table.grid-table.grid-table :is(th, td):nth-child(7),
    .jv-list .grid-table.grid-table:has(tbody tr > td:nth-child(2) > a.btn-icon:only-child):has(thead th:nth-child(9):last-child) :is(th, td):nth-child(7),
    .wd-list.wd-list.wd-list :is(th, td):nth-last-child(2):not(.wd-sum-label) { text-align: right; }
}

/* Printed account statement: a slightly smaller type, and the side letter (م / د) takes a narrow column so the description gets the room. */
.st-print-table th, .st-print-table td { font-size: 9.5px; }
.st-print-table td.st-kind { font-size: 8.5px; }
.st-print-table th { font-size: 9px; }
.st-print-table th.st-side, .st-print-table td.st-side { width: 24px; padding-inline: 2px; text-align: center; white-space: nowrap; }
html[dir="rtl"] .st-print-table th.st-side, html[dir="rtl"] .st-print-table td.st-side { text-align: center; }
.st-print-table th.st-amt { width: 78px; }
.st-print-table th.st-no { width: 58px; }
.st-print-table th.st-kind { width: 84px; }

/* Thermal receipt type: small on the screen preview, in points on the paper. The height of the paper is measured with the paper sizes (class is-measure). */
.si-thermal.si-thermal-80 { --th-base: 9.5px; --th-company: 12px; --th-title: 11px; --th-grand: 11px; --th-small: 8px; --th-en: 7px; --th-title-en: 8.5px; }
.si-thermal.si-thermal-58 { --th-base: 8.5px; --th-company: 11px; --th-title: 10px; --th-grand: 10px; --th-small: 7.5px; --th-en: 6.5px; --th-title-en: 7.5px; }
@media print {
    .si-thermal.si-thermal-80 { --th-base: 10.5pt; --th-company: 13pt; --th-title: 12pt; --th-grand: 12pt; --th-small: 9pt; --th-en: 8pt; --th-title-en: 9pt; }
    .si-thermal.si-thermal-58 { --th-base: 8.5pt; --th-company: 11pt; --th-title: 10pt; --th-grand: 10pt; --th-small: 7.5pt; --th-en: 6.5pt; --th-title-en: 7.5pt; }
}
.si-thermal.si-thermal-80.is-measure { --th-base: 10.5pt; --th-company: 13pt; --th-title: 12pt; --th-grand: 12pt; --th-small: 9pt; --th-en: 8pt; --th-title-en: 9pt; }
.si-thermal.si-thermal-58.is-measure { --th-base: 8.5pt; --th-company: 11pt; --th-title: 10pt; --th-grand: 10pt; --th-small: 7.5pt; --th-en: 6.5pt; --th-title-en: 7.5pt; }
.si-thermal.si-thermal { font-size: var(--th-base); line-height: 1.45; }
.si-thermal.si-thermal .si-th-company { font-size: var(--th-company) !important; }
.si-thermal.si-thermal .si-th-title { font-size: var(--th-title); }
.si-thermal.si-thermal .si-th-grand { font-size: var(--th-grand); }
.si-thermal.si-thermal .si-th-small { font-size: var(--th-small); }
.si-thermal.si-thermal .si-th-en { font-size: var(--th-en); }
.si-thermal.si-thermal .si-th-title .si-th-en { font-size: var(--th-title-en); }
/* the customer name sits on its own line under its label */
.si-thermal .si-th-stack { display: block; }
.si-thermal .si-th-stack .si-th-lbl { display: block; text-align: start; }
.si-thermal .si-th-stack strong { display: block; overflow-wrap: anywhere; text-align: center; margin-top: 3px; font-size: calc(var(--th-base) * 1.12); }
/* a label and its value sit on one baseline */
.si-thermal .si-th-row { align-items: baseline; }
/* the receipt text sits a little inside the paper edges */
.si-thermal.si-thermal { box-sizing: border-box; padding-inline: 2.5mm !important; }

/* Training screen: the dates are written from the right. */
.tr-date { text-align: right; direction: rtl; }
.tr-date::-webkit-datetime-edit { text-align: right; }

/* Training screen: course list column widths (desktop only). */
@media screen and (min-width: 901px) {
  .tr-c-code { width: 7%; }
  .tr-c-count { width: 9%; }
  .tr-c-end { width: 12%; }
  .tr-c-state { width: 8%; }
  .tr-c-act { width: 6%; }
}

/* Training screen: a field and its save button on one line. */
.tr-inline { display: flex; align-items: flex-end; gap: 10px; margin-top: 18px; }
.tr-inline .field { flex: 1 1 auto; margin: 0; }
.tr-inline .field label { display: block; margin-bottom: 8px; }

/* Training screen: save and delete buttons have the same width; delete sits at the far end. */
.tr-btn { min-width: 160px; justify-content: center; text-align: center; }
.tr-delete { margin-inline-start: auto; }

/* Training sign-in paper: a smaller title. */
.tr-print-title { font-size: 18px; margin: 8px 0; }


/* Companies list for the owner: the companies of each group under its name, collapsible. */
.co-groups tr.co-group-head > td { padding: 0; background: var(--primary-dark); }
.co-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 800; text-align: start; cursor: pointer; }
.co-toggle .badge { margin-inline-start: auto; }
.co-toggle img { width: 18px; height: 18px; filter: brightness(0) invert(1); transition: transform .15s; }
.co-group.is-collapsed .co-toggle img { transform: rotate(90deg); }
html[dir="rtl"] .co-group.is-collapsed .co-toggle img { transform: rotate(-90deg); }
.co-groups:not(.is-searching) .co-group.is-collapsed > tr:not(.co-group-head) { display: none; }
.co-groups.is-searching tbody[hidden] { display: table-row-group; }
.co-sub .co-toggle { padding-inline-start: 34px; background: var(--primary); }
.co-sub tr.co-group-head > td { background: var(--primary); }
.company-index-page .grid-table.is-company td { padding-block: 2px; }
.company-index-page .grid-table.is-company .btn-icon { width: 26px; height: 26px; }
.company-index-page .grid-table.is-company .btn-icon img { width: 16px; height: 16px; }
.co-toggle { padding-block: 4px; }

/* Users list by group / training course (permissions screen): click a group name to fold / unfold it. */
.pg-groups li.pg-head { margin-top: 4px; }
.pg-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 10px; border: 0; border-radius: 6px; background: var(--primary-dark); color: #fff; font: inherit; font-weight: 800; text-align: start; cursor: pointer; }
.pg-toggle img { width: 16px; height: 16px; filter: brightness(0) invert(1); transition: transform .15s; }
.pg-toggle[aria-expanded="false"] img { transform: rotate(90deg); }
html[dir="rtl"] .pg-toggle[aria-expanded="false"] img { transform: rotate(-90deg); }
.pg-toggle .badge { margin-inline-start: auto; }
.pg-groups li.is-sub .pg-toggle { background: var(--primary); }
.pg-groups li.is-sub .pg-name { padding-inline-start: 14px; }
.pg-groups li.is-folded:not([hidden]) { display: none; }
.pg-groups.is-searching li.is-folded:not([hidden]) { display: list-item; }
@media print {
  body[data-pos-drawer] { page: drawer; width: 80mm; margin: 0; }
  body[data-pos-drawer] > * { display: none !important; }
  body[data-pos-drawer]::after { content: " "; display: block; height: 1mm; }
}