/* =========================================================================
   KINETIQ CRM — premium theme (matched to the logo: charcoal + KINETIQ teal)
   כיוון "תכלת מונוכרום": אין במסך אפור ניטרלי — הכתב, הקווים והרקע נגזרים
   כולם מגוון התכלת של הלוגו, רק בבהירויות שונות.
   Brand: #127EA1 -> #0E7191 -> #0A4E66; ink #10303d
   ========================================================================= */

:root {
    --kq-cyan: #127EA1;
    --kq-blue: #0E7191;
    --kq-indigo: #0A4E66;
    --kq-gradient: linear-gradient(135deg, #127EA1 0%, #0E7191 50%, #0A4E66 100%);
    --kq-gradient-soft: linear-gradient(135deg, rgba(18,126,161,.12), rgba(14,113,145,.12));

    --kq-ink: #10303d;
    --kq-muted: #4a6874;
    --kq-line: #c1d7e2;
    --kq-bg: #eff6f9;
    --kq-surface: #ffffff;

    --kq-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06);
    --kq-shadow-lg: 0 18px 50px rgba(10,78,102,.20);
    --kq-radius: 16px;
    --kq-radius-sm: 11px;
    --kq-topbar-h: 62px;
    --kq-sidebar-w: 270px;

    /* Re-point Bootstrap's own "primary" (stock #0d6efd blue) at the brand teal
       so components driven by these variables follow the theme. */
    --bs-primary: #0E7191;
    --bs-primary-rgb: 14, 113, 145;
    --bs-link-color: #0E7191;
    --bs-link-color-rgb: 14, 113, 145;
    --bs-link-hover-color: #0A4E66;
    --bs-focus-ring-color: rgba(14, 113, 145, .25);
}

html { font-size: 16px; position: relative; min-height: 100%; }

body {
    font-family: 'Rubik', 'Segoe UI', 'Arial', sans-serif;
    background: var(--kq-bg);
    color: var(--kq-ink);
    min-height: 100vh;
}

a { color: var(--kq-blue); text-decoration: none; }
a:hover { color: var(--kq-indigo); }

h1, h2, h3, h4, h5 { color: var(--kq-ink); font-weight: 600; letter-spacing: -.01em; }

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(14,113,145,.2);
}

/* ----------------------------------------------------------------- Topbar */
.kq-topbar {
    background: var(--kq-surface);
    border-bottom: 1px solid var(--kq-line);
    box-shadow: var(--kq-shadow);
    position: sticky;
    top: 0;
    /* above the offcanvas backdrop (1040) so the bar stays visible/clickable */
    z-index: 1050;
}
/* Full-width bar with the same horizontal padding as the content, so the
   user menu on the left lines up exactly with the page content below it. */
.kq-topbar .kq-topbar-inner { height: var(--kq-topbar-h); padding: 0 1.5rem; }
.kq-brand { display: inline-flex; align-items: center; gap: .5rem; }
.kq-logo { height: 46px; width: auto; display: block; }
/* הפס העליון גדל יחד עם הלוגו, אחרת הוא נחתך */
:root { --kq-topbar-h: 76px; }

.kq-icon-btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--kq-line);
    border-radius: 12px;
    background: #fff;
    color: var(--kq-indigo);
    transition: all .15s ease;
}
.kq-icon-btn-sm { width: 36px; height: 36px; border-radius: 10px; }

/* Lightweight, borderless menu toggle (less bulky than .kq-icon-btn). */
.kq-burger {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--kq-muted);
    border-radius: 9px; transition: background .15s ease, color .15s ease;
}
.kq-burger:hover { background: var(--kq-gradient-soft); color: var(--kq-indigo); }
.kq-burger:focus-visible { outline: 2px solid var(--kq-blue); outline-offset: 1px; }

/* User chip + dropdown */
.kq-user {
    display: inline-flex; align-items: center; gap: .55rem;
    background: #fff; border: 1px solid var(--kq-line);
    border-radius: 999px; padding: .3rem .75rem .3rem .4rem;
    color: var(--kq-ink); transition: all .15s ease;
}
.kq-user:hover { box-shadow: var(--kq-shadow); }
.kq-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--kq-gradient); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.875rem; flex: 0 0 auto;
    position: relative; overflow: hidden;
}
.kq-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kq-avatar-fallback { line-height: 1; }
.kq-photo-preview { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--kq-line); flex: 0 0 auto; }
.kq-user-name { font-weight: 500; font-size: .92rem; }

/* ---------------------------------------------------------------- Sidebar */
/* A fixed panel pinned below the topbar (RTL: on the right). Open by default;
   the hamburger toggles html.kq-nav-open, and the content area resizes. */
.kq-sidebar {
    position: fixed;
    top: var(--kq-topbar-h);
    inset-inline-start: 0;                          /* RTL -> right edge */
    width: var(--kq-sidebar-w);
    bottom: 0;
    height: auto;
    background: var(--kq-surface);
    border-inline-end: 1px solid var(--kq-line);    /* RTL -> border faces content (left) */
    z-index: 1020;
    transition: transform .22s ease;
}
.kq-sidebar-scroll { height: 100%; overflow-y: auto; padding: 1rem .85rem; }
/* collapsed -> slide the panel off the right edge */
html:not(.kq-nav-open) .kq-sidebar { transform: translateX(100%); }

.kq-nav-backdrop {
    display: none;
    position: fixed; inset: var(--kq-topbar-h) 0 0 0;
    background: rgba(8,40,52,.45); z-index: 1015;
}

