/* =================================================================
 * main.css — RTL base styles + theme variables
 * =================================================================
 * Theme variables centralize colors and sizing.
 *
 * Theme selection (per-user, stored as ui.theme in user_settings):
 *   "auto"  → no [data-theme] attribute on <html>; the media query
 *             at the bottom of this section follows the OS preference.
 *   "light" → <html data-theme="light">; same as :root defaults.
 *   "dark"  → <html data-theme="dark">; the dark overrides apply.
 *
 * Status pills, inline-styled cards in views, and other hard-coded
 * colors stay light — only the chrome that uses these variables flips.
 * Improving the per-component dark contrast is a follow-up.
 */

:root {
    --color-bg:           #f5f7fa;
    --color-surface:      #ffffff;
    --color-text:         #1a202c;
    --color-text-muted:   #5e6a78;  /* A7: darkened from #718096 (~4.0:1) → ~5.1:1 on white for WCAG AA */
    --color-border:       #e2e8f0;
    --color-primary:      #2d3748;
    --color-primary-text: #ffffff;
    --color-accent:       #3182ce;
    --color-accent-hover: #2b6cb0;
    --color-success:      #0a8a3a;
    --color-danger:       #c53030;
    --color-warning:      #d69e2e;
}

/* Explicit dark theme — user chose "חשוך" in personal settings. */
[data-theme="dark"] {
    --color-bg:           #0f172a;
    --color-surface:      #1e293b;
    --color-text:         #f1f5f9;
    --color-text-muted:   #94a3b8;
    --color-border:       #334155;
    --color-primary:      #020617;
    --color-primary-text: #f1f5f9;
    --color-accent:       #60a5fa;
    --color-accent-hover: #93c5fd;
}

/* Auto theme — no explicit attribute, follow OS dark-mode preference. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --color-bg:           #0f172a;
        --color-surface:      #1e293b;
        --color-text:         #f1f5f9;
        --color-text-muted:   #94a3b8;
        --color-border:       #334155;
        --color-primary:      #020617;
        --color-primary-text: #f1f5f9;
        --color-accent:       #60a5fa;
        --color-accent-hover: #93c5fd;
    }
}

:root {

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    --sidebar-width: 240px;
    --header-height: 56px;

    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Rubik", "Arial Hebrew", Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    direction: rtl;
}

/* Native <select> in this RTL UI. Many selects are width:100%, so the OS
   dropdown renders full-width and the (short) RTL option text pins to the far
   edge — that's the "escaping to the other side". Capping the width keeps the
   control AND its native dropdown a sane size (the popup matches the control's
   width). Global, so it fixes every over-wide select at once. max-width only
   ever shrinks over-wide selects — narrower ones are untouched. RTL alignment
   kept; the inherited dir="ltr" on specific fields still wins by specificity. */
select {
    direction: rtl;
    text-align: right;
    max-width: 30rem;
}
select option {
    direction: rtl;
}
a {
    color: var(--color-accent);
    text-decoration: none;
}
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* Sub-tab buttons (.kv-tab). When inactive, the panel JS resets their inline
   color to '' — without a base color they fall to the UA button-default black,
   invisible in dark mode. Give them the theme text color; the active tab still
   gets an inline accent color (which wins over this). */
.kv-tab { color: var(--color-text); }

/* ---------- Layout ---------- */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    /* Grow the header row by the top safe-area inset (status bar / notch) so the
       OS status bar sits ABOVE the header content instead of over the menu
       buttons. env() is 0 on desktop/browser → no visual change there; it only
       engages inside the app (Android 15 edge-to-edge / notched devices). */
    grid-template-rows: calc(var(--header-height) + env(safe-area-inset-top)) 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar main";
    min-height: 100vh;
}

.app-header {
    grid-area: header;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 var(--space-lg);
    /* Push the header CONTENT below the status bar (paired with the taller
       header row above). 0 on desktop → unchanged. */
    padding-top: env(safe-area-inset-top);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}

.app-header h1 {
    font-size: 1rem;
    font-weight: 600;
}

.app-header .header-actions {
    margin-inline-start: auto;
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.app-sidebar {
    grid-area: sidebar;
    background: var(--color-primary);
    color: var(--color-primary-text);
    padding: var(--space-md) 0;
    /* Pin to the viewport so a long page scrolls the MAIN content, not the menu.
       align-self:start stops the grid item stretching to the full page height
       (which would let sticky never engage and the nav scroll off into the void). */
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
}

.app-sidebar .brand {
    padding: 0 var(--space-lg) var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-md);
    font-weight: 700;
    font-size: 1rem;
}

.app-sidebar nav ul { list-style: none; }
.app-sidebar nav li a {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.app-sidebar nav li a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}
.app-sidebar nav li a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-inline-start: 3px solid var(--color-accent);
}

.app-main {
    grid-area: main;
    padding: var(--space-lg);
    overflow-y: auto;
}

.app-footer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    padding: var(--space-md);
}

/* ---------- Card / Surface ---------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--space-md); }
/* …but that stacking margin must NOT leak into card GRIDS/FLEX rows: there it offsets
   every card after the first inside an equal-height row, making the first card look
   taller/"bigger". Cancel it when the cards are children of an inline grid/flex box.
   Higher specificity (attribute + 2 classes) than `.card + .card`, so it always wins. */
[style*="display:grid"]  > .card + .card,
[style*="display: grid"] > .card + .card,
[style*="display:flex"]  > .card + .card,
[style*="display: flex"] > .card + .card { margin-top: 0; }
.card h2 { margin-bottom: var(--space-md); font-size: 1.125rem; }

