/* ═══════════════════════════════════════════════════════════════
   GutPlus OS — שכבת "פוסטר"
   ───────────────────────────────────────────────────────────────
   נטענת אחרי גיליון הסגנון הבנוי ודורסת את טוקני העיצוב שלו.
   כל הצבעים, הפינות והטיפוגרפיה של האפליקציה עוברים דרך משתני
   :root, ולכן שינוי כאן משנה את כל המסכים בלי לגעת בקוד המקור.

   הפלטה נלקחת מהלוגו: נייבי #0F3354 וירוק־ים #2E7F78.
   העקרונות: מסגרות עבות בבלוקים גדולים, פינות גדולות,
   טיפוגרפיה עברית כבדה, וצבע שמגיע כבלוק מלא ולא כגוון עדין.

   קווי המתאר הדקים (מפרידי טבלה, קווי הפרדה) נשארים רכים דרך
   --color-border, כי הכלל הגלובלי ‎*{border-color}‎ חל על הכל.
   הקו החזק מגיע דרך --color-border-strong ודרך הכללים למטה בלבד.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&family=Secular+One&display=swap');

/* ── בהיר: נייבי על נייר ─────────────────────────────────── */
:root {
  --color-bg:              #f1efe9;
  --color-surface:         #ffffff;
  --color-surface-raised:  #ffffff;
  --color-border:          #e2ded4;
  --color-border-strong:   #0f3354;

  --color-text:            #12202f;
  --color-text-muted:      #46586b;
  --color-text-faint:      #6d7d8d;

  --color-accent:          #0f3354;
  --color-accent-hover:    #17466f;
  --color-accent-active:   #0a2440;
  --color-accent-bg:       #dee7f0;
  --color-accent-border:   #0f3354;
  --color-accent-text:     #0f3354;
  --color-accent-soft:     #dee7f0;

  /* ירוק־הים מהלוגו הוא צבע ההצלחה — כך המותג נוכח גם בסטטוסים */
  --color-success:         #2e7f78;
  --color-success-bg:      #d9ecea;
  --color-success-border:  #2e7f78;
  --color-success-text:    #1f5f59;

  --color-warning:         #9a4600;
  --color-warning-bg:      #ffe6cc;
  --color-warning-border:  #9a4600;
  --color-warning-text:    #7d3800;

  --color-danger:          #b32338;
  --color-danger-bg:       #ffdfe3;
  --color-danger-border:   #b32338;
  --color-danger-text:     #8d1a2b;

  --color-info:            #1b5aa0;
  --color-info-bg:         #dae9fa;
  --color-info-border:     #1b5aa0;
  --color-info-text:       #14477e;

  --color-hot:             #c4451f;
  --color-hot-bg:          #ffe3d6;
  --color-hot-border:      #c4451f;
  --color-hot-text:        #9b3417;

  --color-plan:            #5b3e86;
  --color-plan-bg:         #e8e1f5;
  --color-plan-border:     #5b3e86;
  --color-plan-text:       #462f68;

  --color-muted:           #56636f;
  --color-muted-bg:        #eae7e0;
  --color-muted-border:    #c8c3b8;
  --color-muted-text:      #46586b;

  --color-chart-1:         #0f3354;
  --color-chart-2:         #2e7f78;
  --color-chart-3:         #c4451f;
  --color-chart-4:         #5b3e86;
  --color-chart-5:         #1b5aa0;
  --color-chart-6:         #b32338;

  --color-row-hover:       #e8eef4;
  --color-row-stripe:      #faf9f5;
  --color-focus-ring:      #0f3354;

  /* פוסטר הוא שטוח — הצללים כמעט נעלמים, המסגרת עושה את העבודה */
  --shadow-card:           0 2px 0 rgba(18, 32, 47, .06);
  --shadow-pop:            0 20px 44px -18px rgba(18, 32, 47, .38);

  /* פינות גדולות בהרבה מברירת המחדל (6 / 8 / 12px) */
  --radius-md:             .75rem;
  --radius-lg:             1rem;
  --radius-xl:             1.25rem;

  --font-sans: 'Heebo', 'Assistant', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --default-font-family: var(--font-sans);

  /* משתנים פנימיים לשכבה הזאת בלבד.
     --gp-edge הוא צבע המסגרת העבה. נייבי ולא שחור, כדי שהמסגרת
     תשתייך למותג. להחלפה לשחור מלא: #0d0c0a בשתי הערכות. */
  --gp-edge:    #0f3354;
  --gp-display: 'Secular One', 'Heebo', sans-serif;
}