.kq-nav-section-title {
    font-size: 0.875rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--kq-muted);
    padding: .6rem .75rem .35rem; margin-top: .5rem;
    display: flex; align-items: center; gap: .5rem; width: 100%;
    background: transparent; border: none; text-align: start;
}
.kq-nav-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem .85rem; margin: .15rem 0;
    border-radius: var(--kq-radius-sm);
    color: var(--kq-ink); font-weight: 500;
    transition: all .15s ease;
}
.kq-nav-link:hover { background: var(--kq-gradient-soft); color: var(--kq-indigo); }
.kq-nav-link.active { background: var(--kq-gradient); color: #fff; box-shadow: var(--kq-shadow); }
.kq-nav-link.active .kq-nav-ico { color: #fff; }
.kq-nav-ico { color: var(--kq-blue); display: inline-flex; }
.kq-nav-sub { padding-inline-start: .35rem; }

/* ----------------------------------------------------------------- Layout */
.kq-content { transition: margin .22s ease; min-height: calc(100vh - var(--kq-topbar-h)); display: flex; flex-direction: column; }
html.kq-nav-open .kq-content { margin-inline-start: var(--kq-sidebar-w); }   /* RTL -> push away from right sidebar */
.kq-main { width: 100%; padding: 1.75rem 1.5rem 2rem; flex: 1 0 auto; }
.kq-page-head, .page-head { margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kq-page-title, .page-title { font-size: 1.6rem; font-weight: 700; margin: 0; }
.kq-page-sub, .page-subtitle { color: var(--kq-muted); margin: .25rem 0 0; }

/* ------------------------------------------------------------------ Cards */
.kq-card, .page-card {
    background: var(--kq-surface);
    border: 1px solid var(--kq-line);
    border-radius: var(--kq-radius);
    box-shadow: var(--kq-shadow);
}
.kq-card-body, .page-card-body { padding: 1.5rem; }

.kq-tile {
    background: var(--kq-surface);
    border: 1px solid var(--kq-line);
    border-radius: var(--kq-radius);
    box-shadow: var(--kq-shadow);
    padding: 1.4rem;
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
    display: flex; flex-direction: column;
}
.kq-tile-ico {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--kq-gradient); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------- Buttons */
.btn { border-radius: var(--kq-radius-sm); font-weight: 500; padding: .55rem 1.15rem; }
.btn-kq, .btn-brand {
    background: var(--kq-gradient); color: #fff; border: none;
    box-shadow: 0 6px 16px rgba(14,113,145,.28);
}
.btn-kq, .btn-brand:hover { color: #fff; filter: brightness(1.06); box-shadow: 0 8px 22px rgba(14,113,145,.36); }
.btn-kq, .btn-brand:focus { color: #fff; box-shadow: 0 0 0 .25rem rgba(14,113,145,.3); }
.btn-soft {
    background: var(--kq-gradient-soft); color: var(--kq-indigo);
    border: 1px solid transparent;
}
.btn-soft:hover { color: var(--kq-indigo); border-color: rgba(14, 113, 145,.25); }
.btn-outline-secondary { border-color: var(--kq-line); color: var(--kq-ink); }
.btn-outline-secondary:hover { background: var(--kq-bg); color: var(--kq-indigo); border-color: var(--kq-line); }

/* ------------------------------------------------------------------ Forms */
.form-label { font-weight: 500; font-size: .92rem; margin-bottom: .35rem; }
.kq-req, .required-mark::after { content: " *"; color: #e11d48; font-weight: 700; }
.form-control, .form-select {
    border-radius: var(--kq-radius-sm);
    border: 1px solid var(--kq-line);
    padding: .6rem .85rem;
    background: #fafdfe;
}
.form-control:focus, .form-select:focus {
    border-color: var(--kq-blue);
    box-shadow: 0 0 0 .2rem rgba(14,113,145,.15);
    background: #fff;
}
.form-control.input-validation-error,
.form-select.input-validation-error { border-color: #e11d48; background: #fff5f7; }
.field-validation-error, .text-danger { color: #e11d48 !important; }
/* Create/edit forms run the full width of the content area. They used to be capped
   at 720px, which on any real monitor left the form crowded into one half of an
   otherwise empty page while its own fields wrapped. The rows inside are already
   laid out in columns, so the space is used rather than stretched. */
.kq-form-card { max-width: none; }

/* ----------------------------------------------------------------- Search */
.kq-search, .leads-search { position: relative; max-width: 460px; }
.kq-search, .leads-search .form-control {
    padding-inline-start: 2.5rem;   /* room for the leading magnifier icon */
    padding-inline-end: 2.4rem;     /* room for the trailing spinner */
}
.kq-search-ico {
    position: absolute; inset-inline-start: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--kq-muted); pointer-events: none;
}
.kq-search-spinner {
    position: absolute; inset-inline-end: .85rem; top: 50%;
    width: 16px; height: 16px; margin-top: -8px;
    border: 2px solid var(--kq-line); border-top-color: var(--kq-blue);
    border-radius: 50%; opacity: 0; transition: opacity .15s ease;
}
.kq-search-spinner.is-busy { opacity: 1; animation: kq-spin .6s linear infinite; }
@keyframes kq-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------- Sub-forms & contacts */
/* The banner/footer strips that line up with a form card — same width as it. */
.kq-form-card-w { max-width: none; }
.kq-subform { border-top: 1px solid var(--kq-line); padding-top: 1.25rem; margin-bottom: 1.5rem; }
.kq-subform-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .25rem; }
.kq-subform-title.mt-0 { margin-top: 0; }
.kq-subform-sub { color: var(--kq-muted); font-size: .88rem; margin: 0 0 1rem; }

.kq-contact-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.kq-contact-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 1px solid var(--kq-line); border-radius: var(--kq-radius-sm);
    padding: .65rem .9rem; background: #fafdfe;
}
.kq-contact-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kq-contact-name { font-weight: 500; }
.kq-contact-phone { font-size: 0.875rem; color: var(--kq-muted); }
.kq-contact-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.kq-contact-actions form { margin: 0; }
.kq-contact-add { border-top: 1px dashed var(--kq-line); padding-top: 1rem; }
.kq-contact-add-title { font-size: .95rem; font-weight: 600; margin: 0 0 .5rem; }

/* An attached file (the signed contract) — same row language as a contact. */
.kq-doc-row {
    display: flex; align-items: center; gap: .75rem;
    border: 1px solid var(--kq-line); border-radius: var(--kq-radius-sm);
    padding: .65rem .9rem; background: #fafdfe;
}
.kq-doc-row + .kq-doc-row { margin-top: .5rem; }
.kq-doc-ico { display: flex; color: var(--kq-indigo); flex-shrink: 0; }
.kq-doc-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex-grow: 1; }
.kq-doc-name { font-weight: 500; overflow-wrap: anywhere; }
.kq-doc-meta { font-size: 0.875rem; color: var(--kq-muted); }
.kq-doc-replace { border-top: 1px dashed var(--kq-line); margin-top: 1rem; padding-top: 1rem; }

.kq-confirm { border-radius: var(--kq-radius-sm); padding: .9rem 1.1rem; margin-bottom: 1.25rem; }
.kq-confirm-warn { background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; }
.kq-confirm-body strong { display: block; }
.kq-confirm-body p { margin-bottom: .5rem; }

/* ------------------------------------------------------------------- Leads */
.kq-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.kq-chip { padding: .4rem .95rem; border-radius: 999px; border: 1px solid var(--kq-line); background: var(--kq-surface); color: var(--kq-muted); font-size: .88rem; font-weight: 500; text-decoration: none; }
.kq-chip.active { background: var(--kq-gradient); color: #fff; border-color: transparent; }

/* Five leads to a row, every card identical in size. The page is RTL so the grid
   fills right-to-left, then down — the same order the query hands them over.
   minmax(0,1fr) rather than a bare 1fr so a long unbroken word cannot push a
   column past its share; grid-auto-rows:1fr levels every row to the tallest card
   so the whole board is one rhythm instead of a ragged mosaic. */
/* רשת שמגיבה לרוחב שבאמת עומד לרשותה ולא לרוחב החלון.
   שאילתת מדיה מודדת את החלון, והחלון לא משתנה כשסוגרים את התפריט — ולכן רשת
   שבנויה עליה פשוט לא מגיבה. auto-fill מודד את המכל, כמו שרשימת המשתמשים
   כבר עושה דרך flex, ולכן שני המסכים מתנהגים אותו דבר.
   --col קובע את הרוחב המינימלי של עמודה; כל מסך יכול לשנות אותו לעצמו. */
.auto-grid, .kq-lead-grid, .leads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--col, 250px), 100%), 1fr));
    grid-auto-rows: 1fr;
    gap: var(--gap, .85rem);
}
.kq-lead-card, .lead-card { display: flex; flex-direction: column; background: var(--kq-surface); border: 1px solid var(--kq-line); border-radius: var(--kq-radius); box-shadow: var(--kq-shadow); padding: 1rem 1.05rem; transition: transform .15s ease, box-shadow .15s ease; }
.kq-lead-card-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .6rem; }
.kq-lead-date { color: var(--kq-muted); font-size: 0.875rem; white-space: nowrap; }

