/* ================= Design system — invoice archiving platform =================
   Logical properties (inline-start/end) to support RTL and LTR automatically */
:root {
  /* Myתיק identity — taken from the logo colours */
  --navy: #0a2a6b;          /* the word "My" */
  --navy-2: #0e3a8c;
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f6f9fd;
  --ink: #0b1f44;
  --ink-2: #3b4d6e;
  --muted: #6b7a93;
  --line: #e2e8f2;
  --line-2: #cfd8e6;
  --brand: #0a6cf0;         /* logo blue */
  --brand-ink: #0855c4;
  --brand-soft: #e8f1fe;
  --brand-2: #0898f8;       /* light blue of "תיק" */
  --teal: #10a8a0;          /* logo teal */
  --teal-2: #2ccfb5;
  --teal-soft: #e3f7f4;
  --brand-grad: linear-gradient(90deg, var(--teal-2), var(--brand));
  --violet: #0a6cf0;  --violet-soft: #e8f1fe;
  --green: #0e9c93;   --green-soft: #e3f6f4;
  --amber: #b06a06;   --amber-soft: #fdf3e2;
  --red: #c8322a;     --red-soft: #fdecea;
  --gray-tag: #67748a; --gray-soft: #eef1f6;
  --blue: #0a6cf0;    --blue-soft: #e8f1fe;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(11, 31, 68, .05), 0 2px 10px rgba(11, 31, 68, .05);
  --shadow-lg: 0 16px 40px rgba(11, 31, 68, .18);
  --font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --topbar-h: 68px;
}
html[lang="he"] { --font: 'Heebo', 'Cairo', 'Segoe UI', Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; }
html, body { overflow-x: clip; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.ic { flex-shrink: 0; display: inline-block; vertical-align: middle; }
[dir="ltr"] .flip { transform: scaleX(-1); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); font-size: .86rem; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ================= Top bar ================= */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1480px; margin: 0 auto; height: var(--topbar-h); display: flex; align-items: center; gap: 18px; padding: 0 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; flex-shrink: 0; }
.brand img { height: 42px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.brand .brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand strong { font-size: 1.02rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.brand small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.mainnav { display: flex; align-items: stretch; gap: 2px; flex: 1; justify-content: center; height: 100%; min-width: 0; }
.mainnav a { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--ink-2); font-weight: 600; font-size: .9rem; border-bottom: 3px solid transparent; border-top: 3px solid transparent; white-space: nowrap; transition: color .15s, background .15s; }
.mainnav a:hover { color: var(--brand); background: var(--surface-2); }
.mainnav a.active { color: var(--brand); border-bottom-color: transparent; background: linear-gradient(to top, var(--brand-soft), transparent 70%); position: relative; }
.mainnav a.active::after { content: ''; position: absolute; inset-inline: 8px; bottom: -3px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand-grad); }
.topbar-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tool-btn { position: relative; border: 0; background: transparent; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: var(--ink-2); font: inherit; font-weight: 600; font-size: .88rem; }
.tool-btn:hover { background: var(--surface-2); color: var(--ink); }
.tool-btn .count { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--red); color: #fff; font-size: .68rem; display: grid; place-items: center; padding: 0 4px; line-height: 1; }
.userchip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 10px; border-radius: 12px; cursor: pointer; border: 0; background: none; font: inherit; color: var(--ink); text-align: start; }
.userchip:hover { background: var(--surface-2); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.userchip b { display: block; font-size: .88rem; line-height: 1.2; }
.userchip small { color: var(--muted); font-size: .74rem; }
.nav-toggle { display: none; }

/* Dropdown menu */
.dd { position: relative; }
.dd-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; display: none; }
.dd.open .dd-menu { display: block; }
.dd-menu a, .dd-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--ink); border: 0; background: none; font: inherit; cursor: pointer; text-align: start; }
.dd-menu a:hover, .dd-menu button:hover { background: var(--surface-2); }
.dd-menu .sel { color: var(--brand); font-weight: 700; }
.dd-menu .sep { height: 1px; background: var(--line); margin: 6px 0; }
.dd-menu .danger { color: var(--red); }
.notif-menu { width: 340px; max-width: calc(100vw - 24px); padding: 0; }
.notif-menu header { padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.notif-menu .n-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink); border-radius: 0; }
.notif-menu .n-item:last-child { border-bottom: 0; }
.notif-menu .n-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.notif-menu .n-item small { display: block; color: var(--muted); font-size: .78rem; }
.notif-menu .empty { padding: 26px 14px; text-align: center; color: var(--muted); }

@media (max-width: 1560px) {
  .mainnav a { padding: 0 10px; font-size: .86rem; gap: 6px; }
  .brand strong, .brand small { max-width: 170px; }
}
@media (max-width: 1400px) {
  .mainnav a .ic { display: none; }
  .tool-btn .lang-label { display: none; }
}
@media (max-width: 1180px) {
  .mainnav a { padding: 0 7px; font-size: .82rem; }
  .userchip .uc-text { display: none; }
}
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .mainnav { position: fixed; top: var(--topbar-h); inset-inline: 0; bottom: 0; background: var(--surface); flex-direction: column; justify-content: flex-start; height: auto; padding: 10px; gap: 2px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 49; overflow-y: auto; }
  body.nav-open .mainnav { opacity: 1; transform: none; pointer-events: auto; }
  .mainnav a { padding: 12px 14px; border: 0; border-radius: 10px; font-size: .98rem; }
  .mainnav a .ic { display: inline-block; }
  .mainnav a.active { background: var(--brand-soft); }
  .userchip .uc-text, .tool-btn .lang-label { display: none; }
  .topbar-inner { padding: 0 10px; gap: 4px; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .brand img { height: 34px; }
  .brand small { display: none; }
  .brand strong { max-width: none; font-size: .92rem; }
  .brand .brand-text { min-width: 0; }
  .topbar-tools { gap: 0; }
  .tool-btn { min-width: 36px; padding: 0 6px; }
  .tool-btn > .ic:last-child:not(:first-child) { display: none; }
  .userchip { padding: 2px; }
  .avatar { width: 34px; height: 34px; }
}

