/* ═══ v16 — רה-דיזיין: שורות-גריד (6b/8b) + KPI sparkline (7b) ═══ */

/* --- שורת סיכום מעל הרשימה --- */
.req-summary {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  padding: 14px 20px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: #64748b;
}
.req-summary strong { color: #1e293b; font-weight: 700; }
.req-summary .rs-pending { color: #9a3412; font-weight: 600; }
.req-summary .rs-approved { color: #047857; font-weight: 600; }
.req-summary bdi { font-variant-numeric: tabular-nums; }

/* --- כרטיס-גריד + שורות --- */
.req-grid {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  overflow: hidden;
}
.req-grid-head,
.req-row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
}
/* עמודות: צ'ק · בקשה · סטטוס · מגיש/תאריך · סכום · ⋯ */
.req-grid.cols-all .req-grid-head,
.req-grid.cols-all .req-row { grid-template-columns: 34px 1fr 150px 130px 110px 40px; }
/* my-requests: בלי מגיש, סטטוס רחב יותר */
.req-grid.cols-my .req-grid-head,
.req-grid.cols-my .req-row { grid-template-columns: 34px 1fr 190px 110px 100px 40px; }

.req-grid-head {
  padding: 9px 20px;
  border-bottom: 1px solid #eef1f6;
  font-size: 11px;
  font-weight: 600;
  color: #5a6779;
}
.req-grid-head .rh-amount { text-align: left; }
.req-row {
  border-bottom: 1px solid #e6e9f0;
  cursor: pointer;
  transition: background .12s;
}
.req-row:last-child { border-bottom: 0; }
.req-row:hover { background: #f8fafc; }

/* תיבת הסימון: 24px הפכו את העמודה לרעש ויזואלי לאורך כל הטבלה.
   18px נקראים כסימון ולא ככפתור, והגוון הוא גוון הארגון ולא כחול קבוע.
   במכשיר מגע הריבוע חוזר להיות גדול, כי שם הוא מטרת אצבע. */
.req-check {
  width: 18px;
  height: 18px;
  accent-color: var(--card-accent, #2f4f7f);
  cursor: pointer;
  margin: 0;
}

@media (hover: none) and (pointer: coarse) {
  .req-check { width: 22px; height: 22px; }
}

.req-cell-main { min-width: 0; }
.req-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.req-num { font-size: 13px; font-weight: 700; color: #2563eb; }
.req-inst {
  font-size: 11px;
  color: #5a6779;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.req-title-row {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.req-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.req-sub .sub-sep { color: #e2e8f0; }
.req-sub .sub-cat {
  background: #f1f5f9;
  color: #475569;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 500;
}
.req-sub .sub-item { display: inline-flex; align-items: center; gap: 4px; }
.req-by { font-size: 12px; color: #64748b; }
.req-by .rb-date { color: #5a6779; margin-top: 1px; }
.req-amount {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}
.req-next {
  font-size: 10.5px;
  color: #9a3412;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* קישור-פעולה כחול-מותג (למשל "העלה חשבונית") — לא אזהרה */
.req-next-cta { color: #2563eb; font-weight: 600; }
.req-row:hover .req-next-cta { text-decoration: underline; }
.req-tag-funding {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 1px 7px;
  border-radius: 6px;
}

/* --- תג-סטטוס מרובע עם נקודה --- */
.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.st-badge .st-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* --- תפריט פעולות ⋯ --- */
.req-menu-btn {
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  color: #cbd5e1;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.req-menu-btn:hover { color: #64748b; background: #f1f5f9; }
.row-action-menu {
  position: absolute;
  z-index: 1200;
  min-width: 150px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
  padding: 5px;
}
.row-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  text-align: start;
}
.row-action-item:hover { background: #f6f8fa; }
.row-action-item.danger { color: #b91c1c; }
.row-action-item.danger:hover { background: #fef2f2; }

/* --- info-row (בחר הכל / מציג X–Y) --- */
.req-inforow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 10px;
}

/* --- שורות דאשבורד קומפקטיות (7b) --- */
.dash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid #f4f6f9;
  cursor: pointer;
  transition: background .12s;
}
.dash-row:last-child { border-bottom: 0; }
.dash-row:hover { background: #f8fafc; }
.dash-row .dr-main { flex: 1; min-width: 0; }
.dash-row .dr-line1 { display: flex; align-items: center; gap: 7px; }
.dash-row .dr-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-row .dr-num { font-size: 12px; font-weight: 700; color: #2563eb; flex-shrink: 0; }
.dash-row .dr-meta { font-size: 11px; color: #5a6779; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row .dr-side { text-align: left; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dash-row .dr-amount { font-size: 13px; font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; }
.dash-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.dash-list-head .dlh-link { font-size: 12px; color: #2563eb; font-weight: 600; cursor: pointer; }

/* --- KPI: chip + sparkline + כרטיס-פעולה (ממתין) --- */
/* סקירת הפעילויות בדאשבורד משתמשת באותם כרטיסי מדד. הסלקטור שלה מתווסף לכל
   כלל קיים ולא משוכפל לבלוק משלו: שני גרידים שנראים אותו דבר ומתוחזקים בשני
   מקומות נפרדים ברגע שמישהו משנה אחד מהם. */
#kpiGrid .kpi-card, #activitiesOverviewStats .kpi-card { flex-direction: column; align-items: stretch; gap: 0; }
#kpiGrid .kpi-top, #activitiesOverviewStats .kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#kpiGrid .kpi-top .stat-label, #activitiesOverviewStats .kpi-top .stat-label { margin-bottom: 0; }
#kpiGrid .kpi-ico, #activitiesOverviewStats .kpi-ico { color: #5a6779; display: inline-flex; }
#kpiGrid .kpi-ico svg, #activitiesOverviewStats .kpi-ico svg { width: 16px; height: 16px; stroke-width: 2; fill: none; }
#kpiGrid .kpi-card .stat-value, #activitiesOverviewStats .kpi-card .stat-value { margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
#kpiGrid .kpi-foot, #activitiesOverviewStats .kpi-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
}
#kpiGrid .kpi-chip, #activitiesOverviewStats .kpi-chip {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 1px 8px;
  border-radius: 99px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#kpiGrid .kpi-chip.chip-green, #activitiesOverviewStats .kpi-chip.chip-green { color: #047857; background: #ecfdf5; }
#kpiGrid .kpi-spark, #activitiesOverviewStats .kpi-spark { display: inline-flex; align-items: center; }
#kpiGrid .kpi-spark svg, #activitiesOverviewStats .kpi-spark svg { display: block; }
/* כרטיס ממתין — מודגש כפעולה */
#kpiGrid .kpi-pending, #activitiesOverviewStats .kpi-pending { border-color: #fde68a; }
#kpiGrid .kpi-pending .stat-label, #activitiesOverviewStats .kpi-pending .stat-label { color: #9a3412; font-weight: 600; }
#kpiGrid .kpi-pending .kpi-ico, #activitiesOverviewStats .kpi-pending .kpi-ico { color: #b45309; }
#kpiGrid .kpi-cta, #activitiesOverviewStats .kpi-cta {
  margin-inline-start: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* --- מקרא גרף מגמה --- */
.trend-legend { display: flex; gap: 14px; align-items: center; }
.trend-legend .tl-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #475569;
  font-weight: 600;
}
.trend-legend .tl-dot { width: 9px; height: 9px; border-radius: 50%; }

/* שורת סטטוס+תאריך בתוך עמודת הבקשה — מוצגת רק בתצוגה הקומפקטית */
.req-inline-meta { display: none; }
.req-inline-meta .rim-date { font-size: 11px; color: #5a6779; }
.req-inline-meta .req-next { margin-top: 0; }

/* עד 1024px הסיידבר הקבוע (220px) מצר את התוכן — עוברים לגריד קומפקט
   כדי שהעמודות הקבועות לא יגלשו וייחתכו (הדף מסתיר overflow אופקי).
   הסטטוס לא נעלם — הוא עובר לתוך עמודת הבקשה. */
@media (max-width: 1024px) {
  .req-grid.cols-all .req-grid-head,
  .req-grid.cols-all .req-row,
  .req-grid.cols-my .req-grid-head,
  .req-grid.cols-my .req-row { grid-template-columns: 26px 1fr 92px 34px; gap: 8px; padding-inline: 14px; }
  .req-c-status, .rh-status, .req-c-by, .rh-by { display: none; }
  .req-inline-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }
}


/* On a phone a single clipped line leaves the request unidentifiable —
   "מיקרוסקופים למעבדת ביולוגיה" lost 114px to the ellipsis. Give the title
   two lines there; the dense one-line form stays on wider screens. */
@media (max-width: 768px) {
    /* the title shares a flex line with the request number and urgency tag */
    .dash-row .dr-line1 { flex-wrap: wrap; }
    .req-title-row,
    .dash-row .dr-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .req-sub {
        white-space: normal;
        flex-wrap: wrap;
        row-gap: 2px;
    }
}

/* חיווי "הטיוטה נשמרה" בטופס בקשה חדשה — דיסקרטי, לא תובע תשומת לב. */
.draft-saved-hint {
    font-size: 12px;
    color: #5a6779;
    margin-top: 4px;
}
.draft-saved-hint.is-fresh {
    animation: draftSavedFade 2.4s ease forwards;
}
@keyframes draftSavedFade {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .draft-saved-hint.is-fresh { animation: none; opacity: 0.7; }
}

/* ── סינון מקופל במובייל ─────────────────────────────────────────────
   ברשימת הבקשות ב-390px המשתמש גלל 354px של כותרות, מתגי תצוגה, חיפוש
   ובוררים לפני שראה בקשה אחת — 42% מהמסך. הבוררים מתקפלים מאחורי כפתור,
   והחיפוש נשאר גלוי כי הוא מה שמשתמשים בו בפועל. */
.filters-toggle { display: none; }

@media (max-width: 768px) {
    .filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 34px;
        padding: 6px 12px;
        font-size: 13px;
        font-family: inherit;
        color: #475569;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        cursor: pointer;
    }
    .filters-toggle[aria-expanded="true"] {
        background: #eef2ff;
        border-color: #5a67d8;
        color: #4338ca;
    }
    .list-filters {
        display: none;
        flex-basis: 100%;
        gap: 6px;
    }
    .list-filters.is-open { display: flex; flex-wrap: wrap; }
    .list-filters > select { flex: 1 1 45%; }

    /* החיפוש וכפתור הסינון נדחקו לשתי שורות נפרדות, כל אחת 34px + מרווח.
       על אותה שורה הם חוסכים עוד שורה שלמה מעל התוכן. */
    #allRequestsSection .top-bar input[type="text"],
    #myRequestsSection .top-bar input[type="text"] {
        flex: 1 1 140px;
        width: auto !important;
        min-width: 0;
    }
}