/* The clamps below are what keep the tallest card — and therefore every card —
   to a predictable height: two lines of title, two of the latest note. The
   matching min-heights reserve that room even when the text is shorter, so the
   fields line up straight across a row. */
.kq-lead-title, .lead-name {
    font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 3rem;
}
.kq-lead-customer { color: var(--kq-indigo); font-size: .88rem; font-weight: 500; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
.kq-lead-note, .lead-note {
    color: var(--kq-ink); font-size: 0.875rem; margin: 0 0 .6rem; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7rem;
}
.kq-lead-note-empty, .lead-note-empty { color: var(--kq-muted); font-style: italic; }
.kq-lead-bottom, .lead-bottom { margin-top: auto; }
.kq-lead-foot, .lead-foot { color: var(--kq-muted); font-size: 0.875rem; display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; min-height: 1.2rem; }
/* The name yields to the timestamp — the stamp must never wrap or be cut. */
.kq-lead-foot, .lead-foot > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kq-lead-stamp, .lead-stamp { flex: none; white-space: nowrap; }


.kq-status, .lead-pill { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; }
.kq-status-new { background: #eef1f6; color: #475569; }
.kq-status-progress { background: #dff0f6; color: #0a5f7a; }
.kq-status-waiting { background: #fff7ed; color: #c2410c; }
.kq-status-won { background: #ecfdf3; color: #15803d; }
.kq-status-lost { background: #fef2f2; color: #b91c1c; }
.kq-status-draft { background: #f5f3ff; color: #6d28d9; }
.kq-status-active { background: #ecfdf3; color: #15803d; }

.kq-timeline { list-style: none; margin: 0; padding: 0; }
.kq-timeline-item { position: relative; padding: 0 1.25rem 1.25rem; border-inline-start: 2px solid var(--kq-line); }
.kq-timeline-item:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.kq-timeline-item::before { content: ""; position: absolute; inset-inline-start: -5px; top: .3rem; width: 9px; height: 9px; border-radius: 50%; background: var(--kq-blue); }
.kq-timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.kq-timeline-user { font-weight: 600; }
.kq-timeline-time { color: var(--kq-muted); font-size: 0.875rem; white-space: nowrap; }
.kq-timeline-status { font-size: 0.875rem; color: var(--kq-muted); margin: .25rem 0; }
.kq-timeline-note { white-space: pre-wrap; margin-top: .15rem; }

/* ------------------------------------------------------------------ Table */
.kq-table-wrap, .table-responsive {
    background: var(--kq-surface);
    border: 1px solid var(--kq-line);
    border-radius: var(--kq-radius);
    box-shadow: var(--kq-shadow);
    /* visible so a row's kebab dropdown is never clipped */
    overflow: visible;
}
.kq-table, .table-crm { margin: 0; border-collapse: separate; border-spacing: 0; }
.kq-table, .table-crm thead th:first-child { border-start-start-radius: var(--kq-radius); }
.kq-table, .table-crm thead th:last-child  { border-start-end-radius: var(--kq-radius); }
.kq-table, .table-crm tbody tr:last-child td:first-child { border-end-start-radius: var(--kq-radius); }
.kq-table, .table-crm tbody tr:last-child td:last-child  { border-end-end-radius: var(--kq-radius); }
.kq-table, .table-crm thead th {
    background: #edf6f9; color: var(--kq-muted);
    font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid var(--kq-line); padding: .9rem 1.1rem; white-space: nowrap;
}
.kq-table, .table-crm tbody td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--kq-line); vertical-align: middle; }
.kq-table, .table-crm tbody tr:last-child td { border-bottom: none; }

/* Scheduled follow-up on a lead card; turns red once the date has arrived. */
.kq-lead-followup, .lead-install {
    display: inline-flex; align-items: center; gap: .3rem;
    align-self: flex-start; white-space: nowrap;
    font-size: 0.875rem; font-weight: 600; color: #b45309;
    background: rgba(245,158,11,.12); border-radius: 999px;
    padding: .2rem .6rem; margin-bottom: .6rem;
}
.kq-lead-followup, .lead-install.is-due { color: #be123c; background: rgba(225,29,72,.1); }

/* Reorder control: the position plus its up/down arrows, in one table cell. */
.kq-order { display: flex; align-items: center; gap: .15rem; }
.kq-order-num { color: var(--kq-muted); font-size: 0.875rem; font-weight: 600; min-width: 1.1rem; }
.kq-order-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border-radius: 7px;
    border: 1px solid var(--kq-line); background: var(--kq-surface); color: var(--kq-muted);
}
.kq-order-btn:hover:not(:disabled) { color: var(--kq-indigo); border-color: rgba(14,113,145,.35); background: var(--kq-gradient-soft); }
.kq-order-btn:disabled { opacity: .3; cursor: default; }

/* ----------------------------------------------------------------- Badges */
.kq-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: 0.875rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px;
}
.kq-badge-admin { background: rgba(10, 78, 102,.1); color: var(--kq-indigo); }
.kq-badge-user { background: #eef1f6; color: #475569; }
.kq-badge-active { background: rgba(16,185,129,.12); color: #047857; }
.kq-badge-inactive { background: rgba(225,29,72,.1); color: #be123c; }
.kq-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------- API keys & code blocks */
/* The one-time key: it has to read as something you must act on now. */
.kq-secret-card { border-color: #f59e0b; background: rgba(245,158,11,.06); }
.kq-code {
    background: #0f172a; color: #e2e8f0; border-radius: 10px;
    padding: 1rem 1.1rem; font-size: 0.875rem; line-height: 1.6;
    overflow-x: auto; margin-bottom: .75rem;
    white-space: pre;
}
.kq-code code { color: inherit; background: none; padding: 0; }

/* Sub-tabs: two halves of one screen, not two places in the menu. */
.kq-subtabs {
    display: flex; gap: .4rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--kq-line);
    margin-bottom: 1.5rem;
}
.kq-subtab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .6rem 1.05rem; text-decoration: none;
    color: var(--kq-muted); font-weight: 500; font-size: .93rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.kq-subtab:hover { color: var(--kq-blue); }
.kq-subtab.active { color: var(--kq-indigo); border-bottom-color: var(--kq-blue); font-weight: 600; }

/* ---------------------------------------------------------- API reference */
.kq-docs { display: flex; flex-direction: column; gap: 1.25rem; }
.kq-doc-section { scroll-margin-top: calc(var(--kq-topbar-h) + 1rem); }
.kq-doc-h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .5rem; color: var(--kq-ink); }
.kq-doc-h3 {
    font-size: 0.875rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--kq-muted); font-weight: 600; margin: 1.75rem 0 .6rem;
}
.kq-doc-section p { max-width: 72ch; }

.kq-docs-toc {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    padding: .85rem 1.1rem; background: var(--kq-surface);
    border: 1px solid var(--kq-line); border-radius: var(--kq-radius);
}
.kq-docs-toc-title {
    font-size: 0.875rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--kq-muted); font-weight: 600; margin-inline-end: .3rem;
}
.kq-docs-toc a {
    padding: .25rem .7rem; border-radius: 999px; font-size: 0.875rem;
    border: 1px solid var(--kq-line); color: var(--kq-muted); text-decoration: none;
}
.kq-docs-toc a:hover { color: var(--kq-blue); border-color: var(--kq-blue); }

/* The endpoint's identity line: verb, path, and whether it writes. */
.kq-doc-endpoint-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: .9rem;
}
.kq-verb {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem; font-weight: 700; letter-spacing: .05em;
    padding: .2rem .55rem; border-radius: 5px; color: #fff;
}
.kq-verb-get { background: var(--kq-indigo); }
.kq-verb-post { background: var(--kq-blue); }
.kq-doc-path {
    font-size: .95rem; color: var(--kq-ink);
    background: var(--kq-bg); padding: .2rem .55rem; border-radius: 6px;
}

.kq-doc-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .8rem; }
.kq-doc-steps li { display: flex; gap: .8rem; align-items: flex-start; }
.kq-doc-steps p { margin: .1rem 0 0; color: var(--kq-muted); font-size: .92rem; }
.kq-doc-step-n {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.65rem; height: 1.65rem; border-radius: 50%;
    background: var(--kq-blue); color: #fff; font-size: 0.875rem; font-weight: 700;
}

.kq-doc-note {
    border-inline-start: 3px solid var(--kq-blue);
    background: rgba(14, 113, 145,.06);
    border-radius: 0 var(--kq-radius-sm) var(--kq-radius-sm) 0;
    padding: .8rem 1rem; margin: 1rem 0 0; font-size: .93rem;
}
.kq-doc-note-warn { border-inline-start-color: #f59e0b; background: rgba(245,158,11,.08); }
.kq-doc-req { color: #be123c; font-weight: 600; font-size: 0.875rem; }
.kq-doc-table td, .kq-doc-table th { vertical-align: top; }
.kq-doc-table code { font-size: 0.875rem; }

.kq-doc-langs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.kq-doc-langs button {
    font-size: 0.875rem; font-weight: 500; padding: .35rem .9rem; border-radius: 999px;
    border: 1px solid var(--kq-line); background: var(--kq-surface); color: var(--kq-muted);
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.kq-doc-langs button:hover { border-color: var(--kq-blue); color: var(--kq-blue); }
.kq-doc-langs button[aria-selected="true"] {
    background: var(--kq-blue); border-color: var(--kq-blue); color: #fff;
}

/* ------------------------------- Icon buttons that report back on a click */
/* The pointer is still on the button the moment this fires, so these have to
   outrank .btn-outline-secondary:hover — hence the doubled class and the
   explicit :hover twin. A single class would lose and the tint never show. */
.btn.kq-flash-ok, .btn.kq-flash-ok:hover, .btn.kq-flash-ok:focus {
    color: #047857; border-color: #047857; background: rgba(16,185,129,.12);
}
.btn.kq-flash-bad, .btn.kq-flash-bad:hover, .btn.kq-flash-bad:focus {
    color: #be123c; border-color: #be123c; background: rgba(225,29,72,.1);
}

/* ------------------------------------------- Product parameters in a list */
.kq-product-details {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
}
.kq-product-detail { font-size: 0.875rem; }
.kq-product-detail-label { color: var(--kq-muted); margin-inline-end: .25rem; }

/* --------------------------------------------------------- Auth (login) */
.kq-auth {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--kq-gradient);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    position: relative; overflow-x: hidden; overflow-y: auto;
}
.kq-auth::before, .kq-auth::after {
    content: ""; position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.kq-auth::before { width: 460px; height: 460px; top: -160px; inset-inline-start: -120px; }
.kq-auth::after { width: 360px; height: 360px; bottom: -140px; inset-inline-end: -100px; }
.kq-auth-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 420px;
    background: rgba(255,255,255,.97);
    border-radius: 22px;
    box-shadow: var(--kq-shadow-lg);
    padding: 2.5rem 2.25rem;
}
.kq-auth-logo { width: 260px; max-width: 80%; height: auto; display: block; margin: 0 auto 1.5rem; }
.kq-auth-title { text-align: center; font-weight: 700; font-size: 1.3rem; margin-bottom: .25rem; }
.kq-auth-sub { text-align: center; color: var(--kq-muted); margin-bottom: 1.75rem; font-size: .92rem; }

/* ------------------------------------------------------------------ Misc */
.alert { border-radius: var(--kq-radius-sm); border: none; }
.alert-success { background: rgba(16,185,129,.12); color: #047857; }
.alert-danger { background: rgba(225,29,72,.1); color: #be123c; }
.alert-info { background: var(--kq-gradient-soft); color: var(--kq-indigo); }
.alert-secondary { background: #eef1f6; color: #475569; }

.dropdown-menu { border: 1px solid var(--kq-line); border-radius: var(--kq-radius-sm); box-shadow: var(--kq-shadow-lg); padding: .35rem; min-width: 11rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .7rem; font-size: .92rem; }
.dropdown-item.disabled, .dropdown-item:disabled { color: #b6bdca; background: transparent; }
.dropdown-menu form { margin: 0; }
.dropdown-menu form .dropdown-item { width: 100%; text-align: start; border: 0; background: transparent; }
.dropdown-menu form .dropdown-item:hover { background: var(--kq-gradient-soft); }


/* ------------------------------------------- Bootstrap "primary" -> brand */
/* Bootstrap ships its own blue (#0d6efd) for checked controls, .btn-primary,
   link/focus colours etc. Re-point it at the KINETIQ teal so no stock blue
   leaks through (checked checkboxes were the visible one). */
.form-check-input:checked { background-color: var(--kq-blue); border-color: var(--kq-blue); }
.form-check-input:focus { border-color: var(--kq-blue); }
.form-check-input:checked:focus { border-color: var(--kq-blue); }

.btn-primary { background-color: var(--kq-blue); border-color: var(--kq-blue); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--kq-indigo); border-color: var(--kq-indigo); color: #fff; }

.dropdown-item.active, .dropdown-item:active { background: var(--kq-gradient-soft); color: var(--kq-indigo); }

.text-primary { color: var(--kq-blue) !important; }
.link-primary { color: var(--kq-blue); }
.link-primary:hover { color: var(--kq-indigo); }

/* =========================================================================
   MOBILE & TOUCH
   Everything below must stay LAST in this file. A media query adds no
   specificity, so a mobile rule that repeats a selector used earlier wins
   only by coming later in source order — which is exactly how the previous
   sidebar override failed: it sat above the desktop rule and never applied.
   Add new mobile rules here, never above.
   ========================================================================= */

/* Hover effects belong to devices that can hover. On a touch screen :hover
   sticks after a tap, leaving cards and rows looking permanently selected. */
@media (hover: hover) {
    .kq-icon-btn:hover { background: var(--kq-gradient-soft); border-color: transparent; color: var(--kq-indigo); }
    .kq-tile:hover { transform: translateY(-3px); box-shadow: var(--kq-shadow-lg); }
    .kq-chip:hover { color: var(--kq-indigo); border-color: rgba(14,113,145,.35); }
    .kq-lead-card, .lead-card:hover { transform: translateY(-3px); box-shadow: var(--kq-shadow-lg); }
    .kq-table, .table-crm tbody tr:hover { background: #f3f9fb; }
    .dropdown-item:hover { background: var(--kq-gradient-soft); color: var(--kq-indigo); }
}

/* Press feedback, which touch had none of. */
.kq-lead-card, .lead-card { -webkit-tap-highlight-color: rgba(14,113,145,.12); }
.kq-lead-card, .lead-card:active { transform: scale(.995); }

/* The sidebar scrolls on its own; the backdrop swallows the gesture entirely. */
.kq-sidebar-scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.kq-nav-backdrop { overscroll-behavior: none; touch-action: none; }

/* Native controls that the theme's own padding had knocked out of shape. */
.form-control[type=file]::file-selector-button {
    padding: .6rem .85rem;
    margin: -.6rem -.85rem;
    margin-inline-end: .85rem;
}
.form-control[type=file] { text-overflow: ellipsis; }
input[type="date"].form-control {
    -webkit-appearance: none;
    appearance: none;
    min-height: calc(1.5em + 1.2rem + 2px);   /* line-height + .6rem*2 padding + borders */
}
input[type="date"]::-webkit-date-and-time-value { text-align: start; margin: 0; }

@media (max-width: 991.98px) {
    /* The sidebar overlays the content instead of pushing it aside. This is the
       rule that was dead before — it now follows the desktop one. */
    html.kq-nav-open .kq-content { margin-inline-start: 0; }
    .kq-sidebar { box-shadow: var(--kq-shadow-lg); }
    html.kq-nav-open .kq-nav-backdrop { display: block; }

    /* dvh follows the browser toolbars as they come and go; vh does not. */
    body { min-height: 100dvh; }
    .kq-content { min-height: calc(100dvh - var(--kq-topbar-h)); }

    /* השורש כאן הוא 16px ולכן 1rem כבר עומד בתנאי של iOS, אבל הערך נשאר
       מפורש כדי שהוא לא ייסחף אם השורש ישתנה שוב. */
    .form-control, .form-select, .input-group-text,
    textarea.form-control, .form-control[type=file] { font-size: 16px; }

    /* The burger is the only route to every other screen. */
    .kq-burger { width: 44px; height: 44px; border-radius: 12px; }
    .kq-burger svg { width: 24px; height: 24px; }

    .kq-sidebar-scroll { padding: .75rem .7rem; }
    .kq-nav-link { padding: .85rem .9rem; margin: .3rem 0; font-size: 1.02rem; }
    .kq-nav-ico svg { width: 20px; height: 20px; }
    .kq-nav-sub { padding-inline-start: .6rem; }

    .dropdown-menu { padding: .4rem; min-width: 14rem; }
    .dropdown-item { padding: .8rem .85rem; font-size: 1rem; }
    .dropdown-divider { margin: .3rem 0; }
}

@media (max-width: 767.98px) {
    /* Last line of defence: nothing may hand the document a sideways pan. */
    html { overflow-x: clip; }

    /* Give the content back the ~90px the chrome was taking. */
    :root { --kq-topbar-h: 60px; }
    .kq-logo { height: 36px; }
    .kq-topbar .kq-topbar-inner { padding: 0 .85rem; }
    .kq-main { padding: 1rem .85rem 1.5rem; }
    .kq-card, .page-card { border-radius: 12px; }
    .kq-card-body, .page-card-body { padding: 1rem .9rem; }
    .modal { --bs-modal-padding: .9rem; }

    /* ---- Tables become cards -------------------------------------------
       A table of 6-9 columns cannot be made to fit. Horizontal scrolling
       inside the wrapper was the other candidate and was rejected: it turns
       the wrapper into a scroll container, which forces overflow-y to auto
       and clips the row kebab that overflow:visible exists to protect — and
       in RTL the hidden columns sit to the left, so revealing them means
       swiping from the left edge, which iOS claims for its back gesture.
       Stacking creates no scroll container at all. */
    .kq-table-wrap, .table-responsive { background: transparent; border: 0; box-shadow: none; border-radius: 0; }

    .kq-table, .table-crm, .kq-table, .table-crm tbody, .kq-table, .table-crm tr, .kq-table, .table-crm td { display: block; width: auto; }
    .kq-table, .table-crm thead { display: none; }

    .kq-table, .table-crm tbody tr {
        background: var(--kq-surface);
        border: 1px solid var(--kq-line);
        border-radius: var(--kq-radius);
        box-shadow: var(--kq-shadow);
        padding: .35rem .9rem;
        margin-bottom: .7rem;
    }
    .kq-table, .table-crm tbody tr:last-child { margin-bottom: 0; }

    .kq-table, .table-crm tbody td {
        padding: .5rem 0;
        /* Bootstrap paints every cell with --bs-table-bg, which is opaque and
           would square off the card's rounded corners. */
        background: transparent;
        /* An e-mail or invoice number offers no break opportunity of its own. */
        overflow-wrap: anywhere;
    }
    /* The base sheet drops the divider on the last ROW; inside a card it is
       wanted on every cell except each card's last. Both rules are needed —
       tr:last-child td outranks a bare tbody td. */
    .kq-table, .table-crm tbody tr:last-child td { border-bottom: 1px solid var(--kq-line); }
    .kq-table, .table-crm tbody tr td:last-child { border-bottom: 0; }

    /* The column heading, carried on the cell, above its value. A block label
       rather than a two-column grid: several cells hold more than one child,
       and each extra child would become another grid item. */
    .kq-table, .table-crm tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .1rem;
        color: var(--kq-muted);
        font-size: 0.875rem; font-weight: 600; letter-spacing: .03em;
    }

    /* ---- Touch targets -------------------------------------------------- */
    .kq-icon-btn-sm { width: 44px; height: 44px; border-radius: 12px; }

    .kq-order { gap: .5rem; }
    .kq-order-btn { width: 40px; height: 40px; border-radius: 10px; }
    .kq-order-btn svg { width: 18px; height: 18px; }

    .kq-chips { gap: .55rem; }
    .kq-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.1rem; font-size: .95rem; }

    .btn { padding: .7rem 1.15rem; }
    .btn:not(.kq-icon-btn) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-sm { padding: .45rem .8rem; min-height: 40px; }   /* must stay after .btn */

    .modal-header .btn-close {
        box-sizing: border-box;
        width: 44px; height: 44px; padding: 0;
        margin: -.5rem auto -.5rem -.5rem;
    }

    .form-check { min-height: 2.9rem; padding-inline-start: 2.25rem; margin-bottom: .35rem; }
    .form-check .form-check-input { width: 1.35em; height: 1.35em; margin-top: .78em; margin-inline-start: -2.25rem; }
    .form-check-label { display: block; padding-block: .7rem; }

    /* ---- Dialogs -------------------------------------------------------
       A modal must keep its header and footer on screen and scroll only its
       body, or the close button and the submit button leave with the content. */
    .modal { height: 100dvh; }
    .modal .modal-dialog { height: calc(100% - 1rem); margin: .5rem; max-width: none; }
    .modal .modal-dialog-centered { min-height: 0; }
    .modal .modal-content { max-height: 100%; overflow: hidden; }
    .modal .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 575.98px) {
    /* A long customer name must wrap rather than widen the page. */
    .kq-page-head, .page-head { margin-bottom: 1.1rem; gap: .65rem; }
    .kq-page-head, .page-head > div:first-child { flex: 1 1 100%; min-width: 0; }
    .kq-page-title, .page-title { font-size: 1.3rem; overflow-wrap: anywhere; }

    /* Stacked, so a thumb aimed at the save button cannot land on cancel. */
    .kq-form-card .kq-card-body, .page-card-body > form > .btn,
    .kq-form-card .kq-card-body, .page-card-body > form > a.btn { display: flex; width: 100%; }
    .kq-form-card .kq-card-body, .page-card-body > form > .btn + .btn { margin-top: .5rem; }
    .modal-footer { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
    .modal-footer > * { margin: 0; width: 100%; }

    /* Flex rows that would otherwise crush their content into ribbons. */
    .kq-contact-row { flex-direction: column; align-items: stretch; gap: .6rem; }
    .kq-contact-actions { justify-content: flex-end; }

    .kq-doc-row { flex-wrap: wrap; row-gap: .55rem; align-items: flex-start; }
    .kq-doc-info { flex: 1 1 60%; }
    .kq-doc-row > .btn { flex: 1 1 100%; }

    .kq-timeline-item { padding-inline: .85rem 0; padding-bottom: 1rem; }
    .kq-timeline-head { flex-wrap: wrap; gap: .1rem .6rem; }

    /* Metadata was rendering at 11.7-12.9px. */
    .kq-lead-foot, .lead-foot, .kq-lead-date, .kq-status, .lead-pill, .kq-badge,
    .kq-timeline-time, .kq-doc-meta { font-size: 0.875rem; }

    /* The login card scrolls once the keyboard takes half the screen. */
    .kq-auth { align-items: flex-start; padding: 1rem .75rem 2rem; }
    .kq-auth::before, .kq-auth::after { display: none; }
    .kq-auth-card { padding: 1.75rem 1.25rem; border-radius: 18px; }

    /* One column: each card sizes to its own content. */
    .kq-lead-title, .lead-name { min-height: 0; }
    .kq-lead-note, .lead-note  { min-height: 0; }
}

/* ------------------------------------------------------- Task reminder */
.kq-bell { position: relative; }
.kq-bell-count {
    position: absolute; top: -3px; inset-inline-start: -3px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: #e11d48; color: #fff;
    font-size: 0.875rem; font-weight: 700; line-height: 18px; text-align: center;
}
.kq-due-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.kq-due-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
    border: 1px solid var(--kq-line); border-radius: var(--kq-radius-sm);
    padding: .65rem .9rem; background: #fafdfe;
}
.kq-due-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.kq-due-when { font-size: 0.875rem; color: #b91c1c; font-weight: 600; }
.kq-due-by { font-size: 0.875rem; color: var(--kq-muted); }


/* =========================================================================
   שכבת תאימות. המסכים של נועם כתובים מול אוצר מילים משלהם של טוקנים, ולכן
   במקום לשכתב חמישה־עשר עמודים כל שם ישן ממופה כאן אל המערכת המיובאת.
   ========================================================================= */
:root {
    /* רמפת המותג, נגזרת מהתכלת של הלוגו */
    --brand-900: var(--kq-indigo);
    --brand-800: #0a5a75;
    --brand-700: var(--kq-blue);
    --brand-500: var(--kq-cyan);
    --brand-300: #6fc3df;
    --brand-200: #b4e3f4;
    --brand-100: #dff0f6;
    --brand-50: #eef7fa;

    --primary: #dff0f6;
    --primary-ink: var(--kq-indigo);
    --primary-hover: #cfe8f1;
    --primary-edge: var(--kq-cyan);

    --accent: #b45309;
    --accent-deep: #92400e;
    --accent-soft: #fff7ed;
    --accent-edge: #c2410c;

    --ink: var(--kq-ink);
    --muted: var(--kq-muted);
    --line: var(--kq-line);
    /* גבול של פקד אינטראקטיבי חייב 3:1 — קו השיער של הרפרנס נמוך מכך */
    --line-strong: #78929b;

    --bg: var(--kq-bg);
    --card: var(--kq-surface);
    --card-edge: var(--kq-line);
    --raised: #edf6f9;
    --shell: var(--kq-surface);

    --nav-ink: var(--kq-ink);
    --nav-muted: var(--kq-muted);
    --nav-hover: var(--kq-gradient-soft);
    --nav-mark: var(--kq-blue);
    --hover-fill: #dff0f6;
    --avatar-bg: var(--kq-blue);
    --avatar-ink: #ffffff;

    --ok: #15803d;
    --warn: #b45309;
    --danger: #e11d48;
    --danger-ink: #be123c;
    --danger-soft: #fef2f2;

    --radius: var(--kq-radius-sm);
    --card-radius: var(--kq-radius);
    --shadow-sm: var(--kq-shadow);
    --shadow-card: var(--kq-shadow);
    --shadow-lg: var(--kq-shadow-lg);
    --ring: 0 0 0 .2rem rgba(14, 113, 145, .2);

    /* סולם הטיפוגרפיה נשמר, כולל רצפת ה-14px */
    --fs-xs: .875rem;
    --fs-sm: .9375rem;
    --fs-base: 1rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.1875rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.4375rem;
    --fs-3xl: 1.625rem;
}

/* רשימת המשתמשים — המבנה שנבחר (שורה לאדם) בשפה של הרפרנס */
.users-list {
    background: var(--kq-surface);
    border: 1px solid var(--kq-line);
    border-radius: var(--kq-radius);
    box-shadow: var(--kq-shadow);
    list-style: none; margin: 0; padding: 0; overflow: hidden;
}
.urow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
    padding: .9rem 1.1rem; border-bottom: 1px solid var(--kq-line); }
.urow:last-child { border-bottom: 0; }
.urow:hover { background: #f3f9fb; }
.uav { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
    border-radius: 50%; background: var(--kq-gradient); color: #fff; font-weight: 600; }
.uid { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; line-height: 1.32; }
.uname { font-weight: 600; overflow-wrap: anywhere; }
.usub { display: flex; align-items: center; gap: .4rem; min-width: 0;
    color: var(--kq-muted); font-size: .9rem; }
.usub > span[dir="ltr"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usub-dot { flex: none; opacity: .6; }
.utags { display: flex; flex-wrap: wrap; gap: .35rem; flex: none; }
.utags-none { color: var(--kq-muted); }
.uacts { display: flex; flex-wrap: wrap; gap: .35rem; flex: none; }

/* טפסים ברוחב מלא — כפי שכבר נבחר, ובהתאם ל-.kq-form-card של הרפרנס */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 1.25rem; align-items: start; }
.form-grid > .row { display: contents; }
.form-grid > .row > [class*="col-"] { width: auto; max-width: none; flex: initial; padding-inline: 0; }
.form-grid > h2, .form-grid > h3, .form-grid > h4, .form-grid > hr, .form-grid > p,
.form-grid > .form-text, .form-grid > .alert, .form-grid > dl, .form-grid > fieldset,
.form-grid > .d-flex, .form-grid > .form-wide,
.form-grid > .mb-3:has(textarea), .form-grid > .mb-4:has(textarea) { grid-column: 1 / -1; }

/* הרפרנס מפריד בין .kq-card (המסגרת) ל-.kq-card-body (הריפוד). המסכים של נועם
   שמים תוכן ישירות בתוך .page-card, ולכן הריפוד חוזר אל הכרטיס עצמו. */
.page-card { padding: 1.5rem; }
.page-card + .page-card { margin-top: 1.25rem; }

.page-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--kq-line);
}

.page-card-header > :first-child {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--kq-ink);
}

.page-card-header .card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-inline-start: auto; }

/* כותרות המקטעים בתוך טופס — אותה שפה של .kq-subform-title ברפרנס */
.form-grid > h3, .form-grid > .h6 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--kq-ink);
    margin: 1.25rem 0 .75rem;
}

@media (max-width: 767.98px) {
    .page-card { padding: 1rem .9rem; border-radius: 12px; }
}


/* ----- עמודי האימות ----------------------------------------------------- */
/* הרפרנס מסמן גוף לא מחובר ב-.kq-auth ואין לו מסכי התחברות משלו, ולכן המסכים
   האלה נבנים בשפה שלו: אותו רקע, אותו כרטיס, אותו רדיוס ואותו צל. */
body.auth-page { background: var(--kq-bg); }

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--kq-bg);
}

.auth-hero {
    display: flex;
    justify-content: center;
    padding: clamp(2rem, 7vh, 4rem) 1rem 1.6rem;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 430px;
}

.auth-logo { display: block; }
.auth-logo img { display: block; width: 100%; height: auto; }

.auth-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem 2.5rem;
}

.auth-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 430px;
    padding: 2rem 1.75rem;
    background: var(--kq-surface);
    border: 1px solid var(--kq-line);
    border-radius: var(--kq-radius);
    box-shadow: var(--kq-shadow-lg);
}