/* ================= Page ================= */
.page { max-width: 1480px; margin: 0 auto; padding: 22px 24px 70px; display: grid; gap: 18px; align-content: start; }
.page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.35rem; font-weight: 700; }
.page-head .sub { color: var(--muted); font-size: .9rem; margin: 2px 0 0; }
.page-head .sub a { color: var(--muted); }
.page-head .sub a:hover { color: var(--brand); }
.page-actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .page { padding: 14px 12px 110px; } .page-head h1 { font-size: 1.15rem; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.card.flush { padding: 0; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-head .more { margin-inline-start: auto; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.card.narrow { max-width: 560px; }
.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 1180px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3, .g-2-1, .g-1-2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .g-4, .g-2 { grid-template-columns: 1fr; } }

/* ================= Banner ================= */
.banner { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 128px; display: flex; align-items: center; padding: 22px 28px; background: linear-gradient(90deg, #eef5fe, #e6f6f4); border: 1px solid var(--line); }
.banner img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to left, rgba(255,255,255,.96) 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,.1) 85%); }
[dir="ltr"] .banner::after { background: linear-gradient(to right, rgba(255,255,255,.96) 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,.1) 85%); }
.banner .b-body { position: relative; z-index: 1; max-width: 640px; }
.banner h2 { font-size: 1.45rem; font-weight: 800; }
.banner p { margin: 4px 0 14px; color: var(--ink-2); }
.banner .b-close { position: absolute; z-index: 2; top: 10px; inset-inline-end: 10px; }
@media (max-width: 700px) { .banner { padding: 18px; } .banner h2 { font-size: 1.15rem; } }

/* ================= Stat cards ================= */
.stat { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); min-width: 0; }
a.stat:hover { border-color: var(--line-2); }
.stat .s-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.stat .s-body { min-width: 0; }
.stat b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.15; }
.stat .s-label { font-weight: 700; font-size: .92rem; }
.stat small { display: block; color: var(--muted); font-size: .78rem; }
.stat small .up { color: var(--green); font-weight: 700; } .stat small .down { color: var(--red); font-weight: 700; }
.stat.violet { background: var(--violet-soft); border-color: #d6e6fd; } .stat.violet .s-icon { background: #d3e5fd; color: var(--violet); } .stat.violet b { color: var(--violet); }
.stat.green { background: var(--green-soft); border-color: #c9ece8; } .stat.green .s-icon { background: #c4ebe6; color: var(--green); } .stat.green b { color: var(--green); }
.stat.amber { background: var(--amber-soft); border-color: #f6e2bd; } .stat.amber .s-icon { background: #fae3b8; color: var(--amber); } .stat.amber b { color: var(--amber); }
.stat.red { background: var(--red-soft); border-color: #f6d0cb; } .stat.red .s-icon { background: #f9d3ce; color: var(--red); } .stat.red b { color: var(--red); }
.stat.plain .s-icon { background: var(--surface-2); color: var(--brand); }

/* ================= Charts ================= */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 22px 4px 0; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bars .bar i { display: block; width: 100%; max-width: 46px; background: var(--brand-2); border-radius: 6px 6px 0 0; min-height: 2px; position: relative; transition: height .5s ease; }
.bars .bar i.zero { background: var(--line); }
.bars .bar .v { font-size: .8rem; font-weight: 700; margin-bottom: 4px; }
.bars .bar .l { font-size: .72rem; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; }
.bars .bar.today i { background: var(--navy); }
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.donut { width: 170px; height: 170px; position: relative; flex-shrink: 0; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut .center b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.donut .center small { color: var(--muted); font-size: .76rem; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; min-width: 160px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: .87rem; }
.legend .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.legend .pct { margin-inline-start: auto; font-weight: 700; color: var(--ink-2); }
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: .86rem; }
.hbar .track { height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.hbar .track i { display: block; height: 100%; background: var(--brand-2); border-radius: 6px; }
.hbar .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= Buttons and fields ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 8px 16px; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; color: var(--ink); background: var(--surface); line-height: 1.5; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-ink); }
.btn-outline { border-color: var(--line-2); }
.btn-outline:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: var(--red); color: #fff; }
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); }
.btn-sm { padding: 5px 11px; font-size: .8rem; }
.btn-block { width: 100%; }
.danger { color: var(--red) !important; }
.icon-btn { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink-2); padding: 0; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field > span { font-size: .84rem; font-weight: 700; color: var(--ink-2); }
.field small.hint { color: var(--muted); font-size: .78rem; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 12px; width: 100%; transition: border-color .15s, box-shadow .15s; min-height: 40px; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10, 108, 240, .16); }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; min-height: 0; accent-color: var(--brand); padding: 0; }
input[type=file] { padding: 6px; }
.check { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; user-select: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; }
.switch input { appearance: none; width: 40px; height: 22px; border-radius: 22px; background: var(--line-2); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.switch input::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked { background: var(--brand); }
.switch input:checked::after { inset-inline-start: 21px; }

/* ================= Tags and statuses ================= */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 7px; font-size: .76rem; font-weight: 700; background: var(--gray-soft); color: var(--gray-tag); white-space: nowrap; }
.tag.s-processed, .tag.s-approved, .tag.ok, .tag.whatsapp { background: var(--green-soft); color: var(--green); }
.tag.s-pending, .tag.s-pdf, .tag.warn { background: var(--amber-soft); color: var(--amber); }
.tag.s-needs_edit { background: var(--red-soft); color: var(--red); }
.tag.s-rejected { background: var(--gray-soft); color: var(--gray-tag); }
.tag.web { background: var(--blue-soft); color: var(--blue); }
.tag.violet, .tag.role-office_admin { background: var(--violet-soft); color: var(--violet); }
.tag.role-accountant { background: var(--brand-soft); color: var(--brand-ink); }
.tag.expense { background: var(--red-soft); color: var(--red); }
.tag.income { background: var(--green-soft); color: var(--green); }

