/* The 2026 teacher redesign: the נוכחות and ציונים hubs (teacher/AttendanceHub.js, teacher/GradesHub.js).
   Every rule is scoped to [data-ui="new"]. Brand: sky #175bb0 + mint #2ec4a5, Rubik. */

/* ------------------------------------------------------------ the page -- */
[data-ui="new"] .t3h {
    font-family: 'Rubik', system-ui, sans-serif; color: #12233f; font-variant-numeric: tabular-nums;
    text-align: start; max-width: 1180px; margin: 0 auto;
}
[data-ui="new"] .t3h a, [data-ui="new"] .t3h a:hover, [data-ui="new"] .t3h a:focus { text-decoration: none; }
[data-ui="new"] .t3h-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-bottom: 16px; }
[data-ui="new"] .t3h-head-tx { flex: 1 1 240px; min-width: 0; }
[data-ui="new"] .t3h-head h1 { margin: 0; font-family: inherit; font-size: 30px; font-weight: 800; line-height: 1.2; color: #12233f; letter-spacing: 0; }
[data-ui="new"] .t3h-sub { font-size: 14px; color: #5b6b85; margin-top: 3px; }
[data-ui="new"] .t3h-body { display: flex; flex-direction: column; gap: 18px; }
[data-ui="new"] .t3h-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ cards, chips, icons, bars -- */
[data-ui="new"] .t3h-card {
    display: block; background: #fff; border: 1px solid #dfe8f4; border-radius: 20px; padding: 16px 18px 6px;
    box-sizing: border-box; min-width: 0; color: #12233f;
}
[data-ui="new"] .t3h-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
[data-ui="new"] .t3h-card-h h2 { flex: 1; min-width: 0; margin: 0; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.3; color: #12233f; }
[data-ui="new"] .t3h-loading { padding: 24px 18px; text-align: center; }
[data-ui="new"] .t3h-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; line-height: 1.4;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: #f1f4f9; color: #4a5a73;
}
[data-ui="new"] .t3h-chip.green { background: #e1f4ea; color: #0b6b4a; }
[data-ui="new"] .t3h-chip.amber { background: #fff1df; color: #8a4a00; }
[data-ui="new"] .t3h-chip.red { background: #fde6e8; color: #b0202d; }
[data-ui="new"] .t3h-chip.sky { background: #e6efff; color: #114591; }
[data-ui="new"] .t3h-ibox {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    background: #e6efff; color: #114591;
}
[data-ui="new"] .t3h-ibox.sm { width: 34px; height: 34px; }
[data-ui="new"] .t3h-ibox.red { background: #fde6e8; color: #b0202d; }
[data-ui="new"] .t3h-ibox.green { background: #e1f4ea; color: #0b6b4a; }
[data-ui="new"] .t3h-ibox.amber { background: #fff1df; color: #8a4a00; }
[data-ui="new"] .t3h-bar { display: block; height: 6px; border-radius: 999px; background: #e8eef7; overflow: hidden; }
[data-ui="new"] .t3h-bar > span { display: block; height: 100%; border-radius: 999px; background: #175bb0; }
[data-ui="new"] .t3h-bar > span.mint { background: #2ec4a5; }
[data-ui="new"] .t3h-bar > span.amber { background: #f2b25c; }
[data-ui="new"] .t3h-bar > span.sky { background: #175bb0; }
[data-ui="new"] .t3h-empty {
    display: flex; align-items: center; gap: 10px; padding: 14px 2px 16px; font-size: 14px; color: #5b6b85;
}
[data-ui="new"] .t3h-empty .p3-ico { color: #8090a8; flex-shrink: 0; }

/* buttons */
[data-ui="new"] .t3h-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: 12px;
    border: 1px solid transparent; font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
    box-sizing: border-box; line-height: 1;
}
[data-ui="new"] .t3h-btn.sky { background: #175bb0; color: #fff; }
[data-ui="new"] .t3h-btn.sky:hover { background: #124488; color: #fff; }
[data-ui="new"] .t3h-btn.mint { background: #2ec4a5; color: #053b33; }
[data-ui="new"] .t3h-btn.mint:hover { background: #27b096; color: #053b33; }
[data-ui="new"] .t3h-btn.soft { background: #eef5ff; color: #114591; height: 36px; padding: 0 12px; border-radius: 11px; font-size: 13px; }
[data-ui="new"] .t3h-btn.soft:hover { background: #e0ecff; color: #114591; }
[data-ui="new"] .t3h-btn.line { background: #fff; color: #12233f; border-color: #dfe8f4; }
[data-ui="new"] .t3h-btn.line:hover { border-color: #9cc2f2; color: #12233f; }
/* the links' text colours - stronger than the theme's ":root[data-ui=new] a" / "a:hover" (ui2.css) */
[data-ui="new"] .t3h a.t3h-row-link, [data-ui="new"] .t3h a.t3h-row-link:hover, [data-ui="new"] .t3h a.t3h-row-link:focus,
[data-ui="new"] .t3h a.t3h-tile, [data-ui="new"] .t3h a.t3h-tile:hover, [data-ui="new"] .t3h a.t3h-tile:focus,
[data-ui="new"] .t3h a.t3h-linkcard, [data-ui="new"] .t3h a.t3h-linkcard:hover, [data-ui="new"] .t3h a.t3h-linkcard:focus,
[data-ui="new"] .t3h a.t3h-btn.line, [data-ui="new"] .t3h a.t3h-btn.line:hover, [data-ui="new"] .t3h a.t3h-btn.line:focus { color: #12233f; }
[data-ui="new"] .t3h a.t3h-mark, [data-ui="new"] .t3h a.t3h-mark:hover, [data-ui="new"] .t3h a.t3h-mark:focus,
[data-ui="new"] .t3h a.t3h-mark-big, [data-ui="new"] .t3h a.t3h-mark-big:hover, [data-ui="new"] .t3h a.t3h-mark-big:focus,
[data-ui="new"] .t3h a.t3h-btn.mint, [data-ui="new"] .t3h a.t3h-btn.mint:hover, [data-ui="new"] .t3h a.t3h-btn.mint:focus { color: #053b33; }
[data-ui="new"] .t3h a.t3h-more, [data-ui="new"] .t3h a.t3h-more:focus { color: #114591; }
[data-ui="new"] .t3h a.t3h-more:hover { color: #0b3a7a; }
[data-ui="new"] .t3h-btn:focus-visible, [data-ui="new"] .t3h-row-link:focus-visible, [data-ui="new"] .t3h-tile:focus-visible,
[data-ui="new"] .t3h-mark:focus-visible, [data-ui="new"] .t3h-mark-big:focus-visible, [data-ui="new"] .t3h-linkcard:focus-visible,
[data-ui="new"] .t3h-more:focus-visible { outline: 3px solid #9cc2f2; outline-offset: 2px; }

/* ------------------------------------------------------------ list rows -- */
[data-ui="new"] .t3h-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #eef2f8; color: #12233f; }
[data-ui="new"] .t3h-card > .t3h-row:last-child, [data-ui="new"] .t3h-evlist > .t3h-row:last-child { border-bottom: 0; }
[data-ui="new"] a.t3h-row-link:hover { background: #f7f9fc; color: #12233f; }
[data-ui="new"] .t3h-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
[data-ui="new"] .t3h-tx > b { font-size: 15px; font-weight: 700; line-height: 1.3; }
[data-ui="new"] .t3h-tx > span { font-size: 12.5px; color: #5b6b85; line-height: 1.4; }
[data-ui="new"] .t3h-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
[data-ui="new"] .t3h-chev { flex-shrink: 0; color: #8090a8; display: inline-flex; }
[data-ui="new"] .t3h-mark {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 14px; border-radius: 12px;
    background: #2ec4a5; color: #053b33; font-size: 14px; font-weight: 700;
}
[data-ui="new"] .t3h-mark:hover { background: #27b096; color: #053b33; }

/* ------------------------------------------------------------ נוכחות -- */
[data-ui="new"] .t3h-now { padding: 16px; }
[data-ui="new"] .t3h-now-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #114591; }
[data-ui="new"] .t3h-now-top .t3h-chip { margin-inline-start: auto; }
[data-ui="new"] .t3h-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 999px; background: #9cc2f2; }
[data-ui="new"] .t3h-dot.on { background: #2ec4a5; animation: t3h-pulse 1.6s infinite; }
[data-ui="new"] .t3h-now-title { font-size: 24px; font-weight: 800; line-height: 1.25; margin-top: 8px; }
[data-ui="new"] .t3h-now-sub { font-size: 13px; color: #5b6b85; margin-top: 2px; }
[data-ui="new"] .t3h-mark-big {
    margin-top: 14px; min-height: 54px; padding: 8px 14px; border-radius: 15px; background: #2ec4a5; color: #053b33;
    font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; text-align: center;
}
[data-ui="new"] .t3h-mark-big:hover { background: #27b096; color: #053b33; }
[data-ui="new"] .t3h-now-empty { display: flex; align-items: center; gap: 12px; }
@keyframes t3h-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 196, 165, .55) } 70% { box-shadow: 0 0 0 7px rgba(46, 196, 165, 0) } 100% { box-shadow: 0 0 0 0 rgba(46, 196, 165, 0) } }
@media (prefers-reduced-motion: reduce) {
    [data-ui="new"] .t3h-dot.on { animation: none; }
}

/* ------------------------------------------------------------ ציונים -- */
[data-ui="new"] .t3h-cols { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
[data-ui="new"] .t3h-col-main { flex: 999 1 560px; min-width: 0; }
[data-ui="new"] .t3h-col-side { flex: 1 1 340px; max-width: 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
[data-ui="new"] .t3h-col-side:empty { display: none; }
[data-ui="new"] .t3h-meta { margin: 1px 0 6px; }
[data-ui="new"] .t3h-num { flex-shrink: 0; min-width: 52px; text-align: center; display: flex; flex-direction: column; }
[data-ui="new"] .t3h-num b { font-size: 16px; font-weight: 800; }
[data-ui="new"] .t3h-num small { font-size: 11px; color: #8a4a00; }
[data-ui="new"] .t3h-num.done small { color: #0b6b4a; }
[data-ui="new"] .t3h-num.plan small { color: #114591; }
[data-ui="new"] .t3h-more {
    display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px 0 10px; border-top: 1px solid #eef2f8;
    font-size: 14px; font-weight: 600; color: #114591;
}
[data-ui="new"] .t3h-more:hover { color: #0b3a7a; }

/* the table (from 900px) */
[data-ui="new"] .t3h-evtable { display: none; overflow-x: auto; }
[data-ui="new"] .t3h-table { width: 100%; min-width: 640px; border-collapse: collapse; }
[data-ui="new"] .t3h-table th { padding: 8px; text-align: start; font-size: 12.5px; font-weight: 600; color: #5b6b85; border: 0; }
[data-ui="new"] .t3h-table td { padding: 12px 8px; font-size: 14px; border-top: 1px solid #eef2f8; vertical-align: middle; }
[data-ui="new"] .t3h-table td.t3h-soft { color: #4a5a73; }
[data-ui="new"] .t3h-tdev { display: flex; align-items: center; gap: 10px; }
[data-ui="new"] .t3h-tdev b { display: block; font-size: 14.5px; font-weight: 700; }
[data-ui="new"] .t3h-tdev small { display: block; font-size: 12px; color: #5b6b85; }
[data-ui="new"] .t3h-tdbar { width: 170px; }
[data-ui="new"] .t3h-barline { display: flex; align-items: center; gap: 8px; }
[data-ui="new"] .t3h-barline .t3h-bar { flex: 1; }
[data-ui="new"] .t3h-barline b { font-size: 13px; font-weight: 700; min-width: 38px; }
[data-ui="new"] .t3h-barline b.miss { color: #8a4a00; }
[data-ui="new"] .t3h-barline b.done { color: #0b6b4a; }
[data-ui="new"] .t3h-barline b.plan { color: #114591; }
[data-ui="new"] .t3h-table td.t3h-tdact { text-align: end; white-space: nowrap; }

/* a periodic group: name, class size and the two ways in on one row */
[data-ui="new"] .t3h-grp { padding: 12px 0; border-bottom: 1px solid #eef2f8; }
[data-ui="new"] .t3h-grp:last-child { border-bottom: 0; }
[data-ui="new"] .t3h-grp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
[data-ui="new"] .t3h-grp-h b { font-size: 15px; font-weight: 700; min-width: 0; }
[data-ui="new"] .t3h-grp-h span { flex-shrink: 0; font-size: 12.5px; color: #5b6b85; }
[data-ui="new"] .t3h-grp-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
[data-ui="new"] .t3h-grp-acts.one { grid-template-columns: minmax(0, 1fr); }
[data-ui="new"] .t3h-tile { display: block; border-radius: 13px; border: 1px solid #dfe8f4; padding: 9px 10px; color: #12233f; background: #fff; }
[data-ui="new"] .t3h-tile:hover { border-color: #9cc2f2; background: #f7f9fc; color: #12233f; }
[data-ui="new"] .t3h-tile-l { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
[data-ui="new"] .t3h-tile-l b.mint { color: #0a6f5d; }
[data-ui="new"] .t3h-tile-l b.sky { color: #114591; }

[data-ui="new"] .t3h-linkcard { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
[data-ui="new"] .t3h-linkcard:hover { border-color: #9cc2f2; color: #12233f; }

/* the phone shows the "חדש" button in the card, a computer shows the page's own */
[data-ui="new"] .t3h-phone-only { display: none; }

/* ------------------------------------------------------------ from 900px -- */
@media (min-width: 900px) {
    [data-ui="new"] .t3h-att { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
    [data-ui="new"] .t3h-att .t3h-recent { grid-column: 1 / -1; }
    [data-ui="new"] .t3h-evlist { display: none; }
    [data-ui="new"] .t3h-evtable { display: block; }
}

/* ------------------------------------------------------------ below 900px -- */
@media (max-width: 899px) {
    [data-ui="new"] .t3h-col-main, [data-ui="new"] .t3h-col-side { flex: 1 1 100%; max-width: none; }
    [data-ui="new"] .t3h-desk { display: none; }
    [data-ui="new"] .t3h-phone-only { display: inline-flex; }
    [data-ui="new"] .t3h-card { border-radius: 18px; padding: 14px 14px 4px; }
    [data-ui="new"] .t3h-now { padding: 16px; }
    [data-ui="new"] .t3h-card-h h2 { font-size: 16px; }
    [data-ui="new"] .t3h-body { gap: 14px; }
}

/* ------------------------------------------------------------ phone: the sky band continues under the title -- */
@media (max-width: 767px) {
    [data-ui="new"] .t3h-head {
        margin: -12px -10px 0; padding: 18px 16px 58px; display: block;
        background-color: #175bb0;
        background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 30px);
    }
    [data-ui="new"] .t3h-head h1 { color: #fff; font-size: 26px; }
    [data-ui="new"] .t3h-head .t3h-sub { color: rgba(255,255,255,.92); font-size: 13px; }
    [data-ui="new"] .t3h-head + .t3h-body { margin-top: -44px; position: relative; }
    [data-ui="new"] .t3h-head + .t3h-body > .t3h-card:first-child,
    [data-ui="new"] .t3h-head + .t3h-body > .t3h-col-main > .t3h-card { box-shadow: 0 12px 28px rgba(16, 42, 92, .12); }
}

@media print {
    [data-ui="new"] .t3h-head { background: none; color: #12233f; margin: 0; padding: 0 0 12px; }
    [data-ui="new"] .t3h-head h1 { color: #12233f; }
    [data-ui="new"] .t3h-mark, [data-ui="new"] .t3h-mark-big, [data-ui="new"] .t3h-btn { display: none; }
}