.auth-card h1 { font-size: 1.45rem; font-weight: 600; margin-bottom: .3rem; }
.auth-card .auth-sub { color: var(--kq-muted); font-size: 1rem; margin-bottom: 1.4rem; }
.auth-card .status-alert { margin-bottom: 1.25rem; }

@media (max-width: 575.98px) {
    .auth-hero { padding-top: 2rem; }
    .auth-card { padding: 1.5rem 1.15rem; }
}


/* ----- תפריט בחירה -------------------------------------------------------
   <select> מקורי נפתח בתפריט של מערכת ההפעלה שאי אפשר לעצב, ולכן סינון הלידים
   מומש מלכתחילה כרכיב תפריט מלא. הכללים עברו לכאן כדי שגם בחירת המוצר בטופס
   תשתמש בהם — אותה הגדרה אחת, ולכן השניים לא יכולים להיפרד. */
.field-select { position: relative; }

.field-select__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    min-height: 2.9rem;
    padding-inline: 1.15rem 1rem;
    border: 1px solid var(--kq-line);
    border-radius: var(--kq-radius-sm);
    background-color: #fafdfe;
    color: var(--kq-ink);
    font-size: 1.0625rem;
    font-weight: 500;
    text-align: start;
    white-space: nowrap;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field-select__toggle:hover { border-color: var(--kq-cyan); }

