/* calmpayroll.css — שפת-העיצוב CalmPayroll (מקור: .claude/skills/calmpayroll/SKILL.md).
 *
 * מערכת-העיצוב המחייבת לאתר-המשרד ולצד-הלקוח (ובהמשך לפנדה — ביחידת-מעבר נפרדת).
 * בסיס: מערכת MODIBODI (Google Sites), שיילנה בחרה ב-11/10/2026. ZERO-RED.
 *
 * ⚠ הכל ממוסגר תחת `.cp-root` כדי שלא יתנגש ב-panda-ds.css. באתר פנדה הקובץ נטען
 *   אך לא חל (אין `.cp-root` בעמוד). באתר-המשרד מוסיפים `.cp-root` לאזור-התוכן.
 */

.cp-root {
  /* ===== טוקנים (סעיף 1 ב-SKILL — ⛔ לא להמציא גוונים) ===== */
  --cp-dark:        #17320b;   /* כותרות טבלה, פוטר, טקסט ראשי */
  --cp-primary:     #528163;   /* כפתור ראשי, מסגרת כרטיס, מספרי-סיכום, לשונית פעילה */
  --cp-accent:      #8dd1bb;   /* מסגרות משניות, סוף גריד-הרקע */
  --cp-light:       #c0c2c3;   /* מסגרת שדות וכפתורים משניים */
  --cp-lighter:     #e4e5e9;   /* פאנל אפור (הבחנה), פס כרטיסי-סיכום */
  --cp-bg:          #f0f9f4;   /* פאנל ירוק בהיר (הבחנה), שורות זוגיות, כרטיסי-סיכום */
  --cp-controls:    #ecf0f1;   /* פס הלשוניות/כפתורים */
  --cp-success:     #27ae60;   /* «אושר/נשלח» */
  --cp-warning:     #f39c12;   /* «ממתין/פתוח», חסר (האדום של המקור → ענבר) */
  --cp-header-from: #1d5c3a;   /* כותרת — ירוק רענן (⛔ לא זית) */
  --cp-header-to:   #3f9466;

  font-family: 'Assistant', 'Heebo', Arial, sans-serif;
  font-size: 14px;
  color: var(--cp-dark);
  direction: rtl;
}

/* ===== מסגרת-אזור (סעיף 3) ===== */
.cp-root .cp-wrap { max-width: 1250px; margin: 0 auto; }

/* ===== כותרת (סעיף 3) ===== */
.cp-root .cp-head {
  background: linear-gradient(45deg, var(--cp-header-from), var(--cp-header-to));
  color: #fff; padding: 22px 24px; border-radius: 15px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; box-shadow: 0 10px 24px rgba(23,50,11,0.12);
}
.cp-root .cp-head h1 { margin: 0; font-size: 1.7rem; font-weight: 600; }
.cp-root .cp-head .cp-sub { margin: 4px 0 0; font-size: 0.95rem; opacity: .95; }
.cp-root .cp-head .cp-pillbox {
  font-size: 14px; background: rgba(255,255,255,0.1);
  padding: 8px 15px; border-radius: 999px;
}