/* ── כהה: בלילה ירוק־הים מוביל ───────────────────────────── */
/* הנייבי כהה מדי מכדי לשמש הדגשה על רקע כהה, ולכן התפקידים
   מתחלפים — ירוק־הים מהלוגו הופך לצבע הפעולה. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:             #10151c;
    --color-surface:        #171d26;
    --color-surface-raised: #1e2530;
    --color-border:         #262e39;
    --color-border-strong:  #48576a;

    --color-text:           #e9eef3;
    --color-text-muted:     #b3bfcb;
    --color-text-faint:     #8593a1;

    --color-accent:         #4fb3ab;
    --color-accent-hover:   #6ec8c0;
    --color-accent-active:  #8ed8d1;
    --color-accent-bg:      #102f2d;
    --color-accent-border:  #4fb3ab;
    --color-accent-text:    #6ec8c0;
    --color-accent-soft:    #17423d;

    --color-success:        #45c9a0;
    --color-success-bg:     #0f2e24;
    --color-success-border: #24614a;
    --color-success-text:   #8ae3c3;

    --color-warning:        #e8913b;
    --color-warning-bg:     #2f2210;
    --color-warning-border: #70521f;
    --color-warning-text:   #f3c07a;

    --color-danger:         #f2687f;
    --color-danger-bg:      #2f1419;
    --color-danger-border:  #712a35;
    --color-danger-text:    #f9a8b4;

    --color-info:           #63a6ee;
    --color-info-bg:        #11212f;
    --color-info-border:    #2a5480;
    --color-info-text:      #9cc8f5;

    --color-hot:            #fb923c;
    --color-hot-bg:         #2c1a0d;
    --color-hot-border:     #6b3717;
    --color-hot-text:       #fdba74;

    --color-plan:           #a78bfa;
    --color-plan-bg:        #1e1734;
    --color-plan-border:    #402f6b;
    --color-plan-text:      #c4b5fd;

    --color-muted:          #9aa7b4;
    --color-muted-bg:       #1e2530;
    --color-muted-border:   #3a4553;
    --color-muted-text:     #b3bfcb;

    --color-chart-1:        #4fb3ab;
    --color-chart-2:        #63a6ee;
    --color-chart-3:        #fb923c;
    --color-chart-4:        #a78bfa;
    --color-chart-5:        #45c9a0;
    --color-chart-6:        #f472b6;

    --color-row-hover:      #17302e;
    --color-row-stripe:     #141a22;

    --shadow-card:          0 2px 0 rgba(0, 0, 0, .35);
    --shadow-pop:           0 22px 50px -20px rgba(0, 0, 0, .9);

    --gp-edge:              #48576a;
  }
}

:root[data-theme="dark"] {
  --color-bg:             #10151c;
  --color-surface:        #171d26;
  --color-surface-raised: #1e2530;
  --color-border:         #262e39;
  --color-border-strong:  #48576a;

  --color-text:           #e9eef3;
  --color-text-muted:     #b3bfcb;
  --color-text-faint:     #8593a1;

  --color-accent:         #4fb3ab;
  --color-accent-hover:   #6ec8c0;
  --color-accent-active:  #8ed8d1;
  --color-accent-bg:      #102f2d;
  --color-accent-border:  #4fb3ab;
  --color-accent-text:    #6ec8c0;
  --color-accent-soft:    #17423d;

  --color-success:        #45c9a0;
  --color-success-bg:     #0f2e24;
  --color-success-border: #24614a;
  --color-success-text:   #8ae3c3;

  --color-warning:        #e8913b;
  --color-warning-bg:     #2f2210;
  --color-warning-border: #70521f;
  --color-warning-text:   #f3c07a;

  --color-danger:         #f2687f;
  --color-danger-bg:      #2f1419;
  --color-danger-border:  #712a35;
  --color-danger-text:    #f9a8b4;

  --color-info:           #63a6ee;
  --color-info-bg:        #11212f;
  --color-info-border:    #2a5480;
  --color-info-text:      #9cc8f5;

  --color-hot:            #fb923c;
  --color-hot-bg:         #2c1a0d;
  --color-hot-border:     #6b3717;
  --color-hot-text:       #fdba74;

  --color-plan:           #a78bfa;
  --color-plan-bg:        #1e1734;
  --color-plan-border:    #402f6b;
  --color-plan-text:      #c4b5fd;

  --color-muted:          #9aa7b4;
  --color-muted-bg:       #1e2530;
  --color-muted-border:   #3a4553;
  --color-muted-text:     #b3bfcb;

  --color-chart-1:        #4fb3ab;
  --color-chart-2:        #63a6ee;
  --color-chart-3:        #fb923c;
  --color-chart-4:        #a78bfa;
  --color-chart-5:        #45c9a0;
  --color-chart-6:        #f472b6;

  --color-row-hover:      #17302e;
  --color-row-stripe:     #141a22;

  --shadow-card:          0 2px 0 rgba(0, 0, 0, .35);
  --shadow-pop:           0 22px 50px -20px rgba(0, 0, 0, .9);

  --gp-edge:              #48576a;
}

/* ═══════════════════════════════════════════════════════════════
   כללים מבניים
   האפליקציה בנויה על מחלקות שירות של Tailwind, בלי שמות סמנטיים,
   ולכן המיקוד נעשה לפי צירופי מחלקות. שני סלקטורים על אותו
   אלמנט גוברים על מחלקה בודדת, כך שאין צורך ב-important.
   ═══════════════════════════════════════════════════════════════ */