.field-select__toggle:focus-visible {
    border-color: var(--kq-blue);
    box-shadow: 0 0 0 .2rem rgba(14, 113, 145, .2);
    outline: 2px solid var(--kq-blue);
    outline-offset: 1px;
}

.field-select__toggle[aria-expanded="true"] {
    border-color: var(--kq-blue);
    background: var(--kq-gradient-soft);
}

/* כשלא נבחר דבר, הכיתוב מתנהג כמו placeholder ולא כמו ערך */
.field-select__label { overflow: hidden; text-overflow: ellipsis; }
.field-select__label.is-placeholder { color: var(--kq-muted); font-weight: 400; }

.field-select__chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--kq-muted);
    transition: transform .18s ease;
}

.field-select__toggle[aria-expanded="true"] .field-select__chevron { transform: rotate(180deg); }

.field-select__menu {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    --bs-dropdown-min-width: 100%;
    --bs-dropdown-padding-x: .4rem;
    --bs-dropdown-padding-y: .4rem;
    --bs-dropdown-border-color: var(--kq-line);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-inner-border-radius: 10px;
    --bs-dropdown-bg: var(--kq-surface);
    --bs-dropdown-link-color: var(--kq-ink);
    --bs-dropdown-link-hover-bg: var(--kq-gradient-soft);
    --bs-dropdown-link-hover-color: var(--kq-indigo);
    box-shadow: var(--kq-shadow-lg);
    overflow: hidden;
}

