/* Hand-rolled MahApps.Metro-style theme for RealEstatePOSWeb (Hebrew RTL). */

/* Text colours meet WCAG AA contrast (4.5:1) on white AND on the grey page (#f0f0f0) — IS 5568, 2026-10-19:
   the accent was #0078d7 (4.50 with white text, 3.95 on grey) and the success green #60a917 (2.92).
   accessibility.spec.mjs runs axe's contrast rule on every screen. */
:root {
    --metro-accent: #0067b8;
    --metro-accent-dark: #005a9e;
    --metro-accent-light: #2b88d8;
    --metro-bg: #f0f0f0;
    --metro-panel: #ffffff;
    --metro-text: #1b1b1b;
    --metro-muted: #6b6b6b;
    --metro-border: #cccccc;
    --metro-border-strong: #9b9b9b;
    --metro-danger: #e51400;
    --metro-success: #256a1c;
    --metro-warn: #f0a30a;
    --tile-buyer: #1ba1e2;
    --tile-seller: #647687;
    --tile-lawyer: #6a00ff;
    --tile-meetings: #00aba9;
    --metro-footer-h: 30px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: 'Segoe UI', 'Open Sans Hebrew', Arial, sans-serif;
    font-size: 14px;
    background: var(--metro-bg);
    color: var(--metro-text);
}

/* 14px (1rem) is the floor for ALL text in the app — the user's rule, 2026-10-19, measured from the
   dashboard's work-mode hint. No rule here may set a smaller size; font-floor.spec.mjs walks every screen
   and fails on any visible text below it. Form controls take the page's font: browsers default them to 13.3px. */