/* ===== כרטיס (סעיף 3 — ⛔ לבן כמשטח-עבודה) ===== */
.cp-root .cp-card {
  background: var(--cp-bg); border: 2px solid var(--cp-primary);
  border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.cp-root .cp-card.gray { background: var(--cp-lighter); border-color: var(--cp-accent); }
.cp-root .cp-card h3 { margin: 0 0 12px; font-size: 1.1rem; font-weight: 600; }

/* כרטיס-סיכום: פס-צד 4px, מספר גדול ירוק */
.cp-root .cp-tile {
  background: var(--cp-bg); border-radius: 12px; padding: 18px 20px;
  border-inline-end: 4px solid var(--cp-primary);
  box-shadow: 0 2px 10px rgba(23,50,11,0.05);
}
.cp-root .cp-tile .cp-n { font-size: 2rem; font-weight: 700; color: var(--cp-primary); }
.cp-root .cp-tile .cp-l { color: var(--cp-dark); font-size: 14px; }

/* ===== רשת-כרטיסים ===== */
.cp-root .cp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* ===== תגיות-סטטוס (ZERO-RED) ===== */
.cp-root .cp-pill {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700;
}
.cp-root .cp-pill.ok   { color: #fff; background: var(--cp-success); }
.cp-root .cp-pill.wait { color: #fff; background: var(--cp-warning); }
.cp-root .cp-pill.info { color: #fff; background: var(--cp-primary); }

/* ===== כפתורים (סעיף 3) ===== */
.cp-root .cp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 600; border: none; border-radius: 8px;
  padding: 11px 20px; cursor: pointer; text-decoration: none;
  transition: background .18s ease;
}
.cp-root .cp-btn-main { background: var(--cp-primary); color: #fff; }
.cp-root .cp-btn-main:hover { background: var(--cp-dark); }
.cp-root .cp-btn-sec {
  background: #fff; color: var(--cp-dark); border: 2px solid var(--cp-light);
}
.cp-root .cp-btn-sec:hover { border-color: var(--cp-accent); background: var(--cp-bg); }

/* ===== טקסט-עזר ===== */
.cp-root .cp-hint { color: var(--cp-primary); font-size: 14px; margin: 4px 0; }
.cp-root .cp-muted { color: var(--cp-light); font-size: 14px; }
.cp-root [dir="ltr"] { direction: ltr; }

@media (max-width: 640px) {
  .cp-root .cp-head h1 { font-size: 1.3rem; }
  .cp-root .cp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * ערכת-נושא CalmPayroll לכל מסכי אתר-המשרד (יחידה 2).
 * מיפוי טוקני --pd-* של panda-ds לירוק CalmPayroll — כך כל מסך קיים
 * (שמעוצב ב-panda-ds) נצבע ירוק באתר-המשרד בלי שכתוב-מסך. פנדה לא נוגעת
 * (הקלאס cp-theme מתווסף ל-<html> רק כש-SupabaseConfig.SITE.theme='calmpayroll').
 *
 * ⚠ ניגודיות: שער ה-build (`תווית לבנה על מילוי`) בודק רק את panda-ds.css,
 *   לכן הירוקים כאן אומתו ידנית ≥4.5:1 על לבן, ונעולים בשער
 *   `verify-office-theme-contrast` (scripts/verify-office-theme-contrast.js):
 *   accent #2b6b48=6.36 · accent-hover #1d5c3a=7.94 · accent-2 #357a54=5.17 ·
 *   work #2b6b48=6.36 · banner #1d5c3a=7.94→#2e7050=5.92. (ok/attn/danger —
 *   כבר ZERO-RED ומאומתים, לא משתנים.)
 * ============================================================ */
html.cp-theme {
  --pd-accent:         #2b6b48;   /* כפתור ראשי, לשונית פעילה, קישור — ירוק */
  --pd-accent-hover:   #1d5c3a;
  --pd-accent-soft:    #e9f3ec;
  --pd-accent-ink:     #2b6b48;
  --pd-accent-2:       #357a54;   /* מבטא-משני — ירוק בהיר יותר (בידול בגוון אחד) */
  --pd-accent-2-soft:  #e4f1ea;
  --pd-accent-2-hover: #2b6b48;
  --pd-accent-2-ink:   #1d5c3a;
  --pd-work:           #2b6b48;   /* «בעבודה» — ירוק */
  --pd-work-soft:      #e9f3ec;
  --pd-work-line:      #9cc9b0;
  --pd-work-ink:       #2b6b48;
  --pd-banner: linear-gradient(90deg, #1d5c3a 0%, #2e7050 100%);  /* כותרת ירוקה רעננה */
}
/* רקע ירוק-בהיר במצב-יום בלבד — לא דורסים את הרקע הכהה של panda-ds במצב-לילה */
html.cp-theme:not([data-theme="dark"]) {
  --pd-bg: #f0f9f4;
  /* חדות (מדריך CalmPayroll §1א-ב: טקסט ראשי --cp-dark, משקל 600+).
     יילנה 21/10/2026: «לא ראיתי שבוצע הגדלה של גופן וחידוד». נעול ב-verify-panda-theme (≥7:1 על הרקע). */
  --pd-text:  #17320b;   /* ~13:1 על #f0f9f4 (היה אפור-כחלחל #475569) */
  --pd-muted: #3d5a49;   /* טקסט-משני — ~7:1 */
}
/* גופן גדול יותר: כל מידה במערכת ב-rem נגזרת מכאן (panda-ds: 18px) — טקסט, ריפוד וגבהים גדלים יחד. */
html.cp-theme { font-size: 19px; }
html.cp-theme body { font-weight: 600; }