.field-select__menu .dropdown-item {
    border-radius: 10px;
    padding: .5rem .85rem;
    font-size: 1.0625rem;
    white-space: normal;
}

/* השורה הנבחרת נושאת גם קו מתאר — מילוי רך לבדו אינו נקרא כצורה על תפריט לבן */
.field-select__menu .dropdown-item.is-selected {
    background: var(--kq-gradient-soft);
    border: 1px solid var(--kq-cyan);
    color: var(--kq-indigo);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .field-select__toggle, .field-select__chevron { transition: none; }
}

/* ----- חשבון בסרגל העליון ----------------------------------------------- */
/* שם המשתמש אינו נלחץ יותר: הוא תווית, והפעולות הן שני כפתורי אייקון לידו. */
.kq-account { display: flex; align-items: center; gap: .4rem; }
.kq-account form { display: contents; }

/* .kq-user היה כפתור עם תפריט; עכשיו הוא צ'יפ תצוגה בלבד */
.kq-user {
    cursor: default;
    padding-block: .3rem;
    padding-inline: .35rem .9rem;
}
.kq-user:hover { box-shadow: none; }

.kq-icon-btn svg { width: 19px; height: 19px; }
.kq-icon-btn-sm svg { width: 17px; height: 17px; }

/* יציאה היא פעולה הרסנית ולכן היא מסומנת בריחוף, לא במנוחה */
.kq-icon-btn--out:hover,
.kq-icon-btn--out:focus-visible {
    background: #fef2f2;
    border-color: #be123c;
    color: #be123c;
}