button, input, select, textarea { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4 { font-weight: 300; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; }
a { color: var(--metro-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- App shell ---- */
.metro-shell { display: flex; flex-direction: column; min-height: 100vh; }

.metro-appbar {
    display: flex; align-items: center; gap: 1rem;
    background: var(--metro-panel);
    color: var(--metro-text);
    padding: 0 1.25rem;
    height: 52px;
    border-bottom: 1px solid var(--metro-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.metro-appbar .title { font-size: 1.15rem; font-weight: 600; letter-spacing: .3px; color: var(--metro-accent); }
.metro-appbar .appbar-logo { height: 36px; object-fit: contain; }
.metro-appbar .appbar-logo.comsign { height: 30px; }
/* The נדל"ן Online logo doubles as the "בית" button. */
.metro-appbar .appbar-home-logo { display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; }
.metro-appbar .appbar-home-logo:hover { opacity: .8; text-decoration: none; }
.metro-appbar .spacer { flex: 1; }
.metro-appbar a { color: var(--metro-text); }

/* The tabs (2026-10-25, option א of four): icon + label, no box; the screen on display is lit in the accent
   with a bar along the bottom edge. They fill the bar's height so the bar sits on the bar's own border. Close
   together ("less space between the header links"): the room they leave is where the workspace's controls go. */
.metro-appbar .appbar-home-logo { margin-inline-end: .25rem; }
.metro-appbar .appbar-nav { display: flex; align-self: stretch; }
.metro-appbar .appbar-controls-slot { flex: 1; align-self: stretch; min-width: 0; }
.metro-appbar .appbar-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: 0 .55rem; background: none; border: none; border-radius: 0;
    font: inherit; font-size: 1.05rem; color: #3b3b3b; cursor: pointer; text-decoration: none; white-space: nowrap;
    box-shadow: inset 0 -3px 0 transparent;
    transition: background .1s ease, color .1s ease, box-shadow .1s ease;
}
.metro-appbar .appbar-tab:hover { background: #f4f7fb; color: var(--metro-accent); text-decoration: none; }
.metro-appbar .appbar-tab.active { color: var(--metro-accent); font-weight: 600; box-shadow: inset 0 -3px 0 var(--metro-accent); }
.metro-appbar .appbar-tab:focus-visible { outline: 2px solid var(--metro-accent-light); outline-offset: -2px; }
.metro-appbar .appbar-tab-icon { width: 17px; height: 17px; flex-shrink: 0; }
/* While the workspace is open its own controls (.controls-bar: the page and zoom pills, and while a signing runs
   סיום חתימה — {signer} and מציאת חתימה) sit in this band, in the room between the tabs and the user's menu
   (.appbar-controls-slot). Everything else stays as it is everywhere — the tabs keep their names ("I don't like
   seeing only icons here") and the menu its full user name (2026-10-25). appbar-tabs.spec measures it. */
.metro-appbar .appbar-sr {   /* read out, not shown */
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* The user's own things — שינוי סיסמה, יציאה — in a menu under their name (a <details>). */
.metro-appbar .appbar-user-form { margin: 0; display: flex; align-items: center; }
.metro-appbar .appbar-user { position: relative; }
.metro-appbar .appbar-user > summary {
    list-style: none; display: inline-flex; align-items: center; gap: .55rem; max-width: 14rem;
    padding: .2rem .55rem .2rem .8rem; border: 1px solid #d5dde7; border-radius: 20px;
    background: #f4f7fb; color: var(--metro-text); cursor: pointer; font-size: 1rem;
}
.metro-appbar .appbar-user > summary::-webkit-details-marker { display: none; }
.metro-appbar .appbar-user > summary:hover { background: #eaf1f9; }
.metro-appbar .appbar-user > summary:focus-visible { outline: 2px solid var(--metro-accent-light); outline-offset: 2px; }
.metro-appbar .appbar-user[open] > summary { border-color: var(--metro-accent); }
.metro-appbar .appbar-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: var(--metro-accent); color: #fff; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.metro-appbar .appbar-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metro-appbar .appbar-user-chev { flex-shrink: 0; transition: transform .15s ease; }
.metro-appbar .appbar-user[open] .appbar-user-chev { transform: rotate(180deg); }
.metro-appbar .appbar-user-menu {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 1100;   /* over the signing controls */
    min-width: 220px; max-width: 320px; padding: .35rem 0;
    background: var(--metro-panel); border: 1px solid #dde2e8; box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.metro-appbar .appbar-user-who {
    padding: .45rem 1rem .6rem; margin-bottom: .25rem; border-bottom: 1px solid #eceff3;
    color: var(--metro-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.metro-appbar .appbar-user-who b { color: var(--metro-text); font-weight: 600; }
.metro-appbar .appbar-menu-item {
    display: flex; align-items: center; gap: .6rem; width: 100%; box-sizing: border-box;
    padding: .6rem 1rem; background: none; border: none; font: inherit; text-align: start;
    color: var(--metro-text); cursor: pointer; text-decoration: none;
}
.metro-appbar .appbar-menu-item:hover { background: #f2f7fc; text-decoration: none; }
.metro-appbar .appbar-menu-item:focus-visible { outline: 2px solid var(--metro-accent-light); outline-offset: -2px; }
.metro-appbar .appbar-menu-item.danger { color: #a4262c; }
.metro-appbar .appbar-divider { width: 1px; height: 28px; background: #e1e4e8; margin: 0 .25rem; }

.metro-content { flex: 1; padding: 1.5rem; }

/* Slim global footer: build version (start) + support/legal links (end). */
.metro-footer {
    height: var(--metro-footer-h); flex: 0 0 auto;
    display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
    background: var(--metro-panel); border-top: 1px solid var(--metro-border);
    color: var(--metro-muted); font-size: 1rem; letter-spacing: .2px; overflow: hidden;
}
.metro-footer .spacer { flex: 1; }
/* Local-service (AdbForwardService) badge: a dot + version, so it reads as connection state rather
   than as a second app version. Green when the operator's machine answers, muted when it doesn't. */
.metro-footer .footer-svc { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.metro-footer .footer-svc::before {
    content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}
.metro-footer .footer-svc.ok { color: var(--metro-success, #107c10); }
.metro-footer .footer-svc.off { color: var(--metro-muted); opacity: .8; }
/* Organization licence expiry. Quiet while there is time; amber in the last month and red once it
   has run out, so an approaching expiry is noticed before it locks the office out. */
.metro-footer .footer-license { white-space: nowrap; }
.metro-footer .footer-license.soon { color: #a15c00; font-weight: 600; }
.metro-footer .footer-license.expired { color: #b00020; font-weight: 600; }
.metro-footer .footer-links { display: flex; align-items: center; gap: 1rem; white-space: nowrap; }
.metro-footer .footer-links a { color: var(--metro-muted); text-decoration: none; }
.metro-footer .footer-links a:hover { color: var(--metro-accent); text-decoration: underline; }

/* ---- Home (centered) ---- */
.home-center { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-top: 2rem; }
.home-card { width: 100%; max-width: 560px; }

/* ---- Tiles (home page) ---- */
/* Cap the width so tiles wrap into balanced rows (3 per row) instead of filling the whole
   width and leaving a lone tile on a new row — 6 tiles → 3+3, 5 → 3+2. Narrower screens
   drop to 2/1 columns naturally. */
.tile-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 560px; }
.tile {
    width: 170px; height: 170px;
    background: var(--metro-accent);
    color: #fff;
    border: none; cursor: pointer;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 14px; text-align: start;
    transition: filter .1s ease, transform .05s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.tile:hover { filter: brightness(1.08); }
.tile:active { transform: scale(.98); }
/* Icon fills the upper area and is centered both axes (label stays pinned at the
   bottom), matching the original desktop tiles. */
.tile .tile-icon { font-size: 4.4rem; line-height: 1; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.tile .tile-label { font-size: 1.05rem; font-weight: 400; }
.tile.tile-lawyers { background: var(--tile-lawyer); }
.tile.tile-participants { background: var(--tile-buyer); }
.tile.tile-settings { background: var(--tile-seller); }
.tile.tile-clear { background: var(--metro-danger); }
.tile.tile-sign { background: var(--metro-success); }
.tile.tile-users { background: var(--metro-accent-dark); }
.tile.tile-documents { background: var(--metro-warn); }
.tile.tile-disabled { opacity: .5; filter: grayscale(.6); cursor: not-allowed; }
.tile.tile-disabled:hover { filter: grayscale(.6); }
.tile.tile-disabled:active { transform: none; }
.tile .tile-hint { font-size: 1rem; font-weight: 400; margin-top: .25rem; opacity: .9; }

/* ---- Dashboard (card-style banner + tiles) ---- */
.dash-wide { width: 100%; max-width: 860px; }

/* Primary "start signing" banner */
.dash-banner {
    width: 100%; max-width: 860px;
    display: flex; align-items: center; gap: 1rem;
    background: var(--metro-panel);
    border: 1px solid var(--metro-border);
    border-inline-start: 4px solid var(--metro-accent);
    border-radius: 4px; padding: 1rem 1.25rem;
    cursor: pointer; text-align: start;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: box-shadow .12s ease, border-color .12s ease;
}
.dash-banner:hover { box-shadow: 0 3px 12px rgba(0,0,0,.13); }
.dash-banner.dash-disabled { cursor: not-allowed; opacity: .6; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.dash-banner-icon {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 6px;
    background: var(--metro-success); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.dash-banner-text { flex: 1 1 auto; min-width: 0; }
.dash-banner-title { display: block; font-size: 1.5rem; font-weight: 600; color: var(--metro-text); }
.dash-banner-sub { display: block; font-size: 1rem; color: var(--metro-muted); margin-top: .2rem; }
.dash-banner-arrow { flex: 0 0 auto; font-size: 1.6rem; color: var(--metro-accent); }

/* Tile grid (3 columns) of card tiles */
.dash-grid {
    width: 100%; max-width: 860px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.dash-tile {
    display: flex; align-items: center; gap: .8rem;
    background: var(--metro-panel);
    border: 1px solid var(--metro-border);
    border-radius: 4px; padding: 1rem;
    cursor: pointer; text-align: start;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow .12s ease, border-color .12s ease;
}
.dash-tile:hover { border-color: var(--metro-accent); box-shadow: 0 3px 12px rgba(0,0,0,.11); }
.dash-tile-text { flex: 1 1 auto; min-width: 0; }
.dash-tile-title { display: block; font-size: 1.05rem; font-weight: 600; color: var(--metro-text); }
.dash-tile-sub { display: block; font-size: 1rem; color: var(--metro-muted); margin-top: .15rem; }
.dash-tile-icon {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 6px; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.dash-tile.t-lawyers      .dash-tile-icon { background: var(--tile-lawyer); }
.dash-tile.t-participants .dash-tile-icon { background: var(--tile-buyer); }
.dash-tile.t-documents    .dash-tile-icon { background: var(--metro-warn); }
.dash-tile.t-settings     .dash-tile-icon { background: var(--tile-seller); }
.dash-tile.t-users        .dash-tile-icon { background: var(--metro-accent-dark); }
.dash-tile.t-meetings     .dash-tile-icon { background: var(--tile-meetings); }

/* Stat cards (storage in use / saved-document count) with progress bars */
.dash-stats {
    width: 100%; max-width: 860px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.dash-stat {
    background: var(--metro-panel);
    border: 1px solid var(--metro-border);
    border-radius: 4px; padding: .9rem 1rem;
}
.dash-stat-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.dash-stat-label { font-size: 1rem; color: var(--metro-muted); }
.dash-stat-value { font-size: 1.15rem; font-weight: 600; color: var(--metro-accent); white-space: nowrap; }
.dash-stat-value strong { font-weight: 700; }
.dash-bar { height: 6px; background: #e3e3e3; border-radius: 3px; margin-top: .55rem; overflow: hidden; }
.dash-bar > span { display: block; height: 100%; background: var(--metro-accent); border-radius: 3px; transition: width .2s ease; }

.dash-connected-head { font-size: 1rem; color: var(--metro-muted); border-bottom: 1px solid var(--metro-border); padding-bottom: .3rem; margin-bottom: .4rem; }

/* Pill toggle switch (used for the WiFi-scan toggle) — RTL: knob rests on the right (off),
   slides left when on. Wrap a checkbox: <span class="metro-switch"><input type=checkbox><span class="slider"></span></span> */
.metro-switch { position: relative; display: inline-block; width: 38px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.metro-switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.metro-switch .slider { position: absolute; inset: 0; background: #c8c8c8; border-radius: 20px; cursor: pointer; transition: background .15s ease; }
.metro-switch .slider::before { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .15s ease; }
.metro-switch input:checked + .slider { background: var(--metro-accent); }
.metro-switch input:checked + .slider::before { transform: translateX(-18px); }
.metro-switch input:disabled + .slider { opacity: .5; cursor: not-allowed; }

/* Connected-tablets list, grouped by USB / WiFi (dashboard work-mode panel) */
.dash-tablets { list-style: none; margin: .2rem 0 0; padding: 0; border: 1px solid var(--metro-border); border-radius: 4px; overflow: hidden; }
.dash-tablet-group { background: #f2f2f2; color: var(--metro-muted); font-size: 1rem; padding: .25rem .7rem; border-top: 1px solid var(--metro-border); }
.dash-tablet-group:first-child { border-top: none; }
.dash-tablet-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-top: 1px solid #ededed; cursor: pointer; transition: background .1s ease; }
.dash-tablet-row:hover { background: #fafafa; }
.dash-tablet-row.sel { background: #eaf3fb; box-shadow: inset 3px 0 0 var(--metro-accent); }
.dash-tablet-row .t-name { flex: 1 1 auto; min-width: 0; }
.dash-tablet-row .t-name b { font-weight: 600; color: var(--metro-text); }
.dash-tablet-row .t-name .t-sub { display: block; font-size: 1rem; color: var(--metro-muted); }
.dash-tablet-row .t-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--metro-success); }
.dash-tablet-row input[type=radio], .dash-tablet-row input[type=checkbox] { flex: 0 0 auto; margin: 0; cursor: pointer; }

/* Work-mode panel header row (title+dropdown on one side, actions on the other) */
.dash-workmode-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.dash-workmode-head .wm-title { display: flex; align-items: center; gap: .6rem; }
.dash-workmode-head .wm-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

@media (max-width: 620px) {
    .dash-grid { grid-template-columns: 1fr; }
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--metro-panel);
    color: var(--metro-text);
    border: 2px solid var(--metro-border-strong);
    padding: .4rem 1rem; cursor: pointer; font: inherit;
    border-radius: 0; transition: background .1s ease;
}
.btn:hover:not(:disabled) { background: #e9e9e9; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--metro-accent); color: #fff; border-color: var(--metro-accent); }
.btn-primary:hover:not(:disabled) { background: var(--metro-accent-dark); }
.btn-danger { background: var(--metro-danger); color: #fff; border-color: var(--metro-danger); }
.btn-danger:hover:not(:disabled) { background: #b81000; }
.btn-sm { padding: .2rem .6rem; font-size: 1rem; border-width: 1px; }
.btn-plus { font-weight: 700; font-size: 1.05em; line-height: 1; }

/* ---- Forms ---- */
.form-row { margin-bottom: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.form-row label { font-size: 1rem; color: var(--metro-muted); }
.metro-input, .metro-select {
    background: var(--metro-panel);
    border: 1px solid var(--metro-border-strong);
    padding: .45rem .55rem; font: inherit; border-radius: 0;
    color: var(--metro-text);
}
.metro-input:focus, .metro-select:focus { outline: 2px solid var(--metro-accent-light); outline-offset: -1px; }
/* Password field with a show/hide "peek" button pinned to its inline-end. The input keeps its own
   sizing; the button overlays it, so the field lines up with the other inputs in the grid. */
.pw-field { position: relative; display: flex; }
.pw-field .metro-input { flex: 1; padding-inline-end: 2.1rem; }
.pw-field .pw-peek {
    position: absolute; inset-inline-end: 1px; top: 1px; bottom: 1px; width: 2rem;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1;
    color: var(--metro-muted); padding: 0;
}
.pw-field .pw-peek:hover { background: var(--metro-hover, #f0f0f0); }

.metro-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.metro-check input { width: 18px; height: 18px; accent-color: var(--metro-accent); }

/* ---- Panels & cards ---- */
.metro-panel {
    background: var(--metro-panel);
    border: 1px solid var(--metro-border);
    padding: 1.25rem;
}
.metro-toolbar {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: var(--metro-panel); border: 1px solid var(--metro-border);
    padding: .5rem .75rem; margin-bottom: .75rem;
}
.metro-toolbar .sep { width: 1px; align-self: stretch; background: var(--metro-border); margin: 0 .25rem; }

/* ---- Tables ---- */
.metro-table { width: 100%; border-collapse: collapse; background: var(--metro-panel); }
.metro-table th, .metro-table td { text-align: start; padding: .55rem .7rem; border-bottom: 1px solid var(--metro-border); }
.metro-table thead th { background: #f7f7f7; font-weight: 600; border-bottom: 2px solid var(--metro-border-strong); }
.metro-table tbody tr:hover { background: #f3f8fd; }

/* ---- Saved-documents browser: folders, drag-and-drop, pagination ---- */
.saved-toolbar { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; flex-wrap: wrap; }
.saved-breadcrumb { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .5rem; font-size: 1rem; }
.saved-breadcrumb .crumb { cursor: pointer; padding: .1rem .4rem; border-radius: 2px; color: var(--metro-accent); }
.saved-breadcrumb .crumb:hover { text-decoration: underline; }
.saved-breadcrumb .crumb-sep { color: var(--metro-muted); }
/* draggable rows + folder affordances */
.saved-table tbody tr[draggable="true"] { cursor: grab; }
.saved-table .folder-row .folder-name { font-weight: 600; }
.saved-table .folder-name-cell { cursor: pointer; }
/* "shared with other users" badge on a folder name */
.saved-table .share-badge { margin-inline-start: .35rem; font-size: 1em; opacity: .8; }
/* drop target highlight (folder rows + breadcrumb crumbs) */
.saved-table tr.drop-hover > td { background: #dff0d8 !important; box-shadow: inset 0 0 0 2px var(--metro-accent); }
.saved-breadcrumb .crumb.drop-hover { background: #dff0d8; box-shadow: inset 0 0 0 2px var(--metro-accent); }
/* footer: page-size selector + pager + quota */
.saved-footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .55rem; }
.saved-pagesize { display: flex; align-items: center; gap: .4rem; }
.saved-pagesize label { font-size: 1rem; color: var(--metro-muted); }
.saved-pagesize .metro-select { padding: .2rem .4rem; font-size: 1rem; }
.saved-pager { display: flex; align-items: center; gap: .5rem; }
.saved-count { font-size: 1rem; margin-inline-start: auto; }
.saved-breadcrumb .crumb-divider { width: 1px; align-self: stretch; min-height: 1.2em; background: var(--metro-border); margin: 0 .5rem; }

/* ---- Templates toolbar: three strips, not one wall of buttons ----
   What you can DO (buttons), where you ARE (a path — links, never buttons), and what you have
   SELECTED (a contextual bar that only exists while there is a selection). They previously shared one
   class and ran together, so the breadcrumb read as just more buttons. */
.tpl-actions { margin-bottom: .4rem; }
.tpl-crumbs { margin: 0 0 .7rem; padding-bottom: .45rem; border-bottom: 1px solid var(--metro-border); }
/* The folder you are already in: a label, not somewhere to click. */
.saved-breadcrumb .crumb.current { color: var(--metro-text); font-weight: 600; cursor: default; }
.saved-breadcrumb .crumb.current:hover { text-decoration: none; }
/* Selection bar — same accent-tinted panel idiom as .remote-panel, so it reads as "state", not chrome. */
.sel-bar {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    margin: 0 0 .7rem; padding: .35rem .6rem; font-size: 1rem;
    background: #eef6ff; border: 1px solid var(--metro-accent); border-radius: 4px;
}
.sel-bar .btn { padding: .25rem .7rem; font-size: 14px; font-weight: 400; line-height: 1.5; }
.sel-bar .crumb-divider { width: 1px; align-self: stretch; min-height: 1.2em; background: var(--metro-border); margin: 0 .35rem; }
/* Pushes "clear selection" away from the actions, so it can't be hit while reaching for מחיקה. */
.sel-bar-spacer { flex: 1 1 auto; }
/* A text action among buttons: dismissing a selection isn't an operation on the documents. */
.btn.btn-link { background: none; border: none; color: var(--metro-accent); padding: .25rem .4rem; }
.btn.btn-link:hover:not(:disabled) { background: none; text-decoration: underline; }
.btn.btn-link:disabled { color: var(--metro-muted); }
/* right-click row context menu */
.ctx-backdrop { position: fixed; inset: 0; z-index: 1100; }
.ctx-menu {
    position: fixed; z-index: 1101; min-width: 150px;
    background: var(--metro-panel); border: 1px solid var(--metro-border-strong);
    box-shadow: 0 4px 16px rgba(0,0,0,.25); padding: .25rem 0;
    /* Anchored with its left edge at the cursor; shift left by its own width so the menu
       opens to the LEFT of the cursor (natural for the RTL layout, avoids clipping). */
    transform: translateX(-100%);
}
.ctx-menu .ctx-item {
    display: block; width: 100%; text-align: start; background: none; border: none;
    padding: .4rem .9rem; font: inherit; color: var(--metro-text); cursor: pointer; white-space: nowrap;
}
.ctx-menu .ctx-item:hover:not(:disabled) { background: #f3f8fd; }
.ctx-menu .ctx-item.danger { color: var(--metro-danger); }
.ctx-menu .ctx-item:disabled { opacity: .45; cursor: not-allowed; }

/* folder-share dialog: scrollable user checklist */
.share-user-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--metro-border); padding: .35rem .5rem; }
.share-user-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .1rem; cursor: pointer; }
.share-user-row:hover { background: #f3f8fd; }

/* ---- Dialog / modal ---- */
.metro-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.metro-dialog {
    background: var(--metro-panel); min-width: 320px; max-width: min(720px, 92vw); width: fit-content;
    max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.metro-dialog .dlg-title {
    background: var(--metro-accent); color: #fff; padding: .7rem 1.1rem;
    font-size: 1.1rem; font-weight: 300;
    display: flex; align-items: center; justify-content: space-between;
}
.metro-dialog .dlg-title .close { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; }
.metro-dialog .dlg-body { padding: 1.1rem; overflow: auto; min-width: 280px; }
.metro-dialog .dlg-actions { padding: .8rem 1.1rem; border-top: 1px solid var(--metro-border); display: flex; gap: .6rem; justify-content: flex-start; }

/* ---- EULA acceptance gate (blocking) + standalone view ---- */
.eula-overlay { z-index: 2000; }
.eula-dialog { width: 880px; max-width: 94vw; height: 88vh; max-height: 88vh; }
.eula-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.4rem; }
.eula-accept-bar {
    border-top: 1px solid var(--metro-border); padding: .8rem 1.1rem;
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; background: var(--metro-panel);
}
.eula-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; }
.eula-check input { width: 1.1rem; height: 1.1rem; }

/* EULA document typography (RTL) — shared by the gate and the /eula page */
.eula-doc { line-height: 1.6; color: var(--metro-text); }
.eula-doc .eula-head { text-align: center; margin-bottom: 1rem; }
.eula-doc .eula-head h2 { margin: 0; }
.eula-doc .eula-head h3 { margin: .2rem 0; font-weight: 400; }
.eula-doc .eula-meta { color: var(--metro-muted); font-size: 1rem; }
.eula-doc h4 { margin: 1.1rem 0 .4rem; border-bottom: 1px solid var(--metro-border); padding-bottom: .2rem; }
.eula-doc .eula-appx-title { margin-top: 1.6rem; text-align: center; }
.eula-doc .eula-sub { font-weight: 600; margin: .6rem 0 .2rem; }
.eula-doc p { margin: .5rem 0; }
.eula-doc ul { margin: .4rem 0; padding-inline-start: 1.4rem; }
.eula-doc li { margin: .25rem 0; }

/* Standalone /eula view page (EmptyLayout) */
.eula-page { max-width: 920px; margin: 0 auto; padding: 1rem; }
.eula-page-bar {
    position: sticky; top: 0; z-index: 1; background: var(--metro-accent); color: #fff;
    display: flex; align-items: center; justify-content: space-between; padding: .7rem 1.1rem; font-size: 1.05rem;
}
.eula-page-body { padding: 1rem 1.2rem; background: var(--metro-panel); border: 1px solid var(--metro-border); }

/* preview modal page-nav + zoom controls */
.preview-nav { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; margin-inline-end: .6rem; font-size: 1rem; }

/* ---- Documents / Templates tab bar ---- */
/* Consistent spacing between action buttons in any table cell (some markup had no whitespace
   between buttons -> flush; a flex cell gives a uniform gap regardless). */
.metro-table td:has(> .btn) { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* Documents-manager tabs — distinct class names from the signing workspace's .doc-tab(s)
   (open-document tabs) to avoid the style collision that shrank these + added a gray band. */
.docmgr-tabs { display: flex; align-items: center; gap: .5rem; border-bottom: 2px solid var(--metro-border); margin-bottom: .85rem; background: none; }
.docmgr-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: .5rem 1.3rem; font: inherit; font-size: 1.4rem; font-weight: 300; cursor: pointer; color: var(--metro-muted); margin-bottom: -2px; }
.docmgr-tab:hover { color: var(--metro-text); }
.docmgr-tab.active { color: var(--metro-accent); border-bottom-color: var(--metro-accent); font-weight: 600; }
/* חזרה (and any button in the tab bar) matches the app-bar link buttons (e.g. יציאה) */
.docmgr-tabs .btn { padding: .25rem .7rem; font-size: 14px; font-weight: 400; line-height: 1.5; }

/* ---- Template editor (pdf.js + field boxes) ---- */
/* component-based editor: a normal in-page screen (keeps the app header/footer). Toolbar on top,
   then the PDF viewer (left) + named-fields list (right). The <pdf-signing-app> wrapper .pdf-host is
   position:absolute; inset:0 (shared signing CSS), so .tf-viewer MUST be position:relative + sized —
   otherwise the component escapes and covers the toolbar. Its signing statusbar is hidden in JS. */
.tf-editor { display: flex; flex-direction: column; }
.tf-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .4rem 0; }
/* editor toolbar buttons uniform height (like the "חזרה" button) */
.tf-toolbar .btn { padding: .25rem .7rem; font-size: 14px; font-weight: 400; line-height: 1.5; }
.tf-toolbar .metro-input { height: 30px; box-sizing: border-box; padding: .15rem .4rem; }
.tf-split { display: flex; gap: .75rem; align-items: stretch; }
.tf-viewer { position: relative; flex: 1; min-width: 0; height: 72vh; border: 1px solid var(--metro-border); overflow: hidden; background: var(--metro-panel); }
/* loading overlay while the template PDF loads into the component */
.tf-loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: .5rem; background: rgba(255,255,255,.9); color: var(--metro-muted); font-size: 1.05rem; }
.tf-spinner { width: 20px; height: 20px; border: 3px solid #ccc; border-top-color: var(--metro-accent); border-radius: 50%; display: inline-block; animation: tf-spin .8s linear infinite; }
@keyframes tf-spin { to { transform: rotate(360deg); } }
/* master-detail: field-names list + a properties panel for the selected field */
.tf-fields { width: 180px; flex: 0 0 180px; height: 72vh; border: 1px solid var(--metro-border); overflow-y: auto; background: var(--metro-panel); box-sizing: border-box; }
.tf-props { width: 240px; flex: 0 0 240px; height: 72vh; border: 1px solid var(--metro-border); overflow-y: auto; background: var(--metro-panel); box-sizing: border-box; }
.tf-fields-head { font-weight: 600; padding: .5rem; border-bottom: 1px solid var(--metro-border); background: #f5f5f5; position: sticky; top: 0; }
.tf-name-row { display: flex; align-items: center; gap: .4rem; padding: .45rem .55rem; border-bottom: 1px solid var(--metro-border); cursor: pointer; }
.tf-name-row:hover { background: #f3f8fd; }
.tf-name-row.selected { background: #e5f1fb; font-weight: 600; }
.tf-name-row .tf-drag-handle { cursor: grab; color: var(--metro-muted); user-select: none; }
.tf-name-dropzone { min-height: 30px; }
/* draggable column dividers between the viewer / fields list / properties panel */
.tf-resizer { flex: 0 0 6px; align-self: stretch; cursor: col-resize; background: transparent; }
.tf-resizer:hover { background: var(--metro-border-strong); }
.tf-prop { display: flex; flex-direction: column; gap: .25rem; padding: .45rem .6rem; border-bottom: 1px solid var(--metro-border); }
.tf-prop label { font-size: 1rem; color: var(--metro-muted); }
.tf-prop.tf-prop-row { flex-direction: row; align-items: center; gap: .6rem; }
.tf-prop .tf-color { width: 3rem; padding: 0; height: 28px; }
/* buttons in a property row keep their natural width (not stretched full-width) */
.tf-prop .btn { align-self: flex-start; }

/* toolbar action buttons (תיקייה חדשה / העלאת PDF) sized like the app-bar link buttons (יציאה) */
.saved-breadcrumb .btn { padding: .25rem .7rem; font-size: 14px; font-weight: 400; line-height: 1.5; }
.tf-editor-host { border: 1px solid var(--metro-border); background: #e9e9e9; max-height: 70vh; overflow: auto; padding: 8px; display: flex; justify-content: center; }
.tf-canvas-wrap { position: relative; box-shadow: 0 1px 6px rgba(0,0,0,.25); align-self: flex-start; }
.tf-canvas-wrap canvas { display: block; }
.tf-overlay { position: absolute; inset: 0; }
.tf-box { position: absolute; box-sizing: border-box; border: 1.5px solid var(--metro-accent); background: rgba(0,120,215,.12); cursor: move; }
.tf-box .tf-name { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: transparent; font-size: 14px; padding: 0 2px; box-sizing: border-box; text-align: start; }
.tf-box .tf-name:focus { outline: 1px solid var(--metro-accent); background: #fff; }
.tf-box .tf-del { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; line-height: 16px; border-radius: 50%; border: none; background: var(--metro-danger); color: #fff; cursor: pointer; font-size: 14px; padding: 0; }
.tf-box .tf-resize { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; background: var(--metro-accent); cursor: nwse-resize; }
.tf-overlay.placing { cursor: crosshair; }
.tf-draw { position: absolute; box-sizing: border-box; border: 1.5px dashed var(--metro-accent); background: rgba(0,120,215,.10); pointer-events: none; }
.tf-toolbar .primary.placing { box-shadow: 0 0 0 2px var(--metro-accent); }

/* Native <dialog> confirm (e.g. the logout prompt): reuses the metro-dialog look but lets the UA
   handle centering + backdrop. .metro-dialog's display:flex would defeat the UA's closed-state
   display:none, so re-hide explicitly when not [open]. */
dialog.metro-confirm { border: none; padding: 0; }
dialog.metro-confirm:not([open]) { display: none; }
dialog.metro-confirm::backdrop { background: rgba(0,0,0,.45); }

/* ---- Misc ---- */
.muted { color: var(--metro-muted); }
.text-danger { color: var(--metro-danger); }
.text-success { color: var(--metro-success); }
.badge { display: inline-block; padding: .1rem .5rem; font-size: 1rem; background: #e0e0e0; }
.badge.accent { background: var(--metro-accent); color: #fff; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--metro-danger); }
.status-dot.on { background: var(--metro-success); }
.alert { padding: .6rem .9rem; margin-bottom: .9rem; border-inline-start: 4px solid var(--metro-accent); background: #eef6fd; }
.alert.alert-danger { border-color: var(--metro-danger); background: #fdeceb; }
.alert.alert-success { border-color: var(--metro-success); background: #eef7e6; }
/* Not an error — something the operator should notice and may want to act on (e.g. documents left
   out of a remote-signing session because the signer has no field in them). */
.alert.alert-warn { border-color: var(--metro-warn); background: #fdf6e3; }

/* ---- Sign page (compact side-panel layout) ---- */
/* Break out of the .metro-content padding so the document gets maximum space. */
.sign-layout { display: flex; flex-direction: row; height: calc(100vh - 52px - var(--metro-footer-h)); margin: -1.5rem; }

/* Vertical button panel on the side (right, since the app is RTL). */
.sign-sidebar {
    width: 178px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 5px;
    padding: 6px; overflow-y: auto;
    background: #f3f3f3; border-inline-start: 1px solid var(--metro-border);
}
/* Uniform-size buttons. */
.sidebar-btn {
    width: 100%; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: flex-start; gap: 0;
    background: #fff; color: var(--metro-text);
    border: 1px solid #cfcfcf; border-radius: 3px;
    font: inherit;   /* match the app-bar "בית" button (14px body font) — was .82rem */
    padding: 0 12px; cursor: pointer; text-align: start;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .1s ease;
}
/* Allow a long label (e.g. "עצור חתימה — <name>") to wrap onto two lines instead of clipping. */
.sidebar-btn.wrap { white-space: normal; overflow: visible; text-overflow: clip; height: auto; min-height: 40px; line-height: 1.2; padding-top: 4px; padding-bottom: 4px; }
.sidebar-btn:hover:not(:disabled) { background: #eaeaea; border-color: #adadad; }
.sidebar-btn:disabled { color: #bcbcbc; border-color: #e4e4e4; background: #fff; cursor: not-allowed; }
.sidebar-btn.primary { border-color: var(--metro-accent); color: var(--metro-accent); font-weight: 600; }
.sidebar-btn.toggled { border-color: var(--metro-success); background: #f1faec; }
.sidebar-select {
    width: 100%; height: 34px; flex-shrink: 0;
    background: #fff; color: var(--metro-text);
    border: 1px solid #cfcfcf; border-radius: 3px;
    font-family: 'Segoe UI', 'Open Sans Hebrew', Arial, sans-serif; font-size: 1rem;
    padding: 0 4px; cursor: pointer;
}
.sidebar-select:disabled { color: #bcbcbc; background: #fff; }
.sidebar-sep { height: 1px; background: #dcdcdc; margin: 3px 2px; flex-shrink: 0; }
.sidebar-status {
    margin-top: auto; padding-top: 6px; font-size: 1rem; color: var(--metro-muted);
    display: flex; flex-direction: column; gap: 4px;
}
.sidebar-status .row { display: flex; align-items: center; gap: .4rem; }

/* Status dot shown inline on a sidebar button (red=off, green=on). */
.btn-dot {
    width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
    margin-inline-start: auto; /* push the dot to the far (left, in RTL) edge so dots line up */
    background: radial-gradient(circle at 35% 30%, #ff6a6a, #d11414 70%);
    box-shadow: 0 0 2px rgba(0,0,0,.3);
}
.btn-dot.on { background: radial-gradient(circle at 35% 30%, #7CFC7C, #2ea82e 70%); }

/* Page-push progress shown INSIDE the share-screen button: the label+dot stay on the
   first row, and a thin bar + count wrap onto a second row (flex-basis:100%). The button
   grows to fit (height:auto) only while a push is in flight (.has-progress). */
.sidebar-btn.has-progress { flex-wrap: wrap; height: auto; min-height: 40px; row-gap: 3px; padding-bottom: 5px; }
.btn-progress { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; }
.btn-progress-track { width: 100%; height: 4px; background: #e2e2e2; border-radius: 2px; overflow: hidden; }
.btn-progress-fill { display: block; height: 100%; background: var(--metro-success); border-radius: 2px; transition: width .2s ease; }
.btn-progress-label { font-size: 1rem; color: var(--metro-muted); white-space: nowrap; }

.sign-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.sign-doc { flex: 1; min-height: 0; position: relative; background: #525659; }

/* Privacy cover for a "שליחה לצפייה" link: the participant reads the document on their own
   device, so it is not left on the operator's screen at the same time. The viewer underneath is
   covered rather than unmounted - it is what streams the pages to the reader. */
.viewonly-cover {
    position: absolute; inset: 0; z-index: 6;
    background: #525659;
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.viewonly-card {
    background: var(--metro-panel); border: 1px solid var(--metro-border); border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    padding: 1.6rem 2rem; max-width: 460px; text-align: center;
}
.viewonly-icon { font-size: 2.6rem; line-height: 1; }
.viewonly-title { font-size: 1.25rem; font-weight: 600; margin-top: .6rem; }
.viewonly-sub { margin-top: .4rem; color: var(--metro-text); }
.viewonly-note { margin-top: .6rem; font-size: 1rem; color: var(--metro-muted); }
.viewonly-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1.1rem; }
.pdf-host { position: absolute; inset: 0; }
.sign-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; color: #cfcfcf; }

/* Control cluster — page nav + zoom pills side by side. Lifted into the top app-bar band
   (fixed, vertically inline with "בית") so it no longer covers the document tab strip below.
   Safe on the dashboard: Home wraps <SignWorkspace> in a display:none div when not signing,
   which removes this fixed subtree entirely. */
.controls-bar {
    position: fixed; top: 0;
    /* Exactly over the room the app bar leaves free between the tabs and the user's menu, and centred in it —
       that room depends on the screen and on the user's name, so app.js measures it (fitControlsBar). */
    left: var(--appbar-slot-left, 0px); width: var(--appbar-slot-width, 100%);
    box-sizing: border-box; justify-content: center;
    height: 52px;                 /* == .metro-appbar height → vertically centre within the bar */
    z-index: 1000; display: flex; align-items: center; gap: .5rem;
    pointer-events: none;         /* transparent gaps don't intercept app-bar clicks */
}
/* When that room is too narrow — a small screen while a signing runs ("סיום חתימה — {signer}" and "מציאת חתימה"
   join the pills) — app.js says so (html.controls-below) and they take a row of their own right under the bar,
   the whole width, and the workspace starts that much lower: nothing is drawn over the tabs, and nothing over the
   document tabs either (why the controls left that strip, 2026-07-19). Only while there are controls. */
html.controls-below .controls-bar {
    top: 52px; left: 0; width: 100%; height: 40px; padding-inline: 1rem;
    background: #f7f8fa; border-bottom: 1px solid #e1e4e8;
}
html.controls-below .controls-bar:not(:has(> *)) { display: none; }
html.controls-below .sign-layout:has(.controls-bar > *) {
    margin-top: calc(40px - 1.5rem);
    height: calc(100vh - 52px - 40px - var(--metro-footer-h));
}
.controls-bar > * { pointer-events: auto; flex-shrink: 0; }
/* Flat Metro control pill (zoom cluster): white, thin border, segments split by 1px dividers,
   square borderless buttons. Shared shape with .page-bar below. */
.zoom-bar {
    display: flex; align-items: stretch; height: 32px;
    background: #fff; border: 1px solid var(--metro-border);
    border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.14); overflow: hidden;
}
.zoom-bar > * + * { border-inline-start: 1px solid var(--metro-border); }
.zoom-bar .zoom-label { font-size: 1rem; color: var(--metro-muted); display: flex; align-items: center; padding: 0 .6rem; }
.zoom-bar .zoom-btn {
    width: 34px; border: none; border-radius: 0; background: #fff; color: var(--metro-text);
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.zoom-bar .zoom-btn:hover:not(:disabled) { background: #f0f0f0; }
.zoom-bar .zoom-btn:disabled { opacity: .4; cursor: default; }
/* Desktop-parity zoom / page-size dropdown (100%–130% + A4–A0). */
.zoom-bar .zoom-select {
    border: none; border-radius: 0; background: #fff; color: var(--metro-text);
    padding: 0 .7rem; font-size: 1rem; cursor: pointer; text-align: center; min-width: 74px;
}
.zoom-bar .zoom-select:disabled { opacity: .55; cursor: default; }

/* Drag & drop overlay — shown on .sign-main while a PDF file is dragged over the workspace. */
.drop-overlay {
    position: absolute; inset: 0; z-index: 70; display: none;
    align-items: center; justify-content: center;
    background: rgba(0,120,215,.12); border: 3px dashed var(--metro-accent);
    pointer-events: none;
}
.sign-main.drag-over .drop-overlay { display: flex; }
/* ניהול מסמכים page: same PDF drop affordance on its panel */
.docs-drop { position: relative; }
.docs-drop.drag-over { outline: 3px dashed var(--metro-accent); outline-offset: -3px; }
.docs-drop.drag-over .drop-overlay { display: flex; }
.drop-overlay-box {
    background: #fff; color: var(--metro-accent); font-weight: 700; font-size: 1.05rem;
    padding: 1rem 1.6rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

/* "אשר שדות" pill in the centered controls bar — shown only while unset fields exist. */
.confirm-fields-btn {
    cursor: pointer; font-size: 1rem; font-weight: 600;
    color: #fff; background: var(--metro-accent, #1a73e8);
    border: 1px solid var(--metro-accent, #1a73e8);
    padding: 6px 16px;
}
.confirm-fields-btn:hover:not(:disabled) { filter: brightness(.95); }
.confirm-fields-btn:disabled { opacity: .5; cursor: default; }

/* Signing actions relocated into the centered controls bar (next to the page numbers): the
   prominent green "finish signing" and the blue "find next signature" pills. */
.finish-sign-btn {
    cursor: pointer; font-size: 1rem; font-weight: 700; white-space: nowrap;
    color: #fff; background: #107c10; border: 1px solid #0b5e0b; padding: 6px 16px; gap: .25rem;
    border-radius: 3px;   /* near-square, not the .zoom-bar pill */
}
.finish-sign-btn:hover:not(:disabled) { filter: brightness(.95); }
/* Signatures still outstanding: the button reads as unavailable (grey, no green "you're done"
   signal) but stays clickable, because it opens the "what is still unsigned" confirmation rather
   than finishing. A truly disabled button would trap an operator whose signer cannot sign a field. */
.finish-sign-btn.blocked {
    color: #605e5c; background: #e1dfdd; border-color: #c8c6c4; font-weight: 600;
}
.finish-sign-btn.blocked:hover { background: #d2d0ce; filter: none; }
.find-sig-btn {
    cursor: pointer; font-size: 1rem; font-weight: 600; white-space: nowrap;
    color: #fff; background: var(--metro-accent, #1a73e8);
    border: 1px solid var(--metro-accent, #1a73e8); padding: 6px 16px;
    border-radius: 3px;   /* near-square, not the .zoom-bar pill */
}
.find-sig-btn:hover:not(:disabled) { filter: brightness(.95); }
.find-sig-btn:disabled { opacity: .5; cursor: default; }

/* Edit dialogs — wider with a two-column form on wide screens. */
.wide-form-dialog { width: min(760px, 94vw); max-width: 94vw; }
.two-col-form { display: grid; grid-template-columns: 1fr; gap: .35rem 1.5rem; }
@media (min-width: 640px) { .two-col-form { grid-template-columns: 1fr 1fr; } }
/* Rows that should run the full width under the two columns (checkboxes, file pickers). */
.two-col-form .metro-check,
.two-col-form .span-2 { grid-column: 1 / -1; }
/* Optional grouped block inside a form (e.g. the organization "שם מודפס" fields) — a light rule
   and a legend so it reads as a related set rather than four more loose inputs. */
.form-subsection {
    border: 1px solid var(--metro-border); border-radius: 3px;
    margin: .5rem 0 0; padding: .2rem .9rem .7rem;
}
.form-subsection > legend { font-size: 1rem; color: var(--metro-muted); padding: 0 .35rem; }

/* Page navigation pill — sits next to the zoom pill in the centered controls bar.
   Reuses the zoom-btn look for the prev/next buttons. */
.page-bar {
    display: flex; align-items: stretch; height: 32px;
    background: #fff; border: 1px solid var(--metro-border);
    border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.14); overflow: hidden;
}
.page-bar > * + * { border-inline-start: 1px solid var(--metro-border); }
.page-bar .page-label {
    display: inline-flex; align-items: center; gap: .35rem; padding: 0 .7rem;
    font-size: 1rem; color: var(--metro-text); white-space: nowrap;
}
.page-bar .page-of { color: var(--metro-muted); }
.page-bar .page-input {
    width: 3rem; text-align: center; font: inherit; font-size: 1rem;
    border: 1px solid var(--metro-border); border-radius: 3px; padding: 1px 4px;
}
.page-bar .zoom-btn {
    width: 34px; border: none; border-radius: 0; background: #fff; color: var(--metro-text);
    font-size: 1rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.page-bar .zoom-btn:hover:not(:disabled) { background: #f0f0f0; }
.page-bar .zoom-btn:disabled { opacity: .4; cursor: default; }

/* Document tabs (multi-document) — compact strip at the top of the doc area. */
.doc-tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 4px 6px 0; background: #ececec; flex-shrink: 0; }
.doc-tab {
    display: inline-flex; align-items: center; gap: .35rem; max-width: 200px;
    background: #dcdcdc; border: 1px solid var(--metro-border); border-bottom: none;
    padding: .25rem .6rem; cursor: pointer; font: inherit; font-size: 1rem;
    border-radius: 3px 3px 0 0;
}
.doc-tab:not(:disabled):hover { background: #e8e8e8; }
.doc-tab.active { background: var(--metro-panel); border-top: 2px solid var(--metro-accent); font-weight: 600; }
/* Locked while signing: tabs are not switchable. Dim the others; keep the active one sharp. */
.doc-tab:disabled { cursor: default; opacity: .5; }
.doc-tab.active:disabled { opacity: 1; }
/* Outside a remote-signing session: this document has no unsigned field for the signer, so it isn't
   part of the session and can't be reached while it runs. Greyed harder than a merely-disabled tab,
   and struck through, so "not part of this signing" reads differently from "temporarily locked". */
.doc-tab.muted-tab, .doc-tab.muted-tab:disabled { opacity: .35; background: #eee; text-decoration: line-through; }
.doc-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.doc-tab-pages { color: var(--metro-muted); font-size: 1rem; font-weight: 400; }
.doc-tab-close { margin-right: -.1rem; padding: 0 .15rem; border-radius: 3px; font-size: 1rem; line-height: 1; color: var(--metro-muted); font-weight: 400; }
.doc-tab-close:hover { background: rgba(0,0,0,.15); color: #c00; }
.doc-tab-type { font-size: 1rem; background: var(--metro-accent); color: #fff; border-radius: 3px; padding: 0 .2rem; font-weight: 700; }

/* Save split-button in the sidebar */
.save-btn-group { position: relative; display: flex; gap: 0; width: 100%; }
.save-btn-group .save-main { flex: 1; border-radius: 3px 0 0 3px; }
.save-btn-group .save-arrow { width: 34px; padding: 0; border-radius: 0 3px 3px 0; border-right: none; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; }
/* Dropdown caret on full-width sidebar split buttons (הוסף חתימה / התחל חתימה). */
.sidebar-btn .caret { font-size: 1.15rem; margin-inline-start: .35rem; vertical-align: middle; display: inline-block; }
.save-menu { position: absolute; top: 100%; right: 0; left: 0; background: #fff; border: 1px solid var(--metro-border); box-shadow: 0 3px 8px rgba(0,0,0,.15); z-index: 100; min-width: 148px; }
.save-menu button { display: block; width: 100%; padding: .4rem .6rem; text-align: right; background: none; border: none; cursor: pointer; font-size: 1rem; }
.save-menu button:hover:not(:disabled) { background: var(--metro-hover, #f0f0f0); }
.save-menu button:disabled { opacity: .4; cursor: default; }

/* Participant picker popup (הוסף חתימה / התחל חתימה): a centred modal with a live search
   box, replacing the long bottom-anchored dropdown so big participant lists are usable. */
.picker-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 1000; }
.picker-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    /* Wide enough for the widest row: a name, a ת"ז and THREE actions (local / remote / view-only).
       It was 420px back when a row carried one action, and the row outgrew the box; 640px until the 14px
       text floor (2026-10-19) made the buttons and the ת"ז bigger and the long name was ellipsised again. */
    width: min(760px, 94vw); max-height: 70vh; z-index: 1001;
    background: #fff; border: 1px solid var(--metro-border); border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25); display: flex; flex-direction: column;
}
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .6rem .8rem; border-bottom: 1px solid var(--metro-border); font-weight: 600; }
.picker-close { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--metro-muted); line-height: 1; }
.picker-search { margin: .6rem .8rem; }
.picker-list { overflow: auto; padding: 0 .4rem .5rem; }
.picker-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; padding: .5rem .6rem; text-align: right; background: none;
    border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }
.picker-item:hover:not(:disabled) { background: var(--metro-hover, #f0f0f0); }
.picker-item:disabled { opacity: .4; cursor: default; }
/* A participant row carries its own actions (local / remote signing), so the row itself is a plain
   container rather than a button — the buttons inside are what click. */
.picker-row { cursor: default; }
.picker-row:hover { background: var(--metro-hover, #f0f0f0); }
/* The name column takes the slack and gives it back: it is the only part of the row that may
   shrink, so the buttons never get crushed however long a participant's name is. */
.picker-who { display: flex; align-items: baseline; gap: .5rem; min-width: 0; flex: 1 1 auto; }
.picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-actions { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.picker-actions .btn { white-space: nowrap; }
/* On a phone the three actions cannot share a line with the name at any sane font size, so the row
   becomes two lines rather than three cramped columns. */
@media (max-width: 560px) {
    .picker-row { flex-wrap: wrap; }
    .picker-actions { width: 100%; justify-content: flex-start; }
}
/* ת"ז on the row's inline-end, so a search by ID number shows what it matched. */
.picker-id { color: var(--metro-muted); font-size: 1rem; direction: ltr; white-space: nowrap; }
.picker-empty { padding: .8rem; color: var(--metro-muted); font-size: 1rem; }

/* Two-column form layout for dialogs on wide screens (e.g. the new/edit user modal). */
.metro-dialog.form-wide { min-width: 560px; max-width: 92vw; }
.form-grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 540px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }

/* הגדרות: four titled groups, two per row on a wide screen and one column on a narrow one. The dialog
   used to be ~400px with everything in one column; on a wide screen that wasted the width and made the
   operator scroll for the last options. */
.metro-dialog.settings-dialog { width: min(880px, 94vw); max-width: 94vw; }
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem 2rem; }
@media (min-width: 760px) { .settings-grid { grid-template-columns: 1fr 1fr; } }
.settings-section { min-width: 0; display: flex; flex-direction: column; gap: .65rem; }
.settings-section h3 {
    margin: 0 0 .1rem; padding-bottom: .3rem; border-bottom: 1px solid var(--metro-border);
    font-size: 1rem; font-weight: 600; color: var(--metro-accent-dark); letter-spacing: .02em;
}
.settings-section .metro-check, .settings-section .form-row { margin-bottom: 0; }
.settings-nested { padding-inline-start: 1.65rem; }
.settings-inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.settings-inline label { font-size: inherit; color: inherit; }
.settings-num { width: 5.5rem; font-variant-numeric: tabular-nums; }
.settings-num:disabled { background: var(--metro-bg); color: var(--metro-muted); cursor: not-allowed; }   /* backup off */
.settings-select { align-self: flex-start; min-width: 9.5rem; }
.settings-hint { font-size: 1rem; color: var(--metro-muted); line-height: 1.45; }
.settings-saved { margin-inline-start: auto; align-self: center; color: var(--metro-muted); }

/* הגדרות → פגישות ועידה: one line per provider - name, who is connected, connect / disconnect. */
.integration-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.integration-row .integration-name { font-weight: 600; min-width: 6.5rem; }
.integration-row .integration-state { flex: 1 1 auto; color: var(--metro-muted); min-width: 0; overflow-wrap: anywhere; }
.integration-row .integration-state.on { color: var(--metro-success); }

/* הגדרות: no text smaller than the options themselves (1rem = 14px) - the user's rule, 2026-10-18. The
   titles, hints and account lines above were 11-12px beside 14px options. These classes are shared with
   other screens, where they stay smaller; only this dialog is held to it. */
.settings-dialog .form-row label,
.settings-dialog .settings-hint,
.settings-dialog .btn-sm { font-size: 1rem; }

/* פגישות ועידה */
.meetings-table .meeting-desc { white-space: pre-wrap; max-width: 320px; overflow-wrap: anywhere; }
.meetings-table tr.meeting-past td { color: var(--metro-muted); }
.meetings-table .meeting-cell-buttons { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; white-space: nowrap; }
.meetings-table .meeting-cell-buttons .meeting-badge { margin-inline-end: 0; }
.meeting-badge {
    display: inline-block; font-size: 1rem; font-weight: 600; line-height: 1.5;
    padding: 0 .45rem; border-radius: 3px; margin-inline-end: .35rem;
    background: #e8e8e8; color: #444; vertical-align: middle;
}
.meeting-badge.zoom   { background: #e6f0ff; color: #0b5cff; }
.meeting-badge.google { background: #e6f4ea; color: #137333; }
.meeting-badge.past   { margin-inline-start: .35rem; }
/* The new meeting's "קישור לפגישה": only what can be used now, as two columns of plain choices. */
.meeting-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.5rem; }
.meeting-kinds .metro-check { grid-column: auto; margin: 0; gap: .6rem; padding: .3rem .4rem; border-radius: 2px; cursor: pointer; }   /* auto: not .two-col-form's full width */
.meeting-kinds .metro-check:hover { background: #f2f7fc; }
@media (max-width: 640px) { .meeting-kinds { grid-template-columns: minmax(0, 1fr); } }
/* "לאפשר הקלטה" sits beside the duration select: a blank line where the select has its label, then the
   tick-box filling the rest of the cell, so it centres on the select (2026-10-22: it sat on the label's line).
   One column (narrow screen) has nothing beside it, so no blank line there. */
.meeting-recording-row .metro-check { margin: 0; flex: 1; }
.meeting-recording-row .form-row-spacer { display: none; }
@media (min-width: 640px) { .meeting-recording-row .form-row-spacer { display: block; } }

/* "חיבור" to Zoom / Google, in the meeting dialog, הגדרות and the remote-signing dialog: an <a> (the popup
   opens inside the click — meeting-integrations.js) that IS the app's own small primary button, `btn btn-sm
   btn-primary` — rectangular like every other one. It was a rounded pill, and stood out (the user, 2026-10-18).
   Only what a link adds is undone here: the hover underline. */
.meeting-connect, .meeting-connect:hover { text-decoration: none; white-space: nowrap; }

/* Blazor's "אירעה שגיאה" bar: hidden until Blazor shows it on an error. GLOBAL on purpose — both layouts
   render it, and while this rule sat in MainLayout.razor.css (scoped) the bar stood permanently on every
   EmptyLayout page: the login, the remote-signing page, /about and /privacy (seen 2026-10-18). */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* /about — the public home page (no login): what the app is and how it uses Google data. */
.about-page { max-width: 860px; margin: 1.5rem auto 2.5rem; padding: 0 16px; display: flex; flex-direction: column; gap: 1rem; }
.about-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.about-hero h1 { margin: .4rem 0 0; font-size: 2rem; }
.about-hero h1:focus { outline: none; }   /* Blazor focuses the first h1 on navigation */
.about-brand { margin-bottom: .5rem; gap: 2.5rem; }
.about-brand .brand-logo { height: 72px; }
.about-lead { margin: 0 0 .6rem; color: var(--metro-muted); font-size: 1.05rem; }
/* Reading pages (about, privacy, the Zoom guide, the accessibility statement) read above the 14px floor:
   15px text, and section headings that do not vanish in the site's light weight 300 (2026-10-19). */
.about-section { font-size: 1.07rem; }
.about-section h2 { margin-top: 0; font-size: 1.35rem; font-weight: 400; }
.about-section h3 { font-size: 1.15rem; font-weight: 600; margin: 1.1rem 0 .4rem; }
.about-section ul { margin: .4rem 0 0; padding-inline-start: 1.3rem; line-height: 1.7; }
.about-section p { line-height: 1.7; }
.about-limited-use { margin-bottom: 0; font-size: 1rem; color: var(--metro-muted); }
/* A link inside running text is underlined, not told apart by colour alone (WCAG 1.4.1, 2026-10-19). */
p a:not(.btn), .about-page li a { text-decoration: underline; }
.about-footer { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; font-size: 1rem; color: var(--metro-muted); }

/* The remote-signing dialog's "video meeting with the signer" line. */
.remote-meeting {
    margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--metro-border);
    display: flex; gap: .4rem; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 1rem;
}
/* Its tick-box ("לאפשר הקלטה") sits on the buttons' line: .metro-check's bottom margin is for a stacked form,
   and in a centred row it counted in the centring and lifted the box above the buttons (2026-10-21). */
.remote-meeting .metro-check { margin: 0; }

/* Blocking loading overlay — shown while uploading / processing a document so the
   operator can't interact mid-load. */
.loading-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center;
}
.loading-box {
    background: #fff; border-radius: 8px; padding: 1.6rem 2.2rem;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.35); min-width: 260px;
}
.loading-spinner {
    width: 42px; height: 42px; border-radius: 50%;
    border: 4px solid #e0e0e0; border-top-color: var(--metro-accent);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 1rem; color: var(--metro-text); text-align: center; }

/* Determinate progress for the long reads. A spinner says "wait"; this says "wait THIS much", which
   is the difference between a slow upload and one the operator reports as frozen. */
.loading-bar {
    width: 240px; max-width: 60vw; height: 6px; border-radius: 3px;
    background: var(--metro-border); overflow: hidden;
}
.loading-bar-fill {
    height: 100%; background: var(--metro-accent);
    transition: width .2s linear;
}
.loading-sub { font-size: 1rem; color: var(--metro-muted); direction: ltr; }
/* Tablet-lost blocker: sits UNDER the busy overlay (2000) and the smart-card dialog (2100) so a
   cert prompt raised during signing stays reachable, but still covers the whole workspace. */
.tablet-lost-overlay { z-index: 1900; }
.tablet-lost-overlay .loading-box { border-top: 4px solid var(--metro-warn); max-width: 420px; }
.loading-spinner.warn { border-top-color: var(--metro-warn); }

/* Toast alerts — temporary, dismissible, fixed near the very top of the viewport
   (above the document/controls so they never overlap the page-nav pills). */
/* Top corner on the inline-END side: left in Hebrew (RTL), right in LTR. Sits just below
   the 52px app-bar. */
.toast-host {
    position: fixed; top: 60px; inset-inline-end: 12px;
    z-index: 1100; display: flex; flex-direction: column; gap: 6px; width: min(420px, 80%);
}
.toast {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem .85rem; font-size: 1rem;
    background: #eef6fd; border-inline-start: 4px solid var(--metro-accent);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.toast.err { border-color: var(--metro-danger); background: #fdeceb; }
.toast.ok  { border-color: var(--metro-success, #2e7d32); background: #e8f6ea; }
.toast .x { background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; color: inherit; padding: 0 0 0 .5rem; }

/* ---- Brand banner (נדל"ן Online + comsign, from the original app) ---- */
.brand-banner { direction: ltr; display: flex; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.5rem; }
.brand-banner .brand-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.brand-banner .brand-logo { height: 64px; object-fit: contain; object-position: left bottom; }
.brand-banner .brand-col:last-child .brand-logo { object-position: right bottom; }
.brand-banner .bar { height: 8px; border-radius: 1px; }
.brand-banner .bar.teal { background: #16897a; }
.brand-banner .bar.blue { background: #3f9ae0; }
.brand-banner.compact .brand-logo { height: 40px; }

/* Connected-tablets list on the home screen. */
.tablet-list { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tablet-list li { display: flex; align-items: center; gap: .5rem; font-size: 1rem; padding: .2rem .4rem; border-radius: 4px; transition: background .15s; }
.tablet-list li:hover { background: var(--metro-hover, #f0f0f0); }
.tablet-list li.tablet-selected { background: #e8f4ff; border: 1px solid var(--metro-accent); }

.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { width: 360px; }
.validation-message, .text-danger { color: var(--metro-danger); font-size: 1rem; }

/* ---- Remote signing (public virtual-tablet page; mobile + desktop) ---- */
.vtablet-root { position: fixed; inset: 0; width: 100%; height: 100%; background: #1b1b1b; overflow: hidden; }
.remote-error-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.remote-error-card { width: 100%; max-width: 420px; text-align: center; }
.remote-error-card .brand-logo { max-width: 180px; margin-bottom: .75rem; }
.remote-error-card h2 { margin: .25rem 0; }

/* ---- Operator sidebar remote-signing panel ---- */
.remote-panel { display: flex; flex-direction: column; gap: .35rem; padding: .45rem; background: #eef6ff; border: 1px solid var(--metro-accent); border-radius: 4px; }
.remote-panel-title { font-weight: 600; font-size: 1rem; }
/* The session's video call in the side panel: reachable after the dialog closes (it does, as the signer connects). */
.remote-panel-meeting { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: 1rem;
    border-top: 1px solid rgba(0,0,0,.08); padding-top: .3rem; }
/* One link over several documents: a row per document, each with its own connection dot — the
   signer's page opens one socket per document and they come up one at a time. */
.remote-doc-list { display: flex; flex-direction: column; gap: .15rem; border-top: 1px solid rgba(0,0,0,.08); padding-top: .3rem; }
.remote-doc-row { display: flex; align-items: center; gap: .3rem; font-size: 1rem; }
.remote-doc-row.active { font-weight: 600; }
.remote-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-qr-lg { width: 220px; height: 220px; background: #fff; padding: 6px; border: 1px solid var(--metro-border); border-radius: 4px; }
.remote-link { font-size: 1rem; direction: ltr; text-align: left; width: 100%; }

/* ---- The remote-signing dialog: wide, two columns — sending beside the QR (operator's choice, 2026-10-21) ---- */
.metro-dialog.remote-dialog { width: min(860px, 94vw); max-width: 94vw; }
.remote-status {
    display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap;
    padding: .6rem 1.1rem; background: #f4f6f8; border-bottom: 1px solid var(--metro-border);
}
.remote-state { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.remote-state .loading-spinner { width: 18px; height: 18px; border-width: 3px; }
.remote-docs { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.remote-doc-chip { background: var(--metro-panel); border: 1px solid var(--metro-border); padding: .1rem .55rem; }
.remote-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.6rem; align-items: start; }
.remote-send { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.remote-h { margin: 0; font-size: 1.1rem; font-weight: 600; }
.remote-send-grid { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .55rem .6rem; align-items: center; }
.remote-send-grid label { color: var(--metro-muted); }
.remote-send-grid .btn { justify-content: center; white-space: nowrap; }
.ltr-input { direction: ltr; text-align: left; }
.remote-hint { margin: 0; }
.remote-sent { color: var(--metro-success); }
.remote-or { display: flex; align-items: center; gap: .8rem; color: var(--metro-muted); }
.remote-or::before, .remote-or::after { content: ""; flex: 1; height: 1px; background: var(--metro-border); }
.remote-qr-card { margin: 0; border: 1px solid var(--metro-border); padding: .9rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.remote-qr-card .remote-qr-lg { width: 210px; height: 210px; }
.remote-qr-card figcaption { text-align: center; color: var(--metro-muted); line-height: 1.45; }
.remote-dialog .remote-meeting { justify-content: flex-start; margin-top: 1rem; padding-top: .8rem; }
.remote-actions { align-items: center; }
.remote-actions-gap { flex: 1; }
/* An action that ends something for someone else: outlined, in a red that still reads at 4.5:1 on white. */
.btn-danger-outline { color: #b81000; border-color: #b81000; }
.btn-danger-outline:hover:not(:disabled) { background: #fdecea; }
@media (max-width: 760px) {
    .remote-grid { grid-template-columns: 1fr; }
    .remote-send-grid { grid-template-columns: minmax(0, 1fr) auto; }
    .remote-send-grid label { grid-column: 1 / -1; }
}

/* ---- תפריט נגישות (js/a11y-widget.js) — on every page, the client's signing page included ----------------
   A tab on the screen's edge (left, or right after "העברת התפריט") opens the menu; every choice is an a11y-*
   class on <html>, styled below. Its own sizes are rem, so the text-size setting enlarges the menu too. */
/* The root is a zero-size fixed layer with NO transform: a transformed ancestor would trap the fixed panel. */
.a11y-widget { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 2147483000;
    font-family: 'Segoe UI', 'Open Sans Hebrew', Arial, sans-serif; font-size: 1rem; color: #1b1b1b; line-height: 1.4; }
.a11y-open { position: fixed; left: 0; top: 50%; margin-top: -24px;
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
    background: var(--metro-accent); color: #fff; border: 2px solid #fff; border-left: none; border-radius: 0 6px 6px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; }
.a11y-side-right .a11y-open { left: auto; right: 0; border-left: 2px solid #fff; border-right: none; border-radius: 6px 0 0 6px; }
.a11y-open:hover { background: var(--metro-accent-dark); }
.a11y-widget :focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; }
.a11y-panel { position: fixed; top: 0; bottom: 0; left: 0; width: min(25rem, 100vw); display: flex; flex-direction: column;
    background: #f4f6f9; border-right: 1px solid #9b9b9b; box-shadow: 4px 0 28px rgba(0,0,0,.3); }
.a11y-side-right .a11y-panel { left: auto; right: 0; border-right: none; border-left: 1px solid #9b9b9b; box-shadow: -4px 0 28px rgba(0,0,0,.3); }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; background: var(--metro-accent); color: #fff; }
.a11y-head h2 { flex: 1; margin: 0; text-align: center; font-size: 1.2rem; font-weight: 600; }
.a11y-head button { display: flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem;
    background: none; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; color: #fff; font-size: 1.15rem; cursor: pointer; }
.a11y-head button:hover { background: rgba(255,255,255,.15); }
.a11y-body { flex: 1; overflow: auto; padding: .8rem; display: flex; flex-direction: column; gap: .8rem; }
.a11y-card { background: #fff; border: 1px solid #c9ced6; border-radius: 6px; padding: .75rem; }
.a11y-card h3 { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 600; }
.a11y-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.a11y-tabs button { padding: .3rem .7rem; border: 1px solid #9b9b9b; border-radius: 0; background: #fff; color: #1b1b1b; cursor: pointer; }
.a11y-tabs button[aria-selected="true"] { background: var(--metro-accent); border-color: var(--metro-accent); color: #fff; font-weight: 600; }
.a11y-stepper { display: flex; align-items: center; gap: .45rem; }
.a11y-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* the selected tab already shows it */
.a11y-stepper button { width: 2.5rem; height: 2.5rem; border: none; border-radius: 0; background: var(--metro-accent); color: #fff;
    font-size: 1.3rem; font-weight: 700; line-height: 1; cursor: pointer; }
.a11y-stepper button:disabled { background: #b8bec7; cursor: default; }
.a11y-meter { flex: 1; height: .6rem; border-radius: 999px; background: #e3e7ed; overflow: hidden; }
.a11y-meter-fill { display: block; height: 100%; background: var(--metro-accent); }
.a11y-step-value { min-width: 3.2rem; text-align: center; font-weight: 600; }
.a11y-link-btn { margin-top: .5rem; padding: 0; background: none; border: none; color: var(--metro-accent); text-decoration: underline; cursor: pointer; }
.a11y-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.a11y-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 5.6rem;
    padding: .45rem .3rem; border: 1px solid #c9ced6; border-radius: 6px; background: #fff; color: #1b1b1b; text-align: center; cursor: pointer; }
.a11y-tile svg { color: var(--metro-accent); }
.a11y-tile:hover { border-color: var(--metro-accent); }
.a11y-tile[aria-pressed="true"], .a11y-tile[aria-expanded="true"] { background: var(--metro-accent); border-color: var(--metro-accent); color: #fff; font-weight: 600; }
.a11y-tile[aria-pressed="true"] svg, .a11y-tile[aria-expanded="true"] svg { color: #fff; }
.a11y-structure { margin-top: .6rem; border-top: 1px solid #c9ced6; padding-top: .5rem; }
.a11y-structure ul { margin: 0; padding: 0; list-style: none; }
.a11y-structure button { width: 100%; padding: .35rem .4rem; background: none; border: none; text-align: right; color: var(--metro-accent); text-decoration: underline; cursor: pointer; }
.a11y-foot { display: flex; align-items: center; justify-content: space-around; gap: .5rem; flex-wrap: wrap; padding: .7rem .9rem; background: var(--metro-accent); }
.a11y-foot button, .a11y-foot a { padding: .25rem .4rem; background: none; border: none; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; }

/* ---- what each choice does ---- */
/* Font: the app's sizes are rem, so the root carries them; body restates its own 14px. */
html.a11y-text-1, html.a11y-text-1 body { font-size: 16px; }
html.a11y-text-2, html.a11y-text-2 body { font-size: 18px; }
html.a11y-text-3, html.a11y-text-3 body { font-size: 21px; }
html.a11y-lh-1 body * { line-height: 1.8 !important; }
html.a11y-lh-2 body * { line-height: 2.2 !important; }
html.a11y-lh-3 body * { line-height: 2.7 !important; }
html.a11y-ws-1 body * { word-spacing: .16em !important; }
html.a11y-ws-2 body * { word-spacing: .32em !important; }
html.a11y-ws-3 body * { word-spacing: .5em !important; }
html.a11y-ls-1 body * { letter-spacing: .05em !important; }
html.a11y-ls-2 body * { letter-spacing: .1em !important; }
html.a11y-ls-3 body * { letter-spacing: .16em !important; }
/* Colours. The filters compose: each choice contributes its part, and with none of them the declaration is
   empty and so ignored. A filter on the ROOT keeps fixed elements fixed. */
html.a11y-invert { --a11y-f-invert: invert(1) hue-rotate(180deg); background: #fff; }
html.a11y-gray { --a11y-f-gray: grayscale(1); }
html.a11y-satlow { --a11y-f-sat: saturate(.45); }
html.a11y-sathigh { --a11y-f-sat: saturate(2); }
html.a11y-invert, html.a11y-gray, html.a11y-satlow, html.a11y-sathigh { filter: var(--a11y-f-invert,) var(--a11y-f-gray,) var(--a11y-f-sat,); }
/* A native <dialog> opened with showModal() is drawn in the browser's top layer, outside <html>'s filter, so
   it is repeated there: the logout confirmation and the reconnect notice are such dialogs (found by the
   ComSignDNS port of this menu, 2026-10-20). */
html.a11y-invert dialog[open], html.a11y-gray dialog[open], html.a11y-satlow dialog[open], html.a11y-sathigh dialog[open] {
    filter: var(--a11y-f-invert,) var(--a11y-f-gray,) var(--a11y-f-sat,); }
/* Inverted: pictures, the document pages and the PDF component turn back, so a signature or a page is never
   shown in negative. */
html.a11y-invert img, html.a11y-invert video, html.a11y-invert canvas, html.a11y-invert pdf-signing-app { filter: invert(1) hue-rotate(180deg); }
/* High contrast: black text and borders, darker accents, every link underlined — the PDF component too (the
   outer document's custom properties win over its :host defaults). */
html.a11y-contrast {
    --metro-text: #000; --metro-muted: #000; --metro-border: #000; --metro-border-strong: #000;
    --metro-bg: #fff; --metro-panel: #fff; --metro-accent: #003a70; --metro-accent-dark: #00264a;
    --metro-success: #0b4a0b; --metro-danger: #a30000;
}
html.a11y-contrast pdf-signing-app { --fg: #000; --fg-muted: #000; --border: #000; --accent: #003a70; }
html.a11y-contrast a { text-decoration: underline; }
/* Content and navigation. */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 2px; font-weight: 700 !important; }
html.a11y-headings :is(h1, h2, h3, h4, h5, h6):not(.a11y-widget *) { outline: 2px solid #b07d00; outline-offset: 2px; background: #fff3c4; }
html.a11y-font body, html.a11y-font body * { font-family: Arial, Helvetica, sans-serif !important; }
html.a11y-bigbtn :is(button, .btn, input[type=button], input[type=submit]):not(.a11y-widget *) { min-height: 2.75rem; min-width: 2.75rem; font-size: 1.1rem; }
html.a11y-hover :is(a, button, input, select, textarea, [role=button], [tabindex]):hover { outline: 3px solid #b07d00 !important; outline-offset: 2px; }
html.a11y-focus :focus, html.a11y-keys :focus { outline: 3px solid #ffbf00 !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #000 !important; }
html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-cursorblack, html.a11y-cursorblack * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M4 2 L4 32 L12 25 L18 38 L23 36 L17 23 L28 23 Z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important; }
html.a11y-cursorwhite, html.a11y-cursorwhite * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M4 2 L4 32 L12 25 L18 38 L23 36 L17 23 L28 23 Z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important; }
/* Reading guide: a bar under the line being read. Reading mask: dims all but a band around it. Both follow
   the mouse and never take a click. */
.a11y-guide-line { position: fixed; left: 0; right: 0; height: 6px; margin-top: 12px; background: #ffbf00; border-top: 2px solid #000;
    z-index: 2147482999; pointer-events: none; }
.a11y-mask { position: fixed; left: 0; right: 0; background: rgba(0,0,0,.55); z-index: 2147482999; pointer-events: none; }
.a11y-mask-top { top: 0; height: 0; }
.a11y-mask-bottom { bottom: 0; top: 100vh; }
/* ---- navigation (התאמות ניווט) ---- */
/* Hidden from the eye, read by a screen reader: the menu's live regions. */
.a11y-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* The skip link: the first thing Tab reaches on every page, seen only while it has focus. */
.a11y-skip { position: fixed; top: -200px; right: 50%; margin-right: -8rem; width: 16rem; z-index: 2147483001; padding: .7rem 1rem;
    background: #000; color: #fff !important; border: 3px solid #ffbf00; border-radius: 6px; text-align: center; font-size: 1.05rem; font-weight: 600; }
.a11y-skip:focus { top: .6rem; }
.a11y-tile[hidden], .a11y-voice[hidden], .a11y-voice-help[hidden] { display: none; }
.a11y-tile[aria-disabled="true"] { opacity: .55; cursor: default; }
.a11y-tile[aria-disabled="true"]:hover { border-color: #c9ced6; }
/* The one line that explains the tile under the pointer or the keyboard. Four lines are kept for it, the
   longest note, so the card never jumps as the pointer moves. */
.a11y-hint { margin: .6rem 0 0; min-height: 5.6em; padding-top: .55rem; border-top: 1px solid #c9ced6; color: #333; }
.a11y-hint b { color: #1b1b1b; }
/* What is being read aloud. */
.a11y-reading { outline: 3px dashed #b07d00 !important; outline-offset: 3px; background-color: rgba(255, 191, 0, .2) !important; }
/* Listening for voice commands: always on screen while the microphone is in use. */
.a11y-voice { position: fixed; bottom: .8rem; left: .8rem; max-width: min(26rem, calc(100vw - 1.6rem)); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
    padding: .55rem .8rem; background: #1b1b1b; color: #fff; border: 2px solid #ffbf00; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.a11y-side-right .a11y-voice { left: auto; right: .8rem; }
.a11y-voice-dot { width: .8rem; height: .8rem; border-radius: 50%; background: #e81123; animation: a11y-pulse 1.4s ease-in-out infinite; }
@keyframes a11y-pulse { 50% { opacity: .35; } }
.a11y-voice-text { font-weight: 600; }
.a11y-voice-why { flex-basis: 100%; color: #e6e6e6; }
.a11y-voice a { color: #9fd0ff; text-decoration: underline; }
.a11y-voice-heard { flex-basis: 100%; color: #ffd75e; }
.a11y-voice-heard:empty { display: none; }
.a11y-voice button { padding: .25rem .6rem; background: none; border: 1px solid #fff; border-radius: 4px; color: #fff; cursor: pointer; font: inherit; }
.a11y-voice button:hover { background: rgba(255,255,255,.15); }
.a11y-voice-help { flex-basis: 100%; margin: .2rem 0 0; padding: .4rem 0 0; list-style: none; border-top: 1px solid #555; display: flex; flex-direction: column; gap: .2rem; }