/* ============================================================
   מגירת בקשת רכש (#drawer.dz3): כרטיס הפעולה, כפתורים, אישורים
   במקום, תפריט הפעולות, תצוגה מקדימה, הערות והיסטוריה.
   לא כאן: המעטפת, הכותרת והכרטיסים (drawer-v3.css).
============================================================ */

/* ── כרטיס פעולה ── */
#drawer.dz3 .dz3-action { display: flex; flex-direction: column; gap: 8px; }
#drawer.dz3 .dz3-action-head { display: flex; gap: 12px; align-items: center; }
#drawer.dz3 .dz3-tile {
    width: 38px; height: 38px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, white);
}
#drawer.dz3 .dz3-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#drawer.dz3 .dz3-eyebrow { font-size: 12.5px; font-weight: 600; color: var(--tone); }
#drawer.dz3 .dz3-action-title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--dz3-text); overflow-wrap: anywhere; }
#drawer.dz3 .dz3-action-body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dz3-text-3); }
#drawer.dz3 .dz3-helper { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dz3-muted); }
#drawer.dz3 .dz3-quote {
    font-size: 13.5px; line-height: 1.6; color: var(--dz3-text-3); background: var(--dz3-subtle);
    border-radius: 8px; padding: 10px 12px; white-space: pre-line; overflow-wrap: anywhere;
}
#drawer.dz3 .dz3-actions {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--dz3-hair);
}
#drawer.dz3 .dz3-actions.is-compact { gap: 8px; flex-wrap: nowrap; }
#drawer.dz3 .dz3-actions.is-compact .dz3-btn { padding: 9px 12px; font-size: 13.5px; gap: 5px; }
#drawer.dz3 .dz3-actions.is-compact .dz3-btn:first-child { flex: 1 1 auto; justify-content: center; }

/* ── כפתורים ── */
#drawer.dz3 .dz3-btn {
    display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
    border: 0; border-radius: 9px; padding: 10px 18px; cursor: pointer; text-decoration: none;
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
    transition: filter .15s ease, background .15s ease;
}
#drawer.dz3 .dz3-btn.is-green { background: var(--dz3-green); color: #fff; }
#drawer.dz3 .dz3-btn.is-blue { background: var(--dz3-blue); color: #fff; }
#drawer.dz3 .dz3-btn.is-red { background: var(--dz3-red); color: #fff; }
#drawer.dz3 .dz3-btn.is-ghost { background: #fff; color: var(--dz3-text-2); box-shadow: inset 0 0 0 1px var(--dz3-input); }
#drawer.dz3 .dz3-btn.is-danger-ghost { background: #fff; color: var(--dz3-red); box-shadow: inset 0 0 0 1px #efc9c4; }
#drawer.dz3 .dz3-btn:not(:disabled):hover { filter: brightness(.94); }
#drawer.dz3 .dz3-btn.is-ghost:not(:disabled):hover,
#drawer.dz3 .dz3-btn.is-danger-ghost:not(:disabled):hover { filter: none; background: #f8f9fb; }
#drawer.dz3 .dz3-btn:disabled { cursor: default; }
#drawer.dz3 .dz3-btn.is-red:disabled { background: #e9b8b2; }
#drawer.dz3 .dz3-btn:not(.is-red):disabled { opacity: .55; }
#drawer.dz3 .dz3-link {
    display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 500; color: var(--dz3-blue); text-decoration: none; white-space: nowrap;
}
#drawer.dz3 .dz3-link:hover { text-decoration: underline; }
#drawer.dz3 .dz3-icon-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; flex: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--dz3-text-3);
}
#drawer.dz3 .dz3-icon-btn:hover { background: var(--dz3-subtle-2); }
#drawer.dz3 .dz3-icon-btn.is-danger { color: var(--dz3-red); }