/* ----- הודעת מצב --------------------------------------------------------
   ה-SVG בהודעה מוגדר עם viewBox בלבד. בלי מידות הוא נמתח למאה אחוז מהרוחב
   הזמין — וזה מה שהפך את סימן הווי לענק. שלושת הכללים האלה אבדו בייבוא. */
.status-alert { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.25rem; }
.status-alert > svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: .15rem; }
.status-alert .status-text { flex: 1 1 auto; min-width: 0; }


/* ----- לוח כרטיסים ------------------------------------------------------
   לוח הלידים ולוח ההזמנות מציגים את אותם כרטיסים ואת אותה שורת חיפוש.
   הכללים ישבו בתוך Index.cshtml, ולכן מסך ההזמנות קיבל את אותו HTML בלי
   עיצוב — ובראשם אייקון החיפוש, שבלי מידות נמתח לרוחב מלא. */
/* בלי תקרת רוחב: המסך נפרש לכל המקום שהתפנה, כמו רשימת המשתמשים */
.leads-page { max-width: none; }

.leads-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.leads-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    flex: 1 1 auto;
    min-width: 0;
}

.leads-new { margin-inline-start: auto; }

/* ----- שורת החיפוש ----- */
.leads-search {
    position: relative;
    flex: 1 1 22rem;
    min-width: 0;
    max-width: 30rem;
}