/* ---------- Status pills ---------- */
.pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}
.pill-ok      { background: #d1fae5; color: #064e3b; }
.pill-down    { background: #fee2e2; color: #7f1d1d; }
.pill-pending { background: #fef3c7; color: #78350f; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-hover); color: #fff; text-decoration: none; }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }

/* AI document-upload widget (customer form): a styled file picker so the native
   control doesn't look bare. The ::file-selector-button becomes a proper button. */
.kv-ai-upload { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.kv-ai-upload input[type="file"] {
    flex: 1 1 240px; min-width: 0; max-width: 100%;
    padding: 0.35rem 0.5rem; font: inherit;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: #fff; color: var(--color-text); cursor: pointer;
}
.kv-ai-upload input[type="file"]::file-selector-button {
    margin-inline-end: 0.6rem; padding: 0.4rem 0.9rem;
    border: 0; border-radius: var(--radius-sm);
    background: var(--color-accent); color: #fff; font: inherit; cursor: pointer;
}
.kv-ai-upload input[type="file"]::file-selector-button:hover { background: var(--color-accent-hover); }

/* ---------- Mobile responsive ---------- */
@media (max-width: 768px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main";
    }
    .app-sidebar {
        position: fixed;
        inset-inline-start: 0;
        /* Open below the header, which is now taller by the top safe-area inset
           (status bar). env() is 0 on desktop → the drawer is unchanged there. */
        top: calc(var(--header-height) + env(safe-area-inset-top));
        /* EXPLICIT height — NOT top+bottom+height:auto. Some Android WebViews don't
           compute a scrollable height from top/bottom, so overflow never engages and the
           drawer won't scroll. A concrete height makes the overflow container unambiguous.
           dvh tracks the dynamic mobile viewport; the vh line is the fallback. */
        height: calc(100vh - var(--header-height) - env(safe-area-inset-top));
        height: calc(100dvh - var(--header-height) - env(safe-area-inset-top));
        width: var(--sidebar-width);
        transform: translateX(100%);  /* RTL: hide off-screen to the right */
        transition: transform 0.2s;
        z-index: 20;
        /* Touch scrolling inside the drawer (Android/iOS WebView) + momentum, and pad the
           bottom past the device nav-bar / safe area so the last items scroll into view. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    }
    .app-sidebar.open { transform: translateX(0); }
}

/* ---------- Loading state ---------- */
.is-loading {
    pointer-events: none;
    opacity: 0.6;
}

/* ---------- A11y (Phase 11.2d) ---------- */
/* Skip-to-main-content link — invisible by default, visible on keyboard focus.
   Lets keyboard / screen-reader users bypass the sidebar nav on every page. */
.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: auto;
    z-index: 100;
    background: #1d4ed8;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0 0 6px 6px;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus {
    inset-inline-start: 1rem;
    top: 0;
}

/* Strong focus indicator — Chrome's default outline is too thin for
   accessibility. 3px solid + offset visible on every interactive element. */
:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
    border-radius: 2px;
}
.btn:focus-visible {
    outline-offset: 3px;
}

/* Visually-hidden helper — text only readable by screen readers. Use it
   to add context to icon-only buttons, e.g. <button aria-label="..."> or
   <span class="sr-only">. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Honor reduced-motion preference for users who get sick from animations. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Map feature (Phase A) ───────────────────────────────────────────── */
.kv-map-blocklabel span {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #1e3a5f;
    background: rgba(255, 255, 255, 0.7);
    padding: 0 4px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%);
}
.kv-map-label {
    font-size: 12px;
    direction: rtl;
}
/* Area-grave caption — text that sits ON the shape, no floating tooltip box.
   Strips Leaflet's default white background / border / shadow / pointer so a
   tiny 1×2 m area-grave shows a clean centered label instead of a bubble. */
.kv-map-agtag,
.kv-map-agtag.leaflet-tooltip {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    font-size: 10px;
    line-height: 1.05;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    direction: rtl;
    white-space: nowrap;
    text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 1px #fff;
    pointer-events: none;
}
.kv-map-agtag::before,
.kv-map-agtag::after { display: none !important; }

/* (Old per-layer .kv-tf* transform handles removed — the amber
   group outline (.kv-gh*) now handles single + multi-selection
   resize/rotate.) */

/* Area-grave caption — anchored at the TOP-RIGHT corner, flowing down-left,
   font scaled to the shape (set inline by placeAgLabel), never overflowing. */
/* Edit-management menu (snapshots / reset / grid) — shown only in edit mode */
.kv-editmenu {
    background: #fff; border: 1px solid #94a3b8; border-radius: 8px;
    padding: 8px 10px; box-shadow: 0 1px 6px rgba(0,0,0,.18);
    font-size: .85rem; min-width: 196px; max-width: 240px; direction: rtl;
    display: flex; flex-direction: column; gap: 8px;
}
.kv-em-title { font-weight: 700; font-size: .92rem; }
.kv-em-sec { border-top: 1px solid #e2e8f0; padding-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.kv-em-sec:first-of-type { border-top: 0; padding-top: 0; }
.kv-em-h { font-weight: 600; color: #475569; font-size: .8rem; }
.kv-em-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kv-em-row input[type=text] { flex: 1; min-width: 0; }
.kv-em-row input[type=number] { width: 46px; }
.kv-em-row select { flex: 1; min-width: 0; }
.kv-em-check { gap: 6px; }
.kv-em-btn {
    background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 5px;
    padding: 4px 9px; cursor: pointer; font: inherit; font-size: .82rem;
}
.kv-em-btn:hover { background: #e2e8f0; }
.kv-em-danger { color: #b91c1c; border-color: #fca5a5; }
.kv-em-danger:hover { background: #fee2e2; }

/* Per-grave caption (owner / deceased) — centered in the cell, rotates with
   it, font scaled to the cell (set inline by placeGraveLabel), hidden when
   the cell is too small to read. */
.kv-gravelabel { background: transparent; border: 0; }
.kv-gravelabel .kv-gravelabel-in {
    position: absolute;
    top: 0; left: 0;                 /* anchored at the cell centroid */
    transform-origin: center center;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    direction: rtl;
    font-weight: 400;                /* thinner — the deceased/owner name */
    letter-spacing: -.03em;          /* condensed so more of the name fits */
    line-height: 1.0;
    color: #1f2937;
    text-shadow: 0 0 2px #fff, 0 0 3px #fff;
    pointer-events: none;
}
/* Per-grave TOP caption (row + full grave name, e.g. "שורה 9 / 24א") — small,
   light, muted; NOT bold. Sits above the occupant name. Font set inline. */
.kv-gravecap { background: transparent; border: 0; }
.kv-gravecap .kv-gravecap-in {
    position: absolute;
    top: 0; left: 0;
    transform-origin: center center;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    direction: rtl;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.02;
    color: #64748b;                  /* muted — clearly de-emphasized */
    text-shadow: 0 0 2px #fff, 0 0 3px #fff;
    pointer-events: none;
}

/* Leaflet container should inherit our font + sit under modals. */
#kvMap .leaflet-container { font-family: inherit; }

/* Grave popup: DRAGGABLE. The white fill + thin gray border + tail are painted as ONE
   continuous SVG outline (.kv-popup-bubble) BEHIND the content — so the box and the tail
   share a single seamless border (no line crosses the junction) and the tail stretches to
   reach the grave. The content wrapper itself is transparent and sits above that SVG. */
#kvMap .leaflet-popup-content-wrapper {
    background: transparent; box-shadow: none;
    position: relative; z-index: 1; cursor: move;
}
#kvMap .leaflet-popup-tip { display: none; }   /* replaced by the SVG tail */
/* Close button is a SIBLING of the (now z-index:1) wrapper — lift it above so the
   transparent wrapper doesn't swallow the click and the × actually closes the popup. */
#kvMap .leaflet-popup-close-button { z-index: 2; }
#kvMap .kv-popup-bubble {
    position: absolute; left: 0; top: 0; overflow: visible;
    pointer-events: none; z-index: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .22));  /* one shadow for box + tail */
}
#kvMap .kv-popup-bubble path {
    fill: rgba(255, 255, 255, .93);   /* white, ~7% transparent (unchanged) */
    stroke: #cbd5e1;                   /* thin gray border wrapping box + tail as one outline */
    stroke-width: 1; stroke-linejoin: round;
}

/* Group-selection transform handles (corner = resize, ⟳ = rotate).
   Professional look: small white squares with a thin accent border, sitting
   CENTERED on the selection frame's corners (the JS gives every handle an
   iconAnchor = half its size, so it's centred rather than offset inward).
   Blue accent (not amber) so the selection never reads as a "purchased"
   status colour. */
.kv-gh {
    background: #ffffff;
    border: 1.5px solid #2563eb;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.25);
    box-sizing: border-box;
}
.kv-gh:hover { border-color: #1d4ed8; background: #eff6ff; }
.kv-gh-nw, .kv-gh-se { cursor: nwse-resize; }
.kv-gh-ne, .kv-gh-sw { cursor: nesw-resize; }
.kv-gh-rotate {
    background: #2563eb;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(15,23,42,0.35);
    cursor: grab;
}
.kv-gh-rotate:hover { background: #1d4ed8; }
.kv-gh-rotate:active { cursor: grabbing; }
/* Touch: keep the handle visually small but widen the grab area with a
   transparent pad (events on ::before dispatch to the handle element).
   No position:relative here — Leaflet already positions .kv-gh absolutely. */
@media (hover: none), (pointer: coarse) {
    .kv-gh::before { content: ''; position: absolute; inset: -10px; }
}

/* Map edit toggle button (Phase B) */
.kv-map-editbtn {
    background: #fff;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    padding: 6px 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.kv-map-editbtn.active { background: #16a34a; color: #fff; border-color: #15803d; }

/* Edit-control button group (Phase 22f) — ✏ main + ▼ panel-toggles dropdown.
   Sit side-by-side in the bottom-left corner. ▼ is hidden until edit mode
   is on (no panels to toggle otherwise). */
.kv-editctl {
    display: flex; gap: 4px; align-items: stretch;
    position: relative;          /* anchors the absolutely-positioned popup */
}
/* 🔘 T102: map control buttons are icon-only (🧊 ✏ 📷 🤖) — one compact row on every width;
   the description is the title + a tooltip bubble on hover/focus. Replaces the T099 wrap. */
.kv-map-editbtn.kv-iconbtn {
    position: relative;
    min-width: 40px; height: 40px; padding: 0 8px;
    font-size: 1.2rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.kv-map-editbtn.kv-iconbtn[data-tip]:focus-visible::after { content: attr(data-tip); }
@media (hover: hover) { .kv-map-editbtn.kv-iconbtn[data-tip]:hover::after { content: attr(data-tip); } }
.kv-map-editbtn.kv-iconbtn[data-tip]::after {
    position: absolute; bottom: calc(100% + 6px); left: 0;
    width: max-content; max-width: 240px; white-space: normal;
    background: #0f172a; color: #fff; font-size: .8rem; font-weight: 500;
    padding: 5px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
    pointer-events: none; z-index: 1000; text-align: start;
}
.leaflet-right .kv-map-editbtn.kv-iconbtn[data-tip]::after { left: auto; right: 0; }
.kv-map-paneltoggle {
    background: #fff;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    padding: 6px 10px;
    font: inherit; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    line-height: 1;
}
.kv-map-paneltoggle:hover { background: #f1f5f9; }

/* Per-panel show/hide checkbox popup. Opens above the ▼ button. */
.kv-panel-popup {
    position: absolute;
    bottom: calc(100% + 4px); inset-inline-start: 0;
    background: #fff;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    padding: 8px 10px;
    min-width: 200px;
    z-index: 1000;
    direction: rtl;
}
.kv-panel-popup-title {
    font-weight: 700; margin-bottom: 6px; color: #475569;
    font-size: .82rem;
}
.kv-panel-popup-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 4px;
    cursor: pointer;
    font-size: .9rem;
    border-radius: 4px;
}
.kv-panel-popup-row:hover { background: #f1f5f9; }
.kv-panel-popup-row input[type=checkbox] { margin: 0; cursor: pointer; }

/* Map grave icon (anonymous / burial-tier) */
.kv-grave-icon { font-size: 14px; color: #6b7280; text-align: center; line-height: 16px; }

/* Floating-panel chrome: drag header + collapse button. Applied to the
   edit-management menu, GPS anchor, and background controls — anything
   the user might want to move out of the way or temporarily shrink.
   The wrapper uses CSS transform so it doesn't fight Leaflet's control-
   corner positioning (left/top stay as Leaflet placed them; transform
   shifts the box visually). */
.kv-fp { position: relative; }
.kv-fp-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
    cursor: move; user-select: none;
    /* Pull to panel edges so the header sits flush with the rounded border.
       The two panels we wrap have padding: 8px 10px — these negatives match. */
    margin: -8px -10px 6px -10px;
    padding: 5px 9px;
    background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
    border-radius: 7px 7px 0 0;
    font-weight: 700; font-size: .85rem;
    color: #1e293b;
    touch-action: none;  /* let pointer events drive the drag on touch */
}
.kv-fp-bar:hover { background: #e2e8f0; }
.kv-fp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-fp-collapse {
    border: 1px solid transparent; background: transparent; cursor: pointer;
    width: 22px; height: 22px; font-size: 1.05rem; line-height: 1; padding: 0;
    border-radius: 4px; color: #475569;
}
.kv-fp-collapse:hover { background: #fff; border-color: #cbd5e1; color: #1e293b; }
.kv-fp.kv-fp-collapsed > *:not(.kv-fp-bar) { display: none !important; }
.kv-fp.kv-fp-collapsed .kv-fp-bar {
    margin-bottom: -8px; border-bottom: 0; border-radius: 6px;
}

/* Snapped to an edge (Phase 22c) — drop the outer rounded corner so
   the panel reads as docked, and tighten the bar's accent stripe. */
.kv-fp.kv-fp-snap-right {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right-width: 0;
    box-shadow: -1px 1px 4px rgba(0,0,0,0.15);
}
.kv-fp.kv-fp-snap-left {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-left-width: 0;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
}
.kv-fp.kv-fp-snap-right .kv-fp-bar {
    border-top-right-radius: 0;
    border-left: 3px solid #9333ea;   /* docked marker on the inboard side */
}
.kv-fp.kv-fp-snap-left .kv-fp-bar {
    border-top-left-radius: 0;
    border-right: 3px solid #9333ea;
}

/* ─── Phase 22d — real Photoshop-style dock columns ───────────────────
   The map page wraps #kvMap in a flex container with sibling
   .kv-dock-left and .kv-dock-right rails. Rails are width:0 (collapsed)
   until JS adds .kv-dock-has-panels — then they grow to 240px and the
   map shrinks via flex:1 to make room. Panels moved into a rail get
   .kv-fp-docked and lose their transform/shadow so they sit in normal
   flex flow, stacked top-to-bottom, each at the rail's full width. */
.kv-map-wrap {
    display: flex; align-items: stretch; width: 100%; gap: 0;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: #f8fafc; overflow: hidden;
    /* The page is RTL (Hebrew). Without `direction: ltr` here, the flex
       order flips — .kv-dock-left ends up VISUALLY on the right and
       vice versa. We force LTR for the flex layout but restore RTL on
       every child so Hebrew text inside the panels still reads right. */
    direction: ltr;
}
.kv-map-wrap > .kv-map,
.kv-map-wrap > .kv-dock {
    direction: rtl;
}
.kv-map-wrap > .kv-map {
    flex: 1 1 auto; min-width: 0; height: 100%;
    /* The map div's own border was on the floor; the wrap carries it now. */
    border-radius: 0;
}
/* Boundary manual-edit: make the corner (vertex) handles clean + obviously
   grabbable, and drop the faint "middle" add-point markers entirely. Scoped to
   the map only while the boundary editor's manual mode is active. */
.kv-boundary-editing .marker-icon {
    width: 16px !important; height: 16px !important;
    margin-left: -8px !important; margin-top: -8px !important;
    background: #2563eb; border: 2px solid #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: grab;
}
.kv-boundary-editing .marker-icon:hover { background: #1d4ed8; transform: scale(1.15); }
.kv-boundary-editing .marker-icon:active { cursor: grabbing; }
/* Midpoint "add-point" markers stay hidden — adding a vertex is a long-press
   gesture on the line now (touch + mouse), so the editor keeps a clean look. */
.kv-boundary-editing .marker-icon-middle { display: none !important; }
/* Annotation resize handles — small square grips at the corners of a selected
   icon/text annotation; drag to scale. */
.kv-ann-handle {
    background: #2563eb; border: 2px solid #fff; border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: nwse-resize;
}
.kv-ann-rotate {
    background: #2563eb; color: #fff; border: 2px solid #fff; border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: grab;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1; font-weight: 700;
}
.kv-ann-rotate:active { cursor: grabbing; }
.kv-dock {
    flex: 0 0 0; width: 0;
    overflow: hidden; box-sizing: border-box;
    background: #f1f5f9;
    transition: flex-basis .15s ease, width .15s ease, padding .15s ease;
    display: flex; flex-direction: column; gap: 6px;
}
.kv-dock.kv-dock-has-panels {
    flex: 0 0 240px; width: 240px;
    padding: 8px;
    overflow-y: auto;
    border-inline-start: 1px solid var(--color-border);
}
.kv-dock.kv-dock-left.kv-dock-has-panels {
    border-inline-start: 0;
    border-inline-end: 1px solid var(--color-border);
}

/* A docked panel: ignore the transform-based floating styles and let
   flex stack it. */
.kv-fp.kv-fp-docked {
    transform: none !important;
    box-shadow: none;
    width: 100%; margin: 0;
    border-radius: 6px;
    border-width: 1px !important;
    position: relative;
    /* The Geoman/Leaflet control corner pushes its kids with margin —
       drop those when docked. */
    margin-bottom: 0;
}
.kv-fp.kv-fp-docked + .kv-fp.kv-fp-docked {
    margin-top: 4px;
}
.kv-fp.kv-fp-docked .kv-fp-bar {
    cursor: grab;
}
.kv-fp.kv-fp-docked .kv-fp-bar:active {
    cursor: grabbing;
}

/* Edge highlight while dragging a panel near a dock zone (Phase 22e).
   Inset shadow on the corresponding side tells the user "release here
   and the panel docks". Inline on the map element so it's drawn above
   the map vectors but below Leaflet's marker pane / popup pane. */
.kv-map.kv-dock-target-left {
    box-shadow: inset 5px 0 0 0 rgba(147, 51, 234, 0.55);
    transition: box-shadow .08s ease-out;
}
.kv-map.kv-dock-target-right {
    box-shadow: inset -5px 0 0 0 rgba(147, 51, 234, 0.55);
    transition: box-shadow .08s ease-out;
}

/* Map background control (Phase E) */
.kv-map-bgctl {
    background: #fff; border: 1px solid #94a3b8; border-radius: 6px;
    padding: 8px 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    font-size: .85rem; display: flex; flex-direction: column; gap: 6px; min-width: 150px;
}
.kv-bgctl-title { font-weight: 700; }
.kv-bgctl-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kv-bgctl-row input[type=range] { flex: 1; }
.kv-bgctl-upload { cursor: pointer; color: #2563eb; font-weight: 600; }
.kv-bgctl-btn {
    background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px;
    padding: 4px 8px; cursor: pointer; font: inherit; font-size: .82rem;
}
.kv-bgctl-btn.active { background: #9333ea; color: #fff; border-color: #7e22ce; }
.kv-bgctl-danger { color: #b91c1c; }

/* Background editor (Phase 22) — numeric fields + actions */
.kv-bgctl-hint {
    font-size: .72rem; color: #64748b; line-height: 1.35;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 4px;
    padding: 4px 6px;
}
.kv-bgctl-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px;
    margin-top: 2px;
}
.kv-bgctl-cell {
    display: flex; flex-direction: column; gap: 1px;
    font-size: .72rem; color: #475569;
}
.kv-bgctl-cell input[type=number] {
    width: 100%; padding: 3px 5px; font: inherit; font-size: .82rem;
    border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;
    direction: ltr; text-align: left;
}
.kv-bgctl-cell input[type=number]:focus {
    outline: 0; border-color: #9333ea; box-shadow: 0 0 0 2px rgba(147,51,234,.15);
}
.kv-bgctl-row > button { flex: 1; }
.kv-bgctl-btn.kv-bgctl-save {
    background: #dcfce7; border-color: #86efac; color: #166534; font-weight: 600;
}
.kv-bgctl-btn.kv-bgctl-save:hover { background: #bbf7d0; }

/* Phase 22 — merge panel history rows */
.kv-merge-hist {
    display: flex; flex-direction: column; gap: 3px;
    font-size: .78rem;
    max-height: 200px;
    overflow-y: auto;
}
.kv-merge-hist-row {
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    padding: 3px 4px;
    border: 1px solid #e2e8f0; border-radius: 4px;
    background: #f8fafc;
}
.kv-merge-hist-row > button { padding: 2px 6px; font-size: .72rem; }
.kv-merge-hist-row.kv-merge-hist-row-active {
    background: #fef3c7; border-color: #f59e0b;
}

/* Phase 23 — per-record file explorer */
/* DOC-T8e — Finder-style explorer. No dedicated dropzone — the whole
   card accepts file drops and shows a subtle overlay while dragging. */
.kv-doc-explorer {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 8px;
    position: relative;
}
.kv-doc-explorer-dragover::after {
    content: '⬇ שחרר כדי להעלות';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37, 99, 235, .08);
    border: 2px dashed #2563eb; border-radius: 8px;
    color: #1d4ed8; font-size: 1rem; font-weight: 600;
    pointer-events: none; z-index: 10;
}
.kv-doc-progress {
    margin-top: 4px; padding: 5px 9px;
    background: #ecfeff; border: 1px solid #67e8f9; border-radius: 4px;
    color: #155e75; font-size: .82rem;
}

/* DOC-T8h — Finder-style status footer. Centered, muted, sits below the
   grid. Counts files + folders + selection, updates on every render. */
.kv-doc-footer {
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-align: center;
    font-size: .75rem;
    color: #64748b;
    min-height: 24px;
}

/* DOC-T8d — fixed-height container so the card doesn't shrink when
   empty or expand when overflowing. Internal scroll keeps it tidy. */
.kv-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    min-height: 320px;
    max-height: 480px;
    overflow-y: auto;
    padding: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    align-content: start;       /* don't stretch rows to fill the height */
}
.kv-doc-empty {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
    text-align: center; color: #94a3b8;
    padding: 24px 12px;
    font-size: .9rem;
}
.kv-doc-loading {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
    color: #64748b; padding: 12px;
}
/* DOC-T8e — Finder-style cards: no border, no per-bucket tint.
   Just an icon/thumbnail on top, name below. Selection = subtle blue
   pill behind the name + icon. Hover = subtle gray. */
.kv-doc-card {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    padding: 6px 4px 4px;
    border-radius: 6px;
    cursor: default;
    user-select: none;
    transition: background .12s;
}
.kv-doc-card:hover     { background: rgba(0, 0, 0, .04); }
.kv-doc-card-selected  { background: #dbeafe; }
.kv-doc-card-selected:hover { background: #bfdbfe; }
.kv-doc-card-droptarget { background: rgba(34, 197, 94, .18); outline: 2px solid #16a34a; outline-offset: -2px; }
.kv-doc-card-folder    { cursor: pointer; }
.kv-doc-card-folder:hover { background: rgba(217, 119, 6, .08); }

/* Tile = the icon/thumbnail block; overlay sits inside it. */
.kv-doc-tile {
    position: relative;
    width: 76px; height: 76px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border-radius: 4px;
}
.kv-doc-tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.kv-doc-tile-icon {
    font-size: 3rem; line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.1));
}
/* Filename underneath the tile — Finder-style two-line clamp */
.kv-doc-tile-name {
    margin-top: 4px;
    font-size: .75rem;
    color: #1e293b;
    line-height: 1.2;
    max-width: 96px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kv-doc-card-selected .kv-doc-tile-name { color: #1e3a8a; }
/* Back-compat shims so list view's anchor still gets a color */
.kv-doc-card-preview { color: inherit; text-decoration: none; }
.kv-doc-card-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-doc-card-icon { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.2rem; color: #64748b; }

/* DOC-T8d — explorer toolbar (top strip with new-folder, breadcrumb,
   selection bar, view switch). One unified bar replaces the scattered
   button rows we had before. */
.kv-doc-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    min-height: 38px;
    flex-wrap: wrap;
}
.kv-doc-toolbar-left, .kv-doc-toolbar-right {
    display: flex; align-items: center; gap: 6px;
}
.kv-doc-breadcrumb {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82rem; color: #475569;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kv-doc-crumb {
    color: #2563eb; text-decoration: none;
    padding: 1px 4px; border-radius: 3px;
}
.kv-doc-crumb:hover { background: #e0e7ff; }
.kv-doc-crumb-sep { color: #94a3b8; }

/* DOC-T8i — kv-doc-tb-btn family removed; replaced by .kv-doc-seg + .kv-doc-tb-more */

/* DOC-T8e — Finder folder = same tile shape, just an amber-tinted icon.
   The .kv-doc-card-folder hover background is set above. */
.kv-doc-card-folder .kv-doc-tile-icon { color: #d97706; }
.kv-doc-card-del-btn { display: none; }   /* Phase 23 inline delete buttons replaced by context menu */
.kv-doc-chip { display: none; }            /* old chips replaced by overlay + context menu */
.kv-doc-chip-folder { display: none; }

/* DOC-T8e — corner overlay badge: bottom-end of the tile (Finder uses
   bottom-right for shortcut arrow; we put bucket indicator there too). */
.kv-doc-overlay {
    position: absolute; bottom: 1px; right: 1px;
    width: 18px; height: 18px; line-height: 18px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    font-size: .72rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    z-index: 2;
}
.kv-doc-overlay-system  { color: #d97706; }
.kv-doc-overlay-private { color: #b91c1c; }
.kv-doc-chip-type { display: none; }

/* DOC-T8b — selection state (click/Ctrl-click/Shift-click) */
.kv-doc-card-selected {
    box-shadow: 0 0 0 2px #2563eb inset;
    background: #eff6ff;
}
.kv-doc-card-droptarget {
    box-shadow: 0 0 0 3px #16a34a inset;
    background: #dcfce7;
}
.kv-doc-card[draggable="true"] { cursor: grab; }
.kv-doc-card[draggable="true"]:active { cursor: grabbing; }

/* DOC-T8g — selection bar removed from toolbar entirely; batch actions
   now live in the context menu of any selected file. */

/* DOC-T8b — right-click context menu */
.kv-doc-ctx {
    position: fixed; z-index: 2000;
    min-width: 180px;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    padding: 4px;
    font-size: .85rem;
    direction: rtl;
}
.kv-doc-ctx button {
    display: block; width: 100%; text-align: start;
    padding: 6px 10px;
    background: none; border: none; cursor: pointer;
    font: inherit; color: #1e293b;
    border-radius: 4px;
}
.kv-doc-ctx button:hover { background: #f1f5f9; }
.kv-doc-ctx button.kv-doc-ctx-danger { color: #b91c1c; }
.kv-doc-ctx button.kv-doc-ctx-danger:hover { background: #fef2f2; }

/* DOC-T8b — properties modal */
.kv-doc-modal-bg {
    position: fixed; inset: 0; z-index: 1900;
    background: rgba(15,23,42,.4);
    display: flex; align-items: center; justify-content: center;
}
.kv-doc-modal {
    background: #fff; border-radius: 8px; min-width: 320px; max-width: 90vw;
    padding: 16px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.2);
    direction: rtl;
}
.kv-doc-modal h3 { margin: 0 0 12px; font-size: 1rem; color: #1e293b; }
.kv-doc-modal table { width: 100%; border-collapse: collapse; }
.kv-doc-modal th, .kv-doc-modal td { text-align: start; padding: 4px 6px; border-bottom: 1px solid #f1f5f9; font-size: .85rem; }
.kv-doc-modal th { color: #64748b; font-weight: 600; width: 35%; }
.kv-doc-modal td { color: #1e293b; word-break: break-word; }
.kv-doc-modal-actions { margin-top: 12px; text-align: start; }
.kv-doc-modal-actions button {
    background: #2563eb; color: #fff; border: none; border-radius: 4px;
    padding: 6px 14px; font: inherit; cursor: pointer;
}

/* DOC-T8c — view switch (grid ↔ list) */
/* DOC-T8i — iOS-style segmented control. Shared base for both
   bucket-toggle and view-switch so they look like one coherent set. */
.kv-doc-seg {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 7px;
    padding: 2px;
    font-size: .78rem;
    line-height: 1;
}
.kv-doc-seg button {
    background: transparent; border: none; cursor: pointer;
    padding: 4px 10px;
    font: inherit; color: #64748b;
    border-radius: 5px;
    transition: background .12s, color .12s, box-shadow .12s;
    min-width: 30px;
}
.kv-doc-seg button:hover { color: #1e293b; }
.kv-doc-seg button.kv-doc-seg-active {
    background: #fff;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.04);
    font-weight: 600;
}
/* Color carries the bucket meaning — blue for public, red for private */
.kv-doc-bucket-toggle button[data-bucket="public"].kv-doc-seg-active  { color: #1d4ed8; }
.kv-doc-bucket-toggle button[data-bucket="private"].kv-doc-seg-active { color: #b91c1c; }
.kv-doc-viewswitch button { font-size: .9rem; padding: 4px 8px; }

/* DOC-T8e — context menu separator + submenu chevron */
.kv-doc-ctx-sep {
    height: 1px; background: #e2e8f0; margin: 4px 0;
}
.kv-doc-ctx-has-sub::after {
    content: '‹'; float: left; color: #94a3b8; font-weight: 700;
}
.kv-doc-ctx button.kv-doc-ctx-heading {
    color: #94a3b8; font-size: .7rem; padding: 4px 10px 2px;
    cursor: default; font-weight: 600;
    text-transform: uppercase; letter-spacing: .02em;
    background: none !important;
}

/* DOC-T8i — ⋯ toolbar button: matches segmented controls' pill aesthetic */
.kv-doc-tb-more {
    background: #f1f5f9;
    border: none;
    border-radius: 7px;
    padding: 0;
    width: 32px; height: 26px;
    font-size: 1.05rem; font-weight: 700; line-height: 1;
    color: #475569; cursor: pointer;
    transition: background .12s, color .12s;
}
.kv-doc-tb-more:hover { background: #e2e8f0; color: #1e293b; }

/* DOC-T8f — ⋯ menu button on cards. On desktop, only show on hover/focus
   /selected. On touch (no hover) ALWAYS visible — primary menu trigger. */
.kv-doc-card-more {
    position: absolute; top: 3px; right: 3px;
    width: 26px; height: 26px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e2e8f0; border-radius: 50%;
    text-align: center; line-height: 22px;
    cursor: pointer;
    font-size: 1rem; font-weight: 700;
    color: #475569;
    padding: 0;
    z-index: 3;
}
.kv-doc-card-more:hover { background: #f1f5f9; color: #1e293b; }
@media (hover: hover) {
    .kv-doc-card-more { opacity: 0; transition: opacity .12s; }
    .kv-doc-card:hover .kv-doc-card-more,
    .kv-doc-card:focus-within .kv-doc-card-more,
    .kv-doc-card-selected .kv-doc-card-more { opacity: 1; }
}

/* DOC-T8f — toolbar select-mode button removed (now in ⋯ menu) */

/* DOC-T8f — when select-mode is on, show a faint checkbox overlay on each
   tile so the mode is visually obvious. Selected ones get a filled check. */
.kv-doc-explorer-selectmode .kv-doc-card[data-doc-id]::before {
    content: '○';
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; line-height: 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #cbd5e1; border-radius: 50%;
    color: #94a3b8; font-size: 1rem; font-weight: 700;
    z-index: 2;
}
.kv-doc-explorer-selectmode .kv-doc-card-selected[data-doc-id]::before {
    content: '✓';
    background: #2563eb; border-color: #2563eb; color: #fff;
}

/* DOC-T8i — responsive toolbar. Gentle bumps only — keep the iOS pill
   aesthetic tight. The segmented controls already have nice tap targets
   (their padding gives ~30px height) — no need to bloat them. */
@media (max-width: 600px) {
    .kv-doc-toolbar { padding: 5px 7px; gap: 5px; }
    /* Slightly bigger touch targets on the segmented pills, no width bloat */
    .kv-doc-seg button { padding: 6px 11px; font-size: .8rem; }
    .kv-doc-viewswitch button { padding: 6px 9px; font-size: 1rem; }
    .kv-doc-tb-more { width: 34px; height: 30px; font-size: 1.1rem; }
    /* Breadcrumb on its own line on very small screens */
    .kv-doc-breadcrumb {
        flex-basis: 100%; order: 99;
        padding-top: 2px; border-top: 1px solid #f1f5f9;
    }
    /* Tiles slightly bigger for thumb-friendly */
    .kv-doc-tile { width: 84px; height: 84px; }
    .kv-doc-tile-icon { font-size: 3.2rem; }
    .kv-doc-tile-name { max-width: 104px; font-size: .8rem; }
    .kv-doc-grid { min-height: 360px; max-height: 60vh; }
    .kv-doc-ctx { min-width: 220px; }
    .kv-doc-ctx button { padding: 10px 14px; font-size: .9rem; }
}

/* DOC-T8f — touch devices specifically: bigger ⋯, comfortable spacing */
@media (hover: none) {
    .kv-doc-card-more {
        width: 30px; height: 30px; line-height: 26px;
        font-size: 1.15rem;
    }
    /* The drag-onto-folder gesture doesn't work on touch — disable
       draggable visually to avoid the "grab" cursor showing. */
    .kv-doc-card[draggable="true"] { cursor: pointer; }
    /* Bigger tap targets on toolbar buttons even on phones with hover-spoofing */
    .kv-doc-tb-btn { min-height: 40px; }
}

/* DOC-T8d — list layout: dense rows, tight padding, small icons. The
   container keeps its fixed-height scroll from .kv-doc-grid. */
.kv-doc-grid-list {
    display: block;
    padding: 0;                  /* rows have their own padding */
    background: #fff;
    grid-template-columns: none;
}
.kv-doc-row {
    display: grid;
    /* DOC-T8j — 6 cols: icon · name · type · size · date · ⋯ */
    grid-template-columns: 22px 1fr 90px 60px 110px 26px;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 8px;
    border-bottom: 1px solid #f1f5f9;
    font-size: .78rem;
    line-height: 1.2;
    cursor: pointer;
}
.kv-doc-row:last-child { border-bottom: none; }
.kv-doc-row-header {
    position: sticky; top: 0; z-index: 1;
    background: #f8fafc;
    font-weight: 600; color: #64748b; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .02em;
    cursor: default;
    padding: 4px 8px;
}
.kv-doc-row.kv-doc-card-selected { background: #eff6ff; }
.kv-doc-row.kv-doc-card-droptarget { background: #dcfce7; }
.kv-doc-row-icon { position: relative; font-size: .95rem; text-align: center; }
.kv-doc-row-overlay {
    position: absolute; top: -3px; right: -5px;
    font-size: .55rem;
    background: #fff; border-radius: 50%;
    width: 12px; height: 12px; line-height: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.kv-doc-row-name {
    color: #1e293b; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kv-doc-row-name:hover { text-decoration: underline; color: #1d4ed8; }
.kv-doc-row-type, .kv-doc-row-size, .kv-doc-row-date {
    color: #64748b; font-size: .72rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* List-mode folder rows: subtle amber hover */
.kv-doc-grid-list .kv-doc-card-folder.kv-doc-row { background: #fffbeb; }
.kv-doc-grid-list .kv-doc-card-folder.kv-doc-row:hover { background: #fef3c7; }
.kv-doc-grid-list .kv-doc-row:hover { background: #f8fafc; }
.kv-doc-grid-list .kv-doc-card-folder.kv-doc-row:hover { background: #fef3c7; }
/* Hide the grid-only preview/icon blocks when in list mode */
.kv-doc-grid-list .kv-doc-card-preview img,
.kv-doc-grid-list .kv-doc-card-icon,
.kv-doc-grid-list .kv-doc-overlay { display: none; }
/* In list view we use .kv-doc-row-more (inline) instead of the grid's
   absolute-positioned .kv-doc-card-more — hide the latter inside rows. */
.kv-doc-grid-list .kv-doc-card-more { display: none; }

/* DOC-T8j — inline ⋯ button for list rows (last grid cell) */
.kv-doc-row-more {
    background: transparent; border: none;
    width: 26px; height: 26px;
    font-size: 1rem; font-weight: 700;
    color: #94a3b8; cursor: pointer;
    border-radius: 4px;
    padding: 0;
    align-self: center;
}
.kv-doc-row-more:hover { background: #f1f5f9; color: #1e293b; }
@media (hover: none) {
    .kv-doc-row-more { color: #64748b; width: 30px; height: 30px; font-size: 1.1rem; }
}

/* ========================================================================
   M1 — Mobile responsive foundation
   ========================================================================
   Three breakpoints used across the app:
     - 768px  → sidebar collapses to overlay (existing, from line 225)
     - 600px  → toolbar buttons shrink (used by doc-explorer)
     - 480px  → "phone" mode: tables → cards, grids stack, dense layouts
   Tablet-friendly main content padding kicks in at 768px.
   ======================================================================== */

/* Main content gutter — phones need real edge padding, not the inherited
   sidebar layout's zero-padding. */
@media (max-width: 768px) {
    .app-main { padding: 12px 10px; }
}
@media (max-width: 480px) {
    .app-main { padding: 10px 8px; }
}

/* ---------- Generic table styles (cross-cutting baseline) ----------
   Most list views built ad-hoc <table>s without shared styling. Add a
   minimal opt-in baseline so the M2 wrap looks polished. */
.kv-table {
    width: 100%; border-collapse: collapse; font-size: 0.9rem;
}
.kv-table th, .kv-table td {
    padding: 0.5rem 0.6rem; text-align: start; vertical-align: middle;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.kv-table thead th {
    font-weight: 600; color: var(--color-text-muted, #64748b);
    background: #f8fafc; font-size: 0.82rem;
    position: sticky; top: 0; z-index: 1;
}
.kv-table tbody tr:hover { background: #f8fafc; }

/* ---------- .kv-table-wrap — horizontal scroll for wide tables ----------
   Wrap any table with `<div class="kv-table-wrap">` to keep the page
   layout from exploding on narrow viewports. The shadow at edges hints
   that there's more content scrollable. */
.kv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm, 6px);
    /* The shadows hint "there's more horizontally" — common iOS pattern */
    background:
        linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) start center,
        linear-gradient(-90deg, #fff 30%, rgba(255,255,255,0)) end center,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.12), transparent) start center,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.12), transparent) end center;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}
.kv-table-wrap > table,
.kv-table-wrap > .kv-table {
    min-width: 100%;
    /* Avoid letting cells word-wrap into mush; a horizontal scroll is
       readable, a 4-line cell isn't. Override per-cell if needed. */
    white-space: nowrap;
}
.kv-table-wrap > table th,
.kv-table-wrap > table td { white-space: nowrap; }

/* ---------- .kv-table-cards — card-flip layout below 480px ----------
   For "hot" list views (customers, purchases, payments) we want each row
   to render as a stacked card on phones instead of a horizontally-scrolling
   table. Markup convention: every <td> gets `data-label="header text"`.
   The label renders to the right of each cell value on mobile. */
@media (max-width: 480px) {
    .kv-table-cards { display: block; white-space: normal !important; }
    .kv-table-cards thead { display: none; }
    .kv-table-cards tbody, .kv-table-cards tr {
        display: block; width: 100%;
    }
    .kv-table-cards tr {
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: var(--radius-sm, 6px);
        padding: 8px 10px;
        margin-bottom: 8px;
        background: #fff;
    }
    .kv-table-cards td {
        display: flex; justify-content: space-between; align-items: baseline;
        gap: 12px;
        padding: 4px 0;
        border: none;
        white-space: normal !important;
        font-size: 0.88rem;
    }
    .kv-table-cards td::before {
        content: attr(data-label);
        color: var(--color-text-muted, #64748b);
        font-size: 0.75rem; font-weight: 600;
        flex-shrink: 0;
    }
    /* Cells without data-label (action buttons, etc.) span full width
       without a label column. */
    .kv-table-cards td:not([data-label]) {
        justify-content: flex-end;
        padding-top: 6px;
        border-top: 1px solid #f1f5f9;
        margin-top: 4px;
    }
    .kv-table-cards td:not([data-label])::before { content: none; }
    /* ⏹ הוסר: `.kv-table-wrap.has-cards { background: none }` — הכיתה
       `has-cards` לא נוספה **מעולם** לאיש (לא בתבניות ולא ב-JS), כלומר כלל
       שלא יכול היה לפעול. מי שממלא את תפקידו בפועל הוא הכלל המבוסס-`:has`
       בבלוק-הכרטיסים למטה. */
}

/* ---------- Definition lists (key-value show pages) ----------
   show.php uses `grid-template-columns: 200px 1fr` patterns. On phones
   the 200px label eats half the screen. .kv-deflist makes the grid
   responsive: 2-col on desktop, stacked on phone. */
.kv-deflist {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 6px 16px;
    align-items: baseline;
}
.kv-deflist dt {
    color: var(--color-text-muted, #64748b);
    font-size: 0.82rem; font-weight: 600;
}
.kv-deflist dd { margin: 0; }
@media (max-width: 480px) {
    .kv-deflist {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .kv-deflist dt { padding-top: 6px; }
    .kv-deflist dd { padding-bottom: 6px; border-bottom: 1px solid #f1f5f9; }
    .kv-deflist dd:last-child { border-bottom: none; }
}

/* ---------- Generic form-row helper ----------
   For multi-column form layouts that should stack on phones. Replaces
   ad-hoc `display:grid; grid-template-columns: repeat(2,1fr)` in views. */
.kv-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
}

/* ---------- Tap-target friendly buttons on touch devices ----------
   Existing .btn is a bit cramped (~30px) on phones; bump it without
   touching desktop layout. */
@media (hover: none), (max-width: 480px) {
    .btn { min-height: 40px; padding: 9px 16px; font-size: 0.92rem; }
    .btn-ghost, .btn-secondary { min-height: 38px; }
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="search"], input[type="password"],
    input[type="date"], textarea, select {
        min-height: 40px; padding: 9px 11px; font-size: 16px;  /* 16px avoids iOS auto-zoom */
    }
}

/* ---------- Hide / show by viewport (utility classes) ---------- */
.kv-only-mobile  { display: none; }
.kv-only-desktop { display: initial; }
@media (max-width: 480px) {
    .kv-only-mobile  { display: initial; }
    .kv-only-desktop { display: none; }
}

/* ---------- Stack-on-phone helper ----------
   Add `.kv-stack-on-phone` to a flex container that has multiple
   side-by-side controls (filters bar, header actions) so they stack
   vertically with full-width children on phones. */
@media (max-width: 480px) {
    .kv-stack-on-phone {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .kv-stack-on-phone > * { width: 100%; }
}

/* ---------- Card padding shrinks on phones ---------- */
@media (max-width: 480px) {
    .card { padding: 12px 10px; }
}

/* ---------- Sticky table headers in scroll-wrap don't make sense
   inside a horizontally-scrolling container; disable. */
.kv-table-wrap .kv-table thead th { position: static; }

/* ---------- M4/M6 polish: header on phones ----------
   Push button base styling (replaces former inline styles in header.php).
   On phones below 600px we hide the label and show only the bell icon. */
.header-push-btn {
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: 14px;
    cursor: pointer;
    font: inherit; font-size: 0.8rem;
    color: inherit;
}
.header-push-btn.header-push-btn--on { background: #d1fae5; color: #065f46; }
.header-push-btn:hover { background: #f1f5f9; }
.header-push-label { display: inline; }

@media (max-width: 600px) {
    .app-header { padding: 0 8px; gap: 6px; padding-top: env(safe-area-inset-top); }
    .app-header h1 { display: none; }   /* sidebar already shows app name */
    /* Current-company chip is up to 240px wide with nowrap — on a phone it
       crushes the search box. Hide it here; the sidebar drawer carries the
       company name on mobile (see .sidebar-company). !important is required
       because the chip carries an inline display:inline-flex. */
    .app-header .header-company { display: none !important; }
    .app-header .header-search { margin: 0; flex: 1; max-width: none; }
    .app-header .header-search input { font-size: 16px; padding: 7px 9px; }  /* avoid iOS zoom */
    /* Push button → just the bell. The label hides, the button becomes a
       compact circle. !important because the button has inline display:''
       set by JS. */
    .header-push-btn {
        width: 36px; height: 36px; padding: 0;
        border-radius: 50%;
        font-size: 1rem; line-height: 1;
        display: flex !important; align-items: center; justify-content: center;
    }
    .header-push-label { display: none; }
    /* Show just the leading icon character from the label text via tiny CSS
       trick: hide label and rely on a fixed icon. The actual emoji shown
       is set in the label text — but since hidden, we add it here. */
    .header-push-btn::before { content: '🔔'; }
    .header-push-btn.header-push-btn--on::before { content: '🔔'; color: #065f46; }
}
@media (max-width: 600px) {
    /* Health pill not useful on mobile — hide entirely */
    #health-pill { display: none !important; }
}

/* ---------- M4 polish: cards stack vertically on phones if they were
   side-by-side via flex; flex-wrap is usually set already. ---------- */
@media (max-width: 480px) {
    /* Page H2 headers shrink a notch for breathing room */
    .card > h2:first-child, .card > h3:first-child { font-size: 1.05rem; }
    /* Padding around buttons in cards gets uniform */
    .card form { margin-bottom: 0; }
}

/* ========================================================================
   M5 — Sidebar + header overhaul for mobile, page-header stacking,
        nested-table card-flip, global polish
   ======================================================================== */

/* ---------- Sidebar overlay backdrop ----------
   When the sidebar opens on mobile, dim everything behind it so it's
   visually a "drawer", not a half-floating panel. Add a high z-index. */
@media (max-width: 768px) {
    .app-sidebar {
        /* Must stay above Leaflet — Leaflet panes go 200-700 and
           Leaflet controls reach 1000, so anything below 1001 lets the
           map render in front of the open drawer. */
        z-index: 1100;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    }
    /* Pseudo-backdrop attached to the sidebar — no extra markup needed.
       It only appears when .open is on, covering the rest of the screen. */
    .app-sidebar.open::before {
        content: '';
        position: fixed;
        top: 0; bottom: 0;
        right: 0; left: 0;
        background: rgba(15, 23, 42, 0.4);
        z-index: -1;     /* behind the sidebar itself, inside its stacking context */
        animation: kv-fade-in .15s ease-out;
    }
    /* Prevent body scrolling while drawer is open — JS adds .kv-drawer-lock */
    body.kv-drawer-lock { overflow: hidden; }
}
@keyframes kv-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Hide the hamburger button on desktop — sidebar is always visible there
   so the button does nothing. */
@media (min-width: 769px) {
    .app-header [data-action="toggle-sidebar"] { display: none; }
}
/* On mobile, make hamburger prominent (44×44 minimum touch target) */
@media (max-width: 768px) {
    .app-header [data-action="toggle-sidebar"] {
        min-width: 44px; min-height: 44px;
        padding: 0; font-size: 1.4rem; line-height: 1;
        background: transparent; border: none;
        color: var(--color-text);
    }
    .app-header [data-action="toggle-sidebar"]:hover { background: #f1f5f9; }
}

/* ---------- M6 — Page header polish on phones.
   Without `:has()` (spotty mobile support), we add a `kv-page-head` class
   via a tiny inline-script injected by the layout — see layout.php.
   Backstop: any first-child flex div in .app-main with an h2 also gets
   compact h2 + button sizing. */
@media (max-width: 480px) {
    .kv-page-head { padding: 0 !important; }
    .kv-page-head > h2 { font-size: 1.15rem !important; }
    .kv-page-head > .btn,
    .kv-page-head > form > .btn,
    .kv-page-head > a.btn {
        padding: 8px 12px !important;
        font-size: 0.88rem !important;
    }
    /* Action containers inside page-header (margin-inline-start: auto)
       wrap their buttons nicely if they overflow */
    .kv-page-head > div { gap: 6px !important; }
}

/* ---------- M6: explicit .kv-cards-on-phone class for tables that should
   flip to a card-stack on phones. Replaces the `:has()` selector which
   has spotty support on older mobile browsers. The view adds the class
   on the <table>, then we hide the head and stack each row as a card.
   Breakpoint 600px (was 480) so mid-range phones get cards by default
   instead of horizontal scroll — aligned with the table-mode toggle below. */
@media (max-width: 600px) {
    table.kv-cards-on-phone,
    .kv-table-wrap > table.kv-cards-on-phone { display: block !important; white-space: normal !important; min-width: 0 !important; }
    table.kv-cards-on-phone thead { display: none; }
    table.kv-cards-on-phone tbody,
    table.kv-cards-on-phone tr { display: block; width: 100%; }
    table.kv-cards-on-phone tr {
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: var(--radius-sm, 6px);
        padding: 10px 12px; margin-bottom: 8px;
        background: var(--color-surface);
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    table.kv-cards-on-phone td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 12px;
        padding: 6px 0 !important;
        border: none !important;
        text-align: start !important;
        white-space: normal !important;
        font-size: 0.9rem;
    }
    table.kv-cards-on-phone td[data-label]::before {
        content: attr(data-label);
        color: var(--color-text-muted, #64748b);
        font-size: 0.78rem; font-weight: 600;
        flex-shrink: 0;
        text-align: start;
    }
    /* מבטל את צללי-הגלילה-האופקית של העוטף כשהטבלה שבתוכו הפכה לכרטיסים.
       ⚠️ **צאצא ולא ילד-ישיר:** `table-controls.js` מזריק `.kv-table-scroller`
       **בין** העוטף לטבלה בכל טבלה עם `data-table-id`, ולכן `:has(> table…)`
       הפסיק להתאים בדיוק בטבלאות הראשיות — פסי-הגרדיינט הלבנים נשארו מאחורי
       הכרטיסים. */
    .kv-table-wrap:has(table.kv-cards-on-phone) { background: none; overflow: visible; }

    /* ---------- 🔴 תיקון: הכרטיס נמתח לרוחב-הדסקטופ והערכים יצאו מהמסך ------
     *
     * ⚠️ **זה מה שהיה שבור, ולמה זה נראה כמו «הערכים ריקים».** מאז ששמירת
     * פריסת-העמודות עברה לשרת (phase 82), רוחב שנקבע ב**דסקטופ** מגיע גם
     * לטלפון, ו-`table-controls.js` כותב אותו כ-`style="width:1800px"` **על
     * ה-`<table>` עצמו**. מצב-הכרטיסים מעולם לא איפס אותו: הכרטיס נמתח
     * ל-1800px, `justify-content:space-between` דחף את הערך אל **קצה** אותה
     * שורה — כלומר הרחק מחוץ למסך — ו-`html,body{overflow-x:hidden}` (למטה)
     * מנע אפילו לגלול אליו. התווית נשארה נראית בהתחלה, הערך נעלם: «כרטיס
     * ארוך מאוד עם ערכים ריקים», בדיוק כפי שדווח.
     *
     * 🔑 התיקון חי ב-CSS ולא ב-JS **בכוונה:** `!important` בגיליון-מחבר גובר
     * על `style=""` inline, ולכן אין צורך לרדוף אחרי כל נקודה שבה ה-JS כותב
     * רוחב — כלל אחד מנטרל את כולם.
     *
     * הכל מוגבל ב-`body:not(.kv-tables-as-table)`: במצב-טבלה בטלפון (הכפתור
     * בכותרת) הרוחב השמור **כן** רצוי — שם גוללים אופקית בכוונה. */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone {
        width: auto !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }
    /* הגלובלי `table[data-table-id] td { overflow:hidden; text-overflow:ellipsis }`
       נועד לחיתוך בעמודה צרה בדסקטופ. בכרטיס **אין עמודה** — ערך ארוך צריך
       לרדת לשורה שנייה, לא להיחתך לשלוש נקודות. */
    /* ⚠️ **התא אינו flex אלא בלוק עם גוטר-תווית.** זו ההחלטה שממנה נגזר כל
     * שאר העיצוב, ושלוש גרסאות קדמו לה:
     *   • `space-between` — פרש תא מפוצל (תאריך + `<small>שעה</small>`) לשני
     *     קצוות הכרטיס, כי הם **שני** פריטי-flex ולא ערך אחד.
     *   • `flex-start` + עמודת-תווית ברוחב קבוע — הצמיד אותם חזרה, אבל ערך
     *     ארוך (נתיב-קבר, הערה) **קפץ לשורה משלו** ברוחב מלא, כי פריט-flex
     *     שאינו נכנס עובר שורה במקום לגלוש בתוכו. חצי מהשדות התיישרו בעמודה
     *     וחצי לא.
     *   • `display:grid` — היה הופך **כל ילד** לתא-רשת נפרד, כלומר מפריד את
     *     השעה מהתאריך בדיוק כמו הראשונה.
     * הפתרון: התווית יוצאת מהזרימה (`position:absolute`) והתא מקבל ריפוד
     * בצד-ההתחלה ברוחבה. כל תוכן-הערך זורם כרגיל — inline נשאר צמוד, טקסט
     * ארוך גולש בתוך העמודה, ושורת-משנה יורדת מתחתיו — והכול על ציר אחד. */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td {
        display: block !important;
        position: relative;
        overflow: visible !important;
        text-overflow: clip !important;
        min-width: 0;
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-label] {
        padding-inline-start: calc(6.25rem + 12px) !important;
        min-height: 1.6em;
    }
    /* ---------- 🎨 עיצוב הכרטיס ------------------------------------------
     *
     * ⚠️ **מה שהיה לא נראה כמו כרטיס אלא כמו טבלה שנשברה.** התווית נצמדה
     * לקצה אחד והערך לקצה השני, כל שתים-עשרה השורות באותו משקל, ותיבת-הסימון
     * ישבה לבדה בשורה ריקה בראש. העין נאלצה לקפוץ הלוך-ושוב לרוחב הכרטיס
     * בכל שדה, ולא היה שום דבר שאומר **של מי** הכרטיס.
     *
     * שלוש החלטות-עיצוב, לפי הסדר:
     *   1. **עמודת-תוויות ברוחב קבוע** במקום דחיפה לקצוות — כל הערכים
     *      מתיישרים על ציר אחד, והעין יורדת בעמודה במקום לקפוץ לרוחב.
     *   2. **כותרת לכרטיס** — התא הראשון (המזהה: מספר-תיק / שם / מספר) גדול,
     *      מודגש, בלי תווית, עם קו-הפרדה מתחתיו. עכשיו יש «של מי זה».
     *   3. **היררכיית-משקל** — תווית קטנה ומעומעמת, ערך כהה ובינוני, קו-שיער
     *      בין שדות. אותו מידע, שליש מהרעש.
     *
     * ⚠️ תיבת-הסימון יוצאת מזרימת-השורות ומוצמדת לפינה שממול לכותרת: היא
     * פקד, לא שדה, ושורה שלמה בשבילה היא בזבוז שנראה כמו תקלה. */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr {
        position: relative;
        padding: 12px 14px !important;
        margin-bottom: 10px !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04) !important;
    }
    /* משוב-מגע: השורה כולה קישור (`data-row-href`), ובלי היענות היא מרגישה מתה. */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr[data-row-href]:active {
        background: var(--color-bg);
    }
    /* עמודת-התווית: רוחב קבוע, מחוץ לזרימה = ציר-יישור אחד לכל הערכים. */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-label]::before {
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 7px;
        width: 6.25rem;
        font-size: 0.74rem;
        font-weight: 600;
        line-height: 1.5;
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-text);
        line-height: 1.5;
        padding: 7px 0 !important;
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td + td {
        border-block-start: 1px solid var(--color-border) !important;   /* קו-שיער בין שדות */
    }
    /* שורת-המשנה שבתוך תא (ת״ז מתחת לשם, תאריך עברי מתחת ללועזי, טלפון) היא
       תמיד `<div><small>…</small></div>` — בלוק, ולכן היא כבר יורדת לשורה
       משלה **בתוך** עמודת-הערך בזכות הריפוד של התא. נשאר רק להנמיך אותה. */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td > div {
        font-size: 0.8rem;
        font-weight: 400;
        line-height: 1.45;
        margin-top: 1px;
    }
    /* ⚠️ תא-הערה נושא `max-width:220px` מהסגנון-פר-מסך; בכרטיס אין עמודה. */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td.wrap { max-width: none !important; }

    /* ── כותרת-הכרטיס: התא הראשון שאינו תיבת-הסימון ── */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-select] + td,
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr > td:first-child:not([data-kv-select]) {
        font-size: 1.02rem;
        font-weight: 700;
        line-height: 1.35;
        padding: 0 0 10px !important;
        /* ⚠️ **בלי `border-block-end` כאן.** קו-השיער מתחת לכותרת מגיע מ-
           `td + td` של השדה הראשון; שני הקווים יחד יצרו קו-כפול דק. */
        border-block-start: 0 !important;
        padding-inline-end: 2.2rem !important;   /* מקום לתיבת-הסימון שממול */
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-select] + td::before,
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr > td:first-child:not([data-kv-select])::before {
        content: none !important;                /* לכותרת אין תווית */
    }
    /* הקישור בכותרת הוא **הכותרת**, לא «קישור» — צבע-טקסט, לא כחול-מערכת. */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-select] + td > a,
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr > td:first-child:not([data-kv-select]) > a {
        color: inherit;
        text-decoration: none;
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-select] + td > div,
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr > td:first-child:not([data-kv-select]) > div {
        padding-inline-start: 0;                 /* אין עמודת-תווית בכותרת */
        font-weight: 400;
    }
    /* תיבת-הסימון: פקד בפינה, לא שדה בשורה. */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-select] {
        position: absolute;
        inset-block-start: 12px;
        inset-inline-end: 14px;
        padding: 0 !important;
        border: 0 !important;
        margin: 0;
        z-index: 1;
    }
    /* גולל-הטבלה (`max-height:70vh`) יוצר בטלפון גלילה-בתוך-גלילה מיותרת:
       הכרטיסים כבר זורמים לאורך העמוד. ⚠️ **רק** לגולל שהטבלה שבתוכו אכן
       הפכה לכרטיסים — טבלה שנשארה טבלה עדיין צריכה את הגלילה שלה, ובלעדיה
       `html,body{overflow-x:hidden}` היה חותך אותה בלי דרך להגיע לחתוך. */
    body:not(.kv-tables-as-table) .kv-table-scroller:has(> table.kv-cards-on-phone) {
        max-height: none;
        overflow: visible;
    }
}

/* ---------- תפריט-עמודה (סינון/מיון) — הרקע ------------------------------
 *
 * 🔴 **הבאג שזה מתקן, ודווח מצילום‑מסך:** הגיליון «סינון ומיון — בחר עמודה»
 * נפתח בטלפון **שקוף**, והכרטיס שמתחתיו נראה דרכו — תוויות וערכים זה על
 * גבי זה, ומסך שאי‑אפשר לקרוא.
 *
 * ⚠️ **והשורש אינו «נשכח רקע», אלא **איפה** הרקע ישב.** תפריט‑העמודה
 * הרגיל קובע `background` ב‑**inline style** מתוך ה‑JS
 * (`table-controls.js` → `menu.style.cssText`), ולמחלקה `.kv-filter-menu`
 * **לא היה שום כלל CSS**. ⇒ כל אלמנט חדש שקיבל את המחלקה ירש ממנה
 * **מיקום, מסגרת וצל — ולא רקע**. `ensurePicker()` הוא בדיוק כזה: הוא
 * כותב `display:none` בלבד.
 *
 * 🔑 **ולכן התיקון כאן ולא בעוד `inline`:** רקע שני ב‑JS היה **מקור שני
 * לאותו ערך**, והדפוס הזה כבר נשבר בפרויקט הזה יותר מפעם אחת. מרגע
 * שהמחלקה נושאת את הרקע, **כל** מי שיקבל אותה בעתיד יקבל אותו איתה.
 *
 * ⛔ **ואין כאן רגרסיה לתפריט הקיים:** `inline` גובר על מחלקה, ולכן
 * תפריט‑העמודה ממשיך להשתמש בדיוק באותו ערך שהוא כותב היום.
 */
.kv-filter-menu {
    /* ⚠️ אותו משתנה שה‑JS כותב — ולא צבע קשיח: `--color-surface` מוגדר
       גם למצב הבהיר (#ffffff) וגם לכהה (#1e293b), ורקע קשיח היה מייצר
       גיליון לבן עם טקסט בהיר במצב כהה. */
    background: var(--color-surface, #ffffff);
}

/* ---------- תפריט-עמודה (סינון/מיון) בטלפון — גיליון-תחתון ---------------
 *
 * ⚠️ **הבאג שזה מחליף.** התפריט הוצב ב-`position:absolute` לפי מיקום הסמל,
 * **בלי הצמדה לגבולות המסך**: ברוחב טלפון סמל שיושב ב-x=230 פתח תפריט
 * ברוחב 260 שנגמר ב-490 — כלומר 130px מחוץ למסך. ומכיוון ש-
 * `html,body{overflow-x:hidden}` (למטה) חוסם גלילה אופקית, החלק החתוך
 * לא היה **נגיש כלל**. תיקון-קואורדינטות לבדו רודף אחרי משפחת-באגים
 * שלמה; גיליון-תחתון ברוחב מלא **אינו יכול** לצאת מהמסך.
 *
 * 🔑 החוקים כאן גוברים על ה-inline style שה-JS כותב (`position/left/top`),
 * ולכן הם `!important` — ה-JS ממשיך לכתוב מיקום לדסקטופ, וה-CSS מבטל אותו
 * כשמדובר בגיליון.
 */
@media (max-width: 600px) {
    .kv-filter-menu--sheet {
        position: fixed !important;
        inset-inline: 0 !important;
        left: 0 !important; right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 80vh !important;
        overflow: auto !important;
        border-radius: 12px 12px 0 0 !important;
        border: 1px solid var(--color-border, #e5e7eb) !important;
        box-shadow: 0 -8px 28px rgba(0,0,0,.22) !important;
        padding: 0.9rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1000 !important;
    }
    /* שדות בתוך הגיליון תופסים את מלוא הרוחב — בטלפון אין מקום לשורה. */
    .kv-filter-menu--sheet select,
    .kv-filter-menu--sheet input[type="text"],
    .kv-filter-menu--sheet input[type="search"],
    .kv-filter-menu--sheet input[type="date"],
    .kv-filter-menu--sheet input[type="number"] {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 16px;      /* < 16px גורם ל-iOS להגדיל את העמוד בפוקוס */
    }
    .kv-filter-menu--sheet button { min-height: 40px; }   /* יעד-מגע */
}
/* בדסקטופ הגיליון אינו קיים — התפריט נשאר צמוד-לסמל (ומוצמד לגבולות ב-JS). */

/* ---------- Prevent horizontal page overflow caused by stray inline styles
   in user views. html-level guard — any descendant that overflows still
   triggers internal scroll inside its own container, never the body. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- .app-main extra padding gone on tiniest screens
   (already 8px from M1, even less here for max content width) */
@media (max-width: 360px) {
    .app-main { padding: 8px 6px; }
    .card { padding: 10px 8px; }
}

/* ========================================================================
   M7 — compact KPIs, table↔cards toggle, etc.
   ======================================================================== */

/* Home dashboard KPI cards — compact on phones so 4-6 fit in one screen. */
@media (max-width: 480px) {
    .kv-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
    .kv-kpi-card {
        padding: 8px 10px !important;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
    }
    .kv-kpi-card-title { font-size: 0.72rem !important; margin-bottom: 2px !important; }
    .kv-kpi-card-value { font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.1 !important; }
    .kv-kpi-card-sub   { font-size: 0.7rem !important; margin-top: 1px !important; }
}

/* Even tinier — 1 column at 360px feels nicer than 2 cramped */
@media (max-width: 360px) {
    .kv-kpi-grid { grid-template-columns: 1fr !important; }
}

/* M7 — table↔cards toggle. Default below 600px = cards.
   body.kv-tables-as-table forces table view even on phone (with scroll). */
@media (max-width: 600px) {
    body.kv-tables-as-table table.kv-cards-on-phone {
        display: table !important;
        white-space: nowrap !important;
        min-width: 100% !important;
    }
    body.kv-tables-as-table table.kv-cards-on-phone thead { display: table-header-group !important; }
    body.kv-tables-as-table table.kv-cards-on-phone tbody { display: table-row-group !important; }
    body.kv-tables-as-table table.kv-cards-on-phone tr {
        display: table-row !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    body.kv-tables-as-table table.kv-cards-on-phone td {
        display: table-cell !important;
        justify-content: initial !important;
        gap: 0 !important;
        padding: 6px 8px !important;
        text-align: start !important;
        white-space: nowrap !important;
    }
    body.kv-tables-as-table table.kv-cards-on-phone td::before { content: none !important; }
}

/* The toggle button in the header — only visible on mobile */
.header-table-mode { display: none; }
@media (max-width: 600px) {
    .header-table-mode {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        border: 1px solid var(--color-border); border-radius: 50%;
        background: #fff;
        font-size: 0.95rem; line-height: 1;
        cursor: pointer;
    }
    .header-table-mode:hover { background: #f1f5f9; }
    .header-table-mode--cards { color: #1d4ed8; }
    .header-table-mode--table { color: #475569; }
}

/* =================================================================
 * M8 — Mobile map panels (dropdown from ▼ button → panel overlay)
 *
 * Desktop: each panel is a floating draggable in a Leaflet corner;
 * the ▼ next to ✏ עריכה pops a checkbox list of show/hide prefs.
 *
 * Mobile: floating-panel paradigm overlaps + covers the map (see
 * user screenshots), and the per-panel show/hide pref isn't useful
 * (there's no room to lay them all out anyway). So:
 *   1. Side dock rails are hidden — no room on a phone.
 *   2. Panels stay in their Leaflet corners but are kept hidden
 *      (display:none) by refreshEditOnlyPanels.
 *   3. The existing ▼ popup, on mobile, lists each available panel
 *      as a big tappable row instead of a checkbox.
 *   4. Tapping a row hoists that panel into .kv-map-wrap and turns
 *      it into a top-anchored full-width sheet over the map.
 *   5. ✕ (was −) in the sheet, or tapping outside it, closes it.
 *      Closing returns the panel to its Leaflet-corner parent and
 *      lets refreshEditOnlyPanels re-hide it.
 * ================================================================= */
@media (max-width: 768px) {
    /* No room for side rails on a phone */
    .kv-dock.kv-dock-left,
    .kv-dock.kv-dock-right {
        display: none !important;
        flex: 0 0 0 !important; width: 0 !important;
    }

    .kv-map-wrap {
        position: relative;            /* anchor for the panel overlay */
        height: 65vh !important;
        min-height: 320px !important;
    }

    /* ── Mobile popup (▼ tap-to-open list) — compact card near trigger ── */
    .kv-panel-popup--mobile {
        position: fixed !important;
        left: 8px !important;
        right: auto !important;
        bottom: 64px !important;       /* just above the ✏ + ▼ buttons */
        width: min(80vw, 240px) !important;
        max-width: none !important;
        min-width: 0 !important;
        max-height: 50vh;
        overflow-y: auto;
        padding: 4px !important;
        z-index: 1100;
    }
    .kv-panel-popup--mobile .kv-panel-popup-title {
        padding: 4px 8px;
        margin-bottom: 2px;
    }
    .kv-panel-popup-open {
        display: block;
        width: 100%;
        padding: 10px 12px !important;
        text-align: start;
        background: #fff;
        border: 0 !important;
        border-bottom: 1px solid var(--color-border) !important;
        border-radius: 0 !important;
        font: inherit; font-size: 0.9rem !important;
        color: #1e293b;
        cursor: pointer;
    }
    .kv-panel-popup-open:last-child { border-bottom: 0 !important; }
    .kv-panel-popup-open:active { background: #eef2ff; }

    /* ── The panel itself when shown via mobile open ──
       Compact card anchored above the ✏ + ▼ buttons (bottom-left), so
       the user can keep editing the map while the panel stays open. */
    .kv-fp.kv-fp-mobile {
        position: absolute !important;
        top: auto !important;
        bottom: 60px !important;
        left: 8px !important;
        right: auto !important;
        inset-inline: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        width: min(85vw, 300px) !important;
        max-height: 45vh !important;
        overflow-y: auto !important;
        background: #fff !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
        transform: none !important;
        z-index: 1000;
        direction: rtl;
    }
    /* Override desktop "collapsed → body hidden" — mobile doesn't use that */
    .kv-fp.kv-fp-mobile.kv-fp-collapsed > *:not(.kv-fp-bar) {
        display: revert !important;
    }
    .kv-fp.kv-fp-mobile .kv-fp-bar {
        margin: 0 !important;
        padding: 5px 9px !important;
        background: #f1f5f9 !important;
        border-radius: 8px 8px 0 0 !important;
        border-bottom: 1px solid var(--color-border) !important;
        cursor: default !important;
        touch-action: auto !important;
        font-size: 0.78rem !important;
    }
    /* The collapse (−) button repurposed as a close (✕) on mobile */
    .kv-fp.kv-fp-mobile .kv-fp-collapse {
        pointer-events: auto !important;
        font-size: 0.8rem !important;
        font-weight: bold !important;
        color: #b91c1c !important;
        background: #fef2f2 !important;
        border: 1px solid #fecaca !important;
        width: 22px !important; height: 22px !important;
    }
    .kv-fp.kv-fp-mobile > *:not(.kv-fp-bar) {
        padding: 6px 8px !important;
        font-size: 0.78rem !important;
    }
    /* Compact fields and buttons inside the panel body */
    .kv-fp.kv-fp-mobile input,
    .kv-fp.kv-fp-mobile select,
    .kv-fp.kv-fp-mobile textarea {
        font-size: 0.78rem !important;
        padding: 4px 6px !important;
    }
    .kv-fp.kv-fp-mobile .kv-bgctl-btn {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }
    .kv-fp.kv-fp-mobile .kv-bgctl-hint {
        font-size: 0.7rem !important;
        padding: 4px 6px !important;
    }
    .kv-fp.kv-fp-mobile .kv-bgctl-row { gap: 4px !important; }
    .kv-fp.kv-fp-mobile .kv-bgctl-grid { gap: 3px 4px !important; }
}

/* ============================================================
 * Dark theme — retrofit contrast for hard-coded inline colors.
 * Many views carry inline light-theme colors (background:#fff, color:#475569…)
 * that never flip, giving "dark text on dark" / glaring white boxes. These
 * attribute-selector overrides flip the COMMON palette in one place, so dark
 * mode is readable without editing 100+ views. Applies only inside the main app
 * (where <html data-theme="dark"> is set) — login/platform views are untouched.
 * ============================================================ */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#FFF"] { background-color: #1e293b !important; }

[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f1f5f9"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f7fafc"],
[data-theme="dark"] [style*="background: #f7fafc"],
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background:#f5f7fa"] { background-color: #0f172a !important; }

/* Mid-grey fills (dividers, progress-bar tracks, --color-border used as a bg) → dark border tone */
[data-theme="dark"] [style*="background:#e2e8f0"],
[data-theme="dark"] [style*="background: #e2e8f0"],
[data-theme="dark"] [style*="background:#e5e7eb"],
[data-theme="dark"] [style*="background: #e5e7eb"],
[data-theme="dark"] [style*="background:#edf2f7"],
[data-theme="dark"] [style*="background:#cbd5e1"] { background-color: #334155 !important; }

/* Colored notice/flash boxes — flip BOTH background and text so they don't go dark-on-dark.
   Saturated solids (e.g. #2563eb / #dc2626 with white text) are intentionally NOT listed —
   they already read fine on a dark page. Only the light pastel tints are flipped here. */
/* GREEN tints → dark green */
[data-theme="dark"] [style*="background:#d1fae5"],
[data-theme="dark"] [style*="background: #d1fae5"],
[data-theme="dark"] [style*="background:#dcfce7"],
[data-theme="dark"] [style*="background: #dcfce7"],
[data-theme="dark"] [style*="background:#f0fdf4"],
[data-theme="dark"] [style*="background: #f0fdf4"],
[data-theme="dark"] [style*="background:#ecfdf5"],
[data-theme="dark"] [style*="background: #ecfdf5"],
[data-theme="dark"] [style*="background:#bbf7d0"],
[data-theme="dark"] [style*="background: #bbf7d0"] { background-color: #064e3b !important; color: #a7f3d0 !important; border-color: #065f46 !important; }
/* AMBER / YELLOW / ORANGE tints → dark amber  (note: #fff7ed/#fffbeb also match the broad #fff
   rule above; these come later in source order so amber wins) */
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"],
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background: #fef3c7"],
[data-theme="dark"] [style*="background:#fef9c3"],
[data-theme="dark"] [style*="background: #fef9c3"],
[data-theme="dark"] [style*="background:#fefce8"],
[data-theme="dark"] [style*="background: #fefce8"],
[data-theme="dark"] [style*="background:#fff7ed"],
[data-theme="dark"] [style*="background: #fff7ed"],
[data-theme="dark"] [style*="background:#fed7aa"],
[data-theme="dark"] [style*="background: #fed7aa"],
[data-theme="dark"] [style*="background:#fde68a"],
[data-theme="dark"] [style*="background: #fde68a"],
[data-theme="dark"] [style*="background:#fcd34d"] { background-color: #422006 !important; color: #fde68a !important; border-color: #854d0e !important; }
/* RED tints → dark red */
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background: #fee2e2"],
[data-theme="dark"] [style*="background:#fde8e8"],
[data-theme="dark"] [style*="background: #fde8e8"],
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"] { background-color: #450a0a !important; color: #fecaca !important; border-color: #7f1d1d !important; }
/* BLUE tints → dark blue */
[data-theme="dark"] [style*="background:#f0f9ff"],
[data-theme="dark"] [style*="background: #f0f9ff"],
[data-theme="dark"] [style*="background:#eff6ff"],
[data-theme="dark"] [style*="background: #eff6ff"],
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background: #dbeafe"],
[data-theme="dark"] [style*="background:#e0f2fe"],
[data-theme="dark"] [style*="background: #e0f2fe"] { background-color: #0c2942 !important; color: #bfdbfe !important; border-color: #1e3a8a !important; }
/* INDIGO / VIOLET tints → dark indigo */
[data-theme="dark"] [style*="background:#eef2ff"],
[data-theme="dark"] [style*="background: #eef2ff"],
[data-theme="dark"] [style*="background:#e0e7ff"],
[data-theme="dark"] [style*="background: #e0e7ff"],
[data-theme="dark"] [style*="background:#ede9fe"],
[data-theme="dark"] [style*="background: #ede9fe"],
[data-theme="dark"] [style*="background:#ddd6fe"],
[data-theme="dark"] [style*="background: #ddd6fe"],
[data-theme="dark"] [style*="background:#faf5ff"],
[data-theme="dark"] [style*="background: #faf5ff"] { background-color: #1e1b4b !important; color: #c7d2fe !important; border-color: #3730a3 !important; }

[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color:#4a5568"],
[data-theme="dark"] [style*="color: #4a5568"],
[data-theme="dark"] [style*="color:#475467"],
[data-theme="dark"] [style*="color:#6b7280"] { color: #cbd5e1 !important; }

[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#1a202c"],
[data-theme="dark"] [style*="color:#2d3748"],
[data-theme="dark"] [style*="color:#1f2937"],
[data-theme="dark"] [style*="color:#212529"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color:#222"],
[data-theme="dark"] [style*="color:#333"] { color: #e2e8f0 !important; }

/* Dark mode — saturated text colors used STANDALONE (headings/labels with an inline
   color: but no tinted background, e.g. report-card titles "דוח קברים"). The tint-bg
   rules above already relight colored text INSIDE pills; this catches the rest so
   dark blue/purple/green/red/amber headings don't sit dark-on-dark. */
[data-theme="dark"] [style*="color:#0369a1"],
[data-theme="dark"] [style*="color: #0369a1"],
[data-theme="dark"] [style*="color:#075985"],
[data-theme="dark"] [style*="color:#0c4a6e"],
[data-theme="dark"] [style*="color:#1e40af"],
[data-theme="dark"] [style*="color:#1e3a8a"],
[data-theme="dark"] [style*="color:#0e7490"],
[data-theme="dark"] [style*="color:#0891b2"] { color: #60a5fa !important; }

[data-theme="dark"] [style*="color:#7c3aed"],
[data-theme="dark"] [style*="color: #7c3aed"],
[data-theme="dark"] [style*="color:#6d28d9"],
[data-theme="dark"] [style*="color:#4338ca"],
[data-theme="dark"] [style*="color:#3730a3"],
[data-theme="dark"] [style*="color:#6366f1"] { color: #a78bfa !important; }

[data-theme="dark"] [style*="color:#15803d"],
[data-theme="dark"] [style*="color: #15803d"],
[data-theme="dark"] [style*="color:#166534"],
[data-theme="dark"] [style*="color:#14532d"],
[data-theme="dark"] [style*="color:#047857"],
[data-theme="dark"] [style*="color:#065f46"] { color: #34d399 !important; }

[data-theme="dark"] [style*="color:#7f1d1d"],
[data-theme="dark"] [style*="color: #7f1d1d"],
[data-theme="dark"] [style*="color:#991b1b"],
[data-theme="dark"] [style*="color:#b91c1c"] { color: #f87171 !important; }

[data-theme="dark"] [style*="color:#78350f"],
[data-theme="dark"] [style*="color: #78350f"],
[data-theme="dark"] [style*="color:#92400e"],
[data-theme="dark"] [style*="color:#a16207"],
[data-theme="dark"] [style*="color:#9a3412"],
[data-theme="dark"] [style*="color:#854d0e"],
[data-theme="dark"] [style*="color:#b45309"] { color: #fbbf24 !important; }

[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
[data-theme="dark"] [style*="border:1px solid #cbd5e1"],
[data-theme="dark"] [style*="border-color:#e2e8f0"],
[data-theme="dark"] [style*="border-bottom:1px solid #e"],
[data-theme="dark"] [style*="border-top:1px solid #e"] { border-color: #334155 !important; }

/* Map overlays / popups + status pills */
[data-theme="dark"] .kv-em,
[data-theme="dark"] .kv-map-editbtn,
[data-theme="dark"] .kv-map-paneltoggle,
[data-theme="dark"] .kv-panel-popup,
[data-theme="dark"] .kv-em-btn { background: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
[data-theme="dark"] .kv-em-h,
[data-theme="dark"] .kv-panel-popup-title { color: #cbd5e1 !important; }

/* Dark mode — the rest of the map chrome the block above didn't cover: the map
   container + dock rails, floating-panel headers, background-image controls, and
   Leaflet's own controls. (Map tiles/imagery intentionally stay as-is.) */
[data-theme="dark"] .kv-map-wrap { background: #0f172a; }
[data-theme="dark"] .kv-dock { background: #0f172a; }
[data-theme="dark"] .kv-map-bgctl { background: #1e293b !important; color: #f1f5f9; border-color: #334155; }
[data-theme="dark"] .kv-fp-bar { background: #0f172a; border-bottom-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .kv-fp-bar:hover { background: #1e293b; }
[data-theme="dark"] .kv-fp-collapse { color: #cbd5e1; }
[data-theme="dark"] .kv-fp-collapse:hover { background: #334155; border-color: #475569; color: #f1f5f9; }
[data-theme="dark"] .kv-map-paneltoggle:hover,
[data-theme="dark"] .kv-panel-popup-row:hover { background: #334155; }
[data-theme="dark"] .kv-bgctl-btn { background: #334155; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .kv-bgctl-btn:hover { background: #475569; }
[data-theme="dark"] .kv-bgctl-hint { background: #0f172a; border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .kv-bgctl-cell { color: #cbd5e1; }
[data-theme="dark"] .kv-bgctl-cell input[type=number] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .kv-bgctl-upload { color: #60a5fa; }
/* Leaflet's own controls (zoom +/-, layer switcher, popups, attribution) */
[data-theme="dark"] .leaflet-bar a,
[data-theme="dark"] .leaflet-control-layers,
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .leaflet-bar a { border-bottom-color: #475569; }
[data-theme="dark"] .leaflet-bar a:hover { background: #334155; }
[data-theme="dark"] .leaflet-control-attribution { background: rgba(15,23,42,.85) !important; }
[data-theme="dark"] .leaflet-control-attribution,
[data-theme="dark"] .leaflet-control-attribution a { color: #94a3b8 !important; }

/* Dark mode — form controls. The app never styled these for dark explicitly
   (it leaned on the browser default, which renders them LIGHT). Set them dark
   here so inputs/selects/textareas match the theme. !important beats inline
   light backgrounds (e.g. the header search). Checkboxes/radios/ranges/color
   keep their native rendering. */
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #94a3b8 !important; }
[data-theme="dark"] select option { background-color: #1e293b; color: #f1f5f9; }

/* Dark mode — documents explorer (.kv-doc-*, on customer/grave detail pages).
   The component hardcodes light surfaces (#fff toolbar/footer/menu, #f8fafc grid,
   #f1f5f9 segments) that never flip. Give it a coherent dark skin; semantic tints
   (folder=amber, selected=blue, private=red) keep their meaning, darkened. */
[data-theme="dark"] .kv-doc-toolbar,
[data-theme="dark"] .kv-doc-footer { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .kv-doc-grid { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .kv-doc-seg { background: #0f172a; }
[data-theme="dark"] .kv-doc-seg button { color: #94a3b8; }
[data-theme="dark"] .kv-doc-seg button:hover { color: #f1f5f9; }
[data-theme="dark"] .kv-doc-seg button.kv-doc-seg-active { background: #334155; color: #f1f5f9; }
[data-theme="dark"] .kv-doc-bucket-toggle button[data-bucket="public"].kv-doc-seg-active  { color: #60a5fa; }
[data-theme="dark"] .kv-doc-bucket-toggle button[data-bucket="private"].kv-doc-seg-active { color: #f87171; }
[data-theme="dark"] .kv-doc-tb-more { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .kv-doc-tb-more:hover { background: #475569; color: #f1f5f9; }
[data-theme="dark"] .kv-doc-card-more:hover,
[data-theme="dark"] .kv-doc-row-more:hover,
[data-theme="dark"] .kv-doc-ctx button:hover { background: #334155; color: #f1f5f9; }
[data-theme="dark"] .kv-doc-breadcrumb { color: #cbd5e1; }
[data-theme="dark"] .kv-doc-crumb { color: #60a5fa; }
[data-theme="dark"] .kv-doc-crumb:hover { background: #1e1b4b; }
[data-theme="dark"] .kv-doc-card-icon { color: #94a3b8; }
[data-theme="dark"] .kv-doc-card:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .kv-doc-card-selected,
[data-theme="dark"] .kv-doc-row.kv-doc-card-selected { background: #0c2942; }
[data-theme="dark"] .kv-doc-card-selected:hover { background: #12395c; }
[data-theme="dark"] .kv-doc-card-selected .kv-doc-tile-name { color: #bfdbfe; }
[data-theme="dark"] .kv-doc-grid-list .kv-doc-card-folder.kv-doc-row { background: #422006; }
[data-theme="dark"] .kv-doc-grid-list .kv-doc-card-folder.kv-doc-row:hover { background: #573009; }
[data-theme="dark"] .kv-doc-grid-list .kv-doc-row:hover { background: #1e293b; }
[data-theme="dark"] .kv-doc-row.kv-doc-card-droptarget { background: #064e3b; }
[data-theme="dark"] .kv-doc-ctx { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .kv-doc-ctx button { color: #e2e8f0; }
[data-theme="dark"] .kv-doc-ctx-sep { background: #334155; }
[data-theme="dark"] .kv-doc-modal { background: #1e293b; color: #f1f5f9; }
[data-theme="dark"] .kv-doc-modal h3, [data-theme="dark"] .kv-doc-modal td { color: #f1f5f9; }
[data-theme="dark"] .kv-doc-modal th { color: #94a3b8; }
[data-theme="dark"] .kv-doc-modal th, [data-theme="dark"] .kv-doc-modal td { border-bottom-color: #334155; }

/* Dashboard widgets/KPIs (home.php) now use theme variables directly
   (--color-bg / --color-surface / --color-accent / --color-border), so they
   self-adapt to dark with no per-component override needed here. */
/* Bare .btn (no btn-* variant) inherits the browser's light-grey button — give it
   a dark surface. The :not([class*="btn-"]) guard leaves btn-primary/btn-ghost alone. */
[data-theme="dark"] .btn:not([class*="btn-"]) { background: #334155; color: #e2e8f0; border-color: #475569; }
/* Primary buttons: --color-accent (#60a5fa) is tuned for LINKS on dark and is too
   light under white button text (~2.5:1). Use a deeper blue for the button surface
   so "+ new", "search", "generate PDF" etc. read clearly (white on #2563eb ≈ 5:1). */
[data-theme="dark"] .btn-primary { background: #2563eb; }
[data-theme="dark"] .btn-primary:hover { background: #1d4ed8; }
[data-theme="dark"] .pill-ok      { background: #064e3b; color: #a7f3d0; }
[data-theme="dark"] .pill-down    { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .pill-pending { background: #78350f; color: #fde68a; }

/* ============================================================================
   מסכי-הגדרות במובייל — לשוניות נגללות + קארדים נפתחים
   ----------------------------------------------------------------------------
   הדייר: «המסך הזה לא כל כך רספונסיבי… והתפריט העליון כל האופציות מפוזרות
   בצורה לא נגישה לטלפון». 12 לשוניות נשברו ל‑7 שורות, ומסך אחד מחזיק
   15 קארדים פתוחים בו‑זמנית.
   ========================================================================= */

/* ── רצועת-הלשוניות ─────────────────────────────────────────────────────── */
.kv-subnav-scroll {
    display: flex;
    gap: .5rem;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;                       /* מחשב: יש רוחב, גלישה קריאה יותר */
}
.kv-subnav-tab {
    padding: .5rem .9rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--color-text-muted);
    white-space: nowrap;                   /* תווית לא נשברת באמצע */
}
.kv-subnav-tab.is-on {
    border-bottom-color: var(--color-accent);
    font-weight: 600;
    color: var(--color-text);
}

@media (max-width: 767px) {
    /* ⚠️ **גלילה אופקית — בחירת הדייר.** היא מסתירה לשוניות מחוץ למסך, ולכן
       יש כאן שני פיצויים: `scroll-snap` שמעגן כל לשונית, ומסכת‑דהייה בקצה
       שמסמנת שיש עוד. הלשונית הפעילה נגללת לתצוגה ב-JS. */
    .kv-subnav-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;             /* פס-הגלילה גונב גובה בטלפון */
        padding-bottom: 2px;
        -webkit-mask-image: linear-gradient(to left, transparent 0, #000 1.5rem);
                mask-image: linear-gradient(to left, transparent 0, #000 1.5rem);
    }
    .kv-subnav-scroll::-webkit-scrollbar { display: none; }
    .kv-subnav-tab { scroll-snap-align: center; }
    /* T023: רצועת-השכנים של אזור-ההגדרות — במחשב בלבד. בטלפון הניווט הוא
       המרכז `/settings`; הרצועה הנגללת הייתה בדיוק מה שהבעלים כינה «מגעיל». */
    .kv-subnav-desktop { display: none; }
}

/* ── T023: מרכז-ההגדרות + קישור-חזרה ──────────────────────────────────────
   העיצוב אושר ע"י הבעלים בעמוד-דוגמה («הדוגמה מושלמת»): רשימה מקובצת
   בקלפים, שורות של 56px+ (מטרת-מגע), טקסט כהה על רקע בהיר, בלי אמוג׳י.
   ⚠️ צבעים רק מהמשתנים — כך מצב-כהה ממשיך לעבוד בלי כללים נוספים. */
.kv-set-hub { max-width: 720px; margin: 0 auto; }
.kv-set-hub-head { margin-bottom: 1.25rem; }
.kv-set-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 .9rem; color: var(--color-text); }
.kv-set-search {
    display: flex; align-items: center; gap: .6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0 .9rem;
    min-height: 48px;
    color: var(--color-text-muted);
}
.kv-set-search:focus-within { border-color: var(--color-accent); }
.kv-set-search input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-size: 1rem;                       /* ≥16px: iOS לא מגדיל את המסך במיקוד */
    color: var(--color-text); min-width: 0;
}
.kv-set-group { margin-bottom: 1.5rem; }
.kv-set-group-title {
    display: flex; align-items: center; gap: .5rem;
    font-size: .9rem; font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 .25rem .5rem;
}
.kv-set-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}
.kv-set-row {
    display: flex; align-items: center; gap: .75rem;
    min-height: 56px;
    padding: .7rem 1rem;
    text-decoration: none;
    color: var(--color-text);
}
.kv-set-row + .kv-set-row { border-top: 1px solid var(--color-border); }
.kv-set-row:hover, .kv-set-row:focus-visible { background: var(--color-bg); }
.kv-set-row-main { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.kv-set-row-label { font-size: 1.02rem; font-weight: 600; }
.kv-set-row-desc  { font-size: .88rem; color: var(--color-text-muted); line-height: 1.4; }
.kv-set-chev { flex: none; color: var(--color-text-muted); }
.kv-set-empty { text-align: center; color: var(--color-text-muted); padding: 2rem 0; }

.kv-set-back {
    display: inline-flex; align-items: center; gap: .3rem;
    min-height: 44px;                      /* מטרת-מגע גם כשהטקסט קצר */
    margin-bottom: .5rem;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}
.kv-set-back:hover { text-decoration: underline; }

/* בורר-מקטעים (במקום לשוניות-בתוך-עמוד). ⚠️ גולש לשתי שורות בטלפון צר
   ולא נגלל — 4 מקטעים נראים כולם, ואף אחד לא מוסתר מחוץ למסך. */
.kv-seg {
    display: flex; flex-wrap: wrap; gap: 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.25rem;
}
.kv-seg-btn {
    flex: 1 1 auto;
    min-height: 40px;
    padding: .4rem .9rem;
    border: 0; border-radius: 9px;
    background: transparent;
    font: inherit; font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.kv-seg-btn.is-on {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.kv-seg-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* אקורדיון-קלפים (עמודות-הסינון בהגדרות-כלליות). */
.kv-acc-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.kv-acc {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}
.kv-acc-head {
    display: flex; align-items: center; gap: .6rem;
    min-height: 56px;
    padding: .6rem 1rem;
    cursor: pointer;
    list-style: none;                      /* בלי משולש-ברירת-המחדל; יש חץ משלנו */
    font-weight: 600;
    color: var(--color-text);
}
.kv-acc-head::-webkit-details-marker { display: none; }
.kv-acc-head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.kv-acc-title { flex: 1; font-size: 1.02rem; }
.kv-acc-count {
    min-width: 28px; padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: .82rem; text-align: center;
}
.kv-acc-changed { font-size: .8rem; font-weight: 600; color: var(--color-accent); }
.kv-acc-chev { flex: none; color: var(--color-text-muted); transition: transform .15s; }
.kv-acc[open] .kv-acc-chev { transform: rotate(180deg); }
.kv-acc[open] .kv-acc-head { border-bottom: 1px solid var(--color-border); }
.kv-acc-row {
    display: flex; align-items: center; gap: .75rem;
    min-height: 56px;
    padding: .5rem 1rem;
}
.kv-acc-row + .kv-acc-row { border-top: 1px solid var(--color-border); }
.kv-acc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.kv-acc-label { font-weight: 500; color: var(--color-text); }
.kv-acc-hint { font-size: .82rem; color: var(--color-text-muted); }
.kv-acc-reset {
    border: 0; background: none; padding: 0;
    font: inherit; font-weight: 600;
    color: var(--color-accent);
    cursor: pointer; text-decoration: underline;
}
.kv-acc-select {
    flex: none;
    width: 136px; min-height: 40px;
    padding: 0 .6rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 1rem;                       /* ≥16px: iOS לא מגדיל את המסך במיקוד */
}

/* כפתור-שמירה דביק בתחתית — נגיש מכל מקום בטופס ארוך. */
.kv-sticky-save {
    position: sticky; bottom: 0; z-index: 5;
    margin-top: 1rem;
    padding: .75rem 0;
    background: linear-gradient(to top, var(--color-bg) 70%, transparent);
}
.kv-sticky-save .btn { width: 100%; min-height: 52px; font-size: 1.05rem; border-radius: 12px; }
@media (min-width: 768px) {
    .kv-sticky-save .btn { width: auto; min-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    .kv-acc-chev { transition: none; }
}

/* ── T024: טפסי-ההגדרות בטלפון — כלל אחד לכל המסכים ─────────────────────
   צילום-בעלים («יש עדיין בעיות רספונסיביות»): תווית ושדה בשתי עמודות דחסו את
   השדה, והטקסט נחתך באמצעו. נמדד ב-390px: 7 רשתות-טופס כאלה ב-19 המסכים, כל
   אחת בנויה אחרת (inline styles). ⇒ כלל אחד במקום עשרה תיקונים נקודתיים.
   🔑 **ההיקף: רק מסך שיש בו `.kv-set-back`** — כלומר מסכי-ההגדרות בלבד
   (הפרטיאל `_subnav.php` מוסיף אותו). רשתות בשאר המערכת לא נוגעות.
   ⚠️ **`:has(input, select, textarea)`** — רק רשת שמחזיקה שדות; רשת של כרטיסי-
   מידע או תצוגה-מקדימה נשארת כמות שהיא. */
@media (max-width: 767px) {
    .app-main:has(.kv-set-back) [style*="grid-template-columns"]:has(input, select, textarea) {
        grid-template-columns: 1fr !important;
        gap: .3rem .75rem !important;
    }
    /* תווית שמעל שדה — רווח לפני התווית הבאה, כדי שזוגות לא יתמזגו. */
    .app-main:has(.kv-set-back) [style*="grid-template-columns"]:has(input, select, textarea) > label:not(:first-child) {
        margin-top: .6rem;
    }
    /* ⚠️ **`min-width: 0` ל-fieldset.** ברירת-המחדל של הדפדפן היא `min-content` —
       שדה IBAN ארוך דוחף את המסגרת אל מחוץ לכרטיס, וזה מה שנחתך בצד בצילום. */
    .app-main:has(.kv-set-back) fieldset {
        min-width: 0;
        margin-inline: 0;
        padding: .5rem .75rem .75rem;
    }
    .app-main:has(.kv-set-back) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
    .app-main:has(.kv-set-back) select,
    .app-main:has(.kv-set-back) textarea {
        max-width: 100%;
        min-height: 44px;                  /* מטרת-מגע */
        font-size: 16px;                   /* ≥16px: iOS לא מגדיל את המסך במיקוד */
        box-sizing: border-box;
    }
    .app-main:has(.kv-set-back) [style*="grid-template-columns"]:has(input, select, textarea) > :is(input, select, textarea) {
        width: 100%;
    }
}

/* ── קארדים נפתחים ──────────────────────────────────────────────────────── */
/* ⚠️ הכותרת הופכת למתג רק כשה‑JS רץ; בלי JS אין `.kv-card-head` והמסך
   נשאר בדיוק כפי שהיה — פתוח ועובד. */
.kv-card-head {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 0;
}
.kv-card-head::before {
    content: '▾';
    font-size: .75em;
    line-height: 1;
    color: var(--color-text-muted);
    transition: transform .15s ease;
    flex: none;
}
.card.kv-shut > .kv-card-head::before { transform: rotate(90deg); }   /* RTL: סגור מצביע פנימה */
.card.kv-shut > .kv-card-head        { margin-bottom: 0; }
.card.kv-open > .kv-card-head        { margin-bottom: var(--space-md); }
.kv-card-head:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 6px;
}
/* קארד סגור מתכווץ לשורת-כותרת — זו כל הנקודה במובייל. */
.card.kv-shut { padding-bottom: var(--space-sm, .6rem); }

@media (prefers-reduced-motion: reduce) {
    .kv-card-head::before { transition: none; }
}

/* =========================================================================
   T026 — רכיבי מסכי-ההגדרות (`.kv-s-*`)
   -------------------------------------------------------------------------
   הבעלים, אחרי שלושה סבבי-תיקון נקודתיים: «השדות לא ברורים, הכותרות של
   השדה לא ברורות, מרווחים מיותרים… ולא עושה את העבודה מקיפה». ⇒ שפה אחת
   לכל 19 המסכים, על בסיס עמוד-הדוגמה שאושר («הדוגמה מושלמת»):
   קלף לבן מעוגל לכל קטע · תווית מודגשת מעל שדה · שדות 44px/16px ·
   רשימה במקום טבלה (שורה = פריט, פעולות בצד) · מרווחים קבועים (4/8/12/16).
   ⚠️ צבעים רק מהמשתנים — מצב-כהה עובד בלי כללים נוספים.
   ========================================================================= */
.kv-s { display: flex; flex-direction: column; gap: 12px; max-width: 880px; }
.kv-s-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kv-s-title { font-size: 1.35rem; font-weight: 700; margin: 0; color: var(--color-text); line-height: 1.3; }
.kv-s-head .kv-s-actions { margin-inline-start: auto; padding: 0; }
.kv-s-lead { margin: 0; color: var(--color-text-muted); font-size: .92rem; line-height: 1.55; }
.kv-s-flash {
    padding: 10px 14px; border-radius: 12px; font-weight: 600;
    background: #d1fae5; color: #064e3b; border: 1px solid #6ee7b7;
}
.kv-s-flash--err { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }

/* קטע = קלף */
.kv-s-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}
.kv-s-section-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0; }
.kv-s-section-title { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-text); }
.kv-s-section-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.kv-s-section-body > .kv-s-lead { margin-top: -4px; }
/* רשימה שבאה אחרי כותרת-קטע מקבלת קו-הפרדה; רשימה לבדה בקלף — לא (אחרת פס ריק בראש). */
.kv-s-section-head ~ .kv-s-list { border-top: 1px solid var(--color-border); margin-top: 12px; }

/* שדות */
.kv-s-fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) {
    .kv-s-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kv-s-fields--one { grid-template-columns: 1fr; max-width: 520px; }
}
.kv-s-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kv-s-field--wide { grid-column: 1 / -1; }
.kv-s-label { font-size: .95rem; font-weight: 600; color: var(--color-text); }
.kv-s-help { font-size: .84rem; color: var(--color-text-muted); line-height: 1.45; }
.kv-s-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), select, textarea),
.kv-s-input {
    width: 100%; min-height: 44px; box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-surface); color: var(--color-text);
    font: inherit; font-size: 16px;        /* ≥16px: iOS לא מגדיל במיקוד */
}
.kv-s-field textarea { padding: 10px 12px; min-height: 96px; line-height: 1.5; resize: vertical; }
.kv-s-field :is(input, select, textarea):focus { outline: 2px solid var(--color-accent); outline-offset: -1px; border-color: var(--color-accent); }
.kv-s-field input[type="color"] { width: 56px; height: 44px; padding: 2px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); }
.kv-s-check {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    font-weight: 500; color: var(--color-text); cursor: pointer;
}
.kv-s-check input { width: 20px; height: 20px; flex: none; accent-color: var(--color-accent); margin: 0; }
.kv-s-checks { display: flex; flex-direction: column; }
/* רשימת-סימון קצרה (שדות-חובה וכד') — שתי עמודות גם בטלפון: 15 תוויות קצרות בעמודה אחת
   היו גלילה ארוכה. ⚠️ לא תוויות ארוכות — לאלה kv-s-checks רגיל. */
.kv-s-checks--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
@media (min-width: 768px) { .kv-s-checks--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; } }

/* פעולות וכפתורים */
.kv-s-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kv-s-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 14px;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-surface); color: var(--color-text);
    font: inherit; font-size: .92rem; font-weight: 600;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.kv-s-btn:hover { background: var(--color-bg); text-decoration: none; color: var(--color-text); }
.kv-s-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.kv-s-btn--primary:hover { background: var(--color-accent-hover, var(--color-accent)); color: #fff; }
.kv-s-btn--danger { color: #b91c1c; border-color: #fecaca; }
.kv-s-btn--sm { min-height: 34px; padding: 0 10px; font-size: .85rem; }
.kv-s-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.kv-s-save { display: flex; gap: 8px; }
@media (max-width: 767px) { .kv-s-save .kv-s-btn--primary { flex: 1; min-height: 48px; font-size: 1rem; } }

/* כפתור-קובץ: input מוסתר בתוך label — במקום «בחירת קובץ | לא נבחר קובץ» של הדפדפן. */
.kv-s-file { position: relative; }
.kv-s-file input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }

/* תפריט נפתח (details) — למשל «ייבוא ▾» במקום שלושה טפסים זה לצד זה */
.kv-s-menu { position: relative; }
.kv-s-menu > summary { list-style: none; }
.kv-s-menu > summary::-webkit-details-marker { display: none; }
.kv-s-menu-panel {
    position: absolute; z-index: 20; inset-inline-end: 0; top: calc(100% + 6px);
    min-width: 220px; padding: 6px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    display: flex; flex-direction: column;
}
.kv-s-menu-panel .kv-s-btn { justify-content: flex-start; border: 0; width: 100%; }

/* רשימה במקום טבלה */
.kv-s-list { list-style: none; margin: 0; padding: 0; }
.kv-s-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px; }
.kv-s-item + .kv-s-item { border-top: 1px solid var(--color-border); }
.kv-s-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kv-s-item-title { font-weight: 600; color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
a.kv-s-item-title:hover { color: var(--color-accent); }
.kv-s-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; color: var(--color-text-muted); }
.kv-s-item-actions { flex: none; display: flex; gap: 6px; align-items: center; }
/* ⚠️ הפעולות נשארות בצד גם בטלפון: שורת-כפתורים נפרדת הכפילה את גובה כל פריט. */
.kv-s-badge {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
    font-size: .78rem; font-weight: 600; line-height: 1.5;
    background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border);
}
.kv-s-badge--ok   { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.kv-s-badge--warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.kv-s-badge--off  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.kv-s-empty { padding: 20px 16px; text-align: center; color: var(--color-text-muted); }

/* הידוק כללי בכל מסכי-ההגדרות בטלפון — שוליים שאכלו רוחב (הבעלים: «מרג'ינים ופדינגים מיותרים»). */
@media (max-width: 767px) {
    .app-main:has(.kv-set-back) { padding: 12px; }
    /* בורר-המקטעים נכנס בשורה אחת — בלי גלילה שמסתירה מקטע, ובלי שבירה לשתי שורות. */
    .kv-seg { flex-wrap: nowrap !important; }
    .kv-seg-btn { flex: 1 1 0; min-width: 0; padding: .4rem .3rem; font-size: .92rem; }
}

/* ── T026: רשת-ביטחון — שדות גולמיים בכל מסך-הגדרות נראים כמו שדות kv-s ──
   עורכים מורכבים (פריסת-הדפסה, מטריצת-הרשאות) נשארו עם markup ישן ו-style
   inline. בלי זה הם נראים כמו מסך אחר: «Choose File» של הדפדפן, בוררים אפורים,
   פינות של 4px. ⚠️ `!important` רק על מה ש-style inline דורס (פינות, רקע, גבול). */
.app-main:has(.kv-set-back) :is(input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], select, textarea):not(.kv-acc-select) {
    border: 1px solid var(--color-border) !important;
    border-radius: 10px !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text);
    min-height: 40px;
    box-sizing: border-box;
}
.app-main:has(.kv-set-back) textarea { padding-top: 8px; padding-bottom: 8px; }
.app-main:has(.kv-set-back) :is(input, select, textarea):focus {
    outline: 2px solid var(--color-accent); outline-offset: -1px; border-color: var(--color-accent) !important;
}
.app-main:has(.kv-set-back) input[type="checkbox"],
.app-main:has(.kv-set-back) input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-accent); }
.app-main:has(.kv-set-back) input[type="file"] {
    max-width: 100%; font: inherit; font-size: .9rem; color: var(--color-text-muted);
}
.app-main:has(.kv-set-back) input[type="file"]::file-selector-button {
    margin-inline-end: 10px; min-height: 38px; padding: 0 14px;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-surface); color: var(--color-text);
    font: inherit; font-weight: 600; cursor: pointer;
}
.app-main:has(.kv-set-back) fieldset {
    border: 1px solid var(--color-border); border-radius: 12px;
}
.app-main:has(.kv-set-back) legend { font-weight: 700; color: var(--color-text); padding: 0 6px; }
.app-main:has(.kv-set-back) label > span[style*="font-weight:500"] { font-weight: 600 !important; }

/* =========================================================================
   T026 v2 — «מערכת עשירה יותר, לא רק מסגרות לבנות»
   -------------------------------------------------------------------------
   הבעלים על מסך-הייחוס הראשון: «מקום לכתוב עורך, ייצוא — אייקון של עורך,
   אייקון של עיצוב, הכול בשורה אחת, ברור יותר, קריא יותר. מערכת יותר עשירה
   ולא רק מסגרות לבנות עם מלא מרג'ינים ופדינגים».
   ⇒ (1) פעולות = כפתורי-אייקון צבעוניים (`kv-s-ib`), לא מילים;
     (2) כל פריט פותח באריח-אייקון צבעוני (`kv-s-tile`) שמסמן את סוגו;
     (3) כותרת-קטע עם אריח משלה, על רקע מוכתם קלות — לא לבן-על-לבן;
     (4) ריווח הודק: 10–12px במקום 14–16px.
   הגוונים כמשתנים, ולכן במצב-כהה הם מתהפכים בבלוק אחד.
   ========================================================================= */
:root {
    --kv-t-blue-bg:   #e8f0fe; --kv-t-blue:   #1d5fc4;
    --kv-t-violet-bg: #f1eafe; --kv-t-violet: #6d28d9;
    --kv-t-green-bg:  #e3f6ec; --kv-t-green:  #047857;
    --kv-t-amber-bg:  #fff2db; --kv-t-amber:  #b45309;
    --kv-t-red-bg:    #fdeaea; --kv-t-red:    #b91c1c;
    --kv-t-slate-bg:  #eef1f5; --kv-t-slate:  #475569;
    --kv-t-teal-bg:   #e0f5f5; --kv-t-teal:   #0f766e;
}
[data-theme="dark"] {
    --kv-t-blue-bg:   rgba(59,130,246,.18); --kv-t-blue:   #93c5fd;
    --kv-t-violet-bg: rgba(139,92,246,.2);  --kv-t-violet: #c4b5fd;
    --kv-t-green-bg:  rgba(16,185,129,.18); --kv-t-green:  #6ee7b7;
    --kv-t-amber-bg:  rgba(245,158,11,.18); --kv-t-amber:  #fcd34d;
    --kv-t-red-bg:    rgba(239,68,68,.18);  --kv-t-red:    #fca5a5;
    --kv-t-slate-bg:  rgba(148,163,184,.18);--kv-t-slate:  #cbd5e1;
    --kv-t-teal-bg:   rgba(20,184,166,.18); --kv-t-teal:   #5eead4;
}

/* הידוק */
.kv-s { gap: 10px; }
.kv-s-section { border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.kv-s-section-head {
    padding: 10px 12px; gap: 10px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.kv-s-section-title { font-size: 1rem; }
.kv-s-section-body { padding: 12px; gap: 12px; }
.kv-s-section-head ~ .kv-s-list { border-top: 0; margin-top: 0; }
.kv-s-fields { gap: 12px; }
.kv-s-field { gap: 4px; }
.kv-s-item { padding: 10px 12px; gap: 10px; min-height: 60px; }

/* אריח-אייקון — בתחילת פריט, ובכותרת-קטע */
.kv-s-tile {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px;
    background: var(--kv-t-slate-bg); color: var(--kv-t-slate);
    font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.kv-s-section-head .kv-s-tile { width: 32px; height: 32px; border-radius: 9px; }
.kv-s-head .kv-s-tile { width: 36px; height: 36px; }

/* כפתור-אייקון */
.kv-s-ib {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    border: 0; padding: 0; cursor: pointer; text-decoration: none;
    background: var(--kv-t-slate-bg); color: var(--kv-t-slate);
    transition: filter .12s, transform .12s;
}
.kv-s-ib:hover { filter: brightness(.95); text-decoration: none; }
.kv-s-ib:active { transform: scale(.95); }
.kv-s-ib:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.kv-s-ib--primary { background: var(--color-accent); color: #fff; }

/* צבעים — לאריח, לכפתור-אייקון ולתג */
.kv-c-blue   { background: var(--kv-t-blue-bg)   !important; color: var(--kv-t-blue)   !important; }
.kv-c-violet { background: var(--kv-t-violet-bg) !important; color: var(--kv-t-violet) !important; }
.kv-c-green  { background: var(--kv-t-green-bg)  !important; color: var(--kv-t-green)  !important; }
.kv-c-amber  { background: var(--kv-t-amber-bg)  !important; color: var(--kv-t-amber)  !important; }
.kv-c-red    { background: var(--kv-t-red-bg)    !important; color: var(--kv-t-red)    !important; }
.kv-c-slate  { background: var(--kv-t-slate-bg)  !important; color: var(--kv-t-slate)  !important; }
.kv-c-teal   { background: var(--kv-t-teal-bg)   !important; color: var(--kv-t-teal)   !important; }
.kv-s-badge[class*="kv-c-"] { border-color: transparent; }

/* «הכול בשורה אחת»: כותרת-הפריט בשורה אחת עם קטיעה; מידע משני בשורה קטנה מתחתיה. */
/* ⚠️ שם ארוך נקטע אחרי שתי שורות ולא אחרי שורה אחת: בטלפון שלושה כפתורי-אייקון
   משאירים לשם ~170px, ו«שטר קבר עם חתימות…» הפך לחידה (צילום-בדיקה). */
.kv-s-item-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.kv-s-item-meta { font-size: .82rem; gap: 2px 6px; flex-wrap: wrap; }
@media (max-width: 767px) {
    .kv-s-item { padding: 10px; gap: 8px; }
    .kv-s-tile { width: 36px; height: 36px; border-radius: 10px; }
    .kv-s-ib { width: 36px; height: 36px; }
    .kv-s-item-actions { gap: 4px; }
}
.kv-s-item-actions { gap: 6px; }

/* כפתור-טקסט עם אייקון (לפעולות-ראש כמו «תבנית חדשה») */
.kv-s-btn svg { flex: none; }

/* קלף שמכיל תפריט-נפתח לא חותך אותו (בקטע קצר — למשל «תשלומים», שורה אחת — התפריט
   «+ מורשה» נחתך ולא היה אפשר להוסיף). הפינות העליונות נשמרות על הכותרת. */
.kv-s-section:has(.kv-s-menu) { overflow: visible; }
.kv-s-section:has(.kv-s-menu) > .kv-s-section-head { border-radius: 12px 12px 0 0; }

/* =========================================================================
   T026 v3 — לפי הסקיל «phone-first-design» שהבעלים צירף («קח השראה מהסקיל»)
   -------------------------------------------------------------------------
   הסקיל מתעד את הטעם של הבעלים ממערכת ניהול-הפרויקטים. מה שהוא שינה כאן:
   • «צפוף ונקי: קווים 1px, ריווח 4/8/12/16, רדיוס 10px — שורות בתוך מסגרת
     אחת, לא כרטיסים צפים עם צל» ⇒ בלי צל, בלי רקע אפור לכותרת-קטע.
   • «שורה אחת — נחתך ב-… ולא נשבר» ⇒ שם-פריט בשורה אחת.
   • כפתור-אייקון = אייקון לבד (`.icon-btn` בסקיל, בלי מסגרת ובלי מילוי) —
     הצבע נשאר באייקון עצמו ובריבוע שבתחילת השורה. זה גם מפנה רוחב לשם.
   • בורר-מקטעים: הנבחר ממולא בצבע-המותג.
   • תווית-שדה: קטנה ושקטה מעל השדה; השדה הוא העיקר.
   ========================================================================= */
.kv-s { gap: 12px; }
.kv-s-section { border-radius: 10px; box-shadow: none; }
.kv-s-section-head { background: var(--color-surface); padding: 8px 12px; min-height: 48px; }
.kv-s-section-head .kv-s-tile { width: 28px; height: 28px; border-radius: 8px; }
.kv-s-section-head .kv-s-tile svg { width: 16px; height: 16px; }
.kv-s-section-title { font-size: .95rem; font-weight: 600; }
.kv-s-section-body { padding: 12px; gap: 12px; }

/* שורה: 56px, ריבוע-אייקון 36px, שם בשורה אחת */
.kv-s-item { min-height: 56px; padding: 8px 12px; gap: 8px; }
.kv-s-tile { width: 36px; height: 36px; border-radius: 10px; }
.kv-s-item-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
/* שורת-המידע בשורה אחת — הטקסט נחתך ב-…, אבל **תג-סטטוס לעולם לא**: «חסר קובץ» הוא המידע
   החשוב בשורה, והוא נעלם מאחורי ה-… (צילום-בדיקה). */
.kv-s-item-meta { display: flex; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-width: 0; }
.kv-s-item-meta > :not(.kv-s-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.kv-s-item-meta > .kv-s-badge { flex: none; }
.kv-s-item:hover { background: var(--color-bg); }

/* כפתור-אייקון: אייקון לבד, צבעוני; רקע רק בריחוף/מיקוד. 40px = יעד-לחיצה של הסקיל. */
.kv-s-ib { width: 40px; height: 40px; border-radius: 10px; }
.kv-s-ib[class*="kv-c-"] { background: transparent !important; }
.kv-s-ib[class*="kv-c-"]:hover, .kv-s-ib[class*="kv-c-"]:focus-visible { background: var(--color-bg) !important; filter: none; }
.kv-s-item-actions { gap: 0; }
@media (max-width: 767px) { .kv-s-ib { width: 40px; height: 40px; } .kv-s-item-actions { gap: 0; } }

/* תווית-שדה: קטנה ושקטה; השדה בולט */
.kv-s-label { font-size: .82rem; font-weight: 500; color: var(--color-text-muted); }
.kv-s-field { gap: 2px; }
.kv-s-fields { gap: 8px 12px; }
.kv-s-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), select, textarea),
.kv-s-input { min-height: 40px; padding: 0 8px; }
.kv-s-field textarea { padding: 8px; }
.kv-s-field :is(input, select, textarea):focus { outline: 0; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--kv-t-blue-bg); }
/* «שדות קשורים — זה לצד זה, גם בטלפון» */
.kv-s-fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 767px) {
    .kv-s-fields:not(.kv-s-fields--one) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
}

/* בורר-מקטעים: מסגרת אחת, הנבחר ממולא במותג */
.kv-seg { background: var(--color-surface); padding: 0; gap: 0; border-radius: 10px; overflow: hidden; }
.kv-seg-btn { border-radius: 0; min-height: 40px; color: var(--color-text); font-weight: 500; }
.kv-seg-btn + .kv-seg-btn { border-inline-start: 1px solid var(--color-border); }
.kv-seg-btn.is-on { background: var(--color-accent); color: #fff; box-shadow: none; font-weight: 600; }

/* כפתורי-ראש */
.kv-s-btn { min-height: 40px; border-radius: 10px; padding: 0 12px; }
.kv-s-title { font-size: 1.2rem; }
/* קבוצות-העמודות: שורות בתוך מסגרת אחת עם קו-מפריד — לא כרטיסים צפים זה מתחת לזה (הסקיל). */
.kv-acc-list { gap: 0; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-surface); }
.kv-acc-list > .kv-acc { border: 0; border-radius: 0; }
.kv-acc-list > .kv-acc + .kv-acc { border-top: 1px solid var(--color-border); }
.kv-acc-head { min-height: 52px; padding: 8px 12px; }

/* =========================================================================
   T027 — רשימה בטלפון = שורות, לא כרטיס-ענק (הסקיל phone-first-design)
   -------------------------------------------------------------------------
   עד כאן כל רשומה ברשימה הייתה כרטיס עם *כל* העמודות, תווית ליד ערך, ורובן
   «—»: לקוח אחד מילא מסך שלם (צילום-בדיקה של «לקוחות» ב-390px). הסקיל:
   «רשימה = שורות עם קו מפריד בתוך מסגרת אחת, לא כרטיסים צפים עם צל»;
   שורה = כותרת מודגשת + שורת-משנה אפורה עם `·`; כל השורה לחיצה.
   ⇒ הכותרת (התא הראשון) נשארת כפי שהייתה; שאר התאים הופכים לשורת-משנה
   אחת: בלי תוויות, ריקים מוסתרים, עד 4 ערכים (סימוני table-controls.js:
   data-kv-empty / data-kv-more / data-kv-sep). ההגנות שמעל — ניטרול רוחב-הדסקטופ,
   תיבת-הסימון בפינה, הכותרת בלי תווית — **נשמרות**; כאן רק עוקפים.
   ⚠️ מצב-טבלה בטלפון (`kv-tables-as-table`) לא מושפע.
   ========================================================================= */
@media (max-width: 600px) {
    /* מסגרת אחת לכל הרשימה, שורות עם קו-מפריד */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tbody {
        display: block;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 10px;
        overflow: hidden;
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr {
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 10px 12px !important;
        min-height: 56px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr + tr { border-top: 1px solid var(--color-border) !important; }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr:has(td[data-kv-select]) { padding-inline-end: 44px !important; }

    /* שורת-המשנה: כל תא שאינו הכותרת — inline, אפור, בלי תווית ובלי קו */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td:not([data-kv-select]) {
        display: inline !important;
        padding: 0 !important;
        border: 0 !important;
        font-size: .85rem;
        font-weight: 400;
        color: var(--color-text-muted);
        white-space: nowrap !important;
        line-height: 1.5;
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-label]::before { content: none !important; }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-sep]::before {
        content: "·" !important;
        position: static !important;
        width: auto !important;
        margin: 0 6px;
        color: var(--color-text-muted);
        font-weight: 400;
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-empty],
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-more] { display: none !important; }
    /* שורת-משנה בתוך תא (<div><small>) — בשורה, לא מתחת */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td:not([data-kv-select]) > div { display: inline; margin: 0 0 0 4px; font-size: inherit; }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td .pill { font-size: .72rem; padding: 0 6px; vertical-align: 1px; }

    /* הכותרת: בלוק משלה, מודגשת, שורה אחת עם … */
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-select] + td,
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr > td:first-child:not([data-kv-select]) {
        display: block !important;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text);
        padding: 0 0 2px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-select] {
        inset-block-start: 50% !important;
        transform: translateY(-50%);
        inset-inline-end: 12px !important;
    }
    body:not(.kv-tables-as-table) .kv-table-wrap:has(table.kv-cards-on-phone) { border: 0; box-shadow: none; }
}

/* ── T027: סרגל-הכלים של רשימה (עמודות / תצוגות / סינון) וסינון-מהיר ──────
   בטלפון שלוש שורות של כפתורים וכדוריות ישבו לפני הרשומה הראשונה. הסקיל:
   «סרגל = שורה אחת»; כדוריות = 32px, הנבחרת ממולאת. */
.kv-tc-btn {
    /* ⚠️ בלי !important על display — «ניהול מרוכז» מוסתר ב-style inline עד שיש בחירה, וזה חייב לגבור. */
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 12px !important;
    border-radius: 10px !important; font-size: .85rem !important; font-weight: 500;
    background: var(--color-surface); border: 1px solid var(--color-border) !important; color: var(--color-text);
}
.kv-table-controls { gap: 6px; flex-wrap: wrap; }
.kv-table-controls .kv-tc-btn { margin-inline-end: 0 !important; }
.kv-quick-controls a.pill {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px !important;
    border-radius: 99px; font-size: .85rem !important; white-space: nowrap;
}
@media (max-width: 600px) {
    .kv-table-controls { justify-content: stretch !important; flex-wrap: nowrap; }
    .kv-table-controls .kv-tc-btn { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 6px !important; }
    /* כדוריות-הסינון: שורה אחת נגללת בתוכה — לא שלוש שורות מעל הרשימה. */
    .kv-quick-controls {
        flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to left, transparent 0, #000 16px);
                mask-image: linear-gradient(to left, transparent 0, #000 16px);
    }
    .kv-quick-controls::-webkit-scrollbar { display: none; }
    .kv-quick-controls > * { flex: none; }
}

/* תג-הסטטוס עולה לסוף שורת-השם — שם תמיד יש לו מקום, ושורת-המשנה לא חותכת אותו. */
@media (max-width: 600px) {
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr { position: relative; }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-status] {
        position: absolute !important;
        inset-block-start: 10px;
        inset-inline-end: 12px;
    }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr:has(td[data-kv-select]) td[data-kv-status] { inset-inline-end: 44px; }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-status]::before { content: none !important; }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone tr:has(td[data-kv-status]) > td:is([data-kv-select] + td, :first-child:not([data-kv-select])) {
        padding-inline-end: 84px !important;
    }
}

/* ── T027: תפריט-צד ופעמון — אייקוני-קו במקום אמוג'י (הסקיל) ───────────── */
.app-sidebar nav li a { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.kv-nav-ic { flex: none; display: inline-flex; width: 20px; justify-content: center; opacity: .8; }
.app-sidebar nav li a.active .kv-nav-ic, .app-sidebar nav li a:hover .kv-nav-ic { opacity: 1; }
.kv-hdr-ib {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; color: var(--color-text);
}
.kv-hdr-ib:hover { background: var(--color-bg) !important; }
/* קישור בתוך שורת-המשנה (שם-לקוח בתיק) — אפור כמו השורה; הקשה על השורה כולה פותחת. */
@media (max-width: 600px) {
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td:not([data-kv-select]):not(:first-child) a:not(.pill) { color: inherit; text-decoration: none; }
    body:not(.kv-tables-as-table) table.kv-cards-on-phone td[data-kv-select] + td a { color: inherit; }
}