.flash { padding: 11px 16px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.flash.err { background: var(--red-soft); color: var(--red); }
.notice { background: var(--amber-soft); color: var(--amber); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .88rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.notice.info { background: var(--blue-soft); color: var(--blue); }

/* ================= Tables ================= */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th { text-align: start; font-weight: 700; font-size: .78rem; color: var(--muted); padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th:first-child { border-start-start-radius: 8px; } .table th:last-child { border-start-end-radius: 8px; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #f8fbff; }
.table .c { text-align: center; }
.table .e { text-align: end; }
/* numbers are written left-to-right (.num) — so "end"/"start" would flip inside the cell and leave the value away from its
   column title. Align by the page direction instead, so a title and the value under it sit on the same side. */
[dir=rtl] .table .e { text-align: left; } [dir=ltr] .table .e { text-align: right; }
[dir=rtl] .table td.num:not(.e):not(.c) { text-align: right; } [dir=ltr] .table td.num:not(.e):not(.c) { text-align: left; }
/* totals line: each total carries the name of what it adds up */
.table tfoot td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.table tr.sel { background: var(--brand-soft) !important; }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
.table td.row-actions { display: table-cell; text-align: end; white-space: nowrap; }
.table td.row-actions > * { vertical-align: middle; margin-inline-start: 2px; }
.table td.row-actions form { display: inline-block; }
.row-actions form { margin: 0; }
.thumb-sm { width: 40px; height: 52px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid var(--line); display: block; cursor: zoom-in; }
.kv { display: flex; justify-content: space-between; padding: 6px 0; font-size: .92rem; gap: 10px; }
.kv span { color: var(--muted); }

/* ================= Tabs ================= */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a, .tabs button { padding: 10px 16px; font-weight: 700; color: var(--ink-2); border: 0; background: none; font: inherit; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.tabs a.active, .tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ================= Modals ================= */
.modal { border: 0; border-radius: 16px; padding: 0; width: min(580px, calc(100vw - 24px)); box-shadow: var(--shadow-lg); color: var(--ink); }
.modal::backdrop { background: rgba(11, 31, 68, .45); backdrop-filter: blur(2px); }
.modal-body { padding: 22px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; }
.modal-head h3 { font-size: 1.08rem; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.modal.wide { width: min(1120px, calc(100vw - 24px)); }

.toasts { position: fixed; bottom: 20px; inset-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: .9rem; animation: toastIn .25s ease; max-width: 380px; font-weight: 600; }
.toast.err { background: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ================= Login ================= */
.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); background: radial-gradient(1000px 520px at 100% 0%, #dbeafe 0%, transparent 60%), var(--bg); }
.auth-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px; box-shadow: var(--shadow-lg); }
.auth-card .flash { margin-bottom: 16px; }
.auth-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.auth-brand img { height: 52px; width: auto; max-width: 120px; object-fit: contain; }
.auth-brand h1 { font-size: 1.2rem; }
.auth-brand p { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
.auth-langs { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.auth-langs a { font-size: .84rem; padding: 4px 10px; border-radius: 6px; color: var(--muted); font-weight: 600; }
.auth-langs a.sel { background: var(--brand-soft); color: var(--brand); }

/* ================= Upload ================= */
.dropzone { position: relative; border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: var(--surface-2); padding: 28px 18px; text-align: center; transition: border-color .15s, background .15s; }
.dropzone.over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone .dz-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; margin: 0 auto 10px; color: var(--brand); }
.dropzone h3 { font-size: 1rem; margin-bottom: 2px; }
.dropzone p { margin: 0 0 14px; color: var(--muted); font-size: .86rem; }
.dz-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
kbd { font-family: inherit; font-size: .76rem; background: var(--surface); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; direction: ltr; display: inline-block; }
.upload-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .upload-layout { grid-template-columns: 1fr; } .upload-layout .side-panel { order: -1; position: static; } }
.queue-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; flex-wrap: wrap; }
.queue-head h2 { font-size: 1rem; }
.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.q-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.q-item.saved { border-color: #9cc8fb; }
.q-item.error { border-color: #f3b4ad; }
.q-thumb { aspect-ratio: 3 / 4; background: #eef2f8; position: relative; cursor: zoom-in; }
.q-thumb canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.q-badge { position: absolute; top: 8px; inset-inline-start: 8px; }
.q-spinner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.72); font-size: .82rem; color: var(--ink-2); }
.q-spinner::before { content: ''; width: 24px; height: 24px; border: 3px solid var(--line-2); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.q-body { padding: 8px; display: flex; gap: 4px; align-items: center; border-top: 1px solid var(--line); }
.q-body select { padding: 4px 6px; font-size: .8rem; flex: 1; min-width: 0; min-height: 32px; }
.q-msg { font-size: .75rem; padding: 0 10px 8px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-msg.err { color: var(--red); white-space: normal; }
.side-panel { position: sticky; top: calc(var(--topbar-h) + 16px); display: grid; gap: 16px; }
.cust-picked { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--surface-2); }
.cust-picked strong { display: block; }
.cust-picked .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--muted); margin-top: 4px; }

.combo { position: relative; }
.combo-input { position: relative; }
.combo-input .ic { position: absolute; top: 50%; inset-inline-start: 11px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.combo-input input { padding-inline-start: 36px; }
.combo-list { position: absolute; top: calc(100% + 4px); inset-inline: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; z-index: 30; }
.combo-list button { display: block; width: 100%; text-align: start; border: 0; background: none; padding: 9px 12px; font: inherit; cursor: pointer; border-bottom: 1px solid var(--line); }
.combo-list button:last-child { border-bottom: 0; }
.combo-list button:hover, .combo-list button.hi { background: var(--brand-soft); }
.combo-list small { display: block; color: var(--muted); font-size: .78rem; }
.combo-list .empty { padding: 12px; color: var(--muted); font-size: .88rem; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare figure { margin: 0; }
.compare figcaption { font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
.compare img, .compare canvas { width: 100%; max-height: 66vh; object-fit: contain; background: #eef2f8; border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }

/* ================= Archive ================= */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters .search { flex: 1 1 260px; position: relative; }
.filters .search .ic { position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%); color: var(--muted); }
.filters .search input { padding-inline-start: 38px; }
.filters select, .filters input[type=date], .filters input[type=month] { width: auto; }
.view-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button { border: 0; background: var(--surface); padding: 8px 10px; cursor: pointer; color: var(--muted); display: grid; }
.view-toggle button.on { background: var(--ink); color: #fff; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.inv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: relative; transition: border-color .15s, box-shadow .15s; }
.inv:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.inv.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.inv .pick { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; background: rgba(255,255,255,.94); border-radius: 6px; padding: 4px; display: grid; }
.inv .thumb { aspect-ratio: 3 / 4; background: #eef2f8; display: block; cursor: pointer; }
.inv .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.inv .src { position: absolute; top: 8px; inset-inline-end: 8px; }
.inv .info { padding: 10px 12px; }
.inv .info strong { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv .info .line { font-size: .78rem; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.inv .info .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.inv .acts { display: flex; border-top: 1px solid var(--line); }
.inv .acts a, .inv .acts button { flex: 1; display: grid; place-items: center; padding: 8px 0; color: var(--ink-2); border: 0; background: none; cursor: pointer; }
.inv .acts a:hover, .inv .acts button:hover { background: var(--surface-2); color: var(--brand); }
.inv .acts > * + * { border-inline-start: 1px solid var(--line); }
.selbar { position: sticky; bottom: 16px; z-index: 25; background: var(--ink); color: #fff; border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; box-shadow: var(--shadow-lg); margin-top: 14px; }
.selbar .count { font-weight: 700; margin-inline-end: auto; }
.selbar .btn { background: rgba(255,255,255,.1); color: #fff; }
.selbar .btn:hover { background: rgba(255,255,255,.2); }
.selbar .btn.btn-primary { background: var(--brand); }
.selbar select { width: auto; background: rgba(255,255,255,.1); color: #fff; border-color: transparent; padding: 5px 10px; min-height: 34px; }
.selbar select option { color: var(--ink); }
.pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 18px; }
.empty-state { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty-state .ic { color: var(--line-2); margin-bottom: 8px; }

/* ================= Customer file ================= */
.profile { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.big-avatar { width: 64px; height: 64px; border-radius: 16px; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; flex-shrink: 0; }
.profile-info { flex: 1; min-width: 240px; }
.profile-info h2 { font-size: 1.3rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
.fact { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.fact span { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.fact b { display: block; margin-top: 2px; font-weight: 700; }
.fact b.empty { color: var(--line-2); }

/* ================= Settings ================= */
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + 16px); }
.settings-nav a { padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 700; display: flex; gap: 10px; align-items: center; }
.settings-nav a:hover { background: var(--surface); }
.settings-nav a.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static; flex-direction: row; overflow-x: auto; } .settings-nav a { white-space: nowrap; } }
.img-pick { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.img-pick .preview { width: 180px; height: 90px; border-radius: 10px; border: 1px dashed var(--line-2); background: var(--surface-2) center/contain no-repeat; display: grid; place-items: center; overflow: hidden; }
.img-pick .preview img { max-width: 100%; max-height: 100%; }
.img-pick .preview.wide { width: 300px; }

/* ================= Platform admin panel ================= */
body.admin .topbar { border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
body.admin .topbar::after { content: ''; display: block; height: 3px; background: var(--brand-grad); }
.console-badge { font-size: .7rem; font-weight: 800; color: #fff; background: var(--navy); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.admin-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; }
.tr-cell { min-width: 200px; }
.tr-cell textarea { min-height: 38px; font-size: .86rem; padding: 6px 8px; }
.tr-cell.missing textarea { border-color: #f0b3aa; background: #fff7f6; }
.pill-missing { background: var(--red-soft); color: var(--red); }
[dir="ltr"] .banner img.bg { transform: scaleX(-1); }

/* ================= Allocation numbers ================= */
.tag.a-required { background: var(--amber-soft); color: var(--amber); }
.tag.a-requested { background: var(--blue-soft); color: var(--blue); }
.tag.a-issued { background: var(--green-soft); color: var(--green); }
.tag.a-rejected { background: var(--red-soft); color: var(--red); }
.tag.a-not_required { background: var(--gray-soft); color: var(--gray-tag); }
.tag.alloc-missing { background: var(--red-soft); color: var(--red); }
.tag.alloc-check { background: var(--amber-soft); color: var(--amber); }
.tag.alloc-need { background: var(--red-soft); color: var(--red); }
.alloc-live { display: block; color: var(--red); font-weight: 700; font-size: .78rem; margin-top: 4px; cursor: help; }
.alloc-live[hidden], .btn[hidden] { display: none !important; }
.party-add { width: 20px; height: 20px; line-height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--blue, #1d5bd8); background: var(--surface, #fff); color: var(--blue, #1d5bd8); font-weight: 800; cursor: pointer; vertical-align: middle; }
.tag.alloc-ok { background: var(--green-soft); color: var(--green); }
.alloc-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.alloc-bar .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .86rem; font-weight: 600; }
.alloc-bar .pill b { font-size: 1rem; }

/* ================= Brand touches ================= */
h1, h2, h3, .stat b, .brand strong { color: var(--navy); }
.stat.red b { color: var(--red); } .stat.amber b { color: var(--amber); } .stat.green b { color: var(--green); } .stat.violet b { color: var(--brand); }
.btn-primary { background: var(--brand); box-shadow: 0 1px 2px rgba(10, 108, 240, .25); }
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); }
.avatar { background: var(--brand-grad); }
.auth-card { position: relative; overflow: hidden; }
.auth-card::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--brand-grad); }
.auth-logo { display: block; margin: 0 auto 18px; max-width: 260px; height: auto; }
.powered { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: .78rem; color: var(--muted); }
.powered img { height: 18px; width: auto; }
.brand-platform img { height: 40px; max-width: 150px; }

/* Navigation compaction levels when space is tight (set automatically by common.js) */
.mainnav { overflow: hidden; }
body.nav-c1 .mainnav a .ic, body.nav-c1 .tool-btn .lang-label { display: none; }
body.nav-c1 .mainnav a { padding: 0 8px; }
body.nav-c2 .brand .brand-text, body.nav-c2 .userchip .uc-text { display: none; }
body.nav-c3 .mainnav a { padding: 0 5px; font-size: .78rem; }
@media (max-width: 960px) { .mainnav { overflow: visible; } }

/* ================= Invoice reading (OCR) suggestions ================= */
.ocr-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); }
.ocr-bar [data-ocr-msg] { font-size: .82rem; flex: 1; min-width: 180px; }
.ocr-bar .ocr-ok { color: var(--teal); font-weight: 600; }
.ocr-bar .ocr-warn { color: var(--red); font-weight: 600; }
.field input.ocr-suggest { border-color: var(--teal); background: #e8f8f5; box-shadow: 0 0 0 3px rgba(16, 168, 160, .15); }

/* ================= Tax Authority news (dashboard) ================= */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-family: 'Heebo', 'Cairo', sans-serif; }
.news-list li { padding: 9px 0; border-bottom: 1px solid var(--line); display: grid; gap: 3px; }
.news-list li:last-child { border-bottom: 0; }
.news-list a { color: var(--ink); font-weight: 600; font-size: .9rem; line-height: 1.45; }
.news-list a:hover { color: var(--brand); }
.news-list small { font-size: .74rem; }

/* ================= Per-user permissions picker ================= */
.perm-pick { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 14px; }
.perm-pick legend { font-size: .82rem; font-weight: 700; padding: 0 6px; }
.perm-pick #u_perms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 6px; }
@media (max-width: 560px) { .perm-pick #u_perms { grid-template-columns: 1fr; } }

/* ================= Useful links ================= */
.links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { position: relative; border-bottom: 1px solid var(--line); }
.link-list li:last-child { border-bottom: 0; }
.link-list a { display: grid; gap: 2px; padding: 11px 4px; padding-inline-end: 30px; color: var(--ink); border-radius: 8px; }
.link-list a:hover { background: var(--surface-2); }
.link-list .lk-title { font-weight: 600; font-size: .92rem; }
.link-list .lk-host { font-size: .72rem; color: var(--brand); }
.link-list .lk-ic { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
[dir="ltr"] .link-list .lk-ic svg, .link-list .lk-ic svg { display: block; }

/* ================= Billing & follow-up per tax period ================= */
.fin-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
.due-nav { display: flex; align-items: center; gap: 10px; }
.due-nav > div { display: grid; gap: 2px; }
.due-nav small { font-size: .78rem; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.link-btn { border: 0; background: none; color: var(--muted); font: inherit; font-size: .74rem; text-decoration: underline; cursor: pointer; padding: 0 2px; }
.fin-table td { vertical-align: middle; }
.tag.pay-paid { background: var(--green-soft); color: var(--green); }
.tag.pay-partial { background: var(--amber-soft); color: var(--amber); }
.tag.pay-unpaid { background: var(--gray-soft); color: var(--ink-2); }
.tag.pay-overdue { background: var(--red-soft); color: var(--red); }
.neg { color: var(--red); }
.pos { color: var(--green); }
.fin-locked-tile .s-label { display: flex; gap: 6px; align-items: center; font-size: .82rem; }
.acct-top { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; margin-bottom: 8px; }
.acct-settings { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.acct-settings .field { min-width: 180px; margin-bottom: 0; }
.acct-settings .field .hint { display: block; max-width: 230px; }
.acct-next { flex-basis: 100%; margin: 4px 0 0; font-weight: 600; color: var(--brand-ink); }
.fee-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 10px; }
.fs-tile { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; display: grid; gap: 4px; background: var(--surface); }
.fs-tile span { font-size: .8rem; color: var(--muted); }
.fs-tile b { font-size: 1.15rem; }
.fs-tile.pos b { color: var(--green); } .fs-tile.neg b { color: var(--red); }
/* stacked period columns: paid (green) + rest (red overdue / grey upcoming) */
.pchart { display: flex; align-items: stretch; gap: 10px; height: 210px; overflow-x: auto; padding: 4px 0 2px; }
.pchart .pc { flex: 1 0 64px; display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.pchart .pc-v { font-size: .78rem; font-weight: 700; color: var(--ink); min-height: 1.1em; }
.pchart .pc-col { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pchart .pc-bar { width: 58%; max-width: 44px; display: flex; flex-direction: column; border-radius: 5px 5px 0 0; overflow: hidden; }
.pchart .pc-bar i, .db-legend i.paid, .db-legend i.over, .db-legend i.up { display: block; }
.pchart i.paid, .db-legend i.paid { background: var(--green); }
.pchart i.over, .db-legend i.over { background: var(--red); }
.pchart i.up, .db-legend i.up { background: #c9d3e1; }
.pchart .pc-l { font-size: .74rem; color: var(--muted); margin-top: 6px; white-space: nowrap; }
.pchart .pc-p { font-size: .72rem; white-space: nowrap; }
.fee-table td:first-child { color: var(--ink); }
.fee-table tr.sep td { border-top: 2px solid var(--line); }
.fee-table tr.strong td { font-weight: 700; }
.table tfoot td { font-weight: 700; border-top: 2px solid var(--line); background: var(--gray-soft); }
.table.compact td, .table.compact th { padding-top: 7px; padding-bottom: 7px; }
.start-month { display: grid; gap: 3px; margin-top: 6px; }
.start-month[hidden] { display: none; }
.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.fin-kpis .fk { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; display: grid; gap: 3px; }
.fin-kpis .fk span { font-size: .8rem; color: var(--muted); }
.fin-kpis .fk b { font-size: 1.35rem; }
.fin-kpis .fk small { font-size: .74rem; }
.calc-total { background: var(--gray-soft); font-weight: 700; }
.acct-balance { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acct-balance b { font-size: 1.25rem; }
.sub-h { font-size: .92rem; margin: 18px 0 8px; color: var(--ink-2); }
.fu-sum { margin-bottom: 12px; font-size: .9rem; }
.fu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fu-cols h4, .fin-overdue h4, .fin-dash h4 { font-size: .85rem; margin: 0 0 8px; }
.fu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fu-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.fu-list li:last-child { border-bottom: 0; }
.fu-list li > a:first-child { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-wa { color: var(--green); display: inline-flex; }
.fin-dash { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 14px; }
.fin-dash > div, .grid > .card { min-width: 0; }
.fin-dash .bars { overflow: hidden; }
.fin-locked { text-align: center; padding: 18px 8px; }
.fin-locked p { display: flex; gap: 6px; justify-content: center; align-items: center; }
.dual-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
.dual-bars .db { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.dual-bars .db-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.dual-bars i { display: block; width: 40%; max-width: 18px; border-radius: 4px 4px 0 0; min-height: 2px; }
.dual-bars i.exp, .db-legend i.exp { background: #c9d6ea; }
.dual-bars i.col, .db-legend i.col { background: var(--teal); }
.dual-bars .l { font-size: .72rem; color: var(--muted); margin-top: 6px; }
.db-legend { display: flex; gap: 14px; font-size: .76rem; color: var(--muted); margin-top: 8px; }
.db-legend span { display: inline-flex; align-items: center; gap: 5px; }
.db-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
@media (max-width: 760px) { .fu-cols { grid-template-columns: 1fr; } }
.acct-settings [hidden] { display: none !important; }
.news-frame { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.news-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.news-frame.hidden, [data-npane].hidden { display: none; }
.news-tabs { display: inline-flex; gap: 4px; background: var(--gray-soft); padding: 3px; border-radius: 999px; margin-bottom: 10px; }
.news-tabs button { border: 0; background: transparent; padding: 5px 14px; border-radius: 999px; font: inherit; font-size: .8rem; cursor: pointer; color: var(--muted); }
.news-tabs button.active { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); }
/* ===== Invoice magnifier & full zoom ===== */
.compare figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.zoom-tools { display: inline-flex; gap: 4px; }
.zt-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .76rem; cursor: pointer; }
.zt-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.zoom-box { position: relative; }
.zoom-box img { display: block; }
.zoom-lens { display: none; position: absolute; width: 190px; height: 190px; border-radius: 50%; pointer-events: none; z-index: 5;
  border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35); background-repeat: no-repeat; background-color: #fff; }
.zoom-lens::after { content: attr(data-z); position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(15,23,42,.75); color: #fff; font-size: .7rem; padding: 1px 7px; border-radius: 999px; }
.zoom-hint { grid-column: 1 / -1; font-size: .76rem; margin: 0; }
.zoom-view { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.92); display: flex; flex-direction: column; }
.zv-bar { display: flex; gap: 8px; justify-content: center; align-items: center; padding: 10px; }
.zv-bar button { border: 0; background: rgba(255,255,255,.14); color: #fff; border-radius: 8px; padding: 7px 14px; font: inherit; font-size: .9rem; cursor: pointer; min-width: 42px; }
.zv-bar button:hover { background: rgba(255,255,255,.26); }
.zv-bar [data-zl] { color: #fff; min-width: 56px; text-align: center; }
.zv-stage { flex: 1; position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.zv-stage.drag { cursor: grabbing; }
.zv-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; background: #fff; }
@media (max-width: 700px) { .zoom-lens { width: 140px; height: 140px; } }
.auth-switch { text-align: center; margin-top: 10px; font-size: .82rem; }
.auth-switch a { color: var(--muted); text-decoration: underline; }

/* ===== Office calendar ===== */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
[dir=rtl] #calPrev svg, [dir=ltr] #calNext svg { transform: scaleX(-1); }   /* arrows point outward on both languages' directions */
.cal-head h2 { flex: 1; text-align: center; font-size: 1.15rem; margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: .76rem; color: var(--muted); font-weight: 700; padding: 4px 0; }
.cal-day { min-height: 92px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 5px; text-align: start; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden; color: var(--ink); }
.cal-day:hover { border-color: var(--brand); }
.cal-day.out { opacity: .45; }
.cal-day.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.cal-day.today .dn { background: var(--brand); color: #fff; border-radius: 999px; padding: 0 7px; }
.cal-day.has-deadline { background: linear-gradient(0deg, var(--amber-soft), var(--surface) 60%); }
.cal-day .dn { font-size: .82rem; font-weight: 700; align-self: flex-start; }
.cal-day .chips { display: grid; gap: 2px; }
.cal-chip { display: block; font-size: .7rem; line-height: 1.25; padding: 2px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--gray-soft); }
.cal-chip.k-client_visit { background: var(--blue-soft); color: var(--blue); }
.cal-chip.k-tax_visit { background: var(--violet-soft); color: var(--violet); }
.cal-chip.k-meeting { background: var(--teal-soft); color: var(--teal); }
.cal-chip.deadline { background: var(--amber-soft); color: var(--amber); font-weight: 700; }
.cal-chip.done { text-decoration: line-through; opacity: .6; }
.cal-more { font-size: .68rem; color: var(--muted); }
.cal-day .dots { display: none; gap: 3px; }
.cal-day .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: inline-block; }
.cal-day .dots i.k-client_visit { background: var(--blue); } .cal-day .dots i.k-tax_visit { background: var(--violet); }
.cal-day .dots i.k-meeting { background: var(--teal); } .cal-day .dots i.deadline { background: var(--amber); }
@media (max-width: 700px) {
  .cal-day { min-height: 54px; align-items: center; }
  .cal-day .chips { display: none; }
  .cal-day .dots { display: flex; }
  .cal-day .dn { align-self: center; }
}
.ag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-item { display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; border-inline-start: 4px solid var(--muted); }
.ag-item.k-client_visit { border-inline-start-color: var(--blue); } .ag-item.k-tax_visit { border-inline-start-color: var(--violet); }
.ag-item.k-meeting { border-inline-start-color: var(--teal); } .ag-item.deadline { border-inline-start-color: var(--amber); background: var(--amber-soft); }
.ag-item.done { opacity: .6; } .ag-item.done b { text-decoration: line-through; }
.ag-time { font-weight: 800; font-size: .95rem; display: grid; align-content: start; }
.ag-time small { font-weight: 400; font-size: .7rem; color: var(--muted); }
.ag-body { display: grid; gap: 3px; min-width: 0; }
.ag-body small { font-size: .78rem; }
.ag-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cal-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
@media (max-width: 560px) { .cal-kinds { grid-template-columns: repeat(2, 1fr); } }
.cal-kind input { position: absolute; opacity: 0; pointer-events: none; }
.cal-kind span { display: block; text-align: center; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; font-size: .82rem; cursor: pointer; }
.cal-kind input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.today-appts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.today-appts li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 8px; background: var(--gray-soft); }
.today-appts li.soon { background: var(--amber-soft); }
.today-appts b.num { font-size: .9rem; }
.today-appts small { color: var(--muted); font-size: .76rem; display: block; }
.n-item.unread span:last-child { font-weight: 700; }
.n-item .n-time { display: block; font-size: .7rem; color: var(--muted); font-weight: 400; }

/* ---------- Subscription: banner on every office page, frozen status ---------- */
.sub-banner { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 12px; margin-bottom: 16px; font-size: .9rem; line-height: 1.6; border: 1px solid; }
.sub-banner .ic { flex: none; margin-top: 2px; }
.sub-banner a { font-weight: 800; text-decoration: underline; color: inherit; }
.sub-banner.warn { background: #fff7e0; border-color: #f3d27a; color: #7a4d00; }
.sub-banner.frozen { background: var(--red-soft); border-color: #f2b8b8; color: var(--red); }
.sub-banner.info { background: var(--blue-soft); border-color: #bcd6fb; color: var(--blue); }
.tag.frozen { background: #e0f2fe; color: #0369a1; }
.sub-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sub-sum div { background: var(--bg-soft, #f6f8fc); border-radius: 10px; padding: 10px 12px; }
.sub-sum span { display: block; font-size: .76rem; color: var(--muted); }
.sub-sum b { font-size: 1.05rem; }
.sub-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--line, #d9e0ec); border-radius: 12px; margin: 10px 0 14px; }

/* ---------- Issued documents ---------- */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .doc-layout { grid-template-columns: 1fr; } }
.doc-preview { overflow-x: auto; }
.doc-state { background: var(--amber-soft); color: var(--amber); border-radius: 10px; padding: 9px 14px; margin-bottom: 10px; font-size: .86rem; font-weight: 600; }
.doc-state.done { background: var(--green-soft); color: var(--green); }
.doc-actions { display: grid; gap: 8px; }
.doc-actions .btn { justify-content: flex-start; }
.doc-nextno { font-size: 1.5rem; font-weight: 800; color: var(--brand-ink, #0a2a6b); font-variant-numeric: tabular-nums; }
.doc-lines input, .doc-lines select { min-height: 36px; width: 100%; }
.doc-sum { display: flex; justify-content: flex-end; gap: 22px; flex-wrap: wrap; margin-top: 12px; }
.doc-sum div { text-align: end; } .doc-sum span { display: block; font-size: .76rem; color: var(--muted); }
.doc-sum .grand b { font-size: 1.25rem; color: var(--brand-ink, #0a2a6b); }
.doc-sum .bad b { color: var(--red); font-size: 1.15rem; } .doc-sum small { display: block; color: var(--red); }
.doc-form [hidden], #issModal [hidden] { display: none !important; }
.chq-grid { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 6px; }
.chq-grid .chq-pic { grid-column: 1 / -1; justify-self: start; cursor: pointer; }
.chq-grid .chq-pic.ok { color: var(--ok, #15803d); }
.chq-grid .chq-pic.busy { opacity: .7; pointer-events: none; }
.pd-transfer .bad-note { display: block; color: var(--red, #c62828); font-size: .76rem; margin-top: 4px; }
@media (max-width: 700px) { .chq-grid { grid-template-columns: 1fr 1fr; } }
.chq-thumbs { display: grid; gap: 10px; }

/* Document date: own calendar (allowed days only) */
.cal-field { position: relative; }
.date-btn { min-height: 40px; width: 100%; text-align: start; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, #fff); font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.date-btn::after { content: '📅'; float: inline-end; font-weight: 400; }
.cal-pop { position: absolute; z-index: 30; top: 100%; inset-inline-start: 0; margin-top: 6px; width: 300px; max-width: calc(100vw - 32px); background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 34px rgba(10, 30, 70, .18); padding: 12px; }
.cal-head { font-weight: 800; text-align: center; margin-bottom: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.cal-wd { text-align: center; font-size: .72rem; color: var(--muted); font-weight: 700; }
.cal-d { aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink); }
.cal-d:hover:not(.off) { background: var(--blue-soft, #e8f0ff); }
.cal-d.off { color: #c3cad6; text-decoration: line-through; cursor: not-allowed; font-weight: 400; background: transparent; }
.cal-d.today:not(.sel) { box-shadow: inset 0 0 0 2px var(--blue, #1d5bd8); }
.cal-d.sel { background: var(--blue, #1d5bd8); color: #fff; }

/* New document on a phone: every line / payment becomes a card with titled fields (no sideways scrolling) */
@media (max-width: 700px) {
  .doc-form .table-wrap { overflow: visible; }
  .doc-form .doc-lines thead { display: none; }
  .doc-form .doc-lines, .doc-form .doc-lines tbody { display: block; width: 100%; }
  .doc-form .doc-lines tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); position: relative; }
  .doc-form .doc-lines td { display: block; padding: 0; border: 0; text-align: start; min-width: 0; }
  .doc-form .doc-lines td[data-label]::before { content: attr(data-label); display: block; font-size: .74rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
  .doc-form .doc-lines input, .doc-form .doc-lines select { width: 100% !important; }
  .doc-form .doc-lines .c-desc, .doc-form .doc-lines .c-det, .doc-form .doc-lines .c-method { grid-column: 1 / -1; padding-inline-end: 34px; }
  .doc-form .doc-lines .c-det { padding-inline-end: 0; }
  .doc-form .doc-lines .c-det.c-empty { display: none; }
  .doc-form .doc-lines .c-total { grid-column: 1 / -1; font-weight: 800; }
  .doc-form .doc-lines .c-total:empty { display: none; }
  .doc-form .doc-lines .c-del { position: absolute; top: 8px; inset-inline-end: 6px; }
  .doc-form .card-head { flex-wrap: wrap; }
  .doc-form .card-head .seg { margin-inline-start: 0 !important; width: 100%; }
  .doc-form .card-head .seg label { flex: 1; justify-content: center; }
  .doc-sum { justify-content: space-between; gap: 12px; }
}
.chq-thumbs a { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.chq-thumbs img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border, #e5e7eb); }
.chq-thumbs small { font-size: .75rem; color: var(--muted, #6b7280); }

/* ---------- VAT report ---------- */
.vat-sum tr.b td { font-weight: 700; }
.vat-sum tr.grand td { border-top: 2px solid var(--brand-ink, #0a2a6b); font-weight: 800; font-size: 1.1rem; }
.print-only { display: none; }
@media print {
  body:not(.doc-print):not(.doc-public) .topbar, .no-print, .page-head .page-actions { display: none !important; }
  .print-only { display: block; }
  .card { box-shadow: none !important; break-inside: avoid; }
}
.seg { display: inline-flex; background: var(--gray-soft, #eef1f6); border-radius: 10px; padding: 3px; gap: 2px; }
.seg label { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: .86rem; font-weight: 600; }
.seg input { accent-color: var(--blue); }
.seg label:has(input:checked) { background: #fff; box-shadow: 0 1px 3px rgba(10, 30, 70, .12); color: var(--blue); }

/* Ledger (כרטסת) — signed-in page and shared link */
.ledger-table .ledger-open td { background: var(--gray-soft, #f3f6fb); }
.ledger-table td.num, .ledger-table td.e { white-space: nowrap; }
.ledger-due { color: var(--amber, #b45309); }
@media (max-width: 700px) {
  .ledger .grid.g-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ledger .stat { padding: 12px; } .ledger .stat b { font-size: 1.05rem; }
  /* each line becomes a small card with titled values (no sideways scrolling) */
  .ledger-table thead { display: none; }
  .ledger-table, .ledger-table tbody, .ledger-table tfoot { display: block; }
  .ledger-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .ledger-table td { display: block; padding: 0 !important; border: 0 !important; text-align: start !important; white-space: normal; }
  [dir=rtl] .ledger-table td { text-align: right !important; } [dir=ltr] .ledger-table td { text-align: left !important; }
  .ledger-table td:empty { display: none; }
  .ledger-table td[colspan] { grid-column: 1 / -1; }
  .ledger-table td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 700; color: var(--muted); }
  .ledger-table tbody td:first-child:not([colspan]) { font-weight: 700; }
  .ledger-table tr.ledger-open, .ledger-table tfoot tr { background: var(--gray-soft, #f3f6fb); }
  .ledger-table tr.ledger-open td, .ledger-table tfoot td { background: none !important; }
}

/* ================= Owner panel: grouped menu (Website / Settings / Logs) ================= */
.mainnav.admin-nav { overflow: visible; }
.nav-dd { display: flex; }
.nav-grp { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--ink-2); font: inherit; font-weight: 600; font-size: .9rem; background: none; border: 0;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent; white-space: nowrap; cursor: pointer; position: relative; }
.nav-grp:hover, .nav-dd.open .nav-grp { color: var(--brand); background: var(--surface-2); }
.nav-grp.active { color: var(--brand); background: linear-gradient(to top, var(--brand-soft), transparent 70%); }
.nav-grp.active::after { content: ''; position: absolute; inset-inline: 8px; bottom: -3px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand-grad); }
.nav-grp .caret { opacity: .6; transition: transform .15s; }
@media (max-width: 1400px) { .admin-nav .nav-grp > .ic { display: none; } }
.mainnav.tenant-nav { overflow: visible; }
/* Settings → categories: compact rows, the deductible-share list wide enough to read "100%", "2/3"… */
.cat-table td { padding: 6px 8px; vertical-align: middle; }
.cat-table input:not([type=checkbox]) { min-height: 34px; padding: 4px 10px; width: 100%; min-width: 160px; }
.cat-table select { min-height: 34px; padding: 4px 30px 4px 10px; min-width: 170px; width: auto; }
.cat-table .check { white-space: nowrap; }
/* Office / business menu is grouped (fewer items): icons stay visible; hidden only when the bar really runs out of room (nav-c1, set by common.js) */
.mainnav.tenant-nav a .ic, .mainnav.tenant-nav .nav-grp > .ic { display: inline-block; }
body.nav-c1 .mainnav.tenant-nav > a .ic, body.nav-c1 .mainnav.tenant-nav .nav-grp > .ic { display: none; }
.mainnav .nav-dd .dd-menu a .ic { display: inline-block; }
/* Phone menu: it must scroll (the open menu is a fixed panel — "overflow: visible" made the last items unreachable),
   compact rows, and the pages of each group indented under their group title */
@media (max-width: 960px) {
  .mainnav.tenant-nav { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .mainnav.tenant-nav > a, .mainnav.tenant-nav .nav-dd .dd-menu a { padding: 9px 12px; font-size: .95rem; min-height: 42px; flex-shrink: 0; }
  .mainnav.tenant-nav .nav-dd { flex-shrink: 0; }
  /* groups are an accordion: tap "Invoices" → its pages open under it; tapping another group closes it and opens the other */
  .mainnav.tenant-nav .nav-grp { pointer-events: auto; cursor: pointer; width: 100%; padding: 9px 12px; min-height: 42px; font-size: .95rem; font-weight: 600;
    text-transform: none; color: var(--ink-2); border-radius: 10px; }
  .mainnav.tenant-nav .nav-grp .caret { display: inline-block; margin-inline-start: auto; }
  .mainnav.tenant-nav .nav-grp.active { color: var(--brand); }
  .mainnav.tenant-nav .nav-dd.open .nav-grp { background: var(--surface-2); color: var(--brand); }
  .mainnav.tenant-nav .nav-dd .dd-menu { display: none; margin: 2px 0 6px; margin-inline-start: 18px; padding-inline-start: 8px; border-inline-start: 2px solid var(--line); }
  .mainnav.tenant-nav .nav-dd.open .dd-menu { display: block; }
}
body.nav-c1 .nav-grp > .ic { display: none; } body.nav-c1 .nav-grp { padding: 0 8px; } body.nav-c3 .nav-grp { padding: 0 5px; font-size: .78rem; } .nav-dd.open .nav-grp .caret { transform: rotate(180deg); }
.nav-dd .dd-menu { inset-inline-end: auto; inset-inline-start: 0; top: 100%; }
.nav-dd .dd-menu a { border: 0; font-weight: 500; font-size: .92rem; padding: 9px 10px; }
.nav-dd .dd-menu a.sel { background: var(--brand-soft); }
@media (max-width: 960px) {
  .nav-dd { flex-direction: column; }
  .nav-grp { padding: 14px 14px 4px; font-size: .78rem; text-transform: uppercase; color: var(--muted); cursor: default; pointer-events: none; }
  .nav-grp .caret, .nav-grp.active::after { display: none; } .nav-grp.active { background: none; }
  .nav-grp > .ic { display: inline-block; }
  .nav-dd .dd-menu { display: block; position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; background: none; }
  .nav-dd .dd-menu a { padding: 12px 14px; border-radius: 10px; font-size: .98rem; }
}

/* Technical-support session (platform owner inside a client account) */
.support-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 14px; background: #b45309; color: #fff; font-size: .9rem; font-weight: 600; }
.support-bar a { color: #fff; text-decoration: underline; margin-inline-start: 8px; }

/* Payment line: transfer = bank + transfer number; the date shows what it is (payment / cheque / transfer date) */
.tr-grid { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(110px, 1fr); gap: 6px; }
.tr-grid .bad-note { grid-column: 1 / -1; }
.c-date .pdl { display: block; font-size: .75rem; margin-bottom: 2px; }
.c-date .pdl[hidden] { display: none; }