.leads-search__icon {
    position: absolute;
    inset-inline-start: .95rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
    transition: color .15s ease;
}

.leads-search__input {
    width: 100%;
    min-height: 2.9rem;
    padding-inline: 2.9rem 1rem;
    border: 1px solid var(--kq-line);
    /* אותו רדיוס כמו הכפתורים */
    border-radius: var(--kq-radius-sm);
    background-color: #fbfdfe;
    color: var(--ink);
    font-size: var(--fs-md);
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}

.leads-search__input::placeholder { color: var(--muted); }
.leads-search__input:hover { border-color: var(--brand-300); }

.leads-search__input:focus {
    border-color: var(--brand-500);
    box-shadow: var(--ring);
    outline: 2px solid var(--brand-700);
    outline-offset: 1px;
}

.leads-search:focus-within .leads-search__icon { color: var(--brand-700); }

/* מבטל את ה-X המובנה של type="search" בכרום, שנראה זר לשאר העיצוב */
.leads-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ----- תפריט הסטטוס ----- */
.leads-status { flex: 0 1 15rem; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
    .leads-search__icon, .leads-search__input { transition: none; }
}

/* grid-auto-rows:1fr משווה את כל הכרטיסים בשורה לגובה הגבוה שבהם,
   כך שהלוח נקרא כמקצב אחד ולא כפסיפס משונן. */
/* הרשת מוגדרת ב-site.css ומגיבה למכל, לא לחלון */

.lead-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.05rem;
    background-color: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.lead-card:hover {
    border-color: var(--brand-700);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.lead-card:active { transform: scale(.995); }

/* שורה עליונה: הסטטוס בצד אחד, המוצר בצד השני */
/* הסטטוס הוא הסימן הראשי בכרטיס, ולכן הוא נקרא במלואו תמיד: אם אין מקום
   לשניהם המוצר יורד לשורה משלו, ואם גם התגית לבדה רחבה מדי היא נשברת. */
.lead-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .4rem;
    margin-bottom: .6rem;
}

.lead-product {
    color: var(--muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* החיתוכים כאן הם מה ששומר על גובה צפוי: שתי שורות שם ושתי שורות הערה.
   ה-min-height שומר את המקום גם כשהטקסט קצר, כך שהשדות מיושרים לרוחב השורה. */
.lead-name {
    margin: 0 0 .35rem;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* שתי שורות בדיוק בגודל החדש: 1.1875rem x 1.35 x 2 */
    min-height: 3.21rem;
}

.lead-name a { color: var(--brand-900); }

.lead-phone {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .55rem;
    color: var(--brand-700);
    font-size: var(--fs-base);
    font-weight: 500;
}

.lead-phone svg { width: 15px; height: 15px; flex: 0 0 15px; }
.lead-city { color: var(--muted); }

.lead-note {
    margin: 0 0 .6rem;
    color: var(--ink);
    font-size: var(--fs-base);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* שתי שורות בדיוק: 1rem x 1.65 (גובה השורה של הגוף) x 2 */
    min-height: 3.3rem;
}

.lead-note-empty { color: var(--muted); font-style: italic; }

.lead-bottom { margin-top: auto; }

.lead-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .45rem;
}

.lead-pill {
    display: inline-block;
    padding: .25rem .7rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* אותה משפחת סטטוסים של הרפרנס — מילוי רך וכתב כהה מאותו גוון */
.lead-pill-new { background: #eef1f6; color: #475569; }
.lead-pill-scheduled { background: #dff0f6; color: #0a5f7a; }
.lead-pill-installed { background: #ecfdf3; color: #15803d; }
.lead-pill-open { background: #fff7ed; color: #c2410c; }
.lead-pill-closed { background: #f5f3ff; color: #6d28d9; }
.lead-pill-due { background: #fef2f2; color: #b91c1c; }
/* תשלום הוא ציר נפרד מהסטטוס, ולכן "שולם" מלא ולא רך */
.lead-pill-paid { background: #15803d; color: #fff; }

/* צ'יפ ההתקנה — נצבע כשהמועד כבר עבר */
.lead-install {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .4rem;
    padding: .2rem .6rem;
    border: 0;
    border-radius: 999px;
    background: rgba(245, 158, 11, .12);
    color: #b45309;
    font-size: 0.875rem;
    font-weight: 600;
}

.lead-install svg { width: 14px; height: 14px; flex: 0 0 14px; }
.lead-install.is-due { background: rgba(225, 29, 72, .1); color: #be123c; }

/* השם נסוג מפני התאריך — התאריך לא נחתך לעולם */
.lead-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
    min-height: 1.2rem;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.lead-foot > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-stamp { flex: none; white-space: nowrap; }


/* ----- אייקונים בכפתורים -------------------------------------------------
   הכפתור הופך למיכל flex כדי שהאייקון והמילה יישבו על אותו קו בסיס בלי
   התאמות ידניות, והאייקון מקבל מידות משלו כדי שלא יימתח אם כלל CSS ייעלם. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.btn > svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

/* כפתור בגודל קטן מקבל אייקון קטן בהתאם */
.btn-sm > svg { width: 15px; height: 15px; flex: 0 0 15px; }