/* ── שדות בכרטיס ── */
#drawer.dz3 .dz3-textarea {
    width: 100%; min-height: 72px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5;
    color: var(--dz3-text); background: #fff; border: 1px solid var(--dz3-input); border-radius: 9px; padding: 10px 12px;
}
#drawer.dz3 .dz3-email {
    display: flex; align-items: center; gap: 8px; border: 1px solid var(--dz3-input); border-radius: 9px;
    padding: 0 12px; color: var(--dz3-muted); background: #fff;
}
#drawer.dz3 .dz3-email-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; padding: 10px 0; color: var(--dz3-text); }
#drawer.dz3 .dz3-email:focus-within,
#drawer.dz3 .dz3-textarea:focus { outline: 2px solid var(--dz3-blue); outline-offset: 1px; }
#drawer.dz3 .dz3-chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
#drawer.dz3 .dz3-chip {
    border: 0; border-radius: 99px; padding: 5px 11px; cursor: pointer; font: inherit; font-size: 13px;
    background: #fff; color: var(--dz3-text-2); box-shadow: inset 0 0 0 1px var(--dz3-input);
}
#drawer.dz3 .dz3-chip[aria-pressed="true"] { background: var(--dz3-text); color: #fff; box-shadow: inset 0 0 0 1px var(--dz3-text); }
#drawer.dz3 .dz3-progress { height: 4px; border-radius: 2px; background: #dbe3f7; overflow: hidden; }
#drawer.dz3 .dz3-progress span { display: block; height: 100%; background: var(--dz3-blue); transition: width .2s ease; }

/* ── תפריט הפעולות ── */
#drawer.dz3 .dz3-menu-wrap { position: relative; }
#drawer.dz3 .dz3-menu {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 20; min-width: 220px;
    display: flex; flex-direction: column; padding: 6px;
    background: #fff; border: 1px solid var(--dz3-border); border-radius: 10px; box-shadow: 0 12px 28px rgba(17, 24, 39, .14);
}
#drawer.dz3 .dz3-menu[hidden] { display: none; }
#drawer.dz3 .dz3-menu-item {
    text-align: start; padding: 9px 10px; border-radius: 7px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 13.5px; color: var(--dz3-text);
}
#drawer.dz3 .dz3-menu-item:hover,
#drawer.dz3 .dz3-menu-item:focus-visible { background: #f4f5f7; }
#drawer.dz3 .dz3-menu-item.is-danger { color: var(--dz3-red); }

/* ── הערות ── */
#drawer.dz3 .dz3-comments { display: flex; flex-direction: column; gap: 4px; }
#drawer.dz3 .dz3-composer {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
    background: var(--dz3-subtle); border: 1px solid var(--dz3-sep); border-radius: 9px; padding: 10px 12px;
}
#drawer.dz3 .dz3-composer:focus-within { outline: 2px solid var(--dz3-blue); outline-offset: 1px; }
#drawer.dz3 .dz3-composer-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dz3-info); }
#drawer.dz3 .dz3-composer-input {
    width: 100%; min-height: 40px; resize: vertical; border: 0; outline: 0; background: none;
    font: inherit; font-size: 14px; line-height: 1.5; color: var(--dz3-text);
}
#drawer.dz3 .dz3-composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#drawer.dz3 .dz3-seg { display: flex; background: var(--dz3-sep); border-radius: 7px; padding: 2px; }
#drawer.dz3 .dz3-seg-opt {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 0; border-radius: 5px; background: none;
    cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--dz3-muted);
}
#drawer.dz3 .dz3-seg-opt.active { background: #fff; font-weight: 600; color: var(--dz3-text); }
#drawer.dz3 .dz3-send {
    display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 7px; padding: 6px 12px; cursor: pointer;
    background: var(--dz3-blue); color: #fff; font: inherit; font-size: 13px; font-weight: 600;
}
#drawer.dz3 .dz3-send:disabled { cursor: default; opacity: .55; }
#drawer.dz3 .dz3-note { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--dz3-hair); }
#drawer.dz3 .dz3-composer + .dz3-note { border-top: 0; }
#drawer.dz3 .dz3-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
    background: #e8edf9; color: var(--dz3-blue); font-size: 13px; font-weight: 600;
}
#drawer.dz3 .dz3-avatar.is-internal { background: #fdf3e6; color: var(--dz3-amber); }
#drawer.dz3 .dz3-note-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#drawer.dz3 .dz3-note-head { display: flex; gap: 6px; align-items: baseline; font-size: 13.5px; }
#drawer.dz3 .dz3-note-name { font-weight: 600; }
#drawer.dz3 .dz3-note-time { margin-inline-start: auto; font-size: 12.5px; color: var(--dz3-faint); white-space: nowrap; }
#drawer.dz3 .dz3-note-text { font-size: 14px; line-height: 1.6; color: var(--dz3-text-2); white-space: pre-line; overflow-wrap: anywhere; }
#drawer.dz3 .dz3-tag {
    display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 5px;
    font-size: 11.5px; font-weight: 600; color: var(--dz3-amber); background: #fdf3e6;
}
#drawer.dz3 .dz3-empty { text-align: center; font-size: 13.5px; color: var(--dz3-faint); padding: 18px 0; }

