/* css/trace_table.css
   ───────────────────────────────────────────────────────────────────────────
   טבלת מעקב. נטען אחרי ds_blocks.css ומשתמש באותם משתנים בדיוק, ולכן הוא
   מקבל את הנושא הבהיר של דף המורה ואת הנושא הכהה של code_ide.php בלי
   שורת קוד נוספת בשום דף.

   שלושה צבעי מצב נוספים מוגדרים כאן, עם ברירת מחדל בהירה. דף כהה שכבר
   דורס את משתני ה-ds יכול לדרוס גם אותם.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --tt-ok:     #2f855a;
    --tt-ok-bg:  rgba(47, 133, 90, 0.12);
    --tt-bad:    #c53030;
    --tt-bad-bg: rgba(197, 48, 48, 0.10);
    --tt-focus:  #3182ce;
}

/* ── מעטפת ──────────────────────────────────────────────────────────────── */
/*
   הפריסה נקבעת לפי רוחב *המכל* ולא לפי רוחב החלון, ולכן @container ולא
   @media. הטבלה יושבת בפאנל התיאור של code_ide.php, שרוחבו כ-250 פיקסל
   גם על מסך של 1400 — שאילתת מדיה הייתה נותנת שם שתי עמודות דחוסות.

   ברירת המחדל היא עמודה אחת: היא נכונה בפאנל הצר, והיא גם מה שמקבל דפדפן
   בלי תמיכה ב-@container.
*/
.tt-wrap { container-type: inline-size; }

.tt {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@container (min-width: 620px) {
    .tt {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        gap: 14px;
        align-items: start;
    }
}

/* מכל צר — כל פיקסל נחשב */
@container (max-width: 420px) {
    .tt-code  { font-size: 12px; line-height: 1.65; }
    .tt-grid  { font-size: 12px; }
    .tt-grid th,
    .tt-given { padding: 6px 4px; }
    .tt-in    { padding: 6px 4px; min-width: 46px; }
    .tt-line  { padding: 6px 6px; }
}

/* ── לוח הקוד ───────────────────────────────────────────────────────────── */
.tt-code {
    direction: ltr;
    text-align: left;
    background: var(--ds-cell-bg);
    border: 1px solid var(--ds-line);
    border-radius: 8px;
    padding: 8px 0;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.75;
}
.tt-code-line {
    display: flex;
    gap: 10px;
    padding: 0 12px;
    white-space: pre;
    color: var(--ds-cell-fg);
    border-inline-start: 3px solid transparent;
}
.tt-code-num {
    flex: 0 0 auto;
    min-width: 16px;
    text-align: right;
    color: var(--ds-muted);
    user-select: none;
}
.tt-code-active {
    background: var(--tt-ok-bg);
    border-inline-start-color: var(--tt-ok);
}

/* ── הטבלה ──────────────────────────────────────────────────────────────── */
.tt-grid-wrap { overflow-x: auto; }

.tt-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.tt-grid th,
.tt-grid td {
    border: 1px solid var(--ds-line);
    padding: 0;
    text-align: center;
}
/* גבול יחיד בין תאים סמוכים */
.tt-grid th + th,
.tt-grid td + td { border-inline-start: 0; }
.tt-grid tr + tr th,
.tt-grid tr + tr td { border-top: 0; }

.tt-grid th {
    padding: 7px 8px;
    background: var(--ds-panel);
    color: var(--ds-fg);
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* שם עמודה ארוך נשבר לשתי שורות במקום להיחתך בגלילה אופקית */
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.tt-grid th.tt-h-line {
    font-family: inherit;
    font-weight: 600;
    color: var(--ds-muted);
    font-size: 12px;
}

.tt-line {
    width: 1%;
    padding: 6px 10px;
    color: var(--ds-muted);
    background: var(--ds-panel);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}

/* תא נתון מראש — חלק מהשאלה, לא משהו למלא */
.tt-given {
    padding: 7px 8px;
    background: var(--ds-cell-bg);
    color: var(--ds-cell-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── תא למילוי ──────────────────────────────────────────────────────────── */
.tt-in {
    width: 100%;
    min-width: 62px;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    padding: 7px 8px;
    background: transparent;
    color: var(--ds-fg);
    text-align: center;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    unicode-bidi: plaintext;
}
.tt-in::placeholder { color: var(--ds-muted); opacity: 0.55; }

.tt-in:focus {
    box-shadow: inset 0 0 0 2px var(--tt-focus);
    border-radius: 3px;
}
.tt-in.tt-ok  { background: var(--tt-ok-bg);  color: var(--tt-ok);  font-weight: 700; }
.tt-in.tt-bad { background: var(--tt-bad-bg); color: var(--tt-bad); font-weight: 700; }

/* ── סרגל שליטה ─────────────────────────────────────────────────────────── */
.tt-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.tt-btn {
    padding: 6px 13px;
    border: 1px solid var(--ds-line);
    border-radius: 6px;
    background: var(--ds-panel);
    color: var(--ds-fg);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.tt-btn:hover  { border-color: var(--tt-focus); color: var(--tt-focus); }
.tt-btn:focus-visible { outline: 2px solid var(--tt-focus); outline-offset: 2px; }
.tt-btn-main {
    background: var(--tt-focus);
    border-color: var(--tt-focus);
    color: #fff;
    font-weight: 600;
}
.tt-btn-main:hover { opacity: 0.9; color: #fff; }

/* ── מד התקדמות ושורת מצב ───────────────────────────────────────────────── */
.tt-meter {
    flex: 1 1 90px;
    height: 5px;
    min-width: 70px;
    border-radius: 3px;
    background: var(--ds-line);
    overflow: hidden;
}
.tt-meter-fill {
    height: 100%;
    width: 0;
    background: var(--tt-ok);
    transition: width 160ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .tt-meter-fill { transition: none; }
}

.tt-status {
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--ds-muted);
}
.tt-status-work { color: var(--ds-fg); }
.tt-status-hint { color: var(--tt-focus); }
.tt-status-done { color: var(--tt-ok); font-weight: 700; }

/* ── תצוגת המורה: הפתרון גלוי ───────────────────────────────────────────── */
.tt-answer {
    padding: 7px 8px;
    color: var(--tt-ok);
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.tt-note {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ds-muted);
}


/* ── הגדלה למסך מלא ─────────────────────────────────────────────────────── */
/*
   אותו אלמנט .tt עובר לכאן ובחזרה, ולכן הוא מגיע בלי משתני הצבע של הדף
   שממנו בא. trace_table.js מעתיק אותם אל .tt-zoom בפתיחה; הערכים כאן הם
   רק רשת ביטחון אם ההעתקה נכשלה.
*/
.tt-zoom {
    --ds-fg: #2d3748; --ds-muted: #718096; --ds-line: #cbd5e0;
    --ds-cell-bg: #e6f1fb; --ds-cell-fg: #0c447c; --ds-panel: #f7fafc;

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    padding: 18px 14px;
    overflow: auto;
    background: rgba(12, 17, 28, 0.74);
    overscroll-behavior: contain;
}
.tt-zoom.open { display: block; }

.tt-zoom-panel {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
    border: 1px solid var(--ds-line);
    border-radius: 12px;
    background: var(--ds-panel);
    color: var(--ds-fg);
}
.tt-zoom-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--ds-fg);
    font-size: 14px;
}

/* המכל שלפיו נמדדת הפריסה בתוך השכבה — כאן יש מקום לשתי עמודות */
.tt-zoom-body { container-type: inline-size; }

/* בתוך השכבה אין מה להגדיל */
.tt-zoom .tt-btn-zoom { display: none; }