/* ============ תצוגות מסך "תקציב פעילויות" ============
   בורר התצוגות, טבלת הרשימה, רצועת החודשים, דירוג הניצול והחלון הצדדי.
   נטען אחרי budget.css כדי שכללי הכרטיס הקיימים ימשיכו לגבור על מה שאינו
   נוגע לתצוגות החדשות. אין כאן שינוי לכרטיס הפעילות. */

/* ---- בורר התצוגות ---- */
/* יושב בשורה משלו בין שורת הכותרת לסרגל הסינון. הכרטיס שמעליו כבר
   נושא מרווח תחתון, ולכן אין כאן מרווח עליון משלו: שני מרווחים על שורה
   בת 33 פיקסל עלו יותר מהשורה עצמה.

   הרקע היה #eef2f7, שהוא בדיוק רקע העמוד מתחתיו, ולכן הקבוצה לא נראתה
   כלל: חמש לשוניות צפו על הדף ורק הפעילה נראתה כפקד. הרקע הכהה יותר
   והגבול הם התיחום. אותו פגם בדיוק כמו בריחוף על כותרת הטבלה. */
.activity-view-switcher {
    position: relative;
    display: inline-flex;
    background: #e2e8f0;
    border: 1px solid #d7dfe8;
    border-radius: 9px;
    padding: 3px;
    gap: 3px;
    margin: 0;
}

/* הגלולה הנעה: הסימון של הלשונית הפעילה, שמחליק בין הלשוניות במקום לדלג.
   המיקום והרוחב נמדדים ב-JS ונכתבים כמשתנים, כי לשוניות בעברית שונות
   ברוחבן ואי אפשר לגזור אותם מ-CSS בלבד. בלי data-pill (מדידה שנכשלה,
   בורר שעוד לא הוצג) הרוחב אפס והלשונית מסמנת את עצמה, כמקודם. */
.activity-view-switcher::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    inset-inline-start: var(--pill-x, 0);
    width: var(--pill-w, 0);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1);
    pointer-events: none;
}

/* ההחלקה נדלקת רק אחרי המיקום הראשון, אחרת הגלולה מחליקה מהקצה בכל
   טעינת מסך. */
.activity-view-switcher[data-animate]::before {
    transition: inset-inline-start .22s ease, width .22s ease;
}

.activity-view-tab {
    border: none;
    background: transparent;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    padding: 7px 13px;
    border-radius: 6px;
    white-space: nowrap;
    flex: 0 0 auto;
    cursor: pointer;
    /* מעבר עדין בין הלשוניות, באותו עיתוי של שאר המסך
       (--card-accent-transition ב-base.css). בלעדיו הלשונית הפעילה קופצת. */
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.activity-view-tab:hover:not(.is-active) {
    background: rgba(255, 255, 255, .55);
    color: #2f4f7f;
}

.activity-view-tab {
    position: relative;
    z-index: 1;
}

.activity-view-tab.is-active {
    color: #2f4f7f;
}

/* נפילה בטוחה: כל עוד הגלולה לא מוקמה, הלשונית הפעילה נושאת את הסימון
   בעצמה. בלי זה, מדידה שנכשלה משאירה בורר בלי שום סימן מי פעילה. */
.activity-view-switcher:not([data-pill]) .activity-view-tab.is-active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1);
}

.activity-view-tab:focus-visible {
    outline: 2px solid var(--color-primary, #2f4f7f);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .activity-view-tab { transition: none; }
    .activity-view-switcher[data-animate]::before { transition: none; }
}

/* ---- צ'יפ סינון החודש ---- */
.activity-period-chip {
    display: inline-flex;
    align-items: center;
    background: #2f4f7f;
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 6px;
    cursor: pointer;
}

/* ---- תצוגת רשימה ---- */
/* `.content-card` נושא צל בלבד ואין לו גבול. על רקע העמוד הבהיר, טבלה
   שיושבת בו נראית כמו טקסט צף ולא כמו כרטיס. הגבול הוא זה של כרטיס
   הפעילות, כדי ששני המשטחים באותו מסך ייראו כאותו חומר. */
.activity-view-card {
    margin-bottom: 0;
    border: 1px solid #e6e9f0;
}

.activity-list-table tbody tr {
    cursor: pointer;
}

/* .data-table מיישר עמודה מספרית ל-start, והתאים הכספיים כאן מיושרים
   ל-end. כותרת שנשארת בצד השני מהמספרים שמתחתיה נקראת כעמודה אחרת. */
.activity-list-table thead th.num {
    text-align: end;
}

.activity-list-table thead th.num .ind {
    margin-inline: 5px;
}

.activity-list-table tbody tr:focus-visible {
    outline: 2px solid var(--color-primary, #2f4f7f);
    outline-offset: -2px;
}

/* ---- תצוגת לפי תקופה ---- */
.activity-period-strip {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.activity-period-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: none;
    background: transparent;
    font-family: inherit;
    padding: 0;
    cursor: pointer;
}

.activity-period-amount {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.activity-period-bar.is-on .activity-period-amount,
.activity-period-bar.is-on .activity-period-label {
    color: #1e293b;
}

.activity-period-plot {
    position: relative;
    display: block;
    height: 76px;
    background: #f8fafc;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}

.activity-period-fill-budget,
.activity-period-fill-spent {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: block;
}

.activity-period-fill-budget {
    background: #c7d5e8;
    border-radius: 5px 5px 0 0;
}

.activity-period-fill-spent {
    background: #2f4f7f;
}

.activity-period-bar.is-on .activity-period-fill-budget { background: #a9bed9; }
.activity-period-bar.is-on .activity-period-fill-spent { background: #24406a; }

.activity-period-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    border-top: 2px solid transparent;
    padding-top: 5px;
}

.activity-period-bar.is-on .activity-period-label {
    border-top-color: #2f4f7f;
}

.activity-period-bar:focus-visible {
    outline: 2px solid var(--color-primary, #2f4f7f);
    outline-offset: 2px;
    border-radius: 5px;
}

.activity-period-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 11px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.activity-period-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    cursor: pointer;
}

.activity-period-row:last-child { border-bottom: none; }
.activity-period-row:hover,
.activity-list-table tbody tr:hover { background: #f8fafc; }

.activity-period-row:focus-visible,
.activity-usage-row:focus-visible {
    outline: 2px solid var(--color-primary, #2f4f7f);
    outline-offset: -2px;
}

/* ---- תצוגת ניצול ---- */
.activity-usage-row {
    display: grid;
    grid-template-columns: minmax(160px, 250px) 1fr minmax(140px, 150px);
    gap: 16px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}

.activity-usage-row:hover { background: #f8fafc; }

.activity-usage-track {
    position: relative;
    height: 22px;
    background: #f8fafc;
    border-radius: 4px;
    overflow: hidden;
}

.activity-usage-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: 4px;
}

.activity-usage-mark {
    position: absolute;
    inset-block: 0;
    width: 1px;
    background: #94a3b8;
}