/* utilities.css — utility classes for tak-rashuyot
 *
 * Reference: design_rules_audit.docx (11/6/2026), stage 5 (manual, file-by-file).
 *
 * עקרון: כל class כאן הוא single-property utility שמופיע ב-2+ קבצים.
 * אם class משמש רק קובץ אחד - מקומו ב-<style> של הקובץ או ב-components/X.css (שלב 7).
 *
 * שמות: Bootstrap-style קצר. הוסף class חדש רק אחרי שהוא מופיע ב-2 קבצים.
 *
 * מתחיל עם 3 classes - יתרחב בהדרגה ככל שעוברים קובץ-קובץ.
 */

/* ───── Font size ───── */
.fs-sm    { font-size: 0.85rem; }
.fs-md    { font-size: 0.88rem; }

/* ───── Text colors (mapped from tokens) ───── */
.text-slate-600 { color: var(--slate-600); }
.text-danger    { color: var(--color-danger-text); }
.text-warning   { color: var(--color-warning-text); }

/* ───── Margins ───── */
.mb-sm          { margin-bottom: 0.5rem; }

/* ───── Flex ───── */
.flex-2         { flex: 2; }

/* ───── Brand color (link) ───── */
.text-brand     { color: var(--brand-primary-text); }

/* ───── Additional text colors ───── */
.text-slate-500     { color: var(--slate-500); }
.text-danger-dark   { color: var(--color-danger-dark-text); }
.text-muted-light   { color: var(--ink-400); }
.text-warning-amber { color: var(--brand-primary-text); }

/* ───── Layout utilities ───── */
.text-center    { text-align: center; }
.nowrap         { white-space: nowrap; }

/* ───── More margins ───── */
.mt-sm          { margin-top: 0.5rem; }
.mb-0           { margin-bottom: 0; }

/* ───── Brand accent color (blue-500) ───── */
.text-brand-accent { color: var(--brand-accent-text); font-weight: 500; }

/* ───── Purple tag (chips) ───── */
.tag-purple   { background: var(--ink-50); color: var(--brand-primary-text); }

/* ───── Chip-style button (collapse/expand toggle) ───── */
.chip-button  { padding: 0.35rem 0.9rem; background: var(--slate-100); border: 1px solid var(--slate-300); border-radius: 4px; font-size: 0.85rem; font-weight: 600; color: var(--ink-700); cursor: pointer; }

/* ───── More margins ───── */
.mt-md        { margin-top: 0.6rem; }
.mt-lg        { margin-top: 1.2rem; }

/* ───── Truncate long text in table cells / list rows (AUDIT-INDEX a023) ─────
   שימוש: <td class="truncate-cell" title="{{ full_text }}">{{ full_text }}</td>
   על השדות שיש להם DB VARCHAR(120/500) — מבטיח שלא יתפוצצו פריסות. */
.truncate-cell {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.truncate-cell-wide { max-width: 40ch; }   /* לעמודות רחבות יותר */
.truncate-cell-narrow { max-width: 16ch; } /* לעמודות צרות */

/* ───── Auto-truncate על contenteditable כשלא בעריכה (AUDIT-INDEX a023) ─────
   טקסט ארוך מתקצר עם ellipsis בתצוגה רגילה, ומתרחב בלחיצה לעריכה.
   חל על כל [contenteditable="true"] שמסומן עם class="editable-inline" או
   על [data-field="name"] / [data-field="notes"] / .editable-name (הדפוס הקיים
   ב-index.html / sections.html / activities_list.html). הופך פריסת טבלאות
   ליציבה גם כשהמשתמש מקליד שם ארוך אך פחות מהמקסימום (50/120). */
[data-field="name"][contenteditable="true"]:not(:focus),
[data-field="notes"][contenteditable="true"]:not(:focus),
.editable-name[contenteditable="true"]:not(:focus) {
    display: inline-block;
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
/* בעריכה — מורידים את ההגבלה כדי שהטקסט יהיה גלוי במלואו לכתיבה. */
[data-field="name"][contenteditable="true"]:focus,
[data-field="notes"][contenteditable="true"]:focus,
.editable-name[contenteditable="true"]:focus {
    max-width: none;
    overflow: visible;
    white-space: normal;
}