/* כרטיסים — הבלוק המרכזי. מסגרת עבה במקום צל */
[class*="rounded-xl"][class*="shadow-[var(--shadow-card)]"] {
  border-width: 2px;
  border-color: var(--gp-edge);
  border-radius: 18px;
}

/* כפתור ראשי וכפתור משני — פילים */
[class*="rounded-lg"][class*="bg-[var(--color-accent)]"],
[class*="rounded-lg"][class*="border-[var(--color-border-strong)]"] {
  border-radius: 999px;
}
/* צבע המסגרת נכתב כאן במפורש בכוונה.
   ב-index.css של האפליקציה יש ‎* { border-color: var(--color-border) }‎
   מחוץ לכל ‎@layer‎, וכללים בלי שכבה גוברים על מחלקות Tailwind
   ששוכנות ב-@layer utilities. לכן ‎border-[var(--color-border-strong)]‎
   של הכפתור המשני לא מתקבל בפועל — לא רק אצלי, גם היום. */
[class*="rounded-lg"][class*="border-[var(--color-border-strong)]"] {
  border-width: 1.5px;
  border-color: var(--color-border-strong);
}

/* תגיות סטטוס — בלוק מרובע ומודגש במקום פיל דק */
[class*="rounded-full"][class*="border"][class*="text-xs"] {
  border-radius: 6px;
  font-weight: 700;
}

/* טיפוגרפיה — פונט תצוגה לכותרות הגדולות ולמספרים */
h1, h2,
[class*="text-3xl"], [class*="text-2xl"] {
  font-family: var(--gp-display);
  font-weight: 400;
  letter-spacing: -.01em;
}

/* טבלאות — כותרות עמודה מודגשות ולא אפורות־חלשות */
thead th {
  font-weight: 800;
  color: var(--color-text-muted);
}

/* טבעת פוקוס עבה יותר, מתאימה לשפה */
:focus-visible {
  outline-width: 2.5px;
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}