/* ── היסטוריה ── */
#drawer.dz3 .dz3-history { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 6px; }
#drawer.dz3 .dz3-event { display: flex; gap: 12px; padding: 10px 0; align-items: baseline; }
#drawer.dz3 .dz3-event + .dz3-event { border-top: 1px solid var(--dz3-hair); }
#drawer.dz3 .dz3-event-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dz3-faint); flex: none; transform: translateY(-2px); }
#drawer.dz3 .dz3-event-main { flex: 1; min-width: 0; font-size: 14px; }
#drawer.dz3 .dz3-event-who { font-weight: 600; }
#drawer.dz3 .dz3-event-what { color: var(--dz3-text-3); }
#drawer.dz3 .dz3-event-detail { font-size: 13px; color: var(--dz3-muted); margin-top: 2px; overflow-wrap: anywhere; }
#drawer.dz3 .dz3-event-time { font-size: 12.5px; color: var(--dz3-faint); white-space: nowrap; }

/* ── מיקוד מקלדת ── */
#drawer.dz3 button:focus-visible,
#drawer.dz3 a:focus-visible { outline: 2px solid var(--dz3-blue); outline-offset: 2px; }

@media (max-width: 640px) {
    #drawer.dz3 .dz3-actions.is-compact { flex-wrap: wrap; }
    #drawer.dz3 .dz3-actions.is-compact .dz3-btn:first-child { flex-basis: 100%; }
}

/* מטרות מגע של 44 פיקסל על מכשיר מגע (DESIGN.md, נגישות). */
@media (pointer: coarse), (max-width: 640px) {
    #drawer.dz3 .dz3-btn,
    #drawer.dz3 .dz3-tab,
    #drawer.dz3 .dz3-menu-item,
    #drawer.dz3 .dz3-send,
    #drawer.dz3 .dz3-chip,
    #drawer.dz3 .dz3-seg-opt,
    #drawer.dz3 .dz3-link { min-height: 44px; }
    #drawer.dz3 .dz3-nav { height: 44px; }
    #drawer.dz3 .dz3-nav-btn,
    #drawer.dz3 .dz3-icon-btn { width: 44px; height: 44px; }
    #drawer.dz3 .dz3-more { height: 44px; }
}

/* שורות בדיקת החשבונית: סכום, ספק, כפילות. מעל שדה המייל בכרטיס השליחה,
   ובכרטיס האפור של בקשה שנשלחה או נסגרה, שם הן לרוב האחרונות בכרטיס. */
#drawer.dz3 .dz3-checks { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 12px; }
#drawer.dz3 .dz3-checks:last-child { margin-block-end: 0; }
#drawer.dz3 .dz3-checks:empty { display: none; }
#drawer.dz3 .dz3-check { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; font-weight: 500; line-height: 1.45; }
#drawer.dz3 .dz3-check .dz3-ic { flex: none; margin-top: 2px; }
/* A request number (DR-0187) is not broken at its hyphen across two lines. */
#drawer.dz3 .dz3-check bdi { white-space: nowrap; }
#drawer.dz3 .dz3-check span { min-width: 0; overflow-wrap: anywhere; }
#drawer.dz3 .dz3-checks-head { font-size: 12px; font-weight: 600; color: var(--dz3-muted-strong); }
#drawer.dz3 .dz3-check.is-ok { color: var(--dz3-green); }
#drawer.dz3 .dz3-check.is-warn { color: var(--dz3-amber); }
#drawer.dz3 .dz3-check.is-bad { color: var(--dz3-red); }
#drawer.dz3 .dz3-check.is-muted { color: var(--dz3-muted-strong); }